html-diagram

HTML 図解

文章だけの場合より関係性を理解しやすくする、最小限の視覚モデルを作成します。ユーザーのプロジェクトや題材に合わせて、表記法と視覚表現を選びます。すべての題材を同じ SVG のボックスと矢印に当てはめないでください。

適切なモデルを選ぶ

読者が答えるべき問いを特定し、それに応じて形式を選びます。

• コンポーネントと接続には、トポロジー。
• 時間経過に沿った順序付きメッセージには、シーケンス。
• 手順、分岐、引き継ぎには、プロセス。
• 遷移と条件には、状態。
• 包含関係や所有関係には、階層。
• 時間経過に伴う変化には、タイムライン。
• 繰り返し現れる関係には、マトリックス。
• 大きさが重要な場合には、定量的なビュー。

常に表示しておくべき情報と、必要に応じて表示できる情報を判断します。同じ意味を伝えられるなら、よりシンプルな形式を使います。

描画方法を選ぶ

情報や規模に応じて、HTML と CSS、SVG、Canvas、WebGL を使います。図解だからという理由だけで SVG を使わないでください。

• インタラクションを追加する前に、ラベル、グループ化、方向、コネクターを読みやすくします。
• 読者が状態や手順を比較する必要がある場合は、ノードの位置を固定します。
• エッジの交差や、曖昧な矢印の先端は最小限に抑えます。
• 意図的に広いキャンバスは、パンまたはスクロール可能な領域の中に配置します。
• 表記法だけでは意味が明らかでない場合に限り、凡例を使います。

シーケンス化、フィルタリング、経路のトレース、パンとズーム、アニメーションは、明示された問いへの回答に役立つ場合にのみ追加します。オーバーレイは閉じられるようにし、コントロールはキーボードで操作できるようにし、動きは prefers-reduced-motion に対応させます。

design-artifact を利用できる場合は、 図解を取り巻く構成とビジュアルの方向性を確認するために参照してください。装飾的な処理よりも、 選択した図解の文法、ラベルの読みやすさ、関係性を優先してください。

作成と検証

必要な CSS と JavaScript をインラインに含む、自己完結型の HTML ファイルを 1 つ作成します。ビルド手順や外部サービスは不要です。アクセシブルなテキストによる代替手段を用意し、アニメーションや色だけに頼らず重要な意味を伝えられるようにします。

幅の広い画面と狭い画面の両方で結果を確認します。ラベルの衝突、ノードの欠け、エッジの経路、読み上げ順、キーボード操作、オーバーフロー、すべてのインタラクティブな状態を確認します。

絶対パス、選択した図解形式、主な簡略化や前提を返します。