59.3k Stars diagram-design in Practice: Connect WorkBuddy to Let AI Auto-Generate Architecture Diagrams on a 4px Grid

1. Background: A Bid Proposal Stuck on a Business Architecture Diagram

It's not that your solution isn't good enough; it's that your flowchart looks like a draft.

Yesterday I stayed up late helping a student revise a bid proposal. The text logic was sorted, but it got stuck on the business architecture diagram—manually dragging boxes and aligning them, and it dragged on until midnight. Later I installed the open-source project cathrynlavery/diagram-design, which has 59.3k stars on GitHub, into Tencent's AI office workbench WorkBuddy [2, 3], and combined it with Doubao and Tencent Yuanbao for text anonymization. In a short while, a professional architecture diagram aligned to a 4px grid was done [2, 3].

Let me set the context: I'm XiaoHu AI. I've done two years of AI training and led thousands of students. Honestly, in the past, every time I had to deliver a proposal to a client, I was nervous. The business flow was clear in my head, but the moment I opened drawing software, just adjusting box sizes, aligning arrows, and picking colors ate up two hours. After finally finishing and sending it over, the client would say "add one more node," and the whole layout fell apart. I'd want to throw my mouse.

Today I won't talk about fluff. I'll walk you through this pipeline that avoids manual line-drawing, and at the end I've included "3 plug-and-play diagram prompt templates" you can copy and use.

2. The Problem: Why Letting AI Draw Diagrams Always Falls Short

Many people have tried having AI write Mermaid code or directly generate images, and the results?

• Either the text is a blur;
• Or the colors look like a web page from the last century;
• Putting it into a bid proposal looks obviously fake.

That's until I saw the diagram-design project open-sourced by Cathryn Lavery (LittleMight). The homepage is at https://diagramdesign.dev [1, 2]. As of October 26, it has gained 59.3k stars on GitHub [2].

3. The Solution: A Layout Design Specification Installed Directly Inside the AI Agent

First, let me be clear about what it is. It's not a drawing website where you register and pay. It's a "layout/typography design specification" installed directly inside an AI agent [5].

Previously, we drew diagrams by eye: shadows randomly added, font sizes left to chance. With diagram-design, it's a different story. It comes with 45 HTML and inline SVG templates aligned to a 4px coordinate grid [2], all using 1px thin lines and zero shadows, and even the colors pass WCAG-AA contrast validation [2].

In my view, that's like having a meticulous senior visual designer sitting next to you: you just report the business logic, and they measure pixels with a ruler to draw the boxes for you.

3.1 Supported Diagram Types

Honestly, I didn't expect it to handle far more than plain flowcharts:

• Architecture diagrams, architecture diff diagrams, sequence diagrams, state machines, ER data models, timelines all work [1, 6];
• Swimlane diagrams, quadrant diagrams, radar charts, Gantt charts, Sankey diagrams, fishbone diagrams are also no problem [1, 6];
• Even Wardley maps, kanban, user journey maps, deployment diagrams, UML class diagrams [1, 6].

When done, export directly as HTML, SVG, or PNG to drop into your proposal. You can also import your half-finished .drawio, Mermaid, and .excalidraw files to re-layout [6].

3.2 Run Forms and Versions

You might ask: does something from GitHub mean I have to type a bunch of code?

I have more than ten years of code development experience, but when I teach bosses and professionals to use AI, my principle is simple: if you can solve it by clicking a mouse, never make them memorize commands.

diagram-design itself is an AI agent skill. The version info noted in various places is as follows [1, 6]:

Source	Version
GitHub repo .claude-plugin/plugin.json	2.6.136
Same-page summary	2.6.120
SKILL.md metadata	2.6

It supports running inside OpenCode, Claude Code, Codex, Cursor, and GitHub Copilot [2].

3.3 Recommended Pairing: WorkBuddy Workbench

If you don't regularly use these programming tools, my suggestion is direct: pair it with Tencent's all-scenario AI office workbench WorkBuddy. The official site is at https://www.workbuddy.cn or https://www.workbuddy.ai [3, 4].

Think about it—many domestic bosses only have everyday office software on their computers. WorkBuddy's capability list is as follows [3, 4]:

