Diagrammo in your docs & notes

1.Install

Open Obsidian → Settings → Community plugins → Browse.
Search for Diagrammo Diagrams and click Install.
Enable the plugin under Settings → Community plugins.

Plugin page: community.obsidian.md/plugins/dgmo

2.Use

Inside any note

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

Hover any rendered diagram and a small open-in-new-tab icon appears in the top-right corner — click it to edit the source live on online.diagrammo.app with the same palette and theme.

3.Commands

Open the Command palette (Cmd/Ctrl + P) and search for:

Create example note with all chart types: Drops a “Diagrammo Examples.md” note into your vault showing every chart type the plugin can render. Re-running overwrites it with the latest examples.

4.Settings

Settings → Community plugins → Diagrammo Diagrams.

Palette: Color palette applied to all dgmo diagrams — Slate (default), Atlas, Blueprint, Tidewater, Nord, Catppuccin, and Tokyo Night.
Theme: Auto follows Obsidian’s light/dark mode. Override to force light or dark regardless of vault theme.

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

1.Install

bash

pnpm add astro-dgmo @diagrammo/dgmo

Then register the integration in astro.config.mjs:

import { defineConfig } from 'astro/config';
import dgmo from 'astro-dgmo';

export default defineConfig({
  integrations: [dgmo()],
});

2.Use

In any .md or .mdx file

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

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.

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.

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.

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.