Mermaid in Figma

About this plugin

The plugin can create Mermaid chart images and add it to your Figma files.

How to Use

[ Preparation ]

1. Write your Mermaid code.
2. Create a text object with your code.

[Mermaid in Figma]

1. Run the Plugin
2. Select the text object and click [ Import text ]
3. Click [ Preview ]
4. Click [ Export ]. The plugin will draw the image in your file.

Options

• Export-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 "<span>" 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 - beta
• Sankey - beta
• Font Awesome icons

[ Major error ]

• "Image is too large"

[ Others ]

• Using <style>. (Please use styling in Mermaid)
• Import charts as SVG