https://github.com/eimax9668/cardknot
無限のキャンバスでアイデアを整理し、直感的につなぎ合わせることができる思考整理ツールです。
https://github.com/eimax9668/cardknot
mind-mapping note-taking productivity visual-thinking web-app
Last synced: 3 months ago
JSON representation
無限のキャンバスでアイデアを整理し、直感的につなぎ合わせることができる思考整理ツールです。
- Host: GitHub
- URL: https://github.com/eimax9668/cardknot
- Owner: eimax9668
- License: mit
- Created: 2026-01-10T11:54:41.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2026-01-11T03:16:06.000Z (4 months ago)
- Last Synced: 2026-01-11T03:44:13.582Z (4 months ago)
- Topics: mind-mapping, note-taking, productivity, visual-thinking, web-app
- Language: JavaScript
- Homepage: https://cardknot.f5.si
- Size: 1.15 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# CardKnot
思考を結び、アイデアを解き放つ無限キャンバスツール。
CardKnotは、ブラウザ上で直感的にカードを作成・配置・接続し、複雑なアイデアを整理するためのWebアプリケーションです。
## ✨ 特徴
* **無限キャンバス**: 広大なスペースに自由にカードを配置。ズームやパン操作で自在に移動できます。
* **直感的な接続**: カードの端からドラッグするだけで、カード同士を線で結び関係性を可視化できます。
* **リッチコンテンツ**: テキストだけでなく、画像URLやWebリンク（タイトル自動取得）をカードに埋め込めます。
* **プレゼンテーションモード**: 作成したマップをスライドショーとして再生できます。
* **自動保存**: データはブラウザのローカルストレージに自動的に保存されます。
* **その他便利機能**:
* ダークモード対応
* ミニマップによる全体把握
* 自動整列機能
* カードの折りたたみ
* Undo/Redo, コピー＆ペースト対応
## 🚀 使い方
### 基本操作
* **カード追加**: 画面下の「＋」ボタン、またはキャンバスをダブルクリック。
* **移動**: カードをドラッグ。Shiftキーを押しながらドラッグで範囲選択も可能。
* **接続**: カードの左右にある丸いポイントからドラッグして他のカードへ接続。
* **ズーム/パン**: マウスホイールでズーム、背景ドラッグ（またはスペースキー+ドラッグ）でパン移動。
### ショートカットキー
| キー操作 | 動作 |
| --- | --- |
| `Double Click` | カード追加 |
| `Delete` / `Backspace` | 選択したカードを削除 |
| `Ctrl` + `Z` | 元に戻す (Undo) |
| `Ctrl` + `Shift` + `Z` / `Ctrl` + `Y` | やり直し (Redo) |
| `Ctrl` + `C` | コピー |
| `Ctrl` + `V` | 貼り付け |
| `Ctrl` + `A` | 全選択 |
| `Shift` + `Click` | 複数選択 / 選択解除 |
| `Shift` + `Drag` | 範囲選択 |
## 🛠️ 開発・インストール
このプロジェクトは静的なHTML/JS/CSSで構成されていますが、スタイリングにTailwind CSSを使用しています。
### 必要要件
* Node.js (Tailwind CSSのビルドに必要)
### セットアップ
1. リポジトリをクローン
```bash
git clone https://github.com/eimax9668/CardKnot.git
cd CardKnot
```
2. 依存パッケージのインストール
```bash
npm install
```
3. Tailwind CSSのビルド
```bash
npx tailwindcss -i ./style.css -o ./dist/output.css --watch
```
4. `index.html` をブラウザで開く
## 📄 ライセンス
MIT License