Zenn
👠

Mermaidでテーマを変えたい

2023/12/29に公開
Notion
Mermaid
tech

自分のメモ用にも学習した内容を記録していきます🔥
どなたかの参考になれば幸いです🙏

Mermaidとは

Mermaidは、テキストベースのマークアップ言語を使用して、グラフやダイアグラムを作成するためのツールです。
主にドキュメンテーションやコードコメント内で使用され、簡潔な記述で複雑な図を生成できることが特徴です。
個人的にはNotion上のコードブロックですぐにER図やシーケンス図を書けることから大変重宝させてもらっているツールです笑

本文

そんなMermaidで図を生成している際、
「もう少しイケてる見た目にしたいな。。。」と思ったことはないですか？

そんな方はthemeを指定して日々の仕事に色を出していきましょう！！

こんな感じで指定することができます👇

mermaidAPI.initialize({
  securityLevel: 'loose',
  theme: 'base',
});

👀 Notion上でMermaidを使用している方は下記の指定方法で変更することができます

%%{init:{'theme':'base'}}%%

それでは実際に実際のテーマを見ていきましょう。
現在Mermaidで使用できる全てで5つ。

  1. default
  2. nautral
  3. dark
  4. forest
  5. base

まとめ

個人的にforestが好き。
あとMermaid最高〜〜！！

参考

https://mermaid.js.org/config/theming.html

Discussion