Mermaid、Figma、Swaggerで基本設計やってみた【今週の振り返り】
研修で要件定義〜基本設計をしています。
最終的にはExcelにまとめますが、Excelだと作図や見た目の調整が手間です。
そこで表題のツール3つを使ってみたところ、効率よく作成できたので紹介します。
MermaidでER図を作成
MermaidではER図を作成しました。
テキストを書くと、勝手に見た目を整えて作図してくれます。矢印や枠をイジイジする時間から解放されます…！
公式ドキュメントを見ながら描きましたが、簡単すぎて感動です！
慣れない方は、こちらの記事から触り始めると分かりやすそうです。
似たツールにPlantUMLがありますが、MermaidはNotionに埋め込めるメリットがあるのでこちらを採用しました。
社内文書にNotionを採用してるので、覚えておくと後々便利に使えそうです。
Figmaで業務フロー・画面遷移図・画面レイアウトを作成
Figmaでは業務フロー、画面遷移図、画面レイアウトを作成しました。
Figmaは以前から触ったことはありつつ使いこなせるレベルでなかったため、こちらの動画で学び直しました。
コンポーネント、スタイル、オートレイアウトの3つを理解すると、作成速度が一気に上がりました。
また業務フローと画面遷移図には、Autoflowプラグインを使いました。
プラグイン起動中にShiftを押しながら2つのオブジェクトを選択すると、オブジェクト間を矢印で結んでくれます。
そしてなんと、オブジェクトを動かすと、矢印も追随して動いてくれます…！
文字数に応じてオートレイアウトしてくれるオブジェクトをコンポーネント化。子要素を次々配置しAutoflowで結べば、画面遷移図の完成です。
SwaggeでAPI設計書を作成
SwaggerではAPIドキュメントを作成できますが、今回は中身抜きで一覧までを作成しました。
記事を見つつ、ブラウザエディターを触って書き方を覚えました。
またAPI設計自体が初めてでしたが、こちらの記事のおかげで形にはなったと思います。
“整える”作業を効率化しよう
いずれのツールも見た目を“整える”手間から解放されました。ツールの習得工数は発生しますが、使えるようになると非常に便利で効率的なので、これからどんどん活用しようと思います。
Discussion