hhk7734/flowchart

Update Flowchart

When to use this skill

Use this skill when creating a new Mermaid flowchart or updating an existing one. This covers syntax for nodes, shapes, links, subgraphs, and styling.

Instructions

1. Start with flowchart: Every flowchart must start with this keyword followed by the direction.
   • flowchart TD (Top-Down)
   • flowchart LR (Left-Right)
   • flowchart BT (Bottom-Top)
   • flowchart RL (Right-Left)
2. Define Nodes:
   • Metadata Syntax: id@{ shape: <shape-name>, label: "label text" }
   • Common Shapes:
     • rect: Rectangle (default)
     • rounded: Rounded Rectangle
     • stadium: Stadium
     • subroutine: Subroutine
     • cyl: Cylinder (Database)
     • circ: Circle
     • dbl-circ: Double Circle
     • diam: Diamond (Decision)
     • hex: Hexagon
     • lean-r / lean-l: Parallelogram (Lean Right/Left)
     • trap-b / trap-t: Trapezoid (Base Bottom/Top)
     • odd: Odd Shape
     • event: Event
     • proc: Process
     • doc: Document
     • manual-input: Manual Input
     • manual-file: Manual File
     • card: Card
     • stored-data: Stored Data
   • Note: Legacy syntax (e.g., id[text]) is still supported but metadata syntax is preferred for newer features.
3. Define Links:
   • Solid: A --> B
   • Dotted: A -.-> B
   • Thick: A ==> B
   • Open: A --- B
   • With text:
     • A -->|text| B
     • A -- text --> B
     • A -. text .-> B
     • A == text ==> B
4. Special Characters:
   • Use quotes for text with special characters: id["Text with (special) chars"]
   • For multi-line labels, use <br/> instead of \n: id["Line 1<br/>Line 2"]
5. Subgraphs:

   subgraph Title
       direction TB
       A --> B
   end
   

6. Styling:
   • style id fill:#f9f,stroke:#333,stroke-width:4px
   • classDef className fill:#f9f,stroke:#333
   • class id className

Example

flowchart LR
    A@{ shape: rect, label: "Start" } --> B@{ shape: diam, label: "Is it working?" }
    B -- Yes --> C@{ shape: rect, label: "Great!" }
    B -- No --> D@{ shape: rect, label: "Debug" }
    D --> B

    subgraph SubSystem
        direction TB
        E@{ shape: cyl, label: "Database" } <--> F@{ shape: rounded, label: "API" }
    end

    C --> F