【AI時代の図形】ベクター・直接描画3選 — SVG・CSS Art・Canvas/p5.js徹底比較

当サイトを閲覧いただきありがとうございます。本記事はAI時代にコード管理できる図形シリーズの第2回として、ベクター・直接描画3種を比較解説します。シリーズ全体の一覧は完全ガイドをご覧ください。

前回紹介したMermaidやD2は「テキストを書けば自動でレイアウトしてくれる」ツールでしたが、今回扱うのは座標やスタイルを自分で指定して図形を描く手法です。

表現力は桁違いに高いですが、その分だけ記述量も膨らみます。正直なところ、ダイアグラムの主力として使うには手間がかかりすぎるので、「MermaidやD2では実現できない表現」を補完する手段として割り切るのが現実的です。

ただし、AI時代においてはこの「記述量が多い」という弱点が大幅に軽減されます。AIはSVGやCanvas APIのコード生成が得意なので、「こんな図が欲しい」と自然言語で指示するだけで数十行のコードを書いてくれるのです。従来は手間がかかりすぎて選択肢に入らなかったSVGやCanvasが、AIによってぐっと実用的になりつつあります。

3種比較表

SVG — どれだけ拡大してもきれいな画像形式

SVGはどれだけ拡大してもぼやけない画像形式で、全てのブラウザが標準でサポートしています。PNGやJPEGのような「ピクセルの集まり」ではなく、「四角形を(10, 10)に幅200で描け」のような命令の集まりとして画像を定義するため、どんなサイズでも再計算して綺麗に表示されます。

前回紹介したMermaid、D2、Graphviz等の多くが最終的にSVGを出力しており、コード管理できる図形の「共通出力形式」とも言える存在です。テキストファイルなのでGit管理が可能で、HTMLに直接埋め込むこともできます。

サンプル：基本的な図形

<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">
  <!-- 四角形 -->
  <rect x="10" y="10" width="120" height="80"
        fill="#e3f2fd" stroke="#1976d2" stroke-width="2" rx="8"/>
  <text x="70" y="55" text-anchor="middle"
        font-size="14" fill="#1976d2">サーバー</text>

  <!-- 円 -->
  <circle cx="250" cy="50" r="40"
          fill="#e8f5e9" stroke="#388e3c" stroke-width="2"/>
  <text x="250" y="55" text-anchor="middle"
        font-size="14" fill="#388e3c">DB</text>

  <!-- 矢印線 -->
  <defs>
    <marker id="arrowhead" markerWidth="10" markerHeight="7"
            refX="10" refY="3.5" orient="auto">
      <polygon points="0 0, 10 3.5, 0 7" fill="#666"/>
    </marker>
  </defs>
  <line x1="130" y1="50" x2="205" y2="50"
        stroke="#666" stroke-width="2"
        marker-end="url(#arrowhead)"/>
</svg>

基本図形（rect、circle、line、polygon等）を座標で配置します。矢印は marker 要素で定義します。

サンプル：CSSアニメーション付きSVG

<svg width="300" height="100" xmlns="http://www.w3.org/2000/svg">
  <style>
    .pulse {
      animation: pulse 2s ease-in-out infinite;
    }
    @keyframes pulse {
      0%, 100% { r: 20; opacity: 1; }
      50% { r: 30; opacity: 0.6; }
    }
    .data-flow {
      stroke-dasharray: 10 5;
      animation: flow 1s linear infinite;
    }
    @keyframes flow {
      to { stroke-dashoffset: -15; }
    }
  </style>

  <circle class="pulse" cx="50" cy="50" r="20"
          fill="#4caf50"/>
  <text x="50" y="55" text-anchor="middle"
        font-size="10" fill="white">稼働中</text>

  <line class="data-flow" x1="80" y1="50" x2="200" y2="50"
        stroke="#2196f3" stroke-width="3"/>

  <rect x="210" y="30" width="80" height="40"
        fill="#fff3e0" stroke="#ff9800" stroke-width="2" rx="4"/>
  <text x="250" y="55" text-anchor="middle"
        font-size="12" fill="#e65100">処理中</text>
