Compare commits

...

32 Commits

Author SHA1 Message Date
c69694031c test 2025-12-02 18:04:27 +01:00
05dbc38507 test 2025-12-02 18:03:22 +01:00
3233ce1998 test 2025-12-02 18:02:06 +01:00
7a12f25d0a test 2025-12-02 17:57:23 +01:00
bc7e0644e3 test 2025-12-02 17:54:15 +01:00
f6929726f4 test 2025-12-02 17:46:21 +01:00
55c4d88608 test 2025-12-02 17:43:41 +01:00
0f07e73d7d test 2025-12-02 17:41:40 +01:00
0c0b4effea test 2025-12-02 17:35:37 +01:00
ff6500e709 test 2025-12-02 17:34:49 +01:00
Gitea Deploy
eca11a82a9 Fix build script to copy static files 2025-12-02 17:30:01 +01:00
root
e3b67752b5 Test auto-deploy 2025-12-02 16:25:22 +01:00
3dd1e4d576 nTest auto-deploy 2025-12-02 16:05:12 +01:00
ce48826dd8 npm 2025-12-02 15:54:22 +01:00
cf7541b5ff npm 2025-12-02 15:52:23 +01:00
b55fdb532b npm 2025-12-02 15:45:09 +01:00
8653c510b7 npm 2025-12-02 15:44:35 +01:00
bd3eb14edc viewer 2025-12-02 14:08:53 +01:00
f6c2cb0a8a test.. 2025-12-02 13:50:28 +01:00
c2646d9680 test.. 2025-12-02 13:40:22 +01:00
2ac206ebd9 test.. 2025-12-02 13:27:26 +01:00
f6ccae25ca wiki 2025-12-02 13:21:59 +01:00
eb12cc4dd5 Images 2025-12-02 13:21:42 +01:00
aa02ea67aa wiki 2025-12-02 13:12:29 +01:00
ca3a190e32 work? 2025-12-02 12:54:36 +01:00
7a4e310acc work? 2025-12-02 12:51:30 +01:00
dba487efd4 Add wiki submodule 2025-12-02 12:45:57 +01:00
7fe32f1715 Initial wiki content 2025-12-02 12:45:56 +01:00
449006b1df Remove wiki from main repo 2025-12-02 12:44:49 +01:00
5ae2fba1e4 work? 2025-12-02 12:44:03 +01:00
77b951d415 Add wiki submodule 2025-12-02 12:43:05 +01:00
be532fd78f Remove wiki files from main repo to prepare for submodule 2025-12-02 12:43:05 +01:00
31 changed files with 7862 additions and 4514 deletions

1
.app-type Normal file
View File

@@ -0,0 +1 @@
type=static-fe

5
.gitignore vendored
View File

@@ -10,10 +10,9 @@ __pycache__/
*.so *.so
.Python .Python
node_modules/
# Generated diagram files # Generated diagram files
*.png
*.pdf *.pdf
*.svg
*.gv *.gv
# IDE # IDE
@@ -27,7 +26,7 @@ __pycache__/
.DS_Store .DS_Store
Thumbs.db Thumbs.db
# Distribution / packaging # Distribution // packaging
dist/ dist/
build/ build/
*.egg-info/ *.egg-info/

View File

