ONES WikiでMermaid記法のクールなダイアグラムを作成しよう！

### はじめに
Mermaid記法でダイアグラムを書くのって、めちゃかっこいい！これってやばいですよね。クールなエンジニアになった気分！どんどんやり方を覚えて、一歩先に進んだエンジニアになれそうな気がします。
そこで、ONES Wiki（ワンズウィキ）という**30名まで無料**で利用できる素晴らしいツールを使って、Mermaid記法を学ぶ方法を紹介します。

### ONES Wiki（ワンズウィキ）とは？
ONES Wikiは、**最大30名まで無料**で利用できるエンタープライズ向けのSaaS型Wikiツールです。（有料版ではオンプレミス版もあるようです）
Microsoft Wordのように誰でも簡単にWikiページを作成できる一方で、エンジニア向けのMarkdown記法、Mermaid記法、PlantUML記法にも対応しています。なので技術的なドキュメントを簡単に作成できるだけでなく、視覚的にわかりやすいダイアグラムを作成することもできます。
AWSの構成図とか、ラックマウント構成図、ER図、ワイヤフレームなども簡単に作成できます。本当に無料で使えるので感謝です。

![ONES Wiki-standard-En(750pix).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3992874/d2116077-c176-c5ff-cd4d-10577499c0fb.png)

### Mermaid記法の基本
Mermaid記法は、テキストベースでダイアグラムを描くためのシンプルで強力なツールです。フローチャート、シーケンス図、クラス図など、さまざまな形式のダイアグラムを簡単に作成できます。基本的な構文は非常に直感的で、特別なソフトウェアを必要とせずに、Markdownファイル内に直接記述できます。

例えば、以下のようなコードを使って、シンプルなフローチャートを作成できます。
```
graph TD;
A-->B;
```
このコード左側のコード入力エリアに入力すると、右側にAからBへの矢印が描かれたダイアグラムを生成します。

![スクリーンショット 2025-02-05 11.55.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3992874/2f2b97a9-8c08-bbb6-9c28-15a514aca923.png)

