docs(sim-ui): added d2

ui/docs/component.d2

@@ -0,0 +1,90 @@
+title: {
+  label: "UI Web App - Component Diagram"
+  near: top-center
+  shape: text
+  style.font-size: 24
+  style.bold: true
+}
+
+# Styles
+classes: {
+  component: {
+    style: {
+      stroke: "#2a2a2a"
+      fill: "#ffffff"
+      font-color: "#2a2a2a"
+      border-radius: 10
+      shadow: true
+    }
+  }
+  container: {
+    style: {
+      stroke: "#2a2a2a"
+      fill: "#f5f5f5"
+      font-color: "#2a2a2a"
+      border-radius: 10
+      shadow: true
+    }
+  }
+  subcomponent: {
+    style: {
+      stroke: "#666666"
+      fill: "#ffffff"
+      font-color: "#2a2a2a"
+      border-radius: 5
+      shadow: false
+    }
+  }
+}
+
+# Main Containers
+ui-app: {
+  class: container
+  label: "UI Web App"
+
+  frontend: {
+    class: component
+    label: "Frontend\n- React Components\n- State Management\n- UI Rendering"
+
+    components: {
+      class: subcomponent
+      label: "UI Components\n- Buttons\n- Charts\n- Tables"
+    }
+
+    state: {
+      class: subcomponent
+      label: "State Management\n- Redux\n- Context API"
+    }
+  }
+
+  backend: {
+    class: component
+    label: "Backend API\n- Data Fetching\n- Trace Processing"
+
+    api_routes: {
+      class: subcomponent
+      label: "API Routes\n- /api/messages\n- /api/trace"
+    }
+
+    data_processing: {
+      class: subcomponent
+      label: "Data Processing\n- JSON Parsing\n- Data Transformation"
+    }
+  }
+}
+
+external-systems: {
+  class: container
+  label: "Rust Simulation"
+
+  sim-rs: {
+    class: component
+    label: "sim-rs\n- Trace Generation\n- Simulation Engine"
+  }
+}
+
+# Relationships
+ui-app.frontend -> ui-app.backend: "Fetches data from"
+ui-app.backend -> external-systems.sim-rs: "Reads trace data from"
+ui-app.frontend.components -> ui-app.frontend.state: "Uses for state management"
+ui-app.backend.api_routes -> ui-app.backend.data_processing: "Processes data for"

ui/docs/container.d2

@@ -0,0 +1,74 @@
+title: {
+  label: "UI Web App - Container Diagram"
+  near: top-center
+  shape: text
+  style.font-size: 24
+  style.bold: true
+}
+
+# Styles
+classes: {
+  container: {
+    style: {
+      stroke: "#2a2a2a"
+      fill: "#f5f5f5"
+      font-color: "#2a2a2a"
+      border-radius: 10
+      shadow: true
+    }
+  }
+  component: {
+    style: {
+      stroke: "#2a2a2a"
+      fill: "#ffffff"
+      font-color: "#2a2a2a"
+      border-radius: 10
+      shadow: true
+    }
+  }
+  external: {
+    style: {
+      stroke: "#666666"
+      fill: "#e0e0e0"
+      font-color: "#2a2a2a"
+      border-radius: 5
+      shadow: false
+    }
+  }
+}
+
+# Main Containers
+ui-web-app: {
+  class: container
+  label: "UI Web App"
+
+  browser: {
+    class: component
+    label: "Web Browser\n- User Interface\n- Data Visualization"
+  }
+
+  server: {
+    class: component
+    label: "Backend Server\n- API Endpoints\n- Data Processing"
+  }
+}
+
+external-systems: {
+  class: container
+  label: "Rust Simulation"
+
+  sim-rs: {
+    class: external
+    label: "sim-rs\n- Trace Generation"
+  }
+
+  trace-file: {
+    class: external
+    label: "Trace File\n- messages.jsonl"
+  }
+}
+
+# Relationships
+ui-web-app.browser -> ui-web-app.server: "Requests data from"
+ui-web-app.server -> external-systems.trace-file: "Reads data from"
+external-systems.sim-rs -> external-systems.trace-file: "Generates"