Diagram Design

Overview

Diagram Design is an agent skill that produces editorial-quality technical diagrams — the kind you would put in a blog post, a conference talk, or an architecture document without apologizing for the aesthetics. It ships 38 diagram types covering the most common visualization needs in software engineering and business analysis, each rendered as self-contained HTML with inline SVG. There are no JavaScript dependencies, no build steps, and no external assets. The explicit goal is to replace Mermaid-generated diagrams, which the project describes as “slop,” with output that looks intentionally designed rather than auto-generated.

Key Capabilities

38 diagram types, three variants each: The library covers architecture maps, flowcharts, sequence diagrams, Sankey diagrams, Wardley maps, UML class diagrams, entity-relationship diagrams, state machines, network topologies, deployment diagrams, and more. Each type ships in three visual variants so you can match the diagram style to your documentation aesthetic without custom CSS work.

Self-contained HTML output: Every diagram is a single HTML file with inline SVG — no external stylesheets, scripts, or font files. You can drop the file into any documentation system, embed it in a blog post, or open it directly in a browser. This makes diagrams portable and version-controllable alongside the code they document.

Brand customization: Colors, fonts, spacing, and line styles are exposed as CSS custom properties. Teams can define a brand theme once and apply it across all diagram types for visual consistency in documentation.

Import from existing tools: Diagram Design can convert Mermaid source and draw.io XML into its own format, providing an upgrade path from existing diagram investments without manual redrawing.

Optional animations: CSS-based animations (no JavaScript) can be enabled for presentation contexts — highlighting flow paths, stepping through sequences, or emphasizing architectural boundaries. Animations are stripped in static export formats.

Use Cases

Documentation teams use Diagram Design to generate diagrams that match the polish of their written content — no more “the text looks professional but the diagrams look auto-generated.” Architecture reviews benefit from the breadth of diagram types, covering system maps, data flows, and deployment topologies in a consistent visual language. Technical bloggers use it to produce diagrams that look intentionally designed rather than hastily generated. Teams migrating away from Mermaid use the import feature to upgrade existing diagrams without starting from scratch.

Considerations

Diagram Design prioritizes editorial quality over interactivity — output is static HTML and SVG, not interactive JavaScript visualizations with zoom, pan, or click-to-focus. For interactive diagrams, tools like Archify are a better fit. The skill requires an agent that supports skills installation. The three visual variants per diagram type cover most aesthetic needs, but highly custom layouts may require manual SVG editing after generation.

Who It’s For

Developers and technical writers who care about the visual quality of their documentation. Teams that have outgrown Mermaid and want diagrams that look as polished as the rest of their content. Anyone producing architecture documents, blog posts, or presentations who wants diagram generation integrated into their coding agent workflow.