Cómo instalar CTRoadmap en Docker - Visualización y documentación de infraestructura homelab autohospedada

CTRoadmap | Infrastructure Documentation | Docker

CTRoadmap en Docker: Visualización y documentación de infraestructura homelab autohospedada (alternativa draw.io, Visio)

Herramienta web open source para mapear infraestructura homelab. Diagramas interactivos topología. Nodos, servicios, containers, drives, scripts. Relaciones tipadas. Documentación integrada. Búsqueda + filtro. Sin ejecución (documentación pura). Passcode auth. Node.js + React. MIT open source. Beta active.

¿Qué es CTRoadmap?


CTRoadmap es una herramienta web open source diseñada específicamente para documentar y visualizar la topología completa de infraestructura homelab, permitiendo crear diagramas interactivos con soporte para nodos, servicios, containers, volúmenes, scripts y relaciones tipadas sin necesidad de ejecutar comandos en la infraestructura (documentación pura). Es la alternativa moderna a draw.io/Visio especializada en homelabs y infraestructura técnica.

Propuesta clave: Visualización infraestructura homelab. Diagramas interactivos drag-and-drop. Nodos, servicios, containers, drives, mounts, scripts, configs, secretos, flows, IoT devices, URLs, checks, notas. Relaciones tipadas con labels. Búsqueda instant. Filtro items. Passcode local para autenticación. Documentación integrada (sin ejecutar). Tema claro/oscuro. Interfaz moderna React. Hotkeys (Ctrl/Cmd+S save, Ctrl/Cmd+D duplicate, Delete). Desenroute connectors. Export (JSON). Docker easy deploy. Node.js + React ligero. Beta version activa. MIT open source.

Características principales: Crear/editar/duplicar/eliminar tiles tipados (nodos, servicios, containers, drives, mounts, scripts, configs, secretos, flows, IoT, URLs, checks, notas). Designa nodos primarios. Tiles hijo dentro padres. Crear relaciones tipadas (labels, notas, endpoints, directionality). Routing connectors (through tiles o avoid). Search instant. Filter. Passcode auth local (opcional). Tema light/dark. Hotkeys Ctrl/Cmd+S, Ctrl/Cmd+D, Delete. Import JSON. Export JSON. Interfaz drag-drop. Responsive design (mobile). Documentación-only (cero ejecución). Zero dependencies ejecutables (sin SSH, Docker calls, live checks). Local browser-based (no sync cloud sin config). Multiarch Docker (amd64, arm64). Beta version. Comunidad activa. MIT open source.

Para homelabs: Documentar infraestructura visualmente. Entender topología. Guardar como referencia. Compartir con equipo. Documentación viva.

Características principales

Diagramas interactivos drag-drop

Arrastra elementos. Reorganiza topología visualmente. Intuitivo.

Tiles tipados (13 tipos)

Nodos, servicios, containers, drives, mounts, scripts, configs, secretos, flows, IoT, URLs, checks, notas.

Relaciones tipadas + labels

Conecta tiles con relaciones. Agrega labels, notas, directionality.

Búsqueda + filtro instant

Encuentra tiles rápidamente. Filtra por tipo o características. / para search.

Nodos padres + hijos anidados

Organiza tiles dentro tiles. Jerarquía clara. Topología modular.

Passcode auth local

Autenticación opcional en browser. Protege acceso local.

Tema claro/oscuro

Eye-friendly. Toggle entre themes. Preferencia guardada.

Hotkeys productivos

Ctrl/Cmd+S save, Ctrl/Cmd+D duplicate, Delete elimina. Workflow rápido.

Documentación integrada

Flow steps, check commands (documentación pura, sin ejecución).

Routing connectors avanzado

Through tiles o avoid. Visualización neta de relaciones.

Export/Import JSON

Portabilidad. Backup diagrama. Versioning via git.

MIT open source

Código abierto. Beta version. Comunidad activa en desarrollo.

Requisitos del sistema

  • Docker & Docker Compose v2
  • 50 MB - 200 MB RAM mínimo (Node.js ligero)
  • 50 MB espacio disco (imagen + BD local)
  • Puerto 8088 (configurable)
  • Volumen persistente para data (diagrama JSON)
  • curl (para instalador script)
  • Navegador moderno (Chrome, Firefox, Safari, Edge)
  • Opcional: git (para versionado diagrama)
Setup ultra-simple: Instalador script one-liner. 1 minuto a diagramar infraestructura.

Instalación con Docker Compose

Opción 1: Script instalador (recomendado)

curl -fsSL https://raw.githubusercontent.com/NoobCity99/CTRoadmap/main/CTR_install.sh -o CTR_install.sh chmod +x CTR_install.sh ./CTR_install.sh # One-liner alternativo: curl -fsSL https://raw.githubusercontent.com/NoobCity99/CTRoadmap/main/CTR_install.sh | bash

Opción 2: Instalación custom (directorio específico)

CTR_INSTALL_DIR=/opt/ctroadmap-beta ./CTR_install.sh

Opción 3: Docker Compose manual

