Mermaid in Figma
by art
Enable to use Mermaid code in Figma
FreeFigmaFigJam
Installs
4,376
Likes
312
Users
52,503
Views
31,514
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 [removed]. (Please use styling in Mermaid)Import charts as SVG
More software development plugins
View allBuilder.io - Figma to Code & AI Apps (React, Vue, Tailwind, etc)
by Steve Sewell
Export designs to clean, responsive code or turn Figma screens into AI apps and prototypes.
410.3K 23.4K
Anima: Convert Figma to HTML/CSS/React/Tailwind,Vibe code,DevMode Inspect/Run React/HTML,App builder
by Anima
Anima - AI Design to code, Vibe code, Vibe design
400.6K 17.8K
SkewDat
Paidby Unfold
Skew any layer or group with all layers preserved to edit.
276K 7.3K
Zeplin
Paidby Zeplin Crew
Design tools are for designing. Zeplin is for clear, structured design delivery.
183.3K 2.9K