• It can autonomously plan, call tools, and generate files;
• It directly integrates WeChat, WeCom, Tencent Docs, and Tencent Meeting;
• It works on Mac, Windows, Linux, HarmonyOS computers, and even mobile mini-programs.

4. Hands-On: Two Steps to Install and Hand Out Tasks

4.1 Installing the Skill

It's just two steps. Type one command and the skill is mounted.

Open the terminal of your local AI workbench that supports Skills, and enter this installation command [2]:

npx skills add cathrynlavery/diagram-design

Or use the equivalent command [2]:

epx add cathrynlavery/diagram-design --skill diagram-design

Once installed, this skill becomes a built-in ability of your local AI assistant. You don't need to memorize complex layout parameters; just talk to the AI in plain language.

4.2 How to Assign Tasks

Here are some reference scenarios:

• A traditional enterprise boss wants to build a system for a client: have the AI turn the verbal "purchase approval flow" into a swimlane diagram with department partitions;
• A product manager rushing for Friday: have the AI convert feature requirements in Tencent Docs into a state machine and a user journey map;
• A business lead doing a project retrospective: have the AI re-layout a Mermaid draft into a 4px-grid architecture diff diagram.

In the past, people served drawing software by pulling lines; now AI guards the pixel grid and produces the solution.

5. Security: Hold the Safety Line Before Feeding AI

Hold on—don't rush to drag your bid proposals and core code into it.

Every time I do enterprise onboarding, I emphasize the security red line. Many bosses, to save effort, send documents containing real client names, quote floors, and database passwords to free AI. That's no different from being naked on the public internet.

Objectively, the official privacy statement updated on October 1 states that diagram-design is just local-running instructions, HTML templates, and small scripts [1, 5]. It is MIT-licensed, has no independent servers, no accounts, and does not collect telemetry data [1, 5]. In plain words, LittleMight won't collect your personal data through it [1, 5].

As for WorkBuddy, it uses TLS/AES-256 encryption for transmission and storage, with independent key hosting [3], and it has passed ISO 27001, SOC 2, and the Chinese Class III protection (等保三级) certifications [3].

But as long as the workflow calls a cloud LLM, I set three iron rules for my students:

1. Never upload real server IPs, plaintext database table structures, API keys, or core algorithm source code;
2. Never upload business flow diagrams containing undisclosed financial data, real client lists, or supplier floor prices;
3. Before sending to AI for drawing, first replace sensitive terms with code names locally or using Doubao or Tencent Yuanbao.

For example, replace "a bank's core settlement system" with "System A" and the real amount with "X ten-thousand yuan." After getting the exported HTML or SVG file, swap the real names back in a local editor.

Additionally, if you use it to draw architecture diagrams of a code repository, I advise you to check the bill. A third-party test on October 21 mentioned that when drawing architecture diagrams and supporting knowledge bases, sending the full file directly consumes 33,807 tokens in a single run [2]; after enabling local skeleton compression, the single-run consumption drops to 12,956 tokens [2].

Anonymize the code and extract the skeleton first—that both prevents leaks and cuts your compute cost by more than half.

6. Prompts: Copy These Templates to Get a Diagram Directly

Once the tool is installed and the security line is drawn, how do you get AI to produce a diagram that can be dropped straight into a PowerPoint?

Many people throw in a sentence like "draw me an e-commerce refund flow chart," and AI misses half the branches, forcing three reworks—worse than doing it by hand.

Of the 200-plus students I've mentored, everyone who actually gets efficiency out of AI uses my "acceptance-first" method—before starting, you put the acceptance criteria right in front of it.

I've put together "3 plug-and-play diagram prompt templates." You can first use Doubao or Yuanbao to structure scattered business ideas through the template, then hand it to the workbench with the skill to produce the diagram.

