mirror of
https://github.com/OFFIS-ESC/constellation-analyzer
synced 2026-04-27 18:05:51 +00:00
This commit is contained in:
parent
a4e1f3ba51
commit
3426ed174c
1 changed files with 0 additions and 99 deletions
|
|
@ -1,99 +0,0 @@
|
|||
# Quick Start Guide - Constellation Analyzer
|
||||
|
||||
## Get Started in 2 Minutes
|
||||
|
||||
### 1. Install & Run
|
||||
```bash
|
||||
npm install
|
||||
npm run dev
|
||||
```
|
||||
|
||||
The application will open automatically at **http://localhost:3000**
|
||||
|
||||
### 2. Create Your First Constellation
|
||||
|
||||
#### Add Actors (Nodes)
|
||||
1. Click any colored button in the toolbar:
|
||||
- **Person** (Blue) - Individual people
|
||||
- **Organization** (Green) - Companies or groups
|
||||
- **System** (Orange) - Technical systems
|
||||
- **Concept** (Purple) - Abstract ideas
|
||||
|
||||
2. Nodes appear on the canvas - drag them to position
|
||||
|
||||
#### Create Relations (Edges)
|
||||
1. Click and hold on any colored dot (handle) on a node
|
||||
2. Drag your cursor to another node's handle
|
||||
3. Release to create a connection
|
||||
4. The edge appears automatically
|
||||
|
||||
#### Edit Your Graph
|
||||
- **Move nodes**: Click and drag anywhere on the node
|
||||
- **Delete node**: Click to select, press Delete or Backspace
|
||||
- **Delete edge**: Click the edge, press Delete or Backspace
|
||||
- **Pan canvas**: Click and drag on empty space
|
||||
- **Zoom**: Use mouse wheel or trackpad
|
||||
- **Clear all**: Click "Clear Graph" button (with confirmation)
|
||||
|
||||
### 3. Navigation
|
||||
|
||||
- **Controls** (bottom-left corner):
|
||||
- Zoom in/out buttons
|
||||
- Fit view button
|
||||
- Lock/unlock button
|
||||
|
||||
- **MiniMap** (bottom-right corner):
|
||||
- Overview of entire graph
|
||||
- Click to navigate
|
||||
- Drag viewport rectangle
|
||||
|
||||
### 4. Available Commands
|
||||
|
||||
```bash
|
||||
# Development
|
||||
npm run dev # Start dev server (http://localhost:3000)
|
||||
npm run build # Build for production
|
||||
npm run preview # Preview production build
|
||||
npm run lint # Run ESLint
|
||||
|
||||
# Git
|
||||
git status # Check current changes
|
||||
git add . # Stage all changes
|
||||
git commit -m "msg" # Commit changes
|
||||
```
|
||||
|
||||
## Example: Simple Organization Chart
|
||||
|
||||
1. Add a "Person" node (CEO)
|
||||
2. Add three more "Person" nodes (Managers)
|
||||
3. Create edges from CEO to each Manager
|
||||
4. Add "Organization" nodes (Departments)
|
||||
5. Connect Managers to their Departments
|
||||
6. Arrange nodes in hierarchy
|
||||
|
||||
## Tips
|
||||
|
||||
- Use the handles on all four sides of nodes for flexible connections
|
||||
- Different edge types have different visual styles (solid, dashed, dotted)
|
||||
- The graph auto-saves in the browser session (lost on page refresh)
|
||||
- Select multiple nodes by clicking them while dragging
|
||||
|
||||
## Next Steps
|
||||
|
||||
- Read the full **README.md** for detailed documentation
|
||||
- Check **PROJECT_SUMMARY.md** for architecture details
|
||||
- Explore the **src/** folder to understand the code structure
|
||||
- Start customizing node/edge types in **src/stores/graphStore.ts**
|
||||
|
||||
## Need Help?
|
||||
|
||||
- Documentation: See README.md
|
||||
- Architecture: See PROJECT_SUMMARY.md
|
||||
- Project guidance: See CLAUDE.md
|
||||
- Issues: Open an issue on the repository
|
||||
|
||||
---
|
||||
|
||||
**Built with**: React + TypeScript + React Flow + Zustand + Tailwind CSS + Vite
|
||||
|
||||
Happy analyzing!
|
||||
Loading…
Reference in a new issue