業務SaaS🤖 AI主導公開中
soshikizu
Markdownリストを書くだけで組織図・関係図をリアルタイム自動生成。ログイン不要・データはローカル保存
Next.jsTypeScriptTailwind CSSCanvas 2D APIVercel
// SCREENSHOT — 実際の画面
↗ https://soshikizu.vercel.app/
// VIBE CODING RATIO
💪 自力実装 5%🤖 AI担当 95%
■ 設計・判断・レビュー■ AI実装
「Markdownを書くだけで組織図が描けるツールを作りたい」というテーマをAIに持ち込み、レイアウトアルゴリズム選定・物理アニメーション設計・実装をAIと壁打ちしながら進めた。動作確認とUX判断は自分が行っている。
// BACKGROUND — なぜ作ったか
組織図や関係図を描くとき、専用ツールを使うと操作が面倒で更新コストが高い。「Markdownのリストをそのまま書けば組織図になる」というシンプルなツールをAIと壁打ちしながら設計した。ログイン不要・データはブラウザのローカルに保存するのでサーバーに送信されない設計にした。
// WHAT I DID — 何をやったか
左ペインにMarkdownのリストを書くと右ペインに組織図がリアルタイムで自動描画されるWebアプリを構築した。
主な機能：Tidyツリーレイアウト＋バネ物理アニメーションでなめらかに配置。高解像度（2倍スケール）でのPNGエクスポート。Tab/Shift+Tabでの字下げ・字上げ。カーソル位置に対応するノードをハイライト表示。スマホ対応（タップ操作用ツールバー）。外部描画ライブラリ不使用でCanvas 2D APIのみで実装。
// MY DECISIONS — 自分が設計・判断した部分
「Markdownを書くだけで組織図が描ける」というコンセプトを持ち込み、Tidyツリーレイアウト・バネ物理アニメーション・ローカル保存方式はAIと壁打ちしながら一緒に固めた。動作確認とUX判断は自分が行っている。
// TECH DETAIL — 技術的な工夫
- **Canvas 2D API**：外部描画ライブラリ不使用で組織図をゼロから実装
- **Tidyツリーレイアウト**：階層構造を整理するレイアウトアルゴリズム
- **バネ物理アニメーション**：ノードがなめらかに目標位置へ収束するアニメーション
- **Next.js 16 + Tailwind CSS v4**：App Router・TypeScript完全型安全
// RELEASE NOTES
v1.02026-06
Markdownリスト→組織図リアルタイム生成・PNGエクスポート・スマホ対応
開発開始: 2026-06最終更新: 2026-06