D2 Diagram Generator for Inkscape

Create declarative diagrams in Inkscape using D2's modern diagramming language

Transform simple text descriptions into beautiful, professional diagrams directly within Inkscape. D2 offers a cleaner syntax than traditional tools, with automatic layout algorithms and stunning visual output.

📋 Table of Contents

Demo
Features
Why D2?
Requirements
Installation
Quick Start
Usage Guide
Configuration
Examples
Troubleshooting
Contributing
License

📺 Demo

Click to watch the full tutorial on YouTube

✨ Features

📊 Full D2 Support
- All diagram types and features
- Native SVG output for full editability
- High-quality PNG export option
🎨 Professional Styling

Feature Description

8 Themes From neutral to colorful options

Sketch Mode Hand-drawn aesthetic

4 Layout Engines Dagre, ELK, TALA, Custom

Custom Fonts Regular, italic, and bold
📍 Smart Positioning
- 9 preset positions (center, corners, edges)
- Selection-relative placement
- Custom X/Y offsets
- Page or viewport alignment
🔧 Advanced Features
- Direct SVG import (fully editable)
- Auto-scaling to fit dimensions
- Layer management
- Object locking
- Metadata support (title, description)

🤔 Why D2?

D2 is a modern diagram scripting language designed for clarity and aesthetics:

Feature	D2	Traditional Tools
Syntax	Clean, readable	Often verbose
Auto-layout	Built-in, smart	Manual positioning
Styling	Simple inline	Separate config
Connections	Intuitive arrows	Complex syntax
Containers	Easy nesting	Difficult grouping
Icons	Built-in library	External dependencies

D2 Example:

server -> database: queries
database -> server: results

This simple text produces a professional diagram with automatic layout!

📦 Requirements

Core Requirements

Component	Version	Purpose
Inkscape	1.0+	Vector graphics editor
D2	0.6+	Diagram generation CLI

Optional Dependencies

Component	Purpose
Pillow (Python)	Automatic PNG dimension detection
TALA	Advanced layout engine (commercial)

🚀 Installation

Step 1: Install D2

Windows

Option A: Using winget (Recommended)

winget install terrastruct.d2

Option B: Using Chocolatey

choco install d2

Option C: Manual Installation

Download from D2 Releases
Extract to a folder (e.g., C:\Program Files\D2)
Add to system PATH

Verify installation:

d2 --version

macOS

# Using Homebrew (Recommended)
brew install d2

# Or using curl
curl -fsSL https://d2lang.com/install.sh | sh -s --

Verify installation:

d2 --version

Linux

# Universal installer (Recommended)
curl -fsSL https://d2lang.com/install.sh | sh -s --

# Ubuntu/Debian (via .deb)
# Download .deb from releases page
sudo dpkg -i d2_x.x.x_amd64.deb

# Arch Linux (AUR)
yay -S d2

Verify installation:

d2 --version
# Should output: v0.x.x

Step 2: Install the Extension

Locate your Inkscape extensions directory:

