d2-diagrams_skill

Overview

This skill generates diagrams from declarative text using D2, a modern text-to-diagram language with automatic layouts, themes, and advanced styling. It converts plain D2 definitions into SVG, PNG, PDF, GIF and supports live watch mode and multiple layout engines. Use it to produce polished architecture diagrams, flowcharts, decision trees, ERDs and more directly from editable text.

How this skill works

You write a D2 file describing nodes, containers, connections, classes, variables and configuration. The d2 CLI parses the declarative file, computes an automatic layout (dagre, elk or tala), applies themes and styling, and emits the requested output format. Watch mode auto-regenerates outputs on file changes and a browser preview can show live updates.

When to use it

• Creating architecture diagrams with nested containers, icons and rich styling.
• Converting text definitions into SVG/PNG/PDF for documentation and slides.
• Designing decision trees, workflows, or ERDs where consistent styles and classes matter.
• Iterating quickly with live preview and watch mode during design.
• Needing advanced theming (light/dark) or hand-drawn/sketch output for presentations.

Best practices

• Organize complex diagrams with containers and nested nodes to reflect system boundaries.
• Define reusable classes and variables for consistent styling across nodes and edges.
• Pick the layout engine that fits your diagram (dagre for typical flows, elk for dense graphs).
• Use theme IDs and dark-theme flags to produce consistent light/dark variants for docs.
• Enable watch mode during editing to speed iteration and catch layout issues early.

Example use cases

• System architecture: map clients, load balancers, services and data layers with icons.
• Decision trees: use diamond shapes, classes and colored edges for Yes/No flows.
• Sequence-like flows: represent numbered request/response steps across components.
• Database ERD: model tables and relationships with cylinder and table shapes.
• Design handout graphics: apply sketch mode and themes for presentation-ready images.