【GitLab】リッチテキストエディタにMermaidを貼ろう！

## 1. はじめに

こんにちは。GitLabについて日々学習している者です。
GitLabを使っていく中で、GitLabのリッチテキストエディタ便利だな〜と感じることがあったので紹介します。
この記事ではMermaid図の挿入を主な内容として紹介していきます。
ぜひ実際に試してみてください！

## 2. 基本機能の紹介

GitLabの[リッチテキストエディタ](https://docs.gitlab.com/ee/user/rich_text_editor.html)には、[GitLab Flavored Markdown (GLFM)](https://docs.gitlab.com/ee/user/markdown.html)という基本的なマークダウンを拡張したものが採用されており、基本的なマークダウン記法を完全にサポートしています。
それに加えて
- 数式（LaTeX）
- テーブル
- ダイヤグラムやチャートなどの図表（Mermaid、PlantUML）
などの挿入が可能となっています。

## 3. Mermaidを使った図の挿入

### Mermaidとは
[Mermaid](https://mermaid.js.org/)は、テキストでダイアグラムを定義し、それを視覚的な図として表示できるJavaScriptベースのライブラリです。
様々な種類のダイアグラムをサポートしており、主なものには以下のようなものがあります：
- [フローチャート](https://mermaid.js.org/syntax/flowchart.html)
- [シーケンス図](https://mermaid.js.org/syntax/sequenceDiagram.html)
- [クラス図](https://mermaid.js.org/syntax/classDiagram.html)
- [ER図](https://mermaid.js.org/syntax/entityRelationshipDiagram.html)
- [ガントチャート](https://mermaid.js.org/syntax/gantt.html)
- [Gitグラフ](https://mermaid.js.org/syntax/gitgraph.html)

#### ex.1：OAuth認証フローのシーケンス図
```mermaid
sequenceDiagram
    participant ユーザー
    participant クライアント
    participant 認可サーバー
    participant リソースサーバー

    ユーザー->>クライアント: 1. ログイン開始
    クライアント->>認可サーバー: 2. 認可リクエスト
    認可サーバー->>ユーザー: 3. 認証と認可
    ユーザー->>認可サーバー: 4. 承認
    認可サーバー->>クライアント: 5. 認可コード
    クライアント->>認可サーバー: 6. トークンリクエスト（認可コード使用）
    認可サーバー->>クライアント: 7. アクセストークン
    クライアント->>リソースサーバー: 8. APIリクエスト（アクセストークン付き）
    リソースサーバー->>クライアント: 9. 保護されたリソース
    クライアント->>ユーザー: 10. リソース/サービス提供

```
```
sequenceDiagram
    participant ユーザー
    participant クライアント
    participant 認可サーバー
    participant リソースサーバー

    ユーザー->>クライアント: 1. ログイン開始
    クライアント->>認可サーバー: 2. 認可リクエスト
    認可サーバー->>ユーザー: 3. 認証と認可
    ユーザー->>認可サーバー: 4. 承認
    認可サーバー->>クライアント: 5. 認可コード
    クライアント->>認可サーバー: 6. トークンリクエスト（認可コード使用）
    認可サーバー->>クライアント: 7. アクセストークン
    クライアント->>リソースサーバー: 8. APIリクエスト（アクセストークン付き）
    リソースサーバー->>クライアント: 9. 保護されたリソース
    クライアント->>ユーザー: 10. リソース/サービス提供
```
#### ex.2：システム構成のフローチャート
```mermaid
flowchart LR
    user[ユーザー] --> lb[ロードバランサー]
    lb --> web1[Webサーバー1]
    lb --> web2[Webサーバー2]
    web1 --> db[(データベース)]
    web2 --> db
    web1 --> cache[(Redis Cache)]
    web2 --> cache
```
```
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に完全対応しており、簡単にダイアグラムを挿入できます。

1. 左下のボタンでリッチテキストエディタに切り替えます
（デフォルトエディタをリッチエディタ設定可能。補足に手順を記載しています）
![スクリーンショット 2024-12-19 10.39.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3960758/a252a0eb-308d-4257-1720-db1ff8f9cff8.png)

2. ＋ボタンを押下し、Mermaid diagramを選択します
![スクリーンショット 2024-12-19 10.41.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3960758/af6fc445-5dea-9d5b-f02f-89f6e4a54759.png)

3. エディタの中に、枠が表示されます
ここにMermaidのコードを貼りましょう！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3960758/c4d298e4-499d-078b-2df7-9c70002faa82.png)

4. 上段にMermaidが表示されます
下段のコードを編集するとリアルタイムで反映されます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3960758/d09dd6dd-b501-4891-d960-1f452cc0e52e.png)

5. 投稿すると図だけ表示されます
右上のボタンからコードをコピーできます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3960758/8214216c-d375-8f30-5a2b-375406573d34.png)

とても便利です。

## 4. GitLab Duo ChatにMermaidを作ってもらおう

最近だと、Mermaidを一から書くというよりも、生成AIに書いてもらって後から微修正みたいな使い方をしている人も多いのかなと思います。記法を覚えなくてもパッとコードベースで図が作れるのはめちゃ便利です。

### GitLab Duo Chatとは
GitLabにも[GitLab Duo Chat](https://docs.gitlab.com/ee/user/gitlab_duo_chat/)という AIアシスタントがあります。
中身はClaudeなので、ChatGPTなどと同じような使い方ができます。
早速、DuoにMermaidを作ってもらいましょう！

1. 画面右上のGitLab Duo Chatボタンからチャット画面を開きます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3960758/50e5e35b-9a53-5f7a-f2a1-982a3b8c6ad3.png)

2. すぐに作ってくれました
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3960758/618cc6f2-8c7e-9d59-78e5-155e569ff870.png)

3. エディタにコピペして、チームに共有しましょう！

### GitLab Duo Chatのすごいところ
GitLab Duoは、**Issueの内容はもちろん、ソースコードやコミットも文脈として把握している**ので、Issueのコメントなどで仕様についての議論がすでにあれば、それを元にMermaidを書き起こしてもらうことができます。

## 5. 補足＿デフォルトテキストエディタの設定方法

つい先日(2024/12/19)の[GitLab 17.7 Release](https://about.gitlab.com/releases/2024/12/19/gitlab-17-7-released/)によって、ユーザー設定からデフォルトテキストエディタをリッチテキストエディタに変更することができるようになりました！
（[GitLab Docs - Profile preferences - Set the default text editor](https://docs.gitlab.com/ee/user/profile/preferences.html#set-the-default-text-editor)）
エディタ切り替えの手間が省けて快適になります。



1. プロフィールアイコンからメニューを開いて、設定をクリックします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3960758/9d1c5444-8abd-ca5a-017d-2e53f2c3e712.png)


2. サイドバーから環境設定を開きます
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3960758/3327e380-a47e-c5fe-61ce-8d078ffb1507.png)

3. リッチテキストエディターを選択します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3960758/79341316-ef43-50b4-e910-eb9c556c20c9.png)

4. 保存ボタンを忘れずに！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3960758/c7c97038-4622-41ae-a557-643a083e66f4.png)


## 6. さいごに

リッチテキストエディタはWikiやMerge Requestなどいろんなところで使えるので、ぜひ試してみてください！

### 参考リンク集

https://qiita.com/Qiita/items/c07f3262d8f3b25f06c9

https://experts.zyyx.jp/gitlab/features/overview/rich-text-editor

https://docs.gitlab.com/ee/user/rich_text_editor.html

https://mermaid.js.org/

https://docs.gitlab.com/ee/user/gitlab_duo_chat/