Diagram
Use this skill when the user wants a rendered static diagram, a validated diagram source artifact, or a revision to an existing diagram source.
Default to Mermaid unless the user asks for another format or the shape is a better fit for another adapter:
- Mermaid: sequence, flowchart, state, ER, class, gantt, git-graph, mindmap, and pie diagrams.
- PlantUML: UML sequence/component/activity/deployment diagrams when the user already uses PlantUML or asks for it.
- Graphviz DOT: topology, dependency graphs, and layouts where rank/direction control matters.
- Excalidraw JSON: hand-drawn-style editable sketches when the user asks for an editable canvas.
Tool Surface
Use the runtime tools directly:
diagram_create: create source, validate it, save source, and optionally render.
diagram_update: update existing source or source artifact, validate it, save a new source artifact, and optionally render.
diagram_validate: validate source only; do not render.
The tool output includes these fields:
{
"success": true,
"valid": true,
"source": "...",
"source_artifact_ref": "/workspace/.generated-diagrams/skills/diagram/diagram-...",
"rendered_artifact_ref": "/workspace/.generated-diagrams/skills/diagram/diagram-...",
"type": "flowchart",
"format": "mermaid",
"artifacts": [],
"runtime_events": [],
"warnings": []
}
On validation failure, success and valid are false and errors plus
suggested_fix may be present. When render_to is "none",
rendered_artifact_ref is null. Invalid source is still saved with
source_artifact_valid: false so the operator can inspect or repair it.
Default Workflow
- Pick the diagram type before writing syntax. If uncertain, set
type to auto, but prefer an explicit type when the user request clearly names one.
- For Mermaid, read references/mermaid-types.md when you need grammar examples or when the diagram type is not obvious.
- Draft complete source yourself when the user needs a specific diagram. Do not rely on the tool's generated starter unless the request is generic.
- Call
diagram_validate before rendering when you wrote or revised source manually.
- If validation fails, use the returned
errors and suggested_fix, revise once, then validate again. Make at most 2 fix-up attempts before surfacing the failure with the invalid source artifact. The runtime also caps automatic pre-render fix-up at 2 attempts.
- Call
diagram_create or diagram_update with render_to set to svg by default. Use png or pdf only when requested and the adapter can render that target.
- Return the source artifact and rendered artifact paths to the user.
Type Selection
Use these defaults:
| User intent |
Type |
| messages, API call flow, actors, request/response |
sequence |
| process, decision tree, pipeline, system flow |
flowchart |
| lifecycle, status machine, transitions |
state |
| database schema, entities, relationships |
er |
| classes, interfaces, inheritance, methods |
class |
| timeline, schedule, milestones, roadmap |
gantt |
| branches, commits, merges, release train |
git-graph |
| brainstorm, taxonomy, concept map, outline |
mindmap |
| shares, proportions, percentages |
pie |
Mermaid Rules
- Use the canonical header for the selected type.
- Keep labels short and ASCII-safe unless the user provided exact labels.
- Quote labels when Mermaid grammar requires it, especially pie chart slices.
- Avoid unsupported Markdown inside labels.
- Prefer
flowchart TD or flowchart LR; do not mix both in one source.
- In
sequenceDiagram, define participants when names are long or reused.
- In
gantt, include dateFormat and stable task ids when using dependencies.
- In
erDiagram, include cardinality on relationships.
Update Rules
For diagram_update, preserve the existing type and format unless the user explicitly asks to convert. When the user gives natural-language update instructions:
- Read the existing source artifact when needed.
- Apply the change to the source yourself.
- Validate the full updated source.
- Call
diagram_update with the complete updated source, original format/type, and desired render_to.
If the user only asks to annotate a diagram and exact placement does not matter, the tool can add a small update annotation when passed only artifact_ref plus instructions.
Adapter Notes
- Mermaid and Graphviz use local renderers when available. If a renderer is not installed, SVG requests fall back to source-backed SVG artifacts so the operator still gets an embed-ready file.
- Mermaid validation uses the bundled Mermaid parser before rendering, so syntax errors are surfaced even when
mmdc is not installed. The first validation loads the parser and scoped DOM support; later validations reuse the cached parser.
- PlantUML rendering uses
HYBRIDCLAW_PLANTUML_SERVER_URL or PLANTUML_SERVER_URL when configured. Without a server, SVG requests fall back to source-backed SVG artifacts. Operators are responsible for pointing this setting only at a trusted PlantUML server with appropriate network egress controls.
- Excalidraw defaults to
render_to: "none" because JSON is the editable deliverable. Use render_to: "svg" when a static preview is requested; the runtime renders the JSON elements directly to SVG.
- Local Mermaid and Graphviz renders use short-lived OS temp directories. Normal tool completion removes them; process-level termination such as SIGKILL may leave temporary source copies for the OS temp cleaner.
Diagram render usage is reported as a zero-cost budget hook; LLM tokens are only consumed when the model drafts or repairs source.
Runtime Hooks
Rendered diagrams include a diagram.rendered event in runtime_events.
Validation failures include a diagram.validation_failed event with the
validation errors and source artifact path when one was persisted. Diagram
artifacts are stored under the skill-scoped path
.generated-diagrams/skills/diagram/.
Stakes
Diagram rendering is F8 low stakes: the output is a file artifact the operator chooses to share. Do not treat generated diagrams as authoritative for security, legal, medical, or financial decisions without separate verification.
1---2name: diagram3description: Create, validate, update, and render diagram-as-code artifacts with Mermaid-first schema awareness plus PlantUML, Graphviz DOT, and Excalidraw JSON adapters.4---56# Diagram78Use this skill when the user wants a rendered static diagram, a validated diagram source artifact, or a revision to an existing diagram source.910Default to Mermaid unless the user asks for another format or the shape is a better fit for another adapter:1112- Mermaid: sequence, flowchart, state, ER, class, gantt, git-graph, mindmap, and pie diagrams.13- PlantUML: UML sequence/component/activity/deployment diagrams when the user already uses PlantUML or asks for it.14- Graphviz DOT: topology, dependency graphs, and layouts where rank/direction control matters.15- Excalidraw JSON: hand-drawn-style editable sketches when the user asks for an editable canvas.1617## Tool Surface1819Use the runtime tools directly:2021- `diagram_create`: create source, validate it, save source, and optionally render.22- `diagram_update`: update existing source or source artifact, validate it, save a new source artifact, and optionally render.23- `diagram_validate`: validate source only; do not render.2425The tool output includes these fields:2627```json28{29 "success": true,30 "valid": true,31 "source": "...",32 "source_artifact_ref": "/workspace/.generated-diagrams/skills/diagram/diagram-...",33 "rendered_artifact_ref": "/workspace/.generated-diagrams/skills/diagram/diagram-...",34 "type": "flowchart",35 "format": "mermaid",36 "artifacts": [],37 "runtime_events": [],38 "warnings": []39}40```4142On validation failure, `success` and `valid` are false and `errors` plus43`suggested_fix` may be present. When `render_to` is `"none"`,44`rendered_artifact_ref` is `null`. Invalid source is still saved with45`source_artifact_valid: false` so the operator can inspect or repair it.4647## Default Workflow48491. Pick the diagram type before writing syntax. If uncertain, set `type` to `auto`, but prefer an explicit type when the user request clearly names one.502. For Mermaid, read [references/mermaid-types.md](references/mermaid-types.md) when you need grammar examples or when the diagram type is not obvious.513. Draft complete source yourself when the user needs a specific diagram. Do not rely on the tool's generated starter unless the request is generic.524. Call `diagram_validate` before rendering when you wrote or revised source manually.535. If validation fails, use the returned `errors` and `suggested_fix`, revise once, then validate again. Make at most 2 fix-up attempts before surfacing the failure with the invalid source artifact. The runtime also caps automatic pre-render fix-up at 2 attempts.546. Call `diagram_create` or `diagram_update` with `render_to` set to `svg` by default. Use `png` or `pdf` only when requested and the adapter can render that target.557. Return the source artifact and rendered artifact paths to the user.5657## Type Selection5859Use these defaults:6061| User intent | Type |62| --- | --- |63| messages, API call flow, actors, request/response | `sequence` |64| process, decision tree, pipeline, system flow | `flowchart` |65| lifecycle, status machine, transitions | `state` |66| database schema, entities, relationships | `er` |67| classes, interfaces, inheritance, methods | `class` |68| timeline, schedule, milestones, roadmap | `gantt` |69| branches, commits, merges, release train | `git-graph` |70| brainstorm, taxonomy, concept map, outline | `mindmap` |71| shares, proportions, percentages | `pie` |7273## Mermaid Rules7475- Use the canonical header for the selected type.76- Keep labels short and ASCII-safe unless the user provided exact labels.77- Quote labels when Mermaid grammar requires it, especially pie chart slices.78- Avoid unsupported Markdown inside labels.79- Prefer `flowchart TD` or `flowchart LR`; do not mix both in one source.80- In `sequenceDiagram`, define participants when names are long or reused.81- In `gantt`, include `dateFormat` and stable task ids when using dependencies.82- In `erDiagram`, include cardinality on relationships.8384## Update Rules8586For `diagram_update`, preserve the existing `type` and `format` unless the user explicitly asks to convert. When the user gives natural-language update instructions:87881. Read the existing source artifact when needed.892. Apply the change to the source yourself.903. Validate the full updated source.914. Call `diagram_update` with the complete updated source, original format/type, and desired `render_to`.9293If the user only asks to annotate a diagram and exact placement does not matter, the tool can add a small update annotation when passed only `artifact_ref` plus `instructions`.9495## Adapter Notes9697- Mermaid and Graphviz use local renderers when available. If a renderer is not installed, SVG requests fall back to source-backed SVG artifacts so the operator still gets an embed-ready file.98- Mermaid validation uses the bundled Mermaid parser before rendering, so syntax errors are surfaced even when `mmdc` is not installed. The first validation loads the parser and scoped DOM support; later validations reuse the cached parser.99- PlantUML rendering uses `HYBRIDCLAW_PLANTUML_SERVER_URL` or `PLANTUML_SERVER_URL` when configured. Without a server, SVG requests fall back to source-backed SVG artifacts. Operators are responsible for pointing this setting only at a trusted PlantUML server with appropriate network egress controls.100- Excalidraw defaults to `render_to: "none"` because JSON is the editable deliverable. Use `render_to: "svg"` when a static preview is requested; the runtime renders the JSON elements directly to SVG.101- Local Mermaid and Graphviz renders use short-lived OS temp directories. Normal tool completion removes them; process-level termination such as SIGKILL may leave temporary source copies for the OS temp cleaner.102Diagram render usage is reported as a zero-cost budget hook; LLM tokens are only consumed when the model drafts or repairs source.103104## Runtime Hooks105106Rendered diagrams include a `diagram.rendered` event in `runtime_events`.107Validation failures include a `diagram.validation_failed` event with the108validation errors and source artifact path when one was persisted. Diagram109artifacts are stored under the skill-scoped path110`.generated-diagrams/skills/diagram/`.111112## Stakes113114Diagram rendering is F8 low stakes: the output is a file artifact the operator chooses to share. Do not treat generated diagrams as authoritative for security, legal, medical, or financial decisions without separate verification.