Fumadocs doesn't have a built-in Mermaid wrapper provided, instead you can try different approaches easily.
@theguild/remark-mermaid converts codeblocks to JSX elements using MDX and render them in a React component. It renders the graph on client side.
npm install @theguild/remark-mermaid
Add their remark plugin, for example (in Fumadocs MDX):
import { defineDocs, defineConfig } from 'fumadocs-mdx/config';
import { remarkMermaid } from '@theguild/remark-mermaid';
export const { docs, meta } = defineDocs({
dir: 'content/docs',
});
export default defineConfig({
mdxOptions: {
remarkPlugins: [remarkMermaid],
},
});
```mermaid
graph TD;
subgraph AA [Consumers]
A[Mobile app];
B[Web app];
C[Node.js client];
end
subgraph BB [Services]
E[REST API];
F[GraphQL API];
G[SOAP API];
end
Z[GraphQL API];
A --> Z;
B --> Z;
C --> Z;
Z --> E;
Z --> F;
Z --> G;
```
