From 3926594c6a6d5741f31081aaaaac3189ccdaac1b Mon Sep 17 00:00:00 2001 From: Steph <35910788+huynhicode@users.noreply.github.com> Date: Thu, 7 Mar 2024 13:02:16 -0800 Subject: [PATCH 1/6] add latest blog posts --- docs/news/blog.md | 12 ++++++++++++ packages/mermaid/src/docs/news/blog.md | 12 ++++++++++++ 2 files changed, 24 insertions(+) diff --git a/docs/news/blog.md b/docs/news/blog.md index b0ebf5244d..b40cac9393 100644 --- a/docs/news/blog.md +++ b/docs/news/blog.md @@ -6,6 +6,18 @@ # Blog +## [Mermaid Chart GPT Is Now Available In the GPT Store!](https://www.mermaidchart.com/blog/posts/mermaid-chart-gpt-is-now-available-in-the-gpt-store/) + +7 March 2024 · 3 mins + +Mermaid Chart GPT is Now Available In the GPT Store! + +## [How to Make a Flowchart with Mermaid Chart](https://www.mermaidchart.com/blog/posts/how-to-make-flowcharts-with-mermaid-chart/) + +30 January 2024 · 6 mins + +Learn how to make a flowchart with Mermaid Chart, the leading text-to-diagram platform for both developers and non-developers. + ## [How one data scientist uses Mermaid Chart to quickly and easily build flowcharts](https://www.mermaidchart.com/blog/posts/customer-spotlight-ari-tal/) 23 January 2024 · 4 mins diff --git a/packages/mermaid/src/docs/news/blog.md b/packages/mermaid/src/docs/news/blog.md index c986e1e58d..fd51b2354c 100644 --- a/packages/mermaid/src/docs/news/blog.md +++ b/packages/mermaid/src/docs/news/blog.md @@ -1,5 +1,17 @@ # Blog +## [Mermaid Chart GPT Is Now Available In the GPT Store!](https://www.mermaidchart.com/blog/posts/mermaid-chart-gpt-is-now-available-in-the-gpt-store/) + +7 March 2024 · 3 mins + +Mermaid Chart GPT is Now Available In the GPT Store! + +## [How to Make a Flowchart with Mermaid Chart](https://www.mermaidchart.com/blog/posts/how-to-make-flowcharts-with-mermaid-chart/) + +30 January 2024 · 6 mins + +Learn how to make a flowchart with Mermaid Chart, the leading text-to-diagram platform for both developers and non-developers. + ## [How one data scientist uses Mermaid Chart to quickly and easily build flowcharts](https://www.mermaidchart.com/blog/posts/customer-spotlight-ari-tal/) 23 January 2024 · 4 mins From 244b161032ce3ee997cfdace4ee152d472e2e82f Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Mon, 11 Mar 2024 14:56:18 +0530 Subject: [PATCH 2/6] Add langium --- .cspell/libraries.txt | 1 + 1 file changed, 1 insertion(+) diff --git a/.cspell/libraries.txt b/.cspell/libraries.txt index d1ab976625..9d29261868 100644 --- a/.cspell/libraries.txt +++ b/.cspell/libraries.txt @@ -36,6 +36,7 @@ jsfiddle jsonschema katex khroma +langium mathml matplotlib mdbook From 32ca0b97fc0c08bf1f13b215b624cacc8aaf1eca Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Mon, 11 Mar 2024 14:07:41 +0530 Subject: [PATCH 3/6] feat: Make the examples interactive in the documentation site. Ctrl/Cmd + Enter and a run button is added. The feature was first implemented in https://github.com/mermaid-js/mermaid/pull/5330. This is a simplified version without introducing additional dependencies. Co-authored-by: Anton --- .../docs/.vitepress/mermaid-markdown-all.ts | 15 +---- .../src/docs/.vitepress/theme/Mermaid.vue | 64 +++++++++++++++++-- 2 files changed, 60 insertions(+), 19 deletions(-) diff --git a/packages/mermaid/src/docs/.vitepress/mermaid-markdown-all.ts b/packages/mermaid/src/docs/.vitepress/mermaid-markdown-all.ts index 30f044d988..643ce395e9 100644 --- a/packages/mermaid/src/docs/.vitepress/mermaid-markdown-all.ts +++ b/packages/mermaid/src/docs/.vitepress/mermaid-markdown-all.ts @@ -18,20 +18,7 @@ const MermaidExample = async (md: MarkdownRenderer) => { 'Missing MarkdownIt highlight function (should be automatically created by vitepress' ); } - - // doing ```mermaid-example {line-numbers=5 highlight=14-17} is not supported - const langAttrs = ''; - return ` -
Code:
-
- - mermaid - ${ - // html is pre-escaped by the highlight function - // (it also adds `v-pre` to ignore Vue template syntax) - md.options.highlight(token.content, 'mermaid', langAttrs) - } -
`; + return ''; } else if (token.info.trim() === 'mermaid') { const key = index; return ` diff --git a/packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue b/packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue index 5012d30679..ee99bc8841 100644 --- a/packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue +++ b/packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue @@ -1,4 +1,14 @@ @@ -18,15 +28,29 @@ const props = defineProps({ }); const svg = ref(''); +const code = ref(decodeURIComponent(props.graph)); +const ctrlSymbol = ref(navigator.platform.includes('Mac') ? '⌘' : 'Ctrl'); +const editableContent = ref(null); + let mut = null; +const updateCode = (event) => { + code.value = event.target.innerText; +}; + onMounted(async () => { mut = new MutationObserver(() => renderChart()); mut.observe(document.documentElement, { attributes: true }); + + // Set the initial value of the contenteditable element + // We cannot bind using `{{ code }}` because it will rerender the whole component + // when the value changes, shifting the cursor when enter is used + editableContent.value.textContent = code.value; + await renderChart(); //refresh images on first render - const hasImages = //.exec(decodeURIComponent(props.graph))?.length > 0; + const hasImages = //.exec(code.value)?.length > 0; if (hasImages) setTimeout(() => { let imgElements = document.getElementsByTagName('img'); @@ -51,16 +75,14 @@ onMounted(async () => { onUnmounted(() => mut.disconnect()); const renderChart = async () => { - console.log('rendering chart' + props.id + props.graph); + console.log('rendering chart' + props.id + code.value); const hasDarkClass = document.documentElement.classList.contains('dark'); const mermaidConfig = { securityLevel: 'loose', startOnLoad: false, theme: hasDarkClass ? 'dark' : 'default', }; - - console.log({ mermaidConfig }); - let svgCode = await render(props.id, decodeURIComponent(props.graph), mermaidConfig); + let svgCode = await render(props.id, code.value, 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). @@ -70,3 +92,35 @@ const renderChart = async () => { svg.value = `${svgCode} ${salt}`; }; + + From 6422175ef24eb4435967e7bac063c09123e0ced6 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Mon, 11 Mar 2024 14:52:08 +0530 Subject: [PATCH 4/6] Change run symbol --- packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue b/packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue index ee99bc8841..59a5bbba97 100644 --- a/packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue +++ b/packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue @@ -6,7 +6,7 @@
{{ ctrlSymbol }} + Enter| - +
From 08a7f662ea305c19efb950b893933f6b0f0350f9 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Mon, 11 Mar 2024 17:03:26 +0530 Subject: [PATCH 5/6] Address review comments Support ctrl+enter Support mermaid-nocode Use `contenteditable="plaintext-only"` Co-authored-by: Alois Klink --- packages/mermaid/scripts/docs.mts | 5 +-- .../docs/.vitepress/mermaid-markdown-all.ts | 32 ++++++------------- .../src/docs/.vitepress/theme/Mermaid.vue | 32 ++++++++++++------- 3 files changed, 32 insertions(+), 37 deletions(-) diff --git a/packages/mermaid/scripts/docs.mts b/packages/mermaid/scripts/docs.mts index 42e299c54f..31d2a7c8fd 100644 --- a/packages/mermaid/scripts/docs.mts +++ b/packages/mermaid/scripts/docs.mts @@ -252,11 +252,12 @@ export function transformMarkdownAst({ node.lang = MERMAID_KEYWORD; return [node]; } else if (MERMAID_EXAMPLE_KEYWORDS.includes(node.lang)) { - // Return 2 nodes: + // If Vitepress, return only the original node with the language now set to 'mermaid-example' (will be rendered using custom renderer) + // Else Return 2 nodes: // 1. the original node with the language now set to 'mermaid-example' (will be rendered as code), and // 2. a copy of the original node with the language set to 'mermaid' (will be rendered as a diagram) node.lang = MERMAID_CODE_ONLY_KEYWORD; - return [node, Object.assign({}, node, { lang: MERMAID_KEYWORD })]; + return vitepress ? [node] : [node, Object.assign({}, node, { lang: MERMAID_KEYWORD })]; } // Transform these blocks into block quotes. diff --git a/packages/mermaid/src/docs/.vitepress/mermaid-markdown-all.ts b/packages/mermaid/src/docs/.vitepress/mermaid-markdown-all.ts index 643ce395e9..64a069b4c2 100644 --- a/packages/mermaid/src/docs/.vitepress/mermaid-markdown-all.ts +++ b/packages/mermaid/src/docs/.vitepress/mermaid-markdown-all.ts @@ -9,22 +9,15 @@ const MermaidExample = async (md: MarkdownRenderer) => { md.renderer.rules.fence = (tokens, index, options, env, slf) => { const token = tokens[index]; - - if (token.info.trim() === 'mermaid-example') { - if (!md.options.highlight) { - // this function is always created by vitepress, but we need to check it - // anyway to make TypeScript happy - throw new Error( - 'Missing MarkdownIt highlight function (should be automatically created by vitepress' - ); - } - return ''; - } else if (token.info.trim() === 'mermaid') { + const language = token.info.trim(); + if (language.startsWith('mermaid')) { const key = index; return ` `; - } - if (token.info.trim() === 'warning') { + } else if (language === 'warning') { return `

WARNING

${token.content}}

`; - } - - if (token.info.trim() === 'note') { + } else if (language === 'note') { return `

NOTE

${token.content}}

`; - } - - if (token.info.trim() === 'regexp') { + } else if (language === 'regexp') { // shiki doesn't yet support regexp code blocks, but the javascript // one still makes RegExes look good token.info = 'javascript'; // use trimEnd to move trailing `\n` outside if the JavaScript regex `/` block token.content = `/${token.content.trimEnd()}/\n`; return defaultRenderer(tokens, index, options, env, slf); - } - - if (token.info.trim() === 'jison') { + } else if (language === 'jison') { return `
jison diff --git a/packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue b/packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue index 59a5bbba97..a4fb9bf049 100644 --- a/packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue +++ b/packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue @@ -1,12 +1,14 @@