d2-diagrams

Convert textual design intent into D2 diagram files.

2|4|Updated Jul 7, 2022
One-click install
npx skills add https://github.com/gregschmit/dotfiles --skill d2-diagrams-gregschmit
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: d2-diagrams
Source: https://github.com/gregschmit/dotfiles/tree/main/src/.claude/skills/d2-diagrams
Command: npx skills add https://github.com/gregschmit/dotfiles --skill d2-diagrams-gregschmit

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

Diagramming complex systems manually is time-consuming and error-prone; this Skill converts plain-text design intent into declarative D2 diagrams to communicate architecture, data flows, and relationships.

Core Features & Use Cases

  • Generate architecture diagrams from code, docs, or configs to visualize systems.
  • Create ERDs, sequence diagrams, network topologies, and documentation visuals with a single language.
  • Use for onboarding, design reviews, and documentation updates to keep visuals in sync with the repo.

Quick Start

Save a D2 diagram of the system architecture to docs/diagrams and render it.

Frequently Asked Questions about d2-diagrams

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

FAQPage Schema
How do I generate architecture diagrams from text for software documentation?▼

Generate architecture diagrams from text by converting plain-text design intent into declarative D2 diagram files. This approach replaces manual diagramming by using textual definitions to automatically render visuals for software systems.

Can I create ERDs and network topologies using a single diagramming language?▼

Yes, you can create ERDs, network topologies, and sequence diagrams using the D2 language. It provides a single declarative syntax to define various system relationships and data flows for visual documentation.

What is the best way to keep documentation visuals in sync with my codebase?▼

Keep documentation visuals in sync by saving D2 diagrams as .d2 files under docs/diagrams. This ensures your architecture visuals remain version-controlled alongside your codebase and easily update during documentation changes.

How do I render and interact with D2 diagrams locally?▼

Render and interact with D2 diagrams by producing .d2 files and using the scripts/playground-url.py script. This generates interactive playground URLs for optional visual tweaking and rendering of your architecture diagrams.

Does diagramming complex systems manually introduce errors and how does declarative text help?▼

Diagramming complex systems manually is time-consuming and error-prone; declarative text helps by converting plain-text design intent into accurate D2 diagrams. This shifts focus from visual arrangement to system logic definition.

Where can I find D2 syntax references for building software diagrams?▼

Find D2 syntax references for building software diagrams in the references/d2-syntax.md file. This reference guides the textual design intent conversion process for architecture visuals, ERDs, and network topologies.