skills.rest
bennoloeffler
bennoloefflerCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

ai-create-diagram

Generate D2 source and compile it into SVG and PNG diagrams.

Updated May 17, 2026
Search Tags:#architecture#png#flowchart#svg#d2#sequence diagram#diagram
One-click install
npx skills add https://github.com/bennoloeffler/claude-code-personal-agent-plugins-skills --skill ai-create-diagram
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ai-create-diagram
Source: https://github.com/bennoloeffler/claude-code-personal-agent-plugins-skills/tree/main/skills/ai-create-diagram
Command: npx skills add https://github.com/bennoloeffler/claude-code-personal-agent-plugins-skills --skill ai-create-diagram

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

It converts architecture, flows, and sequence descriptions into production-ready diagrams without manual drawing, saving time and reducing formatting mistakes.

Core Features & Use Cases

  • D2-to-SVG/PNG generation: Produces editable D2 source plus rendered SVG and PNG for reuse in docs and decks.
  • Diagram types from natural language: Supports flowcharts, org charts, sequences, ERDs, and state/logic-style layouts using D2 syntax.
  • Styling and layout controls: Provides theme and sketch-mode options plus practical conventions (like keeping diagrams readable with fewer nodes).

Quick Start

Ask Claude to create a flowchart diagram for your “lead process from inquiry to onboarding” and specify the output as SVG and PNG.

Frequently Asked Questions about ai-create-diagram

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

FAQPage Schema
How do I generate an architecture diagram from a text description?▼

Generating architecture diagrams from text descriptions is done by translating natural language into D2 source code and compiling it into SVG and PNG output files. This eliminates manual drawing and formatting errors for systems documentation.

Can I create sequence diagrams and ERDs without manual drawing?▼

Sequence diagrams and ERDs can be created automatically by writing D2 syntax from your structural descriptions. The tool compiles the D2 source into rendered SVG and PNG assets for immediate reuse in documentation.

What is the best way to produce editable flowcharts for technical documentation?▼

The best way to produce editable flowcharts for documentation is generating D2 source files alongside compiled SVG and PNG outputs. This ensures reproducible, typographic layouts while keeping the original diagram source editable.

Does D2 support custom themes and sketch-mode styling for diagrams?▼

D2 supports custom themes and sketch-mode options for styling generated diagrams. These layout controls allow you to adjust the visual presentation while maintaining deterministic output files across compilations.

How do I install D2 to start rendering diagrams from descriptions?▼

Installing D2 to render diagrams requires running the provided installer script included in the Skill components. Once installed, you can write .d2 source files and compile them into SVG and PNG assets directly.

How many nodes should I include to keep complex flowcharts readable?▼

To keep complex flowcharts readable, you should limit the number of nodes in your D2 source by applying practical conventions for simpler layouts. Reducing node density ensures reproducible, typographic diagrams remain clear.

Related Skills

Explore More Design & Creative Skills→
diegomarinodiegomarino
56

d2-render

Render .txt and .md D2 diagrams to SVG or PNG files and folders.

Community
Intermediate
TrevorEdrisTrevorEdris
2

mermaid-diagrams

Create Mermaid diagrams from plain text in Markdown documents.

Community
Basic
simplecore-incsimplecore-inc

mermaid

Create Mermaid diagrams from natural language and render them to SVG/PNG/PDF.

Official
Advanced
mikeyfennelly1mikeyfennelly1

react-flow-advanced

Implement advanced React Flow patterns for nested nodes, custom edges, and undo/redo.

Community
Advanced