# Diagrammo Diagrams for Obsidian

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

[Diagrammo](https://diagrammo.app) 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.

![bar, sequence, timeline, pie — all rendered inside Obsidian](https://diagrammo.app/og-image.png)

## Supported chart types

Every chart type from [`@diagrammo/dgmo`](https://github.com/diagrammo/dgmo) renders in Obsidian:

| Category | Types |
|----------|-------|
| **Data** | arc, area, bar, bar-stacked, chord, doughnut, function, heatmap, line, multi-line, pie, polar-area, radar, sankey, scatter, slope |
| **Business** | cycle, funnel, journey-map, org, pyramid, quadrant, tech-radar, venn, wordcloud |
| **Project** | gantt, kanban, timeline |
| **Software** | boxes-and-lines, c4, class, er, flowchart, infra, mindmap, sequence, sitemap, state, wireframe |

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](https://diagrammo.app/docs).

## Usage

Write a fenced code block with the `dgmo` language tag:

````markdown
```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](https://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

| Setting | Description | Default |
|---------|-------------|---------|
| **Palette** | Color palette for all diagrams — all 13 dgmo palettes available (nord, atlas, blueprint, slate, tidewater, solarized, catppuccin, dracula, rose-pine, gruvbox, monokai, tokyo-night, one-dark) | `nord` |
| **Theme** | Light, dark, or auto (follows Obsidian's theme) | `auto` |

## 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](https://community.obsidian.md/plugins/dgmo).

## Development

### Prerequisites

- Node.js 18+

### Setup

```bash
npm install
```

### Commands

```bash
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](https://github.com/obsidianmd/obsidian-releases) 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](https://community.obsidian.md/plugins/dgmo) — official Obsidian plugin page
- [diagrammo.app](https://diagrammo.app) — full desktop editor
- [@diagrammo/dgmo](https://github.com/diagrammo/dgmo) — the dgmo markup library and CLI
- [dgmo syntax reference](https://github.com/diagrammo/dgmo#readme)

## License

MIT