Ingenieurwesen 31 Juli 2026  ·  1 min read

Interaktives Architekturdiagramm aus YAML erstellen: Schritt-für-Schritt-Tutorial

Interaktives Architekturdiagramm aus YAML erstellen: Schritt-für-Schritt-Tutorial
Interaktives Architekturdiagramm aus YAML erstellen: Schritt-für-Schritt-Tutorial 31 Juli 2026
TL;DR — Dieses Tutorial beschreibt den Aufbau eines interaktiven Architekturdiagramms aus YAML-Service-Definitionen: das YAML-Schema, wie die Visualisierungsschicht es liest, wie das Ergebnis als statische Dateien auf Netlify oder GitHub Pages deployed wird und wie es aktuell bleibt. Gesamtzeit: unter zwei Stunden für ein erstes Deployment.

Das Ziel: Von einer Liste Ihrer Services zu einem filterbaren, interaktiven Abhängigkeitsgraphen auf Ihrer eigenen Infrastruktur. Kein Backend, keine Datenbank, kein SaaS-Konto.

Schritt 1: YAML-Schema definieren

Beginnen Sie mit dem minimalen Schema, das das Wesentliche erfasst:

services:
  - name: api-gateway
    description: Öffentliche API-Eingangspunkt, leitet an interne Services weiter
    team: platform
    stack: [Node.js, nginx]
    status: active
    depends_on:
      - auth-service
      - user-service
      - payments-service

Schritt 2: YAML validieren

Vor dem Aufbau der Visualisierung validieren, dass jeder in depends_on aufgeführte Service als benannter Service existiert. Fehlende Knoten erzeugen kaputte Kanten im Graphen.

Schritt 3: Visualisierungsschicht aufbauen

Die Visualisierungsschicht liest das YAML und rendert einen interaktiven Graphen. Schlüsselfunktionen: Auto-Layout, Hover-Trace, Filter-Steuerung, teilbare URLs.

Schritt 4: Als statische Dateien deployen

# Netlify
ntl deploy --prod --dir=dist

# GitHub Pages  
gh-pages -d dist

# AWS S3
aws s3 sync dist/ s3://ihr-bucket --delete

Den Build überspringen — Service Map verwenden

Wenn Sie das Ergebnis ohne den Aufbau der Visualisierungsschicht von Grund auf wollen, ist Service Map eine fertige Implementierung dieses Musters: YAML ein, interaktiver Abhängigkeitsgraph aus, auf beliebigem Static-Host deploybar. 99 € einmalig, mit Auto-Layout, Hover-Tracing, Filter-Steuerung und teilbaren URLs.