SolveBeam Diagrams with Mermaid

SolveBeam · GitHub

SolveBeam Diagrams with Mermaid adds a block for creating diagrams and visualizations with

Mermaid. Enter Mermaid syntax in the block editor and

the diagram is rendered in the editor and on the front end.

Mermaid is rendered locally in the browser. This plugin does not require an

external account or service to render diagrams.

Source Code

This plugin ships compiled (minified) JavaScript and CSS in the blocks/

folder. The human-readable source code of everything in that folder is

publicly available:

• Plugin source code (block editor and front-end scripts, styles and build

com/solvebeam/solvebeam-diagrams-with-mermaid-for-wordpress.

The same source is also included in this plugin in the blocks-src/ folder,

json.

• Mermaid: https://github.com/mermaid-js/mermaid.

What is in the blocks/ folder?

• blocks/mermaid-diagram/ – compiled from blocks-src/mermaid-diagram/

json ),

including the core of the Mermaid library.

• blocks/*.js (numbered files such as blocks/8726.js ) – chunks that webpack

splits off from Mermaid and are loaded on demand for the different diagram

types. These files contain only code from Mermaid and its npm dependencies,

not from this plugin.

The Mermaid dependencies bundled in these chunks, with their public source code:

• @mermaid-js/parser: https://github.com/mermaid-js/mermaid/tree/develop/packages/parser

• @braintree/sanitize-url: https://github.com/braintree/sanitize-url

• @iconify/utils: https://github.com/iconify/iconify

• @upsetjs/venn.js: https://github.com/upsetjs/venn.js

• chevrotain: https://github.com/Chevrotain/chevrotain

• cytoscape: https://github.com/cytoscape/cytoscape.js

• cytoscape-cose-bilkent: https://github.com/cytoscape/cytoscape.js-cose-bilkent

• cytoscape-fcose: https://github.com/iVis-at-Bilkent/cytoscape.js-fcose

• d3: https://github.com/d3/d3

• d3-sankey: https://github.com/d3/d3-sankey

• dagre-d3-es: https://github.com/tbo47/dagre-es

• dayjs: https://github.com/iamkun/dayjs

• dompurify: https://github.com/cure53/DOMPurify

• elkjs: https://github.com/kieler/elkjs

• es-toolkit: https://github.com/toss/es-toolkit

• katex: https://github.com/KaTeX/KaTeX

• khroma: https://github.com/fabiospampinato/khroma

• marked: https://github.com/markedjs/marked

• roughjs: https://github.com/rough-stuff/rough

• stylis: https://github.com/thysultan/stylis

• ts-dedent: https://github.com/tamino-martinius/node-ts-dedent

• uuid: https://github.com/uuidjs/uuid

Building from source

The compiled files are built with @wordpress/scripts

(webpack). js and npm are required.

• Clone the repository or use the plugin folder:

git

• Install the dependencies (including Mermaid from npm): npm install

• Build the production files: npm run build

This compiles blocks-src/ into blocks/. Use npm run start to build in

development mode and watch for changes; development builds are not minified.

Third-Party Licenses

This plugin bundles Mermaid, which is

available under the MIT License. The Mermaid license is available at

com/mermaid-js/mermaid/blob/develop/LICENSE.

The dependencies of Mermaid listed above are available under their own open

source licenses, which can be found in their repositories.