Diagrammo in VitePress

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

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

1.Install

bash

pnpm add -D vitepress-dgmo @diagrammo/dgmo

VitePress renders markdown with markdown-it, not remark, so this is a purpose-built integration. Wrap your config in .vitepress/config.ts — withDgmo registers both halves of the integration while preserving any markdown.config and vite.plugins you already have:

import { defineConfig } from 'vitepress';
import { withDgmo } from 'vitepress-dgmo';

export default defineConfig(
  withDgmo(
    {
      title: 'My Docs',
      // ...the rest of your VitePress config
    },
    { palette: 'slate' } // dgmo options (optional)
  )
);

Diagrams are fully rendered at build time, so this second step is optional — it adds light/dark toggling styles, viewBox tightening, and showcase copy / open-in-editor buttons via .vitepress/theme/index.ts:

import DefaultTheme from 'vitepress/theme';
import { setupDgmo } from 'vitepress-dgmo/client';
import 'vitepress-dgmo/client.css';

export default {
  extends: DefaultTheme,
  enhanceApp({ router }) {
    setupDgmo(router); // re-tightens SVGs + wires buttons on route change
  },
};

The shipped stylesheet keys light/dark visibility on VitePress's <html class="dark"> convention automatically.

2.Use

In any .md file in your docs

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

VitePress's appearance toggle flips each diagram between its palette light and dark variants. Under the default colorMode: 'auto', every block is dual-rendered (light + dark SVG) at build time and CSS hides the wrong one based on html.dark.

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 VitePress 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