A design guide for creating downloadable diagrams as HTML pages or standalone SVG files. It covers architecture, process, sequence, data, timeline, swimlane, quadrant, and statistical diagrams, including selected Mermaid and Draw.io imports.
DELIVERY SKILL — Produce polished diagrams, slides and social cards as crisp PNGs, JPEGs or PDFs by authoring HTML/SVG and rendering it with a local headless Chromium. Eight themes (ember, slate, paper, terminal, blueprint, frost, neon, sepia), one flag. Lays mermaid flowchart text out into a figure…
Generate, validate and publish workflow, sequence and architecture diagrams, using FlowZap Code DSL. Use when the user asks to create a workflow, flowchart, sequence diagram, process map or an architecture diagram. Produces .fz code and instant shareable playground URLs via the FlowZap MCP server.
Create polished interactive flowchart visualizations for complex codebases, workflows, data flows, prompt pipelines, and system/process maps using Cytoscape.js, Chroma.js, and Prism.js. Invoke only when the user explicitly asks for "flowchart" by name or asks to build an interactive flowchart visualization.