Mermaid Diagrams Skill

Generates Mermaid diagrams and renders them to PNG using the mmdc CLI.

Reference Files

• - Architecture patterns (flowchart, C4, cloud, network, microservices) → INLINECODE1
• Sequence diagram patterns (API flows, auth, CI/CD, DLP flows) → INLINECODE2

Load the relevant reference file based on diagram type requested.

Rendering Tool

Use mermaid.ink (free online renderer, no browser/install needed):

CODEBLOCK0

• - Output directory: INLINECODE3
• Width: 2048px default; increase for very wide diagrams (&width=3000)
• Always create output directory first: INLINECODE5

Workflow

1. Identify Diagram Type

• - Network/system/cloud/microservices → use flowchart or INLINECODE7
• API/auth/data flows, step-by-step processes → use INLINECODE8
• When in doubt: sequence for "how does X work step by step", architecture for "what does X look like"

2. Load Reference File

• - Architecture → INLINECODE9
• Sequence → INLINECODE10

3. Generate Mermaid Code

• - Write complete, valid Mermaid syntax
• Use descriptive node labels (not just A, B, C)
• Use subgraphs to group related components in architecture diagrams
• Use alt/loop/note blocks to add clarity in sequence diagrams
• Match the style of the patterns in the reference file

4. Save .mmd File

Use kebab-case, descriptive filenames: auth-flow.mmd, aws-architecture.mmd, INLINECODE14

5. Render to PNG via mermaid.ink

6. Confirm Output

Tips

• - flowchart LR for left-to-right pipelines and network flows
• INLINECODE17 for top-down hierarchies and cloud stacks
• Wide diagrams: increase -w (width); tall diagrams: increase -H (height)
• For very complex diagrams, break into multiple diagrams
• Always include a title comment at the top of the .mmd file: INLINECODE20