marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-07 09:36:41 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: add mermaidAPI.registerDiagram()

Browse Source 
Exposes the registerDiagram() function publically as
`mermaid.mermaidAPI.registerDiagram` so that users can add their
own diagrams at bundle-time.

This is instead of using the lazyLoadedDiagrams config setting.
This commit is contained in:
Alois Klink
2022-10-23 15:45:55 +01:00
parent 89d3d297b7
commit f41e34e61a
6 changed files with 100 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
cypress/integration/other/external-diagrams.spec.js Normal file
View File

@@ -0,0 +1,13 @@
describe('mermaid', () => {
describe('registerDiagram', () => {
it('should work on @mermaid-js/mermaid-mindmap and mermaid-example-diagram', () => {
const url = 'http://localhost:9000/external-diagrams-mindmap.html';
cy.visit(url);
cy.get('svg', {
// may be a bit slower than normal, since vite might need to re-compile mermaid/mermaid-mindmap/mermaid-example-diagram
timeout: 10000,
}).matchImageSnapshot();
});
});
});

58
cypress/platform/external-diagrams-mindmap.html Normal file
View File

@@ -0,0 +1,58 @@
<html>
<body>
<h1>Should correctly load a third-party diagram using registerDiagram</h1>
<pre id="diagram" class="mermaid">
mindmap
root
A
B
C
D
E
A2
B2
C2
D2
E2
child1((Circle))
grandchild 1
grandchild 2
child2(Round rectangle)
grandchild 3
grandchild 4
child3[Square]
grandchild 5
::icon(mdi mdi-fire)
gc6((grand<br/>child 6))
::icon(mdi mdi-fire)
gc7((grand<br/>grand<br/>child 8))
</pre>
<pre id="diagram" class="mermaid2">
example-diagram
</pre>
<!-- <div id="cy"></div> -->
<!-- <script src="http://localhost:9000/packages/mermaid-mindmap/dist/mermaid-mindmap-detector.js"></script> -->
<!-- <script src="./mermaid-example-diagram-detector.js"></script> -->
<!-- <script src="//cdn.jsdelivr.net/npm/mermaid@9.1.7/dist/mermaid.min.js"></script> -->
<!-- <script type="module" src="./external-diagrams-mindmap.mjs" /> -->
<script type="module">
import {
diagram as mindmap,
detector as mindmapDetector,
id as mindmapId,
} from '../../packages/mermaid-mindmap/src/diagram-definition';
import {
diagram as exampleDiagram,
detector as exampleDiagramDetector,
id as exampleDiagramId,
} from '../../packages/mermaid-example-diagram/src/diagram-definition';
import mermaid from '../../packages/mermaid/src/mermaid';
mermaid.mermaidAPI.registerDiagram(mindmapId, mindmap, mindmapDetector);
mermaid.mermaidAPI.registerDiagram(exampleDiagramId, exampleDiagram, exampleDiagramDetector);
await mermaid.initialize({ logLevel: 0 });
await mermaid.initThrowsErrors();
</script>
</body>
</html>

2
packages/mermaid-example-diagram/src/diagram-definition.ts
View File

@@ -12,3 +12,5 @@ export const diagram = {
styles, styles,
injectUtils, injectUtils,
}; };
export { detector, id } from './detector';

2
packages/mermaid-mindmap/src/diagram-definition.ts
View File

@@ -12,3 +12,5 @@ export const diagram = {
styles: mindmapStyles, styles: mindmapStyles,
injectUtils, injectUtils,
}; };
export { detector, id } from './detector';

24
packages/mermaid/src/diagram-api/diagramAPI.ts
View File

@@ -23,10 +23,28 @@ export interface Detectors {
} }
/** /**
* Registers the given diagram with Mermaid.
* *
* @param id * Can be used for third-party custom diagrams.
* @param diagram *
* @param detector * For third-party diagrams that are rarely used, we recommend instead setting
* the `lazyLoadedDiagrams` param in the Mermaid config, as that will instead
* only load the diagram when needed.
*
* @param id - A unique ID for the given diagram.
* @param diagram - The diagram definition.
* @param detector - Function that returns `true` if a given mermaid text is this diagram definition.
*
* @example How to add `@mermaid-js/mermaid-mindmap` to mermaid
*
* ```js
* import {
* diagram as mindmap, detector as mindmapDetector, id as mindmapId
* } from "@mermaid-js/mermaid-mindmap";
* import mermaid from "mermaid";
*
* mermaid.mermaidAPI.registerDiagram(mindmapId, mindmap, mindmapDetector);
* ```
*/ */
export const registerDiagram = ( export const registerDiagram = (
id: string, id: string,

4
packages/mermaid/src/mermaidAPI.ts
View File

@@ -18,6 +18,7 @@ import { compile, serialize, stringify } from 'stylis';
import pkg from '../package.json'; import pkg from '../package.json';
import * as configApi from './config'; import * as configApi from './config';
import { addDiagrams } from './diagram-api/diagram-orchestration'; import { addDiagrams } from './diagram-api/diagram-orchestration';
import { registerDiagram } from './diagram-api/diagramAPI';
import classDb from './diagrams/class/classDb'; import classDb from './diagrams/class/classDb';
import flowDb from './diagrams/flowchart/flowDb'; import flowDb from './diagrams/flowchart/flowDb';
import flowRenderer from './diagrams/flowchart/flowRenderer'; import flowRenderer from './diagrams/flowchart/flowRenderer';
@@ -480,11 +481,14 @@ async function initialize(options: MermaidConfig) {
addDiagrams(); addDiagrams();
} }
export { registerDiagram };
export const mermaidAPI = Object.freeze({ export const mermaidAPI = Object.freeze({
render, render,
parse, parse,
parseDirective, parseDirective,
initialize, initialize,
registerDiagram,
getConfig: configApi.getConfig, getConfig: configApi.getConfig,
setConfig: configApi.setConfig, setConfig: configApi.setConfig,
getSiteConfig: configApi.getSiteConfig, getSiteConfig: configApi.getSiteConfig,