Diagrammo in Nextra

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

Turbopack caveat: withDgmo injects remark-dgmo as a function-valued MDX option, which Turbopack can't serialize. Build with Webpack — run next build (Nextra 4's default) and next dev without --turbopack. If your scripts were scaffolded with that flag, drop it.

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

1.Install

bash

pnpm add nextra-dgmo @diagrammo/dgmo

Two small edits to your Nextra site. First, wire the remark plugin in next.config.mjs:

import nextra from 'nextra';
import { withDgmo } from 'nextra-dgmo/config';

const withNextra = nextra(
  withDgmo({}, { dgmo: { palette: 'slate' } })
);

export default withNextra({});

Then mount <DgmoClient /> in app/layout.tsx:

tsx

import './global.css';
import { DgmoClient } from 'nextra-dgmo/client';
import type { ReactNode } from 'react';

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

<DgmoClient /> is a no-render Client Component that re-runs viewBox tightening + copy buttons on every soft route change AND side-effect-imports the theme-aware nextra-dgmo/client.css (dark mode keyed on html.dark) — no manual @import needed.

2.Use

In any .md or .mdx file in your content tree

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

Nextra's theme switcher 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 Nextra 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