Mermaid Graph Input

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


Add a Mermaid graph input type for Sanity CMS

Read more about using the plugin in this blog post


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.


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

Install command

sanity install mermaid

Categorized in