できること
どの例も、実際によくある困りごとから始めて、何が変わるか、どう始めるかまでを書いています。
コードレビューで、文書の変更を目で見る
「バイナリファイルが変更されました」ではなく、変わったページを見てレビューできます。
- こんな人に
- 仕様書や設計資料、見積書を Git のリポジトリで管理しているチーム。
- いま困っていること
- PowerPoint や Excel、PDF を変えても、プルリクエストには「バイナリファイルが変更されました」としか出ません。中身を確かめるには、ファイルを落として自分で開くしかありません。
- document-svg を使うと
- 変わった文書がページごとのSVGになり、ワークフローの実行結果からまとめてダウンロードできます。文書ごとのページ数と警告の数がコメントに付くので、よく見るべきファイルがひと目で分かります。
- 始め方
- 付属のワークフローを呼び出す短い設定ファイルを、リポジトリに1つ追加します。手元に何かを入れる必要はありません。
アップロードされたファイルを自分のアプリで見せる
サーバーに Office を入れず、有料のビューアも使わずに、文書を表示できます。
- こんな人に
- 社内システムやWebサービスで、ユーザーが上げた資料を表示したい開発者。
- いま困っていること
- Office ファイルをプレビューする方法は、たいてい3つしかありません。サーバーに Office や変換ソフトを入れるか、有料のビューアSDKを契約するか、外部の変換サービスにファイルを送るかです。
- document-svg を使うと
- Node.js や Python から呼ぶだけで、ページごとのSVGが返ってきます。あとは画像として表示するだけ。変換はサーバーの中で終わるので、ファイルが外に出ることはありません。
- 始め方
- npm か pip でパッケージを入れて、変換の関数を呼びます。PDF・Word・Excel・PowerPoint だけなら、ブラウザの中で変換する WebAssembly 版もあります(自分でビルドが必要です)。
図をコードと一緒に最新に保つ
ドキュメントを作り直すたびに、図もテキストから作り直されます。
- こんな人に
- 設計書や Wiki に構成図を載せているエンジニア。
- いま困っていること
- 図を別のツールで描いて画像を貼ると、コードが変わっても図だけ古いまま残ります。誰がいつ直したのかも追えません。
- document-svg を使うと
- 図を draw.io、Mermaid、PlantUML、D2、Graphviz のテキストでコードの隣に置き、ドキュメントをビルドするたびにSVGにします。図の変更も、コードと同じようにレビューできます。
- 始め方
- ドキュメントのビルド手順に、図を変換するコマンドを1行足します。
CADがなくても図面やモデルを確認する
図面、基板、3DモデルをWebページで確認できます。
- こんな人に
- 製造や建設の現場で、図面を確認はするけれど自分では描かない人。その人たちに向けて社内ツールを作る開発者。
- いま困っていること
- 図面を1枚確かめたいだけでも、高価なCADソフトとライセンスが要ります。確認する人全員の分をそろえるのは現実的ではありません。
- document-svg を使うと
- 間取り図(DXF)、プリント基板(Gerber)、加工パス(G-code)、3Dモデル(STL、OBJ、STEP)などを、Webページやダッシュボードに表示できます。
- 始め方
- 対応形式の一覧で、お使いのファイル形式がどこまで描けるかを確かめてください。一部の形式は、図全体ではなく中身の概要だけを表示します。
データをレポート用の画像にする
表、グラフ、数式が、何度作っても同じ見た目になります。
- こんな人に
- 定期レポートや技術資料を自動で作っている人。
- いま困っていること
- 表やグラフを画像にする手順が人によってばらばらで、作るたびに見た目が少しずつ変わります。
- document-svg を使うと
- CSVの表、グラフのデータ、LaTeX の数式から、何度作っても同じ見た目のSVGができます。拡大してもぼやけないので、印刷にもそのまま使えます。
- 始め方
- データのファイルを用意して、ほかの文書と同じコマンドで変換します。
AIアシスタントに文書を読ませる
スクリーンショットやブラウザ操作のかわりに、確実な手順をひとつ渡せます。
- こんな人に
- AIエージェントに資料の確認や作成を任せたい人。
- いま困っていること
- AIに文書を見せようとすると、スクリーンショットを撮るか、ブラウザを自動で操作することになります。どちらも失敗しやすく、AIがどこまで読めたのかも分かりません。
- document-svg を使うと
- ファイルをページに変換して、レポートで抜けを確かめる。この決まった手順をAIに渡せます。変換できなかった部分があれば、AI自身がレポートを読んで気づけます。
- 始め方
- Claude Code や Codex 用のプラグインを入れるか、コマンドをそのままAIに使わせます。
編集した図を Office や CAD に戻す
SVGを PowerPoint、Word、Excel、draw.io、CAD のファイルにまとめられます。
- こんな人に
- SVGを作ったり編集したりするツールを作っていて、結果を Office や CAD のファイルで渡したい開発者。
- いま困っていること
- SVGのファイルをいくつも渡されても、受け取った人はいつものソフトで開けません。
- document-svg を使うと
- SVGを PowerPoint、Word、Excel、PDF、draw.io、DXF のファイルにまとめられます。戻るのは見た目で、段落やセル、数式までは組み立て直しません。draw.io の図は、元の図のデータをSVGに埋め込んでおけば、編集できる状態で戻ります。
- 始め方
- SVGのフォルダを指定して、書き戻しのコマンドを実行します。