Why Mermaid?
You can describe a diagram in simple text form, much easier (to me) than drawing it using a drawing program. You enter the relationships and let the program do the layout. I’m thinking of Mermaid as a diagramming tool in a way similar to what Markdown is for text authoring.
For example, when you enter this code into a Mermaid interpreter
graph TD
mermaidsource["Mermaid Source Code"] --> wpedit["Word Press Editor, MerPress Block"] --> website[Finished Website]you’ll get a diagram like the one shown below.
You can find an introduction to Mermaid on https://mermaid.js.org/intro/
Approach 1: WordPress Plugin
When searching the web, multiple options appear. The classic seems to have been „WP Mermaid“ but the page has disappeared from wordpress.org/plugins
The plugin I chose is MerPress . Initially, I was a bit sceptical because it has only 100+ installations, which tends to indicate a scam or buggy sofware, but the development history shows continuous development since June 2021 and there are current updates for each WordPress version.
When editing, you’ll see your code on the top and the resulting diagram below it. This is as comfortable as you can get. When you see no diagram, there is a syntax error in the code.
Here is an example, from the code shown above:
graph TD mermaidsource["Mermaid Source Code"] --> wpedit["Word Press Editor, MerPress Block"] --> website[Finished Website]
Approach 2: Online-Editor + Image Export
The Mermaid team has setup a Live Editor where you can input your diagram’s code and then see and download a PNG or SVG file. SVG is not easy in WordPress for security and privacy reasons (SVG is a variant of XML and can contain all kinds of links, including links to malware), so you are better off with a PNG image.
But a PNG image is much larger than a mermaid file, so for your visitors, the plugin option is probably better, but the PNG option is a lot more portable because it does not require JavaScript execution on their computer.
Schreibe einen Kommentar