diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml index 8ba06989d..f1ab5726b 100644 --- a/.github/workflows/lint.yml +++ b/.github/workflows/lint.yml @@ -9,7 +9,7 @@ on: - ready_for_review permissions: - contents: read + contents: write jobs: lint: @@ -39,5 +39,19 @@ jobs: run: pnpm run lint - name: Verify Docs + id: verifyDocs working-directory: ./packages/mermaid + continue-on-error: true run: pnpm run docs:verify + + - name: Rebuild Docs + if: ${{ steps.verifyDocs.outcome == 'failure' && github.event_name == 'push' }} + working-directory: ./packages/mermaid + run: pnpm run docs:build + + - name: Commit changes + uses: EndBug/add-and-commit@v9 + if: ${{ steps.verifyDocs.outcome == 'failure' && github.event_name == 'push' }} + with: + message: 'Update docs' + add: 'docs/*' diff --git a/cSpell.json b/cSpell.json index 64187e1ca..3ddf84102 100644 --- a/cSpell.json +++ b/cSpell.json @@ -64,6 +64,7 @@ "phpbb", "plantuml", "playfair", + "pnpm", "podlite", "ranksep", "redmine", diff --git a/docs/syntax/classDiagram.md b/docs/syntax/classDiagram.md index 5870d0743..b6d48c9de 100644 --- a/docs/syntax/classDiagram.md +++ b/docs/syntax/classDiagram.md @@ -7,7 +7,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. diff --git a/packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue b/packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue index 9ae9c9f3b..85c13393c 100644 --- a/packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue +++ b/packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue @@ -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} ${salt}`; }; diff --git a/packages/mermaid/src/docs/syntax/classDiagram.md b/packages/mermaid/src/docs/syntax/classDiagram.md index e9b918529..a0f4e5611 100644 --- a/packages/mermaid/src/docs/syntax/classDiagram.md +++ b/packages/mermaid/src/docs/syntax/classDiagram.md @@ -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.