Agent skill · design visual · steipete
diagram-maker
Create SVG/HTML or Excalidraw diagrams for concepts, architecture, flows, and whiteboards.
Why this skill is useful
Adds specific rules and templates for generating SVG and Excalidraw diagrams that the AI wouldn't reliably generate on its own.
What it needs
About 1k tokens when loaded. Last updated 2026-08-07. 385,400 stars on the source repository.
What this skill does
Diagram Maker Create diagrams as artifacts, not prose. Choose one output mode: clean-svg: educational concepts, physical systems, processes, lifecycle, simple data flow. architecture-svg: software/cloud/infra topology, services, databases, queues, trust zones. excalidraw: editable hand-drawn whiteboard, flowchart, sequence, architecture sketch. Routing User wants editable/collaborative: choose Excalidraw. User wants polished standalone browser output: choose SVG/HTML. Software architecture with infra components: choose architecture SVG. Science, product, process, concept map, physical object: choose clean SVG. Unsure: ask one short question only if output format matters; otherwise choose clean SVG. Workflow 1. Extract nodes, groups, labels, and directed relationships. 2. Pick layout first: left-to-right, top-down, hub-spoke, swimlanes, layered stack, sequence. 3. Keep labels short. Prefer 5-9 main elements over dense diagrams. 4. Generate the file at the requested path, or ./diagram.html / ./diagram.excalidraw. 5. Verify syntax by opening/parsing when feasible. SVG/HTML rules Single standalone .html file with inline CSS and inline SVG. No external fonts, JS, images, gradients, glows, decorative blobs, or remote assets. Use semantic colors, not rainbow sequences: neutral, input, process, storage, external, risk. Draw connectors before nodes so arrows sit behind boxes. Every connector path has fill="none" and a marker arrow when directed. Leave 24px text padding inside boxes; do not let text touch borders. Legend only when symbols/colors are not obvious. SVG template Use references/svg-template.md as the wrapper and replace <!-- SVG -->. Excalidraw rules Save .excalidraw JSON with type, version, source, elements, and appState. Use bound text for shape labels. Do not use a nonstandard label property. Keep bound text immediately after its container in the elements array. Minimum labeled shape: 120x60. Minimum body text: 16px. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills steipete/diagram-maker