D2 Diagram Editor
Free online diagram maker for flowcharts, ERD diagrams, and system architecture. Create professional diagrams with D2 syntax, live preview, and SVG/PNG export. No signup required.
Professional diagram tool for system architecture, workflows, and network design. Convert text to diagrams using D2 syntax with live preview. Export SVG/PNG • Privacy-first • No account needed.
Features
Real-time D2 Diagram Preview
Instantly visualize your D2 diagrams with live SVG preview as you type
Rich Shape Library & Styling
Extensive shapes (person, cylinder, cloud), custom colors, and advanced styling options
Smart Containers & Grouping
Organize complex diagrams with nested containers and cross-boundary connections
Multiple Layout Engines
Dagre and ELK layout engines with direction controls for optimal diagram flow
AI-Powered Diagram Assistant
Generate diagrams from descriptions, get suggestions, and improve existing designs with AI
Curated Sample Templates
Start quickly with working examples for system architecture, flows, and network diagrams
Export, Share & Syntax Reference
Export SVG/PNG, privacy-preserving URL sharing, and built-in syntax cheatsheet
Privacy‑First, Client‑Side
All diagrams render in your browser. Share via URL without uploading sensitive data
Frequently Asked Questions
What problems does this diagram tool solve for teams?
This tool solves three key problems: Documentation Consistency - everyone uses the same diagramming language for architecture docs, Version Control - diagrams are stored as readable text files alongside code, and Collaboration Speed - team members can quickly modify diagrams without learning complex UI tools. Perfect for software architects, DevOps engineers, and technical teams who need to document systems efficiently.
How do I create my first diagram in 2 minutes?
Start with this simple workflow: 1) Type Frontend -> API -> Database in the editor, 2) See your diagram appear instantly, 3) Add styling with Frontend.style.fill: '#e1f5fe', 4) Export as SVG/PNG when ready. Use the 'Insert Sample' button for more complex examples like microservices architecture or network topologies.
What is D2 and how does it compare to other diagramming tools?
D2 is a modern, declarative diagramming language created by Terrastruct that converts text into beautiful diagrams. Unlike drag-and-drop tools (Lucidchart, Visio) or other text-based tools (Mermaid, PlantUML), D2 excels at system architecture with advanced styling, nested containers, and multiple layout engines. Read the D2 Language Tour for comprehensive syntax guidance.
How do I use this D2 editor?
Start by typing D2 syntax in the left editor (try 'A -> B: connection'). Use the Samples dropdown for working examples, the Reference button for syntax help, or the AI assistant for diagram generation. The preview updates live, and you can export as SVG/PNG or share via URL.
How do I create containers and group related elements?
Use curly braces to create containers: app: { web: Frontend; api: Backend; web -> api }. You can nest containers infinitely and connect across boundaries using dot notation: frontend.web -> backend.api. Style containers with container.style.fill: '#f0f0f0'.
What shapes and styling options are available?
D2 supports many shapes: shape: person | cylinder | cloud | diamond | oval | rectangle | circle | square. Style with style.fill: '#color', style.stroke: '#border', style.font-color: '#text'. Use wildcards like *.style.fill: '#f0f0f0' to style multiple elements.
How do I control diagram layout and direction?
Set global direction with direction: up | down | left | right. Override per-container: container: { direction: down; A -> B }. D2 uses Dagre layout by default, with ELK (Eclipse Layout Kernel) available for complex hierarchical layouts. Learn about graph layout algorithms from the Graph Drawing community.
Can I use AI to help create diagrams?
Yes! Click the AI chat button to describe your system ('Create a microservices architecture with frontend, API, and database') and the AI will generate D2 code. You can also ask for improvements, style changes, or help with complex syntax.
Common errors and troubleshooting
• Syntax errors: Check for unmatched braces {} and missing colons in labels
• Connection errors: Use quotes for labels with spaces: A -> B: 'my label'
• Style errors: Ensure proper format: style.fill: '#color' not fill: color
• Layout issues: Try different directions or container groupings
• Complex diagrams: Break into smaller containers to improve readability
How do I export and share my diagrams?
Use the Export menu to download SVG (vector) or PNG (raster) files. Copy diagrams to clipboard as images for presentations. The Share button creates a privacy-preserving URL containing your diagram code—no data is uploaded to servers, just encoded in the URL.
How can I use D2 for system design and architecture documentation?
D2 is perfect for creating professional system architecture diagrams. Follow these approaches:
Key Design Patterns:
- Microservices: Use containers to group services and show API boundaries
- Data Flow: Visualize information flow using labeled connections
- Infrastructure: Map cloud resources with appropriate shapes (cylinder for databases, cloud for CDN)
Industry Resources:
- Best Practices: Follow the C4 Model for structured documentation
- Industry Standards: Reference AWS Architecture Center for cloud patterns
- Academic Guidance: Consult Software Engineering at Google for enterprise practices
Which diagram formats and use cases does this support?
This tool handles all major diagram types needed for software development: System Architecture (microservices, distributed systems), Network Diagrams (topology, security zones), Database Design (ERD, schema relationships), Process Flow (business workflows, algorithms), Infrastructure (cloud resources, DevOps pipelines), and Documentation (API flows, data pipelines). All diagrams use D2's declarative syntax for consistent, professional results.
How do I collaborate with my team using this tool?
Team collaboration works seamlessly because diagrams are plain text: Version Control - store D2 files in Git alongside code, Code Reviews - review diagram changes in pull requests just like code, Sharing - send diagrams via secure URL sharing (no account needed), Documentation - embed diagrams in README files or wikis, Consistency - everyone uses the same syntax and styling. Perfect for distributed teams and documentation workflows.
What export options and commercial usage rights do I have?
Export to multiple formats: SVG (vector, perfect for web and scaling), PNG (raster, ideal for presentations), URL Sharing (secure, no uploads), and Copy/Paste (direct integration). All exports are royalty-free for commercial use. Your diagrams, your data, your rights - no watermarks, attribution requirements, or usage restrictions.
How does D2 handle complex enterprise architecture diagrams?
D2 excels at complex enterprise diagrams through: Nested Containers - organize systems into logical groups with unlimited nesting, Cross-boundary Connections - connect elements across different containers using dot notation, Multiple Layout Engines - choose between Dagre (fast) and ELK (hierarchical) for optimal positioning, Advanced Styling - consistent corporate styling with theme support, Performance - handles hundreds of elements efficiently. Tested with large-scale microservices architectures and enterprise network topologies.
Where can I learn more about D2 syntax and best practices?
Explore these official resources and learning materials:
Official Documentation:
- D2 Language Documentation - Complete D2 guide and tutorials
- D2 Syntax Reference - Comprehensive syntax guide
- D2 Interactive Playground - Official online editor
- D2 GitHub Repository - Source code and examples
Diagram Resources:
- Icon Library - Free professional icons for D2 diagrams
- Built-in Reference - Click the 'D2 Reference' button for syntax cheatsheet
- Terrastruct Blog - D2 tips and advanced techniques
System Design & Architecture:
- C4 Model - Software architecture documentation standard
- AWS Architecture Center - Cloud architecture patterns
- High Scalability - System design patterns and case studies
- Software Engineering at Google - Enterprise practices
These resources cover everything from basic D2 syntax to advanced architecture patterns!
D2 Syntax Guide
Quick reference for common D2 patterns, shapes, styling, and layouts.
Basic Connections & Shapes
A -> B: connection label
Basic connection between two nodes with label
users: Users {
shape: person
}Node with custom shape (person, cylinder, rectangle, etc.)
db: Database {
shape: cylinder
style.fill: "#e1f5fe"
}Styled cylinder shape with custom fill color
A <-> B: bidirectional C -- D: undirected
Bidirectional and undirected connections
Containers & Grouping
app: Application {
web: Web Frontend
api: API Server
web -> api: HTTP
}Container grouping related components
frontend: {
react: React App
vue: Vue App
}
frontend.react -> backend.apiConnecting elements across containers using dot notation
network: {
style.fill: "#f5f5f5"
style.stroke: "#333"
style.stroke-width: 2
}Container styling with fill, stroke, and border width
Directions & Layout
direction: right A -> B -> C
Set global layout direction (up, down, left, right)
container: {
direction: down
A -> B -> C
}Container-specific direction override
A -> B: {
style.stroke-dash-array: 5
}Dashed connection lines
Styling & Colors
node: {
style.fill: "#fff3e0"
style.stroke: "#ff9800"
style.font-color: "#333"
}Node styling with fill, stroke, and font colors
connection: {
style.stroke: "red"
style.stroke-width: 3
style.animated: true
}Connection styling with color, width, and animation
*.style.fill: "#e3f2fd"
Apply styles to all elements using wildcard selector
Advanced Shapes & Icons
user: User {
shape: person
}
db: Database {
shape: cylinder
}
cloud: Cloud {
shape: cloud
}Available shapes: person, cylinder, cloud, diamond, oval, etc.
server: {
shape: image
icon: https://icons.terrastruct.com/tech/docker.svg
}Using external icons and images
code: {
shape: code
style.multiple: true
}Code block shape with multiple documents effect
Complex Layouts & Networks
users -> load_balancer -> {
server1
server2
server3
}One-to-many connections using braces
sequence: {
shape: sequence_diagram
user -> frontend: request
frontend -> backend: api call
backend -> user: response
}Sequence diagram layout for temporal relationships
grid: {
shape: grid
a; b; c
d; e; f
}Grid layout for structured arrangements
Labels & Annotations
A -> B: {
label: "HTTP Request"
style.font-size: 14
style.font-color: "blue"
}Custom labels with styling on connections
explanation: |
This diagram shows the
system architecture
| {
near: top-center
}Multi-line text blocks with positioning
*.tooltip: This is a helpful tooltip
Add tooltips to elements for additional context
Resources
Official documentation with complete syntax reference and examples
Source code, issues, and community contributions
Interactive playground to experiment with D2 syntax
Free icon library optimized for D2 diagrams
Related D2 Diagram Editor Articles
Discover more insights about d2 diagram editor and related development topics