</svg>

メリット・デメリット

MermaidやD2の A -> B で矢印が引けるのに対して、SVGで矢印を1本描くにはマーカー定義込みで10行以上。記述の冗長さと自動レイアウトが一切ない点は、ダイアグラム目的で使うには相当なハンデです。

それでもSVGが不可欠な理由は、Web標準で全ブラウザがネイティブサポートしている唯一のベクター画像フォーマットだからです。追加ライブラリなしで表示でき、ベクターなのでどれだけ拡大しても劣化せず、CSSやJavaScriptでアニメーションまで付けられる。Mermaid等で生成した図の最終出力もSVGであることが多く、SVGの知識があると微調整できるのは地味に大きいです。

AIとの相性

rect や circle を並べるレベルの図なら、AIでも十分使えるSVGが出てきます。実際にこの記事の基本図形サンプルもAIに下書きを作らせています。

ただし、path 要素のベジェ曲線（d="M... C..." のような座標データ）になるとAIは途端に精度が下がります。座標計算はLLMの苦手分野なので、「簡単な図形やアイコンをSVGで」はアリですが、「複雑なダイアグラムをSVGで」ならMermaidやD2の方がずっと楽です。

CSS Art — CSSだけで図形を描く技法

CSS Artとは、HTMLとCSSだけでイラストや図形を描く技法です。画像ファイルを一切使わず、border-radius、box-shadow、疑似要素（::before / ::after）、clip-path、linear-gradient などCSSの標準機能だけでビジュアルを表現します。

CodePenなどでは非常に精巧なCSS Artが公開されており、フロントエンドエンジニアのスキルショーケースとしても人気があります。

サンプル：サーバーアイコン

<div class="server-icon"></div>

