図解ライブラリ：型を選ぶと、矢印が重ならない図解を自動で描く

記事や資料に入れる図解を、以前は箱や矢印の位置を手で決めて描いていました。矢印がほかの箱に被る、文字が枠からはみ出す、使える型が少ない。1枚ずつ直していると、図解を入れるたびに作業時間が読めなくなります。そこで、型を選んで中身を入れると、決まった規律で図解を描くライブラリを作りました。

この道具でできること

• 構造の型20種（流れ・比較・構造・関係）と、SWOTや5フォースなどのフレームワーク64本から選んで描けます
• SVG（拡大しても崩れない画像の形式）で描き、文字のはみ出しや矢印の重なりを座標で検査します。問題があれば警告を返します
• 記事の幅に縮められる前提で、文字を大きめに取ります
• 線画のアイコン35個を、箱や円に添えられます
• 記事用のPNGと、型の一覧ページをまとめて書き出せます。スライドを作る自作の道具とサイトの図解で、同じコードを使っています

使い方の流れ

1. 図で伝えたいことを1文に決め、記事かスライドか、使い先を決めます
2. 型の違う2〜3案を出し、その中から1つ選びます
3. 警告が出ていないことを確かめ、SVGかPNGで受け取ります

仕組み

Node.js（JavaScriptをPCで動かすための環境）で書いています。画像素材は使わず、SVGの線と文字だけで描きます。配置は自前の升目（グリッド）で決めます。

描くときの規律は、ライブラリの側で守らせています。余白は短い辺の7.5%を必ず空け、矢印は隣り合う升目の隙間だけを通します。文字が収まらなければ0.95倍ずつ縮め、描いたあとに要素どうしの重なりを座標で検査します。PNGへの書き出しには、ブラウザを自動で動かす Playwright を使っています。

すべての型とフレームワークが警告なしで描けることは、テストで確かめています。アイコンは Lucide（ISCライセンス）を使っています。PCの中で完結し、外には何も送りません。

作ってみて分かったこと

図解は、記事に入ると思った以上に小さくなります。幅1600の図は記事の中では600ほどの幅で表示されるので、元の4割弱です。本文の文字は34px以上を下限にして、縮んでも読める大きさを先に決めました。

図の高さは、比率ではなく中身で決めるようにしました。中身が少ないのに16:9の枠を守ると、間延びした図になります。描いたあとに外側の余白を切り詰め、幅だけ固定しています。

見出しは、語の途中で折らないことにしました。まず1行に収まる大きさまで文字を下げ、それでも入らなければ「・」や「／」の後ろなど、言葉の切れ目で折ります。

1つの図で伝えることは1つにする、という決まりもあります。何を伝えるかを先に1文で決めると、型を選ぶのが早くなります。何を描くかは私が決め、どう描くかの規律は道具に任せる、という分け方です。

同じ考え方で、あなたの会社の仕事に合わせた道具も作れます。

資料の部品箱：サイトと同じ見た目で、営業資料とホワイトペーパーを組む →

あわせて読む: 自作の道具の一覧｜資料の部品箱：サイトと同じ見た目で、営業資料とホワイトペーパーを組む