こういう分岐図をHTMLで表現するときに、どうすればきれいに表示できるか結構悩みます。 (上の写真はエクセルで簡単に整えてスクリーンショットを撮りました。) ゲームの攻略とかでスキルツリーとか開発チャートとか進化図とか分岐することがよくありますが、なかなかHTMLだけで表現するのは難しいものです。 PREタグと罫線文字を使って分岐を表現する昔からある手法ですがPREタグと罫線文字を使って分岐を表現できます。 文字しか使えない掲示板とかでもよく見るかもしれませんね。 PREタグ整形済みテキストを表示するときに使います。 ソースコードやアスキーアート(AA)を表示するときに利用できます。 スペースや改行がそのまま表示されます。 テキストエディタなどであらかじめ整えておくと良いかと思います。 これを実際にHTMLで表示するとこうなります。 コーヒーカップ ┃ メリーゴーランド ┏━━━━━┻━━