Draw polished, minimalist flowcharts in Claude Code — just describe the flow, get a clean diagram. No design skills required, no diagramming tool to learn. You describe a pipeline or process in plain language (or paste a Mermaid spec); the skill renders it onto a locked visual language and hands you a standalone file — SVG by default, or PNG / HTML — that drops straight into a README, slide, or doc.
- 🗣️ Describe in plain language — "draw our checkout pipeline…" is enough.
- 🎨 Three themes —
light,dark,mono-print. - 🔒 Consistent every time — a fixed palette, shapes, arrows, and spacing, so regenerating a diagram doesn't make it drift.
- 📦 Self-contained output — the SVG embeds its own styles + web font; it opens in any browser and renders identically wherever you paste it.
Already using the HOLO plugin? It bundles the same capability as its /draw-diagram skill — holo-diagram is the standalone edition.
Quick Start · Output & Export · Example Prompts · Examples · Themes · Color Palette · Installation
In Claude Code:
/plugin marketplace add https://github.com/LeanderLXZ/holo-diagram.git
/plugin install holo-diagram
Type a description in your own words, paste a Mermaid / prose spec, or ask Claude to draft one for you. The more concrete the nodes and connections, the better:
A flowchart of our checkout pipeline:
cart → validate input → charge card.
On success, write to the orders table; on failure, show an error.
There's also a retry loop back to "charge card".
/holo-diagram Draw the checkout pipeline above. Dark theme, output SVG.
Claude will:
- Confirm format & width — the output format (SVG / PNG / HTML / all three) and canvas width (auto-fit, or a fixed width).
- Restate the spec back to you and map each node to a role.
- Generate, self-review, and fix — three internal reviewers check the first render; the corrected version is your deliverable.
The finished files land in ./tmp_diagram/ in your current project.
You pick the format when Claude confirms it (or state it up front in your
prompt). All artifacts are written to ./tmp_diagram/ in your current
project.
| Format | What you get | Use it for |
|---|---|---|
| SVG (default) | A standalone .svg — embeds CSS + web font |
READMEs, docs, slides; lossless scaling |
| PNG | A rasterized image | Chat / docs that don't accept SVG |
| HTML | The editable source (CSS in <head>, inline SVG) |
Hand-tweaking before re-exporting |
| all three | .svg + .png + .html |
When you want every form |
Embed the SVG / PNG in a doc with the width Claude suggests:
<img src="flowchart-checkout.svg" width="825">Want it kept permanently? Copy it out of ./tmp_diagram/ into your repo (e.g. assets/diagrams/).
Invoke the skill with /holo-diagram, then describe the flow. Name the
theme (light / dark / mono-print) and the output format (SVG /
PNG / HTML / all three) so Claude doesn't have to ask.
Simple pipeline
/holo-diagram Draw a flowchart: ingest → clean → transform → load into the
warehouse. Light theme, output SVG.
Agentic loop
/holo-diagram Draw an agentic loop: gather context → call tool → verify
results, looping back to "gather context" until done. Add a "user can cancel"
callout. Dark theme, output PNG.
Branching / decision
/holo-diagram Flowchart: receive request → "authenticated?" decision.
If yes → handle request → return 200. If no → return 401.
mono-print theme, output SVG.
From a Mermaid spec
/holo-diagram Render this Mermaid graph as a flowchart. Dark theme, output all three format:
graph TD
A[Start] --> B{valid?}
B -->|yes| C[Process]
B -->|no| D[Reject]
C --> E[Done]
Real diagrams generated by the skill. The same flow rendered in different themes stays geometrically identical — only the palette swaps.
the review pipeline of the HOLO plugin — dark
the implementation pipeline of the HOLO plugin — light
the planning pipeline of the HOLO plugin — mono-print
Content cards — a node whose height grows to hold a bold title, detail lines, and an optional port line (great for service / component descriptions):
The full set — every flow in all three themes, plus fan-in/out, bridge
crossings, and more — lives in examples/ and
skills/holo-diagram/examples/.
Three render-verified themes share identical geometry — only the color
values change. Name the one you want in your prompt (light is the default).
dark — for dark-mode UI / terminal screenshots
light — for docs / blogs / light-mode UI
mono-print — for print / academic / no-color
The visual language is fixed: a small set of node roles, a set of
group-box tints for bracketing regions, and a set of line / arrow
styles. Each is defined for all three themes. The reference plates below are
the canonical source of truth (the editable HTML lives in
skills/holo-diagram/palette/).
Every box is one of 8 roles (plus 2 spare accent slots). Most steps are
just action; reach for another role only when it adds real meaning, so the
diagram doesn't fragment into a rainbow. Name a role in your prompt if you want
a specific node colored a specific way.
| Role | What it is | Examples |
|---|---|---|
| action | Process step / command — the verb | "Validate input", "Transform" |
| agent | External actor / user / service | "User", "Payment API", "LLM" |
| data | Persisted store — file / DB / queue | "users table", "S3 bucket" |
| decision | Branch / gate / conditional | "if valid?", "quota left?" |
| event | Trigger / signal / webhook | "order placed", "cron tick" |
| state | Outcome / status marker | "Approved", "Failed" |
| terminal | Entry / exit point | "Start", "Done" |
| callout | Out-of-band note / interrupt | "User can cancel" |
| accent1 / accent2 | spare slots — no fixed meaning | use when the 8 aren't enough |
A dashed rounded rectangle that brackets a subset of nodes forming one phase
/ region (e.g. "agentic loop"). The tint is a neutral grouping signal — never a
node role. Use one tint for a single region, distinct tints to tell several
regions apart. mono uses a plain grey container instead of tints.
Four edge styles. Forward flow and loop-back are thick (5px) solid lines; conditional / optional and callout edges are thin (3px) dashed. Arrowheads are a fixed size whose apex lands exactly on the destination edge.
/plugin marketplace add https://github.com/LeanderLXZ/holo-diagram.git
/plugin install holo-diagram
git clone https://github.com/LeanderLXZ/holo-diagram.gitThen in Claude Code:
/plugin marketplace add /path/to/holo-diagram
/plugin install holo-diagram
/plugin marketplace update holo-diagram
/reload-plugins
- Claude Code with plugin support.
- Python 3 (standard library only) — converts the HTML source to a standalone SVG.
- Chrome / Chromium headless (
google-chromeon yourPATH) — rasterizes a PNG so the internal review step can visually inspect the diagram. Without it you can still get SVG/HTML output; only the automated review pass is skipped.
- Self-contained output — the SVG is the canonical deliverable. The CSS and
the
Interweb-font import travel inside the file, so it opens in any browser and renders identically wherever you paste it, with no external dependencies. The HTML is an editable source you can hand-tweak and re-export; the PNG is a raster export (also used internally for the review step). All artifacts land in./tmp_diagram/. - Sizing — the viewBox defaults to a 1500px canvas (hard cap); the display width is capped at 825px so it fits a GitHub README column; padding is 50px on every side. A set of diagrams shares one width so their text scale matches.
- Locked visual language — rounded-rectangle nodes (
rx=12), uniform 18px labels, fully orthogonal arrows with roundedr=12corners, fixedrefX=0/userSpaceOnUsearrowheads whose apex lands exactly on the destination edge. - Pipeline — Claude writes an editable HTML intermediate, extracts the
standalone SVG with
scripts/extract_svg.py, and renders a throwaway PNG only for the review subagents. A diagram passes through at most two iterations (draw → review → fix). - Scope — flowcharts, pipelines, process diagrams, agentic loops, workflow visualizations, state machines. Not for architecture / network topology, UML, Gantt, or org charts.
- Full spec — the complete, mandatory specification is in
skills/holo-diagram/SKILL.md.
MIT © LeanderLXZ