はじめに
Mermaid記法でダイアグラムを書くのって、めちゃかっこいい！これってやばいですよね。クールなエンジニアになった気分！どんどんやり方を覚えて、一歩先に進んだエンジニアになれそうな気がします。
そこで、ONES Wiki（ワンズウィキ）という30名まで無料で利用できる素晴らしいツールを使って、Mermaid記法を学ぶ方法を紹介します。
ONES Wiki（ワンズウィキ）とは？
ONES Wikiは、最大30名まで無料で利用できるエンタープライズ向けのSaaS型Wikiツールです。（有料版ではオンプレミス版もあるようです）
Microsoft Wordのように誰でも簡単にWikiページを作成できる一方で、エンジニア向けのMarkdown記法、Mermaid記法、PlantUML記法にも対応しています。なので技術的なドキュメントを簡単に作成できるだけでなく、視覚的にわかりやすいダイアグラムを作成することもできます。
AWSの構成図とか、ラックマウント構成図、ER図、ワイヤフレームなども簡単に作成できます。本当に無料で使えるので感謝です。
Mermaid記法の基本
Mermaid記法は、テキストベースでダイアグラムを描くためのシンプルで強力なツールです。フローチャート、シーケンス図、クラス図など、さまざまな形式のダイアグラムを簡単に作成できます。基本的な構文は非常に直感的で、特別なソフトウェアを必要とせずに、Markdownファイル内に直接記述できます。
例えば、以下のようなコードを使って、シンプルなフローチャートを作成できます。
graph TD;
A-->B;
このコード左側のコード入力エリアに入力すると、右側にAからBへの矢印が描かれたダイアグラムを生成します。
ONES WikiでMermaid記法の実践
それでは、実際にONES Wikiを使ってMermaid記法を試してみましょう。
まず、ONES Wikiにサインアップして、ナレッジベース管理からスペースを作成してください。スペースから「新しいページ」を作成し、/Mermaid（コンポーネント）を利用するとMermaid記法でダイアグラムが作成できます。
操作方法は、アトラシアン社のConfluence（コンフルエンス）と、ほぼ同じですので、Confluence（サーバー版/データセンター版）の利用経験をお持ちの方は、直感的に利用できると思います。
事前準備：ONESアカウントを作成する
まず、ONES製品の無料アカウントを作成します。
・ONES製品にサインアップをしてください。
・サインアップおよびサインアップ後の設定について：はじめてONES製品を利用される方へ
スペースの作成
Wikiページを作成するためのスペースを作成します。
「ナレッジベース管理」-「スペース」-「＋スペースの作成」をクリックしてください。
スペース情報を入力してください。
スペース名（必須）：スペース名を入力してください。
カテゴリ（任意）：特に指定しなくてもよいですが、本格的に使う場合は設定したほうがよいです。
説明（任意） ：スペースの説明を入力してください。
内部共有の有効化：他メンバーとの共有。共同編集などをしたい場合はONにしてください。
OKボタンをクリックすると以下のような画面となります。
Mermaid記法を書いてみる
1.白紙のページを作成します
ONES Wikiのページを作成します。
スペースの左メニューの＋ボタンをクリックして「Wikiページ」を選択してください。
そうすると以下のような「白紙のページ」が作成されます。
各領域はこんな感じです。
2.Mermaid記法のダイアグラムコンポーネットを追加する
ページの本文に/スラッシュコマンドを入力してコンポーネント一覧を表示してダイアグラムのMermaidを選択します。
もちろん /merとか入力すると以下のようになります。
Mermaid記法をコンポーネントが本文に追加されますので、左側のコードの部分にMermaid記法のコードを入力してください。
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の間のやり取りを示すダイアグラムが生成されます。
こんなふうにもしてみました。
コラボレーション機能
ONES Wikiは、チームメンバーとのコラボレーション機能がありますので、メンバーに @メンションして意見を聞いてみましょう。
メンションは、メールアドレスやユーザー名でメンションできるから便利です。
メールアドレスでメンション
ユーザー名でメンション
こんな感じで確認してもらってます。
ダイアグラムの上部にある「注釈を追加」からコラボレーションできます。
それ以外にも、ページの最下部にコメント欄がありますので、そこでディカッションしながら同時編集を使って、複数人で編集しながらページを作成していくことができます。
なんか場所が離れていても一緒に共同作業ができるって感動ですね！
作成したダイアグラムを画像ダウンロード
Mermaid記法によって作成したダイアグラムを画像としてダウンロードもできます。
まとめ
これから、Mermaid記法の公式ドキュメントをみながら、いろいろ試してみたいと思います。
こんなに手軽に無料で利用できるONES Wikiってすごいですね。
日本語マニュアルやE-ラーニングも無料で提供されていて助かります。
設定に関するベストプラクティスなら、こちらを参照してみてください。