外掛標籤
開發者團隊
② 後台搜尋「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
configuration): https://github.com/solvebeam/solvebeam-diagrams-with-mermaid-for-wordpress.
The same source is also included in this plugin in the blocks-src/ folder,
together with package.json.
Mermaid: https://github.com/mermaid-js/mermaid.
What is in the blocks/ folder?
blocks/mermaid-diagram/ – compiled from blocks-src/mermaid-diagram/
(index.js, view.js, editor.css, style.css and block.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). Node.js and npm are required.
Clone the repository or use the plugin folder:
git clone https://github.com/solvebeam/solvebeam-diagrams-with-mermaid-for-wordpress.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
https://github.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.
