mermaidjsとReact Markdownの統合

mermaid Install

yarn add -D mermaid @types/mermaid

Custom Markdownの作成

※あまりキレイではない

mermaidの場合の処理

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

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}
    />
  );
}

表示

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