mkdir -p ctroadmap-beta && cd ctroadmap-beta cat > docker-compose.yml << 'EOF' version: '3.8' services: ctroadmap: image: ghcr.io/noobcity99/ctroadmap:beta container_name: ctroadmap restart: unless-stopped ports: - "8088:3000" volumes: - ctroadmap_data:/app/data environment: - NODE_ENV=production volumes: ctroadmap_data: EOF docker compose up -d

Acceder (primer uso)

http://localhost:8088 - CTRoadmap (dibujar infraestructura)

Verificar instalación

docker compose logs -f # O desde directorio ctroadmap-beta cd ~/ctroadmap-beta && docker compose up -d

Primeros pasos

1. Acceder a CTRoadmap

  1. Abre http://localhost:8088
  2. Canvas en blanco aparece (listo para dibujar)
  3. Cero contraseña necesaria (passcode opcional en Settings)

2. Crear primer nodo (servidor)

  1. Click derecho en canvas → "Add Tile" o botón "+"
  2. Tipo: "Node" (servidor, máquina física)
  3. Nombre: "Server Principal" (editable)
  4. Aparece rectángulo en canvas (movible)

3. Agregar servicios dentro nodo

  1. Dentro del nodo padre, click derecho
  2. Add Tile → "Service"
  3. Nombre: "Docker" (o "Nginx", "PostgreSQL", etc)
  4. Service aparece como hijo del nodo (indentado/anidado)

4. Agregar containers

  1. Dentro nodo/servicio, Add Tile → "Container"
  2. Nombre: "WordPress", "MySQL", etc
  3. Construye jerarquía: Node → Service → Container

5. Crear relaciones (conectar tiles)

  1. Click en tile → "Create Relationship" o drag-connect
  2. Selecciona otro tile destino
  3. Línea conecta tiles automáticamente
  4. Click relación → edita label, notas, directionality

6. Documentar con notas y flows

  1. Add Tile → "Note" o "Flow"
  2. Note: texto libre (documentación pura)
  3. Flow: pasos workflow (sin ejecutar, solo doc)
  4. Conecta con relaciones a tiles relevantes

7. Agregar storage y volúmenes

  1. Add Tile → "Drive" (almacenamiento físico)
  2. Add Tile → "Mount" (puntos montaje)
  3. Conecta mounts a drives con relaciones
  4. Documenta punto montaje e información

8. Crear diagrama completo típico

Estructura ejemplo: Homelab Node (primario) ├── Docker Service │ ├── Container: WordPress │ ├── Container: MariaDB │ └── Container: Nginx ├── Disk Storage (Drive) └── Network Check (verificar conectividad)

9. Buscar y filtrar tiles

  1. Presiona "/" en canvas
  2. Search box aparece
  3. Escribe nombre o tipo tile
  4. Resultados instant

10. Guardar diagrama (Ctrl+S)

Ctrl+S # En browser # O Settings → Export JSON para backup manual

11. Activar passcode auth (opcional)

  1. Settings → Passcode
  2. Ingresa passcode (protege acceso local)
  3. Siguiente visitor debe ingresar passcode

12. Cambiar tema (dark mode)

  1. Settings → Theme
  2. Toggle Dark/Light
  3. Preferencia guardada automático

Casos de uso

  • Documentación infraestructura: Mapear setup homelab completo. Referencia visual. Compartir con equipo.
  • Planning nuevos servicios: Diseñar topología antes deploy. Iteración visual. Decisiones informadas.
  • Troubleshooting: Entender relaciones. Seguir flows. Root cause diagnosis.
  • Onboarding equipo: Mostrar setup visual. Training material. Menos time explaining.
  • Backup/recovery planning: Documentar dependencies. Criticality. Recovery flows.
  • Compliance/auditoría: Documentar infraestructura. Mostrar security controls. Checks integrados.

HTTPS con Caddy (producción)

Caddyfile

ctroadmap.tudominio.com { reverse_proxy localhost:8088 }

Acceso remoto seguro

https://ctroadmap.tudominio.com con HTTPS automático

IMPORTANTE: Passcode protege acceso

Activar passcode en Settings para proteger diagrama infraestructura (información sensible). Combina con HTTPS para security máximo.

Gestión y mantenimiento

Ver logs

cd ~/ctroadmap-beta && docker compose logs -f

Backup de diagrama

# Settings → Export JSON en UI # O backup volume directamente docker cp ctroadmap:/app/data ./ctroadmap-backup-$(date +%Y%m%d)

Restore diagrama

docker stop ctroadmap docker cp ./ctroadmap-backup-YYYYMMDD/data ctroadmap:/app/ docker start ctroadmap

Gestionar desde directorio instalación

cd ~/ctroadmap-beta # Ver logs docker compose logs -f # Reiniciar docker compose down && docker compose up -d # Actualizar imagen docker compose pull && docker compose up -d # Eliminar instalación (desinstalar) curl -fsSL https://raw.githubusercontent.com/NoobCity99/CTRoadmap/main/CTR_uninstall.sh | bash

Monitorear consumo

docker stats ctroadmap # Típicamente: <100mb bajo="" cpu="" ligero="" muy="" ram="" span="">

Versionado diagrama con git

