Drawlib — コードで描く図解と技術ドキュメント

数字で見る Drawlib の全体像

Drawlib — コードで描く図解と技術ドキュメント

本プレゼンテーションの構成

全6章のロードマップ

• 背景と課題 (第1章): 図解の形骸化を防ぐ Python × Git の統合アプローチ

• 描画エンジン (第2〜4章): 基本図形・34種アイコン群・SmartArts・Charts・構成図

• 多形式出力とAI連携 (第5〜6章): 5つのプロジェクト型・Office出力・AI自己検証ループ

Drawlib — コードで描く図解と技術ドキュメント

従来の作図・ドキュメントツールの限界

開発現場は 差分管理できないGUIツール、表現力が限定されたテキストDSL、文書と分断された描画ライブラリ の三択を強いられ、リリースのたびに設計図が実装から乖離します。

Drawlib — コードで描く図解と技術ドキュメント

Illustration & Documentation as Code

Python と Markdown の統合

• チューリング完全な記述: ループ・変数・utils.py 共通関数を活用

• Markdown 直書き: 原稿内の drawlib ブロックから直接描画

• 決定論的な PR 差分: 文章と図解の更新を同一コミットでレビュー

setup(width=120, height=32)
p = ChevronProcess(style=Styles.Neutral)
for s in ("記述", "変換", "公開"): p.add(s)
p.draw((6, 8), width=108, height=16)
save()

Drawlib — コードで描く図解と技術ドキュメント

既存ツールとの機能比較マトリクス

Drawlib — コードで描く図解と技術ドキュメント

単一リポジトリからあらゆる形式へ一括出力

単一の drawlib.toml と [i18n] 構造パリティ検証により、1つのGitコミットから日英同期された Web・印刷・Office の全成果物を一括コンパイルします。

Drawlib — コードで描く図解と技術ドキュメント

直交座標キャンバスと検証グリッド (-g)

直感的で予測可能な座標設計

• 左下原点 (0, 0): 数学と同じ右が +X・上が +Y の直交座標系。
• 中心アンカー統一: 図形・文字・アイコンすべて (x, y) が中心点。
• 検証グリッド (-g): 目盛り線オーバーレイで配置ズレを即座に確認。

setup(width=100, height=60)
st = Styles.PrimaryFlat
rectangle((50, 30), 36, 22, style=st)
save()

Drawlib — コードで描く図解と技術ドキュメント

43種のプリミティブ図形とコネクタ

Drawlib — コードで描く図解と技術ドキュメント

多言語タイポグラフィと画像処理

多言語フォントと Dimage 処理

• 和欧混植に標準対応: 標準 Font で英数字と日本語を同時に描画。
• 地域別・等幅パック: FontJapanese・FontArabic・FontSourceCode。
• 精密アンカー制御: halign / valign で基準点からの配置を指定。
• Dimage 画像処理: 切り抜き・セピア・モザイクと自動キャッシュ。

Drawlib — コードで描く図解と技術ドキュメント

34スイート・4,500種超のベクターアイコン

Drawlib — コードで描く図解と技術ドキュメント

8色セマンティックスタイルとプリセットテーマ

• 8色ロール体系: Styles.<Color><Variant> が Primary〜Dark の8色と Flat・Bold・Dashed・Neutral を統合。
• 不変 .patch() とテーマ: style.patch(...) で安全に派生作成し、drawlib.toml で全体の配色テーマを一括切替。

Drawlib — コードで描く図解と技術ドキュメント

プロセス・サイクル・ロードマップ

Drawlib — コードで描く図解と技術ドキュメント

KPIカード・リスト・階層・マインドマップ

Drawlib — コードで描く図解と技術ドキュメント

テーブル・コード・カレンダー・世界地図

Drawlib — コードで描く図解と技術ドキュメント

宣言的な棒・折れ線・面チャート

Drawlib — コードで描く図解と技術ドキュメント

円・レーダー・散布図・ヒートマップ

Drawlib — コードで描く図解と技術ドキュメント

GanttChart によるプロジェクト工程管理

• 宣言的なスケジュール定義: Section による工程分割、Task(progress=...) の進捗バー、Milestone をコードで一元管理。
• 依存関係と基準日マーカー: タスク間の直交 Dependency 矢印や、Today・Release などの垂直 Marker を自動描画。

Drawlib — コードで描く図解と技術ドキュメント

ArchitectureDiagram によるクラウド構成図

Drawlib — コードで描く図解と技術ドキュメント

業務フローと通信シーケンス図

Drawlib — コードで描く図解と技術ドキュメント

ドメイン設計：クラス図・ER図・状態遷移図

Drawlib — コードで描く図解と技術ドキュメント

自動座標ソルバー (drawlib.graph)

自動配置と手動微調整のハイブリッド

• 自動座標計算: get_layout() で交差のない (x, y) を算出
• 手動微調整: offset(dx, dy) でブラックボックス化を回避
• 確定座標の出力: print(layout) で座標を確認しコード固定

g = LayerGraph(direction="LR")
g.edge("ingest", "validate")
g.edge("validate", "serve")
layout = g.get_layout(margin=8.0)
layout.offset("serve", dy=-4.0)

Drawlib — コードで描く図解と技術ドキュメント

5種類の専用グラフレイアウトソルバー

Drawlib — コードで描く図解と技術ドキュメント

フレームベースアニメーション (APNG / WebP)

全コンポーネント対応の宣言的アニメーション

• マルチフレーム制御: 宣言的な Animation(fps, loop) エンジン
• 段階的描画 (draw_ratio): 線・SmartArt・チャート・設計図に対応
• 対話型再生制御: <canvas> 上で anim_trigger・anim_pause・A 操作
• 静的出力との両立: PDF・PPTX 変換時に最適フレームを自動抽出

anim = Animation(fps=2.0, loop=0)
for r in [0.4, 0.7, 1.0]:
    series.draw_ratio = r
    with anim.frame():
        chart.draw(xy=(10, 6))

Drawlib — コードで描く図解と技術ドキュメント

用途に応じた5つのプロジェクト種別

Drawlib — コードで描く図解と技術ドキュメント

Web公開：ドキュメント Site と API Catalog

• type = "site"（体系的ドキュメント）: navbar.md による章構成・全文検索・ダークモード・多言語切替を備えたガイドサイト（www.drawlib.com）。
• type = "catalog"（API・スキーマ辞書）: navbar.md 不要で # H1 / バッジ付き ## H2 を自動抽出し / で即時絞り込む2カラム辞書（www.drawlib.com/api）。

Drawlib — コードで描く図解と技術ドキュメント

技術白書：HTML・ベクターPDF・Word出力

長文仕様書・白書 (type = "doc")

• 章ファイルの自動結合: 00_cover.md, 01_intro.md を単一文書へ統合
• 表紙・目次の自動生成: --generate-index で表紙とリンク目次を構築
• 3形式へ同時出力: HTML・A4ベクターPDF・編集可能な .docx を生成

# doc_src/ から3形式を一括ビルド
uv run drawlib build html
uv run drawlib build pdf --generate-index
uv run drawlib build docx --generate-index

Drawlib — コードで描く図解と技術ドキュメント

16:9 スライド・発表者ビュー・PPTX出力

• 2層構造のスライド記述: ::: block で 1920×1080 の視覚ステージを定義し、::: note に発表原稿をGit管理。
• リアルタイム同期とOffice出力: ?presenter=1 で2画面発表者ビューを BroadcastChannel 同期し、PDFと .pptx も出力。