@diagrammo/dgmo

Simple text in. Brilliant diagrams out.

Write plain-text .dgmo files, get clean, themeable diagrams and charts. One markup language, 45+ chart types — flowcharts, sequence diagrams, ER, org charts, C4, gantt, maps, bar/line/pie, and a lot more.

📖 Docs · 🧩 Language Reference · 🖥️ Desktop App · 🪄 Live Editor

sequence Boarding the Marauder

Quartermaster -Hoist the colors-> Crew
Crew -Aye, captain-> Bosun
Bosun -Heading 270-> Helm
Helm -On course-> Quartermaster

That's a complete diagram. No coordinates, no XML, no drag-and-drop — just text you can diff, review, and version like any other source file.

Author it visually

Want a richer editing experience than a text file? The Diagrammo desktop app (native macOS, offline, auto-updating) and the online editor (any browser, nothing to install) turn DGMO into a full authoring environment:

• Live preview — the diagram redraws as you type
• Smart editing — syntax highlighting, autocomplete, and optional vim keybindings
• 7 themeable palettes, each with light / dark / transparent variants
• One-click export to PNG or SVG, plus instant shareable links
• Local-first — your .dgmo files are plain text on disk, work fully offline, and never go stale the way an exported image does

Because every diagram is just text, it lives in git, diffs cleanly in PRs, and drops straight into your docs, your AI tools, or any web page.

→ Start at diagrammo.app

Install

# Library
npm install @diagrammo/dgmo

# CLI (macOS, via Homebrew)
brew install diagrammo/dgmo/dgmo

# CLI (no install)
npx @diagrammo/dgmo diagram.dgmo

CLI

dgmo                                   # creates a sample.dgmo to get you started
dgmo diagram.dgmo                      # → diagram.png
dgmo diagram.dgmo -o out.svg           # → SVG (format from extension)
cat diagram.dgmo | dgmo > out.png      # pipe in, PNG to stdout
dgmo diagram.dgmo --theme dark --palette catppuccin

| Flag | Values | Default | |------|--------|---------| | --theme | light, dark, transparent | light | | --palette | one of 7 palettes (see below) | slate | | -o | output path (.svg → SVG, else PNG) | <input>.png |

Library

Render any diagram to an SVG string — no browser, no visible DOM:

import { render } from '@diagrammo/dgmo';

const { svg } = await render(`
bar Revenue by Quarter
Q1 12
Q2 19
Q3 15
Q4 22
`, { theme: 'light', palette: 'slate' });

render() auto-detects the chart type and dispatches to the right engine. Need the lower-level parsers, config builders, and per-type renderers? They live under the @diagrammo/dgmo/advanced subpath — see the docs for the full surface and stability contract.

Drop into any web page

Add one <script> tag and every <pre class="dgmo"> block renders on load:

<script src="https://cdn.jsdelivr.net/npm/@diagrammo/dgmo/dist/auto.js"></script>

<pre class="dgmo">pie Crew Rations
Grog: 58
Hardtack: 21
Limes: 21</pre>

Prefer an explicit element? Use <dgmo-diagram> from the same package:

<script src="https://cdn.jsdelivr.net/npm/@diagrammo/dgmo/dist/element.js"></script>

<dgmo-diagram palette="slate">pie Crew Rations
Grog: 58
Hardtack: 21
Limes: 21</dgmo-diagram>

Theme detection, copy button, and "open in editor" come for free. Full config, framework recipes (Astro, Docusaurus, Hugo, MkDocs), self-hosting, and CSP guidance: diagrammo.app/embed.

Using a docs framework? First-class plugins wrap all of this: remark-dgmo · astro-dgmo · docusaurus-plugin-dgmo · fumadocs-dgmo · nextra-dgmo · vitepress-dgmo

Use it from your AI tool

Claude, Cursor, Codex, and other agents can author and render DGMO directly. One command sets up every assistant you have — no second package, no prompts:

dgmo install

It auto-detects Claude Code, Codex, Claude Desktop, Cursor, Windsurf, and Copilot and wires each one to the bundled MCP server. More: diagrammo.app/ai.

Chart types

Data charts — bar · line · area · pie · doughnut · radar · polar-area · bar-stacked · multi-line · scatter · heatmap · funnel · sankey · chord

Visualizations — slope · wordcloud · arc · timeline · venn · quadrant · tech-radar · cycle · pyramid · ring · function · map

Diagrams — sequence · flowchart · class · er · org · c4 · state · infra · kanban · sitemap · mindmap · gantt · pert · journey-map · boxes-and-lines · wireframe · raci · rasci · daci

All 45 chart types are categorized with live examples at diagrammo.app/reference.

Each type's full syntax, directives, and options live in the Language Reference — the authoritative spec.

Palettes & themes

Built-in palettes, each with light, dark, and transparent variants:

slate (default) · atlas · blueprint · tidewater · nord · catppuccin · tokyo-night

Register your own with registerPalette(). Color helpers (getPalette, tint, mute, contrastText, …) and Mermaid theme-variable generation ship from the package too — see the docs.

Editor support

Syntax highlighting and autocomplete for .dgmo files ship as ready-to-use exports:

• @diagrammo/dgmo/highlight — standalone highlighter
• @diagrammo/dgmo/editor — CodeMirror 6 language support

Both back the desktop app and the live editor.

Develop

pnpm install
pnpm build        # tsup → dist/ (ESM + CJS + CLI)
pnpm test         # vitest
pnpm typecheck

License

MIT © Demian Neidetcher