1. はじめに
こんにちは。GitLabについて日々学習している者です。
GitLabを使っていく中で、GitLabのリッチテキストエディタ便利だな〜と感じることがあったので紹介します。
この記事ではMermaid図の挿入を主な内容として紹介していきます。
ぜひ実際に試してみてください！
2. 基本機能の紹介
GitLabのリッチテキストエディタには、GitLab Flavored Markdown (GLFM)という基本的なマークダウンを拡張したものが採用されており、基本的なマークダウン記法を完全にサポートしています。
それに加えて
- 数式（LaTeX）
- テーブル
- ダイヤグラムやチャートなどの図表（Mermaid、PlantUML）
などの挿入が可能となっています。
3. Mermaidを使った図の挿入
Mermaidとは
Mermaidは、テキストでダイアグラムを定義し、それを視覚的な図として表示できるJavaScriptベースのライブラリです。
様々な種類のダイアグラムをサポートしており、主なものには以下のようなものがあります：
ex.1：OAuth認証フローのシーケンス図
sequenceDiagram
participant ユーザー
participant クライアント
participant 認可サーバー
participant リソースサーバー
ユーザー->>クライアント: 1. ログイン開始
クライアント->>認可サーバー: 2. 認可リクエスト
認可サーバー->>ユーザー: 3. 認証と認可
ユーザー->>認可サーバー: 4. 承認
認可サーバー->>クライアント: 5. 認可コード
クライアント->>認可サーバー: 6. トークンリクエスト（認可コード使用）
認可サーバー->>クライアント: 7. アクセストークン
クライアント->>リソースサーバー: 8. APIリクエスト（アクセストークン付き）
リソースサーバー->>クライアント: 9. 保護されたリソース
クライアント->>ユーザー: 10. リソース/サービス提供
ex.2：システム構成のフローチャート
flowchart LR
user[ユーザー] --> lb[ロードバランサー]
lb --> web1[Webサーバー1]
lb --> web2[Webサーバー2]
web1 --> db[(データベース)]
web2 --> db
web1 --> cache[(Redis Cache)]
web2 --> cache
GitLabリッチテキストエディタへの挿入
GitLabはMermaidに完全対応しており、簡単にダイアグラムを挿入できます。
-
左下のボタンでリッチテキストエディタに切り替えます
（デフォルトエディタをリッチエディタ設定可能。補足に手順を記載しています）
-
＋ボタンを押下し、Mermaid diagramを選択します
-
エディタの中に、枠が表示されます
ここにMermaidのコードを貼りましょう！
-
上段にMermaidが表示されます
下段のコードを編集するとリアルタイムで反映されます
-
投稿すると図だけ表示されます
右上のボタンからコードをコピーできます
とても便利です。
4. GitLab Duo ChatにMermaidを作ってもらおう
最近だと、Mermaidを一から書くというよりも、生成AIに書いてもらって後から微修正みたいな使い方をしている人も多いのかなと思います。記法を覚えなくてもパッとコードベースで図が作れるのはめちゃ便利です。
GitLab Duo Chatとは
GitLabにもGitLab Duo Chatという AIアシスタントがあります。
中身はClaudeなので、ChatGPTなどと同じような使い方ができます。
早速、DuoにMermaidを作ってもらいましょう！
-
画面右上のGitLab Duo Chatボタンからチャット画面を開きます
-
すぐに作ってくれました
-
エディタにコピペして、チームに共有しましょう！
GitLab Duo Chatのすごいところ
GitLab Duoは、Issueの内容はもちろん、ソースコードやコミットも文脈として把握しているので、Issueのコメントなどで仕様についての議論がすでにあれば、それを元にMermaidを書き起こしてもらうことができます。
5. 補足＿デフォルトテキストエディタの設定方法
つい先日(2024/12/19)のGitLab 17.7 Releaseによって、ユーザー設定からデフォルトテキストエディタをリッチテキストエディタに変更することができるようになりました！
（GitLab Docs - Profile preferences - Set the default text editor）
エディタ切り替えの手間が省けて快適になります。
-
プロフィールアイコンからメニューを開いて、設定をクリックします
-
サイドバーから環境設定を開きます
-
リッチテキストエディターを選択します
-
保存ボタンを忘れずに！
6. さいごに
リッチテキストエディタはWikiやMerge Requestなどいろんなところで使えるので、ぜひ試してみてください！
参考リンク集