skills.rest
fern-works
fern-worksOFFICIAL
Explore all skills by this author →
GitHub

diagram-design

Create branded diagrams as standalone HTML, SVG, or PNG files from 40 visual types.

Updated Sep 18, 2026
Search Tags:#architecture#html#mermaid#flowchart#svg#diagram#drawio
One-click install
npx skills add https://github.com/fern-works/greenline --skill diagram-design-fern-works
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: diagram-design
Source: https://github.com/fern-works/greenline/tree/main/corpus/skills/diagram-design
Command: npx skills add https://github.com/fern-works/greenline --skill diagram-design-fern-works

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Turning architecture decisions, processes, and data models into clear visuals usually means fighting generic diagram tools or shipping unstyled Mermaid output. This Skill produces editorial-quality diagrams as self-contained HTML/SVG/PNG files that follow a consistent, skinnable design system and are saved as durable artifacts linked from the work they illustrate. ## Core Features & Use Cases - 40 visual types: architecture, flowchart, sequence, state machine, ER, timeline, swimlane, quadrant, radar, Sankey, Wardley map, Gantt, kanban, user journey, deployment, dependency graph, UML class, database schema, and more, each with a dedicated layout reference. - Import and redraw: convert .drawio, .drawio.png/.svg, Mermaid .mmd, and Excalidraw sources into branded diagrams at a chosen size and detail level, using a deterministic extraction script that reports structure without making design decisions. - Skinnable design system: semantic color roles, typography ramp, connector rules, and complexity budgets live in a style guide that projects can override with their own brand tokens. - Use Case: Ask for a state machine diagram of your order-fulfillment flow; the Skill confirms type and size, draws a self-contained HTML file under .greenline/diagrams/<work-id>/, and links it from the owning ticket. ## Quick Start Ask the agent to draw 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 a standalone HTML file?▼

Ask for the diagram in natural language, naming the visual type and content. The Skill confirms the type, size preset, and any complexity-budget cuts, then produces a self-contained HTML file with inline SVG saved under .greenline/diagrams/<work-id>/ and linked from the owning artifact.

How to convert a drawio or Mermaid file into a branded diagram?▼

Point the agent at a .drawio, .drawio.png, .drawio.svg, .mmd, or .excalidraw file and ask to convert or redraw it. The Skill routes by source format to the matching import reference, extracts structure deterministically, and redraws at your chosen size and detail level.

Can I apply my own brand colors and fonts to generated diagrams?▼

Yes, the design system is skinnable through semantic roles like paper, ink, muted, and accent. Write your brand tokens to .greenline/diagrams/style-guide.md as a full copy of the installed guide with changed roles; the installed reference copy is never edited.

What diagram types does this support beyond flowcharts?▼

It covers 40 types including sequence, state machine, ER, timeline, swimlane, quadrant, radar, polar, loop, tree, org chart, layer stack, Venn, pyramid, treemap, bar, waterfall, line, Gantt, scatter, Sankey, fishbone, Wardley map, kanban, user journey, deployment, dependency graph, UML class, story map, and database schema.

When should I not use a generated diagram?▼

Skip it when a table, bulleted list, or a single sentence communicates the same thing, and use a quick reply-side sketch instead of a durable file for throwaway visuals. Diagrams also enforce complexity budgets, so content beyond roughly 9 nodes and 12 arrows should be split into overview plus detail.

Does the diagram export support PNG and SVG output?▼

Yes, diagrams can be exported as static PNG or SVG final-state artifacts. PNG export uses Playwright with Chromium; the doctor check reports the exact setup command if it is missing, and exports always capture the complete static frame.

Related Skills

Explore More Design & Creative Skills→
sadie100sadie100

diagram

Convert Mermaid diagrams into editable .excalidraw files.

Community
Intermediate
larsboeslarsboes

mermaid

Create, validate, and export Mermaid diagrams from Markdown sources.

Community
Intermediate
amirbironamirbiron

pairing

Builds work in reviewable pieces, pausing for feedback before starting each next piece.

Community
Advanced
JuanMS20JuanMS20

sketch

Generate 2-3 self-contained HTML design variants with inline CSS for comparison.

Community
Intermediate