Back to Plugins
Mermaid in Figma

Mermaid in Figma

Enable to use Mermaid code in Figma

chartdiagrammermaidflowsystem designcode-generators

Plugin Preview

Mermaid in Figma preview

About this plugin

The plugin can create Mermaid chart images and add it to your Figma files.How to Use[ Preparation ]Write your Mermaid code.Create a text object with your code.[Mermaid in Figma]Run the PluginSelect the text object and click [ Import text ]Click [ Preview ]Click [ Export ]. The plugin will draw the image in your file.OptionsExport-Width: set the width. The width is the width of the exported image.Scale: set the export scale. If you got an error "Image is too large", please set the small scale. (Please be careful the image could be blur when the scale is too small).Background: (default: transparent)You can set the background color.Default is transparent, which I thought is flexible."Use HTML tags": enable to use HTML tags in your code.Some types (ex. flowchart) can use HTML tags like "" and change style.Please be careful that Markdown can be disabled if this option is set as true.What the plugin can't do[ Types of charts ]ZenUML - betaSankey - betaFont Awesome icons[ Major error ]"Image is too large"[ Others ]Using

© 2026 Figma Plugin Hub. All rights reserved.