Textwellでダイアグラムを描く

Textwellに入力したテキストを元に簡単なダイアグラムを描くアクションをつくりました。

作成したダイアグラムは画像として保存することができます。

Textwell にたとえば次のようにテキストを入力して、

1.Search Wikipedia
2.Is It
found?
3.Is there a
related term?
4.Think of
another
term
5.Create
a new
article
6.Create
a
redirect
1->2.
2->3.No
2->4.Yes
3->5.No
3->6.Yes
4->1.

入力したテキストを選択して起動すると …

アクション画面に矩形や線が表示されるので、矩形をドラッグして表示位置を調整したり、矩形を長押しして設定ダイアログを開き、色や形状やサイズを調整すると …


こんなかんじに仕上げることができます。

これは、Wikipedia の「ダイアグラム」の項の冒頭に登場する「ウィキペディアに新しい記事を追加するための意思決定プロセス」の図を見ながら描いてみたものです。

描画エリアの下にある「Convert to PNG」ボタンを押下すると、ダイアグラムをPNG形式の画像に変換します。 iPhone の場合、ダイアグラムを長押しすると画像として保存することができます。Mac の場合はドラッグや副ボタンクリックで保存することができます。

アクション画面を閉じる際、「Replace Diagram Data」を選択すると、ダイアグラムの表示スタイルに関する定義を元の選択テキストに追加します。表示スタイルに関する定義も含めてテキストを選択してアクションを起動すると、スタイルが適用された状態でダイアグラムが表示されます。

アクションをTextwellにインポート

ソースコードはこちらに公開されています。

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.