Diagram Design: Generate Polished Technical Diagrams in Claude Code from Natural Language

Introduction

Diagram Design is a Claude Code Skill created by Cathryn Lavery, who open-sourced her personal diagramming standards after finding AI-generated diagrams too ugly and inconsistent with her site's design. The project has garnered over 33k stars on GitHub.

The tool works by accepting a natural-language description of the desired diagram, automatically selecting an appropriate chart type, and producing a standalone HTML file that contains HTML, inline SVG, and CSS in a single file—openable by double-clicking in any browser.

It supports 39 “editor-grade” diagram types, including architecture diagrams, flowcharts, sequence diagrams, state machines, ER diagrams, and more. Each type comes with three built-in themes: light minimal, dark minimal, and full-editor style.

Installation

Install via the Claude Code plugin marketplace with the following commands:

/plugin marketplace add https://github.com/cathrynlavery/diagram-design
/plugin install diagram-design@diagram-design

After installation, typing /diagram-design in the input box lists all available commands, confirming a successful setup.

Command Reference

/diagram-design

— Main entry point: describe requirements in natural language to generate a diagram. /diagram-design:doctor — Checks the runtime environment for missing dependencies (e.g., Playwright for PNG export) and suggests installation. /diagram-design:profile — Save, load, or switch client brand profiles. /diagram-design:import-drawio — Re-render diagrams originally created in .drawio format. /diagram-design:import-mermaid — Re-render diagrams originally created in Mermaid format. /diagram-design:export-diagram — Export the generated HTML to .svg or .png.

Usage Examples

The author demonstrates the tool using a real-world mall e-commerce project.

Architecture Diagram

Prompt: “Draw a system architecture diagram for the mall project, including frontend, backend, database, and Redis cache components.”

When Diagram Design encounters ambiguity, it asks clarifying questions—such as visual style and scope—before generating the HTML file. The resulting architecture diagram uses clean thin borders, a single accent color for key components, and no shadows or flashy gradients, yielding a consistent, professional look.

Sequence Diagram

Prompt: “Draw a sequence diagram of the user login process for the mall project.”

Claude Code reads the codebase and discovers two login flows (admin backend and member frontend). It prompts the user to choose which flow to diagram; the author selects the member login. The output sequence diagram matches the architecture diagram’s visual style exactly.

ER Diagram

Prompt: “Draw a database ER diagram for the mall project’s product module; tables prefixed with pms_ belong to the product module.”

Diagram Design enforces a complexity budget of eight entities per diagram. The tool selects the eight core tables centered on the SPU (Standard Product Unit) and produces a clean ER diagram.

Flowchart (Activity Diagram)

Prompt: “Based on the mall project’s generateConfirmOrder method, draw a flowchart of the order confirmation process.”

Since Diagram Design does not have a dedicated “activity diagram” type, it uses the Flowchart type for branching logic. The tool reads the method code and renders the entire flow, including decision branches.

Mind Map

Prompt: “Create a learning roadmap for the mall project and draw a mind map.”

Mind maps map to the Tree diagram type. The tool generates a hierarchical mind map outlining the learning path.

Summary

The end-to-end workflow: describe the diagram need → Diagram Design picks the chart type → outputs a styled HTML file. The tool enforces a unified design system and a complexity budget (suggests splitting diagrams exceeding nine nodes). It does not provide a free-form drag-and-drop canvas; instead, it uses design standards and complexity limits to reduce decision fatigue. For quick, presentable diagrams it is highly efficient; for extensive manual tweaking, a traditional canvas tool may be better.

Existing .drawio or Mermaid diagrams can be re-rendered via the import commands. Developers and technical writers who regularly embed diagrams in documentation or blog posts should try it to see if the style fits their workflow.

Project Repository

https://github.com/cathrynlavery/diagram-design