Next AI Draw.io
Draws flowcharts and architecture diagrams from a sentence, ready to edit in draw.io
by Dayuan Jiang
Diagram Design
by Cathryn LaverySkillMake visuals
Turns a plain request into a clean flowchart, timeline or chart as one HTML file
About Diagram Design
A skill that has your AI agent draw diagrams in one clean editorial style: it picks from 45 diagram types and writes a single HTML file you open in your browser. It can match your brand and export PNG or SVG.
For Bloggers and writersFounders and product teamsAnyone making slides or docs
Made by Cathryn Lavery
Cathryn Lavery writes about AI, entrepreneurship and design at littlemight.com. This open-source skill is published from her GitHub repository, which she says is the only source of official builds.
- Stars
- ★ 63k
- License
- MIT
- Cost
- Free
- Level
- Beginner
- Contents
- Includes scripts
Examples
From the project's own repository · 4 images, swipe or use the arrows.
Overview
Diagram Design is a skill that teaches your AI agent to draw diagrams in one calm editorial style. You describe what you need in plain words, such as a quadrant of projects by impact and effort, and the agent picks one of 45 diagram types and writes a single HTML file you open by double-clicking. It can match your brand colours and fonts from your website, redraw Mermaid, draw.io or Excalidraw files, and export PNG or SVG. It suits writers, founders and teams who need a diagram for a post, a deck or a document.
It gives agent-made diagrams one consistent, restrained look instead of generic rounded boxes, and it can learn your brand from a single URL.
Try these first
Start with the first one: it is a small task you can check easily.
- Make a quadrant of these four projects by impact and effort: [list projects]First try
- Draw a timeline of these milestones: [paste dates and events]
- Onboard diagram-design to [your website URL] so my diagrams use its colours and fonts.reads your website
- Redraw this Mermaid diagram in your style: [paste Mermaid text]
Example prompts written by Agent Flows Hub.
What you get
From the creator's documentation.
| Output | What it is | Reads |
|---|---|---|
| 45 diagram types | Flowcharts, timelines, quadrants, org charts, Gantt, funnels, Venn and more | What you describe |
| One HTML file | A single file with inline SVG that opens with a double-click | Your computer |
| Brand matching | Pulls the palette and fonts from a website you name and saves them as a profile | Your website |
| Import | Redraws Mermaid, draw.io and Excalidraw files | Files you give it |
| Export | Saves a diagram as SVG, or as PNG with Python and Playwright installed | Your computer |
| Web fonts | Diagrams load fonts from Google Fonts unless you ask for system fonts | Google Fonts |
Good to know
You need one clear diagram for a blog post, a slide or a document. Describe it in plain words and the agent picks a diagram type, states its plan and writes a single HTML file with the drawing.
Limits
- The author notes that output quality depends on the model, and the same prompt can lay out differently twice. The result is HTML and SVG, not an editable draw.io or Excalidraw canvas.
- Diagrams load their fonts from Google Fonts unless you ask for system fonts. PNG export needs Python with Playwright and Chromium.
Notes by Agent Flows Hub (original project name: diagram-design), written from the creator's documentation, not from running it ourselves. Diagram Design README: install, diagram types and export · Diagram Design skill file
Stuck setting it up?
Tell us what happened. We take a look first; if it needs paid work, you get an estimate before anything starts.
More to make visuals
Other skills
- Disk Space Cleanup Report Scans your Mac or Windows drive and opens a report that sorts what you can clear
- Douyin Post Uploader Has your agent post a video or image post to Douyin, now or at a time you choose
- Earnings Preview Gives you a briefing on what analysts expect before a company reports its earnings
- Editable Slides from Images Rebuilds slide screenshots, PDFs or image-only decks as PowerPoint files you can edit
- Educational Comic Maker Explains a topic, person or how-to as a multi-page illustrated comic
- Email Sequence Writer Plans and writes welcome, nurture, onboarding and win-back email sequences