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

Revert "sync"

Browse Source 
This reverts commit a88a467d45.
This commit is contained in:
Sidharth Vinod
2022-11-28 15:44:19 +05:30
parent f425a02cf9
commit 527a3df083
3 changed files with 35 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
docs/syntax/classDiagram.md
View File

@@ -268,15 +268,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
@@ -373,13 +373,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

@@ -34,9 +34,16 @@ const MermaidExample = async (md: MarkdownRenderer) => {
</div>`; </div>`;
} else if (token.info.trim() === 'mermaid') { } else if (token.info.trim() === 'mermaid') {
const key = index; const key = index;
return ` return ` ${key}
${key} <Suspense>
<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,7 +5,11 @@
<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: {
@@ -32,7 +36,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 });
renderChart(); await 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;
@@ -59,7 +63,7 @@ onMounted(async () => {
onUnmounted(() => mut.disconnect()); onUnmounted(() => mut.disconnect());
const renderChart = () => { const renderChart = async () => {
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;
@@ -69,6 +73,6 @@ const renderChart = () => {
...mermaidConfig, ...mermaidConfig,
theme: hasDarkClass ? 'dark' : mermaidPageTheme, theme: hasDarkClass ? 'dark' : mermaidPageTheme,
}); });
svg.value = mermaid.render(props.id, decodeURIComponent(props.graph)); svg.value = await mermaid.renderAsync(props.id, decodeURIComponent(props.graph));
}; };
</script> </script>