marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-11-14 01:34:19 +01:00
Code Issues Packages Projects Releases Wiki Activity

sync

Browse Source
This commit is contained in:
Sidharth Vinod
2022-11-14 22:14:27 +05:30
parent beab2278d8
commit a88a467d45
3 changed files with 24 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
docs/syntax/classDiagram.md
View File

@@ -256,15 +256,15 @@ A relationship is a general term covering the specific types of logical connecti
There are eight different types of relations defined for classes under UML which are currently supported: There are eight different types of relations defined for classes under UML which are currently supported:
| Type | Description | | Type | Description |
| ---- | ------------- | ----------- | | ------- | ------------- |
| < | -- | Inheritance | | `<\|--` | Inheritance |
| \*-- | Composition | | `\*--` | Composition |
| o-- | Aggregation | | `o--` | Aggregation |
| --> | Association | | `-->` | Association |
| -- | Link (Solid) | | `--` | Link (Solid) |
| ..> | Dependency | | `..>` | Dependency |
| .. | > | Realization | | `..\|>` | Realization |
| .. | Link (Dashed) | | `..` | Link (Dashed) |
```mermaid-example ```mermaid-example
classDiagram classDiagram
@@ -361,13 +361,13 @@ Here is the syntax:
Where `Relation Type` can be one of: Where `Relation Type` can be one of:
| Type | Description | | Type | Description |
| ---- | ----------- | ----------- | | ----- | ----------- |
| < | | Inheritance | | `<\|` | Inheritance |
| \* | Composition | | `\*` | Composition |
| o | Aggregation | | `o` | Aggregation |
| > | Association | | `>` | Association |
| < | Association | | `<` | Association |
| | > | Realization | | `\|>` | Realization |
And `Link` can be one of: And `Link` can be one of:

11
packages/mermaid/src/docs/.vitepress/mermaid-markdown-all.ts
View File

@@ -31,16 +31,9 @@ ${highlight}
</div>`; </div>`;
} else if (token.info.trim() === 'mermaid') { } else if (token.info.trim() === 'mermaid') {
const key = index; const key = index;
return ` ${key} return `
<Suspense> ${key}
<template #default>
<Mermaid id="mermaid-${key}" graph="${encodeURIComponent(token.content)}"></Mermaid> <Mermaid id="mermaid-${key}" graph="${encodeURIComponent(token.content)}"></Mermaid>
</template>
<!-- loading state via #fallback slot -->
<template #fallback>
Loading...
</template>
</Suspense>
`; `;
} }
if (token.info.trim() === 'warning') { if (token.info.trim() === 'warning') {

10
packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue
View File

@@ -5,11 +5,7 @@
<script setup> <script setup>
import { onMounted, onUnmounted, ref, toRaw } from 'vue'; import { onMounted, onUnmounted, ref, toRaw } from 'vue';
import mermaid from 'mermaid'; import mermaid from 'mermaid';
import mindmap from '@mermaid-js/mermaid-mindmap';
import { useData } from 'vitepress'; import { useData } from 'vitepress';
try {
await mermaid.registerExternalDiagrams([mindmap]);
} catch (e) {}
const props = defineProps({ const props = defineProps({
graph: { graph: {
@@ -36,7 +32,7 @@ let mermaidConfig = {
onMounted(async () => { onMounted(async () => {
mut = new MutationObserver(() => renderChart()); mut = new MutationObserver(() => renderChart());
mut.observe(document.documentElement, { attributes: true }); mut.observe(document.documentElement, { attributes: true });
await renderChart(); renderChart();
//refresh images on first render //refresh images on first render
const hasImages = /<img([\w\W]+?)>/.exec(decodeURIComponent(props.graph))?.length > 0; const hasImages = /<img([\w\W]+?)>/.exec(decodeURIComponent(props.graph))?.length > 0;
@@ -63,7 +59,7 @@ onMounted(async () => {
onUnmounted(() => mut.disconnect()); onUnmounted(() => mut.disconnect());
const renderChart = async () => { const renderChart = () => {
console.log('rendering chart' + props.id + props.graph); console.log('rendering chart' + props.id + props.graph);
let hasDarkClass = document.documentElement.classList.contains('dark'); let hasDarkClass = document.documentElement.classList.contains('dark');
mermaidConfig.theme = mermaidPageTheme || mermaidConfig.theme; mermaidConfig.theme = mermaidPageTheme || mermaidConfig.theme;
@@ -73,6 +69,6 @@ const renderChart = async () => {
...mermaidConfig, ...mermaidConfig,
theme: hasDarkClass ? 'dark' : mermaidPageTheme, theme: hasDarkClass ? 'dark' : mermaidPageTheme,
}); });
svg.value = await mermaid.renderAsync(props.id, decodeURIComponent(props.graph)); svg.value = mermaid.render(props.id, decodeURIComponent(props.graph));
}; };
</script> </script>