# Quick Start Guide

Get up and running with the Diagram Viewer in minutes.

## For Developers

### 1. Clone Repository

```bash
git clone git@git.appmodel.nl:Tour/diagram.git
cd diagram
```

### 2. Setup Environment

```bash
# Create virtual environment
python -m venv .venv

# Activate (choose your platform)
source .venv/bin/activate              # macOS/Linux
.venv\Scripts\activate                 # Windows CMD
source .venv/Scripts/activate          # Windows Git Bash
```

### 3. Install Dependencies

```bash
pip install -r requirements.txt
```

### 4. Generate Diagrams

```bash
# Generate LAN architecture diagram
python lan_architecture.py

# Generate main diagram
python main.py

# View generated files
ls -la *.png
```

### 5. Test Locally

```bash
# Start local web server
python -m http.server 8000 --directory public/

# Open browser
# Navigate to: http://localhost:8000
```

### 6. Make Changes & Deploy

```bash
# Edit diagram code
vim lan_architecture.py

# Commit changes
git add .
git commit -m "Update network diagram"

# Push to deploy (auto-deploys to production)
git push origin main
```

---

## For Operators

### View Live Site

Simply navigate to:
```
https://diagram.appmodel.nl
```

### Manual Deployment

On the server:

```bash
# Trigger deployment
app-deploy diagram

# View logs
tail -f /var/log/app-deploy-diagram.log

# Check status
cd /home/tour/infra/diagram
docker compose ps
```

### View Logs

```bash
# Deployment logs
tail -f /var/log/app-deploy-diagram.log

# Container logs
cd /home/tour/infra/diagram
docker compose logs -f diagram

# Last 100 lines
docker compose logs --tail=100 diagram
```

### Restart Service

```bash
cd /home/tour/infra/diagram

# Restart container
docker compose restart diagram

# Full restart (rebuild)
docker compose down
docker compose up -d --build diagram
```

---

## Common Tasks

### Add New Diagram

1. Create new Python file:
```python
# my_diagram.py
from diagrams import Diagram
from diagrams.onprem.network import Router

with Diagram("My Network", show=False, filename="my_network"):
    Router("Gateway")
```

2. Update Dockerfile if needed (add to RUN command):
```dockerfile
RUN python lan_architecture.py && \
    python main.py && \
    python my_diagram.py
```

3. Commit and push:
```bash
git add my_diagram.py Dockerfile
git commit -m "Add my network diagram"
git push
```

### Update Frontend

1. Edit HTML:
```bash
vim public/index.html
```

2. Test locally:
```bash
python -m http.server 8000 --directory public/
```

3. Deploy:
```bash
git add public/index.html
git commit -m "Update frontend"
git push
```

### Check Container Health

```bash
# Container status
docker compose ps

# Health check
docker inspect diagram-viewer | grep -A 10 Health

# Test endpoint
curl -I https://diagram.appmodel.nl
```

---

## Troubleshooting

### Build Fails

```bash
# Check logs
tail -f /var/log/app-deploy-diagram.log

# Rebuild with verbose output
cd /home/tour/infra/diagram
docker compose build --no-cache --progress=plain diagram
```

### Site Not Loading

```bash
# Check container
docker compose ps

# Check Traefik routing
docker logs traefik | grep diagram

# Test DNS
nslookup diagram.appmodel.nl

# Test directly
curl http://localhost:PORT
```

### Changes Not Visible

```bash
# Force rebuild
cd /home/tour/infra/diagram
docker compose up -d --build --force-recreate diagram

# Clear browser cache
# Ctrl+Shift+R (Windows/Linux)
# Cmd+Shift+R (macOS)
```

---

## Next Steps

- Read the [Home](Home.md) page for comprehensive documentation
- Review [DEPLOY_SERVER_SETUP.md](../DEPLOY_SERVER_SETUP.md) for deployment details
- Check [Diagrams Library docs](https://diagrams.mingrammer.com/) for icon options
- Explore the [Mermaid editor](https://diagram.appmodel.nl) for live diagram editing

---

**Need Help?** Check the [Troubleshooting](Home.md#troubleshooting) section or review deployment logs.