GitHubでMermaid構文の表示機能が強化されていました

こんにちは、CX事業本部 Delivery部の若槻です。

今回は、GitHubでMermaid構文の表示機能が強化されていたので共有します。

Mermaidとは

Mermaidとは、Markdown構文の拡張ツールで、様々なタイプの図（Diagram）をコードやテキストで記述し、視覚的に表示することができます。

Mermaid構文を利用することにより、次のような図をMarkdownで記述することができます。

• Flowchart
• Sequence Diagram
• Gantt Chart
• Class Diagram
• State Diagram
• Pie Chart
• Git Graph

公式サイトより引用

GitHubでのMermaid構文の表示機能が強化されていた

GitHubではMermaid構文をサポートしており、MarkdownファイルにMermaid構文を記述することで、図を表示することができます。

このMermaid構文の表示機能がいつの間にか強化されていました。

以前はMermaidで表示された図で利用できる機能は、モーダルで開く（両矢印↔ボタン）コントロールのみでした。

それが現在はコントロールが追加され、図の拡大・縮小、移動、コピーなどができるようになっていました。

右上のコピーコントロールをクリックすると、図のMermaid構文がクリップボードにコピーされます。下記はコピーされたMermaid構文です。

sequenceDiagram
    participant U as User
    participant C as Client
    participant A as Authorization Server
    participant R as Resource Server

    U->>C: 1. ログイン要求
    C->>A: 2. 認可コードリクエスト
    A->>U: 3. 認可コード付きリダイレクト
    U->>C: 4. 認可コードをクライアントへ
    C->>A: 5. 認可コードとクライアント情報を送信
    A->>C: 6. アクセストークンとリフレッシュトークンを発行
    C->>R: 7. アクセストークンを使用してリソースへアクセス
    R->>C: 8. 要求されたリソースを返す

右下のコントロールを操作すると、図の拡大・縮小、移動、戻るが行えます。サイズの大きい図を確認したい際に役立ちそうですね。

おわりに

Mermaid構文の表示機能が強化されていたので、共有させていただきました。

GitHub Blogでも紹介されなかったマイナーなアップデートでしたが、開発プロジェクトでのドキュメント管理でMermaid構文は常用しているので、地味に嬉しいアップデートでした。

参考

以上