All skills
softaworks avatar

/mermaid-diagrams

@b00cf84
by softaworkssoftaworks/agent-toolkit2.5k stars
230

Comprehensive guide for creating software diagrams using Mermaid syntax. Use when users need to create, visualize, or document software through diagrams including class diagrams (domain modeling, object-oriented design), sequence diagrams (application flows, API interactions, code execution), flowcharts (processes, algorithms, user journeys), entity relationship diagrams (database schemas), C4 architecture diagrams (system context, containers, components), state diagrams, git graphs, pie charts, gantt charts, or any other diagram type. Triggers include requests to "diagram", "visualize", "model", "map out", "show the flow", or when explaining system architecture, database design, code structure, or user/application flows.

Use this Skill: https://skilld.dev/gh/softaworks/agent-toolkit/mermaid-diagrams

This session only. Nothing lands on disk.

referencesclass-diagrams.md

≈1.7k tokens on demand. Your agent reads this file only when SKILL.md points to it.

Class Diagrams

Class diagrams model object-oriented designs and domain models. They show entities (classes), their attributes/methods, and relationships.

Basic Syntax

classDiagram
    ClassName

Defining Classes with Members

classDiagram
    class BankAccount {
        +String owner
        +Decimal balance
        -String accountNumber
        +deposit(amount)
        +withdraw(amount)
        +getBalance() Decimal
    }

Visibility modifiers:

  • + Public
  • - Private
  • # Protected
  • ~ Package/Internal

Member syntax:

  • +type attribute - Attribute with type
  • +method(params) ReturnType - Method with parameters and return type

Relationships

Association (--)

Loose relationship where entities use each other but exist independently.

classDiagram
    Title -- Genre

Composition (*--)

Strong ownership - child cannot exist without parent. When parent is deleted, children are deleted.

classDiagram
    Order *-- LineItem
    House *-- Room

Aggregation (o--)

Weaker ownership - child can exist independently. Represents "has-a" relationship.

classDiagram
    Department o-- Employee
    Playlist o-- Song

Inheritance (<|--)

"Is-a" relationship. Child class inherits from parent class.

classDiagram
    Animal <|-- Dog
    Animal <|-- Cat
    
    class Animal {
        +String name
        +makeSound()
    }
    
    class Dog {
        +bark()
    }

Dependency (<..)

One class depends on another, often as a parameter or local variable.

classDiagram
    OrderProcessor <.. PaymentGateway

Realization/Implementation (<|..)

Class implements an interface.

classDiagram
    class Drawable {
        <<interface>>
        +draw()
    }
    Drawable <|.. Circle
    Drawable <|.. Rectangle

Multiplicity

Show how many instances participate in a relationship:

classDiagram
    Customer "1" --> "0..*" Order : places
    Order "1" *-- "1..*" LineItem : contains
    Author "1..*" -- "1..*" Book : writes

Common multiplicities:

  • 1 - Exactly one
  • 0..1 - Zero or one
  • 0..* or * - Zero or many
  • 1..* - One or many
  • m..n - Between m and n

Relationship Labels

classDiagram
    Customer --> Order : places
    Order --> Product : contains
    Driver --> Vehicle : drives

Class Stereotypes

Mark special class types:

classDiagram
    class IRepository {
        <<interface>>
        +save(entity)
        +findById(id)
    }
    
    class UserService {
        <<service>>
        +createUser()
    }
    
    class UserDTO {
        <<dataclass>>
        +String name
        +String email
    }

Abstract Classes and Methods

classDiagram
    class Shape {
        <<abstract>>
        +int x
        +int y
        +draw()* abstract
        +move(x, y)
    }
    
    Shape <|-- Circle
    Shape <|-- Rectangle

Generic Classes

classDiagram
    class List~T~ {
        +add(item: T)
        +get(index: int) T
    }
    
    List~String~ <-- StringProcessor

Comprehensive Example: E-Commerce Domain

classDiagram
    %% Core entities
    class Customer {
        +UUID id
        +String email
        +String name
        +Address shippingAddress
        +placeOrder(cart: Cart) Order
        +getOrderHistory() List~Order~
    }
    
    class Order {
        +UUID id
        +DateTime orderDate
        +OrderStatus status
        +Decimal total
        +calculateTotal() Decimal
        +ship()
        +cancel()
    }
    
    class LineItem {
        +int quantity
        +Decimal pricePerUnit
        +getSubtotal() Decimal
    }
    
    class Product {
        +UUID id
        +String name
        +String description
        +Decimal price
        +int stockQuantity
        +reduceStock(quantity: int)
        +isAvailable() bool
    }
    
    class Category {
        +String name
        +String description
    }
    
    class Cart {
        +addItem(product: Product, quantity: int)
        +removeItem(product: Product)
        +getTotal() Decimal
        +clear()
    }
    
    %% Relationships
    Customer "1" --> "0..*" Order : places
    Customer "1" --> "1" Cart : has
    Order "1" *-- "1..*" LineItem : contains
    LineItem "1" --> "1" Product : references
    Product "0..*" --> "1" Category : belongs to
    Cart "1" o-- "0..*" Product : contains
    
    %% Enums
    class OrderStatus {
        <<enumeration>>
        PENDING
        PAID
        SHIPPED
        DELIVERED
        CANCELLED
    }
    
    Order --> OrderStatus

