Welcome to Diagrammo

Diagrammo is a diagram editor for creating charts and diagrams with a simple plain-text syntax. Write a few lines of text — get a polished, theme-aware diagram. Available as a desktop app and online editor.

Learn more at diagrammo.app.

A .dgmo text file sits at the centre. Every other piece reads it, edits it, or shares it:

boxes-and-lines The pieces of Diagrammo
active-tag Role

tag Role as r
  Source purple
  Write blue
  Render orange
  Embed green
  Share teal

.dgmo File r: Source
  -edit-> Desktop App
  -edit-> Web Editor
  -render-> dgmo CLI
  -embed-> Docs Plugins
  -embed-> Obsidian

Desktop App r: Write
  -share-> Cloud
Web Editor r: Write
  -share-> Cloud
dgmo CLI r: Render
  -put-> Cloud
Docs Plugins r: Embed
Obsidian r: Embed
Cloud r: Share

DGMO and Diagrammo

DGMO is the plain-text markup language you write. Diagrammo is the app you write it in.

Think of it like Markdown and your editor — Markdown is the syntax, and you can write it anywhere. DGMO works the same way: it’s a .dgmo text file that describes a diagram. You can create and edit .dgmo files in the Diagrammo desktop app, the online editor, Obsidian (via plugin), or any text editor. The dgmo CLI renders them from the terminal, and the @diagrammo/dgmo npm package lets you render them programmatically.

The name “DGMO” is shorthand for “Diagrammo” — shorter to type, easier to use as a file extension and command name.

Getting Started

• Create a new file using the file tree on the left, or press Cmd + N (Alt + N in the web editor)
• Write diagram code in the editor — the preview updates in real time
• Export your diagrams as PNG or SVG — see Exporting diagrams for format choice, transparent backgrounds, and palettes
• Browse the sidebar to explore all chart types and features

Working in a codebase? Diagrams in your repo covers committing .dgmo files alongside your code, rendering and checking them in CI, and reviewing diagram changes in a pull request.

Every diagram starts with the chart type on the first line, followed by your data and settings. Five lines make this chart — the source is open beneath it:

pie Doubloons by Ship

Revenge 42
Serpent 28
Phantom 18
Kraken 12

The same few rules draw very different pictures. A flow of money and a map of ideas:

sankey Where the Gold Went

Plunder -> Captain 40
Plunder -> Crew 45
Plunder -> Ship 15
Crew -> Grog 25
Crew -> Savings 20
Ship -> Repairs 15

mindmap Plunder

tag Kind as k
  Metal orange
  Stone purple

Plunder
  Gold k: Metal
    Doubloons k: Metal
    Ingots k: Metal
  Gems k: Stone
    Rubies k: Stone
    Pearls k: Stone

The chart gallery shows every chart type.

New to all of this? Two pages are worth reading before the chart-type guides:

• How DGMO Thinks — the handful of ideas every chart type shares, including how indentation works
• Glossary — plain-language definitions of the words the guides use: directive, metadata, tag group, alias, leaf, and the rest

And when something comes out wrong, Troubleshooting is organised by symptom — “my numbers are wrong”, “a row vanished”, “the label is wrong” — rather than by error code.

One thing to know early

No errors does not mean the diagram is correct. It means the file could be read. DGMO is forgiving by design — a typo usually produces a diagram rather than a complaint, so a stray space can quietly turn part of a number into part of a label and nothing will flag it.

Always look at the render: check the labels, the axis range, and the totals against what you meant to enter. What a clean check does and doesn’t tell you walks through the specific ways this goes wrong and what to check for each, and Troubleshooting lists the symptoms and their causes.

Where to go next

These docs have two bands. The sidebar groups them the same way.

Guide — how to use the product:

• Start here — this page and How DGMO Thinks
• The app — Keyboard Shortcuts, Exporting Diagrams, Terminal Opener and Troubleshooting
• Sharing with Diagrammo Cloud — Spaces, Showing on the Web and Live Links
• Publishing — Embedding in Your Docs and Diagrams in Your Repo

Language reference — how to write DGMO:

• Every diagram — Colors & Palettes, Writing Dates, DGMO in Markdown, the Glossary and the Full Reference
• Chart types by category — Software, Project, Business, Data, Life and Freeform. Each chart type has its own page.

The Diagrammo Ecosystem

Desktop App

A native app for Apple-silicon Macs (and Omarchy Linux) for authoring .dgmo files with a live preview editor, file tree, and export. Download at diagrammo.app/app.

Online Editor

The full Diagrammo experience in your browser at online.diagrammo.app. Your diagrams are stored in your browser’s Origin Private File System (OPFS) — they persist across sessions, but clearing browser data will remove them.

CLI Tool

The dgmo command-line tool renders .dgmo files to PNG or SVG from your terminal. Install it with npm, on macOS and Linux:

npm install -g @diagrammo/dgmo-cli

For Homebrew or pacman, see diagrammo.app/dev.

Or run it without installing, with npx:

npx @diagrammo/dgmo-cli diagram.dgmo

JavaScript / TypeScript Library

The @diagrammo/dgmo npm package lets you parse and render diagrams programmatically — useful for generating diagrams in build pipelines, servers, or web apps.

npm install @diagrammo/dgmo

Diagrammo Cloud

Cloud is where you share. A space holds your diagrams, you can show a diagram on the web, and a live link always draws the latest version.

Docs Sites and Obsidian

Plugins for Astro, Docusaurus, Fumadocs, Nextra and VitePress draw dgmo code fences on your published docs site. The Obsidian plugin does the same inside your notes. See Embedding in Your Docs.