DEVDEV

mermaidjsとReact Markdownの統合

作成日
2022-05-06
更新日
2022-05-06

mermaid Install

bash
yarn add -D mermaid @types/mermaid

Custom Markdownの作成

※あまりキレイではない

mermaidの場合の処理

tsx
export const CustomMarkdown = { code({ node, inline, className, children, ...props }: any) { const code = String(children).replace(/\n$/, ''); const [_, filename] = /language-([\w./]*)/.exec(className) || []; if (filename === 'mermaid') { return <div className="mermaid">{code}</div>; } }, ...};

React Markdown

tsx
import ReactMarkdown from 'react-markdown'; import { CustomMarkdown } from './CustomMarkdown'; interface Props { source: string; } export default function Markdown({ source }: Props) { return ( <ReactMarkdown components={CustomMarkdown} children={source} /> ); }

表示

tsx
import { Markdown } from './Markdown'; import mermaid from 'mermaid'; export default function SomePage({}: Props) { // 👇 mermaidをレンダリング useEffect(() => { mermaid.init('.mermaid'); }, []); return ( <Markdown ..../> )

静的出力時に吐くようにしたいけども refとかでいい感じにレンダリングされるようにしたほうが良いかも

確認

```mermaid``` な感じで囲んで書く
flowchart LR id1>This is the text in the box]
pie showData title Key elements in Product X "Calcium" : 42.96 "Potassium" : 50.05 "Magnesium" : 10.01 "Iron" : 5

Related

TAGS

ReactJS

SHARE