Diagrammo Diagrams

Write a dgmo code block and it renders as a diagram inline in your notes — reading mode and live preview, desktop and mobile.

Diagrammo gives you 40+ chart types from one small plain-text language: data viz, software architecture, project planning, hierarchies, and more. Because the diagrams are plain text, they're searchable in Obsidian, diffable in git or Sync history, and never go stale the way an exported image does.

Supported chart types

Every chart type from @diagrammo/dgmo renders in Obsidian:

Run Diagrammo Diagrams: Create example note with all chart types from the command palette to see every chart type rendered with working sample data. Full language reference at diagrammo.app/docs.

Usage

Write a fenced code block with the dgmo language tag:

```dgmo
bar Quarterly Revenue
x-label Quarter
y-label Revenue ($M)

Q1 4.2
Q2 4.8
Q3 5.1
Q4 5.9
```

The diagram renders inline in reading mode and live preview. Hover any rendered diagram to reveal a small open-in-new-tab icon in the top-right corner — click it to pop the source open in online.diagrammo.app for live editing, with the same palette and theme.

Example note

Open the command palette (Cmd/Ctrl + P) and run:

Diagrammo Diagrams: Create example note with all chart types

This creates a Diagrammo Examples.md file in your vault with working examples of every supported chart type.

Settings

Install

1. Open Settings > Community Plugins > Browse in Obsidian
2. Search for "Diagrammo Diagrams"
3. Click Install, then Enable

Or install directly from community.obsidian.md/plugins/dgmo.

Development

Prerequisites

• Node.js 18+

Setup

npm install

Commands

npm run build     # One-shot build → main.js (esbuild, CJS bundle)
npm run dev       # Watch mode (rebuilds on save, inline sourcemaps)

The build bundles @diagrammo/dgmo and its rendering dependencies into a single main.js in the repo root, which Obsidian loads directly. obsidian, electron, and CodeMirror packages are externalized.

Project structure

src/
├── main.ts       # Plugin lifecycle, markdown post-processor, example note command
├── render.ts     # Rendering dispatcher (delegates each chart type to @diagrammo/dgmo)
├── settings.ts   # Settings tab UI (palette dropdown, theme override)
└── examples.ts   # Example note content with all chart types

Dependencies

• @diagrammo/dgmo ^0.14.1 — diagram parsing and rendering (bundled by esbuild; brings its own transitive rendering deps)
• obsidian ^1.12.3 — Obsidian plugin API (dev only, externalized)

Testing locally

1. Run npm run dev (watch mode)
2. Symlink or copy the repo into your vault's .obsidian/plugins/dgmo/ folder
3. Enable the plugin in Obsidian settings
4. Edit a note with a dgmo code block — changes rebuild automatically

Releasing

GitHub release

1. Bump version in both package.json and manifest.json (must match)
2. Build: npm run build
3. Commit and push
4. Create a GitHub release with tag <version> (e.g., 1.0.1)
5. Attach these files to the release:
   • main.js
   • manifest.json
   • styles.css

Obsidian Community Plugins

The plugin is listed in the Obsidian Community Plugins registry. New versions are picked up automatically from GitHub releases — just publish a new release with the required files attached.

Links

• community.obsidian.md/plugins/dgmo — official Obsidian plugin page
• diagrammo.app — full desktop editor
• @diagrammo/dgmo — the dgmo markup library and CLI
• dgmo syntax reference

License

MIT