Blog

Tutorials, guides, and insights about diagrams as code.

Pie chart with 3 slices totalling 100; the largest is TypeScript at 45%.Language MixTypeScript — 45 (45%)Python — 30 (30%)Rust — 25 (25%)
Pie chart with 3 slices totalling 100; the largest is TypeScript at 45%.Language MixTypeScript — 45 (45%)Python — 30 (30%)Rust — 25 (25%)

Embedded Diagrams That Stay Current

How Diagrammo embeds work — a fence renders to SVG at build time, and a live link points at a diagram instead of copying it, so the page updates when the diagram does.

embedsdiagrams-as-codecloud
Body diagram marking 5 parts, chest, front-delts, triceps, side-delts and abs.front-deltsOverhead press — 4×8chestBarbell bench press — 4×6absHanging leg raise — 3×12side-deltsLateral raises — 3×15tricepsRope pushdowns — 3×12Push DayEffortPrimarySecondaryWarm-up
Body diagram marking 5 parts, chest, front-delts, triceps, side-delts and abs.front-deltsOverhead press — 4×8chestBarbell bench press — 4×6absHanging leg raise — 3×12side-deltsLateral raises — 3×15tricepsRope pushdowns — 3×12Push DayEffortPrimarySecondaryWarm-up

Diagramming a Push/Pull/Legs Prep — A Workout Case Study

A hypothetical 12-week beach-body cruise prep, mapped entirely in Diagrammo diagrams: a countdown, body charts for the split, a macro pie, lift-progression lines, volume bars, and workout tables.

case-studydiagrams-as-codefitness
Journey map for Developer of 6 steps across 4 phases, Discover, Set Up, Create and Iterate.Setting Up AI DiagrammingDeveloperTired of redrawing architecture docs byhandWhereBrowserTerminalEditorDesktop AppHopefulFrustratedRelievedConfusedImpressedInControlDiscoverAI draws a great-lookingdiagramLooks perfect on the first tryBrowserTry to fix one label — it is justa PNGRegenerating shifts every otherboxBrowserSet UpInstall and run the integrationinstallerdgmo install claude-codeTerminalForget to restart the assistantMCP tools appear only after arestartEditorCreateDescribe it in plain English,get valid DGMOIt looked up the real syntaxinstead of guessingEditorIterateEdit in the app, hand thesource back to the AIThe loop an image tool cannever closeDesktop App
Journey map for Developer of 6 steps across 4 phases, Discover, Set Up, Create and Iterate.Setting Up AI DiagrammingDeveloperTired of redrawing architecture docs byhandWhereBrowserTerminalEditorDesktop AppHopefulFrustratedRelievedConfusedImpressedInControlDiscoverAI draws a great-lookingdiagramLooks perfect on the first tryBrowserTry to fix one label — it is justa PNGRegenerating shifts every otherboxBrowserSet UpInstall and run the integrationinstallerdgmo install claude-codeTerminalForget to restart the assistantMCP tools appear only after arestartEditorCreateDescribe it in plain English,get valid DGMOIt looked up the real syntaxinstead of guessingEditorIterateEdit in the app, hand thesource back to the AIThe loop an image tool cannever closeDesktop App

AI Makes Pretty Diagrams. Then What?

Most AI tools generate a diagram as a flat image you can't touch. DGMO is plain text, so the AI hands you something you can actually edit — and hand right back. Here's the round-trip loop, how to set it up, and what the AI is doing under the hood.

aimcpdiagrams-as-codeediting
Sequence diagram of 3 participants, Browser, Server and UserDB, exchanging 4 messages.LoginBrowserServerUserDBPOST /loginSELECT useruser record200 OK + token
Sequence diagram of 3 participants, Browser, Server and UserDB, exchanging 4 messages.LoginBrowserServerUserDBPOST /loginSELECT useruser record200 OK + token

PlantUML Without Java: Text Diagrams With Zero Setup

PlantUML needs a Java runtime to render. If you want UML-style diagrams as code without installing a JRE or running a server, DGMO is a no-Java alternative — a single CLI and npm package.

