Mermaid Preview
Brackets extension that provides a preview panel and a syntax highlighter for Mermaid.
About
Mermaid is a JS library that generates flowcharts, sequence diagrams, and Gantt charts from a text description. This plugin provides a dynamically updated preview panel to make it easier to create drawings.
The plugin associates files with a .uml and .mermaid extension with
a Mermaid syntax highlighter. When one of these files is being edited, the
plugin provides a toolbar button and menu entry to open a preview window.
The current contents of the editor are fed through Mermaid to produce a
diagram.
Note that Mermaid has a command-line interface installable through npm,
so the envisioned workflow for this plugin is to use this plugin for
development and the command-line interface to generate PNG or SVG. (The
Brackets Live Preview is probably a better workflow for embedding Mermaid
directly into HTML.)
Status
While the plugin is usable at the moment, there are some features it would be nice to see. Pull requests gratefully accepted; otherwise I'll give these some work as I have opportunity.
- Save function (SVG / PNG). SVG is easiest since we just have to grab the content that is already going into the DOM.
- Support for embedded content. It would be especially nice to be able to
embed a
mermaidcode block into a Markdown document and have it rendered, either in a separate panel or in the excellent Markdown Preview plugin.
Mermaid is embedded with the plugin so it works standalone; the current version is 0.5.8.
Preferences
None at present.
Attribution
Knut Sveidqvist is the primary author of Mermaid. I've now written an Atlassian Confluence plugin, a Brackets plugin, and a blog post on this tool. Much appreciated.