Skip to content

Commit remaining branch changes #39

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Vrun-design merged 1 commit into from
Mar 30, 2026
Merged

Commit remaining branch changes #39

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 26 additions & 2 deletions ARCHITECTURE.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,9 +74,17 @@ Key area:

## State Management

The app uses a single Zustand store assembled in `src/store.ts`.
The app uses a single public Zustand store exported from `src/store.ts`.

The store is composed from action factories and supported by selective hook files in `src/store/`.
The runtime store is now bootstrapped through:

- `src/store/createFlowStore.ts`
- `src/store/createFlowStoreState.ts`
- `src/store/createFlowStorePersistOptions.ts`

This keeps the public entry stable while moving composition, persistence, and hydration concerns behind explicit seams.

The store is still monolithic at runtime, but it is now partitioned more clearly through slice-typed hooks, selectors, and internal slice factories in `src/store/`.

Current store-facing hook files include:

Expand All @@ -91,6 +99,10 @@ Supporting files:

- `defaults.ts`
- `types.ts`
- `selectors.ts`
- `slices/createCanvasEditorSlice.ts`
- `slices/createExperienceSlice.ts`
- `slices/createWorkspaceSlice.ts`
- `persistence.ts`
- `aiSettings.ts`

Expand All @@ -104,6 +116,7 @@ Persistence is coordinated through:

- `src/store/persistence.ts`
- `src/services/storage/flowPersistStorage.ts`
- `src/services/storage/storageRuntime.ts`
- `src/services/storage/indexedDbStateStorage.ts`

Current behavior at a high level:
Expand All @@ -113,6 +126,10 @@ Current behavior at a high level:
- localStorage remains part of the compatibility and fallback story
- persisted nodes/edges are sanitized before storage
- ephemeral UI fields are excluded from persisted state
- browser storage detection and IndexedDB schema readiness are now funneled through a shared storage runtime helper instead of each storage surface bootstrapping itself independently
- IndexedDB store and index definitions are now declared in one schema manifest in `src/services/storage/indexedDbSchema.ts`
- schema migration markers now live in a dedicated IndexedDB schema metadata store instead of sharing the persisted Zustand state store
- local-first chat persistence now uses document-scoped IndexedDB indexes instead of full chat-message store scans

Important constraint:

Expand Down Expand Up @@ -219,6 +236,12 @@ Examples include:

These plugins and registrations allow the app to support multiple structured diagram behaviors without collapsing all logic into the base canvas layer.

Built-in diagram capabilities are now bootstrapped through a shared runtime initialization path instead of scattered one-off registration calls:

- `src/diagram-types/bootstrap.ts`
- `src/diagram-types/builtInPlugins.ts`
- `src/diagram-types/builtInPropertyPanels.ts`

---

## Docs Surfaces
Expand All @@ -244,6 +267,7 @@ Collaboration currently lives under:

Current implementation notes:

- collaboration runtime construction now flows through `src/services/collaboration/bootstrap.ts`
- realtime transport is built around peer-oriented collaboration
- the current stack includes WebRTC-style transport concerns and signaling configuration
- fallback behavior exists for unsupported environments
Expand Down
87 changes: 44 additions & 43 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@
<table>
<tr>
<td align="center"><b>🏠 Workspace Home</b><br/><sub>Create · open · import<br/>No forced blank file</sub></td>
<td align="center"><b>🧑‍💻 Code → Diagram</b><br/><sub>GitHub · SQL · Terraform<br/>K8s · Docker Compose</sub></td>
<td align="center"><b>🧑‍💻 Code → Diagram</b><br/><sub>GitHub · SQL · Terraform<br/>K8s · OpenAPI</sub></td>
<td align="center"><b>🤖 AI Generation</b><br/><sub>9 providers · BYOK<br/>Streaming diff preview</sub></td>
<td align="center"><b>`{}` Diagram as Code</b><br/><sub>Bidirectional live sync<br/>Git-friendly DSL</sub></td>
<td align="center"><b>🧩 Asset Libraries</b><br/><sub>Developer · AWS · Azure<br/>GCP · CNCF · Icons</sub></td>
Expand Down Expand Up @@ -81,7 +81,7 @@ Every diagramming tool makes a compromise. OpenFlowKit doesn't.
| ----------------------- | ----------------------------------------------------------------------------- |
| **Excalidraw / tldraw** | Freeform whiteboards — no structured diagram types, no DSL, no code imports |
| **Mermaid.js** | Code-only — no visual canvas, no AI, no interactive editor |
| **Draw.io** | Decade-old UX — Limited AI integration, no developer import pipelines |
| **Draw.io** | Decade-old UX — Limited AI integration, no developer import pipelines |
| **Lucidchart / Miro** | Cloud lock-in — expensive, account required, your data lives on their servers |
| **PlantUML** | Server-dependent rendering — no visual editor, no local-first model |

Expand All @@ -91,20 +91,20 @@ OpenFlowKit is the **only MIT-licensed tool** that combines a real workspace hom

## Feature highlights

