{
 "schema_version": 1,
 "generated": "2026-10-20",
 "id": "cathrynlavery-diagram-design--draw-architecture-diagram-for-a-doc",
 "repo": "cathrynlavery/diagram-design",
 "repo_url": "https://github.com/cathrynlavery/diagram-design",
 "repo_slug": "cathrynlavery-diagram-design",
 "title": "Draw an architecture diagram for a doc or post",
 "page_title": "How to draw an architecture diagram for a doc or post with Diagram Design",
 "summary": "Turn a plain-words description of a system into one HTML diagram file you can open in a browser.",
 "who": "A developer or technical writer who needs an architecture diagram for a blog post, design doc or README and does not want to draw it by hand.",
 "problem": "Hand-drawing in Figma or a generic chatbot answer takes too long, and the result often looks unlike the rest of the site.",
 "outcome": "One .html file with an inline SVG architecture diagram that opens by double-clicking.",
 "steps": [
  "Install the skill with `npx skills add cathrynlavery/diagram-design`.",
  "Ask your agent in plain words, for example: \"Make me an architecture diagram of my app: frontend, backend, database, Redis cache.\"",
  "Check the agent's stated plan for the diagram type it chose.",
  "Open the generated .html file by double-clicking it.",
  "Ask the agent again to remove or rename nodes, or edit the SVG directly."
 ],
 "agent_prompt": "Using the diagram-design skill from cathrynlavery/diagram-design, draw an architecture diagram of <system name> showing its components and connections. Write one self-contained .html file with inline SVG. Verify the file opens in a browser and that no labels are clipped or overlapping.",
 "agents": [
  "claude-code",
  "codex",
  "cursor",
  "gemini-cli"
 ],
 "difficulty": "Intermediate",
 "time": "15 minutes",
 "basis": "readme",
 "caveat": "The same prompt can lay out differently on different runs, and the output is not an editable source file, so keep the prompt and the HTML file if you need to reproduce a diagram.",
 "category": "Software and DevOps",
 "tags": [
  "Software and DevOps"
 ],
 "lang": "html",
 "requirements": [
  "An agent host that reads Agent Skills, such as Claude Code, Codex, Cursor or GitHub Copilot",
  "A terminal that can run `npx skills add` or the host's plugin commands",
  "A web browser to open the generated .html file"
 ],
 "risk": "none",
 "seen_in_the_wild": false,
 "mentioned_publicly": false,
 "risks": [],
 "best": true,
 "score": 1.0,
 "evidence": [],
 "url": "https://dedupedai.com/use-cases/cathrynlavery-diagram-design/draw-architecture-diagram-for-a-doc/",
 "md": "https://dedupedai.com/use-cases/cathrynlavery-diagram-design/draw-architecture-diagram-for-a-doc/index.md",
 "disclaimer": "Deduped lists open-source repositories that belong to other people. We do not own, maintain, audit, or vouch for any of them, and a repo appearing here is not an endorsement or a safety check. The use cases, steps, and prompts are written by AI and may be incomplete, outdated, or just wrong. Where a use case is marked \"Seen in the wild\", we link to public posts where someone described something similar, but we have not verified those posts and the use case itself is still our AI's own write-up. Use all of this at your own risk. Only run code, commands, or agents on systems and accounts you are authorized to use, and read the code and every command before you run it, especially anything that touches credentials, files, or the network. Nothing here is professional, security, legal, or financial advice. All trademarks and project names belong to their respective owners, and their use here does not imply affiliation. Content is provided as is, without warranties of any kind. Found a mistake, a safety problem, or something you want removed? Email hello@dedupedai.com and we will look at it promptly.",
 "api": "https://dedupedai.com/api/v1/usecases/cathrynlavery-diagram-design--draw-architecture-diagram-for-a-doc.json",
 "api_version": "v1"
}