# 05t3/sigmarulegen architecture

> Architecture diagram of the GitHub repository 05t3/sigmarulegen, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-06-17). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/05t3/sigmarulegen
- Repository: https://github.com/05t3/sigmarulegen

## Overview

1. **Overall shape**
   - This is a small **full-stack TypeScript web application** for generating Sigma detection rules.
   - The architecture is centered on a **React/Vite SPA** in `client/`, supported by a **Node server** in `server/` that serves the app and exposes route-level behavior.

2. **Primary user-facing flow**
   - The browser loads the SPA, the user fills out a Sigma rule form, and the app continuously converts that form state into a **live YAML preview**.
   - The same generated rule can then be **copied to clipboard** or **downloaded as a `.yml` file**.
   - So the core data flow is: **form input → validated rule state → YAML rendering → export**.

3. **Frontend application boundary**
   - `client/src/App.tsx` and `client/src/pages/sigma-generator.tsx` appear to be the main entry points for the rule-building experience.
   - The frontend is structured as a classic component-driven SPA with pages, reusable components, hooks, and shared utilities.
   - There are additional pages for **About** and **Not Found**, indicating a small routed UI rather than a single-screen widget.

4. **Form and rule-generation subsystem**
   - The main domain-specific subsystem is the Sigma rule generator form, centered around `sigma-form.tsx` and `use-sigma-form.ts`.
   - This subsystem likely owns the structured rule fields, validation, and transformation into Sigma YAML.
   - `yaml-preview.tsx` is the presentation layer for the generated rule output, keeping input editing and output rendering tightly coupled but still separated in components.

5. **Shared domain model**
   - `shared/schema.ts` is the main boundary for shared validation/type definitions between client and server.
   - `drizzle.config.ts` suggests the repo was set up with schema-driven data modeling, even though the tree does not show a full persistent database implementation.
   - For an architecture diagram, treat `shared/` as the **contract layer** that keeps client and server aligned on rule structure.

6. **Server responsibilities**
   - The server side is relatively thin: `server/index.ts`, `server/routes.ts`, `server/storage.ts`, and `server/vite.ts`.
   - Its likely responsibilities are:
     - bootstrapping the Node process,
     - wiring routes,
     - serving the Vite-built frontend in production,
     - and providing any minimal backend API or persistence abstraction.
   - The presence of `storage.ts` suggests a storage interface, but the repository layout does not indicate a heavy backend datastore.

7. **UI and design system**
   - The frontend uses a **component library approach** with many reusable UI primitives under `client/src/components/ui/`.
   - `theme-provider.tsx` and the large set of UI components indicate a strong presentation layer built around reusable, composable controls.
   - This is supported by Tailwind (`tailwind.config.ts`, `postcss.config.js`) and likely a shadcn-style component stack (`components.json`).

8. **Client-side state and utilities**
   - `client/src/hooks/` contains custom hooks for mobile responsiveness, toast notifications, and form logic.
   - `client/src/lib/` holds small shared utilities, constants, and query client setup.
   - `queryClient.ts` indicates React Query is available, even if the app’s main workflow is mostly local UI state rather than server synchronization.

9. **Static assets and visual output**
   - `assets/` contains screenshots used in documentation, reinforcing that the app’s value is primarily in the generated rule preview and UI usability.
   - The frontend includes a dedicated preview component and a theme switcher, so the UI is optimized for **human review of generated YAML**, not just data entry.

10. **Runtime and deployment model**
   - The repo is built for **local development and containerized deployment**.
   - There are Docker assets at the root and under `Docker/`, including separate compose files for normal use, dev mode, Traefik, and Loki-based logging.
   - This suggests the app can run as a self-contained containerized service with optional reverse proxy and observability layers.

11. **Build and packaging pipeline**
   - `vite.config.ts`, `tsconfig.json`, and the Dockerfiles show a standard TypeScript/Vite build pipeline.
   - The root `Dockerfile` and `Docker/Docker DEV/*` separate production and development container flows.
   - The application is meant to be built into static frontend assets plus a lightweight Node runtime for serving them.

