mermaid 使えるようにしてみた

hello world(mermaid)

変更点

いろいろ検討したんですが，シュッと動きそうなのがこれだったので，これを入れました．
https://github.com/sjwall/mdx-mermaid

先日 5 系に上げた gatsby-plugin-mdx だと，gatsby-remark-* 系で動きそうなものがなかったので．
gatsby-remark-mermaid や，これが wrap している remark-mermaidjs を直接叩いてみるとかはやってみたけど動かなかったです．
ぼくが Gatsby 詳しくなさすぎるというのはありますが・・

src/utils/mermaid-wrapper.tsx を追加して，この中で mdx-mermaid を単純に wrap しています．

Copycopy code to clipboard
export default function MermaidWrapper(props: MermaidWrapperProps) {
  return <Mermaid chart={props.graph} config={{theme:  { light: 'default', dark: 'default' }}} />
}

これを追加したので，Gatsby の TypeScript 導入記事に従って tsconfig.json を設定しました．gatsby-minimal-starter-ts の tsconfig.json をそのまま wget してきただけです．

https://www.gatsbyjs.com/docs/how-to/custom-configuration/typescript/#tsconfigjson

ともあれ

これで mermaid 書きたい放題だぜ(書かないフラグ)

mermaid のテーマはとりあえず default にしています．
いろいろ変えられそうではあります．

参考:
https://zenn.dev/junkawa/articles/zenn-mermaidjs-theme-config

たとえば・・
themecss を使う例