Domain-Driven Design Patterns

Entities

classDiagram
    class User {
        <<entity>>
        -UUID id
        +String email
        +String name
    }

Value Objects

classDiagram
    class Money {
        <<value object>>
        +Decimal amount
        +String currency
        +add(other: Money) Money
    }
    
    class Address {
        <<value object>>
        +String street
        +String city
        +String postalCode
    }

Aggregates

classDiagram
    class Order {
        <<aggregate root>>
        -UUID id
        +addLineItem(item)
        +removeLineItem(item)
    }
    
    Order *-- LineItem

Tips for Effective Class Diagrams

  1. Start with core entities - Add attributes and methods incrementally
  2. Show only relevant details - Omit obvious getters/setters unless important
  3. Use appropriate relationships - Choose between association, aggregation, and composition carefully
  4. Add multiplicity - Clarifies how many instances participate
  5. Group related classes - Use notes or visual proximity
  6. Document invariants - Use notes to explain business rules

Common Patterns

Repository Pattern

classDiagram
    class IRepository~T~ {
        <<interface>>
        +save(entity: T)
        +findById(id: UUID) T
        +delete(entity: T)
    }
    
    class UserRepository {
        +findByEmail(email: String) User
    }
    
    IRepository~User~ <|.. UserRepository

Factory Pattern

classDiagram
    class ShapeFactory {
        +createShape(type: String) Shape
    }
    
    class Shape {
        <<abstract>>
        +draw()*
    }
    
    ShapeFactory ..> Shape : creates
    Shape <|-- Circle
    Shape <|-- Rectangle

Strategy Pattern

classDiagram
    class PaymentProcessor {
        -PaymentStrategy strategy
        +setStrategy(strategy: PaymentStrategy)
        +processPayment(amount: Decimal)
    }
    
    class PaymentStrategy {
        <<interface>>
        +pay(amount: Decimal)*
    }
    
    PaymentStrategy <|.. CreditCardPayment
    PaymentStrategy <|.. PayPalPayment
    PaymentProcessor --> PaymentStrategy

Source: SKILL.md on GitHub

No alerts16d5 checks · Risk SAFE
  • Gen Agent Trust Hub16d

    The skill is a comprehensive documentation set and syntax guide for creating software diagrams using Mermaid. It provides clear instructions and examples for various diagram types and references official, well-known tools and resources. No security issues were detected.

  • Socket16d

    No alerts

  • Snyk16d

    Risk: LOW · No issues

  • Runlayer7mo

    9 files scanned · No issues

  • ZeroLeaks5mo

    Score: 93/100 · 2 sections analyzed

Signed by skilld at b00cf84. This ties the file your Agent reads to that commit on GitHub. It does not review the instructions.

Last checked against GitHub 2 months ago.

Dormantupdated 8 months ago
  • Documentation
  • mermaid
  • diagrams
  • visualization
  • architecture
  • flowchart
  • sequence-diagram
  • class-diagram
  • erd
  • c4

README badge

README badge for softaworks/agent-toolkit/mermaid-diagrams

Guides Claude in creating software diagrams using Mermaid's text-based syntax, covering class diagrams for domain modeling, sequence diagrams for API flows, flowcharts for processes, ERDs for database schemas, C4 architecture diagrams, and state/git/gantt charts. Use this skill when documenting system architecture, visualizing code structure, or explaining application flows.

Generated from the current SKILL.md.

What diagram types does this skill support?
Mermaid supports class diagrams, sequence diagrams, flowcharts, entity relationship diagrams, C4 architecture diagrams, state diagrams, git graphs, Gantt charts, and pie/bar charts.
Can I use Mermaid diagrams in GitHub or GitLab?
Yes. GitHub and GitLab automatically render Mermaid diagrams in Markdown files without additional configuration.
How do I export Mermaid diagrams as images?
You can use the Mermaid Live Editor for online export, the Mermaid CLI (`mmdc` command), or Docker to convert `.mmd` files to PNG or SVG.
Does this skill cover styling and theming?
Yes. The skill includes configuration options for themes (default, forest, dark, neutral, base), layout algorithms (dagre, elk), and visual appearance (classic or hand-drawn look).

Generated from the current SKILL.md. These answers refresh after source changes.