\n \n \n Write a fenced dgmo block β it renders to SVG at build time.\n
\n\n## Chart types & visual authoring\n\nOne small plain-text language, **50+ chart types** β flowcharts, sequence, state, class, ER, C4, org charts, gantt, maps, mind maps, and the full bar/line/pie/area/sankey family. Browse every type with live examples in the **[language reference](https://diagrammo.app/reference)**.\n\nPrefer to author visually? Draft diagrams in the **[Diagrammo desktop app](https://diagrammo.app/app)** or the **[online editor](https://online.diagrammo.app)** β live preview, autocomplete, optional vim keybindings, 7 themeable palettes, and one-click PNG/SVG export β then paste the `dgmo` block into your docs. More at **[diagrammo.app](https://diagrammo.app)**.\n\n## Install\n\n```bash\npnpm add astro-dgmo @diagrammo/dgmo\n# or\nnpm install astro-dgmo @diagrammo/dgmo\n```\n\n`@diagrammo/dgmo` is a peer dependency.\n\n### On Astro 7, add one more package\n\n```bash\npnpm add @astrojs/markdown-remark\n```\n\nAstro 7 changed its default Markdown processor to SΓ€tteri, which does not run\nremark plugins β and diagrams are rendered by one. Without this package Astro\nstops the build and tells you to install it.\n\nWith it installed there is nothing else to do: `astro-dgmo` puts the site back\non the `unified` processor it has always rendered through, so Markdown behaves\nexactly as it did on Astro 6, and prints a one-line notice saying it did. If you\nwould rather own that yourself, configure `unified` and the integration adds\nitself to your processor instead of replacing it:\n\n```js\nimport { unified } from '@astrojs/markdown-remark';\n\nexport default defineConfig({\n markdown: { processor: unified() },\n integrations: [dgmo()],\n});\n```\n\nAstro 4, 5 and 6 need none of this.\n\n## Quick start\n\nAdd the integration to `astro.config.mjs`:\n\n```js\nimport { defineConfig } from 'astro/config';\nimport dgmo from 'astro-dgmo';\n\nexport default defineConfig({\n integrations: [dgmo()],\n});\n```\n\nThat's the whole integration β no stylesheet to wire up, no layout to edit. (Before 0.11.0 you had to add `import 'remark-dgmo/client.css'` to a global layout yourself, and a site that skipped it rendered every diagram twice.) Anywhere in your Markdown or MDX content, write a fenced block with the language `dgmo`:\n\n````markdown\n```dgmo\npie Language Mix\nTypeScript 45\nPython 30\nRust 25\n```\n````\n\nAt build time the block is replaced with an inline `
![\"A](\"https://diagrammo.app/readme/sequence.gif\")
\n