讓部落格可以顯示markdown的流程圖
code如下
mermaid graph TD; A-->B; A-->C; B-->D; C-->D;
修改CodeBlock
function CodeBlock({ language, node, inline, className, children, ...props }: any) { const { onCopy, value, setValue, hasCopied } = useClipboard(children); const match = /language-(\w+)/.exec(className || ''); if (inline || !match) { //只有一行的code return (<Flex mb={2}> <Code {...props} colorScheme="blackAlpha"> {children} </Code> <Button ml={2} onClick={onCopy} colorScheme='blue' variant='outline'>{hasCopied ? "Copied!" : "Copy"}</Button> </Flex>) } else if (match![1] ==='mermaid') { return (<Box className='mermaid'>{children}</Box>) } else { return ( <Flex mb={2}> <SyntaxHighlighter style={darcula as { [key: string]: CSSProperties }} language={match![1] } PreTag="div" {...props} > {String(children).replace(/\n$/, '')} </SyntaxHighlighter> <Button ml={2} onClick={onCopy} colorScheme='blue' variant='outline'>{hasCopied ? "Copied!" : "Copy"}</Button> </Flex> ) } }
render新增
<Script id="mermaidjs" type="module" strategy="afterInteractive" dangerouslySetInnerHTML={{ __html: ` import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs'; mermaid.initialize({ startOnLoad: true }); mermaid.contentLoaded(); `, }} />
成功
以下圖是使用 mermaidjs渲染出來的
graph TD; A-->B; A-->C; B-->D; C-->D;
- https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/
- https://nextjs.org/docs/pages/api-reference/components/script
- http://mermaid.js.org/