Excalidrawでキュートな構成図を書こう
はじめに
皆様こんにちは、あかいけです。
皆様は日々システム構成図を作成しているかと思いますが、ツールは何を使っていますか?
私は最近、Excalidrawを使い始めました。
今まではもっぱらdraw.ioかCacooを使うことが多かったのですが、最近ブログ用の構成図などで使い始めて気に入っています。
なので今回は布教のためブログにしてみました。
Excalidrawって何だろう。
以下のような手書きっぽい図が簡単に書けるドローツールです。
またオンラインホワイトボードとして利用できるため、複数人で同時に編集することもできます。
またMITライセンスのオープンソースプロジェクトとして開発されており、無料で使えます。
しかもアカウント登録不要ですぐに使い始められるので、かなり気軽に試せます。
またライブラリが豊富なこともあり、AWS、Google Cloud、Azureなどのクラウドアイコンも使えます。
それ以外にもいろんなアイコンが使えるので、様々な用途に使えます。
ただご覧の通り全体的にゆるい感じに仕上がるので、あまり緻密な図を書くのには向いてないと思います。
逆に、ラフな図やブログ用のイラストなど、堅苦しくない図を作りたいときには最適です。
他のツールとの違い
構成図作成ツールは色々ありますが、私がよく使うdraw.ioやCacooと比較してみます。
draw.io との違い
draw.ioも無料でアカウント登録せずに利用できるので、その点ではExcalidrawと似ています。
ただdraw.ioは詳細なダイアグラム機能に優れていて、正確で綺麗な図を描くのに適しています。
なので、公式なドキュメントや納品物であればdraw.ioの方が向いていると思います。
逆に正確さよりも親しみやすさを重視したい場合にはExcalidrawの方が向いていそうです。
Cacoo との違い
Cacooはチームでの図表管理に適しています。
また様々なテンプレートが用意されていて、社内でのドキュメント管理やバージョン管理機能が充実しています。
ただし現状ではVSCodeやObsidianの拡張機能として利用することはできないので、ローカル環境で図を管理したい場合はExcalidrawの方が便利です。
なので、チームで本格的に図表管理したい場合はCacoo、個人利用やローカルでの管理を重視する場合はExcalidrawかdraw.ioという感じでしょうか。
なお個人的に公式キャラクターの可愛さにおいては、他のツールより優っていると思います。
使う方法
色々使う方法はありますが、ここでは代表的なものを3つ紹介します。
ウェブ版
まずはウェブ版を使ってみましょう。
ここで触り心地を確かめてみて下さい。
ブラウザでアクセスするだけですぐに使い始められます。
インストール不要なので、とりあえず試してみるのに最適です。
VSCode 拡張機能
みんな大好きVSCodeの拡張機能としても使えます。
コードと一緒に図を管理できるので、ドキュメントを含むプロジェクトで図を管理したい場合に便利です。
Gitで図の変更履歴が追跡しやすいのもいいですね。
Obsidian 拡張機能
私はブログをObsidianで書くことが多いので、個人的におすすめの方法です。
ノートと図を同じ場所で管理できるので、Obsidianを使っている方には特におすすめです。
ライブラリについて
Excalidrawで大事な機能の一つが、豊富なライブラリです。
特にクラウド構成図を描く際には、各クラウドベンダーのアイコンライブラリがめちゃくちゃ役立ちます。
利用例
いくつか利用例を見てみましょう。
AWS構成図
よくみる構成ですがExcalidrawで描くとあら不思議、なんだかキュートな感じに仕上がっている気がします。
なお今回はAWSを例にしていますが、前述の通りGoogle CloudやAzureのアイコンのライブラリもあるので、大抵のクラウド構成をゆるく描くことができます。
ワークフロー図
次はよくありそうなワークフロー図です。
このようにいらすとやと組み合わせることで、さらにゆるい雰囲気を醸し出せます。
さいごに
以上、Excalidrawの紹介でした。
draw.ioやCacooなどの他のツールと比べると、正確さや緻密さでは劣る部分もあり、
納品物などでは流石にゆるい感じすぎて使えないかもしれませんが、ブログのイラストなどで使う分には可愛い感じでモチベ向上にも役立つのではないでしょうか。
無料でアカウント登録も不要なので、
ぜひ皆さんも使ってみて下さい。
