Repolode
投稿する
Aryanutkarsh

Aryanutkarsh/SeeCode

短いJSON仕様から、HTML・SVG・PNG・GIF・MP4で出力できる、動かして探索できる図を生成するエージェントスキル。

代替できる製品:LucidchartMiro

GitHub で見る
スター
656
フォーク
35
未解決の Issue
0
最終コミット
一昨日

これは何？

SeeCodeは、Claude Codeなどのコーディングエージェント向けのスキルです。表示したいシステムやプロセスを説明すると、エージェントが短いJSON仕様を作成し、SeeCodeがそれを単体で動作するHTML図として描画します。ビューアでは、ホバーによる接続の追跡、クリックで詳細パネルにフォーカス、2つのノード間の経路再生、レイヤーのフィルタリング、ステップごとのプレゼンテーションに対応しています。

アーキテクチャ、シーケンス図、フローチャート、ER図、状態遷移図、ガントチャート、カンバン、UMLクラス図、Sankey図、複数のアイソメトリック図など、約45種類の図に対応しています。チャートはCSVまたはJSONファイルから値を読み込めます。既存のMermaid、Graphviz、PlantUML、D2、draw.io、Excalidraw、BPMN、SQL、Prisma、DBML、OpenAPIのソースを、SeeCodeのスタイルで描き直すこともできます。Webサイトやデザイントークンからブランドカラーやフォントを学習でき、ライトテーマとダークテーマも組み込まれています。

SVG、PNG、JPEG、GIF、MP4で出力できます。ブラウザーの「Export」メニューはインストール不要です。コマンドラインツールにはNode 20以降が必要で、ラスター画像や動画の出力にはローカルのChromeまたはEdgeを使用します。

主な機能

  • 01短いJSON仕様から、アニメーション付きのインタラクティブなHTML図を生成
  • 02アーキテクチャ図やシーケンス図からチャート、アイソメトリック図まで、約45種類の図に対応
  • 03Mermaid、Graphviz、PlantUML、D2、draw.io、Excalidrawなどの形式を取り込み、描き直し
  • 04Webサイトやデザイントークンからブランドカラーとフォントを学習。ライトテーマとダークテーマにも対応
  • 05SVG、PNG、JPEG、GIF、MP4で出力

ユースケース

  • コーディングエージェントを使いながら、サービスのアーキテクチャやリクエストの流れをチームメイトに説明する
  • 既存のMermaid図やdraw.io図を、スライドや設計ドキュメント向けに洗練された図へ描き直す
  • ブランドスタイルを統一した図を、スライド、Confluence、README向けに作成する
  • 生データをモデルに渡さずに、CSVデータからチャートを作成する

トピック

#diagrams#agent-skills#claude-code#architecture-diagram#data-visualization#svg#mermaid#ai-agents#claude-skills#codex

よくある質問

SeeCode とは？
短いJSON仕様から、HTML・SVG・PNG・GIF・MP4で出力できる、動かして探索できる図を生成するエージェントスキル。 SeeCodeは、Claude Codeなどのコーディングエージェント向けのスキルです。表示したいシステムやプロセスを説明すると、エージェントが短いJSON仕様を作成し、SeeCodeがそれを単体で動作するHTML図として描画します。ビューアでは、ホバーによる接続の追跡、クリックで詳細パネルにフォーカス、2つのノード間の経路再生、レイヤーのフィルタリング、ステップごとのプレゼンテーションに対応しています。
SeeCode は無料で使えますか？ライセンスは？
SeeCode は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。
SeeCode は今もメンテナンスされていますか？
活発にメンテナンス中。SeeCode の最終コミットは 2026年10月17日 です。
SeeCode は何に使えますか？
コーディングエージェントを使いながら、サービスのアーキテクチャやリクエストの流れをチームメイトに説明する 既存のMermaid図やdraw.io図を、スライドや設計ドキュメント向けに洗練された図へ描き直す ブランドスタイルを統一した図を、スライド、Confluence、README向けに作成する 生データをモデルに渡さずに、CSVデータからチャートを作成する
SeeCode はどこで入手できますか？
ソースコードとインストール手順は GitHub にあります：https://github.com/Aryanutkarsh/SeeCode

概要はプロジェクトの README をもとに AI が生成しています。GitHub の数値は毎日更新されます。

関連プロジェクト