skills.rest
marcmarti9
marcmarti9COMMUNITY
Explore all skills by this author →
GitHub

diagram-design

Generate branded architecture, flowchart, and data diagrams as standalone HTML/SVG files.

3|Updated Jul 28, 2026
Search Tags:#architecture#html#flowchart#visualization#SVG#diagram#drawio
One-click install
npx skills add https://github.com/marcmarti9/agentit --skill diagram-design-marcmarti9
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: diagram-design
Source: https://github.com/marcmarti9/agentit/tree/main/skills/diagram-design
Command: npx skills add https://github.com/marcmarti9/agentit --skill diagram-design-marcmarti9

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires playwright, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve? Producing consistent, well-designed technical diagrams by hand is slow, and generic AI-generated diagrams often look like unstyled slop with broken connectors and unreadable labels. This Skill applies an opinionated editorial design system to produce clean, accessible diagrams across 40 visual types. ## Core Features & Use Cases - 40 Visual Types: Create architecture, sequence, state machine, ER, Gantt, Sankey, Wardley map, kanban, user journey, UML class, database schema, and many other diagram types as self-contained HTML/SVG/PNG. - Import and Redraw: Redraw .drawio, .drawio.png/.svg, Mermaid .mmd, and Excalidraw .excalidraw sources at a chosen size and detail level using deterministic extraction scripts. - Brand Onboarding: Onboard brand tokens from a website, manage saved style profiles, and add lifecycle phase maps, callouts, accessible motion, or sketchy hand-drawn styling. - Use Case: Ask your agent to turn an existing draw.io architecture export into a branded, editorial-style SVG diagram for a modernization proposal, with correct orthogonal connectors and a complexity budget enforced automatically. ## Quick Start Ask your agent to create an architecture diagram of your system as a standalone HTML file using the diagram-design skill.

Frequently Asked Questions about diagram-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create an architecture diagram as HTML/SVG?▼

Describe the system components and connections, and the Skill generates a self-contained HTML file with inline SVG following its editorial design system. It enforces orthogonal connectors, a 9-node complexity budget, and accessible title/desc attributes.

Can I convert a draw.io or Mermaid diagram into a styled SVG?▼

Yes, the Skill imports .drawio, .drawio.png/.svg, Mermaid .mmd, and Excalidraw .excalidraw sources. A Python extraction script decodes the draw.io file into a normalized intermediate representation, then the diagram is redrawn at your chosen size and detail level.

How do I apply my own brand colors to generated diagrams?▼

Edit references/style-guide.md directly or run the URL-based onboarding flow in references/onboarding.md to extract brand tokens from a website. Saved profiles are managed through references/profiles.md and bypass the first-time style gate.

What diagram types does this support besides flowcharts?▼

It supports 40 types including sequence, state machine, ER, timeline, swimlane, quadrant, radar, Sankey, fishbone, Wardley map, kanban, user journey, deployment, dependency graph, UML class, story map, and database schema diagrams.

When should I not use a visual diagram?▼

Skip the diagram when a table, bulleted list, or single paragraph communicates the same information, such as simple before/after comparisons or one-shape diagrams. Quick unicode diagrams should use wiretext instead.

Why do diagram connectors or labels render incorrectly?▼

The Skill enforces six mandatory connector rules: rounded right-angle elbows, 6-10px label gaps, no overlapping paths, fanned attach points, no transit behind non-endpoint boxes, and no label masks under later nodes. Run scripts/verify-geometry.py on the output file to check compliance.

Related Skills

Explore More Design & Creative Skills→
AradotsoAradotso
7

blueprint-mcp-diagram-generation

Generate architecture diagrams and flowcharts as PNG files via Blueprint MCP.

Official
Intermediate
466852675466852675

fireworks-tech-graph

Generate validated SVG technical diagrams and export PNG images.

Community
Advanced
phishkatlabsphishkatlabs

tech-writer

Generate audience-specific documentation synced with the codebase.

Official
Advanced
shekerkammashekerkamma

diagram-export

Convert Mermaid, PlantUML, Graphviz, draw.io, and Vega diagrams to PNG/SVG/PDF.

Community
Intermediate