Diagram Design

개요

Describe what you need and get a self-contained HTML file with inline SVG that opens in any browser and exports to SVG or PNG. Point it at your website once and it reads your colors and fonts, so every diagram looks like the rest of your site. It also redraws draw.io, Mermaid, and Excalidraw files at the size and level of detail you choose. Every node earns its place. The accent color is reserved for the one or two things the reader should look at first. 42 diagram types: architecture, architecture delta, IT current-state, flowchart, sequence, state machine, ER/data model, timeline, swimlane, quadrant, radar/spider, polar chart (polar/radial lollipop), loop/flywheel, nested, tree, org chart, layer stack, Venn, pyramid/funnel, treemap and marimekko, heatmap, bar and dumbbell, waterfall, line (slopegraph, ridgeline, streamgraph, bump), Gantt and scatter charts (bubble, beeswarm), high-level, process, medallion, data flow, DP integration, DP security matrix, Sankey, fishbone, Wardley map, kanban, user journey, deployment, dependency graph, UML class, story map, and database schema. Plus lifecycle phase maps, block decomposition trees, semantic patterns, callouts, accessible motion, and sketchy hand-drawn styling.