| | OpenFlowKit | Excalidraw | Draw.io | Mermaid | Lucidchart |
| ------------------------------- | :---------: | :--------: | :-----: | :-----: | :--------: |
| Visual canvas editor | ✅ | ✅ | ✅ | ❌ | ✅ |
| Bidirectional diagram-as-code | ✅ | ❌ | ❌ | ✅ | ❌ |
| AI generation (9 providers) | ✅ | ❌ | ❌ | ❌ | Limited |
| GitHub repo → diagram | ✅ | ❌ | ❌ | ❌ | ❌ |
| SQL → ERD (native parser) | ✅ | ❌ | ❌ | ❌ | ❌ |
| Terraform / K8s / Docker import | ✅ | ❌ | ❌ | ❌ | ❌ |
| AWS / Azure / GCP / CNCF icons | ✅ | ❌ | ✅ | Partial | ✅ |
| Real-time collaboration (P2P) | ✅ | ✅ | ❌ | ❌ | ✅ (cloud) |
| Cinematic animated export | ✅ | ❌ | ❌ | ❌ | ❌ |
| Figma export (editable SVG) | ✅ | ❌ | ❌ | ❌ | ❌ |
| No account required | ✅ | ✅ | ✅ | ✅ | ❌ |
| Open source (MIT) | ✅ | ✅ | ✅ | ✅ | ❌ |
| | OpenFlowKit | Excalidraw | Draw.io | Mermaid | Lucidchart |
| ------------------------------ | :---------: | :--------: | :-----: | :-----: | :--------: |
| Visual canvas editor | ✅ | ✅ | ✅ | ❌ | ✅ |
| Bidirectional diagram-as-code | ✅ | ❌ | ❌ | ✅ | ❌ |
| AI generation (9 providers) | ✅ | ❌ | ❌ | ❌ | Limited |
| GitHub repo → diagram | ✅ | ❌ | ❌ | ❌ | ❌ |
| SQL → ERD (native parser) | ✅ | ❌ | ❌ | ❌ | ❌ |
| Terraform / K8s import | ✅ | ❌ | ❌ | ❌ | ❌ |
| AWS / Azure / GCP / CNCF icons | ✅ | ❌ | ✅ | Partial | ✅ |
| Real-time collaboration (P2P) | ✅ | ✅ | ❌ | ❌ | ✅ (cloud) |
| Cinematic animated export | ✅ | ❌ | ❌ | ❌ | ❌ |
| Figma export (editable SVG) | ✅ | ❌ | ❌ | ❌ | ❌ |
| No account required | ✅ | ✅ | ✅ | ✅ | ❌ |
| Open source (MIT) | ✅ | ✅ | ✅ | ✅ | ❌ |

---

Expand All @@ -125,35 +125,43 @@ CREATE TABLE orders (
→ Typed ERD with inferred foreign-key edges and cardinalities. Rendered in milliseconds, no server involved.

```yaml
# docker-compose.yml
services:
api:
depends_on: [postgres, redis]
postgres:
image: postgres:16
redis:
image: redis:alpine
# deployment.yaml
apiVersion: apps/v1
kind: Deployment
spec:
replicas: 3
---
apiVersion: v1
kind: Service
selector:
app: api
---
apiVersion: networking.k8s.io/v1
kind: Ingress
spec:
rules:
- host: api.example.com
```

→ Service architecture with `depends_on` edges and port labels.
→ Kubernetes architecture with Deployment → Service → Ingress connections.

**AI-powered imports (API key required):**

```
github.com/vercel/next.js → architecture diagram
```

→ Fetches the repo, analyzes code structure and dependencies, then generates an editable architecture diagram via AI. Quality depends on the model chosen.
→ Fetches a prioritized slice of the GitHub repository in-browser, analyzes the codebase with AI, then generates an editable architecture diagram. Quality depends on repository size, file coverage, and model choice.

| Source | Engine | API key? |
| ------------------------- | -------------------------- | :------: |
| GitHub repo URL | AI · 9 languages supported | Yes |
| GitHub repo URL | AI-assisted import | Yes |
| SQL DDL | **Native parser** | **No** |
| Terraform `.tfstate` | **Native parser** | **No** |
| Terraform HCL | AI-assisted | Yes |
| Kubernetes YAML / Helm | **Native parser** | **No** |
| Docker Compose | **Native parser** | **No** |
| OpenAPI / Swagger spec | AI-assisted | Yes |
| OpenAPI / Swagger YAML/JSON | **Native parser** | **No** |
| OpenAPI source text → richer flow | AI-assisted | Yes |
| Source code (single file) | AI-assisted · 9 languages | Yes |
| Mermaid | **Native parser** | **No** |

Expand Down Expand Up @@ -263,14 +271,14 @@ Local-first stays the default. Your saved flows live in the browser, your AI key

## Canvas built for keyboard-first developers

| Shortcut | Action |
| ---------------- | ---------------------------------------------------- |
| Shortcut | Action |
| ---------------- | --------------------------------------------------------- |
| `⌘ K` / `Ctrl K` | Command bar — search, import, layout, assets, and actions |
| `⌘ \` / `Ctrl \` | Toggle the live code panel |
| `⌘ Z` / `Ctrl Z` | Full undo with complete history |
| `⌘ D` / `Ctrl D` | Duplicate selection |
| `⌘ G` / `Ctrl G` | Group selected nodes |
| `⌘ /` / `Ctrl /` | Keyboard shortcuts reference |
| `⌘ \` / `Ctrl \` | Toggle the live code panel |
| `⌘ Z` / `Ctrl Z` | Full undo with complete history |
| `⌘ D` / `Ctrl D` | Duplicate selection |
| `⌘ G` / `Ctrl G` | Group selected nodes |
| `⌘ /` / `Ctrl /` | Keyboard shortcuts reference |

Plus: smart alignment guides, snap-to-grid, multi-select, pages, layers, sections, architecture lint, light/dark/system theme, and full i18n in 7 languages.

Expand Down Expand Up @@ -314,13 +322,6 @@ npm run build
# upload dist/ to your provider
```

**Docker:**

```bash
docker build -t openflowkit .
docker run -p 8080:80 openflowkit
```

No database. No secrets. No infrastructure. One folder.

---
Expand Down
Loading
Loading