Diagrammo in Docusaurus

Add the plugin, then write a diagram in any Markdown page.

See it live — every chart type rendered through Docusaurus, refreshed on each release.

1.Install

bash

pnpm add docusaurus-plugin-dgmo @diagrammo/dgmo

Then wrap your docusaurus.config.ts with defineConfig — it injects the remark plugin into every preset slot and registers the plugin for you:

import { defineConfig } from 'docusaurus-plugin-dgmo/config';

export default defineConfig({
  title: 'My Docs',
  url: 'https://example.com',
  baseUrl: '/',
  presets: [
    ['classic', {
      docs: { sidebarPath: './sidebars.ts' },
      blog: { showReadingTime: true },
    }],
  ],
});

2.Use

In any .md file under docs/, blog/, or pages/

markdown

```dgmo
pie Browser Market Share (2025)
Chrome 63.5
Safari 19.8
Firefox  6.2
Edge     5.1
Other    5.4
```

Produces

pie Browser Market Share (2025)

Chrome           63.5
Safari           19.8
Firefox           6.2
Edge              5.1
Other             5.4

Color-mode toggle in the Docusaurus navbar swaps each diagram between its palette light and dark variants — no extra config. Under the default colorMode: 'auto', every block is rendered twice (light + dark SVG) and CSS hides the wrong one.

Live links

A live link is the address of a diagram you show on the web. The app marks that diagram with an amber globe, . Edit the diagram in Diagrammo and every place that holds the link catches up — no export, no copy to replace. In Docusaurus it goes in a fence, so a diagram that lives somewhere else never goes quietly out of date here.

1
Get the link

In Diagrammo, open the diagram and press Share on the left rail (or ⌘E), then Show on the web → Show. Or right-click it in the file list and choose Show and copy link. Either way the link is copied. To copy it again, press the lit amber globe on the rail. See where these are in the app.
2
Paste it into a fence

A dgmo fence, the link on a line of its own — shown below.
3
Keep editing

Each time your site builds, the plugin fetches the diagram as its author last saved it.

A live link in a fence

markdown

```dgmo
https://online.diagrammo.app/d/dgm_01M3PG3DQ6S89W7ZFM5Z06J1CD
```

Once you know its id, live-link dgm_01M3PG3DQ6S89W7ZFM5Z06J1CD inside the fence does the same job.

When your page changes: On the next build. The plugin keeps what it fetched in .dgmo/references/ — commit that folder, so a build without network still draws the last version it saw. What happens when a fetch fails, and how to build offline, is in Live links.
Stopping: Press Stop showing in the same Share dialog. The link stops drawing the diagram within five minutes, and your next build shows a short placeholder in its place.

Everywhere else it goes

Notes

On your site

Keep the embedded diagram current

A live link shows the latest version wherever it is embedded, so editing the diagram once updates every place that holds it.

How live links work Showing a diagram on the web Every chart type