Draw.io-Diagramm-Fertigkeit

Erstellen Sie professionelle, bearbeitbare Diagrammdateien im nativen XML-Format von draw.io.

Ausgabeformat

Draw.io-Dateien sind XML mit dieser Struktur:

<mxfile host="app.diagrams.net" modified="DATUM" agent="Claude" version="21.0.0" type="device">
  <diagram name="DIAGRAMM_NAME" id="EINZIGARTIGE_ID">
    <mxGraphModel dx="1200" dy="800" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1100" pageHeight="850" math="0" shadow="0">
      <root>
        <mxCell id="0" />
        <mxCell id="1" parent="0" />
        <!-- Alle Diagrammelemente kommen hierher -->
      </root>
    </mxGraphModel>
  </diagram>
</mxfile>

Kernelementtypen

Grundlegende Formen

<!-- Rechteck -->
<mxCell id="eindeutige-id" value="Beschriftungstext" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="1">
  <mxGeometry x="100" y="100" width="120" height="60" as="geometry" />
</mxCell>

<!-- Abgerundetes Rechteck -->
<mxCell id="eindeutige-id" value="Beschriftung" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="1">
  <mxGeometry x="100" y="100" width="120" height="60" as="geometry" />
</mxCell>

<!-- Zylinder (Datenbank) -->
<mxCell id="eindeutige-id" value="Datenbank" style="shape=cylinder3;whiteSpace=wrap;html=1;boundedLbl=1;backgroundOutline=1;size=15;fillColor=#f8cecc;strokeColor=#b85450;" vertex="1" parent="1">
  <mxGeometry x="100" y="100" width="80" height="80" as="geometry" />
</mxCell>

<!-- Ellipse -->
<mxCell id="eindeutige-id" value="Knoten" style="ellipse;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;" vertex="1" parent="1">
  <mxGeometry x="100" y="100" width="80" height="80" as="geometry" />
</mxCell>

Container & Gruppen

<!-- Swimlane (Container mit Kopfzeile) -->
<mxCell id="eindeutige-id" value="Abschnittstitel" style="swimlane;fontStyle=1;align=center;verticalAlign=top;childLayout=stackLayout;horizontal=1;startSize=30;fillColor=#f5f5f5;strokeColor=#666666;fontColor=#333333;" vertex="1" parent="1">
  <mxGeometry x="40" y="40" width="200" height="150" as="geometry" />
</mxCell>

<!-- Kopfzeilenleiste (mit primärer Markenfarbe) -->
<mxCell id="eindeutige-id" value="" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#0066CC;strokeColor=#0066CC;" vertex="1" parent="1">
  <mxGeometry x="40" y="40" width="400" height="40" as="geometry" />
</mxCell>

Verbinder & Pfeile

<!-- Einfacher Pfeil -->
<mxCell id="eindeutige-id" value="" style="endArrow=classic;html=1;rounded=0;strokeWidth=2;strokeColor=#666666;" edge="1" parent="1" source="quell-id" target="ziel-id">
  <mxGeometry relative="1" as="geometry" />
</mxCell>

<!-- Bidirektionaler Pfeil -->
<mxCell id="eindeutige-id" value="" style="endArrow=classic;startArrow=classic;html=1;rounded=0;strokeWidth=2;" edge="1" parent="1">
  <mxGeometry relative="1" as="geometry">
    <mxPoint x="200" y="200" as="sourcePoint" />
    <mxPoint x="400" y="200" as="targetPoint" />
  </mxGeometry>
</mxCell>

<!-- Flex-Pfeil (Blockpfeil) -->
<mxCell id="eindeutige-id" value="" style="shape=flexArrow;endArrow=classic;html=1;fillColor=#FFB800;strokeColor=#cc9400;width=20;endSize=8;" edge="1" parent="1">
  <mxGeometry relative="1" as="geometry">
    <mxPoint x="200" y="200" as="sourcePoint" />
    <mxPoint x="400" y="200" as="targetPoint" />
  </mxGeometry>
</mxCell>

<!-- Gestrichelte Linie -->
<mxCell id="eindeutige-id" value="" style="endArrow=classic;html=1;dashed=1;dashPattern=8 8;strokeColor=#999999;" edge="1" parent="1">
  <mxGeometry relative="1" as="geometry">
    <mxPoint x="200" y="200" as="sourcePoint" />
    <mxPoint x="400" y="200" as="targetPoint" />
  </mxGeometry>
</mxCell>

Textelemente

<!-- Einfacher Text -->
<mxCell id="eindeutige-id" value="Beschriftungstext" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=12;" vertex="1" parent="1">
  <mxGeometry x="100" y="100" width="100" height="30" as="geometry" />
</mxCell>

