skills.rest
Razuer
RazuerCOMMUNITY
Explore all skills by this author →
GitHub

d2-diagrams

Create and render D2 language system diagrams as SVG files.

1|Updated Apr 8, 2026
Search Tags:#architecture#documentation#visualization#svg#d2#diagram
One-click install
npx skills add https://github.com/Razuer/handy-opencode --skill d2-diagrams-razuer
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: d2-diagrams
Source: https://github.com/Razuer/handy-opencode/tree/main/skills/d2-diagrams
Command: npx skills add https://github.com/Razuer/handy-opencode --skill d2-diagrams-razuer

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill enables users to create clear, modern diagrams such as system architecture, infrastructure, and sequences, streamlining visual documentation processes.

Core Features & Use Cases

  • Diagram Authoring: Write detailed diagrams in the .d2 format using style guidelines and templates.
  • Rendering: Generate high-quality SVG diagrams in both light and dark themes suited for documentation and presentations.
  • Use Case: Visualize a microservices architecture with annotated connection styles, container groupings, and thematic icons, providing an at-a-glance overview for technical reviews.

Quick Start

Write a diagram description in a .d2 file and run the d2 CLI to produce SVGs tailored for embedding in Markdown or web pages.

Frequently Asked Questions about d2-diagrams

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

FAQPage Schema
How do I create architecture diagrams using D2 syntax for technical documentation?▼

You can create architecture diagrams by writing system descriptions in the .d2 file format and running the d2 CLI to render high-quality SVG files. This streamlines visual documentation processes for system architecture and infrastructure.

What is the best way to generate SVG diagrams in light and dark themes for engineering workflows?▼

Using D2 language syntax to author diagrams and rendering them via the d2 CLI generates SVGs tailored for both light and dark themes. This is suitable for DevOps workflows and provides high-quality visuals for embedding in Markdown or web pages.

Can I visualize microservices architecture with container groupings and connection styles?▼

Yes, you can visualize microservices architecture using D2 syntax to define annotated connection styles, container groupings, and thematic icons. This provides an at-a-glance overview ideal for technical reviews and architecture visualization.

Does this approach to diagram generation require any specific dependencies or environments?▼

No specific dependencies are required to author the diagrams. You write the diagram description in a .d2 file and use compatible CLI tools to automatically generate SVG diagrams, supporting rapid iteration across multiple themes and layouts.

What are the limitations of using text-based diagram formats for infrastructure visualization?▼

While text-based D2 diagrams support rapid iteration and style guide adherence, they are limited to generating SVG outputs. Complex visual renderings require CLI processing, meaning diagrams must be compiled rather than edited visually in real-time.

Related Skills

Explore More Software Engineering Skills→
RandyHaylorRandyHaylor

d2-diagram

Generate D2 diagram files for flowcharts, architecture, and sequence diagrams.

Community
Intermediate
Thanh-aperoThanh-apero
1

mermaidjs-v11

Creates and renders Mermaid.js v11 diagrams from markdown to SVG, PNG, PDF via CLI.

Community
Intermediate
magnus919magnus919
86

mermaid-diagrams

Create and validate portable Mermaid diagrams for architecture and process documentation.

Community
Advanced
neuro-synapseneuro-synapse
3

d2-diagram

Generate D2 diagram scripts from textual descriptions of system architectures.

Community
Advanced