Tell your agent to generate brand-styled diagrams in plain English
Instead of opening Figma or memorizing Mermaid syntax every time you draw an architecture diagram, you can simply tell your agent to "draw my app structure." This tool creates a single HTML file that applies your website's colors and fonts based on what the agent understands. The result is a static diagram that opens directly in a browser and is ready to post on a blog or in documentation.
Onboarding with brand fidelity
The core of this tool is embedding an "editorial sensibility" into the code. Rather than simply listing boxes, the agent applies the background color, text color, accent color, and font stack extracted from your website to the diagram. If you provide a website URL, the agent analyzes the site's palette and typography and converts them into diagram tokens. During this process, contrast for text readability is automatically verified, ensuring the diagram remains legible even if the brand colors are very dark or light. A configured brand profile can be reused across multiple projects, which is useful when you need to maintain different styles for different clients.
45 types and three variations
It supports 45 types, including architecture, sequence, flowchart, Gantt chart, and Sankey diagram. Each type is available in three styles: 'Minimal Light', 'Minimal Dark', and 'Full Editorial', allowing you to choose based on the intended use. All diagrams follow the principle of using 1px hairlines and 4px grid alignment without shadows, maintaining a clean design with minimal visual noise. Layout rules specific to each type are applied to clearly represent complex hierarchies or data flows.
Rewriting existing diagrams
If you already have diagrams made with Mermaid, draw.io, or Excalidraw, you can redraw them in this tool's style. It analyzes the content of the original file to retain the same information while restructuring it to fit the design system. You can adjust 'detail' and 'target audience,' choosing whether to include all technical details or create a summary for executives. The conversion process provides a record of which elements were merged or omitted, making it easy to verify differences from the original.
Installation and compatibility
It can be used with various tools that support agent skills, such as Claude Code, Codex, GitHub Copilot, and Cursor. Install it with the npx skills add cathrynlavery/diagram-design command, and installation methods for marketplace plugins specific to certain hosts are also provided. After installation, request diagram generation from the agent in natural language; the agent will select an appropriate type, explain the plan, and generate the HTML file. The output works standalone without external dependencies and can be exported as SVG or PNG.
Output quality and limitations
The output quality of this tool depends heavily on the capabilities of the AI model used. Even with the same prompt, the layout may vary slightly, and the result is not in an editable source format. This means you cannot compare text differences in Git or drag elements directly on a canvas to modify them. Therefore, Mermaid may still be more suitable for diagrams in Git repositories that are stored and frequently changed. This tool is best suited for diagrams intended for "publication," such as blog posts, presentation materials, and websites. Before installing, you should check whether your project supports agent skills and whether the static nature of the output fits your workflow.
