3. Kontextabgrenzung

Die Kontextabgrenzung grenzt das System gegen alle Kommunikationspartner (Nachbarsysteme und Benutzerrollen) ab. Sie legt damit die externen Schnittstellen fest.

3.1 Fachlicher Kontext

context diagram

Kommunikationspartner:

Partner Input Output

Map Creator (User)

Mouse/Keyboard-Interaktionen Drag & Drop, Clicks, Text-Input

Visuelle Wardley Map draw.io XML-Datei (Download)

draw.io

XML-Import der generierten Datei

Editierbare Diagramme

Web Browser

HTML/CSS/JavaScript-Ausführung LocalStorage-Zugriff

Gerenderte Benutzeroberfläche

Abgrenzung - Was unser System NICHT macht: * Kein Import von existierenden Maps * Keine Kollaboration/Multi-User * Keine Cloud-Synchronisation * Keine Versionierung

3.2 Technischer Kontext

technical context

Technische Schnittstellen:

Interface Protokoll/Format Input Output

Canvas/SVG Rendering

Browser Canvas/SVG API

Map Data (JSON)

Visual Representation

LocalStorage

Web Storage API

Map Objects (JSON)

Persistent Storage (Browser-lokal)

File Download

Browser Download API

draw.io XML

.drawio File (Download)

Mouse/Touch Events

DOM Events

User Interactions

Component Positions/Updates

Technische Abgrenzung: * Kein Server-Backend * Keine REST APIs * Keine WebSocket-Verbindungen * Keine externe Cloud-Services

3.3 Externe Schnittstellen

draw.io XML Format

Zweck: Export von Wardley Maps als editierbare draw.io-Diagramme

Format Spezifikation:

<mxGraphModel dx="1422" dy="794" grid="1" gridSize="10">
  <root>
    <mxCell id="0"/>
    <mxCell id="1" parent="0"/>
    <!-- Wardley Map Components -->
    <mxCell id="component1" value="User Needs"
            style="rounded=0;whiteSpace=wrap;html=1;"
            vertex="1" parent="1">
      <mxGeometry x="100" y="50" width="120" height="60" as="geometry"/>
    </mxCell>
    <!-- Dependencies -->
    <mxCell id="edge1" style="edgeStyle=orthogonalEdgeStyle;"
            edge="1" parent="1" source="component1" target="component2">
    </mxCell>
  </root>
</mxGraphModel>

Koordinaten-Mapping: - Wardley X (0-1) → draw.io X (0-1200px) - Wardley Y (0-1) → draw.io Y (0-800px)

Browser LocalStorage

Zweck: Lokale Persistierung der Map-Daten (nur Browser-lokal)

Datenformat:

{
  "mapId": "uuid-v4",
  "title": "My Wardley Map",
  "components": [
    {
      "id": "comp1",
      "label": "User Needs",
      "x": 0.2,
      "y": 0.9,
      "evolution": "genesis"
    }
  ],
  "dependencies": [
    {
      "from": "comp1",
      "to": "comp2"
    }
  ],
  "lastModified": "2025-06-13T11:18:00Z"
}