今回の仕上がり
GraphvizOnlineは、DOTというテキストから関係図を表示する道具です。今回は開始からプレイへ進み、成功と失敗で分岐し、再挑戦からプレイへ戻る図を作りました。プログラムを動かす前に、戻り先の矢印が抜けていないか見たいときに使えます。
DOTを入力してSVGへ保存する
- 公式ページを開き、左のコード欄をクリックして元のサンプルを全選択します。
- 下のDOTを貼り付けます。右に4つの箱と矢印が表示されたことを見ます。
- Engineをdot、Formatをsvgにします。この例では初期状態のままでした。
- DownloadがSVGの保存入口です。今回の操作ブラウザでは保存完了イベントを確認できなかったため、同じDownloadリンクが保持する正規のSVGデータを取得して保存しました。
- 保存したflow.svgをブラウザで開き、Start・Play・Clear・Retryと4本の矢印を確認します。この記事のZIPにもその保存済みファイルを入れています。
digraph Flow {
rankdir=LR;
node [shape=box];
Start -> Play;
Play -> Clear [label="win"];
Play -> Retry [label="lose"];
Retry -> Play;
}rankdir=LRで左から右へ並べ、矢印のラベルをwinとloseにしています。コードを直すと図も変わるので、画像だけでなく元のDOTを残すと修正しやすくなります。図は静止画で、ゲームの状態管理やクリア判定を実装したものではありません。
作者・利用条件・確認範囲
作者表記はdreampuf様とコントリビューターの皆様。公式リポジトリはBSD-3-Clauseを案内しています。Copyright (c) 2018, Dreampufを含む許諾文全文を保存しました。ソフトウェアを複製・改変して再配布する場合の表示条件と、作者名を推薦に使わない条件を確認してください。今回のDOTと表示用HTMLは編集部の自作・CC0です。
2026年10月19日、コード入力、4状態の表示、正規SVG出力の保存と再表示を確認しました。今回の操作は登録・支払い・インストール不要でした。全エンジン・PNG出力・共有機能・スマホ実機での編集は未確認です。入力したDOTがURLのハッシュ部分にも反映されたため、秘密の構成図や個人情報を含めたURLは共有しないでください。AI利用の有無や個人開発作品であることは断定しません。
四角と矢印を直接動かしたい場合はdraw.ioの実操作例へ。図にした状態をゲームへ組み込む手順は開発講座06のクリア・再挑戦も参照できます。