cd ~/ctroadmap-beta/ctroadmap_data git init git add . git commit -m "Initial infrastructure diagram" # Cada cambio puede git-tracked para auditoría/history

Comparativa con alternativas

vs draw.io

CTRoadmap gana: Especializado infraestructura, tiles tipados, relaciones, búsqueda. draw.io gana: Más flexible general-purpose, más shapes, más features.

vs Visio

CTRoadmap gana: Open source, web-based, free, especializado. Visio gana: Enterprise-ready, soporte Microsoft, integraciones.

vs Lucidchart

CTRoadmap gana: Open source, self-hosted, gratuito, local. Lucidchart gana: Cloud collaboration, real-time multi-user, enterprise.

vs CloudCraft

CTRoadmap gana: Infraestructura general, self-hosted, open source. CloudCraft gana: AWS-specific, icon library, 3D view.

Mejor para: Homelabs, pequeñas infraestructuras. Documentación local. Visibilidad topología. Diagramas especializados técnicos.

Referencias oficiales

Apoya el canal GENBYTE

Suscríbete al canal de YouTube Suscríbete a la newsletter semanal Invítame a un Ko-fi genbyte@proton.me

Sígueme en mis redes sociales

Telegram Discord YouTube GitHub Blog Twitter

Comentarios

Publicar un comentario

Entradas populares de este blog

Cómo Instalar y configurar SERVIDOR VPN WIREGUARD en MIKROTIK 🔐 #VPN #Wireguard #Mikrotik #RouterOS

Imagen
Wireguard en Mikrotik Breve Explicación de Wireguard ¿Qué es WireGuard VPN? WireGuard es un nuevo protocolo de VPN. No se trata de un software, sino de un conjunto de instrucciones que permite crear VPNs de forma muy sencilla. Ha sido desarrollada como una alternativa a IPsec, OpenVPN y similares VPNs, pero más rápida y sencilla de usar. En esencia, WireGuard está basado en ideas del protocolo IPsec. WireGuard es una VPN extremadamente simple, pero rápida y moderna que utiliza criptografía de última generación. Su objetivo es ser más rápido, más simple, y más versátil que IPSec, evitando al mismo tiempo el enorme dolor de cabeza (sobre todo en redes con NAT). Pretende ser considerablemente más eficaz que OpenVPN. WireGuard está diseñado como una VPN de propósito general para ejecutarse en interfaces embebidas, apto para muchas circunstancias diferentes. Se ejecuta sobre el protocolo UDP, por lo tanto es considerado un túnel de capa 3. ¿Cómo funciona Wireguard VPN? WireGuard es un proto...
Read more »

Cómo instalar y configurar DSM SYNOLOGY 7.2.2 en PC | Guía completa, instalación, RAID 1, SMB

Imagen
Instalación y puesta en marcha de Synology DSM 7.2.2 en PC Vídeo ACTUALIZADO, NUEVA VERSIÓN DEL ARC LOADER:  https://youtu.be/LgghogL-UCA https://genbyte.blogspot.com/2025/08/como-convertir-pc-en-synlogy-con-6-tb.html ----- Proceso de instalación y puesta en marcha de sistema operativo DSM Synology versión 7.2.2 en un PC, concretamente un HP 800 G1 EliteDesk. El PC tendrá 3 discos SSD, uno de 120 GB para el S.O. DSM, y otros dos de 240GB cada en RAID 1 para los Datos. Los 3 dicos duros conectados al PC mediante cables SATA. Lo primero que necesitamos es descargar la imagen bootloader ARC, desde el siguiente repositorio de Gothub, también necesitamos Rufus, en este momento, es la versión 4.6. Imagen ARC:  https://github.com/AuxXxilium/arc Imagen usado en el vídeo 1.1.29:  https://github.com/AuxXxilium/arc/releases/tag/1.1.29 Rufus:  https://rufus.ie/es/ Después de descargar la imagen ARC.img, conectamos nuestro primer disco SSD de 120GB por cable o conector SATA-USB y...
Read more »

Cómo INSTALAR y CONFIGURAR OpenVPN en MIKROTIK. Guía completa paso a paso.

Imagen
Cómo INSTALAR y CONFIGURAR OpenVPN en MIKROTIK. Guía completa paso a paso. Vídeo tutorial paso a paso en Youtube Desarrollo Ilustración: Diagrama RED Creación de Redes (Address) ----------------------------------------------- WAN 192.168.1.0/24 LAN 192.168.88.0/24 VPN 192.168.100.0/24 Creación del Rango VPN ------------------------ 192.168.100.1 - 192.168.100.100 Creación de los Certificados ------------------------------- Los certificados que vamos a crear a continuación tendrán una validez de 10 años; days-valid=3650 Crear certificado CA ---------------------- /certificate add name=CA-tpl country="" state="" locality="" organization="" unit="" common-name="CA" key-size=4096 days-valid=3650 key-usage=crl-sign,key-cert-sign /certificate sign CA-tpl ca-crl-host=127.0.0.1 name="CA" Crear certificado Server -------------------------- /certificate add name=SERVER-tpl country="" state="" locality=...
Read more »