<style>
.server-icon {
  width: 60px;
  height: 80px;
  background: linear-gradient(to bottom, #e3f2fd 0%, #bbdefb 100%);
  border: 2px solid #1976d2;
  border-radius: 4px;
  position: relative;
}
.server-icon::before {
  content: '';
  position: absolute;
  top: 15px;
  left: 10px;
  width: 36px;
  height: 6px;
  background: #1976d2;
  border-radius: 2px;
  box-shadow: 0 14px 0 #1976d2, 0 28px 0 #1976d2;
}
.server-icon::after {
  content: '';
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 8px;
  height: 8px;
  background: #4caf50;
  border-radius: 50%;
}
</style>

1つのdiv要素と疑似要素2つだけで、サーバーのアイコンを表現しています。box-shadow で同じ形状を複数表示するテクニックがポイントです。

サンプル：アーキテクチャ図風レイアウト

<div class="arch-diagram">
  <div class="arch-box client">Client</div>
  <div class="arch-arrow">→</div>
  <div class="arch-box lb">LB</div>
  <div class="arch-arrow">→</div>
  <div class="arch-group">
    <div class="arch-box app">App 1</div>
    <div class="arch-box app">App 2</div>
  </div>
  <div class="arch-arrow">→</div>
  <div class="arch-box db">DB</div>
</div>

<style>
.arch-diagram {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: monospace;
  font-size: 13px;
}
.arch-box {
  padding: 12px 16px;
  border-radius: 6px;
  border: 2px solid;
  text-align: center;
  font-weight: bold;
}
.arch-box.client { background: #e3f2fd; border-color: #1976d2; color: #1976d2; }
.arch-box.lb { background: #f3e5f5; border-color: #7b1fa2; color: #7b1fa2; }
.arch-box.app { background: #e8f5e9; border-color: #388e3c; color: #388e3c; }
.arch-box.db { background: #fff3e0; border-color: #e65100; color: #e65100; }
.arch-group { display: flex; flex-direction: column; gap: 4px; }
.arch-arrow { color: #999; font-size: 20px; }
</style>

FlexboxやGridと組み合わせることで、簡易的なアーキテクチャ図も表現できます。

メリット・デメリット

追加のツールやライブラリが一切不要で、ブラウザとテキストエディタさえあれば始められます。FlexboxやGridと組み合わせればレスポンシブ対応も自然にできるので、UIコンポーネント内でのちょっとした図形表現には重宝します。

とはいえ、ダイアグラムの主力に据えるのはお勧めしません。MermaidやD2なら10秒で描ける図がCSSだと30分以上かかることも珍しくなく、コスト対効果が見合わない場面がほとんどです。::before や box-shadow を駆使したCSS Artは書いた本人でも1週間後に読み解くのが大変で、保守性の低さは覚悟しておいてください。

AIとの相性

AIはCSSの生成が得意なので、サーバーアイコンのような単純な図形なら「CSSだけでサーバーアイコンを描いて」で実用的なコードが返ってきます。ただしCSS Art自体がダイアグラムの主力ではないので、出番はステータスバッジやちょっとしたアイコンくらいに限られるのが正直なところです。

Canvas / p5.js — 動く図・操作できる図を作る

HTML CanvasはJavaScriptでピクセルを直接描画する仕組みで、p5.jsはそれをより直感的に使えるようにしたツールです。

MermaidやD2が「テキストを書けば自動で図が出る」のに対し、Canvas/p5.jsはプログラムで図を描くアプローチです。その分手間はかかりますが、データに応じて動的に変化する図、アニメーション、マウスに反応するインタラクティブな図など、他のツールでは不可能な表現ができます。

サンプル：Canvas APIでフローチャート風の図

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

function drawBox(x, y, w, h, text, color) {
  ctx.fillStyle = color;
  ctx.strokeStyle = '#333';
  ctx.lineWidth = 2;
  ctx.beginPath();
  ctx.roundRect(x, y, w, h, 8);
  ctx.fill();
  ctx.stroke();

  ctx.fillStyle = '#333';
  ctx.font = '14px sans-serif';
  ctx.textAlign = 'center';
  ctx.fillText(text, x + w / 2, y + h / 2 + 5);
}

function drawArrow(fromX, fromY, toX, toY) {
  ctx.strokeStyle = '#666';
  ctx.lineWidth = 2;
  ctx.beginPath();
  ctx.moveTo(fromX, fromY);
  ctx.lineTo(toX, toY);
  ctx.stroke();

  const angle = Math.atan2(toY - fromY, toX - fromX);
  ctx.beginPath();
  ctx.moveTo(toX, toY);
  ctx.lineTo(toX - 10 * Math.cos(angle - 0.3), toY - 10 * Math.sin(angle - 0.3));
  ctx.lineTo(toX - 10 * Math.cos(angle + 0.3), toY - 10 * Math.sin(angle + 0.3));
  ctx.closePath();
  ctx.fillStyle = '#666';
  ctx.fill();
}

drawBox(100, 20, 120, 50, 'ユーザー入力', '#e3f2fd');
drawArrow(160, 70, 160, 100);
drawBox(100, 100, 120, 50, '処理実行', '#e8f5e9');
drawArrow(160, 150, 160, 180);
drawBox(100, 180, 120, 50, '結果表示', '#fff3e0');

サンプル：p5.jsでデータ駆動のグラフ

function setup() {
  createCanvas(500, 300);
  noLoop();
}

function draw() {
  background(255);

  let data = [
    { label: 'Mermaid', value: 95, color: '#4caf50' },
    { label: 'D2', value: 80, color: '#2196f3' },
    { label: 'PlantUML', value: 75, color: '#ff9800' },
    { label: 'Graphviz', value: 70, color: '#9c27b0' },
    { label: 'SVG', value: 60, color: '#f44336' }
  ];

  let barWidth = 60;
  let gap = 20;
  let startX = 50;
  let maxHeight = 200;

  for (let i = 0; i < data.length; i++) {
    let x = startX + i * (barWidth + gap);
    let barHeight = (data[i].value / 100) * maxHeight;
    let y = 250 - barHeight;

    fill(data[i].color);
    noStroke();
    rect(x, y, barWidth, barHeight, 4, 4, 0, 0);

    fill(50);
    textAlign(CENTER);
    textSize(11);
    text(data[i].label, x + barWidth / 2, 270);
    text(data[i].value, x + barWidth / 2, y - 8);
  }
}

データ配列を変更するだけでグラフが更新されるため、動的なデータビジュアライゼーションに適しています。

メリット・デメリット

他のダイアグラムツールとは完全に別カテゴリの表現力を持っています。マウスホバー、クリック、ドラッグに応じたインタラクティブな図を作れるのはCanvasならではで、p5.jsのdraw()ループを使えばスムーズなアニメーションも簡単です。

代償として記述量は桁違いに増えます。MermaidやD2で数行の図がCanvasだと数十〜数百行になりますし、拡大すると画質が劣化するのもSVGとの違いです。静的なダイアグラムが欲しいだけならオーバースペックですが、ユーザーが操作できるインタラクティブな図やリアルタイムアニメーションが必要な場合は出番があります。

AIとの相性

JavaScriptの生成はAIの得意分野なので、p5.jsの setup() / draw() パターンや Canvas APIの基本的な描画コードは問題なく出力されます。ただし座標計算はやはり甘くて、要素が重なったりはみ出したりすることはあります。「大まかな構造をAIに生成させて、座標を手動で微調整する」という使い方が現実的です。

選定ガイド

実践Tips：SVGの最適化

AIやツールが出力したSVGファイルは、不要なメタデータや冗長な属性を含んでいることが多いです。SVGO（SVG Optimizer）を通すとファイルサイズを30〜70%削減できます。

npm install -g svgo
svgo input.svg -o output.svg

特にMermaid CLIやGraphvizが出力するSVGは最適化の余地が大きいので、本番環境に配置する前にSVGOを通しておくとページの読み込みが早くなります。CI/CDに組み込んで自動最適化するのも良い方法です。

導入方法

SVG

SVGは標準技術なので特別なインストールは不要です。テキストエディタで .svg ファイルを作成し、ブラウザで開くだけです。HTMLに直接インラインで埋め込むこともできます。

<!-- インラインSVG -->
<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="blue"/>
</svg>

<!-- 外部ファイル参照 -->
<img src="diagram.svg" alt="ダイアグラム" />

CSS Art

特別なインストールは不要です。HTMLファイルにCSSを書くだけで始められます。

Canvas / p5.js

Canvas APIはHTML5標準で追加インストール不要です。p5.jsを使う場合はCDNから読み込みます。

<script src="https://cdn.jsdelivr.net/npm/p5@1/lib/p5.min.js"></script>
<script>
function setup() { createCanvas(500, 400); }
function draw() { background(220); ellipse(mouseX, mouseY, 50, 50); }
</script>

この記事に関連する記事

まとめ

本記事ではAI時代のコード管理図形として、ベクター・直接描画3種を比較解説しました。如何だったでしょうか。

正直なところ、この3つは「ダイアグラムを描くためのメインツール」ではありません。MermaidやD2に比べると記述量が桁違いに多いので、普段使いには向かないと思います。ただし、Web標準技術ゆえの表現力の高さは他のツールでは代替できません。

SVGは「最終出力フォーマット」として他ツールと組み合わせる場面で、CSS Artは「UIコンポーネント内の図形表現」で、Canvas/p5.jsは「インタラクティブ・動的な図」で、それぞれ出番があります。

次回��テキストアート系���ASCII Art、Ditaa、Svgbob���について解説します。

シリーズ目次 → 『AI時代の図形』完全ガイド

各ツールの詳細は公式サイトも参考にしてください：MDN SVG / MDN CSS / p5.js

それでは次の記事も閲覧いただけると幸いです。