Please call the diagram-design skill to generate a 【cross-department business approval swimlane diagram】.
【Participants】Customer, Sales, Finance, Delivery Team (anonymized).
【Core flow】1. Customer submits requirement form; 2. Sales preliminarily reviews quote, if below threshold A, goes straight to delivery, if above threshold A, passes to Finance for review; 3. Finance confirms payment, then notifies Delivery Team to create a project.
【Pre-acceptance criteria】
- Must strictly divide swimlanes by role, aligned to the 4px grid.
- The "yes/no" branches of decision nodes must be clearly labeled, with no crossed or overlapping lines.
- Output both HTML and SVG format files.

Please call the diagram-design skill, based on the anonymized module list I provide, to generate an 【architecture diff diagram before/after system upgrade】.
【Before state】Monolithic app directly connects to core database A, with scheduled scripts syncing reports.
【After state】Split into order service and inventory service, with a message queue B introduced in between, and read/write separation.
【Pre-acceptance criteria】
- Use high-contrast colors to clearly distinguish "new module", "kept module", and "removed link", meeting WCAG-AA contrast.
- Use 1px thin lines and zero shadows.
- Export as high-definition PNG and a re-editable HTML file.

Please call the diagram-design skill to convert the following 4-week project milestones into a 【Gantt chart】, and also create a 【kanban board】 for the current week.
【Phase schedule】Week 1 requirements freeze; Weeks 2-3 core module development; Week 4 integration and acceptance.
【Current kanban】To-do (interface docs), In-progress (frontend pages), Done (database design).
【Pre-acceptance criteria】
- Key milestone nodes should be highlighted.
- Text labels should be within 6 characters, compact without line breaks.
- Output SVG format so it can be directly pasted into Tencent Docs.

6.1 Two Shortcomings You Should Keep in Mind

Speaking of which, I have to be honest: this thing is not omnipotent. It has two clear shortcomings:

• First, the output quality strongly depends on the underlying LLM being called. Even if you run the same prompt twice, the layout of the boxes may differ [8];
• Second, the generated HTML or SVG is not in natively draggable-connector format like draw.io. If you submit it in a code repo PR, there's no ready-made diagram text to diff against [8].

Tip: If your proposal needs non-technical teammates to frequently drag and edit text with a mouse, I suggest first arranging the logic in an old .drawio or Mermaid file and then importing it for final polish. Don't expect to drag arrows directly on a generated PNG [6, 8].

7. Summary: Who Should Install, Who Should Skip

So my judgment is clear.

• If you are a traditional enterprise boss or product manager who delivers proposals to clients daily, and you want a clean, aligned architecture diagram within ten minutes to present, this combo is worth installing today;
• But if you are drawing very large diagrams with dozens of people collaborating and manually fine-tuning hundreds of connectors every day, listen to me: stick to professional, industrial-grade drawing software. Don't torture yourself with AI.

In my view, the tool doesn't just save those two hours of box-dragging; it genuinely turns the business flow in your head into an asset the client can understand.

Go home tonight, forget memorizing the 45 templates. Do one minimal action: copy the first swimlane prompt above, fill in your company's most painful reimbursement or shipping process, and run it once.

How long do you usually spend drawing a flowchart? What change requests from clients scare you the most? Feel free to share your diagram-drawing pitfalls in the comments.

References

[1] diagram-design/.claude-plugin/plugin.json at main · cathrynlavery/diagram-design · GitHub · https://github.com/cathrynlavery/diagram-design/blob/main/.claude-plugin/plugin.json

[2] Diagram Design + Regolo: Interactive Codebase Architecture Maps · regolo.ai · https://regolo.ai/getting-started-diagram-design-regolo-architecture-maps

[3] WorkBuddy - AI Agent 办公新范式 · workbuddy.cn · https://www.workbuddy.cn

[4] WorkBuddy - AI Agent for Everyday Office Work · workbuddy.ai · https://www.workbuddy.ai

[5] diagram-design/PRIVACY.md at main · cathrynlavery/diagram-design · GitHub · https://github.com/cathrynlavery/diagram-design/blob/main/PRIVACY.md

[6] diagram-design/skills/diagram-design/SKILL.md at main · cathrynlavery/diagram-design · GitHub · https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/SKILL.md

[8] GitHub - cathrynlavery/diagram-design at blog.twms.in · GitHub · https://github.com/cathrynlavery/diagram-design?ref=blog.twms.in