sanity-plugin-mermaid

This is a Sanity Studio v3 plugin.

Installation

1npm install sanity-plugin-mermaid-input

1pnpm add sanity-plugin-mermaid-input

1yarn add sanity-plugin-mermaid-input

Usage

Add it as a plugin in sanity.config.ts (or .js):

1import {defineConfig} from 'sanity'
2import {Mermaid} from 'sanity-plugin-mermaid-input'
3
4export default defineConfig({
5  //...
6  plugins: [
7    // no config required
8    Mermaid(),
9
10    // alternative you can edit the config or theme here
11    Mermaid({
12      theme: "dark"
13    })
14  ],
15})

Use as an input type in the schema for your documents or objects

1export default defineType({
2  type: "document",
3  title: "Slideshow",
4  name: "slideshow",
5  fields: [
6    // ... other fields
7    defineField({
8      type: "mermaid",
9      name: "chart"
10      title: "Flowchart"
11    })
12  ]
13})
14

Configuration

you can use mermaidJS configuration options

Dependencies

Uses mdx-mermaid's Mermaid Component to render the charts

License

MIT © Andre Clark

Develop & test

This plugin uses @sanity/plugin-kit with default configuration for build & watch scripts.

See Testing a plugin in Sanity Studio on how to run this plugin with hotreload in the studio.