d2

Generate SVG diagrams from D2 declarative syntax.

3|Updated Mar 6, 2026

Search Tags:#architecture #flowchart #diagrams #d2 #sequence diagram #uml

Ready to run

npx skills add https://github.com/benjaminwestern/google-engineer-skills --skill d2-benjaminwestern

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: d2
Source: https://github.com/benjaminwestern/google-engineer-skills/tree/main/skills/d2
Command: npx skills add https://github.com/benjaminwestern/google-engineer-skills --skill d2-benjaminwestern

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill provides a powerful way to generate professional diagrams from simple text descriptions, eliminating the need for complex graphical tools.

Core Features & Use Cases

Diagram Generation: Create sequence diagrams, flowcharts, architecture diagrams, ERDs, UML class diagrams, and more using D2's declarative syntax.
Professional Styling: Apply brand colors, reusable classes, and consistent styling for polished outputs.
Use Case: Quickly visualize a system architecture by describing components and their connections in D2, generating an SVG that can be embedded in documentation.

Quick Start

Use the d2 skill to generate an SVG diagram from the provided D2 code.

Frequently Asked Questions about d2

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

FAQPage Schema

How do I generate architecture diagrams from text descriptions?▼

D2 declarative syntax generates architecture diagrams from simple text descriptions by defining components and connections, producing professional SVGs for documentation.

Can I create UML class diagrams and ERDs using D2 syntax?▼

D2 syntax supports creating UML class diagrams and ERDs, alongside sequence diagrams and flowcharts, using a declarative text format to visualize system structures.

What is the best way to apply consistent brand styling to flowcharts?▼

The best way to apply consistent brand styling to flowcharts is using D2 reusable classes and brand colors, enforcing professional styling standards across all generated diagrams.

Do I need graphical tools to visualize system architecture?▼

You do not need complex graphical tools to visualize system architecture; D2 declarative diagramming syntax enables you to generate diagrams directly from simple text descriptions.

How do I generate SVG output and apply themes using D2 CLI?▼

D2 provides CLI commands for output generation and theme application, allowing you to compile D2 syntax into SVG files and apply professional visual themes.