From termchart
Use when you want to show a diagram (flowchart, sequence, state, class, ER, or xy chart) directly in the terminal/chat as ASCII or Unicode text instead of an image. Renders Mermaid deterministically via the `termchart` CLI — no PNGs, no browser, no Mermaid handoff.
How this skill is triggered — by the user, by Claude, or both
Slash command
/termchart:termchartThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Render diagrams as plain text that displays in any monospace terminal and pastes
Render diagrams as plain text that displays in any monospace terminal and pastes
cleanly into PRs, issues, and chat. You write Mermaid; the termchart CLI renders
it deterministically.
Reach for this whenever you would otherwise describe a flow in prose, draw freehand ASCII (which misaligns), or produce a PNG/Mermaid block the user can't see inline. Good for: architecture diagrams, request flows, state machines, decision trees, sequence/interaction diagrams, simple bar/line charts.
termchart lint.--color none, redirecting stdout to a file.CRITICAL — never leave the diagram as raw command output. Coding-agent harnesses (Claude Code, etc.) collapse long tool/command output behind a
+N linesfold, so the user sees a truncated, broken diagram. You MUST read the rendered file back and reproduce it verbatim in your own message text. The diagram only displays correctly when it is part of your reply, not when it is left sitting in the terminal/tool output.
# 1+2: lint, then 3: render to a file (NOT straight to the terminal)
printf 'sequenceDiagram\n A->>B: hi' | termchart lint
termchart --color none diagram.mmd > /tmp/diagram.txt
Prefer a heredoc for multi-line diagrams, still redirecting to a file:
termchart --color none > /tmp/diagram.txt <<'EOF'
graph TD
A[Idea] --> B{Good?}
B -->|yes| C[Ship]
B -->|no| A
EOF
Then read /tmp/diagram.txt and paste its exact contents into your reply in a
``` code block. Do not summarize or re-draw it — copy it byte-for-byte.
| Flag | Effect |
|---|---|
--ascii | Pure ASCII (+ - |) instead of Unicode box-drawing |
--color <auto|none|16|256|truecolor> | Color output (default auto: color on a TTY, plain when piped) |
--theme <name> | One of: zinc-light, zinc-dark, tokyo-night, catppuccin-mocha, nord, dracula, github-dark, one-dark, … |
--padding-x <n> / --padding-y <n> | Spacing between nodes |
--fit | Auto-compact spacing to fit terminal width (or 80 cols when piped) |
--width <n> | Fit within <n> columns (implies --fit); warns if impossible |
Note: --fit/--width only adjust spacing — the grid layout cannot reflow, so a
graph that is inherently wider than the target will warn and use the tightest
spacing. For those, switch graph TD⇄graph LR, shorten labels, or use --ascii.
When showing output inside chat, prefer --color none (or just rely on the
piped default) and wrap the result in a code block so alignment is preserved.
Stay within these — the renderer draws them reliably:
graph TD|LR / flowchart TD|LR, nodes A[label] B{decision}
C[(db)], edges -->, labeled edges -->|yes|.stateDiagram-v2, [*] --> S1, S1 --> S2.sequenceDiagram, A->>B: msg, B-->>A: reply.classDiagram, A <|-- B, A : +int field.erDiagram, CUSTOMER ||--o{ ORDER : places.xychart-beta, bar [1,2,3], line [1,2,3].lint will warn)In sequence diagrams these are silently dropped: note, loop, alt, opt,
par, activate/deactivate. Keep sequence diagrams to plain messages. If you
need that structure, model it as a flowchart instead.
"ordered in") get clipped to the inter-entity gap (→ ordere). lint warns.
When the cardinality is the real point, a flowchart with A -->|many| B reads
more clearly in a terminal than ER crow's-foot glyphs.[*]) render as empty boxes (border convention only). If the
start/end need labels, model the lifecycle as a flowchart with explicit Start /
End nodes.[(x)] with --ascii — they render with .--.
corners that read as a broken box. Use the default Unicode mode for cylinders.--fit (or swap graph TD⇄LR) rather than letting the
diagram overflow the terminal.termchart and show its actual output — never
hand-draw ASCII yourself; the whole point is deterministic, aligned rendering.--color none for diagrams shown in chat/PRs/issues so ANSI escapes don't
corrupt the text. Reserve color modes for live interactive TTY use.--padding-x 2 --padding-y 1
and/or shorten node labels so it stays readable.termchart lint reports an error (exit 1), fix the header/grammar before
rendering. If it only warns, the diagram still renders minus the warned lines.Provides UI/UX resources: 50+ styles, color palettes, font pairings, guidelines, charts for web/mobile across React, Next.js, Vue, Svelte, Tailwind, React Native, Flutter. Aids planning, building, reviewing interfaces.
Fetches up-to-date documentation from Context7 for libraries and frameworks like React, Next.js, Prisma. Use for setup questions, API references, and code examples.
npx claudepluginhub ivanmkc/termchart --plugin termchart