diff --git a/docs/news/blog.md b/docs/news/blog.md index b0ebf5244..b40cac939 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/scripts/docs.mts b/packages/mermaid/scripts/docs.mts index 42e299c54..31d2a7c8f 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 30f044d98..64a069b4c 100644 --- a/packages/mermaid/src/docs/.vitepress/mermaid-markdown-all.ts +++ b/packages/mermaid/src/docs/.vitepress/mermaid-markdown-all.ts @@ -9,35 +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' - ); - } - - // 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) - } -
`; - } 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 5012d3067..b98c49348 100644 --- a/packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue +++ b/packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue @@ -1,4 +1,16 @@ @@ -15,18 +27,40 @@ const props = defineProps({ type: String, required: true, }, + showCode: { + type: Boolean, + default: true, + }, }); const svg = ref(''); +const code = ref(decodeURIComponent(props.graph)); +const ctrlSymbol = ref(navigator.platform.includes('Mac') ? '⌘' : 'Ctrl'); +const editableContent = ref(null); +const isFirefox = navigator.userAgent.toLowerCase().includes('firefox'); +const contentEditable = ref(isFirefox ? 'true' : 'plaintext-only'); + let mut = null; +const updateCode = (event) => { + code.value = event.target.innerText; +}; + onMounted(async () => { mut = new MutationObserver(() => renderChart()); mut.observe(document.documentElement, { attributes: true }); + + if (editableContent.value) { + // 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 +85,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 +102,35 @@ const renderChart = async () => { svg.value = `${svgCode} ${salt}`; }; + + diff --git a/packages/mermaid/src/docs/news/blog.md b/packages/mermaid/src/docs/news/blog.md index c986e1e58..fd51b2354 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