LoginSignup
2
0

Mermaidを使ったドキュメント作成術

Last updated at Posted at 2023-12-11

はじめまして。カバー株式会社のTです。
この記事は、カバー株式会社 Advent Calendar 2023
の12日目の記事になります。
前回の記事は、@ys-coverAWS Control Towerにおける非準拠リソースの通知です。

Mermaidとは

Mermaidとは、テキストベースの図やチャートの作成ツールです。
内部的にはJavaScriptでテキストを解釈して図やチャートの生成を行います。
Mermaidを使うにはMermaidで書かれたテキストを変換する環境が必要です。
実際にGitHubやNotion、Qiita等でサポートされていますので、是非使っているドキュメントツールがMermaidをサポートしているか確認してみてください。

グラフィカルなドキュメントで認識齟齬を減らす

カバー株式会社では、リモート可能な勤務日と出社が義務付けられる日が曜日ごとで分けられているハイブリット型の勤務体系となっています。(※実際のルールは部署ごとに異なります)

そんな中で、リモート上での円滑なコミュニケーションを取ることと後から見返した時に読み手のコストをかけないという2つの意味で、Mermaidを使ったドキュメントは役に立ちます。

例えば、複雑な状態を持つ機能実装時には、Mermaidによる遷移図を元にコミュニケーションを取ります。

例:ゲームのとある機能の状態遷移図

このような図を元に仕様提案をする方と機能実装をするエンジニア間に齟齬が発生しないように進めることが可能です。

ChatGPTを使用して自然言語から図を作成する

ChatGPTを使うことで自然言語からMerimaidのテキストコードを作成することが可能です。
Pluginsを使えば、レンダリングまでChatGPT内で完結することが出来ます。

例: 前述のMerimaidコードをPluginsのMermiad Chartを使用して描画する
image.png

しかし、ChatGPTはMermaid記法を間違えることが多いので、生成されたMermaidコードがレンダリングされない(=エラーが出てしまう)場合には、GPTにMermaidの公式ドキュメントを読み込ませることをお勧めします。

例: stateDiagramのドキュメントを読み込ませてから状態遷移図を出力させる
image.png

おしまい

最後までお読みいただきありがとうございます。
今回はMermaidのご紹介から導入のメリット、ChatGPTによる自然言語からの変換までお話しさせていただきました。
GPTを使えば文法を知らずとも簡単に試すことが出来るので、是非1度は挑戦してみていただきたいです。

次回は@kura-cvrの「GitHub ActionsでUnityプロジェクトをビルドする」です。お楽しみに!

参考

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0