diagrams-editor 0.29.0

Diagram as Code — with interactive web editor and Claude Code skill distribution

diagrams-editor

Fork of mingrammer/diagrams — Diagram as Code with an interactive web editor and headless PNG export included out of the box.

Note: installs under the diagrams Python namespace and replaces the original diagrams package. Do not install both in the same virtualenv.

Install

uv add diagrams-editor

That's it. The web editor, the headless PNG export, and all dependencies come in one command.

Usage

Open the web editor

uv run diagrams editor

Opens http://localhost:8888 in your browser. Drag nodes from the palette, draw edges, group into clusters — the Python code is generated live in the sidebar.

From there you can:

• 📥 Import .py — load an existing diagrams file for visual editing
• 💾 Save .py — download the generated Python code (Ctrl+S)
• ⬇ Export PNG — download a screenshot of the canvas

Export PNG from the command line

Useful for CI pipelines and AI agents — no browser needed.

uv run diagrams export architecture.py architecture.png

One-off, without adding to the project

uv run --with diagrams-editor diagrams editor
uv run --with diagrams-editor diagrams export architecture.py architecture.png

Write diagrams in Python

from diagrams import Diagram, Cluster, Edge
from diagrams.aws.compute import ECS, Lambda
from diagrams.aws.database import RDS
from diagrams.aws.network import ALB

with Diagram("Web Service", direction="LR"):
    with Cluster("App"):
        svc = ECS("Service")
        fn  = Lambda("Worker")
    ALB("Load Balancer") >> svc >> RDS("Database")

Providers

Full node list: diagrams.mingrammer.com/docs/nodes/aws

Examples

The examples/ folder contains ready-to-import .py files:

File	Description
examples/web_app.py	Three-tier web application
examples/ecommerce_platform.py	Full e-commerce platform (34 nodes, 11 clusters)

License

MIT — fork of mingrammer/diagrams, original copyright retained.