How this skill is triggered — by the user, by Claude, or both
Slash command
/generate:diagramThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Create the mermaid.js diagram requested by the user.
Create the mermaid.js diagram requested by the user.
$ARGUMENTS.prompt to understand what the user wants to represent.$ARGUMENTS.type.We want to diagram all the things we need to visualize to understand the process, information flow, or system we care about. We want to visualize major steps and data involved in system processes. Be pragmatic: good diagramming is not rigidly about classes or services, or a particular "type" of information. We prefer to use modified data flow diagrams with the conventions defined below.
Data Flow Diagrams (DFDs) convey the origin, system of record, and conveyors of data. We use a modified version of DFDs for system design.
Our diagrams adopt the following conventions:
The mmdc CLI tool (mermaid-cli) renders .mmd or .md source files into image files. Use it when the user wants a PNG, SVG, or PDF output rather than inline Markdown.
Write the diagram source to a .mmd file, then render it:
# SVG (default when no -e flag)
mmdc -i diagram.mmd -o diagram.svg
# PNG
mmdc -i diagram.mmd -o diagram.png
# PDF
mmdc -i diagram.mmd -o diagram.pdf
The output format is inferred from the -o file extension. Override it explicitly with -e svg|png|pdf.
| Flag | Description | Example |
|---|---|---|
-i | Input .mmd or .md file (required) | -i input.mmd |
-o | Output file path | -o output.png |
-t | Theme: default, forest, dark, neutral | -t dark |
-b | Background color for PNG/SVG | -b transparent or -b '#F0F0F0' |
-w | Page width in pixels (default 800) | -w 1200 |
-H | Page height in pixels (default 600) | -H 900 |
-s | Puppeteer scale factor (default 1) | -s 2 |
-c | JSON config file for mermaid options | -c config.json |
-C | CSS file for custom styling/animation | -C style.css |
-q | Suppress log output | -q |
-e | Force output format | -e png |
PNG with dark theme and transparent background:
mmdc -i input.mmd -o output.png -t dark -b transparent
High-resolution PNG (2× scale):
mmdc -i diagram.mmd -o diagram.png -s 2 -w 1600 -H 1200
SVG with custom CSS animations:
mmdc -i diagram.mmd -o diagram.svg --cssFile style.css
Process all diagrams in a Markdown file (generates separate SVG artefacts and updates image references in the output):
mmdc -i readme.template.md -o readme.md
Read diagram from stdin, write SVG to stdout:
echo "graph LR; A-->B" | mmdc -i - -o - -e svg
.mmd file (or inline in .md).mmdc with the desired output format and options.-w, -H, -s, and -t flags.-b transparent.Creates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.
npx claudepluginhub christianromney/claude-plugins --plugin generate