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

fix Async rendering

Browse Source
This commit is contained in:
Sidharth Vinod
2022-11-28 16:11:24 +05:30
parent 527a3df083
commit e302ee383a
5 changed files with 50 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
docs/config/setup/modules/config.md
View File

@@ -36,7 +36,7 @@ Pushes in a directive to the configuration
#### Defined in #### Defined in
[config.ts:193](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L193) [config.ts:194](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L194)
--- ---
@@ -60,7 +60,7 @@ The currentConfig
#### Defined in #### Defined in
[config.ts:138](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L138) [config.ts:139](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L139)
--- ---
@@ -84,7 +84,7 @@ The siteConfig
#### Defined in #### Defined in
[config.ts:97](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L97) [config.ts:98](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L98)
--- ---
@@ -118,7 +118,7 @@ The siteConfig
#### Defined in #### Defined in
[config.ts:225](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L225) [config.ts:226](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L226)
--- ---
@@ -147,7 +147,7 @@ options in-place
#### Defined in #### Defined in
[config.ts:153](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L153) [config.ts:154](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L154)
--- ---
@@ -167,7 +167,7 @@ options in-place
#### Defined in #### Defined in
[config.ts:76](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L76) [config.ts:77](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L77)
--- ---
@@ -199,7 +199,7 @@ The currentConfig merged with the sanitized conf
#### Defined in #### Defined in
[config.ts:114](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L114) [config.ts:115](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L115)
--- ---
@@ -273,4 +273,4 @@ The new siteConfig
#### Defined in #### Defined in
[config.ts:80](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L80) [config.ts:81](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L81)

36
docs/syntax/classDiagram.md
View File

@@ -267,16 +267,16 @@ 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
@@ -372,14 +372,14 @@ 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:

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

@@ -34,7 +34,7 @@ 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 ` ${key} return `
<Suspense> <Suspense>
<template #default> <template #default>
<Mermaid id="mermaid-${key}" graph="${encodeURIComponent(token.content)}"></Mermaid> <Mermaid id="mermaid-${key}" graph="${encodeURIComponent(token.content)}"></Mermaid>

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

@@ -3,13 +3,8 @@
</template> </template>
<script setup> <script setup>
import { onMounted, onUnmounted, ref, toRaw } from 'vue'; import { onMounted, onUnmounted, ref } from 'vue';
import mermaid from 'mermaid'; import { render } from './mermaid';
import mindmap from '@mermaid-js/mermaid-mindmap';
import { useData } from 'vitepress';
try {
await mermaid.registerExternalDiagrams([mindmap]);
} catch (e) {}
const props = defineProps({ const props = defineProps({
graph: { graph: {
@@ -25,10 +20,7 @@ const props = defineProps({
const svg = ref(null); const svg = ref(null);
let mut = null; let mut = null;
const { page } = useData(); const mermaidConfig = {
const { frontmatter } = toRaw(page.value);
const mermaidPageTheme = frontmatter.mermaidTheme || '';
let mermaidConfig = {
securityLevel: 'loose', securityLevel: 'loose',
startOnLoad: false, startOnLoad: false,
}; };
@@ -65,14 +57,10 @@ onUnmounted(() => mut.disconnect());
const renderChart = async () => { 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'); const hasDarkClass = document.documentElement.classList.contains('dark');
mermaidConfig.theme = mermaidPageTheme || mermaidConfig.theme; mermaidConfig.theme = hasDarkClass ? 'dark' : 'default';
if (hasDarkClass) mermaidConfig.theme = 'dark';
mermaid.initialize({ console.log({ mermaidConfig });
...mermaidConfig, svg.value = await render(props.id, decodeURIComponent(props.graph), mermaidConfig);
theme: hasDarkClass ? 'dark' : mermaidPageTheme,
});
svg.value = await mermaid.renderAsync(props.id, decodeURIComponent(props.graph));
}; };
</script> </script>

16
packages/mermaid/src/docs/.vitepress/theme/mermaid.ts Normal file
View File

@@ -0,0 +1,16 @@
import mermaid, { type MermaidConfig } from 'mermaid';
import mindmap from '@mermaid-js/mermaid-mindmap';
try {
await mermaid.registerExternalDiagrams([mindmap]);
} catch (e) {
console.error(e);
}
export const render = async (id: string, code: string, config: MermaidConfig): Promise<string> => {
mermaid.initialize(config);
// console.log('rendering', id, code);
const svg = await mermaid.renderAsync(id, code);
// console.log('rendered', id, code);
return svg;
};