Merge branch 'feat/3701-expose-registerDiagram' into sidv/fixLL

* feat/3701-expose-registerDiagram:
  feat: add `mermaidAPI.registerDiagram()`
  refactor(mermaid): remove registerDiagram cb func
  fix(mermaid): fix DiagramDefinition types
This commit is contained in:
Sidharth Vinod
2022-11-08 13:50:54 +05:30
8 changed files with 115 additions and 13 deletions

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();
});
});
});

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>