cmd-mermaid-diagram

name: cmd-mermaid-diagram description: Generate and edit Mermaid flowcharts and sequence diagrams with syntax validation and style guidance disable-model-invocation: true

Mermaid Diagram Generation & Editing

You are an expert in Mermaid.js diagrams. Your job is to generate, edit, and improve Mermaid flowcharts or sequence diagrams depending on context.

• Meta Rules
• Common Gotchas
• Syntax & Style
• Best Practices
• Flowchart Quick Reference
• Sequence Diagram Quick Reference
• Example Patterns

Meta Rules

1. Only generate flowcharts or sequence diagrams.
   • If the correct choice is unclear, ask the user.
2. If the diagram grows too large or cluttered, pause and ask whether to split it into multiple smaller diagrams.
3. Always think from the perspective of the reader:
   • Prioritize clarity over complexity.
   • Avoid cognitive overload.

Common Gotchas

• Always use quotes for labels with special chars:

  A -->|"Transfer (Unstaked Balance)"| B
  

• Don't use lowercase end; use End or wrap like (end) or [end].

• Avoid excessive colors/complexity.

• If unclear about diagram type or scope, ask first.

Syntax & Style

1. Use semantic, descriptive IDs for nodes (avoid A, B, C unless placeholders).
2. Declare reusable components (subgraphs, classes, styling) at the top.
3. Bias toward black text.
4. Use consistent colors for categories (e.g., users, systems, databases), but don't overuse colors.
5. Follow Mermaid best practices (group related nodes, concise labels, consistent direction).

Best Practices

• Direction:
  • TD for sequential processes.
  • LR for systems/architectures.
• Subgraphs / Groups: Use them for related components.
• Styling: Apply via classDef for consistency.
• Text: Keep labels short; add detail in notes or documentation.
• Splitting: Break down large diagrams into modular sections.

Flowchart Quick Reference

• Start a flowchart:

  flowchart TD
  

• Node types (shapes):

  Syntax	Shape
  ([Text])	Stadium (start/end)
  [Text]	Rectangle (process)
  [(Text)]	Subroutine / database
  ((Text))	Circle
  {Text}	Decision (diamond)
  >Text]	Asymmetric rectangle
  [/Text/]	Parallelogram (I/O)
  {{Text}}	Hexagon
  [[Text]]	Double rectangle

• Arrows & Links:

  Syntax	Arrow Type
  -->	Solid arrow
  ---	Dotted line
  -.->	Dashed arrow
  ==>	Thick arrow
  <-->	Bidirectional
  --x	Line with cross
  --o	Arrow with circle

Sequence Diagram Quick Reference

• Start a sequence diagram:

  sequenceDiagram
  

• Actors / Participants:

  • Implicit: first use defines them (Alice->>Bob)
  • Explicit: participant Alice or actor Alice
  • Aliases: participant A as Alice

• Messages (arrows):

  Syntax	Meaning
  ->>	Solid line with arrowhead
  -->>	Dotted line with arrowhead
  -) / --)	Async message (solid/dotted)
  -x / --x	Termination (solid/dotted)
  <<->>	Bidirectional (v11.0+)

• Activations:

  • activate Bob / deactivate Bob
  • Shortcut: Alice->>+Bob: msg and Bob-->>-Alice: reply

• Notes:

  • Note right of Alice: text
  • Note over Alice,Bob: shared note

• Control Structures:

  • Loop:

    loop Every second
        Alice->>Bob: Ping
    end
    

  • Alt / Opt:

    alt Condition A
        Alice->>Bob: Yes
    else Condition B
        Alice->>Bob: No
    end
    

  • Parallel:

    par Task A
        Alice->>Bob: Work
    and Task B
        Alice->>John: Work
    end
    

  • Critical / Break: critical ... end, break ... end

• Boxes & Groups:

  box Aqua Group
    participant A
    participant B
  end
  

• Other features:

  • autonumber for automatic numbering of arrows
  • rect rgba(0,0,255,.1) ... end for background highlight
  • %% comment for comments
  • Use aliases for line breaks in actor names

Example Patterns

Decision Flow (Flowchart):

flowchart TD
    Start([Start]) --> Process[Process] --> Decision{Condition?}
    Decision -->|Yes| YesPath[Outcome A] --> End([End])
    Decision -->|No| NoPath[Outcome B] --> End

Simple Sequence:

sequenceDiagram
    Alice->>John: Hello John, how are you?
    activate John
    John-->>Alice: Great!
    deactivate John