Agent skill · magnus919
mermaid-diagrams
Author, render, and troubleshoot Mermaid diagrams for documentation, architecture, processes, and technical communication. Use when a text-based diagram needs to stay versionable.
What it needs
About 5k tokens when loaded.
What this skill does
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: A plain text outline communicates the relationship more clearly than a diagram. The target renderer cannot execute Mermaid and no pre-rendering path is available. PDF Output — Pre-render Required Mermaid code blocks ( ) do NOT render in the Pandoc → HTML → Puppeteer PDF pipeline. The pipeline generates static HTML with no JavaScript execution. For any diagram destined for PDF output: 1. Create the diagram as a standalone .mmd file 2. Pre-render to SVG: npx @mermaid-js/mermaid-cli -i diagram.mmd -o diagram.svg --width 800 3. Choose one embedding method: use raw inline SVG by default, or base64 data URIs when the renderer corrupts raw SVG. 4. Strip hardcoded max-width pixel values from the SVG tags 5. Use flowchart TD (portrait) not flowchart LR (landscape) — see references/portrait-layout.md 6. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills magnus919/mermaid-diagrams