How AI is powering better personalization in e-commerce [with Vercel]. Sign up now →

Skip to content

Content operations
Studio
Content Agent
App SDK
Media Library
Content Releases
Agent API
Content backend
Content Lake
Agent Context
MCP Server
Compute
Live CDN
The only platform powering content operations
Start building for free
Start building for free
By Industry
E-commerce & Retail
Media & Publishing
SaaS
By Team
Developers
Content Editors
Product Owners
Business Leaders
Tecovas strengthens their customer connections
Read the story
Read the story
Build and Share
Sanity 101
Sanity Learn
Frameworks
Templates
Tools and plugins
Schemas and snippets
Join our community
Insight
Blog
Events
Customer stories
Guides
Grab your gear: The official Sanity swag store
Read Grab your gear: The official Sanity swag store
Docs
Enterprise
Pricing

Content operations
Content backend
By Industry
By Team
Build and Share
Insight
Docs
Enterprise
Pricing

Join our community on Discord

Subscribe to our newsletter

Products

Sanity Studio
Media Library
Canvas
Content Agent
MCP Server
Content Releases
Insights
App SDK
Content Lake
Live CDN
Compute
Agent Actions
AI Assist
Use cases

Resources

Docs
Sanity 101
Sanity Learn
Tools and plugins
Frameworks
Templates
Schemas and snippets
Guides
Headless CMS explained
Resource library
Explainers
Enterprise CMS guides
Headless CMS Guides
Enhancing your CMS with AI
Agent context guides
Compare Sanity
Glossary
Pricing

Company

Contact
Blog
Shop
Events
Careers
Changelog
Customer Stories
Agency Partners
Technology Partners

Trust and compliance

Privacy policy
Terms of service
Accessibility statement
Transparency statement
Security and compliance
Responsible disclosure
Open Source Pledge

Keep in touch

© SANITY

OSL, NOR (CET)

SFO, USA (PST)

Loading system status...

Change Site Theme

All Contributions Official (110)Community (1380)Answers

Application

Marketing site (345)
Product & Service (150)
E-commerce Resources (133)
Mobile App Resources (11)

Workflow

Collaborative Editing (195)
Optimization (146)
Localization Resources (62)
Artificial Intelligence (AI) (49)
Multichannel (36)

Integration

Content Enrichment (323)
Publishing (295)
APIs (172)
Distribution (88)

Frameworks

Next (409)
React (320)
Tailwind CSS (202)
Gatsby (96)
Astro (71)
Svelte (46)
Nuxt (41)
Vue (37)
Remix (32)
Hydrogen (19)
Eleventy (16)
Angular (13)
React Native (11)
React Email (6)
Gridsome (5)
.NET (5)
Refine (2)
Jungle.JS (2)
Metalsmith (1)
Jovo (1)

All Guides (328)Official (39)Community (289)

Application

Marketing site (49)
Product & Service (21)
E-commerce Resources (13)
Mobile App Resources (2)

Workflow

Collaborative Editing (43)
Optimization (37)
Artificial Intelligence (AI) (12)
Multichannel (12)
Localization Resources (8)

Integration

Publishing (86)
Content Enrichment (59)
APIs (36)
Distribution (24)

Frameworks

Next (71)
React (53)
Tailwind CSS (20)
Gatsby (12)
Remix (10)
Svelte (8)
Eleventy (7)
Nuxt (5)
Vue (5)
Angular (4)
Astro (4)
Hydrogen (2)
Jungle.JS (2)
.NET (2)
Gridsome (1)

All Tools & Plugins (293)Official (43)Community (250)

Application

Marketing site (26)
E-commerce Resources (20)
Product & Service (8)
Mobile App Resources (4)

Workflow

Collaborative Editing (47)
Optimization (41)
Localization Resources (14)
Artificial Intelligence (AI) (7)
Multichannel (6)

Integration

Content Enrichment (81)
Publishing (64)
APIs (48)
Distribution (34)

Frameworks

React (63)
Next (19)
Gatsby (6)
Vue (5)
Tailwind CSS (4)
Astro (4)
Remix (3)
Svelte (3)
Hydrogen (2)
Angular (2)
Refine (2)
Nuxt (2)
Gridsome (2)
React Native (1)
Eleventy (1)
.NET (1)

All Templates (89)Official (10)Community (79)

Application

Marketing site (1)

Frameworks

Astro (43)
Next (35)
React (17)
Tailwind CSS (11)
Remix (5)
Angular (4)
Svelte (4)
Hydrogen (3)
Nuxt (2)
React Native (1)
Vue (1)

All Showcase projects (598)Official (1)Community (597)

Application

Marketing site (254)
Product & Service (116)
E-commerce Resources (90)
Mobile App Resources (4)

Workflow

Collaborative Editing (87)
Optimization (45)
Localization Resources (37)
Artificial Intelligence (AI) (24)
Multichannel (15)

Integration

Content Enrichment (119)
Publishing (108)
APIs (66)
Distribution (21)

Frameworks

Next (284)
React (187)
Tailwind CSS (167)
Gatsby (78)
Nuxt (32)
Svelte (31)
Vue (26)
Astro (20)
Remix (14)
Hydrogen (12)
React Native (9)
Eleventy (8)
React Email (6)
Angular (3)
Gridsome (2)
.NET (2)
Metalsmith (1)
Jovo (1)

All Recipes (182)Official (17)Community (165)

Application

Marketing site (15)
E-commerce Resources (10)
Product & Service (5)
Mobile App Resources (1)

Workflow

Optimization (23)
Collaborative Editing (18)
Artificial Intelligence (AI) (6)
Localization Resources (3)
Multichannel (3)

Integration

Content Enrichment (64)
Publishing (37)
APIs (22)
Distribution (9)

Mermaid.JS

Exchange
Mermaid.JS

Mermaid.JS

Get started with Sanity

1 Mermaid.JS tool

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.

A

Andre Clark

Go to Mermaid Charts Input

1 Mermaid.JS guide

Drawing diagrams in Sanity with Mermaid.js

Learn how to embed Mermaid.js based diagrams in Sanity.

This is an external link at:raymondjulin.com

Go to Drawing diagrams in Sanity with Mermaid.js