こんにちは、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構文は常用しているので、地味に嬉しいアップデートでした。
参考
以上