diagram

Solid

Generate modern reviewable diagrams (system architecture, workflow, data flow, sequence, ER, state-machine, C4) via OpenRouter image-gen or LLM-emitted SVG. Auto-classifies diagram type from prompt; --type to override. Default scratch output goes to the resolved workbench visuals path; --versioned writes git-trackable specs and variants under docs/diagrams/.

AI & Automation 7 stars 0 forks Updated today MIT

Install

View on GitHub

Quality Score: 84/100

Stars 20%
30
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
80
License 10%
100
Description 5%
100

Skill Content

# vd:diagram Turn natural-language descriptions into reviewable diagram images and version-controlled diagram artifacts. Two render paths: - **PNG** (default): generates the image. Default image provider is **codex** (`gpt-image-2` via your ChatGPT subscription - cost-optimized, no per-image API spend), with automatic fallback to OpenRouter `gpt-5.4-image-2` when codex is unavailable and an OpenRouter key is set. Force the API path with `--provider openrouter`. With `--provider codex` and an explicit `--type`, no `OPEN_ROUTER_KEY` / `OPENROUTER_API_KEY` is required. - **SVG** (`--format svg`): the LLM emits the SVG markup directly. Cheaper, crisper labels, hand-editable. Use `--versioned` only when the diagram source, variants, and manifest are themselves review artifacts for an ADR/spec/PR. It writes a stable folder under `docs/diagrams/<slug>/` with: - `diagram.spec.yaml` - reviewable source intent (type, preset, engine, description, latest variant) - `manifest.json` - deterministic metadata for automation - `v1.svg`, `v2.svg`, ... or `v1.png`, `v2.png`, ... - rendered variants For a diagram that merely illustrates a docs page, keep the generation session in the injected `Visuals:` path, copy the final rendered image into the docs' local assets folder (for example `docs/design/assets/<slug>.svg`), and link that one asset from Markdown. Do not create `docs/diagrams/` just because a docs page references an image. ## Quick Start ```bash # Resolve the Python interpreter: s...

Details

Author
vanducng
Repository
vanducng/skills
Created
4 months ago
Last Updated
today
Language
HTML
License
MIT

Integrates with

OpenAI · AI

Bundled in these plugins

vd

Similar Skills

Semantically similar based on skill content — not just same category

AI & Automation Listed

diagram-design

Create technical and product diagrams — architecture, flowchart, sequence, state machine, ER / data model, timeline, swimlane, quadrant, nested, tree, layer stack, venn, pyramid — as standalone HTML files with inline SVG. Ships with a neutral editorial skin and a first-run gate that prompts users to customize the style guide (colors, fonts) from their own website before generating. Includes annotation-callout primitive and optional sketchy variant.

146 Updated 1 weeks ago
alfredolopez80
AI & Automation Listed

rendering-clean-diagrams

Generates clean, readable general-purpose diagrams from text DSLs (Mermaid, D2, Graphviz, PlantUML), chooses suitable layout engines, and runs validation/render loops to produce embeddable SVG/PNG/Markdown outputs. Use when a user asks for a flowchart, ERD, state machine, dependency graph, mindmap, network graph, architecture sketch, or basic sequence diagram that must render reliably. Not for explicit C4 modeling or deep Mermaid sequence-specific syntax work.

0 Updated 4 weeks ago
msewell
AI & Automation Listed

diagram-design

Create polished, accessible, self-contained HTML/SVG diagrams for architecture, workflows, data flows, sequences, state machines, ER models, timelines, swimlanes, charts, security views, and other editorial visual types. Redraw Mermaid and draw.io sources into a fresh layout, apply optional brand tokens, and verify geometry, accessibility, motion, and single-file safety. Use when the output should be an editable HTML/SVG artifact rather than an ASCII sketch, generated raster image, or editable whiteboard canvas.

7 Updated today
vanducng