Mermaid Diagrams

Portable Mermaid.js diagramming for architectural documentation. Not tied to any blog platform, theme, or rendering engine. Diagrams can be rendered via CLI, embedded in markdown, or served as HTML snippets.

When to Use

Load this skill when:

• Creating C4 structural views (use Structurizr DSL for production; flowchart workarounds for inline markdown)
• Producing sequence diagrams for interaction flows
• Designing flowcharts for process documentation
• Building state/class/ER diagrams for specification
• Generating any diagram that needs to render in both agent-facing and human-facing contexts

Do NOT load when:

• You only need static ASCII architecture (use architecture-diagram skill)
• You're embedding in a Hugo site that uses custom theme rendering (load the appropriate theme skill)

PDF Output — Pre-render Required