Mermaid Charts Input

Mermaid chart Input with sanity v3 support. Mermaid lets you create diagrams and visualizations using text and code to your sanity studio as an input.

By Andre Clark

Install command

npm i sanity-plugin-mermaid-input

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.

Install command

npm i sanity-plugin-mermaid-input