diagram

Diagram Skill

Gerar diagramas tecnicos com Mermaid (preferido), PlantUML ou D2.

Decision Matrix

Rendering

Usar o MCP tool mcp__mermaid__generate para renderizar diagramas como PNG/SVG:

mcp__mermaid__generate({
  code: "flowchart LR\n  A --> B",
  name: "my-diagram",
  outputFormat: "png",
  theme: "default",
  folder: "/tmp"
})

Temas disponiveis: default, forest, dark, neutral

Mermaid Syntax

Flowchart

flowchart LR
    A[Start] --> B{Decision?}
    B -->|Yes| C[Process A]
    B -->|No| D[Process B]
    C --> E[End]
    D --> E

    style A fill:#4361ee,color:#fff
    style E fill:#2d6a4f,color:#fff
    style B fill:#f4845f,color:#fff

Direcoes: TB (top-bottom), BT, LR (left-right), RL

Shapes: [rect], (rounded), {diamond}, ([stadium]), [[subroutine]], [(cylinder)], ((circle)), >flag], {hexagon}

Sequence Diagram

sequenceDiagram
    actor U as User
    participant F as Frontend
    participant A as API
    participant D as Database

    U->>F: Click login
    F->>A: POST /auth/login
    A->>D: SELECT user
    D-->>A: User data
    A-->>F: JWT token
    F-->>U: Redirect to dashboard

    Note over A,D: Auth flow
    rect rgb(200, 220, 255)
        A->>D: Log access
        D-->>A: OK
    end

Arrows: ->> (solid), -->> (dashed), -x (cross), -) (async)

Class Diagram

classDiagram
    class User {
        +String id
        +String name
        +String email
        +login() bool
        +logout() void
    }
    class Order {
        +String id
        +Date createdAt
        +Float total
        +addItem(item) void
        +checkout() bool
    }
    class Product {
        +String id
        +String name
        +Float price
    }

    User "1" --> "*" Order : places
    Order "*" --> "*" Product : contains