plantumlcomparisondiagrams-as-codeuml
PERT chart of 8 activities, voyage approved, load powder, careen hull, recruit crew, sail to atoll and 3 more, with 8 dependencies.Pirate Voyage to the Atoll≈ 13.6 weeks (± 1.17 weeks)outfit ship0w◆ voyage approved2.17w1.08w3.25wload powder2.17w0w3.25w0w1.58w1.58wcareen hull0.58w0.58w2.17w0w2.17w2.17wrecruit crew0w0w2.17w3.25w5.17w8.42wsail to atoll3.25w0w8.42w8.42w2w10.42wcount gold9.58w1.17w11.58w8.42w3.17w11.58wrepair hull8.42w0w11.58w11.58w2w13.58wdivvy shares11.58w0w13.58wActivity Risksail to atoll−2.17+2.83repair hull−1.17+1.83recruit crew−0.58+1.83divvy shares−1+1load powder−0.58+0.92careen hull+0.330%25%50%75%100%Probability of completionP50 · 13.6w50% chance within 13.6wP80 · 14.8w80% chance within 14.8wP95 · 15.8w95% chance within 15.8w12.4w13.2w13.9w15.5w16.3w
PERT chart of 8 activities, voyage approved, load powder, careen hull, recruit crew, sail to atoll and 3 more, with 8 dependencies.Pirate Voyage to the Atoll≈ 13.6 weeks (± 1.17 weeks)outfit ship0w◆ voyage approved2.17w1.08w3.25wload powder2.17w0w3.25w0w1.58w1.58wcareen hull0.58w0.58w2.17w0w2.17w2.17wrecruit crew0w0w2.17w3.25w5.17w8.42wsail to atoll3.25w0w8.42w8.42w2w10.42wcount gold9.58w1.17w11.58w8.42w3.17w11.58wrepair hull8.42w0w11.58w11.58w2w13.58wdivvy shares11.58w0w13.58wActivity Risksail to atoll−2.17+2.83repair hull−1.17+1.83recruit crew−0.58+1.83divvy shares−1+1load powder−0.58+0.92careen hull+0.330%25%50%75%100%Probability of completionP50 · 13.6w50% chance within 13.6wP80 · 14.8w80% chance within 14.8wP95 · 15.8w95% chance within 15.8w12.4w13.2w13.9w15.5w16.3w

PERT Diagrams with Monte Carlo Simulation

Plan uncertain work with three-point estimates and see which activities actually drive the schedule. PERT in DGMO ships with criticality-tinted fills, P50/P80/P95 percentiles, and an interactive duration scrubber.

pertmonte-carloproject-planningdiagrams-as-code
Boxes and lines diagram of 5 boxes, Mobile, Web Front End, Back End, Vendor and Database, with 5 lines.Checkout Initiative — refinedMobileWeb FrontEndBack EndVendorDatabasegetUsergetEventStatusNoWorkIdentifiedInProgressDone
Boxes and lines diagram of 5 boxes, Mobile, Web Front End, Back End, Vendor and Database, with 5 lines.Checkout Initiative — refinedMobileWeb FrontEndBack EndVendorDatabasegetUsergetEventStatusNoWorkIdentifiedInProgressDone

Initiative Status Diagrams with Boxes and Lines

Drive alignment on big initiatives with a simple boxes-and-lines diagram colored by status. Stakeholders, engineers, and leaders all read it at a glance.

boxes-and-linestutorialmanagementdiagrams-as-code
Infrastructure diagram of 7 components, edge, CloudFront, ALB, API, Worker and 2 more, with 7 connections.API PodsWorker PodsedgeRPS: 5.0kp90: 208msCloudFrontRPS: 5.0kp90: 208msALBRPS: 1.5kp90: 208msAPIRPS: 1.2k / 1.8kp90: 48ms3xWorkerRPS: 300 / 800p90: 208ms2xCacheRPS: 600p90: 2msDBRPS: 900p90: 8msAPI Traffic Flow
Infrastructure diagram of 7 components, edge, CloudFront, ALB, API, Worker and 2 more, with 7 connections.API PodsWorker PodsedgeRPS: 5.0kp90: 208msCloudFrontRPS: 5.0kp90: 208msALBRPS: 1.5kp90: 208msAPIRPS: 1.2k / 1.8kp90: 48ms3xWorkerRPS: 300 / 800p90: 208ms2xCacheRPS: 600p90: 2msDBRPS: 900p90: 8msAPI Traffic Flow