12. **Automation and security scanning**
   - `.github/workflows/` includes image builds and multiple security checks: CodeQL, Snyk scans, and Trivy.
   - This is a notable operational boundary: the repo is designed not just to run, but to be **continuously scanned and published as container images**.

13. **What to show in an architecture diagram**
   - The main boxes should be:
     - **Browser / React SPA**
     - **Form + YAML generation logic**
     - **Shared schema/types**
     - **Node server / route layer**
     - **Container build and deployment**
   - The dominant data path is client-local rule generation, with the server mainly acting as the delivery/runtime shell rather than a complex business-logic backend.

Main entry points: [`client/src/App.tsx`](https://github.com/05t3/sigmarulegen/blob/main/client/src/App.tsx) (App shell), [`Dockerfile`](https://github.com/05t3/sigmarulegen/tree/main/Dockerfile) (Dockerfile), [`server/index.ts`](https://github.com/05t3/sigmarulegen/blob/main/server/index.ts) (Server entry), [`client/src/hooks/use-sigma-form.ts`](https://github.com/05t3/sigmarulegen/blob/main/client/src/hooks/use-sigma-form.ts) (Form state)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["Client app"]
  node_client_app["App shell<br/>React entry<br/>[App.tsx]"]
  node_client_main(("Boot entry<br/>SPA bootstrap<br/>[main.tsx]"))
  node_sigma_page["Rule page"]
  node_about_page["About page<br/>[about.tsx]"]
  node_not_found_page["404 page<br/>[not-found.tsx]"]
  node_sigma_form["Sigma form<br/>Form component<br/>[sigma-form.tsx]"]
  node_yaml_preview["YAML preview<br/>Preview component<br/>[yaml-preview.tsx]"]
  node_use_sigma_form(("Form state<br/>Hook<br/>[use-sigma-form.ts]"))
  node_use_mobile(("Mobile hook<br/>[use-mobile.tsx]"))
  node_use_toast(("Toast hook<br/>[use-toast.ts]"))
  node_theme_provider["Theme provider<br/>UI shell<br/>[theme-provider.tsx]"]
  node_ui_library["UI primitives<br/>Component library<br/>[button.tsx]"]
  node_query_client(("Query client<br/>Client cache<br/>[queryClient.ts]"))
  node_sigma_utils(("Sigma utils<br/>Helpers<br/>[sigma-utils.ts]"))
  node_sigma_consts(("Sigma constants<br/>[sigma-constants.ts]"))
end

subgraph group_server["Server runtime"]
  node_server_index(("Server entry<br/>Node bootstrap<br/>[index.ts]"))
  node_server_routes["Routes<br/>Route layer<br/>[routes.ts]"]
  node_server_storage[("Storage<br/>Persistence adapter<br/>[storage.ts]")]
  node_server_vite["Vite bridge<br/>Dev/prod serving<br/>[vite.ts]"]
end

subgraph group_shared["Shared contract"]
  node_shared_schema["Schema types<br/>Shared contract<br/>[schema.ts]"]
end

subgraph group_deploy["Packaging"]
  node_root_dockerfile["Dockerfile<br/>Container build"]
  node_dev_dockerfile["Dev Dockerfile<br/>Container build<br/>[Dockerfile.dev]"]
  node_compose_prod["Compose stack<br/>Deployment compose<br/>[docker-compose.yml]"]
  node_compose_dev["Dev compose<br/>Deployment compose<br/>[docker-compose.yml]"]
  node_compose_traefik["Traefik stack<br/>Ops compose"]
  node_compose_loki["Loki stack<br/>Ops compose"]
end

subgraph group_ops["Automation"]
  node_workflow_build["Build images<br/>CI workflow<br/>[build-images.yml]"]
  node_workflow_codeql["CodeQL<br/>CI workflow"]
  node_workflow_snyk_dh["Snyk DockerHub<br/>CI workflow"]
  node_workflow_snyk_gchr["Snyk GHCR<br/>CI workflow<br/>[snyk-gchr-scan.yml]"]
  node_workflow_trivy["Trivy scan<br/>CI workflow<br/>[trivy.yml]"]
end

node_client_main -->|"mounts"| node_client_app
node_client_app -->|"routes to"| node_sigma_page
node_client_app -->|"routes to"| node_about_page
node_client_app -->|"fallback"| node_not_found_page
node_sigma_page -->|"uses"| node_sigma_form
node_sigma_page -->|"renders"| node_yaml_preview
node_sigma_form -->|"drives"| node_use_sigma_form
node_use_sigma_form -->|"validates"| node_shared_schema
node_use_sigma_form -->|"transforms"| node_sigma_utils
node_use_sigma_form -->|"reads"| node_sigma_consts
node_yaml_preview -->|"feedback"| node_use_toast
node_client_app -->|"wraps"| node_theme_provider
node_client_app -->|"composes"| node_ui_library
node_client_app -->|"adapts"| node_use_mobile
node_client_app -->|"initializes"| node_query_client
node_server_index -->|"wires"| node_server_routes
node_server_index -->|"serves"| node_server_vite
node_server_routes -->|"uses"| node_server_storage
node_server_routes -->|"shares contract"| node_shared_schema
node_root_dockerfile -->|"packages"| node_server_index
node_dev_dockerfile -->|"runs"| node_server_index
node_compose_prod -->|"builds"| node_root_dockerfile
node_compose_dev -->|"builds"| node_dev_dockerfile
node_compose_traefik -->|"extends"| node_compose_prod
node_compose_loki -->|"extends"| node_compose_prod
node_workflow_build -->|"builds"| node_root_dockerfile
node_workflow_codeql -->|"scans"| node_server_index
node_workflow_trivy -->|"scans"| node_root_dockerfile
node_workflow_snyk_dh -->|"scans"| node_root_dockerfile
node_workflow_snyk_gchr -->|"scans"| node_root_dockerfile

click node_client_app "https://github.com/05t3/sigmarulegen/blob/main/client/src/App.tsx"
click node_client_main "https://github.com/05t3/sigmarulegen/blob/main/client/src/main.tsx"
click node_sigma_page "https://github.com/05t3/sigmarulegen/blob/main/client/src/pages/sigma-generator.tsx"
click node_about_page "https://github.com/05t3/sigmarulegen/blob/main/client/src/pages/about.tsx"
click node_not_found_page "https://github.com/05t3/sigmarulegen/blob/main/client/src/pages/not-found.tsx"
click node_sigma_form "https://github.com/05t3/sigmarulegen/blob/main/client/src/components/sigma-form.tsx"
click node_yaml_preview "https://github.com/05t3/sigmarulegen/blob/main/client/src/components/yaml-preview.tsx"
click node_use_sigma_form "https://github.com/05t3/sigmarulegen/blob/main/client/src/hooks/use-sigma-form.ts"
click node_use_mobile "https://github.com/05t3/sigmarulegen/blob/main/client/src/hooks/use-mobile.tsx"
click node_use_toast "https://github.com/05t3/sigmarulegen/blob/main/client/src/hooks/use-toast.ts"
click node_theme_provider "https://github.com/05t3/sigmarulegen/blob/main/client/src/components/theme-provider.tsx"
click node_ui_library "https://github.com/05t3/sigmarulegen/blob/main/client/src/components/ui/button.tsx"
click node_query_client "https://github.com/05t3/sigmarulegen/blob/main/client/src/lib/queryClient.ts"
click node_sigma_utils "https://github.com/05t3/sigmarulegen/blob/main/client/src/lib/sigma-utils.ts"
click node_sigma_consts "https://github.com/05t3/sigmarulegen/blob/main/client/src/lib/sigma-constants.ts"
click node_shared_schema "https://github.com/05t3/sigmarulegen/blob/main/shared/schema.ts"
click node_server_index "https://github.com/05t3/sigmarulegen/blob/main/server/index.ts"
click node_server_routes "https://github.com/05t3/sigmarulegen/blob/main/server/routes.ts"
click node_server_storage "https://github.com/05t3/sigmarulegen/blob/main/server/storage.ts"
click node_server_vite "https://github.com/05t3/sigmarulegen/blob/main/server/vite.ts"
click node_root_dockerfile "https://github.com/05t3/sigmarulegen/tree/main/Dockerfile"
click node_dev_dockerfile "https://github.com/05t3/sigmarulegen/blob/main/Docker/Docker DEV/Dockerfile.dev"
click node_compose_prod "https://github.com/05t3/sigmarulegen/blob/main/docker-compose.yml"
click node_compose_dev "https://github.com/05t3/sigmarulegen/blob/main/Docker/Docker DEV/docker-compose.yml"
click node_compose_traefik "https://github.com/05t3/sigmarulegen/blob/main/Docker/Docker Compose/docker-compose-traefik.yml"
click node_compose_loki "https://github.com/05t3/sigmarulegen/blob/main/Docker/Docker Compose/docker-compose-loki.yml"
click node_workflow_build "https://github.com/05t3/sigmarulegen/blob/main/.github/workflows/build-images.yml"
click node_workflow_codeql "https://github.com/05t3/sigmarulegen/blob/main/.github/workflows/codeql-analysis.yml"
click node_workflow_snyk_dh "https://github.com/05t3/sigmarulegen/blob/main/.github/workflows/snyk-dockerhub-scan.yml"
click node_workflow_snyk_gchr "https://github.com/05t3/sigmarulegen/blob/main/.github/workflows/snyk-gchr-scan.yml"
click node_workflow_trivy "https://github.com/05t3/sigmarulegen/blob/main/.github/workflows/trivy.yml"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_client_app,node_client_main,node_sigma_page,node_about_page,node_not_found_page,node_sigma_form,node_yaml_preview,node_use_sigma_form,node_use_mobile,node_use_toast,node_theme_provider,node_ui_library,node_query_client,node_sigma_utils,node_sigma_consts toneBlue
class node_server_index,node_server_routes,node_server_storage,node_server_vite toneAmber
class node_shared_schema toneMint
class node_root_dockerfile,node_dev_dockerfile,node_compose_prod,node_compose_dev,node_compose_traefik,node_compose_loki toneRose
class node_workflow_build,node_workflow_codeql,node_workflow_snyk_dh,node_workflow_snyk_gchr,node_workflow_trivy toneIndigo
```

## Components

### Client app

React/Vite SPA for building and previewing Sigma rules.

- [App shell](https://github.com/05t3/sigmarulegen/blob/main/client/src/App.tsx): React entry · Top-level SPA composition and route wiring. · `client/src/App.tsx`
- [Boot entry](https://github.com/05t3/sigmarulegen/blob/main/client/src/main.tsx): SPA bootstrap · Client-side runtime entrypoint. · `client/src/main.tsx`
- [Rule page](https://github.com/05t3/sigmarulegen/blob/main/client/src/pages/sigma-generator.tsx): Page · Primary Sigma generator page and user flow container. · `client/src/pages/sigma-generator.tsx`
- [About page](https://github.com/05t3/sigmarulegen/blob/main/client/src/pages/about.tsx): Page · Informational page for the app. · `client/src/pages/about.tsx`
- [404 page](https://github.com/05t3/sigmarulegen/blob/main/client/src/pages/not-found.tsx): Page · Fallback route for unmatched paths. · `client/src/pages/not-found.tsx`
- [Sigma form](https://github.com/05t3/sigmarulegen/blob/main/client/src/components/sigma-form.tsx): Form component · Structured rule editor and field input layer. · `client/src/components/sigma-form.tsx`
- [YAML preview](https://github.com/05t3/sigmarulegen/blob/main/client/src/components/yaml-preview.tsx): Preview component · Renders the generated Sigma YAML for review and export. · `client/src/components/yaml-preview.tsx`
- [Form state](https://github.com/05t3/sigmarulegen/blob/main/client/src/hooks/use-sigma-form.ts): Hook · Owns form state, validation, and rule generation logic. · `client/src/hooks/use-sigma-form.ts`
- [Mobile hook](https://github.com/05t3/sigmarulegen/blob/main/client/src/hooks/use-mobile.tsx): Hook · Responsive UI behavior for smaller screens. · `client/src/hooks/use-mobile.tsx`
- [Toast hook](https://github.com/05t3/sigmarulegen/blob/main/client/src/hooks/use-toast.ts): Hook · Client notification helper for copy/export feedback. · `client/src/hooks/use-toast.ts`
- [Theme provider](https://github.com/05t3/sigmarulegen/blob/main/client/src/components/theme-provider.tsx): UI shell · Theme and appearance context for the SPA. · `client/src/components/theme-provider.tsx`
- [UI primitives](https://github.com/05t3/sigmarulegen/blob/main/client/src/components/ui/button.tsx): Component library · Reusable shadcn-style controls and layout primitives. · `client/src/components/ui/button.tsx`
- [Query client](https://github.com/05t3/sigmarulegen/blob/main/client/src/lib/queryClient.ts): Client cache · Shared client-side data/query configuration. · `client/src/lib/queryClient.ts`
- [Sigma utils](https://github.com/05t3/sigmarulegen/blob/main/client/src/lib/sigma-utils.ts): Helpers · Rule-related helper functions and transformations. · `client/src/lib/sigma-utils.ts`
- [Sigma constants](https://github.com/05t3/sigmarulegen/blob/main/client/src/lib/sigma-constants.ts): Constants · Shared Sigma-specific option and value definitions. · `client/src/lib/sigma-constants.ts`

### Server runtime

Node layer that serves the app and wires routes.

- [Server entry](https://github.com/05t3/sigmarulegen/blob/main/server/index.ts): Node bootstrap · Starts the Node process and initializes the server. · `server/index.ts`
- [Routes](https://github.com/05t3/sigmarulegen/blob/main/server/routes.ts): Route layer · Defines server endpoints and request handling. · `server/routes.ts`
- [Storage](https://github.com/05t3/sigmarulegen/blob/main/server/storage.ts): Persistence adapter · Abstraction for any backend storage behavior. · `server/storage.ts`
- [Vite bridge](https://github.com/05t3/sigmarulegen/blob/main/server/vite.ts): Dev/prod serving · Connects the server runtime to the Vite app build. · `server/vite.ts`

### Shared contract

Common schema and types used across client and server.

- [Schema types](https://github.com/05t3/sigmarulegen/blob/main/shared/schema.ts): Shared contract · Validation and type definitions shared by client and server. · `shared/schema.ts`

### Packaging

Container and build assets for local and deployed runtime.

- [Dockerfile](https://github.com/05t3/sigmarulegen/tree/main/Dockerfile): Container build · Production container image definition. · `Dockerfile`
- [Dev Dockerfile](https://github.com/05t3/sigmarulegen/blob/HEAD/Docker/Docker%20DEV/Dockerfile.dev): Container build · Development container image definition. · `Docker/Docker DEV/Dockerfile.dev`
- [Compose stack](https://github.com/05t3/sigmarulegen/blob/main/docker-compose.yml): Deployment compose · Production container composition for running the app. · `docker-compose.yml`
- [Dev compose](https://github.com/05t3/sigmarulegen/blob/HEAD/Docker/Docker%20DEV/docker-compose.yml): Deployment compose · Development container composition. · `Docker/Docker DEV/docker-compose.yml`
- [Traefik stack](https://github.com/05t3/sigmarulegen/blob/HEAD/Docker/Docker%20Compose/docker-compose-traefik.yml): Ops compose · Reverse-proxy deployment variant. · `Docker/Docker Compose/docker-compose-traefik.yml`
- [Loki stack](https://github.com/05t3/sigmarulegen/blob/HEAD/Docker/Docker%20Compose/docker-compose-loki.yml): Ops compose · Logging/observability deployment variant. · `Docker/Docker Compose/docker-compose-loki.yml`

### Automation

CI workflows for image builds and security scanning.

- [Build images](https://github.com/05t3/sigmarulegen/blob/main/.github/workflows/build-images.yml): CI workflow · Automates container image builds and publication. · `.github/workflows/build-images.yml`
- [CodeQL](https://github.com/05t3/sigmarulegen/blob/main/.github/workflows/codeql-analysis.yml): CI workflow · Static security analysis workflow. · `.github/workflows/codeql-analysis.yml`
- [Snyk DockerHub](https://github.com/05t3/sigmarulegen/blob/main/.github/workflows/snyk-dockerhub-scan.yml): CI workflow · Container scan workflow for DockerHub images. · `.github/workflows/snyk-dockerhub-scan.yml`
- [Snyk GHCR](https://github.com/05t3/sigmarulegen/blob/main/.github/workflows/snyk-gchr-scan.yml): CI workflow · Container scan workflow for GitHub Container Registry images. · `.github/workflows/snyk-gchr-scan.yml`
- [Trivy scan](https://github.com/05t3/sigmarulegen/blob/main/.github/workflows/trivy.yml): CI workflow · Container vulnerability scanning workflow. · `.github/workflows/trivy.yml`

## Connections

- Boot entry → App shell: mounts · Bootstraps the SPA root.
- App shell → Rule page: routes to · Primary app route for generator experience.
- App shell → About page: routes to · Auxiliary informational page.
- App shell → 404 page: fallback · Handles unmatched routes.
- Rule page → Sigma form: uses · Embeds the rule editing form.
- Rule page → YAML preview: renders · Shows generated YAML alongside editing.
- Sigma form → Form state: drives · Form UI is backed by rule state and generation logic.
- Form state → Schema types: validates · Uses shared schema for shape and constraints.
- Form state → Sigma utils: transforms · Converts form state into Sigma rule output.
- Form state → Sigma constants: reads · Consumes Sigma-specific constants.
- YAML preview → Toast hook: feedback · Supports copy/export notifications.
- App shell → Theme provider: wraps · Provides theme context to the SPA.
- App shell → UI primitives: composes · Built from shared UI primitives.
- App shell → Mobile hook: adapts · Responsive behavior for smaller screens.
- App shell → Query client: initializes · Shared client query/cache setup.
- Server entry → Routes: wires · Registers the route layer.
- Server entry → Vite bridge: serves · Connects runtime to Vite in development or production.
- Routes → Storage: uses · Route handlers rely on storage abstraction when needed.
- Routes → Schema types: shares contract · Aligns server behavior with shared validation types.
- Dockerfile → Server entry: packages · Builds the server-backed application image.
- Dev Dockerfile → Server entry: runs · Development container starts the app server.
- Compose stack → Dockerfile: builds · Production compose uses the production image.
- Dev compose → Dev Dockerfile: builds · Development compose uses the dev image.
- Traefik stack → Compose stack: extends · Reverse-proxy variant built around the main stack.
- Loki stack → Compose stack: extends · Observability variant built around the main stack.
- Build images → Dockerfile: builds · CI builds the production container image.
- CodeQL → Server entry: scans · Static analysis covers application code.
- Trivy scan → Dockerfile: scans · Scans the built container image.
- Snyk DockerHub → Dockerfile: scans · Scans DockerHub-bound image artifacts.
- Snyk GHCR → Dockerfile: scans · Scans GitHub Container Registry image artifacts.