@@ -1,61 +1,23 @@
# Multi-stage Dockerfile for static frontend deployment # -- Build stage --
# Stage 1: Build the diagrams FROM node:20-alpine AS build
FROM python:3.11-slim AS builder
# Install system dependencies for Graphviz
RUN apt-get update && \
apt-get install -y --no-install-recommends \
graphviz \
&& rm -rf /var/lib/apt/lists/*
# Set working directory
WORKDIR /app WORKDIR /app
# Copy requirements and install Python dependencies # Alleen package-bestanden eerst (better caching)
COPY requirements.txt . COPY package*.json ./
RUN pip install --no-cache-dir -r requirements.txt RUN npm ci || npm install
# Copy source files # Dan de rest van de code
COPY *.py . COPY . .
# Generate diagrams (outputs will be in /app) # LET OP: pas dit aan als jouw build-script anders heet
RUN python lan_architecture.py && \ RUN npm run build
python main.py
# Verify generated files exist # -- Serve stage --
RUN ls -la *.png || echo "Warning: No PNG files generated"
# Stage 2: Serve with Nginx
FROM nginx:alpine FROM nginx:alpine
WORKDIR /usr/share/nginx/html
# Remove default nginx static assets # Pas dit aan als jouw outputmap niet 'dist' is (bijv. 'build')
RUN rm -rf /usr/share/nginx/html/* COPY --from=build /app/dist ./
# Copy generated diagram files from builder stage # Optioneel: eigen nginx.conf voor SPA routing
COPY --from=builder /app/*.png /usr/share/nginx/html/ # COPY nginx.conf /etc/nginx/conf.d/default.conf
# Copy any HTML/CSS files for the frontend
COPY public/ /usr/share/nginx/html/
# Create a simple nginx config for serving static files
RUN echo 'server { \
listen 80; \
server_name _; \
root /usr/share/nginx/html; \
index index.html; \
location / { \
try_files $uri $uri/ /index.html; \
} \
# Enable CORS if needed \
add_header Access-Control-Allow-Origin *; \
}' > /etc/nginx/conf.d/default.conf
# Expose port 80
EXPOSE 80
# Health check
HEALTHCHECK --interval=30s --timeout=3s --start-period=5s --retries=3 \
CMD wget --quiet --tries=1 --spider http://localhost/ || exit 1
# Start nginx
CMD ["nginx", "-g", "daemon off;"]

378
Home.md
View File

@@ -1,378 +0,0 @@
# Diagram Viewer Wiki
Welcome to the **Diagram Viewer** project documentation.
This project provides a static web interface for viewing and managing network architecture diagrams generated with Python's `diagrams` library.
## 📚 Contents
- [Getting Started](#getting-started)
- [Development Guide](#development-guide)
- [Deployment Guide](#deployment-guide)
- [Architecture Overview](#architecture-overview)
---
## Getting Started
### Prerequisites
- Python 3.8+
- Graphviz
- Docker (for deployment)
### Quick Start
```bash
# Clone repository
git clone git@git.appmodel.nl:Tour/diagram.git
cd diagram
# Create virtual environment
python -m venv .venv
source .venv/bin/activate # Windows: .venv\Scripts\activate
# Install dependencies
pip install -r requirements.txt
# Generate diagrams
python lan_architecture.py
python main.py
```
---
## Development Guide
### Project Structure
```
diagram/
├── Dockerfile # Multi-stage build for production
├── docker-compose.yml # Docker Compose configuration
├── requirements.txt # Python dependencies
├── lan_architecture.py # LAN architecture diagram generator
├── main.py # Main diagram generator
├── public/
│ └── index.html # Live Mermaid diagram editor
└── wiki/ # Documentation (this wiki)
```
### Adding New Diagrams
1. Create a new Python file (e.g., `network_diagram.py`)
2. Import required components from `diagrams` library
3. Define your architecture using context managers
4. Run the script to generate PNG output
Example:
```python
from diagrams import Diagram, Cluster
from diagrams.onprem.network import Router
from diagrams.generic.device import Mobile
with Diagram("My Network", show=False, filename="my_network"):
router = Router("Gateway")
device = Mobile("Phone")
device >> router
```
### Testing Locally
```bash
# Generate diagrams
python lan_architecture.py
# View output
ls -la *.png
# Test with local web server
python -m http.server 8000 --directory public/
# Open: http://localhost:8000
```
### Available Icons
The `diagrams` library provides icons from multiple providers:
- **OnPrem**: Network, compute, storage, etc.
- **Cloud**: AWS, Azure, GCP services
- **Generic**: Network devices, blank nodes
- **Custom**: Use your own images
See: [Diagrams Documentation](https://diagrams.mingrammer.com/docs/nodes/overview)
---
## Deployment Guide
### Overview
The project uses a fully automated Docker-based deployment pipeline:
1. **Develop** on local machine
2. **Commit & Push** to Gitea
3. **Auto-Deploy** via post-receive hook
4. **Build** multi-stage Docker image
5. **Serve** via Traefik reverse proxy
### Deployment Steps
#### 1. Initial Setup
```bash
# On server: Create app structure
apps-create diagram static-fe
# This creates:
# - /opt/apps/diagram (git repository)
# - /home/tour/infra/diagram/docker-compose.yml
```
#### 2. Configure Gitea Hook
In repository **Settings → Git Hooks → post-receive**:
```bash
#!/usr/bin/env bash
/usr/local/bin/app-deploy diagram
```
#### 3. Deploy
Simply push to Gitea:
```bash
git push origin main
```
The server automatically:
- Pulls latest code
- Rebuilds Docker image
- Restarts container
- Updates live site at https://diagram.appmodel.nl
### Manual Deployment
If needed:
```bash
# On server
app-deploy diagram
# Or step-by-step
cd /opt/apps/diagram
git pull
cd /home/tour/infra/diagram
docker compose up -d --build diagram
```
### Monitoring
```bash
# View deployment logs
tail -f /var/log/app-deploy-diagram.log
# View container logs
cd /home/tour/infra/diagram
docker compose logs -f diagram
# Check container status
docker compose ps
```
---
## Architecture Overview
### Infrastructure
```
┌─────────────────────────────────────────────┐
│ Production Architecture │
├─────────────────────────────────────────────┤
│ │
│ ┌──────────────┐ │
│ │ Gitea │ (Source of Truth) │
│ │ Tour/diagram │ │
│ └──────┬───────┘ │
│ │ git push │
│ ↓ │
│ ┌──────────────┐ │
│ │ Post-Receive │ (Auto-trigger) │
│ │ Hook │ │
│ └──────┬───────┘ │
│ │ app-deploy diagram │
│ ↓ │
│ ┌──────────────────────┐ │
│ │ /opt/apps/diagram/ │ │
│ │ (Git Repository) │ │
│ └──────┬───────────────┘ │
│ │ git pull │
│ ↓ │
│ ┌──────────────────────┐ │
│ │ Docker Build Process │ │
│ │ ┌─────────────────┐ │ │
│ │ │ Stage 1: Build │ │ │
│ │ │ - Python │ │ │
│ │ │ - Graphviz │ │ │
│ │ │ - Generate PNGs │ │ │
│ │ └─────────────────┘ │ │
│ │ ┌─────────────────┐ │ │
│ │ │ Stage 2: Serve │ │ │
│ │ │ - Nginx │ │ │
│ │ │ - Static files │ │ │
│ │ └─────────────────┘ │ │
│ └──────┬───────────────┘ │
│ │ container starts │
│ ↓ │
│ ┌──────────────────────┐ │
│ │ diagram-viewer │ │
│ │ Container :80 │ │
│ └──────┬───────────────┘ │
│ │ traefik_net │
│ ↓ │
│ ┌──────────────────────┐ │
│ │ Traefik │ │
│ │ Reverse Proxy │ │
│ │ + Let's Encrypt │ │
│ └──────┬───────────────┘ │
│ │ HTTPS │
│ ↓ │
│ diagram.appmodel.nl │
│ │
└─────────────────────────────────────────────┘
```
### Network Topology
The diagram viewer documents our home lab infrastructure:
- **LAN 192.168.1.0/24**: Main network
- Core server (192.168.1.159): Traefik, Gitea, Dokku, Auction stack, MI50/Ollama
- DNS server (192.168.1.163): AdGuard, Artifactory, CI runner
- Home Assistant (192.168.1.193)
- Atlas worker (192.168.1.100)
- IoT devices
- **Tether 192.168.137.0/24**: Isolated subnet
- Hermes worker (192.168.137.239)
- Plato worker (192.168.137.163)
### Services
| Service | URL | Description |
|---------|-----|-------------|
| Diagram Viewer | https://diagram.appmodel.nl | This application |
| Gitea | https://git.appmodel.nl | Git hosting |
| Auction Frontend | https://auction.appmodel.nl | Auction platform |
| Aupi API | https://aupi.appmodel.nl | Backend API |
| Dokku | https://dokku.lan | PaaS platform |
---
## Additional Resources
### Related Documentation
- [DEPLOY_SERVER_SETUP.md](../DEPLOY_SERVER_SETUP.md) - Detailed deployment guide
- [DEPLOYMENT_GUIDE.md](../DEPLOYMENT_GUIDE.md) - General deployment pipeline
- [README.md](../README.md) - Project overview
### External Links
- [Diagrams Library](https://diagrams.mingrammer.com/)
- [Graphviz](https://graphviz.org/)
- [Mermaid.js](https://mermaid.js.org/) (used in live editor)
- [Traefik Documentation](https://doc.traefik.io/traefik/)
- [Docker Compose](https://docs.docker.com/compose/)
### Contributing
To contribute to this project:
1. Create a feature branch
2. Make your changes
3. Test locally
4. Submit a pull request in Gitea
5. Wait for automatic deployment after merge
---
## Troubleshooting
### Common Issues
#### Diagrams Not Generating
**Problem**: Python script fails to generate PNG files
**Solution**:
```bash
# Check Graphviz installation
dot -V
# Reinstall if needed
# macOS: brew install graphviz
# Ubuntu: sudo apt-get install graphviz
# Windows: choco install graphviz
# Verify Python dependencies
pip list | grep diagrams
pip install --upgrade diagrams
```
#### Container Build Fails
**Problem**: Docker build fails during deployment
**Solution**:
```bash
# Check deployment logs
tail -f /var/log/app-deploy-diagram.log
# Rebuild manually with verbose output
cd /home/tour/infra/diagram
docker compose build --no-cache --progress=plain diagram
```
#### Site Not Accessible
**Problem**: Container runs but site not reachable
**Solution**:
1. Check DNS: `nslookup diagram.appmodel.nl`
2. Verify Traefik labels: `docker inspect diagram-viewer | grep traefik`
3. Check Traefik logs: `docker logs traefik`
4. Test container directly: `curl http://localhost:PORT`
#### Changes Not Reflected
**Problem**: Pushed changes but site unchanged
**Solution**:
```bash
# Force rebuild on server
cd /home/tour/infra/diagram
docker compose down
docker compose up -d --build --force-recreate diagram
# Clear browser cache
# Ctrl+Shift+R (Windows/Linux) or Cmd+Shift+R (macOS)
```
---
## Contact & Support
For issues, questions, or suggestions:
1. Check this wiki
2. Review [DEPLOY_SERVER_SETUP.md](../DEPLOY_SERVER_SETUP.md)
3. Check container logs
4. Contact the infrastructure team
---
**Last Updated**: 2025-12-02
**Version**: 1.0.0
**Maintainer**: Tour

View File

@@ -1,239 +0,0 @@
# 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.

View File

@@ -1,28 +1,26 @@
version: '3.8'
services: services:
diagram: viewer:
build: build:
context: . context: /opt/apps/viewer
dockerfile: Dockerfile dockerfile: Dockerfile
container_name: diagram-viewer container_name: viewer
restart: unless-stopped restart: unless-stopped
networks: networks:
- traefik_net - traefik_net
labels: labels:
- "traefik.enable=true" - "traefik.enable=true"
- "traefik.http.routers.diagram.rule=Host(`diagram.appmodel.nl`)" - "traefik.http.routers.viewer.rule=Host(`viewer.appmodel.nl`)"
- "traefik.http.routers.diagram.entrypoints=websecure" - "traefik.http.routers.viewer.entrypoints=websecure"
- "traefik.http.routers.diagram.tls=true" - "traefik.http.routers.viewer.tls=true"
- "traefik.http.routers.diagram.tls.certresolver=letsencrypt" - "traefik.http.services.viewer.loadbalancer.server.port=80"
- "traefik.http.services.diagram.loadbalancer.server.port=80" - "traefik.http.routers.viewer-http.rule=Host(`viewer.appmodel.nl`)"
# Optional: mount logs - "traefik.http.routers.viewer-http.entrypoints=web"
volumes: - "traefik.http.routers.viewer-http.middlewares=viewer-https"
- ./logs:/var/log/nginx - "traefik.http.middlewares.viewer-https.redirectscheme.scheme=https"
# Optional: environment variables - "traefik.http.routers.auction.tls.certresolver=letsencrypt",
environment: - "traefik.http.middlewares.viewer-https.redirectscheme.permanent=true"
- TZ=Europe/Amsterdam
networks: networks:
traefik_net: traefik_net:
external: true external: true
name: traefik_net

View File

@@ -2,7 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Home-Lab diagram Mermaid + Kroki (Graphviz)</title> <title>Home-Lab viewer Mermaid + Kroki (Graphviz)</title>
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<style> <style>
:root{--bg:#f7f9fc;--text:#222;--accent:#0d6efd} :root{--bg:#f7f9fc;--text:#222;--accent:#0d6efd}
@@ -32,7 +32,7 @@
<script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script>
</head> </head>
<body> <body>
<header>🏠 Home-Lab diagram editable in browser (localStorage auto-saved)</header> <header>🏠 Home-Lab viewer editable in browser (localStorage auto-saved)</header>
<div class="wrap"> <div class="wrap">
<!-- ---- LEFT: EDITOR ---- --> <!-- ---- LEFT: EDITOR ---- -->

Binary file not shown.

After

Width:  |  Height:  |  Size: 276 KiB

4651
package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

9
package.json Normal file
View File

@@ -0,0 +1,9 @@
{
"name": "viewer",
"version": "1.0.0",
"description": "",
"maintainers": ["michael@appmodel.nl"],
"scripts": {
"build": "mkdir -p dist && cp -r public/* dist/"
}
}

BIN
public/home.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 148 KiB

BIN
public/img.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 131 KiB

View File

@@ -1,3 +1,4 @@
<!-- test321 -->
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
@@ -262,3 +263,4 @@ render();
</script> </script>
</body> </body>
</html> </html>
<!-- Auto-deployed at $(date122`) -->

Binary file not shown.

After

Width:  |  Height:  |  Size: 284 KiB

40
test.md
View File

@@ -1,40 +0,0 @@
┌─────────────────────────────────────────────────────────────────────┐
│ 🌐 Internet / Cloud │
└────────────────┬────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────────────┐
│ 🛜 Router (hub.lan) - 192.168.1.1 │
│ Gateway & DHCP │
└────────────────┬────────────────────────────────────────────────────┘
┌────────────┴────────────┬──────────────┬──────────────┐
▼ ▼ ▼ ▼
┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐
│ LAN │ │ LAN │ │ LAN │ │ LAN │
│ 192.168.│ │ Infra & │ │ Home │ │ IoT & │
│ 1.x │ │ DNS │ │ Assist │ │ Workers │
│ │ │ │ │ │ │ │
│ │ │ │ │ │ │ │
│ ┌────┐ │ │ ┌────┐ │ │ ┌────┐ │ │ ┌────┐ │
│ │Core│ │ │ │DNS │ │ │ │ HA │ │ │ │Atlas│ │
│ │ Srv│ │ │ │Host│ │ │ │Host│ │ │ │ │ │
│ └┬───┘ │ │ └┬───┘ │ │ └┬───┘ │ │ └┬───┘ │
│ │ │ │ │ │ │ │ │ │ │ │
│ ┌─▼──┐ │ │ ┌─▼──┐ │ │ ┌─▼──┐ │ │ │ │
│ │Dock│ │ │ │AdGr│ │ │ │Hass│ │ │ │ │
│ │er │ │ │ │d │ │ │ │ │ │ │ │ │
│ └────┘ │ │ └────┘ │ │ └────┘ │ │ │ │
│ │ │ │ │ │ │ │
└──────────┘ └──────────┘ └──────────┘ └──────────┘
│ ┌─────────────────────────────────────────────────────┐
└──►│ Tether Subnet 192.168.137.x │
│ ┌──────────┐ ┌──────────┐ │
│ │ Hermes │ │ Plato │ │
│ │ Worker │ │ Worker │ │
│ └──────────┘ └──────────┘ │
└─────────────────────────────────────────────────────┘
Developer Laptops
(Windows/WSL)

View File

@@ -72,35 +72,35 @@ Located in: **Settings → Git Hooks → post-receive**
```bash ```bash
#!/usr/bin/env bash #!/usr/bin/env bash
/usr/local/bin/app-deploy diagram /usr/local/bin/app-deploy viewer
``` ```
#### 3. App Deploy Script (Server) #### 3. App Deploy Script (Server)
Runs as Linux user `git`: Runs as Linux user `git`:
```bash ```bash
app-deploy diagram app-deploy viewer
``` ```
This script performs: This script performs:
1. `cd /opt/apps/diagram` 1. `cd /opt/apps/viewer`
2. `git pull --ff-only` from `git@git.appmodel.nl:Tour/diagram.git` 2. `git pull --ff-only` from `git@git.appmodel.nl:Tour/viewer.git`
3. `cd /home/tour/infra/diagram` 3. `cd /home/tour/infra/viewer`
4. `docker compose up -d --build diagram` 4. `docker compose up -d --build viewer`
#### 4. Docker Build (Server) #### 4. Docker Build (Server)
Multi-stage build process: Multi-stage build process:
- **Stage 1**: Build diagrams using Python + Graphviz - **Stage 1**: Build viewer using Python + Graphviz
- **Stage 2**: Serve with Nginx - **Stage 2**: Serve with Nginx
#### 5. Traefik Routing (Server) #### 5. Traefik Routing (Server)
Traefik automatically detects the container via labels and publishes: Traefik automatically detects the container via labels and publishes:
``` ```
https://diagram.appmodel.nl https://viewer.appmodel.nl
``` ```
#### 6. DNS Resolution (AdGuard) #### 6. DNS Resolution (AdGuard)
AdGuard resolves `diagram.appmodel.nl` → Build server IP AdGuard resolves `viewer.appmodel.nl` → Build server IP
Result: Both internal and external clients use the same URL. Result: Both internal and external clients use the same URL.
@@ -108,7 +108,7 @@ Result: Both internal and external clients use the same URL.
``` ```
/opt/apps/ /opt/apps/
└── diagram/ # Git repository (pulled from Gitea) └── viewer/ # Git repository (pulled from Gitea)
├── Dockerfile ├── Dockerfile
├── docker-compose.yml ├── docker-compose.yml
├── requirements.txt ├── requirements.txt
@@ -118,12 +118,12 @@ Result: Both internal and external clients use the same URL.
└── index.html └── index.html
/home/tour/infra/ /home/tour/infra/
└── diagram/ └── viewer/
├── docker-compose.yml # Docker Compose config (may differ from repo) ├── docker-compose.yml # Docker Compose config (may differ from repo)
└── logs/ # Nginx logs (optional) └── logs/ # Nginx logs (optional)
/var/log/ /var/log/
└── app-deploy-diagram.log # Deployment logs └── app-deploy-viewer.log # Deployment logs
``` ```
## Setup Instructions ## Setup Instructions
@@ -133,19 +133,19 @@ Result: Both internal and external clients use the same URL.
1. Navigate to: https://git.appmodel.nl 1. Navigate to: https://git.appmodel.nl
2. Create new repository: 2. Create new repository:
- **Owner**: `Tour` - **Owner**: `Tour`
- **Name**: `diagram` - **Name**: `viewer`
- **Visibility**: Private - **Visibility**: Private
### 2. Initialize Local Repository ### 2. Initialize Local Repository
```bash ```bash
# On dev machine # On dev machine
git clone git@git.appmodel.nl:Tour/diagram.git git clone git@git.appmodel.nl:Tour/viewer.git
cd diagram cd viewer
# Add project files # Add project files
git add Dockerfile docker-compose.yml requirements.txt *.py public/ git add Dockerfile docker-compose.yml requirements.txt *.py public/
git commit -m "Initial commit: diagram viewer" git commit -m "Initial commit: viewer"
git push origin main git push origin main
``` ```
@@ -153,23 +153,23 @@ git push origin main
```bash ```bash
# On server as appropriate user # On server as appropriate user
sudo -u git mkdir -p /opt/apps/diagram sudo -u git mkdir -p /opt/apps/viewer
sudo -u git git clone git@git.appmodel.nl:Tour/diagram.git /opt/apps/diagram sudo -u git git clone git@git.appmodel.nl:Tour/viewer.git /opt/apps/viewer
mkdir -p /home/tour/infra/diagram mkdir -p /home/tour/infra/viewer
cp /opt/apps/diagram/docker-compose.yml /home/tour/infra/diagram/ cp /opt/apps/viewer/docker-compose.yml /home/tour/infra/viewer/
``` ```
### 4. Configure Gitea Post-Receive Hook ### 4. Configure Gitea Post-Receive Hook
1. Go to: https://git.appmodel.nl/Tour/diagram 1. Go to: https://git.appmodel.nl/Tour/viewer
2. Navigate to: **Settings → Git Hooks** 2. Navigate to: **Settings → Git Hooks**
3. Select: **post-receive** 3. Select: **post-receive**
4. Add script: 4. Add script:
```bash ```bash
#!/usr/bin/env bash #!/usr/bin/env bash
/usr/local/bin/app-deploy diagram /usr/local/bin/app-deploy viewer
``` ```
5. Save and test 5. Save and test
@@ -178,24 +178,24 @@ cp /opt/apps/diagram/docker-compose.yml /home/tour/infra/diagram/
Add DNS record in AdGuard: Add DNS record in AdGuard:
``` ```
diagram.appmodel.nl → <server-ip> viewer.appmodel.nl → <server-ip>
``` ```
### 6. Test Deployment ### 6. Test Deployment
```bash ```bash
# Manual test on server # Manual test on server
app-deploy diagram app-deploy viewer
# Verify container is running # Verify container is running
cd /home/tour/infra/diagram cd /home/tour/infra/viewer
docker compose ps docker compose ps
# Check logs # Check logs
docker compose logs -f diagram docker compose logs -f viewer
# Test endpoint # Test endpoint
curl -I https://diagram.appmodel.nl curl -I https://viewer.appmodel.nl
``` ```
## Docker Configuration ## Docker Configuration
@@ -231,21 +231,21 @@ CMD ["nginx", "-g", "daemon off;"]
version: '3.8' version: '3.8'
services: services:
diagram: viewer:
build: build:
context: . context: .
dockerfile: Dockerfile dockerfile: Dockerfile
container_name: diagram-viewer container_name: viewer
restart: unless-stopped restart: unless-stopped
networks: networks:
- traefik_net - traefik_net
labels: labels:
- "traefik.enable=true" - "traefik.enable=true"
- "traefik.http.routers.diagram.rule=Host(`diagram.appmodel.nl`)" - "traefik.http.routers.viewer.rule=Host(`viewer.appmodel.nl`)"
- "traefik.http.routers.diagram.entrypoints=websecure" - "traefik.http.routers.viewer.entrypoints=websecure"
- "traefik.http.routers.diagram.tls=true" - "traefik.http.routers.viewer.tls=true"
- "traefik.http.routers.diagram.tls.certresolver=letsencrypt" - "traefik.http.routers.viewer.tls.certresolver=letsencrypt"
- "traefik.http.services.diagram.loadbalancer.server.port=80" - "traefik.http.services.viewer.loadbalancer.server.port=80"
networks: networks:
traefik_net: traefik_net:
@@ -274,7 +274,7 @@ python lan_architecture.py
# Commit and push # Commit and push
git add . git add .
git commit -m "Update diagram architecture" git commit -m "Update viewer architecture"
git push git push
``` ```
@@ -295,13 +295,13 @@ If needed, manually trigger deployment:
```bash ```bash
# On server # On server
app-deploy diagram app-deploy viewer
# Or manually # Or manually
cd /opt/apps/diagram cd /opt/apps/viewer
git pull git pull
cd /home/tour/infra/diagram cd /home/tour/infra/viewer
docker compose up -d --build diagram docker compose up -d --build viewer
``` ```
## Monitoring & Troubleshooting ## Monitoring & Troubleshooting
@@ -310,39 +310,39 @@ docker compose up -d --build diagram
```bash ```bash
# Deployment logs # Deployment logs
tail -f /var/log/app-deploy-diagram.log tail -f /var/log/app-deploy-viewer.log
# Container logs # Container logs
cd /home/tour/infra/diagram cd /home/tour/infra/viewer
docker compose logs -f diagram docker compose logs -f viewer
# Nginx access logs (if volume mounted) # Nginx access logs (if volume mounted)
tail -f /home/tour/infra/diagram/logs/access.log tail -f /home/tour/infra/viewer/logs/access.log
``` ```
### Check Container Status ### Check Container Status
```bash ```bash
cd /home/tour/infra/diagram cd /home/tour/infra/viewer
# List running containers # List running containers
docker compose ps docker compose ps
# Inspect container # Inspect container
docker compose exec diagram sh docker compose exec viewer sh
# Test nginx config # Test nginx config
docker compose exec diagram nginx -t docker compose exec viewer nginx -t
``` ```
### Debug Build Issues ### Debug Build Issues
```bash ```bash
# Rebuild without cache # Rebuild without cache
docker compose build --no-cache diagram docker compose build --no-cache viewer
# View build output # View build output
docker compose up --build diagram docker compose up --build viewer
# Check image layers # Check image layers
docker image history diagram-viewer docker image history diagram-viewer
@@ -356,7 +356,7 @@ docker image history diagram-viewer
**Solution**: Verify `requirements.txt` is correct **Solution**: Verify `requirements.txt` is correct
```bash ```bash
cd /opt/apps/diagram cd /opt/apps/viewer
cat requirements.txt cat requirements.txt
``` ```
@@ -366,7 +366,7 @@ cat requirements.txt
**Solution**: Check if files were copied correctly **Solution**: Check if files were copied correctly
```bash ```bash
docker compose exec diagram ls -la /usr/share/nginx/html/ docker compose exec viewer ls -la /usr/share/nginx/html/
``` ```
#### 3. Traefik Not Routing #### 3. Traefik Not Routing
@@ -375,8 +375,8 @@ docker compose exec diagram ls -la /usr/share/nginx/html/
**Solution**: **Solution**:
- Verify container is on `traefik_net`: `docker network inspect traefik_net` - Verify container is on `traefik_net`: `docker network inspect traefik_net`
- Check Traefik labels: `docker inspect diagram-viewer | grep traefik` - Check Traefik labels: `docker inspect viewer | grep traefik`
- Verify DNS: `nslookup diagram.appmodel.nl` - Verify DNS: `nslookup viewer.appmodel.nl`
#### 4. Git Pull Fails #### 4. Git Pull Fails
@@ -384,7 +384,7 @@ docker compose exec diagram ls -la /usr/share/nginx/html/
**Solution**: **Solution**:
- Check SSH keys for git user: `sudo -u git ssh -T git@git.appmodel.nl` - Check SSH keys for git user: `sudo -u git ssh -T git@git.appmodel.nl`
- Verify remote: `cd /opt/apps/diagram && git remote -v` - Verify remote: `cd /opt/apps/viewer && git remote -v`
## Security Considerations ## Security Considerations
@@ -407,7 +407,7 @@ For apps requiring secrets:
```yaml ```yaml
# In docker-compose.yml # In docker-compose.yml
services: services:
diagram: viewer:
environment: environment:
- SECRET_KEY=${SECRET_KEY} - SECRET_KEY=${SECRET_KEY}
env_file: env_file:
@@ -416,8 +416,8 @@ services:
Create `.env` file on server: Create `.env` file on server:
```bash ```bash
echo "SECRET_KEY=your-secret-here" > /home/tour/infra/diagram/.env echo "SECRET_KEY=your-secret-here" > /home/tour/infra/viewer/.env
chmod 600 /home/tour/infra/diagram/.env chmod 600 /home/tour/infra/viewer/.env
``` ```
## Scaling & Future Improvements ## Scaling & Future Improvements
@@ -490,7 +490,7 @@ Add monitoring stack:
| Service | URL | | Service | URL |
|---------|-----| |---------|-----|
| Gitea | https://git.appmodel.nl | | Gitea | https://git.appmodel.nl |
| Diagram Viewer | https://diagram.appmodel.nl | | Diagram Viewer | https://viewer.appmodel.nl |
| Traefik Dashboard | https://traefik.appmodel.nl/dashboard/ | | Traefik Dashboard | https://traefik.appmodel.nl/dashboard/ |
## Support ## Support

View File

@@ -25,8 +25,8 @@ This project provides a static web interface for viewing and managing network ar
```bash ```bash
# Clone repository # Clone repository
git clone git@git.appmodel.nl:Tour/diagram.git git clone git@git.appmodel.nl:Tour/viewer.git
cd diagram cd viewer
# Create virtual environment # Create virtual environment
python -m venv .venv python -m venv .venv
@@ -47,7 +47,7 @@ python main.py
### Project Structure ### Project Structure
``` ```
diagram/ viewer/
├── Dockerfile # Multi-stage build for production ├── Dockerfile # Multi-stage build for production
├── docker-compose.yml # Docker Compose configuration ├── docker-compose.yml # Docker Compose configuration
├── requirements.txt # Python dependencies ├── requirements.txt # Python dependencies
@@ -121,11 +121,11 @@ The project uses a fully automated Docker-based deployment pipeline:
```bash ```bash
# On server: Create app structure # On server: Create app structure
apps-create diagram static-fe apps-create viewer static-fe
# This creates: # This creates:
# - /opt/apps/diagram (git repository) # - /opt/apps/viewer (git repository)
# - /home/tour/infra/diagram/docker-compose.yml # - /home/tour/infra/viewer/docker-compose.yml
``` ```
#### 2. Configure Gitea Hook #### 2. Configure Gitea Hook
@@ -134,7 +134,7 @@ In repository **Settings → Git Hooks → post-receive**:
```bash ```bash
#!/usr/bin/env bash #!/usr/bin/env bash
/usr/local/bin/app-deploy diagram /usr/local/bin/app-deploy viewer
``` ```
#### 3. Deploy #### 3. Deploy
@@ -149,7 +149,7 @@ The server automatically:
- Pulls latest code - Pulls latest code
- Rebuilds Docker image - Rebuilds Docker image
- Restarts container - Restarts container
- Updates live site at https://diagram.appmodel.nl - Updates live site at https://viewer.appmodel.nl
### Manual Deployment ### Manual Deployment
@@ -157,24 +157,24 @@ If needed:
```bash ```bash
# On server # On server
app-deploy diagram app-deploy viewer
# Or step-by-step # Or step-by-step
cd /opt/apps/diagram cd /opt/apps/viewer
git pull git pull
cd /home/tour/infra/diagram cd /home/tour/infra/viewer
docker compose up -d --build diagram docker compose up -d --build viewer
``` ```
### Monitoring ### Monitoring
```bash ```bash
# View deployment logs # View deployment logs
tail -f /var/log/app-deploy-diagram.log tail -f /var/log/app-deploy-viewer.log
# View container logs # View container logs
cd /home/tour/infra/diagram cd /home/tour/infra/viewer
docker compose logs -f diagram docker compose logs -f viewer
# Check container status # Check container status
docker compose ps docker compose ps
@@ -193,7 +193,7 @@ docker compose ps
│ │ │ │
│ ┌──────────────┐ │ │ ┌──────────────┐ │
│ │ Gitea │ (Source of Truth) │ │ │ Gitea │ (Source of Truth) │
│ │ Tour/diagram │ │ │ │ Tour/viewer │ │
│ └──────┬───────┘ │ │ └──────┬───────┘ │
│ │ git push │ │ │ git push │
│ ↓ │ │ ↓ │
@@ -201,10 +201,10 @@ docker compose ps
│ │ Post-Receive │ (Auto-trigger) │ │ │ Post-Receive │ (Auto-trigger) │
│ │ Hook │ │ │ │ Hook │ │
│ └──────┬───────┘ │ │ └──────┬───────┘ │
│ │ app-deploy diagram │ │ app-deploy viewer
│ ↓ │ │ ↓ │
│ ┌──────────────────────┐ │ │ ┌──────────────────────┐ │
│ │ /opt/apps/diagram/ │ │ │ │ /opt/apps/viewer/ │ │
│ │ (Git Repository) │ │ │ │ (Git Repository) │ │
│ └──────┬───────────────┘ │ │ └──────┬───────────────┘ │
│ │ git pull │ │ │ git pull │
@@ -238,7 +238,7 @@ docker compose ps
│ └──────┬───────────────┘ │ │ └──────┬───────────────┘ │
│ │ HTTPS │ │ │ HTTPS │
│ ↓ │ │ ↓ │
diagram.appmodel.nl │ viewer.appmodel.nl │
│ │ │ │
└─────────────────────────────────────────────┘ └─────────────────────────────────────────────┘
``` ```
@@ -262,7 +262,7 @@ The diagram viewer documents our home lab infrastructure:
| Service | URL | Description | | Service | URL | Description |
|---------|-----|-------------| |---------|-----|-------------|
| Diagram Viewer | https://diagram.appmodel.nl | This application | | Diagram Viewer | https://viewer.appmodel.nl | This application |
| Gitea | https://git.appmodel.nl | Git hosting | | Gitea | https://git.appmodel.nl | Git hosting |
| Auction Frontend | https://auction.appmodel.nl | Auction platform | | Auction Frontend | https://auction.appmodel.nl | Auction platform |
| Aupi API | https://aupi.appmodel.nl | Backend API | | Aupi API | https://aupi.appmodel.nl | Backend API |
@@ -328,11 +328,11 @@ pip install --upgrade diagrams
**Solution**: **Solution**:
```bash ```bash
# Check deployment logs # Check deployment logs
tail -f /var/log/app-deploy-diagram.log tail -f /var/log/app-deploy-viewer.log
# Rebuild manually with verbose output # Rebuild manually with verbose output
cd /home/tour/infra/diagram cd /home/tour/infra/viewer
docker compose build --no-cache --progress=plain diagram docker compose build --no-cache --progress=plain viewer
``` ```
#### Site Not Accessible #### Site Not Accessible
@@ -340,8 +340,8 @@ docker compose build --no-cache --progress=plain diagram
**Problem**: Container runs but site not reachable **Problem**: Container runs but site not reachable
**Solution**: **Solution**:
1. Check DNS: `nslookup diagram.appmodel.nl` 1. Check DNS: `nslookup viewer.appmodel.nl`
2. Verify Traefik labels: `docker inspect diagram-viewer | grep traefik` 2. Verify Traefik labels: `docker inspect viewer-viewer | grep traefik`
3. Check Traefik logs: `docker logs traefik` 3. Check Traefik logs: `docker logs traefik`
4. Test container directly: `curl http://localhost:PORT` 4. Test container directly: `curl http://localhost:PORT`
@@ -352,9 +352,9 @@ docker compose build --no-cache --progress=plain diagram
**Solution**: **Solution**:
```bash ```bash
# Force rebuild on server # Force rebuild on server
cd /home/tour/infra/diagram cd /home/tour/infra/viewer
docker compose down docker compose down
docker compose up -d --build --force-recreate diagram docker compose up -d --build --force-recreate viewer
# Clear browser cache # Clear browser cache
# Ctrl+Shift+R (Windows/Linux) or Cmd+Shift+R (macOS) # Ctrl+Shift+R (Windows/Linux) or Cmd+Shift+R (macOS)

View File

@@ -7,8 +7,8 @@ Get up and running with the Diagram Viewer in minutes.
### 1. Clone Repository ### 1. Clone Repository
```bash ```bash
git clone git@git.appmodel.nl:Tour/diagram.git git clone git@git.appmodel.nl:Tour/viewer.git
cd diagram cd viewer
``` ```
### 2. Setup Environment ### 2. Setup Environment
@@ -74,7 +74,7 @@ git push origin main
Simply navigate to: Simply navigate to:
``` ```
https://diagram.appmodel.nl https://viewer.appmodel.nl
``` ```
### Manual Deployment ### Manual Deployment
@@ -83,13 +83,13 @@ On the server:
```bash ```bash
# Trigger deployment # Trigger deployment
app-deploy diagram app-deploy viewer
# View logs # View logs
tail -f /var/log/app-deploy-diagram.log tail -f /var/log/app-deploy-viewer.log
# Check status # Check status
cd /home/tour/infra/diagram cd /home/tour/infra/viewer
docker compose ps docker compose ps
``` ```
@@ -97,27 +97,27 @@ docker compose ps
```bash ```bash
# Deployment logs # Deployment logs
tail -f /var/log/app-deploy-diagram.log tail -f /var/log/app-deploy-viewer.log
# Container logs # Container logs
cd /home/tour/infra/diagram cd /home/tour/infra/viewer
docker compose logs -f diagram docker compose logs -f viewer
# Last 100 lines # Last 100 lines
docker compose logs --tail=100 diagram docker compose logs --tail=100 viewer
``` ```
### Restart Service ### Restart Service
```bash ```bash
cd /home/tour/infra/diagram cd /home/tour/infra/viewer
# Restart container # Restart container
docker compose restart diagram docker compose restart viewer
# Full restart (rebuild) # Full restart (rebuild)
docker compose down docker compose down
docker compose up -d --build diagram docker compose up -d --build viewer
``` ```
--- ---
@@ -176,10 +176,10 @@ git push
docker compose ps docker compose ps
# Health check # Health check
docker inspect diagram-viewer | grep -A 10 Health docker inspect viewer | grep -A 10 Health
# Test endpoint # Test endpoint
curl -I https://diagram.appmodel.nl curl -I https://viewer.appmodel.nl
``` ```
--- ---
@@ -190,11 +190,11 @@ curl -I https://diagram.appmodel.nl
```bash ```bash
# Check logs # Check logs
tail -f /var/log/app-deploy-diagram.log tail -f /var/log/app-deploy-viewer.log
# Rebuild with verbose output # Rebuild with verbose output
cd /home/tour/infra/diagram cd /home/tour/infra/viewer
docker compose build --no-cache --progress=plain diagram docker compose build --no-cache --progress=plain viewer
``` ```
### Site Not Loading ### Site Not Loading
@@ -204,10 +204,10 @@ docker compose build --no-cache --progress=plain diagram
docker compose ps docker compose ps
# Check Traefik routing # Check Traefik routing
docker logs traefik | grep diagram docker logs traefik | grep viewer
# Test DNS # Test DNS
nslookup diagram.appmodel.nl nslookup viewer.appmodel.nl
# Test directly # Test directly
curl http://localhost:PORT curl http://localhost:PORT
@@ -217,8 +217,8 @@ curl http://localhost:PORT
```bash ```bash
# Force rebuild # Force rebuild
cd /home/tour/infra/diagram cd /home/tour/infra/viewer
docker compose up -d --build --force-recreate diagram docker compose up -d --build --force-recreate viewer
# Clear browser cache # Clear browser cache
# Ctrl+Shift+R (Windows/Linux) # Ctrl+Shift+R (Windows/Linux)
@@ -232,7 +232,7 @@ docker compose up -d --build --force-recreate diagram
- Read the [Home](Home.md) page for comprehensive documentation - Read the [Home](Home.md) page for comprehensive documentation
- Review [DEPLOY_SERVER_SETUP.md](../DEPLOY_SERVER_SETUP.md) for deployment details - Review [DEPLOY_SERVER_SETUP.md](../DEPLOY_SERVER_SETUP.md) for deployment details
- Check [Diagrams Library docs](https://diagrams.mingrammer.com/) for icon options - Check [Diagrams Library docs](https://diagrams.mingrammer.com/) for icon options
- Explore the [Mermaid editor](https://diagram.appmodel.nl) for live diagram editing - Explore the [Mermaid editor](https://viewer.appmodel.nl) for live diagram editing
--- ---

View File

@@ -35,7 +35,7 @@ git commit -m "Initialize wiki with documentation"
git push origin master git push origin master
# 4. View on Gitea # 4. View on Gitea
# Navigate to: https://git.appmodel.nl/Tour/diagram/wiki # Navigate to: https://git.appmodel.nl/Tour/viewer/wiki
``` ```
### Option 2: Use Git Submodule (Bidirectional Sync) ### Option 2: Use Git Submodule (Bidirectional Sync)
@@ -43,8 +43,8 @@ git push origin master
Keep the wiki as a submodule in the main repository for easy synchronization. Keep the wiki as a submodule in the main repository for easy synchronization.
```bash ```bash
# In the main diagram repository # In the main viewer repository
cd /c/vibe/diagram cd /c/vibe/viewer
# Remove local wiki folder # Remove local wiki folder
rm -rf wiki/ rm -rf wiki/
@@ -88,13 +88,13 @@ Similar to submodule but integrates the wiki history into the main repository.
```bash ```bash
# Add wiki as subtree # Add wiki as subtree
git subtree add --prefix=wiki git@git.appmodel.nl:Tour/diagram.wiki.git master --squash git subtree add --prefix=wiki git@git.appmodel.nl:Tour/viewer.wiki.git master --squash
# Push changes to wiki # Push changes to wiki
git subtree push --prefix=wiki git@git.appmodel.nl:Tour/diagram.wiki.git master git subtree push --prefix=wiki git@git.appmodel.nl:Tour/viewer.wiki.git master
# Pull changes from wiki # Pull changes from wiki
git subtree pull --prefix=wiki git@git.appmodel.nl:Tour/diagram.wiki.git master --squash git subtree pull --prefix=wiki git@git.appmodel.nl:Tour/viewer.wiki.git master --squash
``` ```
### Option 4: Automated Sync Script ### Option 4: Automated Sync Script
@@ -106,7 +106,7 @@ Create `sync-wiki.sh`:
#!/bin/bash #!/bin/bash
# sync-wiki.sh - Sync local wiki with Gitea # sync-wiki.sh - Sync local wiki with Gitea
WIKI_REPO="git@git.appmodel.nl:Tour/diagram.wiki.git" WIKI_REPO="git@git.appmodel.nl:Tour/viewer.wiki.git"
WIKI_DIR="wiki" WIKI_DIR="wiki"
TEMP_WIKI="/tmp/gitea-wiki-$$" TEMP_WIKI="/tmp/gitea-wiki-$$"
@@ -145,7 +145,7 @@ For your deployment pipeline, I recommend **Option 1** with a manual push:
### Step-by-Step Setup ### Step-by-Step Setup
1. **Create wiki repository on Gitea** (if not exists): 1. **Create wiki repository on Gitea** (if not exists):
- Go to: https://git.appmodel.nl/Tour/diagram - Go to: https://git.appmodel.nl/Tour/viewer
- Click "Wiki" tab - Click "Wiki" tab
- Create first page (triggers wiki repo creation) - Create first page (triggers wiki repo creation)
@@ -153,11 +153,11 @@ For your deployment pipeline, I recommend **Option 1** with a manual push:
```bash ```bash
# Clone wiki repository # Clone wiki repository
cd /c/vibe cd /c/vibe
git clone git@git.appmodel.nl:Tour/diagram.wiki.git git clone git@git.appmodel.nl:Tour/viewer.wiki.git
# Copy your wiki files # Copy your wiki files
cd diagram.wiki cd viewer.wiki
cp ../diagram/wiki/*.md . cp ../viewer/wiki/*.md .
# Verify files # Verify files
ls -la ls -la
@@ -174,7 +174,7 @@ git push origin master
``` ```
3. **Verify on Gitea**: 3. **Verify on Gitea**:
- Navigate to: https://git.appmodel.nl/Tour/diagram/wiki - Navigate to: https://git.appmodel.nl/Tour/viewer/wiki
- You should see your wiki pages - You should see your wiki pages
4. **Keep local wiki in main repo** (optional): 4. **Keep local wiki in main repo** (optional):
@@ -226,13 +226,13 @@ To automatically sync wiki on deployment, add to Gitea post-receive hook:
#!/usr/bin/env bash #!/usr/bin/env bash
# Deploy main app # Deploy main app
/usr/local/bin/app-deploy diagram /usr/local/bin/app-deploy viewer
# Sync wiki (if wiki/ folder exists in repo) # Sync wiki (if wiki/ folder exists in repo)
if [ -d "/opt/apps/diagram/wiki" ]; then if [ -d "/opt/apps/viewer/wiki" ]; then
cd /tmp cd /tmp
git clone git@git.appmodel.nl:Tour/diagram.wiki.git gitea-wiki-$$ git clone git@git.appmodel.nl:Tour/viewer.wiki.git gitea-wiki-$$
cp /opt/apps/diagram/wiki/*.md /tmp/gitea-wiki-$$/ cp /opt/apps/viewer/wiki/*.md /tmp/gitea-wiki-$$/
cd /tmp/gitea-wiki-$$ cd /tmp/gitea-wiki-$$
git add . git add .
if ! git diff --staged --quiet; then if ! git diff --staged --quiet; then
@@ -249,24 +249,24 @@ fi
Based on your current setup, here's what to do: Based on your current setup, here's what to do:
```bash ```bash
# 1. Navigate to your diagram project # 1. Navigate to your viewer project
cd /c/vibe/diagram cd /c/vibe/viewer
# 2. Clone the wiki repository (for viewer, adjust as needed) # 2. Clone the wiki repository (for viewer, adjust as needed)
cd .. cd ..
git clone git@git.appmodel.nl:Tour/diagram.wiki.git git clone git@git.appmodel.nl:Tour/viewer.wiki.git
# 3. Copy wiki files # 3. Copy wiki files
cp diagram/wiki/*.md diagram.wiki/ cp viewer/wiki/*.md viewer.wiki/
# 4. Push to Gitea # 4. Push to Gitea
cd diagram.wiki cd viewer.wiki
git add . git add .
git commit -m "Initialize wiki with deployment documentation" git commit -m "Initialize wiki with deployment documentation"
git push origin master git push origin master
# 5. Verify # 5. Verify
# Open: https://git.appmodel.nl/Tour/diagram/wiki # Open: https://git.appmodel.nl/Tour/viewer/wiki
``` ```
## Maintaining Both Wikis ## Maintaining Both Wikis
@@ -276,9 +276,9 @@ If you want to keep both local and Gitea wikis in sync:
### Manual Sync (Simple) ### Manual Sync (Simple)
```bash ```bash
# After editing local wiki files # After editing local wiki files
cd /c/vibe/diagram/wiki cd /c/vibe/viewer/wiki
cp *.md /c/vibe/diagram.wiki/ cp *.md /c/vibe/viewer.wiki/
cd /c/vibe/diagram.wiki cd /c/vibe/viewer.wiki
git add . git add .
git commit -m "Update documentation" git commit -m "Update documentation"
git push git push
@@ -288,7 +288,7 @@ git push
```json ```json
{ {
"scripts": { "scripts": {
"sync-wiki": "cp wiki/*.md ../diagram.wiki/ && cd ../diagram.wiki && git add . && git commit -m 'Sync wiki' && git push" "sync-wiki": "cp wiki/*.md ../viewer.wiki/ && cd ../viewer.wiki && git add . && git commit -m 'Sync wiki' && git push"
} }
} }
``` ```
@@ -299,8 +299,8 @@ Or create a `Makefile`:
sync-wiki: sync-wiki:
@echo "Syncing wiki to Gitea..." @echo "Syncing wiki to Gitea..."
@cp wiki/*.md ../diagram.wiki/ @cp wiki/*.md ../viewer.wiki/
@cd ../diagram.wiki && git add . && git commit -m "Sync wiki from main repo" && git push @cd ../viewer.wiki && git add . && git commit -m "Sync wiki from main repo" && git push
@echo "Wiki synced successfully!" @echo "Wiki synced successfully!"
``` ```
@@ -320,11 +320,11 @@ Usage: `make sync-wiki`
### Wiki Repository Doesn't Exist ### Wiki Repository Doesn't Exist
Create the wiki first in Gitea UI: Create the wiki first in Gitea UI:
1. Go to repository: https://git.appmodel.nl/Tour/diagram 1. Go to repository: https://git.appmodel.nl/Tour/viewer
2. Click "Wiki" tab 2. Click "Wiki" tab
3. Click "Create New Page" 3. Click "Create New Page"
4. Create a dummy page (will be overwritten) 4. Create a dummy page (will be overwritten)
5. Now you can clone `diagram.wiki.git` 5. Now you can clone `viewer.wiki.git`
### Permission Denied ### Permission Denied
@@ -337,7 +337,7 @@ ssh -T git@git.appmodel.nl
If both local and Gitea wiki are edited: If both local and Gitea wiki are edited:
```bash ```bash
cd diagram.wiki cd viewer.wiki
git pull origin master git pull origin master
# Resolve conflicts manually # Resolve conflicts manually
git add . git add .

View File

@@ -1,378 +0,0 @@
# Diagram Viewer Wiki
Welcome to the **Diagram Viewer** project documentation.
This project provides a static web interface for viewing and managing network architecture diagrams generated with Python's `diagrams` library.
## 📚 Contents
- [Getting Started](#getting-started)
- [Development Guide](#development-guide)
- [Deployment Guide](#deployment-guide)
- [Architecture Overview](#architecture-overview)
---
## Getting Started
### Prerequisites
- Python 3.8+
- Graphviz
- Docker (for deployment)
### Quick Start
```bash
# Clone repository
git clone git@git.appmodel.nl:Tour/diagram.git
cd diagram
# Create virtual environment
python -m venv .venv
source .venv/bin/activate # Windows: .venv\Scripts\activate
# Install dependencies
pip install -r requirements.txt
# Generate diagrams
python lan_architecture.py
python main.py
```
---
## Development Guide
### Project Structure
```
diagram/
├── Dockerfile # Multi-stage build for production
├── docker-compose.yml # Docker Compose configuration
├── requirements.txt # Python dependencies
├── lan_architecture.py # LAN architecture diagram generator
├── main.py # Main diagram generator
├── public/
│ └── index.html # Live Mermaid diagram editor
└── wiki/ # Documentation (this wiki)
```
### Adding New Diagrams
1. Create a new Python file (e.g., `network_diagram.py`)
2. Import required components from `diagrams` library
3. Define your architecture using context managers
4. Run the script to generate PNG output
Example:
```python
from diagrams import Diagram, Cluster
from diagrams.onprem.network import Router
from diagrams.generic.device import Mobile
with Diagram("My Network", show=False, filename="my_network"):
router = Router("Gateway")
device = Mobile("Phone")
device >> router
```
### Testing Locally
```bash
# Generate diagrams
python lan_architecture.py
# View output
ls -la *.png
# Test with local web server
python -m http.server 8000 --directory public/
# Open: http://localhost:8000
```
### Available Icons
The `diagrams` library provides icons from multiple providers:
- **OnPrem**: Network, compute, storage, etc.
- **Cloud**: AWS, Azure, GCP services
- **Generic**: Network devices, blank nodes
- **Custom**: Use your own images
See: [Diagrams Documentation](https://diagrams.mingrammer.com/docs/nodes/overview)
---
## Deployment Guide
### Overview
The project uses a fully automated Docker-based deployment pipeline:
1. **Develop** on local machine
2. **Commit & Push** to Gitea
3. **Auto-Deploy** via post-receive hook
4. **Build** multi-stage Docker image
5. **Serve** via Traefik reverse proxy
### Deployment Steps
#### 1. Initial Setup
```bash
# On server: Create app structure
apps-create diagram static-fe
# This creates:
# - /opt/apps/diagram (git repository)
# - /home/tour/infra/diagram/docker-compose.yml
```
#### 2. Configure Gitea Hook
In repository **Settings → Git Hooks → post-receive**:
```bash
#!/usr/bin/env bash
/usr/local/bin/app-deploy diagram
```
#### 3. Deploy
Simply push to Gitea:
```bash
git push origin main
```
The server automatically:
- Pulls latest code
- Rebuilds Docker image
- Restarts container
- Updates live site at https://diagram.appmodel.nl
### Manual Deployment
If needed:
```bash
# On server
app-deploy diagram
# Or step-by-step
cd /opt/apps/diagram
git pull
cd /home/tour/infra/diagram
docker compose up -d --build diagram
```
### Monitoring
```bash
# View deployment logs
tail -f /var/log/app-deploy-diagram.log
# View container logs
cd /home/tour/infra/diagram
docker compose logs -f diagram
# Check container status
docker compose ps
```
---
## Architecture Overview
### Infrastructure
```
┌─────────────────────────────────────────────┐
│ Production Architecture │
├─────────────────────────────────────────────┤
│ │
│ ┌──────────────┐ │
│ │ Gitea │ (Source of Truth) │
│ │ Tour/diagram │ │
│ └──────┬───────┘ │
│ │ git push │
│ ↓ │
│ ┌──────────────┐ │
│ │ Post-Receive │ (Auto-trigger) │
│ │ Hook │ │
│ └──────┬───────┘ │
│ │ app-deploy diagram │
│ ↓ │
│ ┌──────────────────────┐ │
│ │ /opt/apps/diagram/ │ │
│ │ (Git Repository) │ │
│ └──────┬───────────────┘ │
│ │ git pull │
│ ↓ │
│ ┌──────────────────────┐ │
│ │ Docker Build Process │ │
│ │ ┌─────────────────┐ │ │
│ │ │ Stage 1: Build │ │ │
│ │ │ - Python │ │ │
│ │ │ - Graphviz │ │ │
│ │ │ - Generate PNGs │ │ │
│ │ └─────────────────┘ │ │
│ │ ┌─────────────────┐ │ │
│ │ │ Stage 2: Serve │ │ │
│ │ │ - Nginx │ │ │
│ │ │ - Static files │ │ │
│ │ └─────────────────┘ │ │
│ └──────┬───────────────┘ │
│ │ container starts │
│ ↓ │
│ ┌──────────────────────┐ │
│ │ diagram-viewer │ │
│ │ Container :80 │ │
│ └──────┬───────────────┘ │
│ │ traefik_net │
│ ↓ │
│ ┌──────────────────────┐ │
│ │ Traefik │ │
│ │ Reverse Proxy │ │
│ │ + Let's Encrypt │ │
│ └──────┬───────────────┘ │
│ │ HTTPS │
│ ↓ │
│ diagram.appmodel.nl │
│ │
└─────────────────────────────────────────────┘
```
### Network Topology
The diagram viewer documents our home lab infrastructure:
- **LAN 192.168.1.0/24**: Main network
- Core server (192.168.1.159): Traefik, Gitea, Dokku, Auction stack, MI50/Ollama
- DNS server (192.168.1.163): AdGuard, Artifactory, CI runner
- Home Assistant (192.168.1.193)
- Atlas worker (192.168.1.100)
- IoT devices
- **Tether 192.168.137.0/24**: Isolated subnet
- Hermes worker (192.168.137.239)
- Plato worker (192.168.137.163)
### Services
| Service | URL | Description |
|---------|-----|-------------|
| Diagram Viewer | https://diagram.appmodel.nl | This application |
| Gitea | https://git.appmodel.nl | Git hosting |
| Auction Frontend | https://auction.appmodel.nl | Auction platform |
| Aupi API | https://aupi.appmodel.nl | Backend API |
| Dokku | https://dokku.lan | PaaS platform |
---
## Additional Resources
### Related Documentation
- [DEPLOY_SERVER_SETUP.md](../DEPLOY_SERVER_SETUP.md) - Detailed deployment guide
- [DEPLOYMENT_GUIDE.md](../DEPLOYMENT_GUIDE.md) - General deployment pipeline
- [README.md](../README.md) - Project overview
### External Links
- [Diagrams Library](https://diagrams.mingrammer.com/)
- [Graphviz](https://graphviz.org/)
- [Mermaid.js](https://mermaid.js.org/) (used in live editor)
- [Traefik Documentation](https://doc.traefik.io/traefik/)
- [Docker Compose](https://docs.docker.com/compose/)
### Contributing
To contribute to this project:
1. Create a feature branch
2. Make your changes
3. Test locally
4. Submit a pull request in Gitea
5. Wait for automatic deployment after merge
---
## Troubleshooting
### Common Issues
#### Diagrams Not Generating
**Problem**: Python script fails to generate PNG files
**Solution**:
```bash
# Check Graphviz installation
dot -V
# Reinstall if needed
# macOS: brew install graphviz
# Ubuntu: sudo apt-get install graphviz
# Windows: choco install graphviz
# Verify Python dependencies
pip list | grep diagrams
pip install --upgrade diagrams
```
#### Container Build Fails
**Problem**: Docker build fails during deployment
**Solution**:
```bash
# Check deployment logs
tail -f /var/log/app-deploy-diagram.log
# Rebuild manually with verbose output
cd /home/tour/infra/diagram
docker compose build --no-cache --progress=plain diagram
```
#### Site Not Accessible
**Problem**: Container runs but site not reachable
**Solution**:
1. Check DNS: `nslookup diagram.appmodel.nl`
2. Verify Traefik labels: `docker inspect diagram-viewer | grep traefik`
3. Check Traefik logs: `docker logs traefik`
4. Test container directly: `curl http://localhost:PORT`
#### Changes Not Reflected
**Problem**: Pushed changes but site unchanged
**Solution**:
```bash
# Force rebuild on server
cd /home/tour/infra/diagram
docker compose down
docker compose up -d --build --force-recreate diagram
# Clear browser cache
# Ctrl+Shift+R (Windows/Linux) or Cmd+Shift+R (macOS)
```
---
## Contact & Support
For issues, questions, or suggestions:
1. Check this wiki
2. Review [DEPLOY_SERVER_SETUP.md](../DEPLOY_SERVER_SETUP.md)
3. Check container logs
4. Contact the infrastructure team
---
**Last Updated**: 2025-12-02
**Version**: 1.0.0
**Maintainer**: Tour

View File

@@ -1,239 +0,0 @@
# 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.