# AI use cases for Diagram Design (cathrynlavery/diagram-design) Repo: [cathrynlavery/diagram-design](https://github.com/cathrynlavery/diagram-design) | Use cases: 4 | Page: https://dedupedai.com/use-cases/cathrynlavery-diagram-design/ Diagram Design is an agent skill that makes one self-contained HTML and SVG diagram file in a consistent editorial style, matched to your brand. This file holds every use case of this repo. Each one starts with a "## " heading and ends with its URL. - Draw an architecture diagram for a doc or post: https://dedupedai.com/use-cases/cathrynlavery-diagram-design/draw-architecture-diagram-for-a-doc/ - Match diagrams to your site's brand: https://dedupedai.com/use-cases/cathrynlavery-diagram-design/match-diagrams-to-your-site-brand/ - Redraw old Mermaid or draw.io diagrams: https://dedupedai.com/use-cases/cathrynlavery-diagram-design/redraw-mermaid-or-drawio-diagrams/ - Export a finished diagram to PNG or SVG: https://dedupedai.com/use-cases/cathrynlavery-diagram-design/export-diagram-to-png-or-svg/ ## How to draw an architecture diagram for a doc or post with Diagram Design Repo: [cathrynlavery/diagram-design](https://github.com/cathrynlavery/diagram-design) | Difficulty: Intermediate | Time: 15 minutes | Basis: From the README Turn a plain-words description of a system into one HTML diagram file you can open in a browser. **Who it is for:** 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. **The problem:** Hand-drawing in Figma or a generic chatbot answer takes too long, and the result often looks unlike the rest of the site. **The outcome:** One .html file with an inline SVG architecture diagram that opens by double-clicking. ### Steps 1. Install the skill with `npx skills add cathrynlavery/diagram-design`. 2. Ask your agent in plain words, for example: "Make me an architecture diagram of my app: frontend, backend, database, Redis cache." 3. Check the agent's stated plan for the diagram type it chose. 4. Open the generated .html file by double-clicking it. 5. Ask the agent again to remove or rename nodes, or edit the SVG directly. ### Prompt to paste into your agent ```text Using the diagram-design skill from cathrynlavery/diagram-design, draw an architecture diagram of 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. ``` ### 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. Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/ URL: https://dedupedai.com/use-cases/cathrynlavery-diagram-design/draw-architecture-diagram-for-a-doc/ ## How to match diagrams to your site's brand with Diagram Design Repo: [cathrynlavery/diagram-design](https://github.com/cathrynlavery/diagram-design) | Difficulty: Intermediate | Time: 15 minutes | Basis: From the README Onboard the skill to your site so every new diagram uses your palette and fonts. **Who it is for:** A marketer, founder or writer who publishes diagrams on a website and wants them to look like the rest of the site. **The problem:** Generic diagram output clashes with the site's look, so each diagram needs manual restyling. **The outcome:** Diagrams that follow the palette and fonts pulled from your site after onboarding. ### Steps 1. Install the skill with `npx skills add cathrynlavery/diagram-design`. 2. Ask your agent: "Onboard Diagram Design to https://yoursite.com". 3. Ask for any diagram, for example a quadrant of Q2 projects by impact vs effort. 4. Compare the new diagram's colors and fonts with your site. 5. Ask the agent to adjust the palette if one color is off. ### Prompt to paste into your agent ```text Using the diagram-design skill from cathrynlavery/diagram-design, onboard to so it pulls the site's palette and fonts. Then draw a quadrant diagram of and write one self-contained .html file. Verify that the accent color and fonts match the site. ``` ### Caveat Onboarding pulls palette and fonts from the URL you give, so check the result against your site before you publish diagrams. Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/ URL: https://dedupedai.com/use-cases/cathrynlavery-diagram-design/match-diagrams-to-your-site-brand/ ## How to redraw old Mermaid or draw.io diagrams with Diagram Design Repo: [cathrynlavery/diagram-design](https://github.com/cathrynlavery/diagram-design) | Difficulty: Intermediate | Time: 30 minutes | Basis: From the README Convert an existing Mermaid, draw.io or Excalidraw diagram into a styled HTML file. **Who it is for:** An engineer or writer with an older Mermaid, draw.io or Excalidraw diagram who needs a version for a publication or slide page. **The problem:** Text-based Mermaid output and draw.io canvases are hard to reuse in a polished page without redrawing them. **The outcome:** A redrawn diagram in the editorial style, saved as one .html file. ### Steps 1. Install the skill with `npx skills add cathrynlavery/diagram-design`. 2. Ask your agent to redraw the existing file, for example: "Redraw this Mermaid flowchart in Diagram Design style: ". 3. Review the redrawn nodes and labels against the original. 4. Open the new .html file in a browser to check it. 5. Keep the original file as the editable source. ### Prompt to paste into your agent ```text Using the diagram-design skill from cathrynlavery/diagram-design, redraw the existing diagram at as one self-contained .html file with inline SVG. Verify that every node and connection from the original appears in the output. ``` ### Caveat The README says the redrawn output is not an editable source format, so the original Mermaid, draw.io or Excalidraw file remains the file to edit. Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/ URL: https://dedupedai.com/use-cases/cathrynlavery-diagram-design/redraw-mermaid-or-drawio-diagrams/ ## How to export a finished diagram to PNG or SVG with Diagram Design Repo: [cathrynlavery/diagram-design](https://github.com/cathrynlavery/diagram-design) | Difficulty: Intermediate | Time: 15 minutes | Basis: From the README Save a generated diagram as a PNG or SVG file for slides, docs or a website. **Who it is for:** A writer or presenter who has a finished diagram and needs an image file for a slide deck, doc or web page. **The problem:** An HTML diagram is not always accepted by slide tools or image uploads, so it needs an image export. **The outcome:** A PNG or SVG copy of the diagram saved next to the original HTML file. ### Steps 1. Install the skill with `npx skills add cathrynlavery/diagram-design`. 2. Generate the diagram with a plain-words request and open the .html file to confirm it. 3. Ask your agent to export it to PNG or SVG, or run the export command in hosts that offer it. 4. Open the exported file to check text and lines. 5. Store the .html file with the image as the source copy. ### Prompt to paste into your agent ```text Using the diagram-design skill from cathrynlavery/diagram-design, export the diagram at to PNG and to SVG. Verify that both files open and that text and lines are not clipped. ``` ### Caveat The export details are described in the README's Export section, so read that section for the exact export method on your host before relying on it. Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/ URL: https://dedupedai.com/use-cases/cathrynlavery-diagram-design/export-diagram-to-png-or-svg/