OS	Path
Windows	`C:\Users\[YourName]\AppData\Roaming\inkscape\extensions\`
macOS	`~/Library/Application Support/org.inkscape.Inkscape/config/inkscape/extensions/`
Linux	`~/.config/inkscape/extensions/`

💡 Tip: In Inkscape: Edit → Preferences → System shows extensions path

Install files:

Create extension folder:
```
mkdir -p [extensions-directory]/d2_ink
```

Copy files:

cp d2_diagram.py [extensions-directory]/d2_ink/
cp d2_diagram.inx [extensions-directory]/d2_ink/

Set permissions (Linux/macOS):

chmod +x [extensions-directory]/d2_ink/d2_diagram.py

Restart Inkscape

Step 3: Verify Installation

Open Inkscape
Navigate to Extensions → Render → D2 Diagram
Extension dialog should appear

🎯 Quick Start

Create Your First Diagram

Open Inkscape
Go to Extensions → Render → D2 Diagram
In the Diagram tab, enter:

direction: right

User -> Frontend: request
Frontend -> API: call
API -> Database: query
Database -> API: data
API -> Frontend: response
Frontend -> User: display

Click Apply

Your diagram appears in the document, fully editable as SVG!

📖 Usage Guide

Tab Overview

Tab	Purpose
Diagram	Enter D2 code or load from file
Style	Theme, layout engine, sketch mode
Format	Output format, scale, quality
Position	Placement and alignment options
Scale	Auto-scaling and size limits
Config	CLI path, custom fonts
Advanced	Timeout, temp files, quiet mode
Layer	Layer management, object properties

Input Methods

Direct Code Entry

Enter D2 syntax directly in the code field:

x -> y: connection
y -> z

Load from File

Check "Use external file"
Enter path to .d2 file
Click Apply

D2 Syntax Basics

Simple Connections

# Basic arrow
a -> b

# Labeled connection
a -> b: sends data

# Bidirectional
a <-> b: communicates

Shapes and Styling

# Different shapes
server: Server {shape: cylinder}
user: User {shape: person}
cloud: Cloud {shape: cloud}

user -> server -> cloud

Containers (Grouping)

aws: AWS Cloud {
  vpc: VPC {
    ec2: EC2 Instance
    rds: RDS Database
    ec2 -> rds
  }
}

user -> aws.vpc.ec2

Styling

important: Critical System {
  style: {
    fill: "#ff6b6b"
    stroke: "#c92a2a"
    font-color: white
    bold: true
  }
}

Output Formats

Format	Best For	Editable
SVG	Editing, scalability	✅ Yes
PNG	Presentations, sharing	❌ No

Theme Options

Theme ID	Name	Description
`0`	Default	Neutral, professional
`1`	Neutral Grey	Subtle grey tones
`3`	Flagship Terrastruct	Vibrant colors
`4`	Cool Classics	Blue-based palette
`5`	Mixed Berry Blue	Purple-blue tones
`6`	Grape Soda	Purple theme
`7`	Aubergine	Dark purple
`8`	Colorblind Clear	Accessibility-focused
`100`	Terminal	Dark terminal style
`101`	Terminal Grayscale	Monochrome terminal
`102`	Origami	Paper-like aesthetic

Layout Engines

Engine	Description	Best For
`dagre`	Default, hierarchical	Most diagrams
`elk`	Eclipse Layout Kernel	Complex graphs
`tala`	Advanced (premium)	Professional layouts

Position Modes

┌─────────────────────────────────────┐
│ top_left    top_center    top_right │
│                                     │
│ middle_left   center   middle_right │
│                                     │
│ bottom_left bottom_center bottom_right │
└─────────────────────────────────────┘

Special options:

cursor: Place at view center
Use selection bbox: Position relative to selected object

⚙️ Configuration

Style Tab

Option	Description	Default
Theme	Color scheme (0-102)	0 (Default)
Layout	Layout engine	dagre
Sketch Mode	Hand-drawn style	✗
Padding	Diagram padding (px)	100

Format Tab

Option	Description	Default
Output Format	SVG or PNG	SVG
Scale Factor	Size multiplier	1.0
Quality	PNG resolution (1-4x)	2
Embed Image	Embed or link PNG	✓

Scale Tab

Option	Description	Default
Auto Scale	Fit to max dimensions	✗
Max Width	Maximum width (0=none)	0
Max Height	Maximum height (0=none)	0
Maintain Aspect Ratio	Keep proportions	✓
Lock Object	Prevent edits	✗

Config Tab

Option	Description	Default
D2 Path	Path to d2 executable	d2
Font Regular	Custom regular font	(system)
Font Italic	Custom italic font	(system)
Font Bold	Custom bold font	(system)
Inkscape Path	Path to Inkscape CLI	inkscape

Advanced Tab

Option	Description	Default
Timeout	Generation timeout (sec)	30
Keep Temp Files	Don't delete temp files	✗
Temp Directory	Custom temp location	(system)
Quiet Mode	Suppress debug output	✓
Fit to Content	Crop empty space	✓

Layer Tab

Option	Description	Default
Create Layer	New layer for diagram	✗
Layer Name	Name for new layer	D2 Diagrams
Object ID	Custom SVG ID	(auto)
Add Title	Include title element	✗
Add Description	Include desc element	✗

💡 Examples

Example 1: Network Architecture

direction: right

internet: Internet {shape: cloud}

firewall: Firewall {
  shape: hexagon
  style.fill: "#ffcccc"
}

dmz: DMZ {
  web: Web Server {shape: cylinder}
  api: API Gateway
}

internal: Internal Network {
  app: App Servers {
    shape: rectangle
    style.multiple: true
  }
  db: Database {shape: cylinder}
  cache: Redis Cache {shape: cylinder}
}

internet -> firewall -> dmz.web
dmz.web -> dmz.api
dmz.api -> internal.app
internal.app -> internal.db
internal.app -> internal.cache

Example 2: User Authentication Flow

User -> Login Page: visits
Login Page -> Auth Service: credentials
Auth Service -> Database: validate
Database -> Auth Service: user data
Auth Service -> Token Service: generate JWT
Token Service -> Auth Service: token
Auth Service -> Login Page: success + token
Login Page -> User: redirect to dashboard

Example 3: Class Diagram

Animal: Animal {
  shape: class
  +name: string
  +age: int
  +makeSound(): void
}

Dog: Dog {
  shape: class
  +breed: string
  +bark(): void
  +fetch(): void
}

Cat: Cat {
  shape: class
  +indoor: bool
  +meow(): void
  +purr(): void
}

Animal <- Dog: extends
Animal <- Cat: extends

Example 4: Sequence Diagram Style

direction: right

alice: Alice {shape: person}
bob: Bob {shape: person}
server: Server {shape: cylinder}

alice -> bob: "Hello!"
bob -> alice: "Hi there!"
alice -> server: login request
server -> alice: session token
alice -> bob: "I'm logged in"

Example 5: System Components with Icons

frontend: Frontend {
  icon: https://icons.terrastruct.com/essentials/092-map.svg
  react: React App
  nginx: Nginx
}

backend: Backend {
  icon: https://icons.terrastruct.com/essentials/213-server.svg
  api: REST API
  worker: Background Worker
}

data: Data Layer {
  icon: https://icons.terrastruct.com/essentials/119-database.svg
  postgres: PostgreSQL
  redis: Redis
  s3: S3 Storage {shape: cloud}
}

frontend.react -> backend.api
backend.api -> data.postgres
backend.worker -> data.redis
backend.api -> data.s3

Example 6: Sketch Mode Flowchart

Enable Sketch Mode in Style tab for hand-drawn aesthetic:

start: Start {shape: oval}
process: Process Data
decision: Valid? {shape: diamond}
success: Success {
  style.fill: "#90EE90"
}
error: Error {
  style.fill: "#FFB6C1"
}
end: End {shape: oval}

start -> process
process -> decision
decision -> success: yes
decision -> error: no
success -> end
error -> process: retry

Example 7: Database Schema

users: users {
  shape: sql_table
  id: int {constraint: primary_key}
  email: varchar(255) {constraint: unique}
  name: varchar(100)
  created_at: timestamp
}

posts: posts {
  shape: sql_table
  id: int {constraint: primary_key}
  user_id: int {constraint: foreign_key}
  title: varchar(200)
  content: text
  published: boolean
}

comments: comments {
  shape: sql_table
  id: int {constraint: primary_key}
  post_id: int {constraint: foreign_key}
  user_id: int {constraint: foreign_key}
  body: text
}

users.id <-> posts.user_id
posts.id <-> comments.post_id
users.id <-> comments.user_id

Example 8: Organizational Chart

direction: down

ceo: CEO {
  shape: person
  style.fill: "#4a90d9"
}

cto: CTO {shape: person}
cfo: CFO {shape: person}
coo: COO {shape: person}

engineering: Engineering {
  lead: Tech Lead
  dev1: Developer
  dev2: Developer
}

finance: Finance {
  accountant: Accountant
  analyst: Analyst
}

operations: Operations {
  manager: Manager
  support: Support Team
}

ceo -> cto
ceo -> cfo
ceo -> coo

cto -> engineering
cfo -> finance
coo -> operations

🐛 Troubleshooting

Common Issues

Extension not appearing in menu

Solutions:

Verify files are correctly placed:

ls [extensions-directory]/d2_ink/
# Should show: d2_diagram.py, d2_diagram.inx

Check file permissions:
```
chmod +x d2_diagram.py
```
Restart Inkscape completely
Check Inkscape error log: Edit → Preferences → System → Open Error Log

D2 CLI not found

Error: D2 CLI not found at: d2

Solutions:

Verify D2 is installed:
```
d2 --version
```
Install if missing (see Installation section)
Windows: Use full path in Config tab:
```
C:\Program Files\D2\d2.exe
```
Or add D2 to system PATH
Linux/macOS: Find path:
```
which d2
# Use this path in Config tab
```

Diagram syntax error

Error: D2 CLI error: ...

Solutions:

Test syntax in command line:
```
echo "a -> b" | d2 - output.svg
```
Check for:
- Missing colons in labels
- Unclosed braces for containers
- Invalid shape names
- Incorrect style syntax
Refer to D2 Documentation

SVG import issues

Error: Error importing SVG...

Solutions:

Try PNG format instead
Update Inkscape to latest version
Check temp file permissions
Enable Keep Temp Files and inspect generated SVG

Diagram appears but positioning is wrong

Solutions:

Check Position Mode setting
Verify Align to Page vs viewport setting
Adjust X/Y Offset values
Try Auto Scale with max dimensions

Font issues in diagram

Solutions:

Specify custom fonts in Config tab:
- Font Regular: Path to .ttf or .otf
- Font Bold: Path to bold variant
- Font Italic: Path to italic variant
Use system fonts that D2 can find
Check font file permissions

Debug Mode

Enable detailed output for troubleshooting:

Uncheck Quiet Mode in Advanced tab
Check Keep Temp Files
Run Inkscape from terminal:
```
inkscape
```
Check console for debug output

Temp Files Location

With Keep Temp Files enabled:

File	Purpose
diagram.d2	Input D2 code
`diagram.svg`	Generated SVG
`diagram_converted.png`	Converted PNG (if PNG format)

📁 File Structure

d2_ink/
├── d2_diagram.py           # Main extension code
├── d2_diagram.inx          # Inkscape extension definition
├── README.md               # This file
└── examples/               # Example diagrams (optional)
    ├── architecture.d2
    ├── flowchart.d2
    └── database.d2

📚 D2 Language Reference

Shapes

Shape	Syntax	Description
Rectangle	`shape: rectangle`	Default
Square	`shape: square`	Equal sides
Circle	`shape: circle`	Round
Oval	`shape: oval`	Ellipse
Diamond	`shape: diamond`	Decision
Hexagon	`shape: hexagon`	Process
Cylinder	`shape: cylinder`	Database/storage
Cloud	`shape: cloud`	Cloud service
Person	`shape: person`	Human actor
Package	`shape: package`	Module/component
Class	`shape: class`	UML class
SQL Table	`shape: sql_table`	Database table

Connection Types

Type	Syntax	Description
Arrow	`->`	Directed
Double Arrow	`<->`	Bidirectional
Line	`--`	Undirected

Style Properties

element: Label {
  style: {
    fill: "#hexcolor"
    stroke: "#hexcolor"
    stroke-width: 2
    stroke-dash: 3
    opacity: 0.8
    font-color: "#hexcolor"
    font-size: 16
    bold: true
    italic: true
    underline: true
    shadow: true
    multiple: true
    3d: true
    animated: true
  }
}

📚 Resources

D2 Documentation: d2lang.com/tour/intro
D2 Playground: play.d2lang.com
D2 GitHub: github.com/terrastruct/d2
Theme Gallery: d2lang.com/tour/themes
Icon Library: icons.terrastruct.com

🤝 Contributing

Contributions are welcome!

Fork the repository
Create a feature branch (git checkout -b feature/new-feature)
Commit changes (git commit -m 'Add new feature')
Push to branch (git push origin feature/new-feature)
Open a Pull Request

Development Setup:

git clone https://github.com/YouvenZ/D2_ink.git
cd D2_ink
# Symlink for testing
ln -s $(pwd) ~/.config/inkscape/extensions/d2_ink

📄 License

This project is licensed under the MIT License - see LICENSE file for details.

📧 Support

Issues: GitHub Issues
Discussions: GitHub Discussions

🙏 Acknowledgments

D2 by Terrastruct - The diagram scripting language
Inkscape - Open source vector graphics
D2 community for excellent documentation

🔄 Changelog

v1.0.0 (2024)

✨ Initial release
✅ Full D2 syntax support
✅ SVG and PNG output
✅ 11 built-in themes
✅ Sketch mode
✅ Multiple layout engines
✅ Auto-scaling
✅ Layer management
✅ Custom font support
✅ Position and alignment options

Name		Name	Last commit message	Last commit date
Latest commit History 8 Commits
README.md		README.md
d2_diagram.inx		d2_diagram.inx
d2_diagram.py		d2_diagram.py
example.d2		example.d2
license		license

Feature	Description
8 Themes	From neutral to colorful options
Sketch Mode	Hand-drawn aesthetic
4 Layout Engines	Dagre, ELK, TALA, Custom
Custom Fonts	Regular, italic, and bold

License

YouvenZ/D2_ink

Folders and files

Latest commit

History

Repository files navigation

D2 Diagram Generator for Inkscape

📋 Table of Contents

📺 Demo

✨ Features

🤔 Why D2?

📦 Requirements

Core Requirements

Optional Dependencies

🚀 Installation

Step 1: Install D2

Step 2: Install the Extension

Step 3: Verify Installation

🎯 Quick Start

Create Your First Diagram

📖 Usage Guide

Tab Overview

Input Methods

Direct Code Entry

Load from File

D2 Syntax Basics

Simple Connections

Shapes and Styling

Containers (Grouping)

Styling

Output Formats

Theme Options

Layout Engines

Position Modes

⚙️ Configuration

Style Tab

Format Tab

Scale Tab

Config Tab

Advanced Tab

Layer Tab

💡 Examples

Example 1: Network Architecture

Example 2: User Authentication Flow

Example 3: Class Diagram

Example 4: Sequence Diagram Style

Example 5: System Components with Icons

Example 6: Sketch Mode Flowchart

Example 7: Database Schema

Example 8: Organizational Chart

🐛 Troubleshooting

Common Issues

Debug Mode

Temp Files Location

📁 File Structure

📚 D2 Language Reference

Shapes

Connection Types

Style Properties

📚 Resources

🤝 Contributing

📄 License

📧 Support

🙏 Acknowledgments

🔄 Changelog

v1.0.0 (2024)

About

Topics

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Packages