240 lines
3.8 KiB
Markdown
240 lines
3.8 KiB
Markdown
# 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.
|