Diagrammo in Fumadocs

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

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

1.Install

bash

pnpm add fumadocs-dgmo @diagrammo/dgmo

Two small edits to your Fumadocs site. First, wire the remark plugin in source.config.ts:

import { defineConfig, defineDocs } from 'fumadocs-mdx/config';
import { withDgmo } from 'fumadocs-dgmo/config';

export default defineConfig({
  mdxOptions: withDgmo(),
});

export const docs = defineDocs({
  dir: 'content/docs',
});

Then drop <DgmoClient /> into app/layout.tsx inside <RootProvider>:

tsx

import './global.css';
import { RootProvider } from 'fumadocs-ui/provider';
import { DgmoClient } from 'fumadocs-dgmo/client';
import type { ReactNode } from 'react';

export default function Layout({ children }: { children: ReactNode }) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body>
        <RootProvider>
          {children}
          <DgmoClient />
        </RootProvider>
      </body>
    </html>
  );
}

<DgmoClient /> rebinds viewBox tightening + copy buttons on every soft route change AND auto-imports the theme-aware stylesheet — no separate @import in global.css needed.

2.Use

In any .md or .mdx file under content/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

Fumadocs UI's color-mode toggle flips each diagram between its palette light and dark variants — no extra config. Every block is rendered twice at build time (light + dark SVG) 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 Fumadocs 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