{"id":370385,"date":"2026-10-11T16:45:49","date_gmt":"2026-10-11T16:45:49","guid":{"rendered":"https:\/\/wordpress.org\/plugins\/solvebeam-mermaid\/"},"modified":"2026-10-11T16:45:31","modified_gmt":"2026-10-11T16:45:31","slug":"solvebeam-diagrams-with-mermaid","status":"publish","type":"plugin","link":"https:\/\/wordpress.org\/plugins\/solvebeam-diagrams-with-mermaid\/","author":23563239,"comment_status":"closed","ping_status":"closed","template":"","meta":{"version":"1.0.0","stable_tag":"1.0.0","tested":"7.1.3","requires":"6.8","requires_php":"8.3","requires_plugins":null,"header_name":"SolveBeam Diagrams with Mermaid","header_author":"SolveBeam","header_description":"A plugin for rendering Mermaid diagrams and visualizations from Mermaid code.","assets_banners_color":"","last_updated":"2026-10-11 16:45:31","external_support_url":"","external_repository_url":"","donate_link":"https:\/\/github.com\/sponsors\/solvebeam","header_plugin_uri":"https:\/\/www.solvebeam.com\/wordpress\/plugins\/solvebeam-diagrams-with-mermaid\/","header_author_uri":"https:\/\/www.solvebeam.com\/","rating":0,"author_block_rating":0,"active_installs":0,"downloads":67,"num_ratings":0,"support_threads":0,"support_threads_resolved":0,"author_block_count":0,"sections":["description","installation","faq","changelog"],"tags":{"1.0.0":{"tag":"1.0.0","author":"solvebeam","date":"2026-10-11 16:45:31","revision":3739812}},"upgrade_notice":[],"ratings":[],"assets_icons":{"icon-128x128.png":{"filename":"icon-128x128.png","revision":3739911,"resolution":"128x128","location":"assets","locale":"","width":128,"height":128},"icon-256x256.png":{"filename":"icon-256x256.png","revision":3739911,"resolution":"256x256","location":"assets","locale":"","width":256,"height":256},"icon.svg":{"filename":"icon.svg","revision":3739911,"resolution":false,"location":"assets","locale":false}},"assets_banners":[],"assets_blueprints":{},"all_blocks":{"solvebeam-diagrams-with-mermaid\/mermaid-diagram":{"$schema":"https:\/\/schemas.wp.org\/trunk\/block.json","apiVersion":3,"name":"solvebeam-diagrams-with-mermaid\/mermaid-diagram","version":"1.0.0","title":"Mermaid","category":"embed","icon":"chart-line","description":"Enter Mermaid code and render it as diagrams or visualizations.","textdomain":"solvebeam-diagrams-with-mermaid","attributes":{"code":{"type":"string","default":"flowchart TD\n    A[Start] --> B{Ready?}\n    B -->|Yes| C[Build it]\n    B -->|No| D[Prepare]"}},"supports":{"html":false},"editorScript":"file:.\/index.js","style":"file:.\/index.css","viewScript":"file:.\/view.js"}},"tagged_versions":["1.0.0"],"block_files":[],"assets_screenshots":[],"screenshots":[]},"plugin_section":[],"plugin_tags":[26203,15402,166215,285865,18208],"plugin_category":[],"plugin_contributors":[285866],"plugin_business_model":[],"class_list":["post-370385","plugin","type-plugin","status-publish","hentry","plugin_tags-diagrams","plugin_tags-flowchart","plugin_tags-mermaid","plugin_tags-solvebeam","plugin_tags-visualization","plugin_contributors-solvebeam","plugin_committers-remcotolsma","plugin_committers-solvebeam","plugin_support_reps-remcotolsma","plugin_support_reps-solvebeam"],"banners":[],"icons":{"svg":"https:\/\/ps.w.org\/solvebeam-diagrams-with-mermaid\/assets\/icon.svg?rev=3739911","icon":"https:\/\/ps.w.org\/solvebeam-diagrams-with-mermaid\/assets\/icon.svg?rev=3739911","icon_2x":false,"generated":false},"screenshots":[],"raw_content":"<!--section=description-->\n<p><a href=\"https:\/\/www.solvebeam.com\/\">SolveBeam<\/a> \u00b7 <a href=\"https:\/\/github.com\/solvebeam\/solvebeam-diagrams-with-mermaid-for-wordpress\">GitHub<\/a><\/p>\n\n<p>SolveBeam Diagrams with Mermaid adds a block for creating diagrams and visualizations with\n<a href=\"https:\/\/mermaid.js.org\/\">Mermaid<\/a>. Enter Mermaid syntax in the block editor and\nthe diagram is rendered in the editor and on the front end.<\/p>\n\n<p>Mermaid is rendered locally in the browser. This plugin does not require an\nexternal account or service to render diagrams.<\/p>\n\n<h3>Source Code<\/h3>\n\n<p>This plugin ships compiled (minified) JavaScript and CSS in the <code>blocks\/<\/code>\nfolder. The human-readable source code of everything in that folder is\npublicly available:<\/p>\n\n<ul>\n<li>Plugin source code (block editor and front-end scripts, styles and build\nconfiguration): <a href=\"https:\/\/github.com\/solvebeam\/solvebeam-diagrams-with-mermaid-for-wordpress\">https:\/\/github.com\/solvebeam\/solvebeam-diagrams-with-mermaid-for-wordpress<\/a>.\nThe same source is also included in this plugin in the <code>blocks-src\/<\/code> folder,\ntogether with <code>package.json<\/code>.<\/li>\n<li>Mermaid: <a href=\"https:\/\/github.com\/mermaid-js\/mermaid\">https:\/\/github.com\/mermaid-js\/mermaid<\/a>.<\/li>\n<\/ul>\n\n<h4>What is in the blocks\/ folder?<\/h4>\n\n<ul>\n<li><code>blocks\/mermaid-diagram\/<\/code> \u2013 compiled from <code>blocks-src\/mermaid-diagram\/<\/code>\n(<code>index.js<\/code>, <code>view.js<\/code>, <code>editor.css<\/code>, <code>style.css<\/code> and <code>block.json<\/code>),\nincluding the core of the Mermaid library.<\/li>\n<li><code>blocks\/*.js<\/code> (numbered files such as <code>blocks\/8726.js<\/code>) \u2013 chunks that webpack\nsplits off from Mermaid and are loaded on demand for the different diagram\ntypes. These files contain only code from Mermaid and its npm dependencies,\nnot from this plugin.<\/li>\n<\/ul>\n\n<p>The Mermaid dependencies bundled in these chunks, with their public source code:<\/p>\n\n<ul>\n<li>@mermaid-js\/parser: <a href=\"https:\/\/github.com\/mermaid-js\/mermaid\/tree\/develop\/packages\/parser\">https:\/\/github.com\/mermaid-js\/mermaid\/tree\/develop\/packages\/parser<\/a><\/li>\n<li>@braintree\/sanitize-url: <a href=\"https:\/\/github.com\/braintree\/sanitize-url\">https:\/\/github.com\/braintree\/sanitize-url<\/a><\/li>\n<li>@iconify\/utils: <a href=\"https:\/\/github.com\/iconify\/iconify\">https:\/\/github.com\/iconify\/iconify<\/a><\/li>\n<li>@upsetjs\/venn.js: <a href=\"https:\/\/github.com\/upsetjs\/venn.js\">https:\/\/github.com\/upsetjs\/venn.js<\/a><\/li>\n<li>chevrotain: <a href=\"https:\/\/github.com\/Chevrotain\/chevrotain\">https:\/\/github.com\/Chevrotain\/chevrotain<\/a><\/li>\n<li>cytoscape: <a href=\"https:\/\/github.com\/cytoscape\/cytoscape.js\">https:\/\/github.com\/cytoscape\/cytoscape.js<\/a><\/li>\n<li>cytoscape-cose-bilkent: <a href=\"https:\/\/github.com\/cytoscape\/cytoscape.js-cose-bilkent\">https:\/\/github.com\/cytoscape\/cytoscape.js-cose-bilkent<\/a><\/li>\n<li>cytoscape-fcose: <a href=\"https:\/\/github.com\/iVis-at-Bilkent\/cytoscape.js-fcose\">https:\/\/github.com\/iVis-at-Bilkent\/cytoscape.js-fcose<\/a><\/li>\n<li>d3: <a href=\"https:\/\/github.com\/d3\/d3\">https:\/\/github.com\/d3\/d3<\/a><\/li>\n<li>d3-sankey: <a href=\"https:\/\/github.com\/d3\/d3-sankey\">https:\/\/github.com\/d3\/d3-sankey<\/a><\/li>\n<li>dagre-d3-es: <a href=\"https:\/\/github.com\/tbo47\/dagre-es\">https:\/\/github.com\/tbo47\/dagre-es<\/a><\/li>\n<li>dayjs: <a href=\"https:\/\/github.com\/iamkun\/dayjs\">https:\/\/github.com\/iamkun\/dayjs<\/a><\/li>\n<li>dompurify: <a href=\"https:\/\/github.com\/cure53\/DOMPurify\">https:\/\/github.com\/cure53\/DOMPurify<\/a><\/li>\n<li>elkjs: <a href=\"https:\/\/github.com\/kieler\/elkjs\">https:\/\/github.com\/kieler\/elkjs<\/a><\/li>\n<li>es-toolkit: <a href=\"https:\/\/github.com\/toss\/es-toolkit\">https:\/\/github.com\/toss\/es-toolkit<\/a><\/li>\n<li>katex: <a href=\"https:\/\/github.com\/KaTeX\/KaTeX\">https:\/\/github.com\/KaTeX\/KaTeX<\/a><\/li>\n<li>khroma: <a href=\"https:\/\/github.com\/fabiospampinato\/khroma\">https:\/\/github.com\/fabiospampinato\/khroma<\/a><\/li>\n<li>marked: <a href=\"https:\/\/github.com\/markedjs\/marked\">https:\/\/github.com\/markedjs\/marked<\/a><\/li>\n<li>roughjs: <a href=\"https:\/\/github.com\/rough-stuff\/rough\">https:\/\/github.com\/rough-stuff\/rough<\/a><\/li>\n<li>stylis: <a href=\"https:\/\/github.com\/thysultan\/stylis\">https:\/\/github.com\/thysultan\/stylis<\/a><\/li>\n<li>ts-dedent: <a href=\"https:\/\/github.com\/tamino-martinius\/node-ts-dedent\">https:\/\/github.com\/tamino-martinius\/node-ts-dedent<\/a><\/li>\n<li>uuid: <a href=\"https:\/\/github.com\/uuidjs\/uuid\">https:\/\/github.com\/uuidjs\/uuid<\/a><\/li>\n<\/ul>\n\n<h4>Building from source<\/h4>\n\n<p>The compiled files are built with <a href=\"https:\/\/www.npmjs.com\/package\/@wordpress\/scripts\">@wordpress\/scripts<\/a>\n(webpack). Node.js and npm are required.<\/p>\n\n<ol>\n<li>Clone the repository or use the plugin folder:\n   git clone https:\/\/github.com\/solvebeam\/solvebeam-diagrams-with-mermaid-for-wordpress.git<\/li>\n<li>Install the dependencies (including Mermaid from npm): <code>npm install<\/code><\/li>\n<li>Build the production files: <code>npm run build<\/code><\/li>\n<\/ol>\n\n<p>This compiles <code>blocks-src\/<\/code> into <code>blocks\/<\/code>. Use <code>npm run start<\/code> to build in\ndevelopment mode and watch for changes; development builds are not minified.<\/p>\n\n<h3>Third-Party Licenses<\/h3>\n\n<p>This plugin bundles <a href=\"https:\/\/github.com\/mermaid-js\/mermaid\">Mermaid<\/a>, which is\navailable under the MIT License. The Mermaid license is available at\n<a href=\"https:\/\/github.com\/mermaid-js\/mermaid\/blob\/develop\/LICENSE\">https:\/\/github.com\/mermaid-js\/mermaid\/blob\/develop\/LICENSE<\/a>.\nThe dependencies of Mermaid listed above are available under their own open\nsource licenses, which can be found in their repositories.<\/p>\n\n<!--section=installation-->\n<ol>\n<li>Upload the plugin folder to <code>\/wp-content\/plugins\/<\/code><\/li>\n<li>Activate the plugin through the \"Plugins\" menu in WordPress<\/li>\n<\/ol>\n\n<!--section=faq-->\n<dl>\n<dt id=\"how%20do%20i%20add%20a%20diagram%3F\"><h3>How do I add a diagram?<\/h3><\/dt>\n<dd><p>Add the Mermaid block in the WordPress block editor and enter your Mermaid code\nin the Mermaid code field. The preview updates in the editor and the diagram is\nrendered on the front end.<\/p><\/dd>\n<dt id=\"which%20mermaid%20syntax%20is%20supported%3F\"><h3>Which Mermaid syntax is supported?<\/h3><\/dt>\n<dd><p>The block uses the Mermaid syntax supported by the version bundled with the\nplugin. See the <a href=\"https:\/\/mermaid.js.org\/intro\/\">Mermaid documentation<\/a> for the\navailable diagram types and syntax.<\/p><\/dd>\n<dt id=\"is%20my%20mermaid%20code%20sent%20to%20an%20external%20service%3F\"><h3>Is my Mermaid code sent to an external service?<\/h3><\/dt>\n<dd><p>No. Mermaid is bundled with the plugin and diagrams are rendered locally in the\nbrowser. The plugin does not send Mermaid code to an external rendering service.<\/p><\/dd>\n<dt id=\"does%20this%20plugin%20require%20a%20mermaid%20account%3F\"><h3>Does this plugin require a Mermaid account?<\/h3><\/dt>\n<dd><p>No. The plugin does not require an account, API key, or subscription.<\/p><\/dd>\n\n<\/dl>\n\n<!--section=changelog-->\n<h4>1.0.0<\/h4>\n\n<ul>\n<li>Initial release.<\/li>\n<\/ul>","raw_excerpt":"A plugin for rendering Mermaid diagrams and visualizations from Mermaid code.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/370385","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=370385"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/solvebeam"}],"wp:attachment":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=370385"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=370385"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=370385"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=370385"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=370385"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=370385"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}