<!-- Fetter Titel -->
<mxCell id="eindeutige-id" value="Titel" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=18;fontStyle=1;fontColor=#333333;" vertex="1" parent="1">
  <mxGeometry x="100" y="20" width="300" height="40" as="geometry" />
</mxCell>

<!-- Mehrzeiliger Text (&#xa; für Zeilenumbrüche verwenden) -->
<mxCell id="eindeutige-id" value="Zeile 1&#xa;Zeile 2&#xa;Zeile 3" style="text;html=1;strokeColor=none;fillColor=none;align=left;verticalAlign=top;whiteSpace=wrap;rounded=0;fontSize=10;" vertex="1" parent="1">
  <mxGeometry x="100" y="100" width="150" height="60" as="geometry" />
</mxCell>

Allgemeine Stileigenschaften

Farben (Hex-Codes verwenden)

Eigenschaft	Zweck	Beispiel
`fillColor`	Hintergrund	`fillColor=#dae8fc`
`strokeColor`	Rahmen	`strokeColor=#6c8ebf`
`fontColor`	Text	`fontColor=#333333`

Standard-Farbpalette

Blau:    fillColor=#dae8fc;strokeColor=#6c8ebf
Grün:    fillColor=#d5e8d4;strokeColor=#82b366
Gelb:    fillColor=#fff2cc;strokeColor=#d6b656
Orange:  fillColor=#ffe6cc;strokeColor=#d79b00
Rot:     fillColor=#f8cecc;strokeColor=#b85450
Lila:    fillColor=#e1d5e7;strokeColor=#9673a6
Grau:    fillColor=#f5f5f5;strokeColor=#666666

Typografie

Eigenschaft	Werte	Beispiel
`fontSize`	Zahl	`fontSize=12`
`fontStyle`	0=normal, 1=fett, 2=kursiv, 3=fett+kursiv	`fontStyle=1`
`align`	left, center, right	`align=center`
`verticalAlign`	top, middle, bottom	`verticalAlign=middle`

Rahmen & Effekte

Eigenschaft	Werte	Beispiel
`rounded`	0 oder 1	`rounded=1`
`strokeWidth`	Zahl	`strokeWidth=2`
`dashed`	0 oder 1	`dashed=1`
`dashPattern`	Muster	`dashPattern=8 8`
`shadow`	0 oder 1	`shadow=1`

Unternehmens-Branding (Anpassbar)

Diese Fertigkeit unterstützt unternehmensspezifisches Branding. Bearbeiten Sie references/branding.md, um die Farben und Stile Ihrer Organisation festzulegen.

Standard-Markenplatzhalter (durch eigene ersetzen):

Primär:    fillColor=#0066CC;strokeColor=#0052a3;fontColor=#FFFFFF
Sekundär:  fillColor=#FFB800;strokeColor=#cc9400;fontColor=#333333
Dunkel:    fillColor=#1a1a2e;strokeColor=#1a1a2e;fontColor=#FFFFFF
Hell BG:   fillColor=#f0f4f8;strokeColor=#0066CC

Vollständige Anpassungsanweisungen finden Sie in references/branding.md.

Diagrammmuster

Architekturdiagramm-Layout

Titelzeile oben (volle Breite, Markenfarbe)
Hauptabschnitte als Swimlanes oder abgerundete Container
Komponenten als abgerundete Rechtecke innerhalb der Abschnitte
Datenbanken als Zylinder
Externe Systeme an den linken/rechten Rändern
Pfeile zeigen Daten-/Steuerungsflüsse
Legende in der Ecke erklärt Farben/Symbole
Fußzeile mit Metadaten

Schichtenarchitektur (Oben nach Unten)

┌─────────────────────────────────────┐
│          Benutzer / Clients         │  ← Obere Schicht
├─────────────────────────────────────┤
│          API / Schnittstelle         │
├─────────────────────────────────────┤
│          Geschäftslogik             │
├─────────────────────────────────────┤
│          Daten / Speicher           │  ← Untere Schicht
└─────────────────────────────────────┘

Links-nach-Rechts-Fluss

┌──────┐     ┌──────────┐     ┌──────────┐
│Quelle│ ──► │ Verarbeitung│ ──► │  Ziel   │
└──────┘     └──────────┘     └──────────┘

Bewährte Vorgehensweisen

Eindeutige IDs: Jedes mxCell benötigt ein eindeutiges id-Attribut
Eltern-Hierarchie: Setzen Sie parent="1" für Elemente der obersten Ebene
Positionierung: Verwenden Sie mxGeometry mit x, y, Breite, Höhe
Ebenen: Später definierte Elemente erscheinen oben
Ausrichtung: Verwenden Sie konsistente x/y-Abstände (Raster von 10-20px)
Farben: Verwenden Sie aufeinander abgestimmte Füll-/Rahmen-Paare aus der Palette
Beschriftungen: Halten Sie den Text prägnant; verwenden Sie separate Textelemente für Beschreibungen
Weißraum: Lassen Sie Ränder innerhalb von Containern (20-40px Abstand)

Arbeitsablauf

Bestimmen Sie Diagrammtyp und Layoutmuster
Legen Sie Seitenabmessungen in mxGraphModel fest (pageWidth, pageHeight)
Erstellen Sie die Containerstruktur (Swimlanes, Gruppen)
Fügen Sie Komponenten mit eindeutigen IDs hinzu
Fügen Sie Verbinder unter Angabe von Quell-/Ziel-IDs hinzu
Fügen Sie Beschriftungen und Anmerkungen hinzu
Fügen Sie eine Legende hinzu, wenn Farbkodierung verwendet wird
Speichern Sie als .drawio-Datei
Kopieren Sie nach /mnt/user-data/outputs/ und präsentieren Sie sie dem Benutzer

Cloud-Anbieter-Icons (AWS, Azure, GCP)

Draw.io enthält integrierte Formbibliotheken für die großen Cloud-Anbieter. Verwenden Sie offizielle Icons für professionelle Architekturdiagramme.

AWS-Icons (Kurzreferenz)

AWS verwendet shape=mxgraph.aws4.resourceIcon mit resIcon=mxgraph.aws4.SERVICE:

<mxCell id="lambda-1" value="Lambda" style="sketch=0;outlineConnect=0;fontColor=#232F3E;fillColor=#ED7100;strokeColor=#ffffff;dashed=0;verticalLabelPosition=bottom;verticalAlign=top;align=center;html=1;fontSize=12;fontStyle=0;aspect=fixed;shape=mxgraph.aws4.resourceIcon;resIcon=mxgraph.aws4.lambda;" vertex="1" parent="1">
  <mxGeometry x="100" y="100" width="78" height="78" as="geometry" />
</mxCell>

Häufige AWS-resIcon-Werte:

Compute: ec2, lambda, ecs, eks, fargate
Storage: s3, elastic_block_store, elastic_file_system
Database: rds, dynamodb, aurora, elasticache, redshift
Networking: vpc, cloudfront, route_53, api_gateway, elastic_load_balancing
Security: iam, cognito, secrets_manager, kms, waf

AWS-Kategoriefarben:

Compute: #ED7100
Storage: #7AA116
Database: #C925D1
Networking: #8C4FFF
Security: #DD344C

Azure-Icons (Kurzreferenz)

Azure verwendet image=img/lib/azure2/KATEGORIE/SERVICE.svg:

<mxCell id="vm-1" value="VM" style="aspect=fixed;html=1;points=[];align=center;image;fontSize=12;image=img/lib/azure2/compute/Virtual_Machine.svg;verticalLabelPosition=bottom;verticalAlign=top;" vertex="1" parent="1">
  <mxGeometry x="100" y="100" width="68" height="68" as="geometry" />
</mxCell>

Häufige Azure-Bildpfade:

compute/Virtual_Machine.svg, compute/Function_Apps.svg
containers/Kubernetes_Services.svg
storage/Storage_Accounts.svg, storage/Blob_Storage.svg
databases/SQL_Database.svg, databases/Azure_Cosmos_DB.svg
networking/Virtual_Networks.svg, networking/Load_Balancers.svg
security/Key_Vaults.svg, identity/Azure_Active_Directory.svg

AWS-Gruppencontainer

<!-- VPC -->
<mxCell id="vpc" value="VPC" style="sketch=0;outlineConnect=0;gradientColor=none;html=1;whiteSpace=wrap;fontSize=12;fontStyle=0;shape=mxgraph.aws4.group;grIcon=mxgraph.aws4.group_vpc;strokeColor=#8C4FFF;fillColor=none;verticalAlign=top;align=left;spacingLeft=30;dashed=0;" vertex="1" parent="1">
  <mxGeometry x="40" y="40" width="400" height="300" as="geometry" />
</mxCell>

<!-- Öffentliches Subnetz -->
grIcon=mxgraph.aws4.group_public_subnet;strokeColor=#7AA116;fillColor=#E9F3E6

<!-- Privates Subnetz -->
grIcon=mxgraph.aws4.group_private_subnet;strokeColor=#00A4A6;fillColor=#E6F6F7

Referenzen

Für erweiterte Muster und vollständige Icon-Listen siehe:

references/architecture-patterns.md - Häufige Architekturdiagramm-Layouts
references/style-guide.md - Erweiterte Styling-Optionen und Icon-Platzierung
references/cloud-icons.md - Vollständige AWS-, Azure-, GCP-Icon-Referenz
references/branding.md - Leitfaden zur Anpassung des Unternehmens-Brandings

davidodediran/Draw.io-Claude-skills

Was ist Draw.io-Claude-skills?

In Ihrer bevorzugten KI fragen

Dokumentation