Using DGMO with AI: MCP, Claude Code, Cursor, and More

DGMO is plain text — which makes it a natural fit for AI-assisted diagramming. Here's every integration available: MCP server, Claude Code skill, Cursor rules, Copilot instructions, and more.

aimcpclaudediagrams-as-code
Infrastructure diagram of 7 components, Edge, CloudFront, WAF, ALB, APIServer and 2 more, with 6 connections.API Pods3xCommerce PodsEdgeRPS: 100.0kp90: 120msavailability: 20.7%CloudFrontRPS: 100.0kp90: 120msavailability: 20.7%WAFRPS: 20.0kp90: 120msavailability: 20.7%ALBRPS: 19.0kp90: 120msavailability: 20.7%APIServerRPS: 11.4k / 1.5kp90: 45msavailability: 13.2%CB: OPENPurchaseMSRPS: 5.7k / 2.4kp90: 120msavailability: 42.1%8xStaticServerRPS: 1.9kp90: 5ms/api/purchase/staticE-Commerce PlatformTeamBackendPlatform
Infrastructure diagram of 7 components, Edge, CloudFront, WAF, ALB, APIServer and 2 more, with 6 connections.API Pods3xCommerce PodsEdgeRPS: 100.0kp90: 120msavailability: 20.7%CloudFrontRPS: 100.0kp90: 120msavailability: 20.7%WAFRPS: 20.0kp90: 120msavailability: 20.7%ALBRPS: 19.0kp90: 120msavailability: 20.7%APIServerRPS: 11.4k / 1.5kp90: 45msavailability: 13.2%CB: OPENPurchaseMSRPS: 5.7k / 2.4kp90: 120msavailability: 42.1%8xStaticServerRPS: 1.9kp90: 5ms/api/purchase/staticE-Commerce PlatformTeamBackendPlatform

Infrastructure Diagrams: Complete Reference

Model infrastructure topology with live traffic simulation. Define components, set capacity and latency, add caching and firewalls, simulate scenarios — DGMO computes RPS, availability, and latency percentiles automatically.

infrastructurereferencediagrams-as-codetraffic-simulation
Funnel chart of 4 stages, from Visited docs at 12K to Shared a link at 640 (5% of the first).Signup funnelVisited docs12,000Opened the editor4,80040%Drew a diagram2,10044%Shared a link64030%
Funnel chart of 4 stages, from Visited docs at 12K to Shared a link at 640 (5% of the first).Signup funnelVisited docs12,000Opened the editor4,80040%Drew a diagram2,10044%Shared a link64030%

Mermaid vs DGMO: Which Diagram Tool Should You Use?

A practical comparison of Mermaid and DGMO for text-based diagramming. Syntax, chart types, rendering, ecosystem, and when to pick each one.

comparisonmermaiddiagrams-as-code
Sequence diagram of 6 participants, User, Gateway, Auth, Redis, Service and DB, exchanging 9 messages.Microservice AuthUserGatewayAuthRedisServiceDBrequestvalidate tokencheck sessionsession datavalidforward requestqueryresultresponse
Sequence diagram of 6 participants, User, Gateway, Auth, Redis, Service and DB, exchanging 9 messages.Microservice AuthUserGatewayAuthRedisServiceDBrequestvalidate tokencheck sessionsession datavalidforward requestqueryresultresponse

How to Create Sequence Diagrams from Text

Learn how to create sequence diagrams from plain text using DGMO. Step-by-step tutorial covering participants, messages, notes, loops, and more — with live examples.

sequence-diagramstutorialdiagrams-as-code
Flowchart of 8 steps (1 decision) and 8 connections, starting at Sail Ho!.Pirate's CodefriendfoeSail Ho!Friend or Foe?Check LogsTrade RumCelebrateFire CannonsClaim LootSail On
Flowchart of 8 steps (1 decision) and 8 connections, starting at Sail Ho!.Pirate's CodefriendfoeSail Ho!Friend or Foe?Check LogsTrade RumCelebrateFire CannonsClaim LootSail On

Diagrams as Code: Why Developers Are Moving from GUI Tools to Text

GUI diagram tools break version control, slow down teams, and rot in wikis. Text-based diagrams live in your repo, render automatically, and stay current. Here's why developers are making the switch.

diagrams-as-codedeveloper-tools