DiagramFlow
Skip to Content
BlogGetting Started with DiagramFlow

What Is DiagramFlow?

DiagramFlow is a diagrams-as-code tool. You write code — plain, readable text — and DiagramFlow generates professional system design and cloud architecture diagrams from it, right in your browser.

No Visio. No drag-and-drop grids. No saving PNG files and attaching them to Confluence. Just code in, diagram out.

It supports multi-cloud icon libraries for AWS, Google Cloud, and Azure, has first-class support for the C4 model, and produces diagrams that are shareable via URL — no account required to view.

Why Diagrams-as-Code?

Most teams use drag-and-drop tools to draw architecture diagrams. Those diagrams live in files that are hard to diff, impossible to review in a pull request, and drift out of sync with the actual system within weeks.

Diagrams-as-code solves this:

  • Version control friendly — your diagram source is text, so it lives in Git alongside your code.
  • Fast to iterate — editing a text description is faster than repositioning boxes on a canvas.
  • Consistent — the rendering engine applies layout and styling automatically.
  • Code-first workflow — documentation stays close to the architecture decisions that produced it.

If you write code to build systems, you should write code to document them.

Your First Diagram in 3 Steps

Getting your first diagram generated takes under two minutes.

Step 1: Open the Playground

Go to the DiagramFlow Playground at diagramflow.io/playground . No sign-up needed.

Step 2: Write your diagram code

The editor opens with a sample diagram. Clear it and paste your own description — or start from a template. Here’s a simple example showing an API gateway routing traffic to two microservices backed by AWS infrastructure:

from diagrams import Diagram, Cluster, Edge
from diagrams.aws.network import APIGateway, CloudFront
from diagrams.aws.compute import Lambda
from diagrams.aws.database import RDS, ElastiCache
from diagrams.aws.storage import S3
 
with Diagram("API Architecture", show=False, direction="LR"):
    cdn = CloudFront("CloudFront CDN")
    api = APIGateway("API Gateway")
 
    with Cluster("Order Service"):
        order_fn = Lambda("order-handler")
        order_db = RDS("orders-db")
        order_fn >> order_db
 
    with Cluster("User Service"):
        user_fn = Lambda("user-handler")
        cache = ElastiCache("session-cache")
        user_db = RDS("users-db")
        user_fn >> cache
        user_fn >> user_db
 
    assets = S3("Static Assets")
 
    cdn >> api >> [order_fn, user_fn]
    cdn >> assets

Step 3: Generate the diagram

Click Generate. DiagramFlow renders the diagram in real time. You get a clean, professional architecture diagram — no manual layout required.

Exploring Templates

If you’re not sure where to start, DiagramFlow includes pre-built templates covering common patterns:

  • Microservice architectures
  • AWS three-tier web apps
  • Google Cloud data pipelines
  • Azure Kubernetes deployments
  • C4 Context and Container diagrams

Browse the template library from the Playground. Select one, customise the code for your system, and generate. Templates are a fast path from blank page to working diagram.

Sharing Your Diagrams

Every diagram you generate gets a shareable URL. The diagram state is encoded directly into the URL, so anyone with the link can view it — no account needed.

This makes DiagramFlow useful for:

  • Sharing architecture proposals in Slack or email
  • Linking diagrams from pull request descriptions
  • Embedding architecture context in RFC documents

If you want to save diagrams, organise them into a library, or access them across devices, create a free account. The free plan includes 10 diagrams per month and 100 MB of storage.

What’s Next

Once you’ve generated your first diagram, there’s more to explore.

C4 model support — DiagramFlow has first-class support for C4 Context, Container, Component, and Code diagrams. C4 is the clearest way to document software architecture at multiple levels of abstraction, and DiagramFlow makes it easy to generate all four levels from code.

Multi-cloud icon libraries — AWS, Google Cloud, and Azure icons are all built in. You can mix services from different clouds in a single diagram — useful for hybrid deployments or vendor-comparison docs.

Pro plan — The free tier covers most personal and small-team use. If you need more diagrams, higher storage limits, or priority generation, the Pro plan is $12/month (or $120/year). It unlocks unlimited diagrams and 1 GB of storage.

Start in the Playground. Write code. Generate diagrams. That’s it.

Last updated on