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

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 — Nord (default), Catppuccin, Dracula, Gruvbox, Monokai, One Dark, Rosé Pine, Solarized, Tokyo Night, and Bold.
Theme: Auto follows Obsidian’s light/dark mode. Override to force light or dark regardless of vault theme.

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

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

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.

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

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.