diagrams-editor 0.31.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 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 and all dependencies come in one command.

Usage

Open the web editor

# Empty canvas
uv run diagrams editor

# Pre-load an existing .py file
uv run diagrams editor architecture.py

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

One-off, without adding to the project

uvx --from diagrams-editor diagrams editor
uvx --from diagrams-editor diagrams editor architecture.py

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.