### ONES WikiでMermaid記法の実践
それでは、実際にONES Wikiを使ってMermaid記法を試してみましょう。
まず、ONES Wikiに[サインアップ](https://ones.com/ja/sign_up)して、ナレッジベース管理からスペースを作成してください。スペースから「新しいページ」を作成し、/Mermaid（コンポーネント）を利用するとMermaid記法でダイアグラムが作成できます。

操作方法は、アトラシアン社のConfluence（コンフルエンス）と、ほぼ同じですので、Confluence（サーバー版/データセンター版）の利用経験をお持ちの方は、直感的に利用できると思います。

----
### 事前準備：ONESアカウントを作成する
まず、ONES製品の無料アカウントを作成します。
・ONES製品に[サインアップ](https://ones.com/ja/)をしてください。
・サインアップおよびサインアップ後の設定について：[はじめてONES製品を利用される方へ](https://ones.com/wiki/external/org/ArVmEqtn/#/page/ABr2UQWb/9s4sqfAt)

----
### スペースの作成
Wikiページを作成するためのスペースを作成します。
「ナレッジベース管理」-「スペース」-「＋スペースの作成」をクリックしてください。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3992874/cca1cf1c-d632-cb11-0644-e83622bd744b.png" width=80%>


スペース情報を入力してください。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3992874/00043dff-5c1d-58a9-7b79-53186bfe2153.png" width=80%>

**スペース名（必須）**：スペース名を入力してください。
**カテゴリ（任意）**：特に指定しなくてもよいですが、本格的に使う場合は設定したほうがよいです。
**説明（任意）**　：スペースの説明を入力してください。
**内部共有の有効化**：他メンバーとの共有。共同編集などをしたい場合はONにしてください。

OKボタンをクリックすると以下のような画面となります。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3992874/391de1e6-c859-1c6d-1c0c-19b1d26f39a5.png" width=80%>

----
### Mermaid記法を書いてみる
**1.白紙のページを作成します**
ONES Wikiのページを作成します。
スペースの左メニューの＋ボタンをクリックして「Wikiページ」を選択してください。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3992874/61d93990-cef3-20bb-1d6c-d9816d548afd.png" width=70%>

そうすると以下のような「白紙のページ」が作成されます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3992874/faf671e9-736e-a289-b1d7-0aba1ae8b37f.png" width=70%>

各領域はこんな感じです。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3992874/804e7185-04a0-fa4e-0e3e-990b49ad1216.png" width=70%>

**2.Mermaid記法のダイアグラムコンポーネットを追加する**
ページの本文に/スラッシュコマンドを入力してコンポーネント一覧を表示してダイアグラムのMermaidを選択します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3992874/95e7e326-b563-7532-9682-8dba229f5a19.png" width=70%>

もちろん **/mer**とか入力すると以下のようになります。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3992874/7a324a16-97c6-4ef2-29c3-9dc6fa73be7e.png" width=70%>

Mermaid記法をコンポーネントが本文に追加されますので、左側のコードの部分にMermaid記法のコードを入力してください。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3992874/8f0ee4fa-c312-ac0e-bb82-60eab94338c5.png" width=80%>

**3.Mermaid記法のダイアグラムを作成してみる**
ページ内にMermaid記法をのコンポーネントにコードを入力します。
例えば、以下のように記述します。
```
graph TD;
システムA-->システムB;
システムA-->データベース;
```

ダイアグラムを表示 : 入力が完了したら、ページを保存します。すると、Mermaid記法が自動的にダイアグラムに変換され、視覚的に表示されます。
image5
このように、ONES Wikiを使うことで、簡単にダイアグラムを作成することができます。

**Mermaid記法の応用例**
Mermaid記法は、さまざまなダイアグラムを作成するのに非常に便利です。例えば、システム間のフローを示すダイアグラムや、データベースとのやり取りを示すシーケンス図などが作成できます。

以下は、システム間のフローを示すダイアグラムの例です。
```
sequenceDiagram;
participant A as システムA
participant B as システムB
A->>B: 要求文
B->>A: 応答文
```
このコードを入力すると、システムAとシステムBの間のやり取りを示すダイアグラムが生成されます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3992874/221f4290-c329-1a02-0cac-7e37bdd20ca8.png" width=80%>

こんなふうにもしてみました。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3992874/7d9f8f8a-8712-0db2-0fe5-49ba0e5f418d.png" width=80%>

### コラボレーション機能
ONES Wikiは、チームメンバーとのコラボレーション機能がありますので、メンバーに **@メンション**して意見を聞いてみましょう。
メンションは、メールアドレスやユーザー名でメンションできるから便利です。
<br>
**メールアドレスでメンション**
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3992874/2582eaf2-dea2-7618-6b84-083fcf65c92a.png" width=70%>

<br><br>
**ユーザー名でメンション**
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3992874/fa0aadeb-6b49-a520-a7e4-bec36bfe3e5b.png" width=70%>

こんな感じで確認してもらってます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3992874/8c291e92-c0b1-625e-0869-825ee1ec55b4.png" width=70%>

ダイアグラムの上部にある「注釈を追加」からコラボレーションできます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3992874/96760b01-cf51-f4c3-1a83-2083af563dc3.png" width=70%>

それ以外にも、ページの最下部にコメント欄がありますので、そこでディカッションしながら同時編集を使って、複数人で編集しながらページを作成していくことができます。
なんか場所が離れていても一緒に共同作業ができるって感動ですね！

----

### 作成したダイアグラムを画像ダウンロード
Mermaid記法によって作成したダイアグラムを画像としてダウンロードもできます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3992874/19d6c25e-b62b-5c3d-86d0-d8cf068e2d3f.png" width=70%>

-----

### まとめ
これから、Mermaid記法の[公式ドキュメント](https://mermaid.js.org/)をみながら、いろいろ試してみたいと思います。

こんなに手軽に無料で利用できる[ONES Wiki](https://ones.com/ja/products/wiki)ってすごいですね。

[日本語マニュアル](https://ja.docs.ones.com/)や[E-ラーニング](https://academy.ones.com/home-ja)も無料で提供されていて助かります。

設定に関するベストプラクティスなら、[こちら](https://ones.com/wiki/external/org/ArVmEqtn/#/page/ABr2UQWb/Hde7j1hv)を参照してみてください。