現在ではさまざまなソフトウェアやサービスを利用し、ダイアグラムやワイヤーフレームを作成することができます。
しかしそれらコンピューターで作成した図は、手書きのものと比べて「暖かさ」が足らないと思っている方もいるかもしれません。本日紹介する「Excalidraw」は、きれいなだけでなく手書き風の味を再現することができるオープンソースツールです。
Excalidrawは以下のような特徴を持っています。
- 無料＆オープンソース。
- 無限のキャンバスベースのホワイトボード。
- 手書きのようなスタイル。
- ダークモード。
- カスタマイズ可能。
- 画像サポート。
- シェイプライブラリのサポート。
- ローカライゼーション (国際化) サポート。
- PNG、SVG、クリップボードにエクスポート。
- オープンフォーマット - .excalidraw jsonファイルとして図面をエクスポート。
- 豊富なツール - 矩形、円、菱形、矢印、線、自由描画、消しゴム...。
- 矢印結合とラベル付き矢印。
- 元に戻す/やり直し。
- ズームとパンのサポート。
以下使用方法を切絵名します。
目次
Excalidrawの使用方法
Excalidrawはオープンソースツールでnpmやyarnを使ってインストールすることができます。
npmの場合:
npm install react react-dom @excalidraw/excalidraw
yarnの場合:
yarn add react react-dom @excalidraw/excalidraw
ただし、Excalidrawはexcalidraw.comでもホストされていて、試してみる場合これを使うのが簡単です。好みのWebブラウザでリンクを開きます。
▲画面上部にツールバーが存在し、そこから、矢印、矩形、菱形、楕円、文字など必要なパーツを追加することができます。デフォルトで手書き風のスタイルが設定されていますが、線色、背景色、塗りつぶし、線の太さ、線の種類、ばらつき、角、透明度などのスタイルを左側のパネルで変更できます。
▲左上アイコンをクリックするとメニューが表示され、画像のエクスポートやキャンバスのリセット、ダークモードへの変更、言語の変更などが可能です。
excalidraw.comはPWAサポート(オフラインでの動作)や、リアルタイムコラボレーション、エンドツーエンドの暗号化、ブラウザへの自動保存、共有可能なリンクなど便利な機能を備えています。
Excalidraw
Excalidrawは手書き風のダイアグラムを作成することができる便利なソフトウェア/サービスです。直感的に使用することができるため、素早く図を作成したい場合に便利そうです。
