@diagrammo/dgmo
Simple text in. Brilliant diagrams out.
Write plain-text .dgmo files, get clean, themeable diagrams and charts. One markup language, 50+ 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
.dgmofiles 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 and Linux)
npm install -g @diagrammo/dgmo-cli
# CLI (no install)
npx @diagrammo/dgmo-cli diagram.dgmo
Homebrew and Arch/Omarchy (pacman) installs of the CLI are listed at diagrammo.app/dev.
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-standalone/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-standalone/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
Beta — expect rough edges and syntax changes: c4, venn, whiteboard. dgmo types marks them too.
Every chart type is 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