bybit-exchange/svg-diagram

これは何？

主な機能

• 01viewBoxの余白、ボックスの高さ、コネクターの形状を含む、手配置SVGのレイアウトルール。
• 02完成したSVGファイルが統一スタイルに沿っているかをチェックする、依存関係ゼロのsvg-lintツール。
• 03検出した値と期待される値に加え、修正案も示す指摘。
• 04ラベルのはみ出しをチェックする、Latin文字とCJK文字それぞれの文字幅テーブル。
• 05CSSクラスを使わず、プレゼンテーション属性で適用する5種類の意味別カラーセット。

ユースケース

• ドキュメント一式を通して一貫性のあるアーキテクチャ図やシーケンス図を、コーディングエージェントに作成させる。
• グリフ欠落の問題を避けながら、中国語ラベル付きの図をMarkdownドキュメントに埋め込む。
• すべての座標がリテラル値なので、SVG図をテキスト差分としてレビューする。

クイックスタート

1. 1

   エージェントにスキルをインストールする

   npx skills add bybit-exchange/svg-diagram -g
2. 2

   図に対してリンターを実行する（インストール不要）

   node ~/.claude/skills/svg-diagram/tools/svg-lint/bin/svg-lint.mjs diagram.svg

使う前に知っておきたいこと

• !リンターはメンテナーが手動で使うツールで、自動実行されることはありません。
• !Claude.aiユーザーにはスキルのテキストのみが提供されます。リンターの使用にはローカル環境のNodeが必要です。

トピック

よくある質問

svg-diagram とは？

コーディングエージェントに、統一されたスタイルで手配置のSVG図を描かせるスキルと依存関係ゼロのリンター。 svg-diagramは、Claude Code、Codex、opencodeなどのコーディングアシスタント向けエージェントスキルです。レイアウトの計算方法、配色、タイポグラフィのルールを提供し、アーキテクチャ図、フローチャート、シーケンス図、データフロー図、ライフサイクル図を、自動レイアウトではなく各要素を明示的に配置したプレーンなSVGとして描けるようにします。

svg-diagram は無料で使えますか？ライセンスは？

svg-diagram は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

svg-diagram は今もメンテナンスされていますか？

半年以内に更新あり。svg-diagram の最終コミットは 2026年9月3日 です。

svg-diagram は何に使えますか？

ドキュメント一式を通して一貫性のあるアーキテクチャ図やシーケンス図を、コーディングエージェントに作成させる。 グリフ欠落の問題を避けながら、中国語ラベル付きの図をMarkdownドキュメントに埋め込む。 すべての座標がリテラル値なので、SVG図をテキスト差分としてレビューする。

svg-diagram のインストール方法は？

エージェントにスキルをインストールする: npx skills add bybit-exchange/svg-diagram -g 図に対してリンターを実行する（インストール不要）: node ~/.claude/skills/svg-diagram/tools/svg-lint/bin/svg-lint.mjs diagram.svg

svg-diagram はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/bybit-exchange/svg-diagram