🎤 Builder Talk: The Story Behind Lady Gaga’s Digital Experience – Register now

Mermaid Graph Input

Generation of diagram and flowchart from text in a similar manner as markdown

Warning

This plugin only works with an older version of Sanity Studio (v2), which is deprecated.

Learn how to migrate to the new Studio v3 →

sanity-plugin-mermaid

Add a Mermaid graph input type for Sanity CMS

Read more about using the plugin in this blog post

Screenshot

sanity install mermaid

Then use it in your schema:

export default {
  name: 'graph',
  title: 'Graph',
  type: 'document',
  fields: [
    {
      name: 'title',
      title: 'Title',
      type: 'string',
    }, {
      type: 'mermaid',
    }
  ]
}

In order to render in your frontend you need to manually use the mermaid package.

TODO

  • Write a helper package providing a serialiser for portable text
  • Link to mermaid docs in editor
  • Syntax highlighted editor

v2 install command (deprecated)

sanity install mermaid