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

Merge remote-tracking branch 'origin/develop' into pr/BD103/3890

Browse Source 
* origin/develop:
  chore: Update cspell
  Update docs
  fix: docs build command
  chore: Rebuild docs if linting fails
  chore: Format Mermaid.vue
  Made mermaidConfig a local variable so that it cannot be shared cross rendering.
  Fixed an issue that diagrams disappear from docs pages when switching themes or reloading pages
  Fixed the issue that theme-switch does not work on docs.
  Get base sha from PR
  Run doc lint only if files changed
  Run doc lint only if files changed
  Run doc lint only if files changed
  split lint docs action
  split lint docs action
  fix: File location
  fix(docs): Test auto commit
  fix(docs): Test auto commit
  fix(docs): Test auto commit
  chore: Update docs path
  chore: Auto build docs if only src/docs is changed
This commit is contained in:
Sidharth Vinod
2022-12-07 11:50:45 +05:30
parent 49ca2e3588 9b547edbe9
commit f2a85eafac
5 changed files with 33 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -20,11 +20,6 @@ const props = defineProps({
const svg = ref(null);
let mut = null;
const mermaidConfig = {
securityLevel: 'loose',
startOnLoad: false,
};
onMounted(async () => {
mut = new MutationObserver(() => renderChart());
mut.observe(document.documentElement, { attributes: true });
@@ -58,9 +53,20 @@ onUnmounted(() => mut.disconnect());
const renderChart = async () => {
console.log('rendering chart' + props.id + props.graph);
const hasDarkClass = document.documentElement.classList.contains('dark');
mermaidConfig.theme = hasDarkClass ? 'dark' : 'default';
const mermaidConfig = {
securityLevel: 'loose',
startOnLoad: false,
theme: hasDarkClass ? 'dark' : 'default',
};
console.log({ mermaidConfig });
svg.value = await render(props.id, decodeURIComponent(props.graph), mermaidConfig);
let svgCode = await render(props.id, decodeURIComponent(props.graph), mermaidConfig);
// This is a hack to force v-html to re-render, otherwise the diagram disappears
// when **switching themes** or **reloading the page**.
// The cause is that the diagram is deleted during rendering (out of Vue's knowledge).
// Because svgCode does NOT change, v-html does not re-render.
// This is not required for all diagrams, but it is required for c4c, mindmap and zenuml.
const salt = Math.random().toString(36).substring(7);
svg.value = `${svgCode} <span style="display: none">${salt}</span>`;
};
</script>

3
packages/mermaid/src/docs/syntax/classDiagram.md
View File

@@ -1,7 +1,8 @@
# Class diagrams
> "In software engineering, a class diagram in the Unified Modeling Language (UML) is a type of static structure diagram that describes the structure of a system by showing the system's classes, their attributes, operations (or methods), and the relationships among objects."
> Wikipedia
>
> -Wikipedia
The class diagram is the main building block of object-oriented modeling. It is used for general conceptual modeling of the structure of the application, and for detailed modeling to translate the models into programming code. Class diagrams can also be used for data modeling. The classes in a class diagram represent both the main elements, interactions in the application, and the classes to be programmed.