sanity-plugin-mermaid

This is a Sanity Studio v3 plugin.

Installation

npm install sanity-plugin-mermaid-input

pnpm add sanity-plugin-mermaid-input

yarn add sanity-plugin-mermaid-input

Usage

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

import {defineConfig} from 'sanity'
import {Mermaid} from 'sanity-plugin-mermaid-input'

export default defineConfig({
  //...
  plugins: [
    // no config required
    Mermaid(),

    // alternative you can edit the config or theme here
    Mermaid({
      theme: "dark"
    })
  ],
})

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

export default defineType({
  type: "document",
  title: "Slideshow",
  name: "slideshow",
  fields: [
    // ... other fields
    defineField({
      type: "mermaid",
      name: "chart",
      title: "Flowchart",
    })
  ]
})

Configuration

you can use mermaidJS configuration options

Dependencies

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

License

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.