diagram
Skill4 starsChanged 6 months agoMITView on GitHub
This skill should be used when the user asks to "render a diagram", "draw a diagram", "create a diagram from text", "convert PlantUML to SVG", "render Mermaid", "render PlantUML", "render GraphViz", "render D2", "render DBML", "render BPMN", "convert .puml to png", "convert .mmd to svg", "make a flowchart", "make a sequence diagram", "make an ERD", "draw a UML diagram", "diagram as code", "Kroki", "C4 diagram", or otherwise needs to convert textual diagram source (PlantUML, Mermaid, GraphViz/dot, D2, DBML, BPMN, Excalidraw, Erd, Ditaa, Nomnoml, Pikchr, Structurizr, SvgBob, TikZ, Vega/Vega-Lite, WaveDrom, WireViz, BlockDiag family) into SVG, PNG, PDF, or JPEG. Backed by the Kroki HTTP service — no local diagram toolchain required.
51 other projects use a version of this.
Adopted by
Most recently taken up by
- jame-hv/brse-toolkittheir own version, first seen Nov 8, 2026
- clearsmog/claude-skillstheir own version, first seen Nov 8, 2026
- domengabrovsek/agent-configtheir own version, first seen Nov 8, 2026
- domengabrovsek/claudetheir own version, first seen Nov 8, 2026
- ActuallyNodejam/openpaperworktheir own version, first seen Nov 8, 2026
- seayniclabs/homelab-infra-mcptheir own version, first seen Nov 8, 2026
Used with
Projects with it also use ios-sync, benchmark-models and 10 more.
Other files people use alongside this one.
Files found in the same public projects as a version of this one, more often than they turn up anywhere else. Each project counts once, large collections count for less, and this file's own repository is left out.
Saqlain-811Skillios-sync
Regenerate the iOS debug bridge against the latest upstream gstack templates. (gstack)
Also in 4 projects that use this
ShreyRaviSkillbenchmark-models
Cross-model benchmark for gstack skills. Runs the same prompt through Claude, GPT (via Codex CLI), and Gemini side-by-side — compares latency, tokens, cost, and optionally quality via LLM judge. Answers "which model is actually best for this skill?" with data instead of vibes. Separate from /benchmark, which measures web page performance. Use when: "benchmark models", "compare models", "which model is best for X", "cross-model comparison", "model shootout". (gstack) Voice triggers (speech-to-text aliases): "compare models", "model shootout", "which model is best".
Also in 5 projects that use this
ShreyRaviSkilllanding-report
Read-only queue dashboard for workspace-aware ship. Shows which VERSION slots are currently claimed by open PRs, which sibling Conductor workspaces have WIP work likely to ship soon, and what slot /ship would pick next. No mutations — just a snapshot. Use when asked to "landing report", "what's in the queue", "show me open PRs", or "which version do I claim next". (gstack)
Also in 5 projects that use this
timurgaleevSkilldocument-generate
Generate missing docs for a feature, module or project as tutorials, how-tos, reference and explanation.
Also in 4 projects that use this
Saqlain-811Skillios-clean
Remove the DebugBridge SPM package and all #if DEBUG wiring from an iOS app. (gstack)
Also in 3 projects that use this
seek888Skillopen-gstack-browser
Launch GStack Browser — AI-controlled Chromium with the sidebar extension baked in. Opens a visible browser window where you can watch every action in real time. The sidebar shows a live activity feed and chat. Anti-bot stealth built in. Use when asked to "open gstack browser", "launch browser", "connect chrome", "open chrome", "real browser", "launch chrome", "side panel", or "control my browser". Voice triggers (speech-to-text aliases): "show me the browser".
Also in 4 projects that use this
- +2 more from ShreyRavi
- +1 more from Saqlain-811
Other versions51 projects use a version of this.
Word for word · 0
None found.
Edited · 0
None found.
Wrote their own version · 51
- garrytan/gstack★ 141ksame name
- Yeachan-Heo/oh-my-claude-sisyphus★ 41ksame name
- Yeachan-Heo/oh-my-claudecode★ 41ksame name
- HybridAIOne/hybridclaw★ 159same name
- Kastalien-Research/thoughtbox★ 64same name
- jantichy/claude★ 45same name
- domengabrovsek/agent-config★ 22same name
- domengabrovsek/claude★ 22same name
- heathdutton/claude-d2-diagrams★ 16same name
- johnlindquist/claude-workshop-skills★ 16same name
41 more not listed
How matches are found. Word for word: the exact same text. Edited: shares passages with this file (“99% same” means 99% of its five-word phrases also appear here; 10% or more counts). Their own version: similar meaning, or, weakest, the same name. We can’t tell which project had it first. Projects are counted among the 200 most-starred candidates, and mentions are links to the repository we found, up to 50 per site, so both counts are a floor.
The file
We split this skill into the rules it gives an agent
6 rules. 0 are common, 1 is distinctive, and 5 are very specific to this project.
0
Common
Most of the 43 edited versions we read keep these.
1
Distinctive
This author's own choices. Worth a look.
5
Very specific
Tied to their project's names, files or tools. Probably skip.
- Common
- Distinctive
- Very specific
- Very specific: line 15
Run diagram render --help for current flags.
- Very specific: line 26
Add .kroki-url to .gitignore if it points to an internal hostname.
- Very specific: line 111
Run diagram types for the machine-readable, always-current list.
- Distinctive: line 115
Default to SVG. It scales, embeds cleanly in HTML/Markdown, and every diagram type supports it.
- Very specific: line 116
Prefer writing the diagram source to a file with an unambiguous extension (.puml, .mmd, .dot, etc.).
- Very specific: line 117
When RENDER_FAILED comes back, the hint field contains Kroki's syntax-error message — surface it verbatim to the user and to your reasoning.
“Common” is measured: kept by at least 6 in 10 of the 43 edited versions of this file we could read. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.
Files
diagram
CLI for rendering text-based diagrams (PlantUML, Mermaid, GraphViz, D2, DBML, BPMN, C4, Erd, Ditaa, Nomnoml, Pikchr, Structurizr, SvgBob, TikZ, Vega, Vega-Lite, WaveDrom, WireViz, BlockDiag / SeqDiag / ActDiag / NwDiag / PacketDiag / RackDiag, Excalidraw, Bytefield, Symbolator, UMlet) to SVG / PNG / PDF / JPEG / TXT / Base64 via the Kroki HTTP API. JSON output.
CLI
- Path:
./diagram-cli/diagram(relative to this SKILL.md). On Windows usediagram.cmdordiagram.ps1. - Requires
uv(install). First call provisions the Python environment automatically. - Subcommands:
render(primary),types(capability discovery). - Run
diagram render --helpfor current flags.
Endpoint resolution
The CLI picks the Kroki endpoint in this order:
--endpoint <url>flagKROKI_URLenvironment variable.kroki-urlfile (one URL, no quotes) walked up from the current working directory — useful for pinning a project to a self-hosted Kroki without touching shell confighttps://kroki.io(default, free public instance)
Add .kroki-url to .gitignore if it points to an internal hostname.
Subcommands
diagram render
Renders one diagram and writes the output to a file. Always pass --output <path> — the JSON envelope is the only thing on stdout; the rendered bytes go to the file. After a successful call, use the Read tool on the produced file path to confirm the output looks right.
| Flag | Description |
--input <path> | Read diagram source from a file. Extension drives type auto-detect (see table below). |
--source "<text>" | Inline diagram source (alternative to --input). |
| stdin | Used when neither --input nor --source is given and stdin is piped. |
--type <name> | Diagram type (e.g. plantuml, mermaid, graphviz, d2). Required if not derivable from the extension. |
--format <name> | Output format. Default svg. Support varies by type — see diagram types. |
--output <path> | Required. Output file. Parent directories are created. |
--endpoint <url> | Override Kroki endpoint (also KROKI_URL, .kroki-url). |
--timeout <secs> | HTTP timeout. Default 30. |
Examples:
# Auto-detect type from extension (.mmd → mermaid), default SVG
./diagram-cli/diagram render --input docs/flow.mmd --output docs/flow.svg
# PlantUML to PNG with explicit type/format
./diagram-cli/diagram render --input arch.puml --type plantuml --format png --output assets/arch.png
# Inline GraphViz
./diagram-cli/diagram render \
--type graphviz \
--source 'digraph G { Hello -> World }' \
--output /tmp/hello.svg
# Stdin
cat diagram.d2 | ./diagram-cli/diagram render --type d2 --output diagram.svg
# Self-hosted Kroki
KROKI_URL=http://kroki.internal:8000 ./diagram-cli/diagram render \
--input flow.puml --output flow.svgSuccess output:
{"ok":true,"file":"/abs/path/flow.svg","type":"plantuml","format":"svg","bytes":12345,"endpoint":"https://kroki.io","sourceOrigin":"file"}diagram types
Lists supported diagram types and their formats. No network call — the table is baked into the CLI. Use this to discover what --type / --format combinations are valid before calling render.
./diagram-cli/diagram types # all types
./diagram-cli/diagram types mermaid # one typeSupported diagram types (summary)
| Type | File extensions | Output formats |
plantuml | .puml, .plantuml, .iuml | svg, png, pdf, txt, base64 |
mermaid | .mmd, .mermaid | svg, png |
graphviz | .dot, .gv | svg, png, jpeg, pdf |
d2 | .d2 | svg |
dbml | .dbml | svg |
bpmn | .bpmn | svg |
c4plantuml | .c4, .c4puml | svg, png, pdf, txt, base64 |
erd | .erd | svg, png, jpeg, pdf |
ditaa | .ditaa | svg, png |
excalidraw | .excalidraw | svg |
nomnoml | .nomnoml | svg |
pikchr | .pikchr | svg |
structurizr | .structurizr, .dsl | svg, png, pdf, txt, base64 |
svgbob | .svgbob | svg |
tikz | .tikz | svg, png, jpeg, pdf |
vega | .vega | svg, png, pdf |
vegalite | .vl, .vegalite | svg, png, pdf |
wavedrom | .wavedrom | svg |
wireviz | .wireviz | svg, png |
bytefield | .bytefield | svg |
symbolator | — | svg |
umlet | — | svg, png, jpeg |
blockdiag family (blockdiag, seqdiag, actdiag, nwdiag, packetdiag, rackdiag) | matching .*diag extension | svg, png, pdf |
Run diagram types for the machine-readable, always-current list.
Workflow guidance
- Default to SVG. It scales, embeds cleanly in HTML/Markdown, and every diagram type supports it. Switch to PNG only when the consumer can't render SVG (image-only chat, certain markdown renderers).
- Prefer writing the diagram source to a file with an unambiguous extension (
.puml,.mmd,.dot, etc.). The CLI then auto-detects--typeand you keep the source under version control alongside the rendered output. - When
RENDER_FAILEDcomes back, thehintfield contains Kroki's syntax-error message — surface it verbatim to the user and to your reasoning. Most of the time it includes a line number. - For very large diagrams, raise
--timeout. The default 30 s is generous for Kroki's free instance but a self-hosted one rendering complex PlantUML or TikZ may need more.
Error codes
| Code | Meaning |
PREREQ_MISSING | uv is not installed. |
INPUT_CONFLICT | More than one of --input / --source / stdin was provided. |
INPUT_MISSING | No diagram source was provided. |
INPUT_NOT_FOUND | --input path does not exist, is not a file, or could not be decoded as UTF-8. |
OUTPUT_MISSING | --output was not provided. |
TYPE_MISSING | Type was not given and could not be inferred from the input file extension. |
TYPE_UNKNOWN | Type name is not in the supported list — run diagram types. |
FORMAT_UNSUPPORTED | The (type, format) combination is not supported by Kroki for that type. |
RENDER_FAILED | Kroki returned 4xx. Usually a syntax error in the source; details in hint. |
KROKI_UNAVAILABLE | Network failure, timeout, or Kroki returned 5xx. |
IO_ERROR | Could not write the --output file. |
INTERNAL_ERROR | Unexpected CLI failure — file a bug if you see this. |
Does it work?
Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.
No reviews yet
People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.
- It worked
- Partly
- It didn't
Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.
Your trail
Files you open will collect here, so you can find them again.
Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.
Now do this for your own.
Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

