Mermaid記法

Mermaid記法、知りませんでした。

こちらをテストしました。
技術者向けTips: はてなブログでMermaid記法を利用する方法 - はてなブログ開発ブログ

graph LR;
    書く--> 読みたくなる -->読む;
    読む--> 書きたくなる -->書く;
    読む--> 共感する -->はてなスター;
    はてなスター--> モチベート -->書く;

完全にダークモード表示が裏目に出てます。

こちらもお借りしました。
【Mermaidの紹介】Qiitaでダイアグラム・チャートが簡単に書けるようになりました！ - Qiita

flowchart TB
  User-->LB[Load Balancer]
  LB--> Web1[Web Server] & Web2[Web Server]
  Web1 & Web2 --> DB[(Database)]

フォーマットを覚えられる自信がない・・・。

classDiagram
  Article <|-- PublicArticle
  Article <|-- SecretArticle
  class Article{
    +String title
    +String body
    +Boolean isSecret
    +update()
    +destroy()
  }
  class PublicArticle{
    +DateTime publishedAt
  }
  class SecretArticle{
    +bool is_wild
    +publish()
  }

あぁこれは見たことありますね。

gantt
  dateFormat  YYYY-MM-DD
  title       XXXプロジェクト 計画
  excludes    weekends

  section リリース
  開発期間        :done, 2022-04-01, 2022-04-08
  アルファリリース期間 :active, 5d
  ベータリリース期間  :5d
  正式リリース      :milestone, 0d

  section 開発
  機能開発      :crit, done, 2022-04-01, 3d
  デバッグ      :crit, done, 2d
  アナウンス     :crit, done, 1d
  ベータ機能開発 :crit, active, 4d
  バグ修正      :4d
  最終検証      :1d

ガンチャートもいけるんですね。

pie title 社内で使っているエディタ
  "VSCode" : 30
  "Vim" : 6
  "Emacs" : 2

グラフも出来ますね。

凄いのですが、色の調節は出来るのかな・・・

☆追記です。
細かく設定も可能っぽいのですが、テーマを利用するのが
お手軽っぽい。
Mermaid のテーマ・スタイルの変更方法

%%{init:{'theme':'forest'}}%%
pie title 社内で使っているエディタ
  "VSCode" : 30
  "Vim" : 6
  "Emacs" : 2

あぁ文字の色ダメか。きっと方法あるんだろうけどな。