Whimsicalでフローチャートを作る

初め

投稿頻度の遅れを取り戻す！rymです。
今回は、Whimsicalでフローチャートを書いていこうと思います。
前回は、フローチャートやワイヤーフレームをぶっ飛ばして、XDでVuetify UIキットを使う方法をご紹介しましたが、ちゃんとアプリ開発の順を追って取り組んでいこうと思います。

WhimsicalにSign in

Whimsicalはブラウザ上でフローチャートやワイヤーフレームを作成できるアプリケーションなので、何はともあれ会員登録です。以下、リンクから公式トップに飛べるので各自会員登録お願いします。

whimsical 公式

触ってみる

ログインすると各自のworkspaceに飛ばされます。
そこに、「Getting Started」なるものが準備されているのでまずはこれを触ってみます。
オブジェクト・コネクタの生成、zoom in/out、grouping、オブジェクトの前後位置の変更が学べます。

よく使いそうなショートカットのご紹介

• オブジェクトの生成 : s
• コネクタの生成 : c (オブジェクトをフォーカスすると表示されるコネクタのマークをクリックしてもOK)
• テキスト挿入 : t (オブジェクトにテキストを挿入するときはオブジェクトをダブルクリック)
• zoom in/out : z + 左クリック / z + 右クリック
• zoom reset : z + 0

終わり

オブジェクトの生成からコネクタを生やすところがストレスなくスラスラ動かせて使いやすそうな印象です(これを直感的とか言うのでしょうか)。
次は、同じくWhimsicalでワイヤーフレームを作っていこうとおもいます。