作業の進め方
Baoyu Diagramは、画像モデルにラベルを描かせるのではなく、アーキテクチャ、フローチャート、シーケンス、タイムラインなどの構造的な説明用に、単体のSVG図を書き出します。ソースには、セマンティックカラー、等幅タイポグラフィ、図の種類ごとのレイアウト指針を備えたダークなビジュアルシステムが含まれています。
実装上の特徴的な点はレイヤーの順序です。コネクタは不透明なマスクと半透明のコンポーネントボックスの背面に描かれるため、線がラベルに透けて見えません。余白、凡例の配置、viewBoxのパディングも、図の仕様の一部として扱われます。付属スクリプトを使えば、SVGに対応しないツール向けに、より高解像度のPNGを生成できます。
期待される成果物
- テキストとジオメトリが明示された、拡大縮小可能なSVG図
- SVGから生成されるPNGエクスポート
- グループ、フロー、凡例が、提供されたシステムに対応するレイアウト
指示からレビューまで
- 01関係モデルを選ぶ
情報がシーケンス、判断フロー、階層、アーキテクチャ、またはその他の対応する構造のどれに当たるかを決めます。
- 02ノードと接続を計画する
位置を決めて矢印を配線する前に、エンティティ、グループの境界、フローの方向を書き出します。
- 03描画してグラフを確認する
SVGを書き、重なりやラベルの余白を確認してからPNGをエクスポートし、両方の形式で読みやすさが保たれているか検証します。