← Plugins

Mermaid Graph Input

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

Community contributed

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