d2

Write and render D2 diagram code to SVG without the d2 binary.

Updated Feb 20, 2026
One-click install
npx skills add https://github.com/ItsJooL/d2-mcp --skill d2-itsjool
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: d2
Source: https://github.com/ItsJooL/d2-mcp/tree/main/skills/d2
Command: npx skills add https://github.com/ItsJooL/d2-mcp --skill d2-itsjool

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

D2 provides a declarative diagram language that compiles to SVG, enabling LLMs to write, validate, and render diagrams without needing the d2 binary.

Core Features & Use Cases

  • Cross-container connections with _ to reference a parent scope in diagrams.
  • Animated or static diagrams, grid layouts, and theme support for flexible visuals.
  • Reusable patterns: containers, sequences, ER, UML, and C4-style diagrams; SVG output via d2_render and validation via d2_inspect.

Quick Start

Draft your D2 code using the core syntax (shapes, connections, and containers), then call d2_inspect to preview the structure before rendering with d2_render.

Frequently Asked Questions about d2

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

FAQPage Schema
How do I generate SVG architecture diagrams without installing the d2 binary?▼

You can generate SVG architecture diagrams by writing D2 syntax that compiles directly to SVG output, bypassing the need for a local d2 binary installation. This approach uses built-in validation and rendering tools to process your code.

How does D2 handle cross-container connections in complex architecture diagrams?▼

D2 handles cross-container connections by using the underscore character to reference parent scopes, allowing you to link nested shapes across different containers. This maintains a clean declarative structure while mapping complex architectures.

What diagram types are supported by D2 syntax?▼

D2 syntax supports architecture diagrams, flowcharts, sequence diagrams, ER diagrams, class diagrams, and C4-style visualizations. You can also utilize containers, grid layouts, and theme support for flexible visual outputs.

Do I need any external dependencies to render D2 diagrams to SVG?▼

No external dependencies are required to render D2 diagrams to SVG. You can validate and render your code using built-in tooling like d2_render and d2_inspect, eliminating the need for external binaries.

What is the best way to validate D2 diagram code before rendering?▼

The best way to validate D2 diagram code is to use the d2_inspect tool to preview the structure and syntax. This ensures your containers and connections are correct before you proceed to render the final SVG output with d2_render.