diff --git a/.codex-skill-edits/interface-design.SKILL.md b/.codex-skill-edits/interface-design.SKILL.md
new file mode 100644
index 0000000..895270b
--- /dev/null
+++ b/.codex-skill-edits/interface-design.SKILL.md
@@ -0,0 +1,395 @@
+---
+name: interface-design
+description: Design product interfaces (dashboards, admin panels, SaaS apps, tools, settings pages, data interfaces). Do not use for marketing design such as landing pages, marketing sites, or campaigns.
+---
+
+# Interface Design
+
+Build interface design with craft and consistency.
+
+## Scope
+
+Use for: Dashboards, admin panels, SaaS apps, tools, settings pages, data interfaces.
+
+Not for: Landing pages, marketing sites, campaigns. Redirect those to `/frontend-design`.
+
+## System First
+
+When working inside an existing product or codebase, do not invent a new visual language.
+
+Treat these as the source of truth, in this order:
+- the user's comps and mockups
+- the shipped UI kit and shared components
+- the existing design-system tokens, themes, and brand primitives
+- written product UX specs and aesthetic guidance
+
+For this workspace, inspect the relevant local sources before proposing or building:
+- `/Users/varun/Desktop/Dev_projects/flowmind-ai/NODE_UX_SPEC.md`
+- `/Users/varun/Desktop/Dev_projects/flowmind-ai/src/theme.ts`
+- `/Users/varun/Desktop/Dev_projects/flowmind-ai/src/store/designSystemHooks.ts`
+- `/Users/varun/Desktop/Dev_projects/flowmind-ai/src/components/ui/`
+- `/Users/varun/Desktop/Dev_projects/flowmind-ai/src/components/`
+- `/Users/varun/Desktop/Dev_projects/flowmind-ai/docs-site/src/content/docs/design-systems-branding.md`
+
+If the repo already contains a component, token, spacing pattern, radius scale, interaction style, or layout treatment that solves the problem, reuse it or extend it. Do not replace it with a new style system unless the user explicitly asks for a redesign.
+
+If comps exist, match them closely. Do not "improve" them by drifting into a cleaner, trendier, or more generic AI-generated style.
+
+If the existing system is incomplete, fill the gap with the smallest possible extension that still looks native to the rest of the product.
+
+Explicitly avoid:
+- introducing new typography, colors, radii, shadows, motion, or component patterns that are not already supported by the product aesthetic
+- mixing unrelated aesthetics across screens
+- replacing established patterns with generic dashboard defaults
+- treating design exploration as permission to ignore the existing system
+
+## The Problem
+
+You will generate generic output. Your training has seen thousands of dashboards. The patterns are strong.
+
+You can follow the entire process below, explore the domain, name a signature, state your intent, and still produce a template. Warm colors on cold structures. Friendly fonts on generic layouts. Kitchen feel that looks like every other app.
+
+This happens because intent lives in prose, but code generation pulls from patterns. The gap between them is where defaults win.
+
+The process below helps. But process alone does not guarantee craft. You have to catch yourself.
+
+## Where Defaults Hide
+
+Defaults do not announce themselves. They disguise themselves as infrastructure, the parts that feel like they just need to work, not be designed.
+
+Typography feels like a container. Pick something readable, move on. But typography is not holding your design, it is your design. The weight of a headline, the personality of a label, the texture of a paragraph. These shape how the product feels before anyone reads a word. A bakery management tool and a trading terminal might both need clean, readable type, but the type that is warm and handmade is not the type that is cold and precise. If you are reaching for your usual font, you are not designing.
+
+Navigation feels like scaffolding. Build the sidebar, add the links, get to the real work. But navigation is not around your product, it is your product. Where you are, where you can go, what matters most. A page floating in space is a component demo, not software. The navigation teaches people how to think about the space they are in.
+
+Data feels like presentation. You have numbers, show numbers. But a number on screen is not design. The question is: what does this number mean to the person looking at it? What will they do with it? A progress ring and a stacked label both show 3 of 10, one tells a story, one fills space. If you are reaching for number on label, you are not designing.
+
+Token names feel like implementation detail. But your CSS variables are design decisions. `--ink` and `--parchment` evoke a world. `--gray-700` and `--surface-2` evoke a template. Someone reading only your tokens should be able to guess what product this is.
+
+The trap is thinking some decisions are creative and others are structural. There are no structural decisions. Everything is design. The moment you stop asking why this is the moment defaults take over.
+
+## Intent First
+
+Before touching code, answer these. Not in your head, out loud to yourself or the user.
+
+Who is this human?
+Not users. The actual person. Where are they when they open this? What is on their mind? What did they do 5 minutes ago, what will they do 5 minutes after? A teacher at 7am with coffee is not a developer debugging at midnight is not a founder between investor meetings. Their world shapes the interface.
+
+What must they accomplish?
+Not use the dashboard. The verb. Grade these submissions. Find the broken deployment. Approve the payment. The answer determines what leads, what follows, what hides.
+
+What should this feel like?
+Say it in words that mean something. Clean and modern means nothing. Warm like a notebook? Cold like a terminal? Dense like a trading floor? Calm like a reading app? The answer shapes color, type, spacing, density, everything.
+
+If you are working inside an existing system, answer these in terms of the current product language first. What already exists that this work must align to? What comps, tokens, and components already define the answer?
+
+If you cannot answer these with specifics, stop. Ask the user. Do not guess. Do not default.
+
+## Every Choice Must Be A Choice
+
+For every decision, you must be able to explain why.
+
+- Why this layout and not another?
+- Why this color temperature?
+- Why this typeface?
+- Why this spacing scale?
+- Why this information hierarchy?
+
+If your answer is it is common or it is clean or it works, you have not chosen. You have defaulted. Defaults are invisible. Invisible choices compound into generic output.
+
+The test: If you swapped your choices for the most common alternatives and the design did not feel meaningfully different, you never made real choices.
+
+## Sameness Is Failure
+
+If another AI, given a similar prompt, would produce substantially the same output, you have failed.
+
+This is not about being different for its own sake. It is about the interface emerging from the specific problem, the specific user, the specific context. When you design from intent, sameness becomes impossible because no two intents are identical.
+
+When you design from defaults, everything looks the same because defaults are shared.
+
+## Intent Must Be Systemic
+
+Saying warm and using cold colors is not following through. Intent is not a label, it is a constraint that shapes every decision.
+
+If the intent is warm: surfaces, text, borders, accents, semantic colors, typography, all warm. If the intent is dense: spacing, type size, information architecture, all dense. If the intent is calm: motion, contrast, color saturation, all calm.
+
+Check your output against your stated intent. Does every token reinforce it? Or did you state an intent and then default anyway?
+
+## Product Domain Exploration
+
+This is where defaults get caught, or do not.
+
+Generic output: Task type to visual template to theme.
+Crafted output: Task type to product domain to signature to structure plus expression.
+
+The difference: time in the product world before any visual or structural thinking.
+
+## Required Outputs
+
+Do not propose any direction until you produce all four:
+
+Domain: Concepts, metaphors, vocabulary from this product world. Not features, territory. Minimum 5.
+
+Color world: What colors exist naturally in this product domain? Not warm or cool, go to the actual world. If this product were a physical space, what would you see? What colors belong there that do not belong elsewhere? List 5 plus.
+
+Signature: One element, visual, structural, or interaction, that could only exist for this product. If you cannot name one, keep exploring.
+
+Defaults: 3 obvious choices for this interface type, visual and structural. You cannot avoid patterns you have not named.
+
+When the project already has comps or a shipped system, add a fifth required output:
+
+System anchors: the exact local files, components, tokens, and existing patterns this design must inherit from.
+
+## Proposal Requirements
+
+Your direction must explicitly reference:
+- Domain concepts you explored
+- Colors from your color world exploration
+- Your signature element
+- What replaces each default
+- The existing system anchors you are preserving
+
+If you are designing inside an existing product, your proposal must explain how it stays inside the current comps, UI kit, design system, and aesthetic. Novelty is not the goal. Coherence is.
+
+The test: Read your proposal. Remove the product name. Could someone identify what this is for? If not, it is generic. Explore deeper.
+
+## The Mandate
+
+Before showing the user, look at what you made.
+
+Ask yourself: If they said this lacks craft, what would they mean?
+
+That thing you just thought of, fix it first.
+
+## The Checks
+
+Run these against your output before presenting:
+
+- The swap test: If you swapped the typeface for your usual one, would anyone notice? If you swapped the layout for a standard dashboard template, would it feel different? The places where swapping would not matter are the places you defaulted.
+- The squint test: Blur your eyes. Can you still perceive hierarchy? Is anything jumping out harshly? Craft whispers.
+- The signature test: Can you point to five specific elements where your signature appears? Not the overall feel, actual components. A signature you cannot locate does not exist.
+- The token test: Read your CSS variables out loud. Do they sound like they belong to this product world, or could they belong to any project?
+
+If any check fails, iterate before showing.
+
+## Craft Foundations
+
+### Subtle Layering
+
+This is the backbone of craft. Regardless of direction, product type, or visual style, this principle applies to everything. You should barely notice the system working. When you look at Vercel's dashboard, you do not think nice borders. You just understand the structure. The craft is invisible, that is how you know it is working.
+
+#### Surface Elevation
+
+Surfaces stack. A dropdown sits above a card which sits above the page. Build a numbered system, base, then increasing elevation levels. In dark mode, higher elevation is slightly lighter. In light mode, higher elevation is slightly lighter or uses shadow.
+
+Each jump should be only a few percentage points of lightness. You can barely see the difference in isolation. But when surfaces stack, the hierarchy emerges. Whisper quiet shifts that you feel rather than see.
+
+Key decisions:
+- Sidebars: Same background as canvas, not different. Different colors fragment the visual space into sidebar world and content world. A subtle border is enough separation.
+- Dropdowns: One level above their parent surface. If both share the same level, the dropdown blends into the card and layering is lost.
+- Inputs: Slightly darker than their surroundings, not lighter. Inputs are inset, they receive content. A darker background signals type here without heavy borders.
+
+#### Borders
+
+Borders should disappear when you are not looking for them, but be findable when you need structure. Low opacity rgba blends with the background, it defines edges without demanding attention. Solid hex borders look harsh in comparison.
+
+Build a progression, not all borders are equal. Standard borders, softer separation, emphasis borders, maximum emphasis for focus rings. Match intensity to the importance of the boundary.
+
+The squint test: Blur your eyes at the interface. You should still perceive hierarchy, what is above what, where sections divide. But nothing should jump out. No harsh lines. No jarring color shifts. Just quiet structure.
+
+This separates professional interfaces from amateur ones. Get this wrong and nothing else matters.
+
+### Infinite Expression
+
+Every pattern has infinite expressions. No interface should look the same.
+
+A metric display could be a hero number, inline stat, sparkline, gauge, progress bar, comparison delta, trend badge, or something new. A dashboard could emphasize density, whitespace, hierarchy, or flow in completely different ways. Even sidebar plus cards has infinite variations in proportion, spacing, and emphasis.
+
+Before building, ask:
+- What is the one thing users do most here?
+- What products solve similar problems brilliantly? Study them.
+- Why would this interface feel designed for its purpose, not templated?
+
+Never produce identical output. Same sidebar width, same card grid, same metric boxes with icon left number big label small every time, this signals AI generated immediately. It is forgettable.
+
+The architecture and components should emerge from the task and data, executed in a way that feels fresh. Linear's cards do not look like Notion's. Vercel's metrics do not look like Stripe's. Same concepts, infinite expressions.
+
+### Color Lives Somewhere
+
+Every product exists in a world. That world has colors.
+
+Before you reach for a palette, spend time in the product world. What would you see if you walked into the physical version of this space? What materials? What light? What objects?
+
+Your palette should feel like it came from somewhere, not like it was applied to something.
+
+Beyond warm and cold: Temperature is one axis. Is this quiet or loud? Dense or spacious? Serious or playful? Geometric or organic? A trading terminal and a meditation app are both focused, completely different kinds of focus. Find the specific quality, not the generic label.
+
+Color carries meaning: Gray builds structure. Color communicates, status, action, emphasis, identity. Unmotivated color is noise. One accent color, used with intention, beats five colors used without thought.
+
+## Before Writing Each Component
+
+Every time you write UI code, even small additions, state:
+
+```
+Intent: [who is this human, what must they do, how should it feel]
+Palette: [colors from your exploration and why they fit this product world]
+Depth: [borders, shadows, layered, and why this fits the intent]
+Surfaces: [your elevation scale and why this color temperature]
+Typography: [your typeface and why it fits the intent]
+Spacing: [your base unit]
+System anchors: [which comps, tokens, shared components, and existing patterns this component must match]
+```
+
+This checkpoint is mandatory. It forces you to connect every technical choice back to intent.
+
+If you cannot explain why for each choice, you are defaulting. Stop and think.
+
+If you are inside an existing product, "why" should usually be "because this already exists in the system and this work should extend it consistently," not "because this would be interesting."
+
+## Design Principles
+
+### Token Architecture
+
+Every color in your interface should trace back to a small set of primitives: foreground (text hierarchy), background (surface elevation), border (separation hierarchy), brand, and semantic (destructive, warning, success). No random hex values, everything maps to primitives.
+
+#### Text Hierarchy
+
+Do not just have text and gray text. Build four levels, primary, secondary, tertiary, muted. Each serves a different role: default text, supporting text, metadata, and disabled or placeholder. Use all four consistently. If you are only using two, your hierarchy is too flat.
+
+#### Border Progression
+
+Borders are not binary. Build a scale that matches intensity to importance, standard separation, softer separation, emphasis, maximum emphasis. Not every boundary deserves the same weight.
+
+#### Control Tokens
+
+Form controls have specific needs. Do not reuse surface tokens. Create dedicated ones for control backgrounds, control borders, and focus states. This lets you tune interactive elements independently from layout surfaces.
+
+### Spacing
+
+Pick a base unit and stick to multiples. Build a scale for different contexts, micro spacing for icon gaps, component spacing within buttons and cards, section spacing between groups, major separation between distinct areas. Random values signal no system.
+
+### Padding
+
+Keep it symmetrical. If one side has a value, others should match unless content naturally requires asymmetry.
+
+### Depth
+
+Choose one approach and commit:
+- Borders only, clean, technical, for dense tools.
+- Subtle shadows, soft lift, for approachable products.
+- Layered shadows, premium, dimensional, for cards that need presence.
+- Surface color shifts, background tints establish hierarchy without shadows.
+
+Do not mix approaches.
+
+### Border Radius
+
+Sharper feels technical. Rounder feels friendly. Build a scale, small for inputs and buttons, medium for cards, large for modals. Do not mix sharp and soft randomly.
+
+### Typography
+
+Build distinct levels distinguishable at a glance. Headlines need weight and tight tracking for presence. Body needs comfortable weight for readability. Labels need medium weight that works at smaller sizes. Data needs monospace with tabular number spacing for alignment. Do not rely on size alone, combine size, weight, and letter spacing.
+
+### Card Layouts
+
+A metric card does not have to look like a plan card does not have to look like a settings card. Design each card internal structure for its specific content, but keep the surface treatment consistent: same border weight, shadow depth, corner radius, padding scale.
+
+### Controls
+
+Native select and input type date render OS native elements that cannot be styled. Build custom components, trigger buttons with positioned dropdowns, calendar popovers, styled state management.
+
+### Iconography
+
+Icons clarify, not decorate. If removing an icon loses no meaning, remove it. Choose one icon set and stick with it. Give standalone icons presence with subtle background containers.
+
+### Animation
+
+Fast micro interactions, smooth easing. Larger transitions can be slightly longer. Use deceleration easing. Avoid spring or bounce in professional interfaces.
+
+### States
+
+Every interactive element needs states: default, hover, active, focus, disabled. Data needs states too: loading, empty, error. Missing states feel broken.
+
+### Navigation Context
+
+Screens need grounding. A data table floating in space feels like a component demo, not a product. Include navigation showing where you are in the app, location indicators, and user context. When building sidebars, consider same background as main content with border separation rather than different colors.
+
+### Dark Mode
+
+Dark interfaces have different needs. Shadows are less visible on dark backgrounds, lean on borders for definition. Semantic colors (success, warning, error) often need slight desaturation. The hierarchy system still applies, just with inverted values.
+
+## Avoid
+
+- Harsh borders, if borders are the first thing you see, they are too strong.
+- Dramatic surface jumps, elevation changes should be whisper quiet.
+- Inconsistent spacing, the clearest sign of no system.
+- Mixed depth strategies, pick one approach and commit.
+- Missing interaction states, hover, focus, disabled, loading, error.
+- Dramatic drop shadows, shadows should be subtle, not attention grabbing.
+- Large radius on small elements.
+- Pure white cards on colored backgrounds.
+- Thick decorative borders.
+- Gradients and color for decoration, color should mean something.
+- Multiple accent colors, dilutes focus.
+- Different hues for different surfaces, keep the same hue, shift only lightness.
+
+## Workflow
+
+### Communication
+
+Be invisible. Do not announce modes or narrate process.
+
+Never say: I am in ESTABLISH MODE, Let me check system.md...
+
+Instead: Jump into work. State suggestions with reasoning.
+
+### Suggest and Ask
+
+Lead with your exploration and recommendation, then confirm:
+
+```
+Domain: [5 plus concepts from the product world]
+Color world: [5 plus colors that exist in this domain]
+Signature: [one element unique to this product]
+Rejecting: [default 1] to [alternative], [default 2] to [alternative], [default 3] to [alternative]
+
+Direction: [approach that connects to the above]
+```
+
+Ask: Does that direction feel right?
+
+### If Project Has system.md
+
+Read `.interface-design/system.md` and apply. Decisions are made.
+
+### If No system.md
+
+1. Explore domain, produce all four required outputs.
+2. Propose, direction must reference all four.
+3. Confirm, get user buy in.
+4. Build, apply principles.
+5. Evaluate, run the mandate checks before showing.
+6. Offer to save.
+
+## After Completing a Task
+
+When you finish building something, always offer to save:
+
+```
+"Want me to save these patterns for future sessions?"
+```
+
+If yes, write to `.interface-design/system.md`:
+- Direction and feel
+- Depth strategy (borders or shadows or layered)
+- Spacing base unit
+- Key component patterns
+
+### What to Save
+
+Add patterns when a component is used 2 plus times, is reusable across the project, or has specific measurements worth remembering. Do not save one off components, temporary experiments, or variations better handled with props.
+
+### Consistency Checks
+
+If system.md defines values, check against them: spacing on the defined grid, depth using the declared strategy throughout, colors from the defined palette, documented patterns reused instead of reinvented.
+
+This compounds, each save makes future work faster and more consistent.
diff --git a/.codex-skill-edits/openflowkit-marketing-ui-designer.SKILL.md b/.codex-skill-edits/openflowkit-marketing-ui-designer.SKILL.md
new file mode 100644
index 0000000..3dd2db2
--- /dev/null
+++ b/.codex-skill-edits/openflowkit-marketing-ui-designer.SKILL.md
@@ -0,0 +1,92 @@
+---
+name: openflowkit-marketing-ui-designer
+description: Design OpenFlowKit marketing pages and content surfaces with strong hierarchy, positioning, and conversion clarity. Use for landing-page redesigns, section architecture, feature storytelling, page-level visual systems, and marketing UX decisions in `web/`.
+---
+
+# OpenFlowKit Marketing UI Designer
+
+Design marketing experiences that make OpenFlowKit feel like a serious category-defining product, not a generic SaaS site.
+
+## Scope
+
+Use for:
+- landing page redesigns
+- feature and use-case page structure
+- narrative section ordering
+- visual direction for marketing components
+- conversion-oriented page UX
+
+Do not use for:
+- internal app dashboards or editor UI
+- generic “make it prettier” requests without product positioning
+
+## Design System Guardrails
+
+Stay inside the existing OpenFlowKit visual system unless the user explicitly asks for a reset.
+
+Before proposing or implementing design work, inspect the relevant local sources first:
+- `/Users/varun/Desktop/Dev_projects/flowmind-ai/STRATEGY.md`
+- `/Users/varun/Desktop/Dev_projects/flowmind-ai/NODE_UX_SPEC.md`
+- `/Users/varun/Desktop/Dev_projects/flowmind-ai/web/src/components/`
+- `/Users/varun/Desktop/Dev_projects/flowmind-ai/web/src/styles/`
+- `/Users/varun/Desktop/Dev_projects/flowmind-ai/src/components/landing/`
+- `/Users/varun/Desktop/Dev_projects/flowmind-ai/src/components/ui/`
+- `/Users/varun/Desktop/Dev_projects/flowmind-ai/src/theme.ts`
+- `/Users/varun/Desktop/Dev_projects/flowmind-ai/docs-site/src/content/docs/design-systems-branding.md`
+
+Treat these as priority order:
+1. User-provided comps and mockups
+2. Existing shipped components and layouts
+3. Existing tokens, themes, and brand primitives
+4. Existing page aesthetics and motion patterns
+5. New design ideas only where the system has a real gap
+
+Do not drift into a different brand voice, typography system, color language, or layout grammar just because a different direction looks polished in isolation.
+
+If a page already has established components, extend them. If a pattern exists twice, preserve the pattern. If the system is incomplete, add the smallest native-feeling extension.
+
+## Core Standard
+
+Every page must answer:
+- Who is this page for?
+- What job are they trying to get done?
+- Why is OpenFlowKit structurally better than alternatives?
+- What should they do next?
+- Which existing comps, components, tokens, and page patterns is this page inheriting from?
+
+## Workflow
+
+1. Start from audience and search intent, not decoration.
+2. Audit the existing comps, `web/` components, landing components, and design-system files before creating anything new.
+3. Tie page structure to product truth from `STRATEGY.md`, docs, and shipped features.
+4. Make one strong page idea. Avoid kitchen-sink landing sections.
+5. Use bold hierarchy, precise copy surfaces, and clear contrast between problem, product, and proof, while preserving the established OpenFlowKit aesthetic.
+6. Design for desktop and mobile at the same time.
+7. Prefer a system that can extend across many pages, not a one-off hero treatment.
+8. Reuse or adapt existing sections before inventing new component families.
+
+## Non-Negotiables
+
+- Do not introduce a new design language when the repo already has one.
+- Do not substitute generic SaaS gradients, type stacks, card systems, or interactions for the existing OpenFlowKit look.
+- Do not ignore user comps in favor of a cleaner or trendier composition.
+- Do not add new tokens or components without checking whether the same role already exists locally.
+- When you do add something new, explain why the current system could not cover it and how the addition stays visually native.
+
+## OpenFlowKit Positioning Anchors
+
+Lean on real advantages:
+- local-first
+- open-source
+- BYOK AI
+- code-to-canvas and visual editing
+- architecture and infra workflows
+- export breadth
+
+## Deliverables
+
+- page intent
+- section architecture
+- visual direction and interaction notes
+- implementation-ready guidance for `web/`
+- system anchors: the exact comps, components, styles, and tokens being reused or extended
diff --git a/.env.example b/.env.example
index 1b0e796..e38344e 100644
--- a/.env.example
+++ b/.env.example
@@ -3,7 +3,7 @@
 # =============================================================================
 # Copy this file to `.env.local` and fill in the keys you need.
 # All AI keys are OPTIONAL — users can also paste keys directly in
-# Settings → Brand → Flowpilot (BYOK model).
+# Settings → AI.
 # Never commit your real .env.local file to git!
 # =============================================================================
 
@@ -41,18 +41,6 @@ VITE_CUSTOM_AI_BASE_URL=
 VITE_CUSTOM_AI_API_KEY=
 VITE_CUSTOM_AI_MODEL=
 
-
-# -----------------------------------------------------------------------------
-# 📊 ANALYTICS
-# -----------------------------------------------------------------------------
-
-# PostHog — https://app.posthog.com/settings/project
-# Leave empty to disable analytics entirely.
-# If you fork this repo, analytics will NOT fire until you add your own key.
-VITE_POSTHOG_KEY=
-VITE_POSTHOG_HOST=https://app.posthog.com
-
-
 # -----------------------------------------------------------------------------
 # 🚀 DEPLOYMENT
 # -----------------------------------------------------------------------------
diff --git a/ARCHITECTURE.md b/ARCHITECTURE.md
index 202d227..17d0a63 100644
--- a/ARCHITECTURE.md
+++ b/ARCHITECTURE.md
@@ -1,127 +1,288 @@
-# OpenFlowKit — Architecture Guide
+# OpenFlowKit Architecture Guide
+
+This document is a current high-level map of the codebase. It is intentionally narrower than a full design spec and should stay aligned with the implementation in `src/`.
+
+---
 
 ## Overview
 
-OpenFlowKit is a local-first, open-source diagramming tool built on React 19, React Flow, and Zustand. All diagram data lives in the browser (IndexedDB / localStorage) with no required backend.
+OpenFlowKit is a local-first diagram editor built with:
 
-```
+- React 19
+- TypeScript 5
+- React Flow / XYFlow
+- Zustand
+- ELK.js
+
+The main application lives in `src/`. Additional repo surfaces include:
+
+- `docs-site/` for canonical public docs content and site generation
+- `docs/` for repo-only notes and operational markdown
+- `web/` for the marketing site
+
+Main app shape:
+
+```text
 src/
-  components/       UI components (nodes, edges, panels, command bar)
-  hooks/            Domain hooks that compose store + services
-  services/         Pure data services (serialization, layout, export)
-  store/            Zustand global store, slices, hooks, persistence
-  lib/              Shared types, React Flow compat shim, DSL parser
-  config/           Rollout flags, constants
-  i18n/             Translation strings
-  pages/            Route-level page components
+  app/                Route state helpers
+  components/         UI surfaces and editor shells
+  config/             Rollout flags and provider config
+  context/            React context providers
+  diagram-types/      Diagram family plugins and property panel registration
+  hooks/              Feature and editor hooks
+  i18n/               Localization
+  lib/                Shared types, parsers, compat helpers, utilities
+  services/           Domain services
+  store/              Zustand state, actions, defaults, persistence
 ```
 
+Route composition is currently centered in `src/App.tsx`, not in a dedicated `pages/` directory.
+
 ---
 
-## State Management — Zustand Store
+## Runtime Surfaces
+
+The repository contains three main product/runtime surfaces:
+
+### 1. Main App
+
+The browser editor and related in-app experiences.
+
+Key areas:
+
+- `src/App.tsx`
+- `src/components/FlowEditor.tsx`
+- `src/components/home/*`
+
+### 2. Docs Site
+
+The public docs site built with Astro/Starlight.
+
+Key area:
 
-The single store (`src/store/`) is organised into named **slices**. Each slice has its own hook file for selective subscription.
+- `docs-site/`
 
-| Slice | Hook file | Responsibility |
-|-------|-----------|----------------|
-| Canvas | `canvasHooks.ts` | `nodes`, `edges`, `onNodesChange`, `onEdgesChange`, `onConnect` |
-| Tabs | `tabHooks.ts` | Multi-diagram workspace, active tab, CRUD |
-| History | `historyHooks.ts` | Undo/redo V2 (per-tab `history.past / future` arrays) |
-| Design | `designSystemHooks.ts` | Design systems, global edge options |
-| Brand | `brandHooks.ts` | Brand config, brand kits, active kit |
-| View | `viewHooks.ts` | Grid, snap, routing, safety mode, language |
-| Selection | `selectionHooks.ts` | `selectedNodeId`, `selectedEdgeId`, pending edits |
+### 3. Marketing Site
 
-**Persistence** (`src/store/persistence.ts`) serialises tabs + view settings to IndexedDB on every store change. Storage keys intentionally use the legacy `flowmind_*` prefix — do not rename them without a migration path, as this would silently erase existing user diagrams.
+The public landing/marketing site.
+
+Key area:
+
+- `web/`
 
 ---
 
-## Hook Hierarchy
+## State Management
 
-```
-FlowEditor (component)
-  └─ useFlowEditorCallbacks    // connects React Flow events → store
-  └─ useFlowEditorActions      // keyboard shortcuts, toolbar actions
-  └─ useFlowHistory            // undo/redo, delegates to store V2
-  └─ useNodeOperations         // add / duplicate / delete nodes
-  └─ useEdgeOperations         // add / update / delete edges
-  └─ useClipboardOperations    // copy / paste
-  └─ useLayoutOperations       // ELK auto-layout
-  └─ useFlowExport             // PNG / JSON / GIF export
-  └─ useAIGeneration           // prompt → DSL → graph
-  └─ usePlayback               // scene/step playback state
-```
+The app uses a single Zustand store assembled in `src/store.ts`.
+
+The store is composed from action factories and supported by selective hook files in `src/store/`.
+
+Current store-facing hook files include:
+
+- `canvasHooks.ts`
+- `tabHooks.ts`
+- `historyHooks.ts`
+- `designSystemHooks.ts`
+- `viewHooks.ts`
+- `selectionHooks.ts`
+
+Supporting files:
+
+- `defaults.ts`
+- `types.ts`
+- `persistence.ts`
+- `aiSettings.ts`
+
+There is no current top-level `brandHooks.ts` slice in `src/store/`.
 
 ---
 
-## History (Undo/Redo)
+## Persistence
 
-History is the **V2 model** only (V1 was removed 2026-03-18). Each `FlowTab` object carries:
+Persistence is coordinated through:
 
-```ts
-history: { past: TabSnapshot[], future: TabSnapshot[] }
-```
+- `src/store/persistence.ts`
+- `src/services/storage/flowPersistStorage.ts`
+- `src/services/storage/indexedDbStateStorage.ts`
+
+Current behavior at a high level:
+
+- document/tab state is persisted through Zustand persistence
+- IndexedDB-backed storage is used where available
+- localStorage remains part of the compatibility and fallback story
+- persisted nodes/edges are sanitized before storage
+- ephemeral UI fields are excluded from persisted state
 
-`recordHistoryV2()` snapshots nodes + edges into `past`, clears `future`, and trims to a memory budget (~4 MB). `undoV2()` / `redoV2()` swap snapshots. The `useFlowHistory` hook is the single public interface — components never call store history actions directly.
+Important constraint:
+
+- persisted storage keys should not be renamed without a migration path
 
 ---
 
-## Layout Engine
+## Editor Composition
+
+The editor now follows a clearer four-layer composition path:
+
+1. `src/components/FlowEditor.tsx`
+   render shell only
+2. `src/components/flow-editor/useFlowEditorScreenModel.ts`
+   screen-level composition of store state, domain hooks, and refs
+3. `src/components/flow-editor/buildFlowEditorScreenControllerParams.ts`
+   pure assembly of controller config from screen-model state
+4. `src/components/flow-editor/useFlowEditorController.ts`
+   adaptation into shell, studio, panel, and chrome controller surfaces
+
+Key editor concerns composed through that path include:
 
-ELK.js is loaded as a **lazy singleton** (`src/services/elkLayout.ts`). It is instantiated on first call to `runELKLayout()` and reused thereafter. A `resetElkInstance()` export is provided for test teardown. The singleton is intentionally not part of the Zustand store.
+- tabs and active document selection
+- node and edge operations
+- history and snapshots
+- AI generation
+- export/import
+- playback
+- collaboration
+- command bar and studio mode surfaces
+- selection and keyboard bindings
+
+This is still the main integration hotspot in the architecture, but it is now bounded more explicitly:
+
+- `FlowEditor.tsx` should stay render-only
+- `useFlowEditorScreenModel.ts` should gather state and domain hooks, not render UI
+- `buildFlowEditorScreenControllerParams.ts` should stay pure and only map grouped screen state into controller input
+- `useFlowEditorController.ts` should adapt grouped inputs into UI-facing shell/panel/chrome props
+
+If future work bypasses those boundaries, editor maintainability will regress quickly.
 
 ---
 
-## Node System
+## Domain Hooks
+
+The app uses hooks to compose store state and service logic into editor-facing behaviors.
+
+Examples:
 
-All diagram nodes render through `CustomNode` (`src/components/CustomNode.tsx`). Rendering is split into sub-components:
+- `useFlowHistory`
+- `useFlowOperations`
+- `useAIGeneration`
+- `useFlowExport`
+- `usePlayback`
+- `useFlowEditorCollaboration`
+- `useFlowEditorActions`
+- `useFlowEditorCallbacks`
 
-| Component | Purpose |
-|-----------|---------|
-| `NodeShapeSVG` | Renders complex SVG shapes (diamond, hexagon, cylinder, …) from declarative props |
-| `IconAssetNodeBody` | Full layout for icon-first asset nodes (architecture icon packs, custom URLs) |
-| `CustomNode` | Standard node body — uses `NodeShapeSVG` for complex shapes, delegates to `IconAssetNodeBody` for asset nodes |
+The architecture intent is:
 
-Custom edges go through `CustomEdgeWrapper` which applies design system stroke colour, width, and relation-type dash patterns.
+- services own domain logic
+- hooks compose state and side effects
+- components render and delegate
 
 ---
 
-## DSL — OpenFlow YAML
+## Services
 
-OpenFlowKit has its own text DSL (`openflow`) parsed by `src/lib/openFlowDSLParser.ts`. The AI generation pipeline produces OpenFlow YAML which is then hydrated into React Flow nodes/edges.
+`src/services/` contains most of the domain-heavy logic.
 
-Code fence markers accepted by the parser: ` ```openflow `, ` ```yaml ` (and legacy ` ```flowmind ` for backwards compatibility with saved AI responses).
+Notable service areas:
+
+- `ai/`
+- `architectureLint/`
+- `collaboration/`
+- `diagramDiff/`
+- `export/`
+- `figma/`
+- `infraSync/`
+- `mermaid/`
+- `playback/`
+- `shapeLibrary/`
+- `storage/`
+- `templateLibrary/`
+
+This is one of the stronger structural parts of the codebase: a significant amount of non-UI logic lives outside React components.
 
 ---
 
-## Rollout Flags
+## Diagram Families
 
-Feature flags are defined in `src/config/rolloutFlags.ts`. Each flag maps to a `VITE_*` env variable so builds can be configured per-environment without code changes.
+Built-in diagram families and property panel registration live under:
 
-```ts
-// Example
-const ROLLOUT_FLAGS = {
-  visualQualityV2: import.meta.env.VITE_ROLLOUT_VISUAL_QUALITY_V2 === 'true',
-};
-```
+- `src/diagram-types/`
+
+Examples include:
 
-Flags should be removed once a feature is fully promoted (no dead code).
+- architecture
+- class diagram
+- ER diagram
+- journey
+- mindmap
+- state diagram
+
+These plugins and registrations allow the app to support multiple structured diagram behaviors without collapsing all logic into the base canvas layer.
+
+---
+
+## Docs Surfaces
+
+The repo currently has two documentation buckets:
+
+### Public docs
+
+- canonical content and runtime in `docs-site/`
+
+### Repo-only notes
+
+- operational and setup markdown in `docs/`
+
+---
+
+## Collaboration
+
+Collaboration currently lives under:
+
+- `src/hooks/useFlowEditorCollaboration.ts`
+- `src/services/collaboration/*`
+
+Current implementation notes:
+
+- 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
+
+This area is functional but still evolving and should be treated as active infrastructure rather than fully settled architecture.
 
 ---
 
 ## Export Pipeline
 
-| Format | Entry point | Notes |
-|--------|-------------|-------|
-| PNG | `useFlowExport → html-to-image` | Captures React Flow canvas |
-| JSON | `useFlowExport → canonicalSerialization` | Deterministic key ordering |
-| GIF | `useFlowExport → animatedExport + gifEncoder` | Playback scene frames |
+Export logic is primarily coordinated through:
+
+- `src/hooks/useFlowExport.ts`
+- `src/services/export/*`
+
+Current formats and related capabilities include:
+
+- raster image export
+- SVG export
+- JSON export
+- Mermaid export
+- OpenFlow DSL export
+- animated export / playback-related export
 
 ---
 
-## E2E Tests
+## Testing
 
-Playwright specs live in `e2e/`. Run with `npm run e2e`. The app must be running on `localhost:5173` (default Vite port).
+Testing is split across:
+
+- Vitest unit and component tests in `src/`
+- Playwright end-to-end tests in `e2e/`
+
+Useful commands:
+
+```bash
+npm run lint
+npm test -- --run
+npm run e2e:ci
+```
 
-- `smoke.spec.ts` — tab creation, snapshot save/restore
-- `workflows.spec.ts` — node create/edit, undo/redo, export JSON/PNG, copy-paste, delete, share panel
+For current repo-health status and phased remediation, see `AUDIT_FIX_LOG.md`.
diff --git a/README.md b/README.md
index 6903ba0..b145754 100644
--- a/README.md
+++ b/README.md
@@ -1,28 +1,39 @@
 <div align="center">
 
-<img src="public/favicon.svg" width="80" alt="OpenFlowKit" />
+<img src="public/favicon.svg" width="90" alt="OpenFlowKit logo" />
 
 <h1>OpenFlowKit</h1>
 
-<p><strong>The open-source, local-first diagramming tool with AI generation built in.<br/>No account. No cloud. No limits. Free forever.</strong></p>
+<p><strong>The open-source diagramming studio for developers and builders.</strong><br/>
+Prompt · Import · Edit · Export as animated video · Collaborate — entirely in your browser, no account required.</p>
 
 <p>
   <a href="https://github.com/Vrun-design/openflowkit/blob/main/LICENSE"><img src="https://img.shields.io/badge/License-MIT-orange.svg" alt="MIT License" /></a>
-  <a href="#testing"><img src="https://img.shields.io/badge/tests-637%20passing-brightgreen.svg" alt="Tests" /></a>
-  <img src="https://img.shields.io/badge/TypeScript-strict-blue.svg" alt="TypeScript" />
+  <a href="https://github.com/Vrun-design/openflowkit/stargazers"><img src="https://img.shields.io/github/stars/Vrun-design/openflowkit?style=flat&color=yellow" alt="GitHub Stars" /></a>
   <img src="https://img.shields.io/badge/React-19-61dafb.svg" alt="React 19" />
+  <img src="https://img.shields.io/badge/TypeScript-5-3178c6.svg" alt="TypeScript 5" />
+  <img src="https://img.shields.io/badge/Vite-6-646cff.svg" alt="Vite 6" />
+  <img src="https://img.shields.io/badge/Tests-Vitest-6e9f18.svg" alt="Vitest" />
   <img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg" alt="PRs Welcome" />
 </p>
 
 <p>
-  <a href="https://app.openflowkit.com"><strong>Open the App →</strong></a>
+  <a href="https://www.producthunt.com/products/openflowkit?utm_source=badge-top-post-topic-badge&utm_medium=badge&utm_campaign=badge-openflowkit" target="_blank">
+    <img src="https://api.producthunt.com/widgets/embed-image/v1/top-post-topic-badge.svg?post_id=1081019&theme=light&period=weekly&topic_id=44" alt="OpenFlowKit on Product Hunt" width="200" height="43" />
+  </a>
+</p>
+
+<h3>
+  <a href="https://app.openflowkit.com">→ Launch the App</a>
+  &nbsp;·&nbsp;
+  <a href="https://openflowkit.com">Website</a>
   &nbsp;·&nbsp;
   <a href="https://docs.openflowkit.com">Documentation</a>
   &nbsp;·&nbsp;
-  <a href="https://openflowkit.com">Website</a>
+  <a href="https://github.com/Vrun-design/openflowkit/issues/new?template=bug_report.md">Report a Bug</a>
   &nbsp;·&nbsp;
-  <a href="https://github.com/Vrun-design/openflowkit/issues">Report a Bug</a>
-</p>
+  <a href="https://github.com/Vrun-design/openflowkit/issues/new?template=feature_request.md">Request a Feature</a>
+</h3>
 
 </div>
 
@@ -30,165 +41,356 @@
 
 ## What is OpenFlowKit?
 
-OpenFlowKit is a fully open-source diagramming tool that runs **entirely in your browser**. It combines a fast, professional canvas with AI generation so you can go from a plain-English description to a structured, editable diagram in seconds.
+OpenFlowKit is a **local-first, developer-grade diagramming workspace** that lives entirely in your browser. It is built for the engineers, architects, and builders who create system diagrams for a living — and who are tired of paying for cloud tools, surrendering their data, or fighting with drag-and-drop tools that produce static images instead of living, version-controllable artifacts.
 
-There's no account to create, no server storing your work, and no feature gated behind a paywall — ever. Your diagrams live in browser local storage and stay there unless you explicitly export or share them.
+**The core loop is simple:**
 
 ```
-You: "Draw a microservices architecture with an API gateway, auth service,
-      product service, and Postgres database"
-
-OpenFlowKit: *builds it*
+Prompt / Import → Edit visually or in code → Export anywhere
 ```
 
+Start from a plain-English prompt, a Mermaid file, SQL schema, OpenAPI spec, Terraform config, or one of 20 built-in templates. Refine on a polished canvas. Export to Mermaid, PlantUML, Figma, PNG, PDF, or a cinematic reveal video. Your diagrams stay in your browser by default, and your API keys never leave your device.
+
 ---
 
 ## Why OpenFlowKit?
 
-| | OpenFlowKit | Lucidchart / Miro | draw.io |
-|---|---|---|---|
-| Open source | ✅ MIT | ❌ | ✅ |
-| AI generation | ✅ Built-in | 💰 Paid tier | ❌ |
-| Local-first | ✅ Zero cloud | ❌ Cloud only | ⚠️ Partial |
-| No account needed | ✅ | ❌ | ✅ |
-| Bring your own API key | ✅ | ❌ | ❌ |
-| OpenFlow DSL (code as diagram) | ✅ | ❌ | ❌ |
-| Playback & history export | ✅ | ❌ | ❌ |
-| Free forever | ✅ | ❌ Freemium | ✅ |
+Every existing tool misses something critical for developers. OpenFlowKit fills those gaps.
+
+| Tool | The gap | How OpenFlowKit fills it |
+|---|---|---|
+| **Excalidraw** | Freeform only, no structured diagram types, no DSL | 8 structured diagram families, bidirectional diagram-as-code, Figma export |
+| **Draw.io / diagrams.net** | Dated UX, no AI, no code representation | Modern React 19 canvas, 9 AI providers, OpenFlow DSL |
+| **Mermaid.js** | Code-only, no visual editor | Full visual editor on top of Mermaid — edit visually or in code, bidirectionally |
+| **tldraw** | Whiteboard-first, no structured diagram types | Cloud architecture (AWS/Azure/CNCF icons), class, ER, state, and more |
+| **Lucidchart / Miro** | Paid, cloud-only, account required | MIT licensed, local-first, and usable without an account |
+
+**OpenFlowKit combines** a visual canvas editor, a diagram-as-code environment, an AI-powered generator, a developer import pipeline, and a Figma / docs export workflow in one open-source, local-first app.
+
+---
+
+## ✨ Spotlight: Cinematic Export
+
+<p align="center">
+<strong>Turn a finished diagram into a polished animated walkthrough without leaving the editor.</strong>
+</p>
+
+Most diagramming tools stop at static images. OpenFlowKit can export a **cinematic build video or GIF** so a diagram can be presented as a lightweight animated walkthrough. This is especially useful for:
+
+- 📣 **Conference talks & demos** — walk the audience through your system live
+- 📖 **Docs & wikis** — embed an animated GIF that loads without a video player
+- 🐦 **Social posts & Product Hunt launches** — eye-catching previews that stop the scroll
+- 🎓 **Engineering onboarding** — show new hires how a system connects, step by step
+
+**How it works:**
+1. Build and refine the diagram on the canvas
+2. Open **Export**
+3. Choose a cinematic video or cinematic GIF output
+4. Generate a shareable artifact directly in the browser
+
+No account. No upload. No third-party video service. Rendered entirely in your browser.
 
 ---
 
 ## Features
 
-### 🤖 AI Generation
-Describe what you want in plain English. OpenFlowKit calls the AI with your own API key and builds a fully editable diagram. No middleman, no usage fees, no data sent to our servers.
+### 🤖 Flowpilot — AI Generation & Editing
 
-Supports **Gemini** and **OpenAI-compatible** endpoints. Works with any locally-run model behind a compatible API.
+Describe a system in natural language. Flowpilot generates a fully laid-out, editable diagram in seconds. Bring your own key from any supported provider — keys are stored in your browser and never transmitted to OpenFlowKit servers.
 
-### 📝 OpenFlow DSL
-Every diagram is round-trippable code. The OpenFlow DSL is a human-readable, git-friendly format — paste code in, get a diagram; export a diagram, get code. Ideal for version-controlled documentation.
+**9 supported AI providers:**
 
-```
-flow: "Payment Processing"
-direction: LR
+| Provider | Default model |
+|---|---|
+| Google Gemini | `gemini-2.5-flash-lite` |
+| OpenAI | `gpt-5-mini` |
+| Anthropic Claude | `claude-sonnet-4-6` |
+| Groq | `llama-4-scout-17b-16e-instruct` |
+| Mistral | `mistral-medium-latest` |
+| NVIDIA | `llama-4-scout-17b-16e-instruct` |
+| Cerebras | `gpt-oss-120b` |
+| OpenRouter | `google/gemini-2.5-flash` |
+| **Custom endpoint** | Any OpenAI-compatible API (Ollama, LM Studio, Together AI…) |
+
+**Flowpilot capabilities:**
+
+- ✦ Generate a new diagram from a text prompt
+- ✦ Iteratively edit the existing canvas with targeted instructions
+- ✦ Scope edits to the current selection only
+- ✦ Attach an image alongside your prompt for visual context
+- ✦ Stream responses in real time with a cancel button
+- ✦ Multi-turn conversation with browser-local chat history
+- ✦ **Diff preview** — see added / updated / removed node count before applying; confirm or discard
+- ✦ **Shared AI settings modal** — open provider and key setup from Flowpilot when AI is not configured
 
-node checkout [label: "Checkout"]
-node gateway [label: "Payment Gateway", shape: diamond]
-node success [label: "Success", shape: capsule]
-node failure [label: "Retry", shape: capsule]
+---
 
-checkout -> gateway
-gateway -> success [label: "Approved"]
-gateway -> failure [label: "Declined"]
-```
+### 📥 Developer Import Pipelines
 
-### ⚡ Smart Layout
-One-click auto-arrange with **ELK.js** — the same layout engine used by Eclipse and VS Code's diagram extensions. Hierarchical, layered, force-directed, and radial modes for any graph shape.
+Feed any structured artifact into OpenFlowKit and get a ready-to-edit diagram:
 
-### 🎬 Playback & History
-Every edit is recorded. Scrub through your diagram's full edit history visually. Export the playback as an **animated GIF** or PNG sequence — useful for walkthroughs, onboarding docs, and architecture reviews.
+| Source | Generated diagram |
+|---|---|
+| **SQL DDL** (`CREATE TABLE` statements) | Entity-relationship diagram with typed fields and cardinalities |
+| **Terraform / Kubernetes YAML / Docker Compose** | Cloud architecture diagram with provider icons |
+| **OpenAPI / Swagger spec** | API sequence diagram with operations and responses |
+| **Source code** (TS, JS, Python, Go, Java, Ruby, C#, C++, Rust) | Architecture draft from module structure |
+| **Mermaid** | Native import, fully editable |
 
-### 🗂️ Templates
-20 curated starter templates so you're never staring at a blank canvas:
+File upload with automatic language detection, or paste raw text.
 
-| Category | Templates |
+---
+
+### 📐 8 Structured Diagram Types
+
+| Diagram | What it includes | Mermaid export |
+|---|---|---|
+| **Flowchart** | Start/end, process, decision, annotation, swimlane, section | `flowchart TD` |
+| **Architecture** | AWS, Azure, CNCF icons; zones, trust domains, service boundaries | `architecture-beta` |
+| **Class Diagram** | UML classes, attributes, methods, stereotypes, all relation types | `classDiagram` |
+| **ER Diagram** | Entities with typed fields (PK, FK, NN, UNIQUE), cardinality edges | `erDiagram` |
+| **Mind Map** | Hierarchical topics, curved branches, depth-aware auto-layout | `mindmap` |
+| **User Journey** | Scored tasks, named sections, actor annotations | `journey` |
+| **State Diagram** | States, composite containers, start-node markers | `stateDiagram-v2` |
+| **Wireframe** | Browser shells, mobile frames, UI component blocks | — |
+
+---
+
+### 📤 Export Everywhere
+
+**🖼 Images:** SVG · PNG (transparent, hi-res) · JPG · PDF
+
+**🎬 Animation & Video** *(unique to OpenFlowKit)*
+
+| Format | Description |
 |---|---|
-| Workflows | Generic flowchart, operational runbook, decision tree |
-| Cloud Architecture | AWS 3-tier, Azure landing zone, CNCF platform, Kubernetes cluster |
-| Planning | Mind map, user journey, affinity map, roadmap |
-| Wireframes | Mobile screen, browser app, component hierarchy |
+| Playback MP4 / WebM | Simple video replay of your diagram |
+| Playback GIF | Looping animation for embedding anywhere |
+| **Cinematic Video** ⭐ | Presentation-friendly animated diagram export for talks, demos, and walkthroughs |
+| **Cinematic GIF** ⭐ | Lightweight looping animated export for embeds and social sharing |
+
+**`{}` Code & Data:** JSON · OpenFlow DSL · Mermaid · PlantUML
+
+**🎨 Design Handoff:** Paste directly into **Figma** as editable SVG with intact text layers
+
+**🔗 Sharing:** Read-only viewer link — diagram encoded in the URL, zero server required
+
+---
+
+### `{}` OpenFlow DSL — Diagram as Code
+
+Every diagram has a live text representation. Edits sync **bidirectionally** — change the canvas, the code updates; change the code, the canvas updates. The AI reads and writes this format, making it ideal for version-controlled documentation and automated diagram generation.
+
+```yaml
+# Example: AWS architecture as code
+Auth Service   [architecture] provider=aws resource=security
+API Gateway    [architecture] provider=aws resource=api
+Redis Cache    [architecture] provider=aws resource=database
+Postgres DB    [architecture] provider=aws resource=database
+
+Auth Service -> API Gateway
+API Gateway  -> Redis Cache
+API Gateway  -> Postgres DB
+```
+
+The DSL supports explicit node IDs, typed attributes, edge styles, labeled connections, and group containers — all in a concise, human-readable format. See [DSL_MANUAL.md](DSL_MANUAL.md) for the full reference.
+
+---
+
+### 🎬 Playback & Presentation
+
+OpenFlowKit includes presentation-oriented animated export for sharing a diagram as motion instead of a single static frame.
+
+- **Cinematic export:** generate a browser-rendered video or GIF from the current diagram
+- **Presentation-ready output:** useful for demos, onboarding, social posts, and docs walkthroughs
+- **Shareable artifacts:** export motion without a separate video editor
+
+---
+
+### 📦 20 Built-in Templates
+
+One-click starters across 7 categories, fully searchable.
+
+<details>
+<summary>View all templates</summary>
+
+**Flowchart**
+- Subscription Upgrade Workflow
+- Incident Escalation Runbook
+- CI/CD Release Train
+- Payment Recovery Loop
+- AI Support Escalation
+
+**AWS**
+- AWS Event-Driven API (API Gateway, Lambda, EventBridge, SQS, DynamoDB, Step Functions, SES)
+- AWS Data Lake Analytics (S3, Glue, DataZone, Athena, Redshift)
+- AWS Container Delivery Platform
+- AWS Security Operations Loop
 
-### 🎨 Shape & Icon Library
-- **Core shapes** — rectangles, rounded rects, capsules, circles, diamonds, hexagons, cylinders, parallelograms, and more
-- **Specialised nodes** — process, decision, start/end, annotation, text block, section, image, browser frame, mobile frame, architecture icon node
-- **AWS** — full SVG icon pack with provider categories
-- **Azure** — Microsoft architecture SVG pack
-- **CNCF** — cloud-native artwork pack
-- **Lucide** — 1,000+ general-purpose icons
+**Azure**
+- Azure AI Application Platform
+- Azure Landing Zone Operations
+- Azure Data Estate
+- Azure Identity Access Hub
 
-### 📤 Export Formats
-**SVG** · **PNG** · **JPG** · **Mermaid** · **OpenFlow DSL** · **JSON** · **Figma paste**
+**CNCF**
+- CNCF GitOps Platform
+- CNCF Service Mesh Security
+- CNCF Observability Stack
 
-### 🔗 Collaboration
-Browser-based peer-to-peer collaboration via WebRTC room links. No server, no accounts, no persistence — just share a link and work together live.
+**Mindmap · Journey · Wireframe**
+- Product Discovery Mindmap
+- Engineering Strategy Mindmap
+- Customer Onboarding Journey
+- Cross-Platform SaaS Starter Wireframe
+
+</details>
 
 ---
 
-## Stack
+### 🔀 Smart Auto-Layout
+
+One-click ELK.js layout with four presets:
 
-| Layer | Technology | Why |
+| Preset | Algorithm | Best for |
 |---|---|---|
-| UI framework | React 19 + TypeScript 5 | React Compiler for automatic memoisation |
-| Canvas | React Flow / XYFlow 12 | Best-in-class graph canvas |
-| Layout engine | ELK.js | Professional-grade auto-layout |
-| State | Zustand 5 | Lightweight, per-slice architecture |
-| Styling | Tailwind CSS 4 | Utility-first, zero runtime CSS |
-| Animation | Framer Motion | Canvas transitions and playback |
-| Build | Vite 6 | Fast HMR, optimised chunking |
-| Tests | Vitest 4 + Testing Library | 637 tests, fast parallelised runs |
-| Docs | Astro + Starlight | Static, multilingual (EN + TR) |
-| Hosting | Cloudflare Pages | Free tier, global CDN, 3 separate projects |
+| Tree | `mrtree`, top-down | Org charts, dependency trees |
+| Hierarchical | `layered`, top-down | Most flows and sequences |
+| Compact | `layered`, left-right, tight | Dense diagrams |
+| Spacious | `layered`, left-right, loose | Presentations and handoffs |
+
+---
+
+### 👥 Real-Time Collaboration *(beta)*
+
+Peer-to-peer collaboration via **WebRTC + Yjs**. Share a room link — participants see live cursors, presence indicators, and a fully synchronized canvas state. No server-side diagram storage, ever.
+
+---
+
+### ⌨️ Canvas, Keyboard & Multi-Tab Workspace
+
+- **Multi-tab workspace** — multiple diagrams open simultaneously
+- **Undo / redo** — per-tab history with full undo stack
+- **Snapshots** — named point-in-time save states
+- **Inline label editing** — double-click or `F2`
+- **Bulk properties** — edit multiple selected nodes at once
+- **Style clipboard** — `Cmd+Alt+C` / `Cmd+Alt+V` to copy/paste styles between nodes
+- **Node quick-create** — `Alt+Arrow` to spawn and connect a new node in any direction
+- **Node search** — `Cmd+F` to find nodes by label
+- **Architecture lint** — automatic validation rules for cloud diagrams
+- **Design systems** — full color/typography theming with white-label support
+
+**Essential shortcuts:**
+
+| Shortcut | Action |
+|---|---|
+| `Cmd+K` | Command Bar / Flowpilot |
+| `Cmd+F` | Search nodes |
+| `?` | Keyboard shortcuts help |
+| `Shift+1` | Fit view |
+| `Cmd+Z` / `Cmd+Shift+Z` | Undo / Redo |
+| `Cmd+D` | Duplicate |
+| `Alt+Arrow` | Quick-create connected node |
+| `F2` | Edit label inline |
+| `Cmd+Alt+C` / `Cmd+Alt+V` | Copy / Paste style |
+
+---
+
+### 🌐 Internationalization
+
+Available in 7 languages: **English · German · Spanish · French · Japanese · Turkish · Chinese**
+
+---
+
+### 🔒 Privacy & Security
+
+- **No account, ever.** No sign-up, no login, no user tracking.
+- **Keys stay in your browser.** API keys are never transmitted to OpenFlowKit. Persistent storage and session-only storage are both supported.
+- **Local-first persistence.** Diagrams are saved in browser-local storage by default and restored on refresh and browser restart unless you delete them.
+- **No telemetry.** We don't collect usage data.
+- **MIT licensed.** No lock-in, no strings attached.
+
+---
+
+## Tech Stack
+
+| Layer | Technology |
+|---|---|
+| UI framework | React 19 + TypeScript 5 |
+| Canvas engine | React Flow / XYFlow 12 |
+| Graph layout | ELK.js |
+| State management | Zustand 5 |
+| Styling | Tailwind CSS 4 |
+| Animation | Framer Motion |
+| Collaboration | Yjs + y-webrtc + y-indexeddb |
+| Build | Vite 6 |
+| Unit / integration tests | Vitest 4 + Testing Library |
+| E2E tests | Playwright |
+| Docs site | Astro + Starlight |
+| Hosting | Cloudflare Pages |
 
 ---
 
 ## Getting Started
 
 ### Prerequisites
-- Node.js 18+
-- npm 9+
 
-### Install & run locally
+- **Node.js** ≥ 18
+- **npm** ≥ 9
+
+### Run locally in 30 seconds
 
 ```bash
 git clone https://github.com/Vrun-design/openflowkit.git
 cd openflowkit
 npm install
-npm run dev        # → http://localhost:5173
+npm run dev
+# → http://localhost:5173
 ```
 
-To use AI generation, open **Settings → AI** in the app and add your Gemini or OpenAI API key. It's stored locally in your browser — never sent to us.
+### Add an AI provider
 
-### Build for production
-
-```bash
-npm run build          # compile + bundle
-npm run bundle:check   # verify bundle size budgets
-```
+Open the AI panel in the sidebar. If no key is configured, the **Add key** action opens the shared AI settings modal, where you can choose a provider, enter your API key, and decide whether it should persist on the current device or only for the current session.
 
-### Run the docs site locally
+---
 
-```bash
-npm run dev --workspace=docs-site    # → http://localhost:4321
-```
+## Commands
 
-### Run the landing page locally
+### Development
 
 ```bash
-npm run dev --workspace=web          # → http://localhost:4320
+npm run dev           # Start dev server (localhost:5173)
+npm run build         # Production build
+npm run preview       # Preview production build locally
+npm run bundle:check  # Analyze bundle size against budget
+npm run lint          # ESLint (zero warnings allowed)
+npm test -- --run     # Run all unit + integration tests once
 ```
 
----
-
-## Testing
+### Focused test suites
 
 ```bash
-npm test -- --run          # full suite
+npm run test:s0               # Core smoke tests
+npm run test:s10-state        # Store and state diagram tests
+npm run test:s10-canvas       # Canvas interaction tests
+npm run test:s4-handle-safety # Handle safety tests
 ```
 
-Focused suites for faster iteration:
+### E2E
 
 ```bash
-npm run test:s0            # store, history, canvas core types
-npm run test:s10-state     # state management and persistence
-npm run test:s10-canvas    # canvas interaction logic
-npm run test:s4-handle-safety  # edge handle safety rules
+npm run e2e           # Full Playwright suite
+npm run e2e:ci        # Chromium only (CI mode)
 ```
 
-TypeScript and lint:
+### Workspaces
 
 ```bash
-npx tsc --noEmit           # type check
-npx eslint src             # lint
+npm run dev   --workspace=docs-site   # Docs site dev server
+npm run build --workspace=docs-site   # Build docs
+
+npm run dev   --workspace=web         # Marketing site dev server
+npm run build --workspace=web         # Build marketing site
 ```
 
 ---
@@ -196,92 +398,98 @@ npx eslint src             # lint
 ## Project Structure
 
 ```
-src/
-  components/
-    command-bar/      Command palette — Assets, Templates, Design, Code, AI views
-    flow-canvas/      Canvas orchestration, node/edge renderers, overlays
-    home/             Dashboard, settings, welcome surfaces
-    properties/       Node, edge, and canvas side panels
-    top-nav/          Nav bar — export, share, history, collaboration
-  config/             Rollout flags (feature gating)
-  hooks/              Editor hooks — clipboard, history, playback, interaction
-  lib/                Shared types, OpenFlow DSL parser, utilities
-  services/
-    collaboration/    WebRTC room links and sync transport
-    shapeLibrary/     Provider icon catalog, lazy SVG loading
-    templateLibrary/  Starter template registry
-    playback/         Playback model, step generation, GIF export
-  store/              Zustand store — slices, defaults, persistence
-
-docs-site/            Astro + Starlight documentation (EN + TR)
-web/                  Astro marketing landing page
-assets/
-  third-party-icons/  AWS, Azure, CNCF SVG packs + source metadata
-scripts/
-  shape-pack/         Icon pack intake and validation tooling
+openflowkit/
+├── src/
+│   ├── app/                  Route state helpers
+│   ├── components/           UI surfaces, editor shells, nodes, panels, command bar
+│   ├── config/               Rollout flags and AI provider config
+│   ├── context/              React context providers
+│   ├── diagram-types/        Diagram family plugins and property panel registration
+│   ├── hooks/                Feature + editor hooks (AI, keyboard, operations, export)
+│   ├── i18n/                 Localization strings (7 languages)
+│   ├── lib/                  Shared types, parsers, compat helpers, utilities
+│   ├── services/             Domain services (AI, export, collaboration, storage…)
+│   └── store/                Zustand store, slices, persistence, defaults
+│
+├── docs-site/                Public documentation (Astro + Starlight)
+├── web/                      Marketing site (Astro)
+├── e2e/                      Playwright end-to-end tests
+├── assets/                   Icon packs and shape metadata
+└── scripts/                  Build, benchmark, sitemap, asset tooling
 ```
 
----
-
-## Architecture
+### Editor architecture
 
-See [ARCHITECTURE.md](ARCHITECTURE.md) for deep-dives on:
-- Store slice design and per-slice hook pattern
-- History V2 (per-tab `past/future` arrays, no global snapshot)
-- ELK singleton and layout pipeline
-- Export pipeline and bundle chunking strategy
-- Rollout flag system for safe feature gating
+The editor follows a strict four-layer composition model that separates concerns cleanly:
 
----
-
-## Contributing
-
-See [CONTRIBUTING.md](CONTRIBUTING.md) for full setup instructions and code guidelines.
-
-**The two rules that matter most:**
-
-1. **Never rename storage keys.** `openflowkit-storage`, `flowmind-clipboard`, `flowmind_snapshots` — changing these silently wipes existing user data.
-2. **New features go behind a rollout flag.** Add an entry to `src/config/rolloutFlags.ts` and gate the code path. Flip the default to `true` in a separate PR once validated.
+```
+FlowEditor.tsx                                    ← render shell only
+  └─ useFlowEditorScreenModel.ts                  ← compose store state + domain hooks + refs
+       └─ buildFlowEditorScreenControllerParams.ts ← pure mapping (no side effects)
+            └─ useFlowEditorController.ts          ← adapts to shell/studio/panel/chrome props
+```
 
-Before opening a PR: `tsc --noEmit` and `eslint` must be clean, and all 637 tests must pass.
+Domain services own logic. Hooks compose state and side effects. Components render and delegate. See [ARCHITECTURE.md](ARCHITECTURE.md) for the full breakdown.
 
 ---
 
 ## Deployment
 
-Three independent Cloudflare Pages projects, one repo:
-
-| Project | URL | Build command | Output |
+| Surface | URL | Build command | Output dir |
 |---|---|---|---|
 | App | `app.openflowkit.com` | `npm run build` | `dist/` |
 | Docs | `docs.openflowkit.com` | `npm run build --workspace=docs-site` | `docs-site/dist/` |
 | Landing | `openflowkit.com` | `npm run build --workspace=web` | `web/dist/` |
 
-Full setup guide: [docs/cloudflare-pages-setup.md](docs/cloudflare-pages-setup.md)
+All three surfaces deploy to Cloudflare Pages. See [`docs/cloudflare-pages-setup.md`](docs/cloudflare-pages-setup.md).
 
 ---
 
-## Asset Licensing
+## Contributing
+
+Contributions of all kinds are welcome — bug reports, features, docs, translations, and design feedback. See [CONTRIBUTING.md](CONTRIBUTING.md) for the full guide.
 
-OpenFlowKit ships with third-party SVG icon packs under their own licenses. Check `SOURCE.md` before redistributing.
+**Key constraints to know before contributing:**
 
-| Pack | License info |
+| Constraint | Why it matters |
 |---|---|
-| AWS | [assets/third-party-icons/aws/SOURCE.md](assets/third-party-icons/aws/SOURCE.md) |
-| Azure | [assets/third-party-icons/azure/SOURCE.md](assets/third-party-icons/azure/SOURCE.md) |
-| CNCF | [assets/third-party-icons/cncf/SOURCE.md](assets/third-party-icons/cncf/SOURCE.md) |
-| GCP | Redistribution not yet cleared — intake gated |
+| **Do not rename persisted storage keys** without a migration path | Renaming silently erases existing user browser data |
+| **Gate new features** behind a rollout flag in `src/config/rolloutFlags.ts` | Allows safe promotion and easy rollback |
+| **Keep lint, test, and build green** | CI is a strict gate — zero ESLint warnings |
+| **Prefer small, reversible change-sets** | Easier to review, safer to merge |
+| **No new runtime dependencies** without opening an issue first | Keeps the bundle lean and deliberate |
+| **Component size ≤ 250 lines** | Maintains readability and testability |
+
+### Quick contributor setup
+
+```bash
+# Fork + clone, then:
+npm install          # installs deps + activates Husky pre-commit hooks
+npm run dev          # start dev server
+npm test             # run tests in watch mode
+npm run lint         # check for lint issues
+```
 
-OpenFlowKit's own source code is **MIT licensed**.
+Pre-commit hooks run `lint-staged` → ESLint on all changed `.ts`/`.tsx` files. Fix all errors before pushing.
+
+---
+
+## License
+
+[MIT](LICENSE) — free to use, modify, and redistribute. No strings attached.
 
 ---
 
 <div align="center">
 
-**[openflowkit.com](https://openflowkit.com) · [app.openflowkit.com](https://app.openflowkit.com) · [docs.openflowkit.com](https://docs.openflowkit.com)**
+### Built something with OpenFlowKit? A ⭐ on GitHub helps more developers find it.
+
+[![Star on GitHub](https://img.shields.io/github/stars/Vrun-design/openflowkit?style=social)](https://github.com/Vrun-design/openflowkit/stargazers)
+
+**[→ Launch the App](https://app.openflowkit.com)** &nbsp;·&nbsp; **[Read the Docs](https://docs.openflowkit.com)** &nbsp;·&nbsp; **[Contribute](CONTRIBUTING.md)** &nbsp;·&nbsp; **[Report a Bug](https://github.com/Vrun-design/openflowkit/issues)**
 
-Made with ☕ · MIT License
+<sub>React 19 · TypeScript 5 · Vite 6 · ELK.js · Yjs · Cloudflare Pages</sub>
 
-If OpenFlowKit is useful to you, a ⭐ on GitHub goes a long way.
+<sub>MIT Licensed · Local-first · No telemetry · No account required · No lock-in</sub>
 
 </div>
diff --git a/SECURITY.md b/SECURITY.md
index 117e75e..58dd837 100644
--- a/SECURITY.md
+++ b/SECURITY.md
@@ -2,17 +2,78 @@
 
 ## Supported Versions
 
-Use this section to tell people about which versions of your project are currently being supported with security updates.
+OpenFlowKit is currently a pre-1.0 project. Security fixes are applied on a best-effort basis to the latest active code line only.
 
-| Version | Supported          |
-| ------- | ------------------ |
-| 2.x     | :white_check_mark: |
-| 1.x     | :x:                |
+Current support policy:
+
+| Version / Branch | Supported |
+|---|---|
+| Latest `main` / `master` branch state | Yes |
+| Latest deployed app/docs surfaces | Best effort |
+| Older commits, forks, and historical pre-1.0 snapshots | No |
+
+If the project starts publishing stable release lines, this policy should be updated to list supported versions explicitly.
 
 ## Reporting a Vulnerability
 
-We take security seriously. If you discover a security vulnerability within OpenFlowKit, please do NOT create a public GitHub issue.
+Please do **not** open a public GitHub issue for a security vulnerability.
+
+Instead, report it here:
+
+- https://docs.google.com/forms/d/e/1FAIpQLSd0hE_WTHEM8frJyZ_WlDQI8jrkGNpFu3RGCiJCmC-xp-Wm6g/viewform
+
+When possible, include:
+
+- a short description of the issue
+- impact and affected surface
+- reproduction steps
+- browser/environment details
+- proof-of-concept material if safe to share
+
+## Scope Notes
+
+OpenFlowKit is a browser-first, local-first application. Relevant security areas include:
+
+- persisted local application data
+- imported/exported files
+- AI provider API key handling
+- collaboration transport behavior
+- third-party asset ingestion and rendering
+
+## Data Storage Model
+
+OpenFlowKit is **fully local-first**. No diagram data, API keys, or user content is sent to OpenFlowKit servers. There are no OpenFlowKit servers.
+
+### Diagram data
+
+Diagram state is persisted in **IndexedDB** (with localStorage as a fallback). It never leaves the browser unless you explicitly export or share it.
+
+### AI provider API keys (BYOK)
+
+OpenFlowKit uses a Bring-Your-Own-Key (BYOK) model:
+
+- API keys are entered in **Settings → AI** and stored in **localStorage** under a dedicated namespace.
+- Keys are sent **directly from your browser to the AI provider** (OpenAI, Anthropic, Google, etc.) — not proxied through any OpenFlowKit service.
+- Keys are never logged, never included in exports, and never transmitted to anyone other than the provider you configured.
+
+**Important:** Do not put API keys in `.env` or `.env.local` files. The settings modal is the only supported key entry point. Keys set via environment variables are a development-only convenience and should not be used in shared or deployed environments.
+
+### Collaboration
+
+Real-time collaboration uses **WebRTC peer-to-peer transport** (via a public signalling server for initial handshake). Once connected, diagram data flows directly between peers — it is not stored on or readable by the signalling server. Room links contain the room ID; anyone with the link can join the session.
+
+### Third-party assets
+
+Cloud provider icon packs (AWS, Azure, GCP, CNCF) are fetched from a CDN at runtime. No user data is sent in those requests — they are plain asset fetches.
+
+## Response Policy
+
+The maintainers will review reports and aim to:
+
+1. confirm the issue
+2. assess severity and impacted surfaces
+3. prepare a fix or mitigation
+4. ship the patch on the latest supported code line
 
- Instead, please report it [here](https://docs.google.com/forms/d/e/1FAIpQLSd0hE_WTHEM8frJyZ_WlDQI8jrkGNpFu3RGCiJCmC-xp-Wm6g/viewform).
+Response and remediation timing is best effort and depends on issue severity and maintainer availability.
 
-We will create a fix and release a patch as soon as possible.
diff --git a/_headers b/_headers
index 626afc8..6ff6209 100644
--- a/_headers
+++ b/_headers
@@ -3,6 +3,7 @@
   X-Content-Type-Options: nosniff
   Referrer-Policy: strict-origin-when-cross-origin
   Permissions-Policy: camera=(), microphone=(), geolocation=()
+  Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; connect-src 'self' https: wss:; img-src 'self' data: blob: https:; font-src 'self' data:; worker-src 'self' blob:; frame-ancestors 'none';
 
 /assets/*
   Cache-Control: public, max-age=31536000, immutable
diff --git a/docs-site/.astro/data-store.json b/docs-site/.astro/data-store.json
index 69d7c44..9d423fe 100644
--- a/docs-site/.astro/data-store.json
+++ b/docs-site/.astro/data-store.json
@@ -1 +1 @@
-[["Map",1,2,9,10],"meta::meta",["Map",3,4,5,6,7,8],"astro-version","5.18.1","content-config-digest","28e7bc87492477d9","astro-config-digest","{\"root\":{},\"srcDir\":{},\"publicDir\":{},\"outDir\":{},\"cacheDir\":{},\"site\":\"https://docs.openflowkit.com\",\"compressHTML\":true,\"base\":\"/\",\"trailingSlash\":\"ignore\",\"output\":\"static\",\"scopedStyleStrategy\":\"where\",\"build\":{\"format\":\"directory\",\"client\":{},\"server\":{},\"assets\":\"_astro\",\"serverEntry\":\"entry.mjs\",\"redirects\":true,\"inlineStylesheets\":\"auto\",\"concurrency\":1},\"server\":{\"open\":false,\"host\":false,\"port\":4399,\"streaming\":true,\"allowedHosts\":[]},\"redirects\":{},\"image\":{\"endpoint\":{\"route\":\"/_image\"},\"service\":{\"entrypoint\":\"astro/assets/services/sharp\",\"config\":{}},\"domains\":[],\"remotePatterns\":[],\"responsiveStyles\":false},\"devToolbar\":{\"enabled\":true},\"markdown\":{\"syntaxHighlight\":false,\"shikiConfig\":{\"langs\":[],\"langAlias\":{},\"theme\":\"github-dark\",\"themes\":{},\"wrap\":false,\"transformers\":[]},\"remarkPlugins\":[null,null,null],\"rehypePlugins\":[null,[null,{\"experimentalHeadingIdCompat\":false}],null,[null,{\"themes\":[{\"name\":\"Night Owl No Italics\",\"type\":\"dark\",\"colors\":{\"focusBorder\":\"#122d42\",\"foreground\":\"#d6deeb\",\"disabledForeground\":\"#cccccc80\",\"descriptionForeground\":\"#d6deebb3\",\"errorForeground\":\"#ef5350\",\"icon.foreground\":\"#c5c5c5\",\"contrastActiveBorder\":null,\"contrastBorder\":\"#122d42\",\"textBlockQuote.background\":\"#7f7f7f1a\",\"textBlockQuote.border\":\"#007acc80\",\"textCodeBlock.background\":\"#4f4f4f\",\"textLink.activeForeground\":\"#3794ff\",\"textLink.foreground\":\"#3794ff\",\"textPreformat.foreground\":\"#d7ba7d\",\"textSeparator.foreground\":\"#ffffff2e\",\"editor.background\":\"#23262f\",\"editor.foreground\":\"#d6deeb\",\"editorLineNumber.foreground\":\"#4b6479\",\"editorLineNumber.activeForeground\":\"#c5e4fd\",\"editorActiveLineNumber.foreground\":\"#c6c6c6\",\"editor.selectionBackground\":\"#1d3b53\",\"editor.inactiveSelectionBackground\":\"#7e57c25a\",\"editor.selectionHighlightBackground\":\"#5f7e9779\",\"editorError.foreground\":\"#ef5350\",\"editorWarning.foreground\":\"#b39554\",\"editorInfo.foreground\":\"#3794ff\",\"editorHint.foreground\":\"#eeeeeeb2\",\"problemsErrorIcon.foreground\":\"#ef5350\",\"problemsWarningIcon.foreground\":\"#b39554\",\"problemsInfoIcon.foreground\":\"#3794ff\",\"editor.findMatchBackground\":\"#5f7e9779\",\"editor.findMatchHighlightBackground\":\"#1085bb5d\",\"editor.findRangeHighlightBackground\":\"#3a3d4166\",\"editorLink.activeForeground\":\"#4e94ce\",\"editorLightBulb.foreground\":\"#ffcc00\",\"editorLightBulbAutoFix.foreground\":\"#75beff\",\"diffEditor.insertedTextBackground\":\"#99b76d23\",\"diffEditor.insertedTextBorder\":\"#c5e47833\",\"diffEditor.removedTextBackground\":\"#ef535033\",\"diffEditor.removedTextBorder\":\"#ef53504d\",\"diffEditor.insertedLineBackground\":\"#9bb95533\",\"diffEditor.removedLineBackground\":\"#ff000033\",\"editorStickyScroll.background\":\"#011627\",\"editorStickyScrollHover.background\":\"#2a2d2e\",\"editorInlayHint.background\":\"#5f7e97cc\",\"editorInlayHint.foreground\":\"#ffffff\",\"editorInlayHint.typeBackground\":\"#5f7e97cc\",\"editorInlayHint.typeForeground\":\"#ffffff\",\"editorInlayHint.parameterBackground\":\"#5f7e97cc\",\"editorInlayHint.parameterForeground\":\"#ffffff\",\"editorPane.background\":\"#011627\",\"editorGroup.emptyBackground\":\"#011627\",\"editorGroup.focusedEmptyBorder\":null,\"editorGroupHeader.tabsBackground\":\"var(--sl-color-black)\",\"editorGroupHeader.tabsBorder\":\"color-mix(in srgb, var(--sl-color-gray-5), transparent 25%)\",\"editorGroupHeader.noTabsBackground\":\"#011627\",\"editorGroupHeader.border\":null,\"editorGroup.border\":\"#011627\",\"editorGroup.dropBackground\":\"#7e57c273\",\"editorGroup.dropIntoPromptForeground\":\"#d6deeb\",\"editorGroup.dropIntoPromptBackground\":\"#021320\",\"editorGroup.dropIntoPromptBorder\":null,\"sideBySideEditor.horizontalBorder\":\"#011627\",\"sideBySideEditor.verticalBorder\":\"#011627\",\"scrollbar.shadow\":\"#010b14\",\"scrollbarSlider.background\":\"#ffffff17\",\"scrollbarSlider.hoverBackground\":\"#ffffff40\",\"scrollbarSlider.activeBackground\":\"#084d8180\",\"panel.background\":\"#011627\",\"panel.border\":\"#5f7e97\",\"panelTitle.activeBorder\":\"#5f7e97\",\"panelTitle.activeForeground\":\"#ffffffcc\",\"panelTitle.inactiveForeground\":\"#d6deeb80\",\"panelSectionHeader.background\":\"#80808051\",\"terminal.background\":\"#011627\",\"widget.shadow\":\"#011627\",\"editorWidget.background\":\"#021320\",\"editorWidget.foreground\":\"#d6deeb\",\"editorWidget.border\":\"#5f7e97\",\"quickInput.background\":\"#021320\",\"quickInput.foreground\":\"#d6deeb\",\"quickInputTitle.background\":\"#ffffff1a\",\"pickerGroup.foreground\":\"#d1aaff\",\"pickerGroup.border\":\"#011627\",\"editor.hoverHighlightBackground\":\"#7e57c25a\",\"editorHoverWidget.background\":\"#011627\",\"editorHoverWidget.foreground\":\"#d6deeb\",\"editorHoverWidget.border\":\"#5f7e97\",\"editorHoverWidget.statusBarBackground\":\"#011a2f\",\"titleBar.activeBackground\":\"var(--sl-color-black)\",\"titleBar.activeForeground\":\"var(--sl-color-text)\",\"titleBar.inactiveBackground\":\"#010e1a\",\"titleBar.inactiveForeground\":\"#eeefff99\",\"titleBar.border\":\"color-mix(in srgb, var(--sl-color-gray-5), transparent 25%)\",\"toolbar.hoverBackground\":\"#5a5d5e50\",\"toolbar.activeBackground\":\"#63666750\",\"tab.activeBackground\":\"#0b2942\",\"tab.unfocusedActiveBackground\":\"#0b2942\",\"tab.inactiveBackground\":\"#01111d\",\"tab.unfocusedInactiveBackground\":\"#01111d\",\"tab.activeForeground\":\"var(--sl-color-text)\",\"tab.inactiveForeground\":\"#5f7e97\",\"tab.unfocusedActiveForeground\":\"#5f7e97\",\"tab.unfocusedInactiveForeground\":\"#5f7e97\",\"tab.hoverBackground\":null,\"tab.unfocusedHoverBackground\":null,\"tab.hoverForeground\":null,\"tab.unfocusedHoverForeground\":null,\"tab.border\":\"#272b3b\",\"tab.lastPinnedBorder\":\"#585858\",\"tab.activeBorder\":\"transparent\",\"tab.unfocusedActiveBorder\":\"#262a39\",\"tab.activeBorderTop\":\"var(--sl-color-accent-high)\",\"tab.unfocusedActiveBorderTop\":null,\"tab.hoverBorder\":null,\"tab.unfocusedHoverBorder\":null,\"tab.activeModifiedBorder\":\"#3399cc\",\"tab.inactiveModifiedBorder\":\"#3399cc80\",\"tab.unfocusedActiveModifiedBorder\":\"#3399cc80\",\"tab.unfocusedInactiveModifiedBorder\":\"#3399cc40\",\"badge.background\":\"#5f7e97\",\"badge.foreground\":\"#ffffff\",\"button.background\":\"#7e57c2cc\",\"button.foreground\":\"#ffffffcc\",\"button.border\":\"#122d42\",\"button.separator\":\"#ffffff52\",\"button.hoverBackground\":\"#7e57c2\",\"button.secondaryBackground\":\"#3a3d41\",\"button.secondaryForeground\":\"#ffffff\",\"button.secondaryHoverBackground\":\"#46494e\",\"dropdown.background\":\"#011627\",\"dropdown.foreground\":\"#ffffffcc\",\"dropdown.border\":\"#5f7e97\",\"list.activeSelectionBackground\":\"#234d708c\",\"list.activeSelectionForeground\":\"#ffffff\",\"tree.indentGuidesStroke\":\"#585858\",\"input.background\":\"#0b253a\",\"input.foreground\":\"#ffffffcc\",\"input.placeholderForeground\":\"#5f7e97\",\"inputOption.activeBorder\":\"#ffffffcc\",\"inputOption.hoverBackground\":\"#5a5d5e80\",\"inputOption.activeBackground\":\"#122d4266\",\"inputOption.activeForeground\":\"#ffffff\",\"inputValidation.infoBackground\":\"#00589ef2\",\"inputValidation.infoBorder\":\"#64b5f6\",\"inputValidation.warningBackground\":\"#675700f2\",\"inputValidation.warningBorder\":\"#ffca28\",\"inputValidation.errorBackground\":\"#ab0300f2\",\"inputValidation.errorBorder\":\"#ef5350\",\"keybindingLabel.background\":\"#8080802b\",\"keybindingLabel.foreground\":\"#cccccc\",\"keybindingLabel.border\":\"#33333399\",\"keybindingLabel.bottomBorder\":\"#44444499\",\"menu.foreground\":\"#ffffffcc\",\"menu.background\":\"#011627\",\"menu.selectionForeground\":\"#ffffff\",\"menu.selectionBackground\":\"#234d708c\",\"menu.separatorBackground\":\"#606060\",\"editor.snippetTabstopHighlightBackground\":\"#7c7c74c\",\"editor.snippetFinalTabstopHighlightBorder\":\"#525252\",\"terminal.ansiBlack\":\"#011627\",\"terminal.ansiRed\":\"#ef5350\",\"terminal.ansiGreen\":\"#22da6e\",\"terminal.ansiYellow\":\"#c5e478\",\"terminal.ansiBlue\":\"#82aaff\",\"terminal.ansiMagenta\":\"#c792ea\",\"terminal.ansiCyan\":\"#21c7a8\",\"terminal.ansiWhite\":\"#ffffff\",\"terminal.ansiBrightBlack\":\"#575656\",\"terminal.ansiBrightRed\":\"#ef5350\",\"terminal.ansiBrightGreen\":\"#22da6e\",\"terminal.ansiBrightYellow\":\"#ffeb95\",\"terminal.ansiBrightBlue\":\"#82aaff\",\"terminal.ansiBrightMagenta\":\"#c792ea\",\"terminal.ansiBrightCyan\":\"#7fdbca\",\"terminal.ansiBrightWhite\":\"#ffffff\",\"selection.background\":\"#4373c2\",\"input.border\":\"#5f7e97\",\"punctuation.definition.generic.begin.html\":\"#ef5350f2\",\"progress.background\":\"#7e57c2\",\"breadcrumb.foreground\":\"#a599e9\",\"breadcrumb.focusForeground\":\"#ffffff\",\"breadcrumb.activeSelectionForeground\":\"#ffffff\",\"breadcrumbPicker.background\":\"#001122\",\"list.invalidItemForeground\":\"#975f94\",\"list.dropBackground\":\"#011627\",\"list.focusBackground\":\"#010d18\",\"list.focusForeground\":\"#ffffff\",\"list.highlightForeground\":\"#ffffff\",\"list.hoverBackground\":\"#011627\",\"list.hoverForeground\":\"#ffffff\",\"list.inactiveSelectionBackground\":\"#0e293f\",\"list.inactiveSelectionForeground\":\"#5f7e97\",\"activityBar.background\":\"#011627\",\"activityBar.dropBackground\":\"#5f7e97\",\"activityBar.foreground\":\"#5f7e97\",\"activityBar.border\":\"#011627\",\"activityBarBadge.background\":\"#44596b\",\"activityBarBadge.foreground\":\"#ffffff\",\"sideBar.background\":\"#011627\",\"sideBar.foreground\":\"#89a4bb\",\"sideBar.border\":\"#011627\",\"sideBarTitle.foreground\":\"#5f7e97\",\"sideBarSectionHeader.background\":\"#011627\",\"sideBarSectionHeader.foreground\":\"#5f7e97\",\"editorCursor.foreground\":\"#80a4c2\",\"editor.wordHighlightBackground\":\"#f6bbe533\",\"editor.wordHighlightStrongBackground\":\"#e2a2f433\",\"editor.lineHighlightBackground\":\"#0003\",\"editor.rangeHighlightBackground\":\"#7e57c25a\",\"editorIndentGuide.background\":\"#5e81ce52\",\"editorIndentGuide.activeBackground\":\"#7e97ac\",\"editorRuler.foreground\":\"#5e81ce52\",\"editorCodeLens.foreground\":\"#5e82ceb4\",\"editorBracketMatch.background\":\"#5f7e974d\",\"editorOverviewRuler.currentContentForeground\":\"#7e57c2\",\"editorOverviewRuler.incomingContentForeground\":\"#7e57c2\",\"editorOverviewRuler.commonContentForeground\":\"#7e57c2\",\"editorGutter.background\":\"#011627\",\"editorGutter.modifiedBackground\":\"#e2b93d\",\"editorGutter.addedBackground\":\"#9ccc65\",\"editorGutter.deletedBackground\":\"#ef5350\",\"editorSuggestWidget.background\":\"#2c3043\",\"editorSuggestWidget.border\":\"#2b2f40\",\"editorSuggestWidget.foreground\":\"#d6deeb\",\"editorSuggestWidget.highlightForeground\":\"#ffffff\",\"editorSuggestWidget.selectedBackground\":\"#5f7e97\",\"debugExceptionWidget.background\":\"#011627\",\"debugExceptionWidget.border\":\"#5f7e97\",\"editorMarkerNavigation.background\":\"#0b2942\",\"editorMarkerNavigationError.background\":\"#ef5350\",\"editorMarkerNavigationWarning.background\":\"#ffca28\",\"peekView.border\":\"#5f7e97\",\"peekViewEditor.background\":\"#011627\",\"peekViewEditor.matchHighlightBackground\":\"#7e57c25a\",\"peekViewResult.background\":\"#011627\",\"peekViewResult.fileForeground\":\"#5f7e97\",\"peekViewResult.lineForeground\":\"#5f7e97\",\"peekViewResult.matchHighlightBackground\":\"#ffffffcc\",\"peekViewResult.selectionBackground\":\"#2e3250\",\"peekViewResult.selectionForeground\":\"#5f7e97\",\"peekViewTitle.background\":\"#011627\",\"peekViewTitleDescription.foreground\":\"#697098\",\"peekViewTitleLabel.foreground\":\"#5f7e97\",\"merge.currentHeaderBackground\":\"#5f7e97\",\"merge.incomingHeaderBackground\":\"#7e57c25a\",\"statusBar.background\":\"#011627\",\"statusBar.foreground\":\"#5f7e97\",\"statusBar.border\":\"#262a39\",\"statusBar.debuggingBackground\":\"#202431\",\"statusBar.debuggingBorder\":\"#1f2330\",\"statusBar.noFolderBackground\":\"#011627\",\"statusBar.noFolderBorder\":\"#25293a\",\"statusBarItem.activeBackground\":\"#202431\",\"statusBarItem.hoverBackground\":\"#202431\",\"statusBarItem.prominentBackground\":\"#202431\",\"statusBarItem.prominentHoverBackground\":\"#202431\",\"notifications.background\":\"#01111d\",\"notifications.border\":\"#262a39\",\"notificationCenter.border\":\"#262a39\",\"notificationToast.border\":\"#262a39\",\"notifications.foreground\":\"#ffffffcc\",\"notificationLink.foreground\":\"#80cbc4\",\"extensionButton.prominentForeground\":\"#ffffffcc\",\"extensionButton.prominentBackground\":\"#7e57c2cc\",\"extensionButton.prominentHoverBackground\":\"#7e57c2\",\"terminal.selectionBackground\":\"#1b90dd4d\",\"terminalCursor.background\":\"#234d70\",\"debugToolBar.background\":\"#011627\",\"welcomePage.buttonBackground\":\"#011627\",\"welcomePage.buttonHoverBackground\":\"#011627\",\"walkThrough.embeddedEditorBackground\":\"#011627\",\"gitDecoration.modifiedResourceForeground\":\"#a2bffc\",\"gitDecoration.deletedResourceForeground\":\"#ef535090\",\"gitDecoration.untrackedResourceForeground\":\"#c5e478ff\",\"gitDecoration.ignoredResourceForeground\":\"#395a75\",\"gitDecoration.conflictingResourceForeground\":\"#ffeb95cc\",\"source.elm\":\"#5f7e97\",\"string.quoted.single.js\":\"#ffffff\",\"meta.objectliteral.js\":\"#82aaff\"},\"fg\":\"#d6deeb\",\"bg\":\"#23262f\",\"semanticHighlighting\":false,\"settings\":[{\"name\":\"Changed\",\"scope\":[\"markup.changed\",\"meta.diff.header.git\",\"meta.diff.header.from-file\",\"meta.diff.header.to-file\"],\"settings\":{\"foreground\":\"#a2bffc\"}},{\"name\":\"Deleted\",\"scope\":[\"markup.deleted.diff\"],\"settings\":{\"foreground\":\"#f27775fe\"}},{\"name\":\"Inserted\",\"scope\":[\"markup.inserted.diff\"],\"settings\":{\"foreground\":\"#c5e478\"}},{\"name\":\"Global settings\",\"settings\":{\"background\":\"#011627\",\"foreground\":\"#d6deeb\"}},{\"name\":\"Comment\",\"scope\":[\"comment\"],\"settings\":{\"foreground\":\"#919f9f\",\"fontStyle\":\"\"}},{\"name\":\"String\",\"scope\":[\"string\"],\"settings\":{\"foreground\":\"#ecc48d\"}},{\"name\":\"String Quoted\",\"scope\":[\"string.quoted\",\"variable.other.readwrite.js\"],\"settings\":{\"foreground\":\"#ecc48d\"}},{\"name\":\"Support Constant Math\",\"scope\":[\"support.constant.math\"],\"settings\":{\"foreground\":\"#c5e478\"}},{\"name\":\"Number\",\"scope\":[\"constant.numeric\",\"constant.character.numeric\"],\"settings\":{\"foreground\":\"#f78c6c\",\"fontStyle\":\"\"}},{\"name\":\"Built-in constant\",\"scope\":[\"constant.language\",\"punctuation.definition.constant\",\"variable.other.constant\"],\"settings\":{\"foreground\":\"#82aaff\"}},{\"name\":\"User-defined constant\",\"scope\":[\"constant.character\",\"constant.other\"],\"settings\":{\"foreground\":\"#82aaff\"}},{\"name\":\"Constant Character Escape\",\"scope\":[\"constant.character.escape\"],\"settings\":{\"foreground\":\"#f78c6c\"}},{\"name\":\"RegExp String\",\"scope\":[\"string.regexp\",\"string.regexp keyword.other\"],\"settings\":{\"foreground\":\"#5ca7e4\"}},{\"name\":\"Comma in functions\",\"scope\":[\"meta.function punctuation.separator.comma\"],\"settings\":{\"foreground\":\"#889fb2\"}},{\"name\":\"Variable\",\"scope\":[\"variable\"],\"settings\":{\"foreground\":\"#c5e478\"}},{\"name\":\"Keyword\",\"scope\":[\"punctuation.accessor\",\"keyword\"],\"settings\":{\"foreground\":\"#c792ea\",\"fontStyle\":\"\"}},{\"name\":\"Storage\",\"scope\":[\"storage\",\"meta.var.expr\",\"meta.class meta.method.declaration meta.var.expr storage.type.js\",\"storage.type.property.js\",\"storage.type.property.ts\",\"storage.type.property.tsx\"],\"settings\":{\"foreground\":\"#c792ea\",\"fontStyle\":\"\"}},{\"name\":\"Storage type\",\"scope\":[\"storage.type\"],\"settings\":{\"foreground\":\"#c792ea\"}},{\"name\":\"Storage type\",\"scope\":[\"storage.type.function.arrow.js\"],\"settings\":{\"fontStyle\":\"\"}},{\"name\":\"Class name\",\"scope\":[\"entity.name.class\",\"meta.class entity.name.type.class\"],\"settings\":{\"foreground\":\"#ffcb8b\"}},{\"name\":\"Inherited class\",\"scope\":[\"entity.other.inherited-class\"],\"settings\":{\"foreground\":\"#c5e478\"}},{\"name\":\"Function name\",\"scope\":[\"entity.name.function\"],\"settings\":{\"foreground\":\"#c792ea\",\"fontStyle\":\"\"}},{\"name\":\"Meta Tag\",\"scope\":[\"punctuation.definition.tag\",\"meta.tag\"],\"settings\":{\"foreground\":\"#7fdbca\"}},{\"name\":\"HTML Tag names\",\"scope\":[\"entity.name.tag\",\"meta.tag.other.html\",\"meta.tag.other.js\",\"meta.tag.other.tsx\",\"entity.name.tag.tsx\",\"entity.name.tag.js\",\"entity.name.tag\",\"meta.tag.js\",\"meta.tag.tsx\",\"meta.tag.html\"],\"settings\":{\"foreground\":\"#caece6\",\"fontStyle\":\"\"}},{\"name\":\"Tag attribute\",\"scope\":[\"entity.other.attribute-name\"],\"settings\":{\"fontStyle\":\"\",\"foreground\":\"#c5e478\"}},{\"name\":\"Entity Name Tag Custom\",\"scope\":[\"entity.name.tag.custom\"],\"settings\":{\"foreground\":\"#c5e478\"}},{\"name\":\"Library (function & constant)\",\"scope\":[\"support.function\",\"support.constant\"],\"settings\":{\"foreground\":\"#82aaff\"}},{\"name\":\"Support Constant Property Value meta\",\"scope\":[\"support.constant.meta.property-value\"],\"settings\":{\"foreground\":\"#7fdbca\"}},{\"name\":\"Library class/type\",\"scope\":[\"support.type\",\"support.class\"],\"settings\":{\"foreground\":\"#c5e478\"}},{\"name\":\"Support Variable DOM\",\"scope\":[\"support.variable.dom\"],\"settings\":{\"foreground\":\"#c5e478\"}},{\"name\":\"Invalid\",\"scope\":[\"invalid\"],\"settings\":{\"background\":\"#ff2c83\",\"foreground\":\"#ffffff\"}},{\"name\":\"Invalid deprecated\",\"scope\":[\"invalid.deprecated\"],\"settings\":{\"foreground\":\"#ffffff\",\"background\":\"#d3423e\"}},{\"name\":\"Keyword Operator\",\"scope\":[\"keyword.operator\"],\"settings\":{\"foreground\":\"#7fdbca\",\"fontStyle\":\"\"}},{\"name\":\"Keyword Operator Relational\",\"scope\":[\"keyword.operator.relational\"],\"settings\":{\"foreground\":\"#c792ea\",\"fontStyle\":\"\"}},{\"name\":\"Keyword Operator Assignment\",\"scope\":[\"keyword.operator.assignment\"],\"settings\":{\"foreground\":\"#c792ea\"}},{\"name\":\"Keyword Operator Arithmetic\",\"scope\":[\"keyword.operator.arithmetic\"],\"settings\":{\"foreground\":\"#c792ea\"}},{\"name\":\"Keyword Operator Bitwise\",\"scope\":[\"keyword.operator.bitwise\"],\"settings\":{\"foreground\":\"#c792ea\"}},{\"name\":\"Keyword Operator Increment\",\"scope\":[\"keyword.operator.increment\"],\"settings\":{\"foreground\":\"#c792ea\"}},{\"name\":\"Keyword Operator Ternary\",\"scope\":[\"keyword.operator.ternary\"],\"settings\":{\"foreground\":\"#c792ea\"}},{\"name\":\"Double-Slashed Comment\",\"scope\":[\"comment.line.double-slash\"],\"settings\":{\"foreground\":\"#919f9f\"}},{\"name\":\"Object\",\"scope\":[\"object\"],\"settings\":{\"foreground\":\"#cdebf7\"}},{\"name\":\"Null\",\"scope\":[\"constant.language.null\"],\"settings\":{\"foreground\":\"#ff6a83\"}},{\"name\":\"Meta Brace\",\"scope\":[\"meta.brace\"],\"settings\":{\"foreground\":\"#d6deeb\"}},{\"name\":\"Meta Delimiter Period\",\"scope\":[\"meta.delimiter.period\"],\"settings\":{\"foreground\":\"#c792ea\",\"fontStyle\":\"\"}},{\"name\":\"Punctuation Definition String\",\"scope\":[\"punctuation.definition.string\"],\"settings\":{\"foreground\":\"#d9f5dd\"}},{\"name\":\"Punctuation Definition String Markdown\",\"scope\":[\"punctuation.definition.string.begin.markdown\"],\"settings\":{\"foreground\":\"#ff6a83\"}},{\"name\":\"Boolean\",\"scope\":[\"constant.language.boolean\"],\"settings\":{\"foreground\":\"#ff6a83\"}},{\"name\":\"Object Comma\",\"scope\":[\"object.comma\"],\"settings\":{\"foreground\":\"#ffffff\"}},{\"name\":\"Variable Parameter Function\",\"scope\":[\"variable.parameter.function\"],\"settings\":{\"foreground\":\"#7fdbca\",\"fontStyle\":\"\"}},{\"name\":\"Support Type Property Name & entity name tags\",\"scope\":[\"support.type.vendor.property-name\",\"support.constant.vendor.property-value\",\"support.type.property-name\",\"meta.property-list entity.name.tag\"],\"settings\":{\"foreground\":\"#80cbc4\",\"fontStyle\":\"\"}},{\"name\":\"Entity Name tag reference in stylesheets\",\"scope\":[\"meta.property-list entity.name.tag.reference\"],\"settings\":{\"foreground\":\"#57eaf1\"}},{\"name\":\"Constant Other Color RGB Value Punctuation Definition Constant\",\"scope\":[\"constant.other.color.rgb-value punctuation.definition.constant\"],\"settings\":{\"foreground\":\"#f78c6c\"}},{\"name\":\"Constant Other Color\",\"scope\":[\"constant.other.color\"],\"settings\":{\"foreground\":\"#ffeb95\"}},{\"name\":\"Keyword Other Unit\",\"scope\":[\"keyword.other.unit\"],\"settings\":{\"foreground\":\"#ffeb95\"}},{\"name\":\"Meta Selector\",\"scope\":[\"meta.selector\"],\"settings\":{\"foreground\":\"#c792ea\",\"fontStyle\":\"\"}},{\"name\":\"Entity Other Attribute Name Id\",\"scope\":[\"entity.other.attribute-name.id\"],\"settings\":{\"foreground\":\"#fad430\"}},{\"name\":\"Meta Property Name\",\"scope\":[\"meta.property-name\"],\"settings\":{\"foreground\":\"#80cbc4\"}},{\"name\":\"Doctypes\",\"scope\":[\"entity.name.tag.doctype\",\"meta.tag.sgml.doctype\"],\"settings\":{\"foreground\":\"#c792ea\",\"fontStyle\":\"\"}},{\"name\":\"Punctuation Definition Parameters\",\"scope\":[\"punctuation.definition.parameters\"],\"settings\":{\"foreground\":\"#d9f5dd\"}},{\"name\":\"Keyword Control Operator\",\"scope\":[\"keyword.control.operator\"],\"settings\":{\"foreground\":\"#7fdbca\"}},{\"name\":\"Keyword Operator Logical\",\"scope\":[\"keyword.operator.logical\"],\"settings\":{\"foreground\":\"#c792ea\",\"fontStyle\":\"\"}},{\"name\":\"Variable Instances\",\"scope\":[\"variable.instance\",\"variable.other.instance\",\"variable.readwrite.instance\",\"variable.other.readwrite.instance\",\"variable.other.property\"],\"settings\":{\"foreground\":\"#7fdbca\"}},{\"name\":\"Variable Property Other object property\",\"scope\":[\"variable.other.object.property\"],\"settings\":{\"foreground\":\"#faf39f\",\"fontStyle\":\"\"}},{\"name\":\"Variable Property Other object\",\"scope\":[\"variable.other.object.js\"],\"settings\":{\"fontStyle\":\"\"}},{\"name\":\"Entity Name Function\",\"scope\":[\"entity.name.function\"],\"settings\":{\"foreground\":\"#82aaff\",\"fontStyle\":\"\"}},{\"name\":\"Keyword Operator Comparison, returns, imports, and Keyword Operator Ruby\",\"scope\":[\"keyword.control.conditional.js\",\"keyword.operator.comparison\",\"keyword.control.flow.js\",\"keyword.control.flow.ts\",\"keyword.control.flow.tsx\",\"keyword.control.ruby\",\"keyword.control.def.ruby\",\"keyword.control.loop.js\",\"keyword.control.loop.ts\",\"keyword.control.import.js\",\"keyword.control.import.ts\",\"keyword.control.import.tsx\",\"keyword.control.from.js\",\"keyword.control.from.ts\",\"keyword.control.from.tsx\",\"keyword.control.conditional.js\",\"keyword.control.conditional.ts\",\"keyword.control.switch.js\",\"keyword.control.switch.ts\",\"keyword.operator.instanceof.js\",\"keyword.operator.expression.instanceof.ts\",\"keyword.operator.expression.instanceof.tsx\"],\"settings\":{\"foreground\":\"#c792ea\",\"fontStyle\":\"\"}},{\"name\":\"Support Constant, `new` keyword, Special Method Keyword, `debugger`, other keywords\",\"scope\":[\"support.constant\",\"keyword.other.special-method\",\"keyword.other.new\",\"keyword.other.debugger\",\"keyword.control\"],\"settings\":{\"foreground\":\"#7fdbca\"}},{\"name\":\"Support Function\",\"scope\":[\"support.function\"],\"settings\":{\"foreground\":\"#c5e478\"}},{\"name\":\"Invalid Broken\",\"scope\":[\"invalid.broken\"],\"settings\":{\"foreground\":\"#989da0\",\"background\":\"#F78C6C\"}},{\"name\":\"Invalid Unimplemented\",\"scope\":[\"invalid.unimplemented\"],\"settings\":{\"background\":\"#8BD649\",\"foreground\":\"#ffffff\"}},{\"name\":\"Invalid Illegal\",\"scope\":[\"invalid.illegal\"],\"settings\":{\"foreground\":\"#ffffff\",\"background\":\"#ec5f67\"}},{\"name\":\"Language Variable\",\"scope\":[\"variable.language\"],\"settings\":{\"foreground\":\"#7fdbca\"}},{\"name\":\"Support Variable Property\",\"scope\":[\"support.variable.property\"],\"settings\":{\"foreground\":\"#7fdbca\"}},{\"name\":\"Variable Function\",\"scope\":[\"variable.function\"],\"settings\":{\"foreground\":\"#82aaff\"}},{\"name\":\"Variable Interpolation\",\"scope\":[\"variable.interpolation\"],\"settings\":{\"foreground\":\"#ef787f\"}},{\"name\":\"Meta Function Call\",\"scope\":[\"meta.function-call\"],\"settings\":{\"foreground\":\"#82aaff\"}},{\"name\":\"Punctuation Section Embedded\",\"scope\":[\"punctuation.section.embedded\"],\"settings\":{\"foreground\":\"#e2817f\"}},{\"name\":\"Punctuation Tweaks\",\"scope\":[\"punctuation.terminator.expression\",\"punctuation.definition.arguments\",\"punctuation.definition.array\",\"punctuation.section.array\",\"meta.array\"],\"settings\":{\"foreground\":\"#d6deeb\"}},{\"name\":\"More Punctuation Tweaks\",\"scope\":[\"punctuation.definition.list.begin\",\"punctuation.definition.list.end\",\"punctuation.separator.arguments\",\"punctuation.definition.list\"],\"settings\":{\"foreground\":\"#d9f5dd\"}},{\"name\":\"Template Strings\",\"scope\":[\"string.template meta.template.expression\"],\"settings\":{\"foreground\":\"#e2817f\"}},{\"name\":\"Backtics(``) in Template Strings\",\"scope\":[\"string.template punctuation.definition.string\"],\"settings\":{\"foreground\":\"#d6deeb\"}},{\"name\":\"Italics\",\"scope\":[\"italic\"],\"settings\":{\"foreground\":\"#c792ea\",\"fontStyle\":\"italic\"}},{\"name\":\"Bold\",\"scope\":[\"bold\"],\"settings\":{\"foreground\":\"#c5e478\",\"fontStyle\":\"bold\"}},{\"name\":\"Quote\",\"scope\":[\"quote\"],\"settings\":{\"foreground\":\"#969bb7\",\"fontStyle\":\"\"}},{\"name\":\"Raw Code\",\"scope\":[\"raw\"],\"settings\":{\"foreground\":\"#80cbc4\"}},{\"name\":\"CoffeScript Variable Assignment\",\"scope\":[\"variable.assignment.coffee\"],\"settings\":{\"foreground\":\"#31e1eb\"}},{\"name\":\"CoffeScript Parameter Function\",\"scope\":[\"variable.parameter.function.coffee\"],\"settings\":{\"foreground\":\"#d6deeb\"}},{\"name\":\"CoffeeScript Assignments\",\"scope\":[\"variable.assignment.coffee\"],\"settings\":{\"foreground\":\"#7fdbca\"}},{\"name\":\"C# Readwrite Variables\",\"scope\":[\"variable.other.readwrite.cs\"],\"settings\":{\"foreground\":\"#d6deeb\"}},{\"name\":\"C# Classes & Storage types\",\"scope\":[\"entity.name.type.class.cs\",\"storage.type.cs\"],\"settings\":{\"foreground\":\"#ffcb8b\"}},{\"name\":\"C# Namespaces\",\"scope\":[\"entity.name.type.namespace.cs\"],\"settings\":{\"foreground\":\"#b2ccd6\"}},{\"name\":\"C# Unquoted String Zone\",\"scope\":[\"string.unquoted.preprocessor.message.cs\"],\"settings\":{\"foreground\":\"#d6deeb\"}},{\"name\":\"C# Region\",\"scope\":[\"punctuation.separator.hash.cs\",\"keyword.preprocessor.region.cs\",\"keyword.preprocessor.endregion.cs\"],\"settings\":{\"foreground\":\"#ffcb8b\",\"fontStyle\":\"bold\"}},{\"name\":\"C# Other Variables\",\"scope\":[\"variable.other.object.cs\"],\"settings\":{\"foreground\":\"#b2ccd6\"}},{\"name\":\"C# Enum\",\"scope\":[\"entity.name.type.enum.cs\"],\"settings\":{\"foreground\":\"#c5e478\"}},{\"name\":\"Dart String\",\"scope\":[\"string.interpolated.single.dart\",\"string.interpolated.double.dart\"],\"settings\":{\"foreground\":\"#ffcb8b\"}},{\"name\":\"Dart Class\",\"scope\":[\"support.class.dart\"],\"settings\":{\"foreground\":\"#ffcb8b\"}},{\"name\":\"Tag names in Stylesheets\",\"scope\":[\"entity.name.tag.css\",\"entity.name.tag.less\",\"entity.name.tag.custom.css\",\"support.constant.property-value.css\"],\"settings\":{\"foreground\":\"#ff6d6d\",\"fontStyle\":\"\"}},{\"name\":\"Wildcard(*) selector in Stylesheets\",\"scope\":[\"entity.name.tag.wildcard.css\",\"entity.name.tag.wildcard.less\",\"entity.name.tag.wildcard.scss\",\"entity.name.tag.wildcard.sass\"],\"settings\":{\"foreground\":\"#7fdbca\"}},{\"name\":\"CSS Keyword Other Unit\",\"scope\":[\"keyword.other.unit.css\"],\"settings\":{\"foreground\":\"#ffeb95\"}},{\"name\":\"Attribute Name for CSS\",\"scope\":[\"meta.attribute-selector.css entity.other.attribute-name.attribute\",\"variable.other.readwrite.js\"],\"settings\":{\"foreground\":\"#f78c6c\"}},{\"name\":\"Elixir Classes\",\"scope\":[\"source.elixir support.type.elixir\",\"source.elixir meta.module.elixir entity.name.class.elixir\"],\"settings\":{\"foreground\":\"#82aaff\"}},{\"name\":\"Elixir Functions\",\"scope\":[\"source.elixir entity.name.function\"],\"settings\":{\"foreground\":\"#c5e478\"}},{\"name\":\"Elixir Constants\",\"scope\":[\"source.elixir constant.other.symbol.elixir\",\"source.elixir constant.other.keywords.elixir\"],\"settings\":{\"foreground\":\"#82aaff\"}},{\"name\":\"Elixir String Punctuations\",\"scope\":[\"source.elixir punctuation.definition.string\"],\"settings\":{\"foreground\":\"#c5e478\"}},{\"name\":\"Elixir\",\"scope\":[\"source.elixir variable.other.readwrite.module.elixir\",\"source.elixir variable.other.readwrite.module.elixir punctuation.definition.variable.elixir\"],\"settings\":{\"foreground\":\"#c5e478\"}},{\"name\":\"Elixir Binary Punctuations\",\"scope\":[\"source.elixir .punctuation.binary.elixir\"],\"settings\":{\"foreground\":\"#c792ea\",\"fontStyle\":\"\"}},{\"name\":\"Closure Constant Keyword\",\"scope\":[\"constant.keyword.clojure\"],\"settings\":{\"foreground\":\"#7fdbca\"}},{\"name\":\"Go Function Calls\",\"scope\":[\"source.go meta.function-call.go\"],\"settings\":{\"foreground\":\"#dddddd\"}},{\"name\":\"Go Keywords\",\"scope\":[\"source.go keyword.package.go\",\"source.go keyword.import.go\",\"source.go keyword.function.go\",\"source.go keyword.type.go\",\"source.go keyword.struct.go\",\"source.go keyword.interface.go\",\"source.go keyword.const.go\",\"source.go keyword.var.go\",\"source.go keyword.map.go\",\"source.go keyword.channel.go\",\"source.go keyword.control.go\"],\"settings\":{\"foreground\":\"#c792ea\"}},{\"name\":\"Go Constants e.g. nil, string format (%s, %d, etc.)\",\"scope\":[\"source.go constant.language.go\",\"source.go constant.other.placeholder.go\"],\"settings\":{\"foreground\":\"#ff6a83\"}},{\"name\":\"C++ Functions\",\"scope\":[\"entity.name.function.preprocessor.cpp\",\"entity.scope.name.cpp\"],\"settings\":{\"foreground\":\"#7fdbca\"}},{\"name\":\"C++ Meta Namespace\",\"scope\":[\"meta.namespace-block.cpp\"],\"settings\":{\"foreground\":\"#e0dec6\"}},{\"name\":\"C++ Language Primitive Storage\",\"scope\":[\"storage.type.language.primitive.cpp\"],\"settings\":{\"foreground\":\"#ff6a83\"}},{\"name\":\"C++ Preprocessor Macro\",\"scope\":[\"meta.preprocessor.macro.cpp\"],\"settings\":{\"foreground\":\"#d6deeb\"}},{\"name\":\"C++ Variable Parameter\",\"scope\":[\"variable.parameter\"],\"settings\":{\"foreground\":\"#ffcb8b\"}},{\"name\":\"Powershell Variables\",\"scope\":[\"variable.other.readwrite.powershell\"],\"settings\":{\"foreground\":\"#82aaff\"}},{\"name\":\"Powershell Function\",\"scope\":[\"support.function.powershell\"],\"settings\":{\"foreground\":\"#7fdbca\"}},{\"name\":\"ID Attribute Name in HTML\",\"scope\":[\"entity.other.attribute-name.id.html\"],\"settings\":{\"foreground\":\"#c5e478\"}},{\"name\":\"HTML Punctuation Definition Tag\",\"scope\":[\"punctuation.definition.tag.html\"],\"settings\":{\"foreground\":\"#6ae9f0\"}},{\"name\":\"HTML Doctype\",\"scope\":[\"meta.tag.sgml.doctype.html\"],\"settings\":{\"foreground\":\"#c792ea\",\"fontStyle\":\"\"}},{\"name\":\"JavaScript Classes\",\"scope\":[\"meta.class entity.name.type.class.js\"],\"settings\":{\"foreground\":\"#ffcb8b\"}},{\"name\":\"JavaScript Method Declaration e.g. `constructor`\",\"scope\":[\"meta.method.declaration storage.type.js\"],\"settings\":{\"foreground\":\"#82aaff\"}},{\"name\":\"JavaScript Terminator\",\"scope\":[\"terminator.js\"],\"settings\":{\"foreground\":\"#d6deeb\"}},{\"name\":\"JavaScript Meta Punctuation Definition\",\"scope\":[\"meta.js punctuation.definition.js\"],\"settings\":{\"foreground\":\"#d6deeb\"}},{\"name\":\"Entity Names in Code Documentations\",\"scope\":[\"entity.name.type.instance.jsdoc\",\"entity.name.type.instance.phpdoc\"],\"settings\":{\"foreground\":\"#889fb2\"}},{\"name\":\"Other Variables in Code Documentations\",\"scope\":[\"variable.other.jsdoc\",\"variable.other.phpdoc\"],\"settings\":{\"foreground\":\"#78ccf0\"}},{\"name\":\"JavaScript module imports and exports\",\"scope\":[\"variable.other.meta.import.js\",\"meta.import.js variable.other\",\"variable.other.meta.export.js\",\"meta.export.js variable.other\"],\"settings\":{\"foreground\":\"#d6deeb\"}},{\"name\":\"JavaScript Variable Parameter Function\",\"scope\":[\"variable.parameter.function.js\"],\"settings\":{\"foreground\":\"#8b96ea\"}},{\"name\":\"JavaScript[React] Variable Other Object\",\"scope\":[\"variable.other.object.js\",\"variable.other.object.jsx\",\"variable.object.property.js\",\"variable.object.property.jsx\"],\"settings\":{\"foreground\":\"#d6deeb\"}},{\"name\":\"JavaScript Variables\",\"scope\":[\"variable.js\",\"variable.other.js\"],\"settings\":{\"foreground\":\"#d6deeb\"}},{\"name\":\"JavaScript Entity Name Type\",\"scope\":[\"entity.name.type.js\",\"entity.name.type.module.js\"],\"settings\":{\"foreground\":\"#ffcb8b\",\"fontStyle\":\"\"}},{\"name\":\"JavaScript Support Classes\",\"scope\":[\"support.class.js\"],\"settings\":{\"foreground\":\"#d6deeb\"}},{\"name\":\"JSON Property Names\",\"scope\":[\"support.type.property-name.json\"],\"settings\":{\"foreground\":\"#7fdbca\"}},{\"name\":\"JSON Support Constants\",\"scope\":[\"support.constant.json\"],\"settings\":{\"foreground\":\"#c5e478\"}},{\"name\":\"JSON Property values (string)\",\"scope\":[\"meta.structure.dictionary.value.json string.quoted.double\"],\"settings\":{\"foreground\":\"#c789d6\"}},{\"name\":\"Strings in JSON values\",\"scope\":[\"string.quoted.double.json punctuation.definition.string.json\"],\"settings\":{\"foreground\":\"#80cbc4\"}},{\"name\":\"Specific JSON Property values like null\",\"scope\":[\"meta.structure.dictionary.json meta.structure.dictionary.value constant.language\"],\"settings\":{\"foreground\":\"#ff6a83\"}},{\"name\":\"JavaScript Other Variable\",\"scope\":[\"variable.other.object.js\"],\"settings\":{\"foreground\":\"#7fdbca\"}},{\"name\":\"Ruby Variables\",\"scope\":[\"variable.other.ruby\"],\"settings\":{\"foreground\":\"#d6deeb\"}},{\"name\":\"Ruby Class\",\"scope\":[\"entity.name.type.class.ruby\"],\"settings\":{\"foreground\":\"#ecc48d\"}},{\"name\":\"Ruby Hashkeys\",\"scope\":[\"constant.language.symbol.hashkey.ruby\"],\"settings\":{\"foreground\":\"#7fdbca\"}},{\"name\":\"LESS Tag names\",\"scope\":[\"entity.name.tag.less\"],\"settings\":{\"foreground\":\"#7fdbca\"}},{\"name\":\"LESS Keyword Other Unit\",\"scope\":[\"keyword.other.unit.css\"],\"settings\":{\"foreground\":\"#ffeb95\"}},{\"name\":\"Attribute Name for LESS\",\"scope\":[\"meta.attribute-selector.less entity.other.attribute-name.attribute\"],\"settings\":{\"foreground\":\"#f78c6c\"}},{\"name\":\"Markdown Headings\",\"scope\":[\"markup.heading.markdown\",\"markup.heading.setext.1.markdown\",\"markup.heading.setext.2.markdown\"],\"settings\":{\"foreground\":\"#82b1ff\"}},{\"name\":\"Markdown Italics\",\"scope\":[\"markup.italic.markdown\"],\"settings\":{\"foreground\":\"#c792ea\",\"fontStyle\":\"italic\"}},{\"name\":\"Markdown Bold\",\"scope\":[\"markup.bold.markdown\"],\"settings\":{\"foreground\":\"#c5e478\",\"fontStyle\":\"bold\"}},{\"name\":\"Markdown Quote + others\",\"scope\":[\"markup.quote.markdown\"],\"settings\":{\"foreground\":\"#969bb7\",\"fontStyle\":\"\"}},{\"name\":\"Markdown Raw Code + others\",\"scope\":[\"markup.inline.raw.markdown\"],\"settings\":{\"foreground\":\"#80cbc4\"}},{\"name\":\"Markdown Links\",\"scope\":[\"markup.underline.link.markdown\",\"markup.underline.link.image.markdown\"],\"settings\":{\"foreground\":\"#ff869a\",\"fontStyle\":\"underline\"}},{\"name\":\"Markdown Link Title and Description\",\"scope\":[\"string.other.link.title.markdown\",\"string.other.link.description.markdown\"],\"settings\":{\"foreground\":\"#d6deeb\",\"fontStyle\":\"underline\"}},{\"name\":\"Markdown Punctuation\",\"scope\":[\"punctuation.definition.string.markdown\",\"punctuation.definition.string.begin.markdown\",\"punctuation.definition.string.end.markdown\",\"meta.link.inline.markdown punctuation.definition.string\"],\"settings\":{\"foreground\":\"#82b1ff\"}},{\"name\":\"Markdown MetaData Punctuation\",\"scope\":[\"punctuation.definition.metadata.markdown\"],\"settings\":{\"foreground\":\"#7fdbca\"}},{\"name\":\"Markdown List Punctuation\",\"scope\":[\"beginning.punctuation.definition.list.markdown\"],\"settings\":{\"foreground\":\"#82b1ff\"}},{\"name\":\"Markdown Inline Raw String\",\"scope\":[\"markup.inline.raw.string.markdown\"],\"settings\":{\"foreground\":\"#c5e478\"}},{\"name\":\"PHP Variables\",\"scope\":[\"variable.other.php\"],\"settings\":{\"foreground\":\"#bec5d4\"}},{\"name\":\"Support Classes in PHP\",\"scope\":[\"support.class.php\"],\"settings\":{\"foreground\":\"#ffcb8b\"}},{\"name\":\"Punctuations in PHP function calls\",\"scope\":[\"meta.function-call.php punctuation\"],\"settings\":{\"foreground\":\"#d6deeb\"}},{\"name\":\"PHP Global Variables\",\"scope\":[\"variable.other.global.php\"],\"settings\":{\"foreground\":\"#c5e478\"}},{\"name\":\"Declaration Punctuation in PHP Global Variables\",\"scope\":[\"variable.other.global.php punctuation.definition.variable\"],\"settings\":{\"foreground\":\"#c5e478\"}},{\"name\":\"Language Constants in Python\",\"scope\":[\"constant.language.python\"],\"settings\":{\"foreground\":\"#ff6a83\"}},{\"name\":\"Python Function Parameter and Arguments\",\"scope\":[\"variable.parameter.function.python\",\"meta.function-call.arguments.python\"],\"settings\":{\"foreground\":\"#82aaff\"}},{\"name\":\"Python Function Call\",\"scope\":[\"meta.function-call.python\",\"meta.function-call.generic.python\"],\"settings\":{\"foreground\":\"#b2ccd6\"}},{\"name\":\"Punctuations in Python\",\"scope\":[\"punctuation.python\"],\"settings\":{\"foreground\":\"#d6deeb\"}},{\"name\":\"Decorator Functions in Python\",\"scope\":[\"entity.name.function.decorator.python\"],\"settings\":{\"foreground\":\"#c5e478\"}},{\"name\":\"Python Language Variable\",\"scope\":[\"source.python variable.language.special\"],\"settings\":{\"foreground\":\"#8eace3\"}},{\"name\":\"Python import control keyword\",\"scope\":[\"keyword.control\"],\"settings\":{\"foreground\":\"#c792ea\"}},{\"name\":\"SCSS Variable\",\"scope\":[\"variable.scss\",\"variable.sass\",\"variable.parameter.url.scss\",\"variable.parameter.url.sass\"],\"settings\":{\"foreground\":\"#c5e478\"}},{\"name\":\"Variables in SASS At-Rules\",\"scope\":[\"source.css.scss meta.at-rule variable\",\"source.css.sass meta.at-rule variable\"],\"settings\":{\"foreground\":\"#82aaff\"}},{\"name\":\"Variables in SASS At-Rules\",\"scope\":[\"source.css.scss meta.at-rule variable\",\"source.css.sass meta.at-rule variable\"],\"settings\":{\"foreground\":\"#bec5d4\"}},{\"name\":\"Attribute Name for SASS\",\"scope\":[\"meta.attribute-selector.scss entity.other.attribute-name.attribute\",\"meta.attribute-selector.sass entity.other.attribute-name.attribute\"],\"settings\":{\"foreground\":\"#f78c6c\"}},{\"name\":\"Tag names in SASS\",\"scope\":[\"entity.name.tag.scss\",\"entity.name.tag.sass\"],\"settings\":{\"foreground\":\"#7fdbca\"}},{\"name\":\"SASS Keyword Other Unit\",\"scope\":[\"keyword.other.unit.scss\",\"keyword.other.unit.sass\"],\"settings\":{\"foreground\":\"#ffeb95\"}},{\"name\":\"TypeScript[React] Variables and Object Properties\",\"scope\":[\"variable.other.readwrite.alias.ts\",\"variable.other.readwrite.alias.tsx\",\"variable.other.readwrite.ts\",\"variable.other.readwrite.tsx\",\"variable.other.object.ts\",\"variable.other.object.tsx\",\"variable.object.property.ts\",\"variable.object.property.tsx\",\"variable.other.ts\",\"variable.other.tsx\",\"variable.tsx\",\"variable.ts\"],\"settings\":{\"foreground\":\"#d6deeb\"}},{\"name\":\"TypeScript[React] Entity Name Types\",\"scope\":[\"entity.name.type.ts\",\"entity.name.type.tsx\"],\"settings\":{\"foreground\":\"#ffcb8b\"}},{\"name\":\"TypeScript[React] Node Classes\",\"scope\":[\"support.class.node.ts\",\"support.class.node.tsx\"],\"settings\":{\"foreground\":\"#82aaff\"}},{\"name\":\"TypeScript[React] Entity Name Types as Parameters\",\"scope\":[\"meta.type.parameters.ts entity.name.type\",\"meta.type.parameters.tsx entity.name.type\"],\"settings\":{\"foreground\":\"#889fb2\"}},{\"name\":\"TypeScript[React] Import/Export Punctuations\",\"scope\":[\"meta.import.ts punctuation.definition.block\",\"meta.import.tsx punctuation.definition.block\",\"meta.export.ts punctuation.definition.block\",\"meta.export.tsx punctuation.definition.block\"],\"settings\":{\"foreground\":\"#d6deeb\"}},{\"name\":\"TypeScript[React] Punctuation Decorators\",\"scope\":[\"meta.decorator punctuation.decorator.ts\",\"meta.decorator punctuation.decorator.tsx\"],\"settings\":{\"foreground\":\"#82aaff\"}},{\"name\":\"TypeScript[React] Punctuation Decorators\",\"scope\":[\"meta.tag.js meta.jsx.children.tsx\"],\"settings\":{\"foreground\":\"#82aaff\"}},{\"name\":\"YAML Entity Name Tags\",\"scope\":[\"entity.name.tag.yaml\"],\"settings\":{\"foreground\":\"#7fdbca\"}},{\"name\":\"JavaScript Variable Other ReadWrite\",\"scope\":[\"variable.other.readwrite.js\",\"variable.parameter\"],\"settings\":{\"foreground\":\"#d7dbe0\"}},{\"name\":\"Support Class Component\",\"scope\":[\"support.class.component.js\",\"support.class.component.tsx\"],\"settings\":{\"foreground\":\"#f78c6c\",\"fontStyle\":\"\"}},{\"name\":\"Text nested in React tags\",\"scope\":[\"meta.jsx.children\",\"meta.jsx.children.js\",\"meta.jsx.children.tsx\"],\"settings\":{\"foreground\":\"#d6deeb\"}},{\"name\":\"TypeScript Classes\",\"scope\":[\"meta.class entity.name.type.class.tsx\"],\"settings\":{\"foreground\":\"#ffcb8b\"}},{\"name\":\"TypeScript Entity Name Type\",\"scope\":[\"entity.name.type.tsx\",\"entity.name.type.module.tsx\"],\"settings\":{\"foreground\":\"#ffcb8b\"}},{\"name\":\"TypeScript Class Variable Keyword\",\"scope\":[\"meta.class.ts meta.var.expr.ts storage.type.ts\",\"meta.class.tsx meta.var.expr.tsx storage.type.tsx\"],\"settings\":{\"foreground\":\"#c792ea\"}},{\"name\":\"TypeScript Method Declaration e.g. `constructor`\",\"scope\":[\"meta.method.declaration storage.type.ts\",\"meta.method.declaration storage.type.tsx\"],\"settings\":{\"foreground\":\"#82aaff\"}},{\"name\":\"normalize font style of certain components\",\"scope\":[\"meta.property-list.css meta.property-value.css variable.other.less\",\"meta.property-list.scss variable.scss\",\"meta.property-list.sass variable.sass\",\"meta.brace\",\"keyword.operator.operator\",\"keyword.operator.or.regexp\",\"keyword.operator.expression.in\",\"keyword.operator.relational\",\"keyword.operator.assignment\",\"keyword.operator.comparison\",\"keyword.operator.type\",\"keyword.operator\",\"keyword\",\"punctuation.definintion.string\",\"punctuation\",\"variable.other.readwrite.js\",\"storage.type\",\"source.css\",\"string.quoted\"],\"settings\":{\"fontStyle\":\"\"}}],\"styleOverrides\":{\"frames\":{\"editorBackground\":\"var(--sl-color-gray-6)\",\"terminalBackground\":\"var(--sl-color-gray-6)\",\"editorActiveTabBackground\":\"var(--sl-color-gray-6)\",\"terminalTitlebarDotsForeground\":\"color-mix(in srgb, var(--sl-color-gray-5), transparent 25%)\",\"terminalTitlebarDotsOpacity\":\"0.75\",\"inlineButtonForeground\":\"var(--sl-color-text)\",\"frameBoxShadowCssValue\":\"none\"},\"textMarkers\":{\"markBackground\":\"#ffffff17\",\"markBorderColor\":\"#ffffff40\"}}},{\"name\":\"Night Owl Light\",\"type\":\"light\",\"colors\":{\"focusBorder\":\"#93a1a1\",\"foreground\":\"#403f53\",\"disabledForeground\":\"#61616180\",\"descriptionForeground\":\"#403f53\",\"errorForeground\":\"#403f53\",\"icon.foreground\":\"#424242\",\"contrastActiveBorder\":null,\"contrastBorder\":null,\"textBlockQuote.background\":\"#7f7f7f1a\",\"textBlockQuote.border\":\"#007acc80\",\"textCodeBlock.background\":\"#dcdcdc66\",\"textLink.activeForeground\":\"#006ab1\",\"textLink.foreground\":\"#006ab1\",\"textPreformat.foreground\":\"#a31515\",\"textSeparator.foreground\":\"#0000002e\",\"editor.background\":\"#f6f7f9\",\"editor.foreground\":\"#403f53\",\"editorLineNumber.foreground\":\"#90a7b2\",\"editorLineNumber.activeForeground\":\"#403f53\",\"editorActiveLineNumber.foreground\":\"#0b216f\",\"editor.selectionBackground\":\"#e0e0e0\",\"editor.inactiveSelectionBackground\":\"#e0e0e080\",\"editor.selectionHighlightBackground\":\"#339cec33\",\"editorError.foreground\":\"#e64d49\",\"editorWarning.foreground\":\"#daaa01\",\"editorInfo.foreground\":\"#1a85ff\",\"editorHint.foreground\":\"#6c6c6c\",\"problemsErrorIcon.foreground\":\"#e64d49\",\"problemsWarningIcon.foreground\":\"#daaa01\",\"problemsInfoIcon.foreground\":\"#1a85ff\",\"editor.findMatchBackground\":\"#93a1a16c\",\"editor.findMatchHighlightBackground\":\"#93a1a16c\",\"editor.findRangeHighlightBackground\":\"#7497a633\",\"editorLink.activeForeground\":\"#0000ff\",\"editorLightBulb.foreground\":\"#ddb100\",\"editorLightBulbAutoFix.foreground\":\"#007acc\",\"diffEditor.insertedTextBackground\":\"#9ccc2c40\",\"diffEditor.insertedTextBorder\":null,\"diffEditor.removedTextBackground\":\"#ff000033\",\"diffEditor.removedTextBorder\":null,\"diffEditor.insertedLineBackground\":\"#9bb95533\",\"diffEditor.removedLineBackground\":\"#ff000033\",\"editorStickyScroll.background\":\"#fbfbfb\",\"editorStickyScrollHover.background\":\"#f0f0f0\",\"editorInlayHint.background\":\"#2aa29899\",\"editorInlayHint.foreground\":\"#f0f0f0\",\"editorInlayHint.typeBackground\":\"#2aa29899\",\"editorInlayHint.typeForeground\":\"#f0f0f0\",\"editorInlayHint.parameterBackground\":\"#2aa29899\",\"editorInlayHint.parameterForeground\":\"#f0f0f0\",\"editorPane.background\":\"#fbfbfb\",\"editorGroup.emptyBackground\":null,\"editorGroup.focusedEmptyBorder\":null,\"editorGroupHeader.tabsBackground\":\"var(--sl-color-gray-6)\",\"editorGroupHeader.tabsBorder\":\"color-mix(in srgb, var(--sl-color-gray-5), transparent 25%)\",\"editorGroupHeader.noTabsBackground\":\"#f0f0f0\",\"editorGroupHeader.border\":null,\"editorGroup.border\":\"#f0f0f0\",\"editorGroup.dropBackground\":\"#2677cb2d\",\"editorGroup.dropIntoPromptForeground\":\"#403f53\",\"editorGroup.dropIntoPromptBackground\":\"#f0f0f0\",\"editorGroup.dropIntoPromptBorder\":null,\"sideBySideEditor.horizontalBorder\":\"#f0f0f0\",\"sideBySideEditor.verticalBorder\":\"#f0f0f0\",\"scrollbar.shadow\":\"#cccccc\",\"scrollbarSlider.background\":\"#0000001a\",\"scrollbarSlider.hoverBackground\":\"#00000055\",\"scrollbarSlider.activeBackground\":\"#00000099\",\"panel.background\":\"#f0f0f0\",\"panel.border\":\"#d9d9d9\",\"panelTitle.activeBorder\":\"#424242\",\"panelTitle.activeForeground\":\"#424242\",\"panelTitle.inactiveForeground\":\"#424242bf\",\"panelSectionHeader.background\":\"#80808051\",\"terminal.background\":\"#f6f6f6\",\"widget.shadow\":\"#d9d9d9\",\"editorWidget.background\":\"#f0f0f0\",\"editorWidget.foreground\":\"#403f53\",\"editorWidget.border\":\"#d9d9d9\",\"quickInput.background\":\"#f0f0f0\",\"quickInput.foreground\":\"#403f53\",\"quickInputTitle.background\":\"#0000000f\",\"pickerGroup.foreground\":\"#403f53\",\"pickerGroup.border\":\"#d9d9d9\",\"editor.hoverHighlightBackground\":\"#339cec33\",\"editorHoverWidget.background\":\"#f0f0f0\",\"editorHoverWidget.foreground\":\"#403f53\",\"editorHoverWidget.border\":\"#d9d9d9\",\"editorHoverWidget.statusBarBackground\":\"#e4e4e4\",\"titleBar.activeBackground\":\"var(--sl-color-gray-6)\",\"titleBar.activeForeground\":\"var(--sl-color-text)\",\"titleBar.inactiveBackground\":\"#f0f0f099\",\"titleBar.inactiveForeground\":\"#33333399\",\"titleBar.border\":\"color-mix(in srgb, var(--sl-color-gray-5), transparent 25%)\",\"toolbar.hoverBackground\":\"#b8b8b850\",\"toolbar.activeBackground\":\"#a6a6a650\",\"tab.activeBackground\":\"#f6f6f6\",\"tab.unfocusedActiveBackground\":\"#f6f6f6\",\"tab.inactiveBackground\":\"#f0f0f0\",\"tab.unfocusedInactiveBackground\":\"#f0f0f0\",\"tab.activeForeground\":\"var(--sl-color-text)\",\"tab.inactiveForeground\":\"#403f53\",\"tab.unfocusedActiveForeground\":\"#403f53b3\",\"tab.unfocusedInactiveForeground\":\"#403f5380\",\"tab.hoverBackground\":null,\"tab.unfocusedHoverBackground\":null,\"tab.hoverForeground\":null,\"tab.unfocusedHoverForeground\":null,\"tab.border\":\"#f0f0f0\",\"tab.lastPinnedBorder\":\"#a9a9a9\",\"tab.activeBorder\":\"transparent\",\"tab.unfocusedActiveBorder\":null,\"tab.activeBorderTop\":\"var(--sl-color-accent)\",\"tab.unfocusedActiveBorderTop\":null,\"tab.hoverBorder\":null,\"tab.unfocusedHoverBorder\":null,\"tab.activeModifiedBorder\":\"#2aa298\",\"tab.inactiveModifiedBorder\":\"#93a1a1\",\"tab.unfocusedActiveModifiedBorder\":\"#93a1a1\",\"tab.unfocusedInactiveModifiedBorder\":\"#93a1a1\",\"badge.background\":\"#2aa298\",\"badge.foreground\":\"#f0f0f0\",\"button.background\":\"#2aa298\",\"button.foreground\":\"#f0f0f0\",\"button.border\":null,\"button.separator\":\"#f0f0f066\",\"button.hoverBackground\":\"#22827a\",\"button.secondaryBackground\":\"#5f6a79\",\"button.secondaryForeground\":\"#ffffff\",\"button.secondaryHoverBackground\":\"#4c5561\",\"dropdown.background\":\"#f0f0f0\",\"dropdown.foreground\":\"#403f53\",\"dropdown.border\":\"#d9d9d9\",\"list.activeSelectionBackground\":\"#d3e8f8\",\"list.activeSelectionForeground\":\"#403f53\",\"tree.indentGuidesStroke\":\"#a9a9a9\",\"input.background\":\"#f0f0f0\",\"input.foreground\":\"#403f53\",\"input.placeholderForeground\":\"#93a1a1\",\"inputOption.activeBorder\":\"#2aa298\",\"inputOption.hoverBackground\":\"#b8b8b850\",\"inputOption.activeBackground\":\"#93a1a133\",\"inputOption.activeForeground\":\"#000000\",\"inputValidation.infoBackground\":\"#f0f0f0\",\"inputValidation.infoBorder\":\"#d0d0d0\",\"inputValidation.warningBackground\":\"#daaa01\",\"inputValidation.warningBorder\":\"#e0af02\",\"inputValidation.errorBackground\":\"#f76e6e\",\"inputValidation.errorBorder\":\"#de3d3b\",\"keybindingLabel.background\":\"#dddddd66\",\"keybindingLabel.foreground\":\"#555555\",\"keybindingLabel.border\":\"#cccccc66\",\"keybindingLabel.bottomBorder\":\"#bbbbbb66\",\"menu.foreground\":\"#403f53\",\"menu.background\":\"#f0f0f0\",\"menu.selectionForeground\":\"#403f53\",\"menu.selectionBackground\":\"#d3e8f8\",\"menu.separatorBackground\":\"#d4d4d4\",\"editor.snippetTabstopHighlightBackground\":\"#0a326433\",\"editor.snippetFinalTabstopHighlightBorder\":\"#0a326480\",\"terminal.ansiBlack\":\"#403f53\",\"terminal.ansiRed\":\"#de3d3b\",\"terminal.ansiGreen\":\"#08916a\",\"terminal.ansiYellow\":\"#e0af02\",\"terminal.ansiBlue\":\"#288ed7\",\"terminal.ansiMagenta\":\"#d6438a\",\"terminal.ansiCyan\":\"#2aa298\",\"terminal.ansiWhite\":\"#f0f0f0\",\"terminal.ansiBrightBlack\":\"#403f53\",\"terminal.ansiBrightRed\":\"#de3d3b\",\"terminal.ansiBrightGreen\":\"#08916a\",\"terminal.ansiBrightYellow\":\"#daaa01\",\"terminal.ansiBrightBlue\":\"#288ed7\",\"terminal.ansiBrightMagenta\":\"#d6438a\",\"terminal.ansiBrightCyan\":\"#2aa298\",\"terminal.ansiBrightWhite\":\"#f0f0f0\",\"selection.background\":\"#7a8181ad\",\"notifications.background\":\"#f0f0f0\",\"notifications.foreground\":\"#403f53\",\"notificationLink.foreground\":\"#994cc3\",\"notifications.border\":\"#cccccc\",\"notificationCenter.border\":\"#cccccc\",\"notificationToast.border\":\"#cccccc\",\"notificationCenterHeader.foreground\":\"#403f53\",\"notificationCenterHeader.background\":\"#f0f0f0\",\"input.border\":\"#d9d9d9\",\"progressBar.background\":\"#2aa298\",\"list.inactiveSelectionBackground\":\"#e0e7ea\",\"list.inactiveSelectionForeground\":\"#403f53\",\"list.focusBackground\":\"#d3e8f8\",\"list.hoverBackground\":\"#d3e8f8\",\"list.focusForeground\":\"#403f53\",\"list.hoverForeground\":\"#403f53\",\"list.highlightForeground\":\"#403f53\",\"list.errorForeground\":\"#e64d49\",\"list.warningForeground\":\"#daaa01\",\"activityBar.background\":\"#f0f0f0\",\"activityBar.foreground\":\"#403f53\",\"activityBar.dropBackground\":\"#d0d0d0\",\"activityBarBadge.background\":\"#403f53\",\"activityBarBadge.foreground\":\"#f0f0f0\",\"activityBar.border\":\"#f0f0f0\",\"sideBar.background\":\"#f0f0f0\",\"sideBar.foreground\":\"#403f53\",\"sideBarTitle.foreground\":\"#403f53\",\"sideBar.border\":\"#f0f0f0\",\"editorGroup.background\":\"#f6f6f6\",\"editorCursor.foreground\":\"#90a7b2\",\"editor.wordHighlightBackground\":\"#339cec33\",\"editor.wordHighlightStrongBackground\":\"#007dd659\",\"editor.lineHighlightBackground\":\"#f0f0f0\",\"editor.rangeHighlightBackground\":\"#7497a633\",\"editorWhitespace.foreground\":\"#d9d9d9\",\"editorIndentGuide.background\":\"#d9d9d9\",\"editorCodeLens.foreground\":\"#403f53\",\"editorBracketMatch.background\":\"#d3e8f8\",\"editorBracketMatch.border\":\"#2aa298\",\"editorError.border\":\"#fbfbfb\",\"editorWarning.border\":\"#daaa01\",\"editorGutter.addedBackground\":\"#49d0c5\",\"editorGutter.modifiedBackground\":\"#6fbef6\",\"editorGutter.deletedBackground\":\"#f76e6e\",\"editorRuler.foreground\":\"#d9d9d9\",\"editorOverviewRuler.errorForeground\":\"#e64d49\",\"editorOverviewRuler.warningForeground\":\"#daaa01\",\"editorSuggestWidget.background\":\"#f0f0f0\",\"editorSuggestWidget.foreground\":\"#403f53\",\"editorSuggestWidget.highlightForeground\":\"#403f53\",\"editorSuggestWidget.selectedBackground\":\"#d3e8f8\",\"editorSuggestWidget.border\":\"#d9d9d9\",\"debugExceptionWidget.background\":\"#f0f0f0\",\"debugExceptionWidget.border\":\"#d9d9d9\",\"editorMarkerNavigation.background\":\"#d0d0d0\",\"editorMarkerNavigationError.background\":\"#f76e6e\",\"editorMarkerNavigationWarning.background\":\"#daaa01\",\"debugToolBar.background\":\"#f0f0f0\",\"extensionButton.prominentBackground\":\"#2aa298\",\"extensionButton.prominentForeground\":\"#f0f0f0\",\"statusBar.background\":\"#f0f0f0\",\"statusBar.border\":\"#f0f0f0\",\"statusBar.debuggingBackground\":\"#f0f0f0\",\"statusBar.debuggingForeground\":\"#403f53\",\"statusBar.foreground\":\"#403f53\",\"statusBar.noFolderBackground\":\"#f0f0f0\",\"statusBar.noFolderForeground\":\"#403f53\",\"peekView.border\":\"#d9d9d9\",\"peekViewEditor.background\":\"#f6f6f6\",\"peekViewEditorGutter.background\":\"#f6f6f6\",\"peekViewEditor.matchHighlightBackground\":\"#49d0c5\",\"peekViewResult.background\":\"#f0f0f0\",\"peekViewResult.fileForeground\":\"#403f53\",\"peekViewResult.lineForeground\":\"#403f53\",\"peekViewResult.matchHighlightBackground\":\"#49d0c5\",\"peekViewResult.selectionBackground\":\"#e0e7ea\",\"peekViewResult.selectionForeground\":\"#403f53\",\"peekViewTitle.background\":\"#f0f0f0\",\"peekViewTitleLabel.foreground\":\"#403f53\",\"peekViewTitleDescription.foreground\":\"#403f53\",\"terminal.foreground\":\"#403f53\"},\"fg\":\"#403f53\",\"bg\":\"#f6f7f9\",\"semanticHighlighting\":false,\"settings\":[{\"name\":\"Changed\",\"scope\":[\"markup.changed\",\"meta.diff.header.git\",\"meta.diff.header.from-file\",\"meta.diff.header.to-file\"],\"settings\":{\"foreground\":\"#556484\"}},{\"name\":\"Deleted\",\"scope\":[\"markup.deleted.diff\"],\"settings\":{\"foreground\":\"#ae3c3afd\"}},{\"name\":\"Inserted\",\"scope\":[\"markup.inserted.diff\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Global settings\",\"settings\":{\"background\":\"#011627\",\"foreground\":\"#403f53\"}},{\"name\":\"Comment\",\"scope\":[\"comment\"],\"settings\":{\"foreground\":\"#5f636f\"}},{\"name\":\"String\",\"scope\":[\"string\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"String Quoted\",\"scope\":[\"string.quoted\",\"variable.other.readwrite.js\"],\"settings\":{\"foreground\":\"#984e4d\"}},{\"name\":\"Support Constant Math\",\"scope\":[\"support.constant.math\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Number\",\"scope\":[\"constant.numeric\",\"constant.character.numeric\"],\"settings\":{\"foreground\":\"#aa0982\",\"fontStyle\":\"\"}},{\"name\":\"Built-in constant\",\"scope\":[\"constant.language\",\"punctuation.definition.constant\",\"variable.other.constant\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"User-defined constant\",\"scope\":[\"constant.character\",\"constant.other\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Constant Character Escape\",\"scope\":[\"constant.character.escape\"],\"settings\":{\"foreground\":\"#aa0982\"}},{\"name\":\"RegExp String\",\"scope\":[\"string.regexp\",\"string.regexp keyword.other\"],\"settings\":{\"foreground\":\"#3a688f\"}},{\"name\":\"Comma in functions\",\"scope\":[\"meta.function punctuation.separator.comma\"],\"settings\":{\"foreground\":\"#4d667b\"}},{\"name\":\"Variable\",\"scope\":[\"variable\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Keyword\",\"scope\":[\"punctuation.accessor\",\"keyword\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"Storage\",\"scope\":[\"storage\",\"meta.var.expr\",\"meta.class meta.method.declaration meta.var.expr storage.type.js\",\"storage.type.property.js\",\"storage.type.property.ts\",\"storage.type.property.tsx\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"Storage type\",\"scope\":[\"storage.type\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"Storage type\",\"scope\":[\"storage.type.function.arrow.js\"],\"settings\":{\"fontStyle\":\"\"}},{\"name\":\"Class name\",\"scope\":[\"entity.name.class\",\"meta.class entity.name.type.class\"],\"settings\":{\"foreground\":\"#111111\"}},{\"name\":\"Inherited class\",\"scope\":[\"entity.other.inherited-class\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Function name\",\"scope\":[\"entity.name.function\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"Meta Tag\",\"scope\":[\"punctuation.definition.tag\",\"meta.tag\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"HTML Tag names\",\"scope\":[\"entity.name.tag\",\"meta.tag.other.html\",\"meta.tag.other.js\",\"meta.tag.other.tsx\",\"entity.name.tag.tsx\",\"entity.name.tag.js\",\"entity.name.tag\",\"meta.tag.js\",\"meta.tag.tsx\",\"meta.tag.html\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"Tag attribute\",\"scope\":[\"entity.other.attribute-name\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Entity Name Tag Custom\",\"scope\":[\"entity.name.tag.custom\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Library (function & constant)\",\"scope\":[\"support.function\",\"support.constant\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Support Constant Property Value meta\",\"scope\":[\"support.constant.meta.property-value\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"Library class/type\",\"scope\":[\"support.type\",\"support.class\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Support Variable DOM\",\"scope\":[\"support.variable.dom\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Invalid\",\"scope\":[\"invalid\"],\"settings\":{\"foreground\":\"#bb2060\"}},{\"name\":\"Invalid deprecated\",\"scope\":[\"invalid.deprecated\"],\"settings\":{\"foreground\":\"#b23834\"}},{\"name\":\"Keyword Operator\",\"scope\":[\"keyword.operator\"],\"settings\":{\"foreground\":\"#096e72\",\"fontStyle\":\"\"}},{\"name\":\"Keyword Operator Relational\",\"scope\":[\"keyword.operator.relational\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"Keyword Operator Assignment\",\"scope\":[\"keyword.operator.assignment\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"Keyword Operator Arithmetic\",\"scope\":[\"keyword.operator.arithmetic\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"Keyword Operator Bitwise\",\"scope\":[\"keyword.operator.bitwise\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"Keyword Operator Increment\",\"scope\":[\"keyword.operator.increment\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"Keyword Operator Ternary\",\"scope\":[\"keyword.operator.ternary\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"Double-Slashed Comment\",\"scope\":[\"comment.line.double-slash\"],\"settings\":{\"foreground\":\"#5d6376\"}},{\"name\":\"Object\",\"scope\":[\"object\"],\"settings\":{\"foreground\":\"#58656a\"}},{\"name\":\"Null\",\"scope\":[\"constant.language.null\"],\"settings\":{\"foreground\":\"#a24848\"}},{\"name\":\"Meta Brace\",\"scope\":[\"meta.brace\"],\"settings\":{\"foreground\":\"#403f53\"}},{\"name\":\"Meta Delimiter Period\",\"scope\":[\"meta.delimiter.period\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"Punctuation Definition String\",\"scope\":[\"punctuation.definition.string\"],\"settings\":{\"foreground\":\"#111111\"}},{\"name\":\"Punctuation Definition String Markdown\",\"scope\":[\"punctuation.definition.string.begin.markdown\"],\"settings\":{\"foreground\":\"#a24848\"}},{\"name\":\"Boolean\",\"scope\":[\"constant.language.boolean\"],\"settings\":{\"foreground\":\"#a24848\"}},{\"name\":\"Object Comma\",\"scope\":[\"object.comma\"],\"settings\":{\"foreground\":\"#646464\"}},{\"name\":\"Variable Parameter Function\",\"scope\":[\"variable.parameter.function\"],\"settings\":{\"foreground\":\"#096e72\",\"fontStyle\":\"\"}},{\"name\":\"Support Type Property Name & entity name tags\",\"scope\":[\"support.type.vendor.property-name\",\"support.constant.vendor.property-value\",\"support.type.property-name\",\"meta.property-list entity.name.tag\"],\"settings\":{\"foreground\":\"#096e72\",\"fontStyle\":\"\"}},{\"name\":\"Entity Name tag reference in stylesheets\",\"scope\":[\"meta.property-list entity.name.tag.reference\"],\"settings\":{\"foreground\":\"#286d70\"}},{\"name\":\"Constant Other Color RGB Value Punctuation Definition Constant\",\"scope\":[\"constant.other.color.rgb-value punctuation.definition.constant\"],\"settings\":{\"foreground\":\"#aa0982\"}},{\"name\":\"Constant Other Color\",\"scope\":[\"constant.other.color\"],\"settings\":{\"foreground\":\"#aa0982\"}},{\"name\":\"Keyword Other Unit\",\"scope\":[\"keyword.other.unit\"],\"settings\":{\"foreground\":\"#aa0982\"}},{\"name\":\"Meta Selector\",\"scope\":[\"meta.selector\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"Entity Other Attribute Name Id\",\"scope\":[\"entity.other.attribute-name.id\"],\"settings\":{\"foreground\":\"#aa0982\"}},{\"name\":\"Meta Property Name\",\"scope\":[\"meta.property-name\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"Doctypes\",\"scope\":[\"entity.name.tag.doctype\",\"meta.tag.sgml.doctype\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"Punctuation Definition Parameters\",\"scope\":[\"punctuation.definition.parameters\"],\"settings\":{\"foreground\":\"#111111\"}},{\"name\":\"Keyword Control Operator\",\"scope\":[\"keyword.control.operator\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"Keyword Operator Logical\",\"scope\":[\"keyword.operator.logical\"],\"settings\":{\"foreground\":\"#8844ae\",\"fontStyle\":\"\"}},{\"name\":\"Variable Instances\",\"scope\":[\"variable.instance\",\"variable.other.instance\",\"variable.readwrite.instance\",\"variable.other.readwrite.instance\",\"variable.other.property\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"Variable Property Other object property\",\"scope\":[\"variable.other.object.property\"],\"settings\":{\"foreground\":\"#111111\"}},{\"name\":\"Variable Property Other object\",\"scope\":[\"variable.other.object.js\"],\"settings\":{\"fontStyle\":\"\"}},{\"name\":\"Entity Name Function\",\"scope\":[\"entity.name.function\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Keyword Operator Comparison, imports, returns and Keyword Operator Ruby\",\"scope\":[\"keyword.operator.comparison\",\"keyword.control.flow.js\",\"keyword.control.flow.ts\",\"keyword.control.flow.tsx\",\"keyword.control.ruby\",\"keyword.control.module.ruby\",\"keyword.control.class.ruby\",\"keyword.control.def.ruby\",\"keyword.control.loop.js\",\"keyword.control.loop.ts\",\"keyword.control.import.js\",\"keyword.control.import.ts\",\"keyword.control.import.tsx\",\"keyword.control.from.js\",\"keyword.control.from.ts\",\"keyword.control.from.tsx\",\"keyword.operator.instanceof.js\",\"keyword.operator.expression.instanceof.ts\",\"keyword.operator.expression.instanceof.tsx\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"Keyword Control Conditional\",\"scope\":[\"keyword.control.conditional.js\",\"keyword.control.conditional.ts\",\"keyword.control.switch.js\",\"keyword.control.switch.ts\"],\"settings\":{\"foreground\":\"#8844ae\",\"fontStyle\":\"\"}},{\"name\":\"Support Constant, `new` keyword, Special Method Keyword, `debugger`, other keywords\",\"scope\":[\"support.constant\",\"keyword.other.special-method\",\"keyword.other.new\",\"keyword.other.debugger\",\"keyword.control\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"Support Function\",\"scope\":[\"support.function\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Invalid Broken\",\"scope\":[\"invalid.broken\"],\"settings\":{\"foreground\":\"#aa0982\"}},{\"name\":\"Invalid Unimplemented\",\"scope\":[\"invalid.unimplemented\"],\"settings\":{\"foreground\":\"#486e26\"}},{\"name\":\"Invalid Illegal\",\"scope\":[\"invalid.illegal\"],\"settings\":{\"foreground\":\"#984e4d\"}},{\"name\":\"Language Variable\",\"scope\":[\"variable.language\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"Support Variable Property\",\"scope\":[\"support.variable.property\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"Variable Function\",\"scope\":[\"variable.function\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Variable Interpolation\",\"scope\":[\"variable.interpolation\"],\"settings\":{\"foreground\":\"#a64348\"}},{\"name\":\"Meta Function Call\",\"scope\":[\"meta.function-call\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Punctuation Section Embedded\",\"scope\":[\"punctuation.section.embedded\"],\"settings\":{\"foreground\":\"#b23834\"}},{\"name\":\"Punctuation Tweaks\",\"scope\":[\"punctuation.terminator.expression\",\"punctuation.definition.arguments\",\"punctuation.definition.array\",\"punctuation.section.array\",\"meta.array\"],\"settings\":{\"foreground\":\"#403f53\"}},{\"name\":\"More Punctuation Tweaks\",\"scope\":[\"punctuation.definition.list.begin\",\"punctuation.definition.list.end\",\"punctuation.separator.arguments\",\"punctuation.definition.list\"],\"settings\":{\"foreground\":\"#111111\"}},{\"name\":\"Template Strings\",\"scope\":[\"string.template meta.template.expression\"],\"settings\":{\"foreground\":\"#b23834\"}},{\"name\":\"Backtics(``) in Template Strings\",\"scope\":[\"string.template punctuation.definition.string\"],\"settings\":{\"foreground\":\"#403f53\"}},{\"name\":\"Italics\",\"scope\":[\"italic\"],\"settings\":{\"foreground\":\"#8844ae\",\"fontStyle\":\"italic\"}},{\"name\":\"Bold\",\"scope\":[\"bold\"],\"settings\":{\"foreground\":\"#3b61b0\",\"fontStyle\":\"bold\"}},{\"name\":\"Quote\",\"scope\":[\"quote\"],\"settings\":{\"foreground\":\"#5c6285\"}},{\"name\":\"Raw Code\",\"scope\":[\"raw\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"CoffeScript Variable Assignment\",\"scope\":[\"variable.assignment.coffee\"],\"settings\":{\"foreground\":\"#186e73\"}},{\"name\":\"CoffeScript Parameter Function\",\"scope\":[\"variable.parameter.function.coffee\"],\"settings\":{\"foreground\":\"#403f53\"}},{\"name\":\"CoffeeScript Assignments\",\"scope\":[\"variable.assignment.coffee\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"C# Readwrite Variables\",\"scope\":[\"variable.other.readwrite.cs\"],\"settings\":{\"foreground\":\"#403f53\"}},{\"name\":\"C# Classes & Storage types\",\"scope\":[\"entity.name.type.class.cs\",\"storage.type.cs\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"C# Namespaces\",\"scope\":[\"entity.name.type.namespace.cs\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"Tag names in Stylesheets\",\"scope\":[\"entity.name.tag.css\",\"entity.name.tag.less\",\"entity.name.tag.custom.css\",\"support.constant.property-value.css\"],\"settings\":{\"foreground\":\"#984e4d\",\"fontStyle\":\"\"}},{\"name\":\"Wildcard(*) selector in Stylesheets\",\"scope\":[\"entity.name.tag.wildcard.css\",\"entity.name.tag.wildcard.less\",\"entity.name.tag.wildcard.scss\",\"entity.name.tag.wildcard.sass\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"CSS Keyword Other Unit\",\"scope\":[\"keyword.other.unit.css\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Attribute Name for CSS\",\"scope\":[\"meta.attribute-selector.css entity.other.attribute-name.attribute\",\"variable.other.readwrite.js\"],\"settings\":{\"foreground\":\"#aa0982\"}},{\"name\":\"Elixir Classes\",\"scope\":[\"source.elixir support.type.elixir\",\"source.elixir meta.module.elixir entity.name.class.elixir\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Elixir Functions\",\"scope\":[\"source.elixir entity.name.function\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Elixir Constants\",\"scope\":[\"source.elixir constant.other.symbol.elixir\",\"source.elixir constant.other.keywords.elixir\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Elixir String Punctuations\",\"scope\":[\"source.elixir punctuation.definition.string\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Elixir\",\"scope\":[\"source.elixir variable.other.readwrite.module.elixir\",\"source.elixir variable.other.readwrite.module.elixir punctuation.definition.variable.elixir\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Elixir Binary Punctuations\",\"scope\":[\"source.elixir .punctuation.binary.elixir\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"Closure Constant Keyword\",\"scope\":[\"constant.keyword.clojure\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"Go Function Calls\",\"scope\":[\"source.go meta.function-call.go\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"Go Keywords\",\"scope\":[\"source.go keyword.package.go\",\"source.go keyword.import.go\",\"source.go keyword.function.go\",\"source.go keyword.type.go\",\"source.go keyword.struct.go\",\"source.go keyword.interface.go\",\"source.go keyword.const.go\",\"source.go keyword.var.go\",\"source.go keyword.map.go\",\"source.go keyword.channel.go\",\"source.go keyword.control.go\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"Go Constants e.g. nil, string format (%s, %d, etc.)\",\"scope\":[\"source.go constant.language.go\",\"source.go constant.other.placeholder.go\"],\"settings\":{\"foreground\":\"#a24848\"}},{\"name\":\"C++ Functions\",\"scope\":[\"entity.name.function.preprocessor.cpp\",\"entity.scope.name.cpp\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"C++ Meta Namespace\",\"scope\":[\"meta.namespace-block.cpp\"],\"settings\":{\"foreground\":\"#111111\"}},{\"name\":\"C++ Language Primitive Storage\",\"scope\":[\"storage.type.language.primitive.cpp\"],\"settings\":{\"foreground\":\"#a24848\"}},{\"name\":\"C++ Preprocessor Macro\",\"scope\":[\"meta.preprocessor.macro.cpp\"],\"settings\":{\"foreground\":\"#403f53\"}},{\"name\":\"C++ Variable Parameter\",\"scope\":[\"variable.parameter\"],\"settings\":{\"foreground\":\"#111111\"}},{\"name\":\"Powershell Variables\",\"scope\":[\"variable.other.readwrite.powershell\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Powershell Function\",\"scope\":[\"support.function.powershell\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"ID Attribute Name in HTML\",\"scope\":[\"entity.other.attribute-name.id.html\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"HTML Punctuation Definition Tag\",\"scope\":[\"punctuation.definition.tag.html\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"HTML Doctype\",\"scope\":[\"meta.tag.sgml.doctype.html\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"JavaScript Classes\",\"scope\":[\"meta.class entity.name.type.class.js\"],\"settings\":{\"foreground\":\"#111111\"}},{\"name\":\"JavaScript Method Declaration e.g. `constructor`\",\"scope\":[\"meta.method.declaration storage.type.js\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"JavaScript Terminator\",\"scope\":[\"terminator.js\"],\"settings\":{\"foreground\":\"#403f53\"}},{\"name\":\"JavaScript Meta Punctuation Definition\",\"scope\":[\"meta.js punctuation.definition.js\"],\"settings\":{\"foreground\":\"#403f53\"}},{\"name\":\"Entity Names in Code Documentations\",\"scope\":[\"entity.name.type.instance.jsdoc\",\"entity.name.type.instance.phpdoc\"],\"settings\":{\"foreground\":\"#4d667b\"}},{\"name\":\"Other Variables in Code Documentations\",\"scope\":[\"variable.other.jsdoc\",\"variable.other.phpdoc\"],\"settings\":{\"foreground\":\"#3e697c\"}},{\"name\":\"JavaScript module imports and exports\",\"scope\":[\"variable.other.meta.import.js\",\"meta.import.js variable.other\",\"variable.other.meta.export.js\",\"meta.export.js variable.other\"],\"settings\":{\"foreground\":\"#403f53\"}},{\"name\":\"JavaScript Variable Parameter Function\",\"scope\":[\"variable.parameter.function.js\"],\"settings\":{\"foreground\":\"#555ea2\"}},{\"name\":\"JavaScript[React] Variable Other Object\",\"scope\":[\"variable.other.object.js\",\"variable.other.object.jsx\",\"variable.object.property.js\",\"variable.object.property.jsx\"],\"settings\":{\"foreground\":\"#403f53\"}},{\"name\":\"JavaScript Variables\",\"scope\":[\"variable.js\",\"variable.other.js\"],\"settings\":{\"foreground\":\"#403f53\"}},{\"name\":\"JavaScript Entity Name Type\",\"scope\":[\"entity.name.type.js\",\"entity.name.type.module.js\"],\"settings\":{\"foreground\":\"#111111\",\"fontStyle\":\"\"}},{\"name\":\"JavaScript Support Classes\",\"scope\":[\"support.class.js\"],\"settings\":{\"foreground\":\"#403f53\"}},{\"name\":\"JSON Property Names\",\"scope\":[\"support.type.property-name.json\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"JSON Support Constants\",\"scope\":[\"support.constant.json\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"JSON Property values (string)\",\"scope\":[\"meta.structure.dictionary.value.json string.quoted.double\"],\"settings\":{\"foreground\":\"#7c5686\"}},{\"name\":\"Strings in JSON values\",\"scope\":[\"string.quoted.double.json punctuation.definition.string.json\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"Specific JSON Property values like null\",\"scope\":[\"meta.structure.dictionary.json meta.structure.dictionary.value constant.language\"],\"settings\":{\"foreground\":\"#a24848\"}},{\"name\":\"JavaScript Other Variable\",\"scope\":[\"variable.other.object.js\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"Ruby Variables\",\"scope\":[\"variable.other.ruby\"],\"settings\":{\"foreground\":\"#403f53\"}},{\"name\":\"Ruby Class\",\"scope\":[\"entity.name.type.class.ruby\"],\"settings\":{\"foreground\":\"#984e4d\"}},{\"name\":\"Ruby Hashkeys\",\"scope\":[\"constant.language.symbol.hashkey.ruby\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"Ruby Symbols\",\"scope\":[\"constant.language.symbol.ruby\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"LESS Tag names\",\"scope\":[\"entity.name.tag.less\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"LESS Keyword Other Unit\",\"scope\":[\"keyword.other.unit.css\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"Attribute Name for LESS\",\"scope\":[\"meta.attribute-selector.less entity.other.attribute-name.attribute\"],\"settings\":{\"foreground\":\"#aa0982\"}},{\"name\":\"Markdown Headings\",\"scope\":[\"markup.heading.markdown\",\"markup.heading.setext.1.markdown\",\"markup.heading.setext.2.markdown\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Markdown Italics\",\"scope\":[\"markup.italic.markdown\"],\"settings\":{\"foreground\":\"#8844ae\",\"fontStyle\":\"italic\"}},{\"name\":\"Markdown Bold\",\"scope\":[\"markup.bold.markdown\"],\"settings\":{\"foreground\":\"#3b61b0\",\"fontStyle\":\"bold\"}},{\"name\":\"Markdown Quote + others\",\"scope\":[\"markup.quote.markdown\"],\"settings\":{\"foreground\":\"#5c6285\"}},{\"name\":\"Markdown Raw Code + others\",\"scope\":[\"markup.inline.raw.markdown\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"Markdown Links\",\"scope\":[\"markup.underline.link.markdown\",\"markup.underline.link.image.markdown\"],\"settings\":{\"foreground\":\"#954f5a\",\"fontStyle\":\"underline\"}},{\"name\":\"Markdown Link Title and Description\",\"scope\":[\"string.other.link.title.markdown\",\"string.other.link.description.markdown\"],\"settings\":{\"foreground\":\"#403f53\",\"fontStyle\":\"underline\"}},{\"name\":\"Markdown Punctuation\",\"scope\":[\"punctuation.definition.string.markdown\",\"punctuation.definition.string.begin.markdown\",\"punctuation.definition.string.end.markdown\",\"meta.link.inline.markdown punctuation.definition.string\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Markdown MetaData Punctuation\",\"scope\":[\"punctuation.definition.metadata.markdown\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"Markdown List Punctuation\",\"scope\":[\"beginning.punctuation.definition.list.markdown\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Markdown Inline Raw String\",\"scope\":[\"markup.inline.raw.string.markdown\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"PHP Variables\",\"scope\":[\"variable.other.php\",\"variable.other.property.php\"],\"settings\":{\"foreground\":\"#111111\"}},{\"name\":\"Support Classes in PHP\",\"scope\":[\"support.class.php\"],\"settings\":{\"foreground\":\"#111111\"}},{\"name\":\"Punctuations in PHP function calls\",\"scope\":[\"meta.function-call.php punctuation\"],\"settings\":{\"foreground\":\"#403f53\"}},{\"name\":\"PHP Global Variables\",\"scope\":[\"variable.other.global.php\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Declaration Punctuation in PHP Global Variables\",\"scope\":[\"variable.other.global.php punctuation.definition.variable\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Language Constants in Python\",\"scope\":[\"constant.language.python\"],\"settings\":{\"foreground\":\"#a24848\"}},{\"name\":\"Python Function Parameter and Arguments\",\"scope\":[\"variable.parameter.function.python\",\"meta.function-call.arguments.python\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Python Function Call\",\"scope\":[\"meta.function-call.python\",\"meta.function-call.generic.python\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"Punctuations in Python\",\"scope\":[\"punctuation.python\"],\"settings\":{\"foreground\":\"#403f53\"}},{\"name\":\"Decorator Functions in Python\",\"scope\":[\"entity.name.function.decorator.python\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Python Language Variable\",\"scope\":[\"source.python variable.language.special\"],\"settings\":{\"foreground\":\"#aa0982\"}},{\"name\":\"Python import control keyword\",\"scope\":[\"keyword.control\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"SCSS Variable\",\"scope\":[\"variable.scss\",\"variable.sass\",\"variable.parameter.url.scss\",\"variable.parameter.url.sass\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Variables in SASS At-Rules\",\"scope\":[\"source.css.scss meta.at-rule variable\",\"source.css.sass meta.at-rule variable\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Variables in SASS At-Rules\",\"scope\":[\"source.css.scss meta.at-rule variable\",\"source.css.sass meta.at-rule variable\"],\"settings\":{\"foreground\":\"#111111\"}},{\"name\":\"Attribute Name for SASS\",\"scope\":[\"meta.attribute-selector.scss entity.other.attribute-name.attribute\",\"meta.attribute-selector.sass entity.other.attribute-name.attribute\"],\"settings\":{\"foreground\":\"#aa0982\"}},{\"name\":\"Tag names in SASS\",\"scope\":[\"entity.name.tag.scss\",\"entity.name.tag.sass\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"SASS Keyword Other Unit\",\"scope\":[\"keyword.other.unit.scss\",\"keyword.other.unit.sass\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"TypeScript[React] Variables and Object Properties\",\"scope\":[\"variable.other.readwrite.alias.ts\",\"variable.other.readwrite.alias.tsx\",\"variable.other.readwrite.ts\",\"variable.other.readwrite.tsx\",\"variable.other.object.ts\",\"variable.other.object.tsx\",\"variable.object.property.ts\",\"variable.object.property.tsx\",\"variable.other.ts\",\"variable.other.tsx\",\"variable.tsx\",\"variable.ts\"],\"settings\":{\"foreground\":\"#403f53\"}},{\"name\":\"TypeScript[React] Entity Name Types\",\"scope\":[\"entity.name.type.ts\",\"entity.name.type.tsx\"],\"settings\":{\"foreground\":\"#111111\"}},{\"name\":\"TypeScript[React] Node Classes\",\"scope\":[\"support.class.node.ts\",\"support.class.node.tsx\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"TypeScript[React] Entity Name Types as Parameters\",\"scope\":[\"meta.type.parameters.ts entity.name.type\",\"meta.type.parameters.tsx entity.name.type\"],\"settings\":{\"foreground\":\"#4d667b\"}},{\"name\":\"TypeScript[React] Import/Export Punctuations\",\"scope\":[\"meta.import.ts punctuation.definition.block\",\"meta.import.tsx punctuation.definition.block\",\"meta.export.ts punctuation.definition.block\",\"meta.export.tsx punctuation.definition.block\"],\"settings\":{\"foreground\":\"#403f53\"}},{\"name\":\"TypeScript[React] Punctuation Decorators\",\"scope\":[\"meta.decorator punctuation.decorator.ts\",\"meta.decorator punctuation.decorator.tsx\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"TypeScript[React] Punctuation Decorators\",\"scope\":[\"meta.tag.js meta.jsx.children.tsx\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"YAML Entity Name Tags\",\"scope\":[\"entity.name.tag.yaml\"],\"settings\":{\"foreground\":\"#111111\"}},{\"name\":\"JavaScript Variable Other ReadWrite\",\"scope\":[\"variable.other.readwrite.js\",\"variable.parameter\"],\"settings\":{\"foreground\":\"#403f53\"}},{\"name\":\"Support Class Component\",\"scope\":[\"support.class.component.js\",\"support.class.component.tsx\"],\"settings\":{\"foreground\":\"#aa0982\",\"fontStyle\":\"\"}},{\"name\":\"Text nested in React tags\",\"scope\":[\"meta.jsx.children\",\"meta.jsx.children.js\",\"meta.jsx.children.tsx\"],\"settings\":{\"foreground\":\"#403f53\"}},{\"name\":\"TypeScript Classes\",\"scope\":[\"meta.class entity.name.type.class.tsx\"],\"settings\":{\"foreground\":\"#111111\"}},{\"name\":\"TypeScript Entity Name Type\",\"scope\":[\"entity.name.type.tsx\",\"entity.name.type.module.tsx\"],\"settings\":{\"foreground\":\"#111111\"}},{\"name\":\"TypeScript Class Variable Keyword\",\"scope\":[\"meta.class.ts meta.var.expr.ts storage.type.ts\",\"meta.class.tsx meta.var.expr.tsx storage.type.tsx\"],\"settings\":{\"foreground\":\"#76578b\"}},{\"name\":\"TypeScript Method Declaration e.g. `constructor`\",\"scope\":[\"meta.method.declaration storage.type.ts\",\"meta.method.declaration storage.type.tsx\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"normalize font style of certain components\",\"scope\":[\"meta.property-list.css meta.property-value.css variable.other.less\",\"meta.property-list.scss variable.scss\",\"meta.property-list.sass variable.sass\",\"meta.brace\",\"keyword.operator.operator\",\"keyword.operator.or.regexp\",\"keyword.operator.expression.in\",\"keyword.operator.relational\",\"keyword.operator.assignment\",\"keyword.operator.comparison\",\"keyword.operator.type\",\"keyword.operator\",\"keyword\",\"punctuation.definintion.string\",\"punctuation\",\"variable.other.readwrite.js\",\"storage.type\",\"source.css\",\"string.quoted\"],\"settings\":{\"fontStyle\":\"\"}}],\"styleOverrides\":{\"frames\":{\"editorBackground\":\"var(--sl-color-gray-7)\",\"terminalBackground\":\"var(--sl-color-gray-7)\",\"editorActiveTabBackground\":\"var(--sl-color-gray-7)\",\"terminalTitlebarDotsForeground\":\"color-mix(in srgb, var(--sl-color-gray-5), transparent 25%)\",\"terminalTitlebarDotsOpacity\":\"0.75\",\"inlineButtonForeground\":\"var(--sl-color-text)\",\"frameBoxShadowCssValue\":\"none\"},\"textMarkers\":{\"markBackground\":\"#0000001a\",\"markBorderColor\":\"#00000055\"}}}],\"defaultLocale\":\"en\",\"cascadeLayer\":\"starlight.components\",\"styleOverrides\":{\"borderRadius\":\"0px\",\"borderWidth\":\"1px\",\"codePaddingBlock\":\"0.75rem\",\"codePaddingInline\":\"1rem\",\"codeFontFamily\":\"var(--__sl-font-mono)\",\"codeFontSize\":\"var(--sl-text-code)\",\"codeLineHeight\":\"var(--sl-line-height)\",\"uiFontFamily\":\"var(--__sl-font)\",\"textMarkers\":{\"lineDiffIndicatorMarginLeft\":\"0.25rem\",\"defaultChroma\":\"45\",\"backgroundOpacity\":\"60%\"}},\"plugins\":[{\"name\":\"Starlight Plugin\",\"hooks\":{}},{\"name\":\"astro-expressive-code\",\"hooks\":{}}]}]],\"remarkRehype\":{},\"gfm\":true,\"smartypants\":true},\"security\":{\"checkOrigin\":true,\"allowedDomains\":[],\"actionBodySizeLimit\":1048576},\"env\":{\"schema\":{},\"validateSecrets\":false},\"experimental\":{\"clientPrerender\":false,\"contentIntellisense\":false,\"headingIdCompat\":false,\"preserveScriptOrder\":false,\"liveContentCollections\":false,\"csp\":false,\"staticImportMetaEnv\":false,\"chromeDevtoolsWorkspace\":false,\"failOnPrerenderConflict\":false,\"svgo\":false},\"legacy\":{\"collections\":false},\"prefetch\":{\"prefetchAll\":true},\"i18n\":{\"defaultLocale\":\"en\",\"locales\":[{\"codes\":[\"en\"],\"path\":\"en\"},{\"codes\":[\"tr\"],\"path\":\"tr\"}],\"routing\":{\"prefixDefaultLocale\":false,\"redirectToDefaultLocale\":false,\"fallbackType\":\"redirect\"}}}","docs",["Map",11,12,52,53,86,87,125,126,152,153,173,174,206,207,251,252,290,291,317,318,353,354,386,387,461,462,488,489,521,522,554,555,611,612,644,645,667,668,700,701,724,725,744,745,795,796,833,834,868,869,900,901,936,937,974,975,1006,1007,1032,1033,1058,1059,1084,1085,1158,1159,1190,1191,1246,1247,1269,1270,1301,1302,1323,1324],"canvas-basics",{"id":11,"data":13,"body":21,"filePath":22,"digest":23,"rendered":24},{"title":14,"editUrl":15,"head":16,"template":17,"sidebar":18,"pagefind":15,"draft":19},"Canvas Basics",true,[],"doc",{"hidden":19,"attrs":20},false,{},"The FlowMind canvas is an infinite, interactive workspace. Here's how to navigate and manipulate it effectively.\n\n## Navigation\n\n*   **Pan**: specific mouse action (e.g., Hold Space + Drag, or Middle Click + Drag) moves the canvas view.\n*   **Zoom**: Use the mouse wheel to zoom in and out.\n*   **Fit View**: Press \\`Shift + 1\\` to fit all nodes within the view.\n\n## Node Operations\n\n### Selecting Nodes\n*   **Single Select**: Click a node.\n*   **Multi-Select**: Hold \\`Shift\\` and click multiple nodes, or click and drag a selection box around them.\n\n### Duplicating\nSelect one or more nodes and press \\`Cmd + D\\` (Mac) or \\`Ctrl + D\\` (Windows) to duplicate them.\n\n### Deleting\nSelect nodes and press \\`Backspace\\` or \\`Delete\\`.\n\n## The Mini-Map\n\nThe Mini-Map in the bottom right corner gives you a high-level overview of your entire flow. You can drag the viewport box inside the mini-map to quickly navigate large diagrams.\n\n[PLACEHOLDER: Image of Canvas Interface with callouts]","src/content/docs/canvas-basics.md","a315e51b371cf8f8",{"html":25,"metadata":26},"\u003Cp>The FlowMind canvas is an infinite, interactive workspace. Here’s how to navigate and manipulate it effectively.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"navigation\">Navigation\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#navigation\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Navigation”\u003C/span>\u003C/a>\u003C/div>\n\u003Cul>\n\u003Cli>\u003Cstrong>Pan\u003C/strong>: specific mouse action (e.g., Hold Space + Drag, or Middle Click + Drag) moves the canvas view.\u003C/li>\n\u003Cli>\u003Cstrong>Zoom\u003C/strong>: Use the mouse wheel to zoom in and out.\u003C/li>\n\u003Cli>\u003Cstrong>Fit View\u003C/strong>: Press `Shift + 1` to fit all nodes within the view.\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"node-operations\">Node Operations\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#node-operations\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Node Operations”\u003C/span>\u003C/a>\u003C/div>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"selecting-nodes\">Selecting Nodes\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#selecting-nodes\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Selecting Nodes”\u003C/span>\u003C/a>\u003C/div>\n\u003Cul>\n\u003Cli>\u003Cstrong>Single Select\u003C/strong>: Click a node.\u003C/li>\n\u003Cli>\u003Cstrong>Multi-Select\u003C/strong>: Hold `Shift` and click multiple nodes, or click and drag a selection box around them.\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"duplicating\">Duplicating\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#duplicating\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Duplicating”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Select one or more nodes and press `Cmd + D` (Mac) or `Ctrl + D` (Windows) to duplicate them.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"deleting\">Deleting\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#deleting\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Deleting”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Select nodes and press `Backspace` or `Delete`.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"the-mini-map\">The Mini-Map\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#the-mini-map\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “The Mini-Map”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>The Mini-Map in the bottom right corner gives you a high-level overview of your entire flow. You can drag the viewport box inside the mini-map to quickly navigate large diagrams.\u003C/p>\n\u003Cp>[PLACEHOLDER: Image of Canvas Interface with callouts]\u003C/p>",{"headings":27,"localImagePaths":48,"remoteImagePaths":49,"frontmatter":50,"imagePaths":51},[28,32,35,39,42,45],{"depth":29,"slug":30,"text":31},2,"navigation","Navigation",{"depth":29,"slug":33,"text":34},"node-operations","Node Operations",{"depth":36,"slug":37,"text":38},3,"selecting-nodes","Selecting Nodes",{"depth":36,"slug":40,"text":41},"duplicating","Duplicating",{"depth":36,"slug":43,"text":44},"deleting","Deleting",{"depth":29,"slug":46,"text":47},"the-mini-map","The Mini-Map",[],[],{"draft":19,"title":14},[],"aws-architecture",{"id":52,"data":54,"body":59,"filePath":60,"digest":61,"rendered":62},{"title":55,"editUrl":15,"head":56,"template":17,"sidebar":57,"pagefind":15,"draft":19},"AWS Architecture Diagram",[],{"hidden":19,"attrs":58},{},"# How to Draw AWS Architecture Diagrams with OpenFlowKit\n\nDrawing cloud infrastructure can be tedious if you are dragging and dropping shapes manually. OpenFlowKit provides a **Diagram-as-Code** approach to visualizing AWS Architectures, making it perfect for DevOps teams, Solutions Architects, and Cloud Engineers.\n\n## Why Use Diagram-as-Code for AWS?\n\nInstead of spending hours aligning server icons, you can write simple text that OpenFlowKit instantly renders into a beautiful, auto-routed diagram. Because it's code, your architecture diagram can live right next to your Terraform or CloudFormation scripts in Git.\n\n- **Version Control**: Track infrastructure changes over time.\n- **Auto-Layout**: No more overlapping lines or misaligned VPCs.\n- **Speed**: Type a few lines, get a complete diagram.\n\n\n## Example: Basic Web Architecture (Mermaid.js)\n\nOpenFlowKit natively supports Mermaid.js, which is great for standard cloud structures. Here is how you can visualize an AWS VPC with a Load Balancer, EC2 instances, and an RDS database.\n\n```mermaid\nflowchart TD\n    %% Define Styles\n    classDef aws fill:#FF9900,stroke:#fff,stroke-width:2px,color:#fff,rx:8px,ry:8px;\n    classDef vpc fill:#f5f5f5,stroke:#00A4A6,stroke-width:2px,stroke-dasharray: 5 5,rx:12px,ry:12px;\n    \n    Client((User Traffic))\n\n    subgraph AWS_VPC [AWS Cloud VPC]\n        ALB(Application Load Balancer)\n        \n        subgraph Public_Subnet [Public Subnet]\n            EC2_1(Web Server 1)\n            EC2_2(Web Server 2)\n        end\n        \n        subgraph Private_Subnet [Private Subnet]\n            RDS[(Amazon RDS)]\n            ElastiCache[(Redis Cache)]\n        end\n    end\n\n    %% Connections\n    Client -->|HTTPS| ALB\n    ALB -->|Round Robin| EC2_1\n    ALB -->|Round Robin| EC2_2\n    \n    EC2_1 --> RDS\n    EC2_1 --> ElastiCache\n    EC2_2 --> RDS\n    EC2_2 --> ElastiCache\n\n    %% Apply Styles\n    class ALB,EC2_1,EC2_2 aws;\n    class RDS,ElastiCache aws;\n    class AWS_VPC,Public_Subnet,Private_Subnet vpc;\n```\n\n## Creating AWS Diagrams with AI\n\nIf you don't know Mermaid syntax, you can use **Flowpilot**, our built-in AI assistant. \n\n1. Open the [Command Center](/docs/en/command-center).\n2. Type a prompt like:\n> `\"Create an AWS architecture diagram showing an API Gateway routing traffic to three AWS Lambda functions, which all connect to a central DynamoDB table.\"`\n3. Hit enter. Flowpilot will instantly generate the DSL and render the diagram.\n\n## Exporting for internal documentation\n\nOnce your AWS Architecture is generated, you can easily export it:\n- **SVG / PNG**: For Confluence, Jira, or Slack.\n- **Figma Editable**: Want your UX team to polish the diagram? Click *Figma Editable* and paste it directly into Figma as native, editable vector layers.\n\n[Try building your first AWS Architecture diagram now!](/#/canvas)","src/content/docs/aws-architecture.md","5aec0ab74121bb5c",{"html":63,"metadata":64},"\u003Cdiv class=\"sl-heading-wrapper level-h1\">\u003Ch1 id=\"how-to-draw-aws-architecture-diagrams-with-openflowkit\">How to Draw AWS Architecture Diagrams with OpenFlowKit\u003C/h1>\u003Ca class=\"sl-anchor-link\" href=\"#how-to-draw-aws-architecture-diagrams-with-openflowkit\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “How to Draw AWS Architecture Diagrams with OpenFlowKit”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Drawing cloud infrastructure can be tedious if you are dragging and dropping shapes manually. OpenFlowKit provides a \u003Cstrong>Diagram-as-Code\u003C/strong> approach to visualizing AWS Architectures, making it perfect for DevOps teams, Solutions Architects, and Cloud Engineers.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"why-use-diagram-as-code-for-aws\">Why Use Diagram-as-Code for AWS?\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#why-use-diagram-as-code-for-aws\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Why Use Diagram-as-Code for AWS?”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Instead of spending hours aligning server icons, you can write simple text that OpenFlowKit instantly renders into a beautiful, auto-routed diagram. Because it’s code, your architecture diagram can live right next to your Terraform or CloudFormation scripts in Git.\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Version Control\u003C/strong>: Track infrastructure changes over time.\u003C/li>\n\u003Cli>\u003Cstrong>Auto-Layout\u003C/strong>: No more overlapping lines or misaligned VPCs.\u003C/li>\n\u003Cli>\u003Cstrong>Speed\u003C/strong>: Type a few lines, get a complete diagram.\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"example-basic-web-architecture-mermaidjs\">Example: Basic Web Architecture (Mermaid.js)\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#example-basic-web-architecture-mermaidjs\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Example: Basic Web Architecture (Mermaid.js)”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>OpenFlowKit natively supports Mermaid.js, which is great for standard cloud structures. Here is how you can visualize an AWS VPC with a Load Balancer, EC2 instances, and an RDS database.\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Clink rel=\"stylesheet\" href=\"/_astro/ec.v4551.css\">\u003Cscript type=\"module\" src=\"/_astro/ec.0vx5m.js\">\u003C/script>\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"mermaid\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">flowchart TD\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">    \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">%% Define Styles\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">    \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">classDef aws fill:#FF9900,stroke:#fff,stroke-width:2px,color:#fff,rx:8px,ry:8px;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">    \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">classDef vpc fill:#f5f5f5,stroke:#00A4A6,stroke-width:2px,stroke-dasharray: 5 5,rx:12px,ry:12px;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">    \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">Client((User Traffic))\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">    \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">subgraph AWS_VPC [AWS Cloud VPC]\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">        \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">ALB(Application Load Balancer)\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">        \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">subgraph Public_Subnet [Public Subnet]\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">            \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">EC2_1(Web Server 1)\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">            \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">EC2_2(Web Server 2)\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">        \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">end\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">        \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">subgraph Private_Subnet [Private Subnet]\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">            \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">RDS[(Amazon RDS)]\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">            \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">ElastiCache[(Redis Cache)]\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">        \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">end\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">    \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">end\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">    \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">%% Connections\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">    \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">Client -->|HTTPS| ALB\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">    \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">ALB -->|Round Robin| EC2_1\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">    \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">ALB -->|Round Robin| EC2_2\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">    \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">EC2_1 --> RDS\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">    \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">EC2_1 --> ElastiCache\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">    \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">EC2_2 --> RDS\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">    \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">EC2_2 --> ElastiCache\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">    \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">%% Apply Styles\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">    \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">class ALB,EC2_1,EC2_2 aws;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">    \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">class RDS,ElastiCache aws;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">    \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">class AWS_VPC,Public_Subnet,Private_Subnet vpc;\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"flowchart TD    %% Define Styles    classDef aws fill:#FF9900,stroke:#fff,stroke-width:2px,color:#fff,rx:8px,ry:8px;    classDef vpc fill:#f5f5f5,stroke:#00A4A6,stroke-width:2px,stroke-dasharray: 5 5,rx:12px,ry:12px;    Client((User Traffic))    subgraph AWS_VPC [AWS Cloud VPC]        ALB(Application Load Balancer)        subgraph Public_Subnet [Public Subnet]            EC2_1(Web Server 1)            EC2_2(Web Server 2)        end        subgraph Private_Subnet [Private Subnet]            RDS[(Amazon RDS)]            ElastiCache[(Redis Cache)]        end    end    %% Connections    Client -->|HTTPS| ALB    ALB -->|Round Robin| EC2_1    ALB -->|Round Robin| EC2_2    EC2_1 --> RDS    EC2_1 --> ElastiCache    EC2_2 --> RDS    EC2_2 --> ElastiCache    %% Apply Styles    class ALB,EC2_1,EC2_2 aws;    class RDS,ElastiCache aws;    class AWS_VPC,Public_Subnet,Private_Subnet vpc;\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"creating-aws-diagrams-with-ai\">Creating AWS Diagrams with AI\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#creating-aws-diagrams-with-ai\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Creating AWS Diagrams with AI”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>If you don’t know Mermaid syntax, you can use \u003Cstrong>Flowpilot\u003C/strong>, our built-in AI assistant.\u003C/p>\n\u003Col>\n\u003Cli>Open the \u003Ca href=\"/docs/en/command-center\">Command Center\u003C/a>.\u003C/li>\n\u003Cli>Type a prompt like:\u003C/li>\n\u003C/ol>\n\u003Cblockquote>\n\u003Cp>\u003Ccode dir=\"auto\">\"Create an AWS architecture diagram showing an API Gateway routing traffic to three AWS Lambda functions, which all connect to a central DynamoDB table.\"\u003C/code>\u003C/p>\n\u003C/blockquote>\n\u003Col start=\"3\">\n\u003Cli>Hit enter. Flowpilot will instantly generate the DSL and render the diagram.\u003C/li>\n\u003C/ol>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"exporting-for-internal-documentation\">Exporting for internal documentation\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#exporting-for-internal-documentation\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Exporting for internal documentation”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Once your AWS Architecture is generated, you can easily export it:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>SVG / PNG\u003C/strong>: For Confluence, Jira, or Slack.\u003C/li>\n\u003Cli>\u003Cstrong>Figma Editable\u003C/strong>: Want your UX team to polish the diagram? Click \u003Cem>Figma Editable\u003C/em> and paste it directly into Figma as native, editable vector layers.\u003C/li>\n\u003C/ul>\n\u003Cp>\u003Ca href=\"/#/canvas\">Try building your first AWS Architecture diagram now!\u003C/a>\u003C/p>",{"headings":65,"localImagePaths":82,"remoteImagePaths":83,"frontmatter":84,"imagePaths":85},[66,70,73,76,79],{"depth":67,"slug":68,"text":69},1,"how-to-draw-aws-architecture-diagrams-with-openflowkit","How to Draw AWS Architecture Diagrams with OpenFlowKit",{"depth":29,"slug":71,"text":72},"why-use-diagram-as-code-for-aws","Why Use Diagram-as-Code for AWS?",{"depth":29,"slug":74,"text":75},"example-basic-web-architecture-mermaidjs","Example: Basic Web Architecture (Mermaid.js)",{"depth":29,"slug":77,"text":78},"creating-aws-diagrams-with-ai","Creating AWS Diagrams with AI",{"depth":29,"slug":80,"text":81},"exporting-for-internal-documentation","Exporting for internal documentation",[],[],{"draft":19,"title":55},[],"ai-generation",{"id":86,"data":88,"body":93,"filePath":94,"digest":95,"rendered":96},{"title":89,"editUrl":15,"head":90,"template":17,"sidebar":91,"pagefind":15,"draft":19},"AI Generation",[],{"hidden":19,"attrs":92},{},"FlowMind leverages Google's **Gemini 2.0 Flash** model to understand natural language and convert it into structural diagrams.\n\n## How it Works\n\n1.  **Intent Analysis**: The AI analyzes your prompt to understand the *goal* (e.g., \"Login Flow\") and the *actors* (User, Server, Database).\n2.  **Structural Generation**: It constructs a valid FlowMind DSL JSON object representing the nodes and connections.\n3.  **Layout Optimization**: The engine applies smart layout algorithms to ensure the generated graph is readable.\n\n## Best Practices for Prompts\n\nTo get the best results, be specific about the **steps** and the **outcome**.\n\n### ❌ Too Vague\n> \"Make a system diagram.\"\n\n### ✅ Good\n> \"Create a high-level system architecture for an e-commerce platform. Include a Web App, API Gateway, User Service, Product Service, and a shared PostgreSQL database.\"\n\n### ✅ Better (Process Flow)\n> \"Draw a flowchart for a user password reset process. Start with 'User clicks forgot password', check if email exists. If yes, send distinct token. If no, show error. End with 'User enters new password'.\"\n\n## Editing AI Results\n\nAI generation is a starting point, not the end. You can always:\n*   Add missing steps manaully.\n*   Renaming nodes for clarity.\n*   Regenerating specific sections (Coming Soon).\n\n## 🔑 Bring Your Own Key (BYOK)\n\nBy default, FlowMind uses a shared API key with limited quotas. For heavy usage, privacy, or to use your own billing, you can bring your own **Gemini API Key**.\n\n1.  Go to **Google AI Studio** and [Get an API Key](https://aistudio.google.com/app/apikey).\n2.  In FlowMind, open **Settings** (Gear Icon) or click on any **Brand Kit**.\n3.  Navigate to the **AI** tab.\n4.  Paste your key into the secure input field.\n\n> [!NOTE]\n> Your key is stored locally in your browser's `localStorage` and is never sent to our servers. It is strictly used for client-side API calls to Google.","src/content/docs/ai-generation.md","c96e057798a40b8d",{"html":97,"metadata":98},"\u003Cp>FlowMind leverages Google’s \u003Cstrong>Gemini 2.0 Flash\u003C/strong> model to understand natural language and convert it into structural diagrams.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"how-it-works\">How it Works\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#how-it-works\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “How it Works”\u003C/span>\u003C/a>\u003C/div>\n\u003Col>\n\u003Cli>\u003Cstrong>Intent Analysis\u003C/strong>: The AI analyzes your prompt to understand the \u003Cem>goal\u003C/em> (e.g., “Login Flow”) and the \u003Cem>actors\u003C/em> (User, Server, Database).\u003C/li>\n\u003Cli>\u003Cstrong>Structural Generation\u003C/strong>: It constructs a valid FlowMind DSL JSON object representing the nodes and connections.\u003C/li>\n\u003Cli>\u003Cstrong>Layout Optimization\u003C/strong>: The engine applies smart layout algorithms to ensure the generated graph is readable.\u003C/li>\n\u003C/ol>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"best-practices-for-prompts\">Best Practices for Prompts\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#best-practices-for-prompts\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Best Practices for Prompts”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>To get the best results, be specific about the \u003Cstrong>steps\u003C/strong> and the \u003Cstrong>outcome\u003C/strong>.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"-too-vague\">❌ Too Vague\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#-too-vague\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “❌ Too Vague”\u003C/span>\u003C/a>\u003C/div>\n\u003Cblockquote>\n\u003Cp>“Make a system diagram.”\u003C/p>\n\u003C/blockquote>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"-good\">✅ Good\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#-good\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “✅ Good”\u003C/span>\u003C/a>\u003C/div>\n\u003Cblockquote>\n\u003Cp>“Create a high-level system architecture for an e-commerce platform. Include a Web App, API Gateway, User Service, Product Service, and a shared PostgreSQL database.”\u003C/p>\n\u003C/blockquote>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"-better-process-flow\">✅ Better (Process Flow)\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#-better-process-flow\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “✅ Better (Process Flow)”\u003C/span>\u003C/a>\u003C/div>\n\u003Cblockquote>\n\u003Cp>“Draw a flowchart for a user password reset process. Start with ‘User clicks forgot password’, check if email exists. If yes, send distinct token. If no, show error. End with ‘User enters new password’.”\u003C/p>\n\u003C/blockquote>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"editing-ai-results\">Editing AI Results\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#editing-ai-results\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Editing AI Results”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>AI generation is a starting point, not the end. You can always:\u003C/p>\n\u003Cul>\n\u003Cli>Add missing steps manaully.\u003C/li>\n\u003Cli>Renaming nodes for clarity.\u003C/li>\n\u003Cli>Regenerating specific sections (Coming Soon).\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"-bring-your-own-key-byok\">🔑 Bring Your Own Key (BYOK)\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#-bring-your-own-key-byok\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “🔑 Bring Your Own Key (BYOK)”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>By default, FlowMind uses a shared API key with limited quotas. For heavy usage, privacy, or to use your own billing, you can bring your own \u003Cstrong>Gemini API Key\u003C/strong>.\u003C/p>\n\u003Col>\n\u003Cli>Go to \u003Cstrong>Google AI Studio\u003C/strong> and \u003Ca href=\"https://aistudio.google.com/app/apikey\">Get an API Key\u003C/a>.\u003C/li>\n\u003Cli>In FlowMind, open \u003Cstrong>Settings\u003C/strong> (Gear Icon) or click on any \u003Cstrong>Brand Kit\u003C/strong>.\u003C/li>\n\u003Cli>Navigate to the \u003Cstrong>AI\u003C/strong> tab.\u003C/li>\n\u003Cli>Paste your key into the secure input field.\u003C/li>\n\u003C/ol>\n\u003Cblockquote>\n\u003Cp>[!NOTE]\nYour key is stored locally in your browser’s \u003Ccode dir=\"auto\">localStorage\u003C/code> and is never sent to our servers. It is strictly used for client-side API calls to Google.\u003C/p>\n\u003C/blockquote>",{"headings":99,"localImagePaths":121,"remoteImagePaths":122,"frontmatter":123,"imagePaths":124},[100,103,106,109,112,115,118],{"depth":29,"slug":101,"text":102},"how-it-works","How it Works",{"depth":29,"slug":104,"text":105},"best-practices-for-prompts","Best Practices for Prompts",{"depth":36,"slug":107,"text":108},"-too-vague","❌ Too Vague",{"depth":36,"slug":110,"text":111},"-good","✅ Good",{"depth":36,"slug":113,"text":114},"-better-process-flow","✅ Better (Process Flow)",{"depth":29,"slug":116,"text":117},"editing-ai-results","Editing AI Results",{"depth":29,"slug":119,"text":120},"-bring-your-own-key-byok","🔑 Bring Your Own Key (BYOK)",[],[],{"draft":19,"title":89},[],"keyboard-shortcuts",{"id":125,"data":127,"body":132,"filePath":133,"digest":134,"rendered":135},{"title":128,"editUrl":15,"head":129,"template":17,"sidebar":130,"pagefind":15,"draft":19},"Keyboard Shortcuts",[],{"hidden":19,"attrs":131},{},"Master FlowMind with these keyboard shortcuts to speed up your workflow.\n\n## General\n\n| Action | MacOS | Windows/Linux |\n| :--- | :--- | :--- |\n| **Command Palette** | \\`Cmd + K\\` | \\`Ctrl + K\\` |\n| **Save** | \\`Cmd + S\\` | \\`Ctrl + S\\` |\n| **Undo** | \\`Cmd + Z\\` | \\`Ctrl + Z\\` |\n| **Redo** | \\`Cmd + Shift + Z\\` | \\`Ctrl + Shift + Z\\` |\n\n## Canvas Navigation\n\n| Action | MacOS | Windows/Linux |\n| :--- | :--- | :--- |\n| **Zoom In** | \\`+\\` | \\`+\\` |\n| **Zoom Out** | \\`-\\` | \\`-\\` |\n| **Fit View** | \\`Shift + 1\\` | \\`Shift + 1\\` |\n\n## Editing\n\n| Action | MacOS | Windows/Linux |\n| :--- | :--- | :--- |\n| **Duplicate Node** | \\`Cmd + D\\` or \\`Alt + Drag\\` | \\`Ctrl + D\\` or \\`Alt + Drag\\` |\n| **Delete Node** | \\`Backspace\\` | \\`Backspace\\` |\n| **Select All** | \\`Cmd + A\\` | \\`Ctrl + A\\` |\n| **Group Selection** | \\`Cmd + G\\` | \\`Ctrl + G\\` |\n\n> **Note:** Shortcuts are active when the canvas has focus.","src/content/docs/keyboard-shortcuts.md","41dc4dac59a54b2a",{"html":136,"metadata":137},"\u003Cp>Master FlowMind with these keyboard shortcuts to speed up your workflow.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"general\">General\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#general\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “General”\u003C/span>\u003C/a>\u003C/div>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth align=\"left\">Action\u003C/th>\u003Cth align=\"left\">MacOS\u003C/th>\u003Cth align=\"left\">Windows/Linux\u003C/th>\u003C/tr>\u003C/thead>\u003Ctbody>\u003Ctr>\u003Ctd align=\"left\">\u003Cstrong>Command Palette\u003C/strong>\u003C/td>\u003Ctd align=\"left\">`Cmd + K`\u003C/td>\u003Ctd align=\"left\">`Ctrl + K`\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd align=\"left\">\u003Cstrong>Save\u003C/strong>\u003C/td>\u003Ctd align=\"left\">`Cmd + S`\u003C/td>\u003Ctd align=\"left\">`Ctrl + S`\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd align=\"left\">\u003Cstrong>Undo\u003C/strong>\u003C/td>\u003Ctd align=\"left\">`Cmd + Z`\u003C/td>\u003Ctd align=\"left\">`Ctrl + Z`\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd align=\"left\">\u003Cstrong>Redo\u003C/strong>\u003C/td>\u003Ctd align=\"left\">`Cmd + Shift + Z`\u003C/td>\u003Ctd align=\"left\">`Ctrl + Shift + Z`\u003C/td>\u003C/tr>\u003C/tbody>\u003C/table>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"canvas-navigation\">Canvas Navigation\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#canvas-navigation\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Canvas Navigation”\u003C/span>\u003C/a>\u003C/div>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth align=\"left\">Action\u003C/th>\u003Cth align=\"left\">MacOS\u003C/th>\u003Cth align=\"left\">Windows/Linux\u003C/th>\u003C/tr>\u003C/thead>\u003Ctbody>\u003Ctr>\u003Ctd align=\"left\">\u003Cstrong>Zoom In\u003C/strong>\u003C/td>\u003Ctd align=\"left\">`+`\u003C/td>\u003Ctd align=\"left\">`+`\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd align=\"left\">\u003Cstrong>Zoom Out\u003C/strong>\u003C/td>\u003Ctd align=\"left\">`-`\u003C/td>\u003Ctd align=\"left\">`-`\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd align=\"left\">\u003Cstrong>Fit View\u003C/strong>\u003C/td>\u003Ctd align=\"left\">`Shift + 1`\u003C/td>\u003Ctd align=\"left\">`Shift + 1`\u003C/td>\u003C/tr>\u003C/tbody>\u003C/table>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"editing\">Editing\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#editing\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Editing”\u003C/span>\u003C/a>\u003C/div>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth align=\"left\">Action\u003C/th>\u003Cth align=\"left\">MacOS\u003C/th>\u003Cth align=\"left\">Windows/Linux\u003C/th>\u003C/tr>\u003C/thead>\u003Ctbody>\u003Ctr>\u003Ctd align=\"left\">\u003Cstrong>Duplicate Node\u003C/strong>\u003C/td>\u003Ctd align=\"left\">`Cmd + D` or `Alt + Drag`\u003C/td>\u003Ctd align=\"left\">`Ctrl + D` or `Alt + Drag`\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd align=\"left\">\u003Cstrong>Delete Node\u003C/strong>\u003C/td>\u003Ctd align=\"left\">`Backspace`\u003C/td>\u003Ctd align=\"left\">`Backspace`\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd align=\"left\">\u003Cstrong>Select All\u003C/strong>\u003C/td>\u003Ctd align=\"left\">`Cmd + A`\u003C/td>\u003Ctd align=\"left\">`Ctrl + A`\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd align=\"left\">\u003Cstrong>Group Selection\u003C/strong>\u003C/td>\u003Ctd align=\"left\">`Cmd + G`\u003C/td>\u003Ctd align=\"left\">`Ctrl + G`\u003C/td>\u003C/tr>\u003C/tbody>\u003C/table>\n\u003Cblockquote>\n\u003Cp>\u003Cstrong>Note:\u003C/strong> Shortcuts are active when the canvas has focus.\u003C/p>\n\u003C/blockquote>",{"headings":138,"localImagePaths":148,"remoteImagePaths":149,"frontmatter":150,"imagePaths":151},[139,142,145],{"depth":29,"slug":140,"text":141},"general","General",{"depth":29,"slug":143,"text":144},"canvas-navigation","Canvas Navigation",{"depth":29,"slug":146,"text":147},"editing","Editing",[],[],{"draft":19,"title":128},[],"ask-flowpilot",{"id":152,"data":154,"body":159,"filePath":160,"digest":161,"rendered":162},{"title":155,"editUrl":15,"head":156,"template":17,"sidebar":157,"pagefind":15,"draft":19},"Ask Flowpilot",[],{"hidden":19,"attrs":158},{},"# Ask Flowpilot Assistant\n\nThis page is dynamically replaced by the AI Assistant component inside `DocsPage.tsx`. This file exists only to satisfy the Vite dynamic glob importer and routing logic.","src/content/docs/ask-flowpilot.md","9c5bb2102a146704",{"html":163,"metadata":164},"\u003Cdiv class=\"sl-heading-wrapper level-h1\">\u003Ch1 id=\"ask-flowpilot-assistant\">Ask Flowpilot Assistant\u003C/h1>\u003Ca class=\"sl-anchor-link\" href=\"#ask-flowpilot-assistant\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Ask Flowpilot Assistant”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>This page is dynamically replaced by the AI Assistant component inside \u003Ccode dir=\"auto\">DocsPage.tsx\u003C/code>. This file exists only to satisfy the Vite dynamic glob importer and routing logic.\u003C/p>",{"headings":165,"localImagePaths":169,"remoteImagePaths":170,"frontmatter":171,"imagePaths":172},[166],{"depth":67,"slug":167,"text":168},"ask-flowpilot-assistant","Ask Flowpilot Assistant",[],[],{"draft":19,"title":155},[],"command-center",{"id":173,"data":175,"body":180,"filePath":181,"digest":182,"rendered":183},{"title":176,"editUrl":15,"head":177,"template":17,"sidebar":178,"pagefind":15,"draft":19},"Command Center",[],{"hidden":19,"attrs":179},{},"The Command Center is the floating toolbar at the bottom of the screen. It's the heart of FlowMind's \"keyboard-first\" workflow.\n\n> [!NOTE]\n> Open the Command Center anytime by pressing `Cmd + K` (Mac) or `Ctrl + K` (Windows).\n\n## Features\n\n### 1. Templates\nDon't start from scratch. Access a library of pre-built diagrams:\n*   AWS Architecture Patterns\n*   User Journey Maps\n*   Database Schemas\n*   Organizational Charts\n\n### 2. Design System / Visuals\nAccess a library of assets to enhance your diagram:\n*   **Wireframes**: Drag and drop low-fidelity UI components (Buttons, Inputs, Modals) to build quick mockups.\n*   **Icons**: Search and insert any icon as a standalone node.\n\n### 3. AI Copilot\nThe text input in the Command Center is your direct line to our AI engine. Type what you want to build, and hitting `Enter` generates it instantly.\n\n### 4. Layout & Tools\nQuickly access utility functions:\n*   **Auto Layout**: Re-organize the chaos.\n*   **Reset View**: Jump back to center.\n*   **Format Code**: Clean up your DSL.","src/content/docs/command-center.md","d05706312114690a",{"html":184,"metadata":185},"\u003Cp>The Command Center is the floating toolbar at the bottom of the screen. It’s the heart of FlowMind’s “keyboard-first” workflow.\u003C/p>\n\u003Cblockquote>\n\u003Cp>[!NOTE]\nOpen the Command Center anytime by pressing \u003Ccode dir=\"auto\">Cmd + K\u003C/code> (Mac) or \u003Ccode dir=\"auto\">Ctrl + K\u003C/code> (Windows).\u003C/p>\n\u003C/blockquote>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"features\">Features\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#features\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Features”\u003C/span>\u003C/a>\u003C/div>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"1-templates\">1. Templates\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#1-templates\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “1. Templates”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Don’t start from scratch. Access a library of pre-built diagrams:\u003C/p>\n\u003Cul>\n\u003Cli>AWS Architecture Patterns\u003C/li>\n\u003Cli>User Journey Maps\u003C/li>\n\u003Cli>Database Schemas\u003C/li>\n\u003Cli>Organizational Charts\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"2-design-system--visuals\">2. Design System / Visuals\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#2-design-system--visuals\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “2. Design System / Visuals”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Access a library of assets to enhance your diagram:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Wireframes\u003C/strong>: Drag and drop low-fidelity UI components (Buttons, Inputs, Modals) to build quick mockups.\u003C/li>\n\u003Cli>\u003Cstrong>Icons\u003C/strong>: Search and insert any icon as a standalone node.\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"3-ai-copilot\">3. AI Copilot\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#3-ai-copilot\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “3. AI Copilot”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>The text input in the Command Center is your direct line to our AI engine. Type what you want to build, and hitting \u003Ccode dir=\"auto\">Enter\u003C/code> generates it instantly.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"4-layout--tools\">4. Layout &#x26; Tools\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#4-layout--tools\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “4. Layout &#x26; Tools”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Quickly access utility functions:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Auto Layout\u003C/strong>: Re-organize the chaos.\u003C/li>\n\u003Cli>\u003Cstrong>Reset View\u003C/strong>: Jump back to center.\u003C/li>\n\u003Cli>\u003Cstrong>Format Code\u003C/strong>: Clean up your DSL.\u003C/li>\n\u003C/ul>",{"headings":186,"localImagePaths":202,"remoteImagePaths":203,"frontmatter":204,"imagePaths":205},[187,190,193,196,199],{"depth":29,"slug":188,"text":189},"features","Features",{"depth":36,"slug":191,"text":192},"1-templates","1. Templates",{"depth":36,"slug":194,"text":195},"2-design-system--visuals","2. Design System / Visuals",{"depth":36,"slug":197,"text":198},"3-ai-copilot","3. AI Copilot",{"depth":36,"slug":200,"text":201},"4-layout--tools","4. Layout & Tools",[],[],{"draft":19,"title":176},[],"exporting",{"id":206,"data":208,"body":213,"filePath":214,"digest":215,"rendered":216},{"title":209,"editUrl":15,"head":210,"template":17,"sidebar":211,"pagefind":15,"draft":19},"Exporting",[],{"hidden":19,"attrs":212},{},"FlowMind offers a wide range of export options to help you use your diagrams in presentations, documentation, or other external tools.\n\n> [!TIP]\n> All export options are available via the **\"Export\"** button in the top right corner of the toolbar.\n\n## Image Exports\n\nPerfect for slides, documents, or sharing on Slack.\n\n### PNG (Portable Network Graphics)\nExports a high-resolution, pixel-based image of your current flow.\n*   **Best for**: Slides, Web, General Sharing.\n*   **Settings**: Includes transparency by default if enabled in settings.\n\n### JPEG (Joint Photographic Experts Group)\nExports a compressed image file.\n*   **Best for**: Email attachments, situations where file size matters.\n*   **Note**: Does not support transparency (background will be white).\n\n## Data & Code Exports\n\nFlowMind is a \"Diagram-as-Code\" tool, so we treat your diagram data as a first-class citizen.\n\n### JSON (FlowMind Native)\nDownloads the raw `.json` file containing all node positions, styles, and data.\n*   **Best for**: Backups, Version Control, Sharing editable files with other FlowMind users.\n\n### FlowMind DSL\nCopies the simplified Domain Specific Language (DSL) representation to your clipboard.\n*   **Best for**: Storing diagram logic in your codebase comments or generating similar flows via AI.\n\n### Mermaid.js\nConverts your current diagram into [Mermaid](https://mermaid.js.org/) syntax and copies it to the clipboard.\n*   **Best for**: Embedding diagrams in GitHub `README.md` files, Notion, or Obsidian.\n*   **Supported**: Basic Flowcharts, Sequence Diagrams.\n\n### PlantUML\nCopies the PlantUML representation of your diagram.\n*   **Best for**: Enterprise wikis (Confluence) or legacy documentation systems.\n\n### Figma\nCopies a vector representation compatible with Figma's paste format.\n*   **Best for**: Handing off diagrams to designers for high-fidelity polishing.\n\n> [!WARNING]\n> Figma export is experimental. Complex custom nodes may not transfer 100% perfectly.","src/content/docs/exporting.md","c82101b5ec898f30",{"html":217,"metadata":218},"\u003Cp>FlowMind offers a wide range of export options to help you use your diagrams in presentations, documentation, or other external tools.\u003C/p>\n\u003Cblockquote>\n\u003Cp>[!TIP]\nAll export options are available via the \u003Cstrong>“Export”\u003C/strong> button in the top right corner of the toolbar.\u003C/p>\n\u003C/blockquote>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"image-exports\">Image Exports\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#image-exports\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Image Exports”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Perfect for slides, documents, or sharing on Slack.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"png-portable-network-graphics\">PNG (Portable Network Graphics)\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#png-portable-network-graphics\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “PNG (Portable Network Graphics)”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Exports a high-resolution, pixel-based image of your current flow.\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Best for\u003C/strong>: Slides, Web, General Sharing.\u003C/li>\n\u003Cli>\u003Cstrong>Settings\u003C/strong>: Includes transparency by default if enabled in settings.\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"jpeg-joint-photographic-experts-group\">JPEG (Joint Photographic Experts Group)\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#jpeg-joint-photographic-experts-group\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “JPEG (Joint Photographic Experts Group)”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Exports a compressed image file.\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Best for\u003C/strong>: Email attachments, situations where file size matters.\u003C/li>\n\u003Cli>\u003Cstrong>Note\u003C/strong>: Does not support transparency (background will be white).\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"data--code-exports\">Data &#x26; Code Exports\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#data--code-exports\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Data &#x26; Code Exports”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>FlowMind is a “Diagram-as-Code” tool, so we treat your diagram data as a first-class citizen.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"json-flowmind-native\">JSON (FlowMind Native)\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#json-flowmind-native\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “JSON (FlowMind Native)”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Downloads the raw \u003Ccode dir=\"auto\">.json\u003C/code> file containing all node positions, styles, and data.\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Best for\u003C/strong>: Backups, Version Control, Sharing editable files with other FlowMind users.\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"flowmind-dsl\">FlowMind DSL\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#flowmind-dsl\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “FlowMind DSL”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Copies the simplified Domain Specific Language (DSL) representation to your clipboard.\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Best for\u003C/strong>: Storing diagram logic in your codebase comments or generating similar flows via AI.\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"mermaidjs\">Mermaid.js\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#mermaidjs\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Mermaid.js”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Converts your current diagram into \u003Ca href=\"https://mermaid.js.org/\">Mermaid\u003C/a> syntax and copies it to the clipboard.\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Best for\u003C/strong>: Embedding diagrams in GitHub \u003Ccode dir=\"auto\">README.md\u003C/code> files, Notion, or Obsidian.\u003C/li>\n\u003Cli>\u003Cstrong>Supported\u003C/strong>: Basic Flowcharts, Sequence Diagrams.\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"plantuml\">PlantUML\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#plantuml\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “PlantUML”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Copies the PlantUML representation of your diagram.\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Best for\u003C/strong>: Enterprise wikis (Confluence) or legacy documentation systems.\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"figma\">Figma\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#figma\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Figma”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Copies a vector representation compatible with Figma’s paste format.\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Best for\u003C/strong>: Handing off diagrams to designers for high-fidelity polishing.\u003C/li>\n\u003C/ul>\n\u003Cblockquote>\n\u003Cp>[!WARNING]\nFigma export is experimental. Complex custom nodes may not transfer 100% perfectly.\u003C/p>\n\u003C/blockquote>",{"headings":219,"localImagePaths":247,"remoteImagePaths":248,"frontmatter":249,"imagePaths":250},[220,223,226,229,232,235,238,241,244],{"depth":29,"slug":221,"text":222},"image-exports","Image Exports",{"depth":36,"slug":224,"text":225},"png-portable-network-graphics","PNG (Portable Network Graphics)",{"depth":36,"slug":227,"text":228},"jpeg-joint-photographic-experts-group","JPEG (Joint Photographic Experts Group)",{"depth":29,"slug":230,"text":231},"data--code-exports","Data & Code Exports",{"depth":36,"slug":233,"text":234},"json-flowmind-native","JSON (FlowMind Native)",{"depth":36,"slug":236,"text":237},"flowmind-dsl","FlowMind DSL",{"depth":36,"slug":239,"text":240},"mermaidjs","Mermaid.js",{"depth":36,"slug":242,"text":243},"plantuml","PlantUML",{"depth":36,"slug":245,"text":246},"figma","Figma",[],[],{"draft":19,"title":209},[],"introduction",{"id":251,"data":253,"body":258,"filePath":259,"digest":260,"rendered":261},{"title":254,"editUrl":15,"head":255,"template":17,"sidebar":256,"pagefind":15,"draft":19},"Introduction",[],{"hidden":19,"attrs":257},{},"**OpenFlowKit** is a next-generation diagramming tool that bridges the gap between AI-generated visualization and precise, code-based editing. Designed for developers, architects, and product managers, OpenFlowKit allows you to create complex flowcharts, sequence diagrams, and system architectures using natural language or our specialized DSL.\n\n## Why OpenFlowKit?\n\nTraditional diagramming tools often force a choice between:\n1.  **Drag-and-drop tools**: Easy to start, but hard to maintain and version control.\n2.  **Code-based tools (like Mermaid)**: Great for versioning, but can be tedious to write from scratch.\n\nFlowMind gives you the best of both worlds. You can start with a text prompt to generate an initial structure, then refine it using our **Hybrid Editor**—manipulating nodes visually on the canvas *or* editing the underlying code directly.\n\n## Key Features\n\n### AI-Powered Generation\nSimply describe your system: *\"Create a login flow with OAuth fallback and error handling.\"* FlowMind's Gemini integration scaffolds the entire diagram effectively instantly.\n\n### Hybrid Canvas\nOur canvas isn't just a static image. It's a fully interactive graph environment.\n*   **Drag & Drop**: Move nodes, auto-snap alignment.\n*   **Smart Layouts**: One-click re-organization using Elk.js.\n*   **Properties Panel**: Fine-tune specific node styling without touching CSS.\n\n### Diagram-as-Code\nEvery diagram is backed by a readable, editable JSON structure and compatible with Mermaid.js syntax. This means your documentation can live alongside your code.\n\n### Premium Aesthetics\nBuilt with a \"Design First\" code, FlowMind diagrams are presentation-ready by default. No more ugly, default-grey boxes.\n\n## Next Steps\n\nReady to get started?\n\n*   Check out the [Quick Start](/docs/quick-start) guide to build your first flow.\n*   Learn about the [Canvas Basics](/docs/canvas-basics).\n*   Master the [OpenFlow DSL](/docs/openflow-dsl).","src/content/docs/introduction.md","c51ee361c0cdb381",{"html":262,"metadata":263},"\u003Cp>\u003Cstrong>OpenFlowKit\u003C/strong> is a next-generation diagramming tool that bridges the gap between AI-generated visualization and precise, code-based editing. Designed for developers, architects, and product managers, OpenFlowKit allows you to create complex flowcharts, sequence diagrams, and system architectures using natural language or our specialized DSL.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"why-openflowkit\">Why OpenFlowKit?\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#why-openflowkit\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Why OpenFlowKit?”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Traditional diagramming tools often force a choice between:\u003C/p>\n\u003Col>\n\u003Cli>\u003Cstrong>Drag-and-drop tools\u003C/strong>: Easy to start, but hard to maintain and version control.\u003C/li>\n\u003Cli>\u003Cstrong>Code-based tools (like Mermaid)\u003C/strong>: Great for versioning, but can be tedious to write from scratch.\u003C/li>\n\u003C/ol>\n\u003Cp>FlowMind gives you the best of both worlds. You can start with a text prompt to generate an initial structure, then refine it using our \u003Cstrong>Hybrid Editor\u003C/strong>—manipulating nodes visually on the canvas \u003Cem>or\u003C/em> editing the underlying code directly.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"key-features\">Key Features\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#key-features\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Key Features”\u003C/span>\u003C/a>\u003C/div>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"ai-powered-generation\">AI-Powered Generation\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#ai-powered-generation\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “AI-Powered Generation”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Simply describe your system: \u003Cem>“Create a login flow with OAuth fallback and error handling.”\u003C/em> FlowMind’s Gemini integration scaffolds the entire diagram effectively instantly.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"hybrid-canvas\">Hybrid Canvas\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#hybrid-canvas\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Hybrid Canvas”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Our canvas isn’t just a static image. It’s a fully interactive graph environment.\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Drag &#x26; Drop\u003C/strong>: Move nodes, auto-snap alignment.\u003C/li>\n\u003Cli>\u003Cstrong>Smart Layouts\u003C/strong>: One-click re-organization using Elk.js.\u003C/li>\n\u003Cli>\u003Cstrong>Properties Panel\u003C/strong>: Fine-tune specific node styling without touching CSS.\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"diagram-as-code\">Diagram-as-Code\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#diagram-as-code\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Diagram-as-Code”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Every diagram is backed by a readable, editable JSON structure and compatible with Mermaid.js syntax. This means your documentation can live alongside your code.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"premium-aesthetics\">Premium Aesthetics\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#premium-aesthetics\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Premium Aesthetics”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Built with a “Design First” code, FlowMind diagrams are presentation-ready by default. No more ugly, default-grey boxes.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"next-steps\">Next Steps\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#next-steps\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Next Steps”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Ready to get started?\u003C/p>\n\u003Cul>\n\u003Cli>Check out the \u003Ca href=\"/docs/quick-start\">Quick Start\u003C/a> guide to build your first flow.\u003C/li>\n\u003Cli>Learn about the \u003Ca href=\"/docs/canvas-basics\">Canvas Basics\u003C/a>.\u003C/li>\n\u003Cli>Master the \u003Ca href=\"/docs/openflow-dsl\">OpenFlow DSL\u003C/a>.\u003C/li>\n\u003C/ul>",{"headings":264,"localImagePaths":286,"remoteImagePaths":287,"frontmatter":288,"imagePaths":289},[265,268,271,274,277,280,283],{"depth":29,"slug":266,"text":267},"why-openflowkit","Why OpenFlowKit?",{"depth":29,"slug":269,"text":270},"key-features","Key Features",{"depth":36,"slug":272,"text":273},"ai-powered-generation","AI-Powered Generation",{"depth":36,"slug":275,"text":276},"hybrid-canvas","Hybrid Canvas",{"depth":36,"slug":278,"text":279},"diagram-as-code","Diagram-as-Code",{"depth":36,"slug":281,"text":282},"premium-aesthetics","Premium Aesthetics",{"depth":29,"slug":284,"text":285},"next-steps","Next Steps",[],[],{"draft":19,"title":254},[],"mermaid-integration",{"id":290,"data":292,"body":297,"filePath":298,"digest":299,"rendered":300},{"title":293,"editUrl":15,"head":294,"template":17,"sidebar":295,"pagefind":15,"draft":19},"Mermaid Integration",[],{"hidden":19,"attrs":296},{},"FlowMind maintains high compatibility with [Mermaid.js](https://mermaid.js.org/), the industry standard for diagram-as-code.\n\n## Importing Mermaid\n\nYou can paste existing Mermaid code directly into FlowMind.\n\n1.  Click the **\"Import\"** button in the toolbar.\n2.  Select **\"Mermaid\"**.\n3.  Paste your code snippet.\n\n### Supported Diagram Types\nCurrently, FlowMind optimizes for:\n*   **Flowcharts** (`graph TD`, `graph LR`)\n*   **Sequence Diagrams** (Partial support via conversion)\n\n```mermaid\ngraph TD\n    A[Start] --> B{Is it working?}\n    B -- Yes --> C[Great!]\n    B -- No --> D[Debug]\n```\n\n## Exporting to Mermaid\n\nYou can also export any FlowMind diagram *back* to Mermaid syntax.\nThis is perfect for embedding diagrams in GitHub `README.md` files or Notion documents.\n\n1.  Open the **Code Panel** (bottom panel).\n2.  Switch to the **\"Mermaid\"** tab.\n3.  Copy the generated code.","src/content/docs/mermaid-integration.md","e5e04608cc88e2fa",{"html":301,"metadata":302},"\u003Cp>FlowMind maintains high compatibility with \u003Ca href=\"https://mermaid.js.org/\">Mermaid.js\u003C/a>, the industry standard for diagram-as-code.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"importing-mermaid\">Importing Mermaid\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#importing-mermaid\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Importing Mermaid”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>You can paste existing Mermaid code directly into FlowMind.\u003C/p>\n\u003Col>\n\u003Cli>Click the \u003Cstrong>“Import”\u003C/strong> button in the toolbar.\u003C/li>\n\u003Cli>Select \u003Cstrong>“Mermaid”\u003C/strong>.\u003C/li>\n\u003Cli>Paste your code snippet.\u003C/li>\n\u003C/ol>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"supported-diagram-types\">Supported Diagram Types\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#supported-diagram-types\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Supported Diagram Types”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Currently, FlowMind optimizes for:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Flowcharts\u003C/strong> (\u003Ccode dir=\"auto\">graph TD\u003C/code>, \u003Ccode dir=\"auto\">graph LR\u003C/code>)\u003C/li>\n\u003Cli>\u003Cstrong>Sequence Diagrams\u003C/strong> (Partial support via conversion)\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"expressive-code\">\u003Clink rel=\"stylesheet\" href=\"/_astro/ec.v4551.css\">\u003Cscript type=\"module\" src=\"/_astro/ec.0vx5m.js\">\u003C/script>\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"mermaid\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">graph TD\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">    \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">A[Start] --> B{Is it working?}\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">    \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">B -- Yes --> C[Great!]\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">    \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">B -- No --> D[Debug]\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"graph TD    A[Start] --> B{Is it working?}    B -- Yes --> C[Great!]    B -- No --> D[Debug]\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"exporting-to-mermaid\">Exporting to Mermaid\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#exporting-to-mermaid\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Exporting to Mermaid”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>You can also export any FlowMind diagram \u003Cem>back\u003C/em> to Mermaid syntax.\nThis is perfect for embedding diagrams in GitHub \u003Ccode dir=\"auto\">README.md\u003C/code> files or Notion documents.\u003C/p>\n\u003Col>\n\u003Cli>Open the \u003Cstrong>Code Panel\u003C/strong> (bottom panel).\u003C/li>\n\u003Cli>Switch to the \u003Cstrong>“Mermaid”\u003C/strong> tab.\u003C/li>\n\u003Cli>Copy the generated code.\u003C/li>\n\u003C/ol>",{"headings":303,"localImagePaths":313,"remoteImagePaths":314,"frontmatter":315,"imagePaths":316},[304,307,310],{"depth":29,"slug":305,"text":306},"importing-mermaid","Importing Mermaid",{"depth":36,"slug":308,"text":309},"supported-diagram-types","Supported Diagram Types",{"depth":29,"slug":311,"text":312},"exporting-to-mermaid","Exporting to Mermaid",[],[],{"draft":19,"title":293},[],"mermaid-vs-openflow",{"id":317,"data":319,"body":324,"filePath":325,"digest":326,"rendered":327},{"title":320,"editUrl":15,"head":321,"template":17,"sidebar":322,"pagefind":15,"draft":19},"Mermaid vs OpenFlow",[],{"hidden":19,"attrs":323},{},"# Mermaid.js vs OpenFlowKit\n\nMermaid.js is an incredible text-based diagramming tool that has become the standard for markdown-based documentation. However, when you need a presentation-ready, highly interactive canvas, raw Mermaid can sometimes feel limiting.\n\nThis is why **OpenFlowKit is built on top of Mermaid.js**, giving you the best of both worlds: Diagram-as-code speed with visual-editor polish.\n\n## 1. Aesthetics and Branding\n\n**Mermaid.js:**\n- Renders SVGs based on predefined themes (default, dark, forest, neutral).\n- Customizing styles requires inline CSS classes, which can clutter your markdown.\n\n**OpenFlowKit:**\n- Features a full **White-Label Design System**.\n- You can inject [Theming](/docs/en/theming) tokens dynamically (colors, corner radii, fonts).\n- Nodes automatically adopt glassmorphism, shadows, and modern UI treatments without writing a single line of CSS.\n\n## 2. Interaction and Editing\n\n**Mermaid.js:**\n- Strictly code-in, diagram-out. To move a node, you rewrite the code.\n- Layouts are handled automatically by Dagre, which is great but offers zero manual control if a line routes awkwardly.\n\n**OpenFlowKit:**\n- **Two-Way Sync**: Write code and watch the canvas update, *or* drag a node on the canvas and watch the code update automatically. \n- You get full drag-and-drop capabilities, manual edge routing, and [Smart Layouts](/docs/en/smart-layout) via ELK.js.\n\n## 3. Export Options\n\n**Mermaid.js:**\n- Typically exports as SVG or PNG via a CLI or browser extension.\n\n**OpenFlowKit:**\n- Native [Exporting](/docs/en/exporting) to SVG, high-res PNG/JPG.\n- **Figma Editable**: OpenFlowKit can export diagrams directly to your clipboard in a format that pastes into Figma as native, editable vector layers and text objects.\n\n## 4. Artificial Intelligence\n\nWhile AI can write Mermaid syntax, iterating on it is difficult.\n\n**OpenFlowKit:**\n- Integrated [Flowpilot AI](/docs/en/ask-flowpilot) directly into the [Command Center](/docs/en/command-center).\n- You can prompt the AI, generate the canvas, and then manually adjust the final 10% visually instead of trying to perfectly craft a prompt to fix a misaligned node.\n- Supports **BYOK (Bring Your Own Key)** for 7 different AI providers.\n\n## Direct Compatibility\n\nWe love Mermaid. That is why OpenFlowKit has a native [Mermaid Integration](/docs/en/mermaid-integration). You can paste any existing Mermaid flowchart or state diagram into OpenFlowKit, and it will instantly convert it into editable, styled React Flow nodes.\n\nTry converting your Mermaid diagrams today in the [Editor](/#/canvas).","src/content/docs/mermaid-vs-openflow.md","56ab5fb5e741bb01",{"html":328,"metadata":329},"\u003Cdiv class=\"sl-heading-wrapper level-h1\">\u003Ch1 id=\"mermaidjs-vs-openflowkit\">Mermaid.js vs OpenFlowKit\u003C/h1>\u003Ca class=\"sl-anchor-link\" href=\"#mermaidjs-vs-openflowkit\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Mermaid.js vs OpenFlowKit”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Mermaid.js is an incredible text-based diagramming tool that has become the standard for markdown-based documentation. However, when you need a presentation-ready, highly interactive canvas, raw Mermaid can sometimes feel limiting.\u003C/p>\n\u003Cp>This is why \u003Cstrong>OpenFlowKit is built on top of Mermaid.js\u003C/strong>, giving you the best of both worlds: Diagram-as-code speed with visual-editor polish.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"1-aesthetics-and-branding\">1. Aesthetics and Branding\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#1-aesthetics-and-branding\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “1. Aesthetics and Branding”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>\u003Cstrong>Mermaid.js:\u003C/strong>\u003C/p>\n\u003Cul>\n\u003Cli>Renders SVGs based on predefined themes (default, dark, forest, neutral).\u003C/li>\n\u003Cli>Customizing styles requires inline CSS classes, which can clutter your markdown.\u003C/li>\n\u003C/ul>\n\u003Cp>\u003Cstrong>OpenFlowKit:\u003C/strong>\u003C/p>\n\u003Cul>\n\u003Cli>Features a full \u003Cstrong>White-Label Design System\u003C/strong>.\u003C/li>\n\u003Cli>You can inject \u003Ca href=\"/docs/en/theming\">Theming\u003C/a> tokens dynamically (colors, corner radii, fonts).\u003C/li>\n\u003Cli>Nodes automatically adopt glassmorphism, shadows, and modern UI treatments without writing a single line of CSS.\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"2-interaction-and-editing\">2. Interaction and Editing\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#2-interaction-and-editing\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “2. Interaction and Editing”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>\u003Cstrong>Mermaid.js:\u003C/strong>\u003C/p>\n\u003Cul>\n\u003Cli>Strictly code-in, diagram-out. To move a node, you rewrite the code.\u003C/li>\n\u003Cli>Layouts are handled automatically by Dagre, which is great but offers zero manual control if a line routes awkwardly.\u003C/li>\n\u003C/ul>\n\u003Cp>\u003Cstrong>OpenFlowKit:\u003C/strong>\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Two-Way Sync\u003C/strong>: Write code and watch the canvas update, \u003Cem>or\u003C/em> drag a node on the canvas and watch the code update automatically.\u003C/li>\n\u003Cli>You get full drag-and-drop capabilities, manual edge routing, and \u003Ca href=\"/docs/en/smart-layout\">Smart Layouts\u003C/a> via ELK.js.\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"3-export-options\">3. Export Options\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#3-export-options\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “3. Export Options”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>\u003Cstrong>Mermaid.js:\u003C/strong>\u003C/p>\n\u003Cul>\n\u003Cli>Typically exports as SVG or PNG via a CLI or browser extension.\u003C/li>\n\u003C/ul>\n\u003Cp>\u003Cstrong>OpenFlowKit:\u003C/strong>\u003C/p>\n\u003Cul>\n\u003Cli>Native \u003Ca href=\"/docs/en/exporting\">Exporting\u003C/a> to SVG, high-res PNG/JPG.\u003C/li>\n\u003Cli>\u003Cstrong>Figma Editable\u003C/strong>: OpenFlowKit can export diagrams directly to your clipboard in a format that pastes into Figma as native, editable vector layers and text objects.\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"4-artificial-intelligence\">4. Artificial Intelligence\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#4-artificial-intelligence\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “4. Artificial Intelligence”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>While AI can write Mermaid syntax, iterating on it is difficult.\u003C/p>\n\u003Cp>\u003Cstrong>OpenFlowKit:\u003C/strong>\u003C/p>\n\u003Cul>\n\u003Cli>Integrated \u003Ca href=\"/docs/en/ask-flowpilot\">Flowpilot AI\u003C/a> directly into the \u003Ca href=\"/docs/en/command-center\">Command Center\u003C/a>.\u003C/li>\n\u003Cli>You can prompt the AI, generate the canvas, and then manually adjust the final 10% visually instead of trying to perfectly craft a prompt to fix a misaligned node.\u003C/li>\n\u003Cli>Supports \u003Cstrong>BYOK (Bring Your Own Key)\u003C/strong> for 7 different AI providers.\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"direct-compatibility\">Direct Compatibility\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#direct-compatibility\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Direct Compatibility”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>We love Mermaid. That is why OpenFlowKit has a native \u003Ca href=\"/docs/en/mermaid-integration\">Mermaid Integration\u003C/a>. You can paste any existing Mermaid flowchart or state diagram into OpenFlowKit, and it will instantly convert it into editable, styled React Flow nodes.\u003C/p>\n\u003Cp>Try converting your Mermaid diagrams today in the \u003Ca href=\"/#/canvas\">Editor\u003C/a>.\u003C/p>",{"headings":330,"localImagePaths":349,"remoteImagePaths":350,"frontmatter":351,"imagePaths":352},[331,334,337,340,343,346],{"depth":67,"slug":332,"text":333},"mermaidjs-vs-openflowkit","Mermaid.js vs OpenFlowKit",{"depth":29,"slug":335,"text":336},"1-aesthetics-and-branding","1. Aesthetics and Branding",{"depth":29,"slug":338,"text":339},"2-interaction-and-editing","2. Interaction and Editing",{"depth":29,"slug":341,"text":342},"3-export-options","3. Export Options",{"depth":29,"slug":344,"text":345},"4-artificial-intelligence","4. Artificial Intelligence",{"depth":29,"slug":347,"text":348},"direct-compatibility","Direct Compatibility",[],[],{"draft":19,"title":320},[],"node-types",{"id":353,"data":355,"body":360,"filePath":361,"digest":362,"rendered":363},{"title":356,"editUrl":15,"head":357,"template":17,"sidebar":358,"pagefind":15,"draft":19},"Node Types",[],{"hidden":19,"attrs":359},{},"FlowMind supports several specialized node types to handle different diagramming needs.\n\n## 1. Custom Node (Default)\n\nThe workhorse of your diagrams. It supports a title, an optional icon, and rich connection handles.\n*   **Best for**: Process steps, services, database tables, or general entities.\n*   **Features**: Resizable, editable label, support for icons.\n\n## 2. Text Node / Annotation\n\nA lightweight, borderless node used for adding comments or labels to the canvas without affecting the flow structure.\n*   **Best for**: Adding sticky notes, section headers, or explanatory text.\n*   **Usage**: Select \"Text\" from the toolbar or press \\`T\\`.\n\n## 3. Group Node\n\nContainer nodes that visually group other nodes together. Moving a group moves all nodes inside it.\n*   **Best for**: Visualizing sub-systems, VPCs, or logical boundaries.\n*   **Usage**: Select nodes -> Right Click -> \"Group Selection\".\n\n## 4. Swimlane Node\n\nVertical or horizontal lanes to organize processes by actor or department.\n*   **Best for**: Cross-functional flowcharts.\n\n## 5. Image Node\n\nEmbed arbitrary images directly onto the canvas.\n*   **Best for**: Adding logos, screenshots, or reference diagrams.\n*   **Usage**: Drag and drop an image file directly onto the canvas.","src/content/docs/node-types.md","4d34e08a385b3dd4",{"html":364,"metadata":365},"\u003Cp>FlowMind supports several specialized node types to handle different diagramming needs.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"1-custom-node-default\">1. Custom Node (Default)\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#1-custom-node-default\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “1. Custom Node (Default)”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>The workhorse of your diagrams. It supports a title, an optional icon, and rich connection handles.\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Best for\u003C/strong>: Process steps, services, database tables, or general entities.\u003C/li>\n\u003Cli>\u003Cstrong>Features\u003C/strong>: Resizable, editable label, support for icons.\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"2-text-node--annotation\">2. Text Node / Annotation\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#2-text-node--annotation\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “2. Text Node / Annotation”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>A lightweight, borderless node used for adding comments or labels to the canvas without affecting the flow structure.\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Best for\u003C/strong>: Adding sticky notes, section headers, or explanatory text.\u003C/li>\n\u003Cli>\u003Cstrong>Usage\u003C/strong>: Select “Text” from the toolbar or press `T`.\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"3-group-node\">3. Group Node\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#3-group-node\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “3. Group Node”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Container nodes that visually group other nodes together. Moving a group moves all nodes inside it.\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Best for\u003C/strong>: Visualizing sub-systems, VPCs, or logical boundaries.\u003C/li>\n\u003Cli>\u003Cstrong>Usage\u003C/strong>: Select nodes -> Right Click -> “Group Selection”.\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"4-swimlane-node\">4. Swimlane Node\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#4-swimlane-node\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “4. Swimlane Node”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Vertical or horizontal lanes to organize processes by actor or department.\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Best for\u003C/strong>: Cross-functional flowcharts.\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"5-image-node\">5. Image Node\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#5-image-node\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “5. Image Node”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Embed arbitrary images directly onto the canvas.\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Best for\u003C/strong>: Adding logos, screenshots, or reference diagrams.\u003C/li>\n\u003Cli>\u003Cstrong>Usage\u003C/strong>: Drag and drop an image file directly onto the canvas.\u003C/li>\n\u003C/ul>",{"headings":366,"localImagePaths":382,"remoteImagePaths":383,"frontmatter":384,"imagePaths":385},[367,370,373,376,379],{"depth":29,"slug":368,"text":369},"1-custom-node-default","1. Custom Node (Default)",{"depth":29,"slug":371,"text":372},"2-text-node--annotation","2. Text Node / Annotation",{"depth":29,"slug":374,"text":375},"3-group-node","3. Group Node",{"depth":29,"slug":377,"text":378},"4-swimlane-node","4. Swimlane Node",{"depth":29,"slug":380,"text":381},"5-image-node","5. Image Node",[],[],{"draft":19,"title":356},[],"openflow-dsl",{"id":386,"data":388,"body":393,"filePath":394,"digest":395,"rendered":396},{"title":389,"editUrl":15,"head":390,"template":17,"sidebar":391,"pagefind":15,"draft":19},"OpenFlow DSL",[],{"hidden":19,"attrs":392},{},"# 🧠 FlowMind DSL Syntax Guide (V2)\n\nFlowMind uses a clean, human-readable DSL to define diagrams using text.\nVersion 2 introduces:\n\n* Explicit node IDs\n* Styling attributes\n* Groups / containers\n* Edge customization\n\n---\n\n# 1️⃣ Document Header\n\nEvery DSL file can begin with optional metadata:\n\n```yaml\nflow: \"My Awesome Workflow\"\ndirection: TB\n```\n\n### Fields\n\n| Field       | Description                                                    |\n| ----------- | -------------------------------------------------------------- |\n| `flow`      | Title of the diagram                                           |\n| `direction` | Layout direction: `TB` (Top to Bottom) or `LR` (Left to Right) |\n\n---\n\n# 2️⃣ Nodes\n\nNodes define diagram elements.\n\n## Basic Syntax\n\n```\n[start] Start Process\n[process] Handle Request\n[end] End Process\n```\n\n---\n\n## With Explicit IDs\n\nUseful for clarity, especially in large flows.\n\n```\n[start] start: Start Process\n[process] proc1: Handle Request\n[end] end: End Process\n\nstart -> proc1\nproc1 -> end\n```\n\n---\n\n## With Attributes\n\nAttributes use JSON-like syntax:\n\n```\n[process] p1: Critical Step { color: \"red\", icon: \"alert-triangle\" }\n[system] db: Database { icon: \"database\" }\n```\n\n### Attribute Examples\n\n| Attribute | Purpose               |\n| --------- | --------------------- |\n| `color`   | Override node color   |\n| `icon`    | Add icon              |\n| `style`   | Custom style modifier |\n\n---\n\n## Supported Node Types\n\n| DSL Type    | Shape             | Default Color |\n| ----------- | ----------------- | ------------- |\n| `start`     | Capsule           | Emerald       |\n| `end`       | Capsule           | Red           |\n| `process`   | Rounded rectangle | Slate         |\n| `decision`  | Diamond           | Amber         |\n| `system`    | Custom node       | Violet        |\n| `note`      | Sticky note       | Yellow        |\n| `section`   | Group container   | Blue          |\n| `container` | Generic group     | Gray          |\n\nIf a node is referenced in a connection but not declared, it defaults to `process`.\n\n---\n\n# 3️⃣ Edges (Connections)\n\nConnections define flow between nodes.\n\n## Basic Connection\n\n```\nStart Process -> Handle Request\n```\n\n---\n\n## Edge Types\n\n| Symbol | Meaning     |\n| ------ | ----------- |\n| `->`   | Solid line  |\n| `-->`  | Curved line |\n| `..>`  | Dashed line |\n| `==>`  | Thick line  |\n\nExample:\n\n```\nA ..> B\nC ==> D\n```\n\n---\n\n## Labeled Connections\n\nUse pipes:\n\n```\nIs Valid? ->|Yes| Save Data\nIs Valid? ->|No| Return Error\n```\n\n---\n\n## Edge Attributes\n\n```\nA -> B { style: \"dashed\", label: \"Async\" }\n```\n\n---\n\n# 4️⃣ Groups\n\nUse `group` to cluster nodes.\n\n```\ngroup \"Backend Services\" {\n    [process] api: API Server\n    [system] db: Database\n    api -> db\n}\n```\n\nGroups help visually separate logical areas.\n\n---\n\n# 5️⃣ Comments\n\nLines starting with `#` are ignored.\n\n```\n# This is a comment\n[start] Begin\n```\n\n---\n\n# ✅ Complete Example\n\n```yaml\nflow: \"User Login Flow\"\ndirection: TB\n\n# Define Nodes\n[start] user: User\n[process] login: Login Page { icon: \"log-in\" }\n\ngroup \"Authentication\" {\n    [system] auth: Auth Service\n    [decision] check: Is Valid?\n}\n\n[end] dash: Dashboard\n[end] err: Error\n\n# Define Logic\nuser -> login\nlogin -> auth\nauth -> check\n\ncheck ->|Yes| dash { color: \"green\" }\ncheck ->|No| err { color: \"red\", style: \"dashed\" }\n```\n\n---\n\n# 🤖 LLM Agent Prompt Template\n\nIf someone wants to generate FlowMind DSL using an LLM agent, they can paste the following prompt:\n\n---\n\n## Copy-Paste Prompt for LLM\n\n```\nYou are an expert FlowMind DSL V2 generator.\n\nYour job is to convert a user's workflow description into valid FlowMind DSL.\n\nYou must strictly follow the FlowMind DSL V2 specification defined below.\n\n========================================\nFLOWMIND DSL V2 SPECIFICATION\n========================================\n\n1. DOCUMENT HEADER (Required)\n\nEvery output MUST begin with:\n\nflow: \"Title Here\"\ndirection: TB or LR\n\nRules:\n- Always generate a meaningful title.\n- Default to TB unless user clearly needs horizontal layout.\n\n----------------------------------------\n\n2. NODE DECLARATION RULES\n\nNode syntax:\n\n[type] id: Label { optional_attributes }\n\nExample:\n[process] p1: Handle Request\n[decision] d1: Is Valid? { icon: \"help-circle\" }\n\nRules:\n- ALWAYS use explicit IDs.\n- IDs must be short, lowercase, no spaces.\n- IDs must be unique.\n- Use semantic naming (start, login, checkAuth, db, etc).\n- Do NOT reuse labels as IDs.\n- Do NOT skip node declarations.\n\nIf a node is referenced in a connection, it MUST be declared first.\n\n----------------------------------------\n\n3. SUPPORTED NODE TYPES\n\nUse ONLY these types:\n\nstart\nend\nprocess\ndecision\nsystem\nnote\nsection\ncontainer\n\nGuidelines:\n\nstart      → beginning of flow\nend        → termination states\nprocess    → actions or steps\ndecision   → branching logic\nsystem     → external system/service/database\nnote       → annotations\nsection    → major grouped area\ncontainer  → generic grouping\n\n----------------------------------------\n\n4. NODE ATTRIBUTES (Optional)\n\nAttributes use JSON-like syntax:\n\n{ color: \"red\", icon: \"database\", style: \"dashed\" }\n\nRules:\n- Only add attributes if meaningful.\n- Keep styling minimal.\n- Do not invent unsupported properties.\n\n----------------------------------------\n\n5. EDGES (CONNECTIONS)\n\nBasic syntax:\nid1 -> id2\n\nEdge types:\n->   solid\n-->  curved\n..>  dashed\n==>  thick\n\nLabeled edges:\nid1 ->|Yes| id2\n\nEdge with attributes:\nid1 -> id2 { label: \"Async\", style: \"dashed\" }\n\nRules:\n- Always connect using IDs, not labels.\n- Decision nodes MUST use labeled edges.\n- Every branch from a decision must be explicit.\n- No floating nodes.\n\n----------------------------------------\n\n6. GROUPS\n\nUse grouping when logical clustering exists.\n\nSyntax:\n\ngroup \"Group Name\" {\n    node declarations\n    internal connections\n}\n\nRules:\n- Groups should wrap related nodes only.\n- Connections across groups should be declared outside the group block.\n\n----------------------------------------\n\n7. COMMENTS\n\nUse # for comments sparingly.\nDo not over-comment.\n\n----------------------------------------\n\n8. OUTPUT RULES (STRICT)\n\nYou MUST:\n\n- Output ONLY valid FlowMind DSL\n- Do NOT explain\n- Do NOT use markdown formatting\n- Do NOT wrap in code blocks\n- Do NOT add commentary\n- Do NOT describe what you are doing\n- Do NOT output anything except the DSL\n\nIf user description is vague:\n- Make reasonable assumptions\n- Choose logical structure\n- Keep flow clean and readable\n\n========================================\nLOGIC CONVERSION STRATEGY\n========================================\n\nWhen converting user input:\n\n1. Identify:\n   - Start event\n   - End states\n   - Actions\n   - Decisions\n   - External systems\n   - Logical clusters\n\n2. Convert:\n   - Events → start / end\n   - Actions → process\n   - Branching → decision\n   - Databases/APIs → system\n   - Parallel logic → separate branches\n   - Error paths → explicit end nodes\n\n3. Ensure:\n   - Every path leads to an end\n   - No orphan nodes\n   - Clean logical readability\n\n========================================\nUSER REQUEST\n========================================\n\nConvert the following workflow description into FlowMind DSL V2:\n\n{{USER_WORKFLOW_DESCRIPTION}}\n\nGenerate the DSL now.\n```\n\n---","src/content/docs/openflow-dsl.md","2f9ac96cd24eecfb",{"html":397,"metadata":398},"\u003Cdiv class=\"sl-heading-wrapper level-h1\">\u003Ch1 id=\"-flowmind-dsl-syntax-guide-v2\">🧠 FlowMind DSL Syntax Guide (V2)\u003C/h1>\u003Ca class=\"sl-anchor-link\" href=\"#-flowmind-dsl-syntax-guide-v2\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “🧠 FlowMind DSL Syntax Guide (V2)”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>FlowMind uses a clean, human-readable DSL to define diagrams using text.\nVersion 2 introduces:\u003C/p>\n\u003Cul>\n\u003Cli>Explicit node IDs\u003C/li>\n\u003Cli>Styling attributes\u003C/li>\n\u003Cli>Groups / containers\u003C/li>\n\u003Cli>Edge customization\u003C/li>\n\u003C/ul>\n\u003Chr>\n\u003Cdiv class=\"sl-heading-wrapper level-h1\">\u003Ch1 id=\"1️⃣-document-header\">1️⃣ Document Header\u003C/h1>\u003Ca class=\"sl-anchor-link\" href=\"#1️⃣-document-header\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “1️⃣ Document Header”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Every DSL file can begin with optional metadata:\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Clink rel=\"stylesheet\" href=\"/_astro/ec.v4551.css\">\u003Cscript type=\"module\" src=\"/_astro/ec.0vx5m.js\">\u003C/script>\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"yaml\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#7FDBCA;--1:#111111\">flow\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">My Awesome Workflow\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#7FDBCA;--1:#111111\">direction\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">: \u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">TB\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"flow: &#x22;My Awesome Workflow&#x22;direction: TB\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"fields\">Fields\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#fields\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Fields”\u003C/span>\u003C/a>\u003C/div>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>Field\u003C/th>\u003Cth>Description\u003C/th>\u003C/tr>\u003C/thead>\u003Ctbody>\u003Ctr>\u003Ctd>\u003Ccode dir=\"auto\">flow\u003C/code>\u003C/td>\u003Ctd>Title of the diagram\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Ccode dir=\"auto\">direction\u003C/code>\u003C/td>\u003Ctd>Layout direction: \u003Ccode dir=\"auto\">TB\u003C/code> (Top to Bottom) or \u003Ccode dir=\"auto\">LR\u003C/code> (Left to Right)\u003C/td>\u003C/tr>\u003C/tbody>\u003C/table>\n\u003Chr>\n\u003Cdiv class=\"sl-heading-wrapper level-h1\">\u003Ch1 id=\"2️⃣-nodes\">2️⃣ Nodes\u003C/h1>\u003Ca class=\"sl-anchor-link\" href=\"#2️⃣-nodes\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “2️⃣ Nodes”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Nodes define diagram elements.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"basic-syntax\">Basic Syntax\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#basic-syntax\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Basic Syntax”\u003C/span>\u003C/a>\u003C/div>\n\u003Cdiv class=\"expressive-code\">\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"plaintext\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">[start] Start Process\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">[process] Handle Request\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">[end] End Process\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"[start] Start Process[process] Handle Request[end] End Process\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Chr>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"with-explicit-ids\">With Explicit IDs\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#with-explicit-ids\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “With Explicit IDs”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Useful for clarity, especially in large flows.\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"plaintext\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">[start] start: Start Process\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">[process] proc1: Handle Request\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">[end] end: End Process\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">start -> proc1\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">proc1 -> end\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"[start] start: Start Process[process] proc1: Handle Request[end] end: End Processstart -> proc1proc1 -> end\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Chr>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"with-attributes\">With Attributes\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#with-attributes\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “With Attributes”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Attributes use JSON-like syntax:\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"plaintext\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">[process] p1: Critical Step { color: \"red\", icon: \"alert-triangle\" }\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">[system] db: Database { icon: \"database\" }\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"[process] p1: Critical Step { color: &#x22;red&#x22;, icon: &#x22;alert-triangle&#x22; }[system] db: Database { icon: &#x22;database&#x22; }\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"attribute-examples\">Attribute Examples\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#attribute-examples\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Attribute Examples”\u003C/span>\u003C/a>\u003C/div>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>Attribute\u003C/th>\u003Cth>Purpose\u003C/th>\u003C/tr>\u003C/thead>\u003Ctbody>\u003Ctr>\u003Ctd>\u003Ccode dir=\"auto\">color\u003C/code>\u003C/td>\u003Ctd>Override node color\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Ccode dir=\"auto\">icon\u003C/code>\u003C/td>\u003Ctd>Add icon\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Ccode dir=\"auto\">style\u003C/code>\u003C/td>\u003Ctd>Custom style modifier\u003C/td>\u003C/tr>\u003C/tbody>\u003C/table>\n\u003Chr>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"supported-node-types\">Supported Node Types\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#supported-node-types\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Supported Node Types”\u003C/span>\u003C/a>\u003C/div>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>DSL Type\u003C/th>\u003Cth>Shape\u003C/th>\u003Cth>Default Color\u003C/th>\u003C/tr>\u003C/thead>\u003Ctbody>\u003Ctr>\u003Ctd>\u003Ccode dir=\"auto\">start\u003C/code>\u003C/td>\u003Ctd>Capsule\u003C/td>\u003Ctd>Emerald\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Ccode dir=\"auto\">end\u003C/code>\u003C/td>\u003Ctd>Capsule\u003C/td>\u003Ctd>Red\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Ccode dir=\"auto\">process\u003C/code>\u003C/td>\u003Ctd>Rounded rectangle\u003C/td>\u003Ctd>Slate\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Ccode dir=\"auto\">decision\u003C/code>\u003C/td>\u003Ctd>Diamond\u003C/td>\u003Ctd>Amber\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Ccode dir=\"auto\">system\u003C/code>\u003C/td>\u003Ctd>Custom node\u003C/td>\u003Ctd>Violet\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Ccode dir=\"auto\">note\u003C/code>\u003C/td>\u003Ctd>Sticky note\u003C/td>\u003Ctd>Yellow\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Ccode dir=\"auto\">section\u003C/code>\u003C/td>\u003Ctd>Group container\u003C/td>\u003Ctd>Blue\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Ccode dir=\"auto\">container\u003C/code>\u003C/td>\u003Ctd>Generic group\u003C/td>\u003Ctd>Gray\u003C/td>\u003C/tr>\u003C/tbody>\u003C/table>\n\u003Cp>If a node is referenced in a connection but not declared, it defaults to \u003Ccode dir=\"auto\">process\u003C/code>.\u003C/p>\n\u003Chr>\n\u003Cdiv class=\"sl-heading-wrapper level-h1\">\u003Ch1 id=\"3️⃣-edges-connections\">3️⃣ Edges (Connections)\u003C/h1>\u003Ca class=\"sl-anchor-link\" href=\"#3️⃣-edges-connections\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “3️⃣ Edges (Connections)”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Connections define flow between nodes.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"basic-connection\">Basic Connection\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#basic-connection\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Basic Connection”\u003C/span>\u003C/a>\u003C/div>\n\u003Cdiv class=\"expressive-code\">\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"plaintext\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">Start Process -> Handle Request\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"Start Process -> Handle Request\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Chr>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"edge-types\">Edge Types\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#edge-types\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Edge Types”\u003C/span>\u003C/a>\u003C/div>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>Symbol\u003C/th>\u003Cth>Meaning\u003C/th>\u003C/tr>\u003C/thead>\u003Ctbody>\u003Ctr>\u003Ctd>\u003Ccode dir=\"auto\">->\u003C/code>\u003C/td>\u003Ctd>Solid line\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Ccode dir=\"auto\">-->\u003C/code>\u003C/td>\u003Ctd>Curved line\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Ccode dir=\"auto\">..>\u003C/code>\u003C/td>\u003Ctd>Dashed line\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Ccode dir=\"auto\">==>\u003C/code>\u003C/td>\u003Ctd>Thick line\u003C/td>\u003C/tr>\u003C/tbody>\u003C/table>\n\u003Cp>Example:\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"plaintext\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">A ..> B\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">C ==> D\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"A ..> BC ==> D\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Chr>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"labeled-connections\">Labeled Connections\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#labeled-connections\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Labeled Connections”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Use pipes:\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"plaintext\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">Is Valid? ->|Yes| Save Data\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">Is Valid? ->|No| Return Error\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"Is Valid? ->|Yes| Save DataIs Valid? ->|No| Return Error\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Chr>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"edge-attributes\">Edge Attributes\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#edge-attributes\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Edge Attributes”\u003C/span>\u003C/a>\u003C/div>\n\u003Cdiv class=\"expressive-code\">\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"plaintext\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">A -> B { style: \"dashed\", label: \"Async\" }\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"A -> B { style: &#x22;dashed&#x22;, label: &#x22;Async&#x22; }\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Chr>\n\u003Cdiv class=\"sl-heading-wrapper level-h1\">\u003Ch1 id=\"4️⃣-groups\">4️⃣ Groups\u003C/h1>\u003Ca class=\"sl-anchor-link\" href=\"#4️⃣-groups\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “4️⃣ Groups”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Use \u003Ccode dir=\"auto\">group\u003C/code> to cluster nodes.\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"plaintext\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">group \"Backend Services\" {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">    \u003C/span>\u003C/span>\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">[process] api: API Server\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">    \u003C/span>\u003C/span>\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">[system] db: Database\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">    \u003C/span>\u003C/span>\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">api -> db\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">}\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"group &#x22;Backend Services&#x22; {    [process] api: API Server    [system] db: Database    api -> db}\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cp>Groups help visually separate logical areas.\u003C/p>\n\u003Chr>\n\u003Cdiv class=\"sl-heading-wrapper level-h1\">\u003Ch1 id=\"5️⃣-comments\">5️⃣ Comments\u003C/h1>\u003Ca class=\"sl-anchor-link\" href=\"#5️⃣-comments\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “5️⃣ Comments”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Lines starting with \u003Ccode dir=\"auto\">#\u003C/code> are ignored.\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"plaintext\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\"># This is a comment\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">[start] Begin\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"# This is a comment[start] Begin\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Chr>\n\u003Cdiv class=\"sl-heading-wrapper level-h1\">\u003Ch1 id=\"-complete-example\">✅ Complete Example\u003C/h1>\u003Ca class=\"sl-anchor-link\" href=\"#-complete-example\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “✅ Complete Example”\u003C/span>\u003C/a>\u003C/div>\n\u003Cdiv class=\"expressive-code\">\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"yaml\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#7FDBCA;--1:#111111\">flow\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">User Login Flow\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#7FDBCA;--1:#111111\">direction\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">: \u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">TB\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#919F9F;--1:#5F636F\"># Define Nodes\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">[\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">start\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">] \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#111111\">user\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">: \u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">User\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">[\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">process\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">] \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#111111\">login\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">: \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#111111\">Login Page { icon\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">log-in\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> }\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">group \"Authentication\" {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">    \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">[\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">system\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">] \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#111111\">auth\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">: \u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">Auth Service\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">    \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">[\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">decision\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">] \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#111111\">check\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">: \u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">Is Valid?\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">[\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">end\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">] \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#111111\">dash\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">: \u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">Dashboard\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">[\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">end\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">] \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#111111\">err\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">: \u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">Error\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#919F9F;--1:#5F636F\"># Define Logic\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">user -> login\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">login -> auth\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">auth -> check\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#7FDBCA;--1:#111111\">check ->|Yes| dash { color\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">green\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> }\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#7FDBCA;--1:#111111\">check ->|No| err { color\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">red\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">, \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#111111\">style\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">dashed\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> }\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"flow: &#x22;User Login Flow&#x22;direction: TB# Define Nodes[start] user: User[process] login: Login Page { icon: &#x22;log-in&#x22; }group &#x22;Authentication&#x22; {    [system] auth: Auth Service    [decision] check: Is Valid?}[end] dash: Dashboard[end] err: Error# Define Logicuser -> loginlogin -> authauth -> checkcheck ->|Yes| dash { color: &#x22;green&#x22; }check ->|No| err { color: &#x22;red&#x22;, style: &#x22;dashed&#x22; }\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Chr>\n\u003Cdiv class=\"sl-heading-wrapper level-h1\">\u003Ch1 id=\"-llm-agent-prompt-template\">🤖 LLM Agent Prompt Template\u003C/h1>\u003Ca class=\"sl-anchor-link\" href=\"#-llm-agent-prompt-template\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “🤖 LLM Agent Prompt Template”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>If someone wants to generate FlowMind DSL using an LLM agent, they can paste the following prompt:\u003C/p>\n\u003Chr>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"copy-paste-prompt-for-llm\">Copy-Paste Prompt for LLM\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#copy-paste-prompt-for-llm\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Copy-Paste Prompt for LLM”\u003C/span>\u003C/a>\u003C/div>\n\u003Cdiv class=\"expressive-code\">\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"plaintext\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">You are an expert FlowMind DSL V2 generator.\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">Your job is to convert a user's workflow description into valid FlowMind DSL.\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">You must strictly follow the FlowMind DSL V2 specification defined below.\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">========================================\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">FLOWMIND DSL V2 SPECIFICATION\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">========================================\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">1. DOCUMENT HEADER (Required)\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">Every output MUST begin with:\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">flow: \"Title Here\"\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">direction: TB or LR\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">Rules:\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">- Always generate a meaningful title.\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">- Default to TB unless user clearly needs horizontal layout.\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">----------------------------------------\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">2. NODE DECLARATION RULES\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">Node syntax:\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">[type] id: Label { optional_attributes }\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">Example:\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">[process] p1: Handle Request\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">[decision] d1: Is Valid? { icon: \"help-circle\" }\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">Rules:\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">- ALWAYS use explicit IDs.\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">- IDs must be short, lowercase, no spaces.\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">- IDs must be unique.\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">- Use semantic naming (start, login, checkAuth, db, etc).\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">- Do NOT reuse labels as IDs.\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">- Do NOT skip node declarations.\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">If a node is referenced in a connection, it MUST be declared first.\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">----------------------------------------\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">3. SUPPORTED NODE TYPES\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">Use ONLY these types:\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">start\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">end\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">process\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">decision\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">system\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">note\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">section\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">container\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">Guidelines:\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">start      → beginning of flow\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">end        → termination states\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">process    → actions or steps\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">decision   → branching logic\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">system     → external system/service/database\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">note       → annotations\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">section    → major grouped area\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">container  → generic grouping\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">----------------------------------------\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">4. NODE ATTRIBUTES (Optional)\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">Attributes use JSON-like syntax:\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">{ color: \"red\", icon: \"database\", style: \"dashed\" }\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">Rules:\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">- Only add attributes if meaningful.\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">- Keep styling minimal.\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">- Do not invent unsupported properties.\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">----------------------------------------\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">5. EDGES (CONNECTIONS)\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">Basic syntax:\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">id1 -> id2\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">Edge types:\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">->   solid\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">-->  curved\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">..>  dashed\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">==>  thick\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">Labeled edges:\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">id1 ->|Yes| id2\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">Edge with attributes:\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">id1 -> id2 { label: \"Async\", style: \"dashed\" }\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">Rules:\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">- Always connect using IDs, not labels.\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">- Decision nodes MUST use labeled edges.\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">- Every branch from a decision must be explicit.\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">- No floating nodes.\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">----------------------------------------\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">6. GROUPS\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">Use grouping when logical clustering exists.\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">Syntax:\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">group \"Group Name\" {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">    \u003C/span>\u003C/span>\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">node declarations\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">    \u003C/span>\u003C/span>\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">internal connections\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">}\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">Rules:\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">- Groups should wrap related nodes only.\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">- Connections across groups should be declared outside the group block.\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">----------------------------------------\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">7. COMMENTS\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">Use # for comments sparingly.\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">Do not over-comment.\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">----------------------------------------\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">8. OUTPUT RULES (STRICT)\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">You MUST:\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">- Output ONLY valid FlowMind DSL\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">- Do NOT explain\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">- Do NOT use markdown formatting\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">- Do NOT wrap in code blocks\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">- Do NOT add commentary\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">- Do NOT describe what you are doing\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">- Do NOT output anything except the DSL\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">If user description is vague:\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">- Make reasonable assumptions\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">- Choose logical structure\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">- Keep flow clean and readable\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">========================================\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">LOGIC CONVERSION STRATEGY\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">========================================\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">When converting user input:\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">1. Identify:\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">   \u003C/span>\u003C/span>\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">- Start event\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">   \u003C/span>\u003C/span>\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">- End states\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">   \u003C/span>\u003C/span>\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">- Actions\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">   \u003C/span>\u003C/span>\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">- Decisions\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">   \u003C/span>\u003C/span>\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">- External systems\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">   \u003C/span>\u003C/span>\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">- Logical clusters\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">2. Convert:\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">   \u003C/span>\u003C/span>\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">- Events → start / end\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">   \u003C/span>\u003C/span>\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">- Actions → process\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">   \u003C/span>\u003C/span>\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">- Branching → decision\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">   \u003C/span>\u003C/span>\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">- Databases/APIs → system\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">   \u003C/span>\u003C/span>\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">- Parallel logic → separate branches\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">   \u003C/span>\u003C/span>\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">- Error paths → explicit end nodes\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">3. Ensure:\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">   \u003C/span>\u003C/span>\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">- Every path leads to an end\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">   \u003C/span>\u003C/span>\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">- No orphan nodes\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">   \u003C/span>\u003C/span>\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">- Clean logical readability\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">========================================\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">USER REQUEST\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">========================================\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">Convert the following workflow description into FlowMind DSL V2:\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">{{USER_WORKFLOW_DESCRIPTION}}\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">Generate the DSL now.\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"You are an expert FlowMind DSL V2 generator.Your job is to convert a user&#x27;s workflow description into valid FlowMind DSL.You must strictly follow the FlowMind DSL V2 specification defined below.========================================FLOWMIND DSL V2 SPECIFICATION========================================1. DOCUMENT HEADER (Required)Every output MUST begin with:flow: &#x22;Title Here&#x22;direction: TB or LRRules:- Always generate a meaningful title.- Default to TB unless user clearly needs horizontal layout.----------------------------------------2. NODE DECLARATION RULESNode syntax:[type] id: Label { optional_attributes }Example:[process] p1: Handle Request[decision] d1: Is Valid? { icon: &#x22;help-circle&#x22; }Rules:- ALWAYS use explicit IDs.- IDs must be short, lowercase, no spaces.- IDs must be unique.- Use semantic naming (start, login, checkAuth, db, etc).- Do NOT reuse labels as IDs.- Do NOT skip node declarations.If a node is referenced in a connection, it MUST be declared first.----------------------------------------3. SUPPORTED NODE TYPESUse ONLY these types:startendprocessdecisionsystemnotesectioncontainerGuidelines:start      → beginning of flowend        → termination statesprocess    → actions or stepsdecision   → branching logicsystem     → external system/service/databasenote       → annotationssection    → major grouped areacontainer  → generic grouping----------------------------------------4. NODE ATTRIBUTES (Optional)Attributes use JSON-like syntax:{ color: &#x22;red&#x22;, icon: &#x22;database&#x22;, style: &#x22;dashed&#x22; }Rules:- Only add attributes if meaningful.- Keep styling minimal.- Do not invent unsupported properties.----------------------------------------5. EDGES (CONNECTIONS)Basic syntax:id1 -> id2Edge types:->   solid-->  curved..>  dashed==>  thickLabeled edges:id1 ->|Yes| id2Edge with attributes:id1 -> id2 { label: &#x22;Async&#x22;, style: &#x22;dashed&#x22; }Rules:- Always connect using IDs, not labels.- Decision nodes MUST use labeled edges.- Every branch from a decision must be explicit.- No floating nodes.----------------------------------------6. GROUPSUse grouping when logical clustering exists.Syntax:group &#x22;Group Name&#x22; {    node declarations    internal connections}Rules:- Groups should wrap related nodes only.- Connections across groups should be declared outside the group block.----------------------------------------7. COMMENTSUse # for comments sparingly.Do not over-comment.----------------------------------------8. OUTPUT RULES (STRICT)You MUST:- Output ONLY valid FlowMind DSL- Do NOT explain- Do NOT use markdown formatting- Do NOT wrap in code blocks- Do NOT add commentary- Do NOT describe what you are doing- Do NOT output anything except the DSLIf user description is vague:- Make reasonable assumptions- Choose logical structure- Keep flow clean and readable========================================LOGIC CONVERSION STRATEGY========================================When converting user input:1. Identify:   - Start event   - End states   - Actions   - Decisions   - External systems   - Logical clusters2. Convert:   - Events → start / end   - Actions → process   - Branching → decision   - Databases/APIs → system   - Parallel logic → separate branches   - Error paths → explicit end nodes3. Ensure:   - Every path leads to an end   - No orphan nodes   - Clean logical readability========================================USER REQUEST========================================Convert the following workflow description into FlowMind DSL V2:{{USER_WORKFLOW_DESCRIPTION}}Generate the DSL now.\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Chr>",{"headings":399,"localImagePaths":457,"remoteImagePaths":458,"frontmatter":459,"imagePaths":460},[400,403,406,409,412,415,418,421,424,427,430,433,436,439,442,445,448,451,454],{"depth":67,"slug":401,"text":402},"-flowmind-dsl-syntax-guide-v2","🧠 FlowMind DSL Syntax Guide (V2)",{"depth":67,"slug":404,"text":405},"1️⃣-document-header","1️⃣ Document Header",{"depth":36,"slug":407,"text":408},"fields","Fields",{"depth":67,"slug":410,"text":411},"2️⃣-nodes","2️⃣ Nodes",{"depth":29,"slug":413,"text":414},"basic-syntax","Basic Syntax",{"depth":29,"slug":416,"text":417},"with-explicit-ids","With Explicit IDs",{"depth":29,"slug":419,"text":420},"with-attributes","With Attributes",{"depth":36,"slug":422,"text":423},"attribute-examples","Attribute Examples",{"depth":29,"slug":425,"text":426},"supported-node-types","Supported Node Types",{"depth":67,"slug":428,"text":429},"3️⃣-edges-connections","3️⃣ Edges (Connections)",{"depth":29,"slug":431,"text":432},"basic-connection","Basic Connection",{"depth":29,"slug":434,"text":435},"edge-types","Edge Types",{"depth":29,"slug":437,"text":438},"labeled-connections","Labeled Connections",{"depth":29,"slug":440,"text":441},"edge-attributes","Edge Attributes",{"depth":67,"slug":443,"text":444},"4️⃣-groups","4️⃣ Groups",{"depth":67,"slug":446,"text":447},"5️⃣-comments","5️⃣ Comments",{"depth":67,"slug":449,"text":450},"-complete-example","✅ Complete Example",{"depth":67,"slug":452,"text":453},"-llm-agent-prompt-template","🤖 LLM Agent Prompt Template",{"depth":29,"slug":455,"text":456},"copy-paste-prompt-for-llm","Copy-Paste Prompt for LLM",[],[],{"draft":19,"title":389},[],"playback-history",{"id":461,"data":463,"body":468,"filePath":469,"digest":470,"rendered":471},{"title":464,"editUrl":15,"head":465,"template":17,"sidebar":466,"pagefind":15,"draft":19},"Playback & History",[],{"hidden":19,"attrs":467},{},"FlowMind automatically tracks every change you make. The **Playback** features allows you to travel back in time to review your decision process.\n\n## History Timeline\n\nClick the **Clock Icon** in the top navigation bar to open the History Timeline.\n\n### Version Checkpoints\nEvery time you perform a significant action (adding a node, changing a color, auto-layout), a \"snapshot\" is saved.\n*   **Undo/Redo**: Uses this same system to jump back and forth (`Cmd+Z`).\n\n## Playback Mode\n\nPress the **Play** button in the History panel to watch a \"movie\" of your diagram being built from start to finish.\n*   **Speed Control**: Adjust playback speed (1x, 2x, 4x).\n*   **Scrubbing**: Drag the slider to specific points in time.\n*   **Restore**: Found an older version you like better? Click \"Restore\" to revert the canvas to that state perfectly.","src/content/docs/playback-history.md","54fa2cf041ba3931",{"html":472,"metadata":473},"\u003Cp>FlowMind automatically tracks every change you make. The \u003Cstrong>Playback\u003C/strong> features allows you to travel back in time to review your decision process.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"history-timeline\">History Timeline\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#history-timeline\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “History Timeline”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Click the \u003Cstrong>Clock Icon\u003C/strong> in the top navigation bar to open the History Timeline.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"version-checkpoints\">Version Checkpoints\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#version-checkpoints\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Version Checkpoints”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Every time you perform a significant action (adding a node, changing a color, auto-layout), a “snapshot” is saved.\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Undo/Redo\u003C/strong>: Uses this same system to jump back and forth (\u003Ccode dir=\"auto\">Cmd+Z\u003C/code>).\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"playback-mode\">Playback Mode\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#playback-mode\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Playback Mode”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Press the \u003Cstrong>Play\u003C/strong> button in the History panel to watch a “movie” of your diagram being built from start to finish.\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Speed Control\u003C/strong>: Adjust playback speed (1x, 2x, 4x).\u003C/li>\n\u003Cli>\u003Cstrong>Scrubbing\u003C/strong>: Drag the slider to specific points in time.\u003C/li>\n\u003Cli>\u003Cstrong>Restore\u003C/strong>: Found an older version you like better? Click “Restore” to revert the canvas to that state perfectly.\u003C/li>\n\u003C/ul>",{"headings":474,"localImagePaths":484,"remoteImagePaths":485,"frontmatter":486,"imagePaths":487},[475,478,481],{"depth":29,"slug":476,"text":477},"history-timeline","History Timeline",{"depth":36,"slug":479,"text":480},"version-checkpoints","Version Checkpoints",{"depth":29,"slug":482,"text":483},"playback-mode","Playback Mode",[],[],{"draft":19,"title":464},[],"payment-flow",{"id":488,"data":490,"body":495,"filePath":496,"digest":497,"rendered":498},{"title":491,"editUrl":15,"head":492,"template":17,"sidebar":493,"pagefind":15,"draft":19},"Payment Flow Visualization",[],{"hidden":19,"attrs":494},{},"# How to Visualize Payment Flows (Stripe, PayPal, etc.)\n\nWhen building e-commerce or SaaS applications, understanding the exact sequence of a payment flow is critical. A single missed webhook can lead to a dropped order or an angry customer.\n\nOpenFlowKit allows you to map out complex asynchronous payment architectures quickly using a variety of [Node Types](/docs/en/node-types).\n\n## Why build payment architectures with OpenFlowKit?\n\n- **Shareability**: Everyone from the PM to the backend engineer needs to see the same flow.\n- **Clarity**: Mapping out happy paths, failures, and webhook retries visually is much easier than reading through Stripe API documentation.\n- **Speed**: Use the [Command Center](/docs/en/command-center) and AI to generate the boilerplate flow in seconds.\n\n## Example: Stripe Checkout Flow\n\nHere is a common Stripe Checkout implementation mapped out. Notice how we use different node shapes to distinguish between client-side actions, server-side actions, and third-party API calls.\n\n```mermaid\nsequenceDiagram\n    participant User\n    participant Client as Frontend (React)\n    participant Server as Backend (Node.js)\n    participant Stripe\n    \n    User->>Client: Clicks \"Pay $50\"\n    Client->>Server: POST /create-checkout-session\n    Server->>Stripe: API Request: Create Session\n    Stripe-->>Server: Returns Session ID & URL\n    Server-->>Client: Returns Checkout URL\n    \n    Client->>User: Redirects to Stripe Checkout\n    User->>Stripe: Enters Credit Card Info\n    \n    alt Payment Success\n        Stripe-->>User: Redirect to Success URL\n        Stripe->>Server: Webhook event: checkout.session.completed\n        Server->>Server: Fulfills Order / Updates DB\n    else Payment Failure\n        Stripe-->>User: Redirect to Cancel URL\n        User->>Client: Try Again\n    end\n```\n\n## Tips for Better Payment Diagrams\n\n1. **Use Swimlanes**: Group actions by responsibility. Put the User in one lane, your API in another, and the Payment Processor (Stripe/PayPal) in a third.\n2. **Color Code**: Use green for happy paths (success), red for failure states (declines/insufficient funds), and gray for retries.\n3. **Explicit Callouts**: Use the **Annotation Node** to document exact webhook payloads or secret keys needed at specific steps.\n\n## AI Prompt Example\n\nTo generate a similar flow using [Ask Flowpilot](/docs/en/ask-flowpilot):\n\n> `\"Generate a flowchart showing a subscription payment flow using Braintree. Include the client requesting a client token, the server generating it, the user submitting a nonce, and the final server-side transaction creation. Show both success and failure branches.\"`\n\nNeed to present this to your team? Try the [Playback History](/docs/en/playback-history) feature to walk through the payment sequence step-by-step.","src/content/docs/payment-flow.md","095f7ae1e29045c0",{"html":499,"metadata":500},"\u003Cdiv class=\"sl-heading-wrapper level-h1\">\u003Ch1 id=\"how-to-visualize-payment-flows-stripe-paypal-etc\">How to Visualize Payment Flows (Stripe, PayPal, etc.)\u003C/h1>\u003Ca class=\"sl-anchor-link\" href=\"#how-to-visualize-payment-flows-stripe-paypal-etc\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “How to Visualize Payment Flows (Stripe, PayPal, etc.)”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>When building e-commerce or SaaS applications, understanding the exact sequence of a payment flow is critical. A single missed webhook can lead to a dropped order or an angry customer.\u003C/p>\n\u003Cp>OpenFlowKit allows you to map out complex asynchronous payment architectures quickly using a variety of \u003Ca href=\"/docs/en/node-types\">Node Types\u003C/a>.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"why-build-payment-architectures-with-openflowkit\">Why build payment architectures with OpenFlowKit?\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#why-build-payment-architectures-with-openflowkit\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Why build payment architectures with OpenFlowKit?”\u003C/span>\u003C/a>\u003C/div>\n\u003Cul>\n\u003Cli>\u003Cstrong>Shareability\u003C/strong>: Everyone from the PM to the backend engineer needs to see the same flow.\u003C/li>\n\u003Cli>\u003Cstrong>Clarity\u003C/strong>: Mapping out happy paths, failures, and webhook retries visually is much easier than reading through Stripe API documentation.\u003C/li>\n\u003Cli>\u003Cstrong>Speed\u003C/strong>: Use the \u003Ca href=\"/docs/en/command-center\">Command Center\u003C/a> and AI to generate the boilerplate flow in seconds.\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"example-stripe-checkout-flow\">Example: Stripe Checkout Flow\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#example-stripe-checkout-flow\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Example: Stripe Checkout Flow”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Here is a common Stripe Checkout implementation mapped out. Notice how we use different node shapes to distinguish between client-side actions, server-side actions, and third-party API calls.\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Clink rel=\"stylesheet\" href=\"/_astro/ec.v4551.css\">\u003Cscript type=\"module\" src=\"/_astro/ec.0vx5m.js\">\u003C/script>\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"mermaid\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">sequenceDiagram\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">    \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">participant User\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">    \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">participant Client as Frontend (React)\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">    \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">participant Server as Backend (Node.js)\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">    \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">participant Stripe\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">    \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">User->>Client: Clicks \"Pay $50\"\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">    \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">Client->>Server: POST /create-checkout-session\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">    \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">Server->>Stripe: API Request: Create Session\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">    \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">Stripe-->>Server: Returns Session ID &#x26; URL\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">    \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">Server-->>Client: Returns Checkout URL\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">    \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">Client->>User: Redirects to Stripe Checkout\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">    \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">User->>Stripe: Enters Credit Card Info\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">    \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">alt Payment Success\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">        \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">Stripe-->>User: Redirect to Success URL\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">        \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">Stripe->>Server: Webhook event: checkout.session.completed\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">        \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">Server->>Server: Fulfills Order / Updates DB\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">    \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">else Payment Failure\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">        \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">Stripe-->>User: Redirect to Cancel URL\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">        \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">User->>Client: Try Again\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">    \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">end\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"sequenceDiagram    participant User    participant Client as Frontend (React)    participant Server as Backend (Node.js)    participant Stripe    User->>Client: Clicks &#x22;Pay $50&#x22;    Client->>Server: POST /create-checkout-session    Server->>Stripe: API Request: Create Session    Stripe-->>Server: Returns Session ID &#x26; URL    Server-->>Client: Returns Checkout URL    Client->>User: Redirects to Stripe Checkout    User->>Stripe: Enters Credit Card Info    alt Payment Success        Stripe-->>User: Redirect to Success URL        Stripe->>Server: Webhook event: checkout.session.completed        Server->>Server: Fulfills Order / Updates DB    else Payment Failure        Stripe-->>User: Redirect to Cancel URL        User->>Client: Try Again    end\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"tips-for-better-payment-diagrams\">Tips for Better Payment Diagrams\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#tips-for-better-payment-diagrams\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Tips for Better Payment Diagrams”\u003C/span>\u003C/a>\u003C/div>\n\u003Col>\n\u003Cli>\u003Cstrong>Use Swimlanes\u003C/strong>: Group actions by responsibility. Put the User in one lane, your API in another, and the Payment Processor (Stripe/PayPal) in a third.\u003C/li>\n\u003Cli>\u003Cstrong>Color Code\u003C/strong>: Use green for happy paths (success), red for failure states (declines/insufficient funds), and gray for retries.\u003C/li>\n\u003Cli>\u003Cstrong>Explicit Callouts\u003C/strong>: Use the \u003Cstrong>Annotation Node\u003C/strong> to document exact webhook payloads or secret keys needed at specific steps.\u003C/li>\n\u003C/ol>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"ai-prompt-example\">AI Prompt Example\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#ai-prompt-example\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “AI Prompt Example”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>To generate a similar flow using \u003Ca href=\"/docs/en/ask-flowpilot\">Ask Flowpilot\u003C/a>:\u003C/p>\n\u003Cblockquote>\n\u003Cp>\u003Ccode dir=\"auto\">\"Generate a flowchart showing a subscription payment flow using Braintree. Include the client requesting a client token, the server generating it, the user submitting a nonce, and the final server-side transaction creation. Show both success and failure branches.\"\u003C/code>\u003C/p>\n\u003C/blockquote>\n\u003Cp>Need to present this to your team? Try the \u003Ca href=\"/docs/en/playback-history\">Playback History\u003C/a> feature to walk through the payment sequence step-by-step.\u003C/p>",{"headings":501,"localImagePaths":517,"remoteImagePaths":518,"frontmatter":519,"imagePaths":520},[502,505,508,511,514],{"depth":67,"slug":503,"text":504},"how-to-visualize-payment-flows-stripe-paypal-etc","How to Visualize Payment Flows (Stripe, PayPal, etc.)",{"depth":29,"slug":506,"text":507},"why-build-payment-architectures-with-openflowkit","Why build payment architectures with OpenFlowKit?",{"depth":29,"slug":509,"text":510},"example-stripe-checkout-flow","Example: Stripe Checkout Flow",{"depth":29,"slug":512,"text":513},"tips-for-better-payment-diagrams","Tips for Better Payment Diagrams",{"depth":29,"slug":515,"text":516},"ai-prompt-example","AI Prompt Example",[],[],{"draft":19,"title":491},[],"prompting-agents",{"id":521,"data":523,"body":528,"filePath":529,"digest":530,"rendered":531},{"title":524,"editUrl":15,"head":525,"template":17,"sidebar":526,"pagefind":15,"draft":19},"Prompting AI Agents",[],{"hidden":19,"attrs":527},{},"# How to Prompt AI Agents (Cursor, Copilot, ChatGPT)\n\nOpenFlowKit is built to be AI-native. While it includes **Flowpilot** (our built-in AI assistant), you often want to generate diagrams directly inside your IDE using tools like Cursor, GitHub Copilot, or even regular ChatGPT.\n\nTo get the best results from any LLM, you need to point them to our syntax rules.\n\n## The Magic Keyword: `llms.txt`\n\nThe secret to perfect AI generation is our `llms.txt` file. We host a machine-readable set of rules that teaches any AI exactly how to write OpenFlow DSL V2 code.\n\nWhen prompting an AI agent, just include a reference to this file.\n\n### Example Prompt for Cursor IDE\nOpen your Composer or Chat window and type:\n\n> `\"Read https://openflowkit.com/llms.txt and then generate an architecture diagram showing our Next.js frontend connecting to a Supabase backend.\"`\n\n### Example Prompt for ChatGPT\nIf you are using ChatGPT with web-browsing enabled:\n\n> `\"Go to https://openflowkit.com/llms.txt to learn the OpenFlowKit syntax. Then, write a flowchart detailing an OAuth2 login sequence. Output the result using the \\`\\`\\`openflow code block.\"`\n\n## Best Practices for Prompting\n\nEven with the rules, LLMs can sometimes get confused. Here are three tips for perfect diagrams every time:\n\n1. **Be specific about shapes**: Instead of just saying \"add a database\", say \"add a Node with the `[process]` type labeled 'Database'\". \n2. **Name your connections**: The diagram is much more useful if edges have labels. Example: \"Connect the frontend to the backend with the label '|REST API|'\".\n3. **Use Groups for clarity**: If you have multiple microservices, tell the AI to wrap them in a group: \"Put the 'Auth Service' and 'User DB' inside a group called 'Backend Infrastructure'.\"\n\n[Return to Editor](/#/canvas)","src/content/docs/prompting-agents.md","e05426de02f38fab",{"html":532,"metadata":533},"\u003Cdiv class=\"sl-heading-wrapper level-h1\">\u003Ch1 id=\"how-to-prompt-ai-agents-cursor-copilot-chatgpt\">How to Prompt AI Agents (Cursor, Copilot, ChatGPT)\u003C/h1>\u003Ca class=\"sl-anchor-link\" href=\"#how-to-prompt-ai-agents-cursor-copilot-chatgpt\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “How to Prompt AI Agents (Cursor, Copilot, ChatGPT)”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>OpenFlowKit is built to be AI-native. While it includes \u003Cstrong>Flowpilot\u003C/strong> (our built-in AI assistant), you often want to generate diagrams directly inside your IDE using tools like Cursor, GitHub Copilot, or even regular ChatGPT.\u003C/p>\n\u003Cp>To get the best results from any LLM, you need to point them to our syntax rules.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"the-magic-keyword-llmstxt\">The Magic Keyword: \u003Ccode dir=\"auto\">llms.txt\u003C/code>\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#the-magic-keyword-llmstxt\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “The Magic Keyword: llms.txt”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>The secret to perfect AI generation is our \u003Ccode dir=\"auto\">llms.txt\u003C/code> file. We host a machine-readable set of rules that teaches any AI exactly how to write OpenFlow DSL V2 code.\u003C/p>\n\u003Cp>When prompting an AI agent, just include a reference to this file.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"example-prompt-for-cursor-ide\">Example Prompt for Cursor IDE\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#example-prompt-for-cursor-ide\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Example Prompt for Cursor IDE”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Open your Composer or Chat window and type:\u003C/p>\n\u003Cblockquote>\n\u003Cp>\u003Ccode dir=\"auto\">\"Read https://openflowkit.com/llms.txt and then generate an architecture diagram showing our Next.js frontend connecting to a Supabase backend.\"\u003C/code>\u003C/p>\n\u003C/blockquote>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"example-prompt-for-chatgpt\">Example Prompt for ChatGPT\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#example-prompt-for-chatgpt\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Example Prompt for ChatGPT”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>If you are using ChatGPT with web-browsing enabled:\u003C/p>\n\u003Cblockquote>\n\u003Cp>\u003Ccode dir=\"auto\">\"Go to https://openflowkit.com/llms.txt to learn the OpenFlowKit syntax. Then, write a flowchart detailing an OAuth2 login sequence. Output the result using the \\\u003C/code>“openflow code block.”`\u003C/p>\n\u003C/blockquote>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"best-practices-for-prompting\">Best Practices for Prompting\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#best-practices-for-prompting\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Best Practices for Prompting”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Even with the rules, LLMs can sometimes get confused. Here are three tips for perfect diagrams every time:\u003C/p>\n\u003Col>\n\u003Cli>\u003Cstrong>Be specific about shapes\u003C/strong>: Instead of just saying “add a database”, say “add a Node with the \u003Ccode dir=\"auto\">[process]\u003C/code> type labeled ‘Database’”.\u003C/li>\n\u003Cli>\u003Cstrong>Name your connections\u003C/strong>: The diagram is much more useful if edges have labels. Example: “Connect the frontend to the backend with the label ‘|REST API|’”.\u003C/li>\n\u003Cli>\u003Cstrong>Use Groups for clarity\u003C/strong>: If you have multiple microservices, tell the AI to wrap them in a group: “Put the ‘Auth Service’ and ‘User DB’ inside a group called ‘Backend Infrastructure’.”\u003C/li>\n\u003C/ol>\n\u003Cp>\u003Ca href=\"/#/canvas\">Return to Editor\u003C/a>\u003C/p>",{"headings":534,"localImagePaths":550,"remoteImagePaths":551,"frontmatter":552,"imagePaths":553},[535,538,541,544,547],{"depth":67,"slug":536,"text":537},"how-to-prompt-ai-agents-cursor-copilot-chatgpt","How to Prompt AI Agents (Cursor, Copilot, ChatGPT)",{"depth":29,"slug":539,"text":540},"the-magic-keyword-llmstxt","The Magic Keyword: llms.txt",{"depth":36,"slug":542,"text":543},"example-prompt-for-cursor-ide","Example Prompt for Cursor IDE",{"depth":36,"slug":545,"text":546},"example-prompt-for-chatgpt","Example Prompt for ChatGPT",{"depth":29,"slug":548,"text":549},"best-practices-for-prompting","Best Practices for Prompting",[],[],{"draft":19,"title":524},[],"roadmap",{"id":554,"data":556,"body":561,"filePath":562,"digest":563,"rendered":564},{"title":557,"editUrl":15,"head":558,"template":17,"sidebar":559,"pagefind":15,"draft":19},"Roadmap",[],{"hidden":19,"attrs":560},{},"# 🗺️ OpenFlowKit Product Roadmap\n\nWe are building the standard for open-source, white-label diagramming. This roadmap outlines our vision for the future of **OpenFlowKit**.\n\n> **Note**: This is a living document. Priorities may change based on community feedback.\n\n---\n\n## 🚀 Q3 2026: The AI Expansion (v1.2)\n*Focus: Making the diagram generation smarter, faster, and more versatile.*\n\n### 🧠 Multi-Model AI Support\nMove beyond a single provider. We will support a \"Bring Your Own Key\" model for all major LLMs:\n- **Anthropic Claude 3.5 Sonnet**: Optimized for complex system architecture diagrams.\n- **OpenAI GPT-4o**: Fast, reasoning-heavy generation for business logic flows.\n- **Local LLMs (Ollama)**: run Llama 3 or Mistral locally for 100% offline, air-gapped diagram generation.\n\n### ⚡ Real-time \"Copilot\" Mode\n- **Autocomplete for Flows**: As you drag a node, the AI suggests the next 3 most logical steps based on your current graph context.\n- **Smart Refactoring**: Select a mess of nodes and ask AI to \"Optimize Layout\" or \"Group into Subgraph\".\n\n\n---\n\n## 🤝 Q4 2026: Collaboration & Teams (v2.0)\n*Focus: Turning a solo developer tool into a team powerhouse.*\n\n### 👥 Real-Time Multiplayer\n- **Live Cursors**: See where your teammates are looking.\n- **Conflict-Free Editing**: Powered by **Yjs** and CRDTs for seamless collaborative sessions.\n- **Presence**: \"Who's on this flow?\" indicators.\n\n### 💬 Contextual Comments\n- Pin comments directly to nodes or edges.\n- @mention team members to assigned tasks within the diagram.\n- Resolve threads as you complete the implementation.\n\n### 💾 Cloud Persistence Adapter\n- Optional reference implementation for saving flows to PostgreSQL/Supabase.\n- \"Project\" view to organize hundreds of diagrams.\n\n---\n\n## 🛠️ 2027: The Platform Era (v3.0)\n*Focus: Deep integration into the developer ecosystem.*\n\n### 🔌 IDE Extensions\n- **VS Code Extension**: Edit `.flow` or `.mermaid` files directly inside VS Code with our premium GUI.\n- **IntelliJ / JetBrains Plugin**: Native support for Java/Kotlin ecosystem diagrams.\n\n### 🎨 Advanced Design System\n- **Figma Sync**: Two-way synchronization. Push changes from Figma to OpenFlowKit and vice-versa.\n- **Custom React Nodes**: A plugin API to let developers render *any* React component inside a node (Charts, Data Grids, Videos).\n\n### 📊 Data-Driven Diagrams\n- **Live Metrics**: Bind node colors/sizes to real-time API data (e.g., Server Health visualization).\n- **SQL-to-ERD**: Connect to your DB and auto-generate the Entity Relationship Diagram.\n\n---\n\n## 💡 Community Wishlist\nFeatures we are exploring based on user requests:\n- [ ] **Presentation Mode**: Slide-by-slide walkthrough of complex flows.\n- [ ] **Accessibility (A11y)**: Screen reader support and keyboard navigation improvements.\n- [ ] **Internationalization (i18n)**: Translating the UI into 10+ languages.\n\n---\n\n*Current Version: v1.0.0-beta*  \n*Last Updated: February 2026*","src/content/docs/roadmap.md","b07de293af53b142",{"html":565,"metadata":566},"\u003Cdiv class=\"sl-heading-wrapper level-h1\">\u003Ch1 id=\"️-openflowkit-product-roadmap\">🗺️ OpenFlowKit Product Roadmap\u003C/h1>\u003Ca class=\"sl-anchor-link\" href=\"#️-openflowkit-product-roadmap\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “🗺️ OpenFlowKit Product Roadmap”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>We are building the standard for open-source, white-label diagramming. This roadmap outlines our vision for the future of \u003Cstrong>OpenFlowKit\u003C/strong>.\u003C/p>\n\u003Cblockquote>\n\u003Cp>\u003Cstrong>Note\u003C/strong>: This is a living document. Priorities may change based on community feedback.\u003C/p>\n\u003C/blockquote>\n\u003Chr>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"-q3-2026-the-ai-expansion-v12\">🚀 Q3 2026: The AI Expansion (v1.2)\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#-q3-2026-the-ai-expansion-v12\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “🚀 Q3 2026: The AI Expansion (v1.2)”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>\u003Cem>Focus: Making the diagram generation smarter, faster, and more versatile.\u003C/em>\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"-multi-model-ai-support\">🧠 Multi-Model AI Support\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#-multi-model-ai-support\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “🧠 Multi-Model AI Support”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Move beyond a single provider. We will support a “Bring Your Own Key” model for all major LLMs:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Anthropic Claude 3.5 Sonnet\u003C/strong>: Optimized for complex system architecture diagrams.\u003C/li>\n\u003Cli>\u003Cstrong>OpenAI GPT-4o\u003C/strong>: Fast, reasoning-heavy generation for business logic flows.\u003C/li>\n\u003Cli>\u003Cstrong>Local LLMs (Ollama)\u003C/strong>: run Llama 3 or Mistral locally for 100% offline, air-gapped diagram generation.\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"-real-time-copilot-mode\">⚡ Real-time “Copilot” Mode\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#-real-time-copilot-mode\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “⚡ Real-time “Copilot” Mode”\u003C/span>\u003C/a>\u003C/div>\n\u003Cul>\n\u003Cli>\u003Cstrong>Autocomplete for Flows\u003C/strong>: As you drag a node, the AI suggests the next 3 most logical steps based on your current graph context.\u003C/li>\n\u003Cli>\u003Cstrong>Smart Refactoring\u003C/strong>: Select a mess of nodes and ask AI to “Optimize Layout” or “Group into Subgraph”.\u003C/li>\n\u003C/ul>\n\u003Chr>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"-q4-2026-collaboration--teams-v20\">🤝 Q4 2026: Collaboration &#x26; Teams (v2.0)\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#-q4-2026-collaboration--teams-v20\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “🤝 Q4 2026: Collaboration &#x26; Teams (v2.0)”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>\u003Cem>Focus: Turning a solo developer tool into a team powerhouse.\u003C/em>\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"-real-time-multiplayer\">👥 Real-Time Multiplayer\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#-real-time-multiplayer\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “👥 Real-Time Multiplayer”\u003C/span>\u003C/a>\u003C/div>\n\u003Cul>\n\u003Cli>\u003Cstrong>Live Cursors\u003C/strong>: See where your teammates are looking.\u003C/li>\n\u003Cli>\u003Cstrong>Conflict-Free Editing\u003C/strong>: Powered by \u003Cstrong>Yjs\u003C/strong> and CRDTs for seamless collaborative sessions.\u003C/li>\n\u003Cli>\u003Cstrong>Presence\u003C/strong>: “Who’s on this flow?” indicators.\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"-contextual-comments\">💬 Contextual Comments\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#-contextual-comments\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “💬 Contextual Comments”\u003C/span>\u003C/a>\u003C/div>\n\u003Cul>\n\u003Cli>Pin comments directly to nodes or edges.\u003C/li>\n\u003Cli>@mention team members to assigned tasks within the diagram.\u003C/li>\n\u003Cli>Resolve threads as you complete the implementation.\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"-cloud-persistence-adapter\">💾 Cloud Persistence Adapter\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#-cloud-persistence-adapter\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “💾 Cloud Persistence Adapter”\u003C/span>\u003C/a>\u003C/div>\n\u003Cul>\n\u003Cli>Optional reference implementation for saving flows to PostgreSQL/Supabase.\u003C/li>\n\u003Cli>“Project” view to organize hundreds of diagrams.\u003C/li>\n\u003C/ul>\n\u003Chr>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"️-2027-the-platform-era-v30\">🛠️ 2027: The Platform Era (v3.0)\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#️-2027-the-platform-era-v30\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “🛠️ 2027: The Platform Era (v3.0)”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>\u003Cem>Focus: Deep integration into the developer ecosystem.\u003C/em>\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"-ide-extensions\">🔌 IDE Extensions\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#-ide-extensions\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “🔌 IDE Extensions”\u003C/span>\u003C/a>\u003C/div>\n\u003Cul>\n\u003Cli>\u003Cstrong>VS Code Extension\u003C/strong>: Edit \u003Ccode dir=\"auto\">.flow\u003C/code> or \u003Ccode dir=\"auto\">.mermaid\u003C/code> files directly inside VS Code with our premium GUI.\u003C/li>\n\u003Cli>\u003Cstrong>IntelliJ / JetBrains Plugin\u003C/strong>: Native support for Java/Kotlin ecosystem diagrams.\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"-advanced-design-system\">🎨 Advanced Design System\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#-advanced-design-system\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “🎨 Advanced Design System”\u003C/span>\u003C/a>\u003C/div>\n\u003Cul>\n\u003Cli>\u003Cstrong>Figma Sync\u003C/strong>: Two-way synchronization. Push changes from Figma to OpenFlowKit and vice-versa.\u003C/li>\n\u003Cli>\u003Cstrong>Custom React Nodes\u003C/strong>: A plugin API to let developers render \u003Cem>any\u003C/em> React component inside a node (Charts, Data Grids, Videos).\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"-data-driven-diagrams\">📊 Data-Driven Diagrams\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#-data-driven-diagrams\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “📊 Data-Driven Diagrams”\u003C/span>\u003C/a>\u003C/div>\n\u003Cul>\n\u003Cli>\u003Cstrong>Live Metrics\u003C/strong>: Bind node colors/sizes to real-time API data (e.g., Server Health visualization).\u003C/li>\n\u003Cli>\u003Cstrong>SQL-to-ERD\u003C/strong>: Connect to your DB and auto-generate the Entity Relationship Diagram.\u003C/li>\n\u003C/ul>\n\u003Chr>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"-community-wishlist\">💡 Community Wishlist\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#-community-wishlist\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “💡 Community Wishlist”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Features we are exploring based on user requests:\u003C/p>\n\u003Cul class=\"contains-task-list\">\n\u003Cli class=\"task-list-item\">\u003Cinput type=\"checkbox\" disabled> \u003Cstrong>Presentation Mode\u003C/strong>: Slide-by-slide walkthrough of complex flows.\u003C/li>\n\u003Cli class=\"task-list-item\">\u003Cinput type=\"checkbox\" disabled> \u003Cstrong>Accessibility (A11y)\u003C/strong>: Screen reader support and keyboard navigation improvements.\u003C/li>\n\u003Cli class=\"task-list-item\">\u003Cinput type=\"checkbox\" disabled> \u003Cstrong>Internationalization (i18n)\u003C/strong>: Translating the UI into 10+ languages.\u003C/li>\n\u003C/ul>\n\u003Chr>\n\u003Cp>\u003Cem>Current Version: v1.0.0-beta\u003C/em>\u003Cbr>\n\u003Cem>Last Updated: February 2026\u003C/em>\u003C/p>",{"headings":567,"localImagePaths":607,"remoteImagePaths":608,"frontmatter":609,"imagePaths":610},[568,571,574,577,580,583,586,589,592,595,598,601,604],{"depth":67,"slug":569,"text":570},"️-openflowkit-product-roadmap","🗺️ OpenFlowKit Product Roadmap",{"depth":29,"slug":572,"text":573},"-q3-2026-the-ai-expansion-v12","🚀 Q3 2026: The AI Expansion (v1.2)",{"depth":36,"slug":575,"text":576},"-multi-model-ai-support","🧠 Multi-Model AI Support",{"depth":36,"slug":578,"text":579},"-real-time-copilot-mode","⚡ Real-time “Copilot” Mode",{"depth":29,"slug":581,"text":582},"-q4-2026-collaboration--teams-v20","🤝 Q4 2026: Collaboration & Teams (v2.0)",{"depth":36,"slug":584,"text":585},"-real-time-multiplayer","👥 Real-Time Multiplayer",{"depth":36,"slug":587,"text":588},"-contextual-comments","💬 Contextual Comments",{"depth":36,"slug":590,"text":591},"-cloud-persistence-adapter","💾 Cloud Persistence Adapter",{"depth":29,"slug":593,"text":594},"️-2027-the-platform-era-v30","🛠️ 2027: The Platform Era (v3.0)",{"depth":36,"slug":596,"text":597},"-ide-extensions","🔌 IDE Extensions",{"depth":36,"slug":599,"text":600},"-advanced-design-system","🎨 Advanced Design System",{"depth":36,"slug":602,"text":603},"-data-driven-diagrams","📊 Data-Driven Diagrams",{"depth":29,"slug":605,"text":606},"-community-wishlist","💡 Community Wishlist",[],[],{"draft":19,"title":557},[],"quick-start",{"id":611,"data":613,"body":618,"filePath":619,"digest":620,"rendered":621},{"title":614,"editUrl":15,"head":615,"template":17,"sidebar":616,"pagefind":15,"draft":19},"Quick Start",[],{"hidden":19,"attrs":617},{},"This guide will help you create your first diagram in FlowMind in under 2 minutes.\n\n## 1. Create a New Flow\n\nFrom the Dashboard, click the **\"Create New\"** button (or press \\`Cmd+N\\`). You will be taken to a fresh canvas.\n\n## 2. Using AI Generation\n\nThe fastest way to start is with a prompt.\n\n1.  Locate the command bar at the bottom of the screen.\n2.  Type a description of your flow.\n    *   *Example:* \"Create a user registration flow that includes email verification and database checks.\"\n3.  Press \\`Enter\\`.\n\nFlowMind will generate a complete diagram structure for you.\n\n## 3. Editing Nodes\n\nOnce generated, you can refine the diagram:\n\n*   **Move**: Click and drag any node to reposition it.\n*   **Edit Text**: Double-click a node to change its label.\n*   **Connect**: Drag from the handles (dots) on a node's edge to connect it to another node.\n\n## 4. Using Smart Layout\n\nIf your diagram gets messy, click the **\"Auto Layout\"** button in the top toolbar. FlowMind uses the ELK layout engine to automatically organize your nodes into a clean hierarchy.\n\n## 5. Exporting\n\nWhen you're happy with your flow:\n\n1.  Click the **Export** button in the top right.\n2.  Choose your format (PNG, SVG, or JSON).\n3.  Download your file.\n\n[PLACEHOLDER: GIF showing the creation process]","src/content/docs/quick-start.md","10e8d77dc7a52505",{"html":622,"metadata":623},"\u003Cp>This guide will help you create your first diagram in FlowMind in under 2 minutes.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"1-create-a-new-flow\">1. Create a New Flow\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#1-create-a-new-flow\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “1. Create a New Flow”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>From the Dashboard, click the \u003Cstrong>“Create New”\u003C/strong> button (or press `Cmd+N`). You will be taken to a fresh canvas.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"2-using-ai-generation\">2. Using AI Generation\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#2-using-ai-generation\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “2. Using AI Generation”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>The fastest way to start is with a prompt.\u003C/p>\n\u003Col>\n\u003Cli>Locate the command bar at the bottom of the screen.\u003C/li>\n\u003Cli>Type a description of your flow.\n\u003Cul>\n\u003Cli>\u003Cem>Example:\u003C/em> “Create a user registration flow that includes email verification and database checks.”\u003C/li>\n\u003C/ul>\n\u003C/li>\n\u003Cli>Press `Enter`.\u003C/li>\n\u003C/ol>\n\u003Cp>FlowMind will generate a complete diagram structure for you.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"3-editing-nodes\">3. Editing Nodes\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#3-editing-nodes\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “3. Editing Nodes”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Once generated, you can refine the diagram:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Move\u003C/strong>: Click and drag any node to reposition it.\u003C/li>\n\u003Cli>\u003Cstrong>Edit Text\u003C/strong>: Double-click a node to change its label.\u003C/li>\n\u003Cli>\u003Cstrong>Connect\u003C/strong>: Drag from the handles (dots) on a node’s edge to connect it to another node.\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"4-using-smart-layout\">4. Using Smart Layout\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#4-using-smart-layout\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “4. Using Smart Layout”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>If your diagram gets messy, click the \u003Cstrong>“Auto Layout”\u003C/strong> button in the top toolbar. FlowMind uses the ELK layout engine to automatically organize your nodes into a clean hierarchy.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"5-exporting\">5. Exporting\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#5-exporting\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “5. Exporting”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>When you’re happy with your flow:\u003C/p>\n\u003Col>\n\u003Cli>Click the \u003Cstrong>Export\u003C/strong> button in the top right.\u003C/li>\n\u003Cli>Choose your format (PNG, SVG, or JSON).\u003C/li>\n\u003Cli>Download your file.\u003C/li>\n\u003C/ol>\n\u003Cp>[PLACEHOLDER: GIF showing the creation process]\u003C/p>",{"headings":624,"localImagePaths":640,"remoteImagePaths":641,"frontmatter":642,"imagePaths":643},[625,628,631,634,637],{"depth":29,"slug":626,"text":627},"1-create-a-new-flow","1. Create a New Flow",{"depth":29,"slug":629,"text":630},"2-using-ai-generation","2. Using AI Generation",{"depth":29,"slug":632,"text":633},"3-editing-nodes","3. Editing Nodes",{"depth":29,"slug":635,"text":636},"4-using-smart-layout","4. Using Smart Layout",{"depth":29,"slug":638,"text":639},"5-exporting","5. Exporting",[],[],{"draft":19,"title":614},[],"smart-layout",{"id":644,"data":646,"body":651,"filePath":652,"digest":653,"rendered":654},{"title":647,"editUrl":15,"head":648,"template":17,"sidebar":649,"pagefind":15,"draft":19},"Smart Layout",[],{"hidden":19,"attrs":650},{},"FlowMind includes a powerful \"Smart Layout\" engine powered by **ELK (Eclipse Layout Kernel)**. \n\n## How it Works\n\nDrawing complex diagrams by hand is tedious. You spend more time ALIGNING boxes than thinking about the logic. \nSmart Layout fixes this by running a force-directed algorithm to automatically arrange your nodes.\n\n### Usage\n1.  Click the **Layout** button in the Command Center (or top toolbar).\n2.  The engine calculates the optimal position for every node and edge.\n3.  The diagram animates smoothly to its new structure.\n\n### Features\n*   **Hierarchical Layering**: Perfect for flowcharts and organizational trees.\n*   **Collision Detection**: Ensures nodes never overlap.\n*   **Edge Routing**: Minimizes line crossings for cleaner readability.\n\n> [!TIP]\n> Use Smart Layout after importing a raw Mermaid text or generating a large flow with AI to instantly tidy up the result.","src/content/docs/smart-layout.md","dbe9103f66b6c221",{"html":655,"metadata":656},"\u003Cp>FlowMind includes a powerful “Smart Layout” engine powered by \u003Cstrong>ELK (Eclipse Layout Kernel)\u003C/strong>.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"how-it-works\">How it Works\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#how-it-works\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “How it Works”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Drawing complex diagrams by hand is tedious. You spend more time ALIGNING boxes than thinking about the logic.\nSmart Layout fixes this by running a force-directed algorithm to automatically arrange your nodes.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"usage\">Usage\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#usage\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Usage”\u003C/span>\u003C/a>\u003C/div>\n\u003Col>\n\u003Cli>Click the \u003Cstrong>Layout\u003C/strong> button in the Command Center (or top toolbar).\u003C/li>\n\u003Cli>The engine calculates the optimal position for every node and edge.\u003C/li>\n\u003Cli>The diagram animates smoothly to its new structure.\u003C/li>\n\u003C/ol>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"features\">Features\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#features\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Features”\u003C/span>\u003C/a>\u003C/div>\n\u003Cul>\n\u003Cli>\u003Cstrong>Hierarchical Layering\u003C/strong>: Perfect for flowcharts and organizational trees.\u003C/li>\n\u003Cli>\u003Cstrong>Collision Detection\u003C/strong>: Ensures nodes never overlap.\u003C/li>\n\u003Cli>\u003Cstrong>Edge Routing\u003C/strong>: Minimizes line crossings for cleaner readability.\u003C/li>\n\u003C/ul>\n\u003Cblockquote>\n\u003Cp>[!TIP]\nUse Smart Layout after importing a raw Mermaid text or generating a large flow with AI to instantly tidy up the result.\u003C/p>\n\u003C/blockquote>",{"headings":657,"localImagePaths":663,"remoteImagePaths":664,"frontmatter":665,"imagePaths":666},[658,659,662],{"depth":29,"slug":101,"text":102},{"depth":36,"slug":660,"text":661},"usage","Usage",{"depth":36,"slug":188,"text":189},[],[],{"draft":19,"title":647},[],"properties-panel",{"id":667,"data":669,"body":674,"filePath":675,"digest":676,"rendered":677},{"title":670,"editUrl":15,"head":671,"template":17,"sidebar":672,"pagefind":15,"draft":19},"Properties Panel",[],{"hidden":19,"attrs":673},{},"The Properties Panel is your control center for customizing individual nodes. It appears on the right side of the screen when you select a node.\n\n## Node Customization\n\n### Label Editing\nYou can rename any node directly from the panel. The label updates in real-time on the canvas.\n\n### Visual Styling\nMake your diagrams pop with custom styles:\n*   **Colors**: Choose from a curated palette of semantic colors (Red for danger, Green for success, etc.).\n*   **Icons**: Add an icon to any node to make it instantly recognizable. We support the full Lucide React icon library.\n*   **Stroke Style**: Toggle between `Solid` and `Dashed` borders (great for representing tentative or future states).\n\n### Layout & Sizing\n*   **Width/Height**: Manually set dimensions for pixel-perfect alignment.\n*   **Position**: View and edit exact X/Y coordinates.\n\n## Bulk Editing\n\n> [!TIP]\n> You can select multiple nodes (`Shift + Click`) to edit them all at once!\n\nWhen multiple nodes are selected, the Properties Panel will apply changes (like color or icon) to **all** selected nodes.","src/content/docs/properties-panel.md","001f39fdaaca3a9b",{"html":678,"metadata":679},"\u003Cp>The Properties Panel is your control center for customizing individual nodes. It appears on the right side of the screen when you select a node.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"node-customization\">Node Customization\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#node-customization\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Node Customization”\u003C/span>\u003C/a>\u003C/div>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"label-editing\">Label Editing\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#label-editing\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Label Editing”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>You can rename any node directly from the panel. The label updates in real-time on the canvas.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"visual-styling\">Visual Styling\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#visual-styling\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Visual Styling”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Make your diagrams pop with custom styles:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Colors\u003C/strong>: Choose from a curated palette of semantic colors (Red for danger, Green for success, etc.).\u003C/li>\n\u003Cli>\u003Cstrong>Icons\u003C/strong>: Add an icon to any node to make it instantly recognizable. We support the full Lucide React icon library.\u003C/li>\n\u003Cli>\u003Cstrong>Stroke Style\u003C/strong>: Toggle between \u003Ccode dir=\"auto\">Solid\u003C/code> and \u003Ccode dir=\"auto\">Dashed\u003C/code> borders (great for representing tentative or future states).\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"layout--sizing\">Layout &#x26; Sizing\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#layout--sizing\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Layout &#x26; Sizing”\u003C/span>\u003C/a>\u003C/div>\n\u003Cul>\n\u003Cli>\u003Cstrong>Width/Height\u003C/strong>: Manually set dimensions for pixel-perfect alignment.\u003C/li>\n\u003Cli>\u003Cstrong>Position\u003C/strong>: View and edit exact X/Y coordinates.\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"bulk-editing\">Bulk Editing\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#bulk-editing\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Bulk Editing”\u003C/span>\u003C/a>\u003C/div>\n\u003Cblockquote>\n\u003Cp>[!TIP]\nYou can select multiple nodes (\u003Ccode dir=\"auto\">Shift + Click\u003C/code>) to edit them all at once!\u003C/p>\n\u003C/blockquote>\n\u003Cp>When multiple nodes are selected, the Properties Panel will apply changes (like color or icon) to \u003Cstrong>all\u003C/strong> selected nodes.\u003C/p>",{"headings":680,"localImagePaths":696,"remoteImagePaths":697,"frontmatter":698,"imagePaths":699},[681,684,687,690,693],{"depth":29,"slug":682,"text":683},"node-customization","Node Customization",{"depth":36,"slug":685,"text":686},"label-editing","Label Editing",{"depth":36,"slug":688,"text":689},"visual-styling","Visual Styling",{"depth":36,"slug":691,"text":692},"layout--sizing","Layout & Sizing",{"depth":29,"slug":694,"text":695},"bulk-editing","Bulk Editing",[],[],{"draft":19,"title":670},[],"theming",{"id":700,"data":702,"body":707,"filePath":708,"digest":709,"rendered":710},{"title":703,"editUrl":15,"head":704,"template":17,"sidebar":705,"pagefind":15,"draft":19},"Theming",[],{"hidden":19,"attrs":706},{},"Customize FlowMind to match your personal preference or brand identity.\n\n## Brand Settings\n\nNavigate to **Settings > Brand Kit** to configure:\n\n*   **Primary Color**: The main accent color for buttons, active states, and focused nodes.\n*   **Background**: The canvas background color.\n*   **Surface**: The color of panels and sidebars.\n*   **Logo**: Upload your own logo to replace the FlowMind icon in the sidebar.\n\n\n\n## Export Settings\n\nWhen exporting images (PNG/SVG):\n*   **Transparent Background**: Toggle this if you want to overlay the diagram on slides.\n*   **Scale**: Increase scale (e.g., 2x, 3x) for high-resolution printing.\n*   **Include Watermark**: You can disable the branding watermark in the export settings.","src/content/docs/theming.md","136feaa41f956dc6",{"html":711,"metadata":712},"\u003Cp>Customize FlowMind to match your personal preference or brand identity.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"brand-settings\">Brand Settings\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#brand-settings\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Brand Settings”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Navigate to \u003Cstrong>Settings > Brand Kit\u003C/strong> to configure:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Primary Color\u003C/strong>: The main accent color for buttons, active states, and focused nodes.\u003C/li>\n\u003Cli>\u003Cstrong>Background\u003C/strong>: The canvas background color.\u003C/li>\n\u003Cli>\u003Cstrong>Surface\u003C/strong>: The color of panels and sidebars.\u003C/li>\n\u003Cli>\u003Cstrong>Logo\u003C/strong>: Upload your own logo to replace the FlowMind icon in the sidebar.\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"export-settings\">Export Settings\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#export-settings\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Export Settings”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>When exporting images (PNG/SVG):\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Transparent Background\u003C/strong>: Toggle this if you want to overlay the diagram on slides.\u003C/li>\n\u003Cli>\u003Cstrong>Scale\u003C/strong>: Increase scale (e.g., 2x, 3x) for high-resolution printing.\u003C/li>\n\u003Cli>\u003Cstrong>Include Watermark\u003C/strong>: You can disable the branding watermark in the export settings.\u003C/li>\n\u003C/ul>",{"headings":713,"localImagePaths":720,"remoteImagePaths":721,"frontmatter":722,"imagePaths":723},[714,717],{"depth":29,"slug":715,"text":716},"brand-settings","Brand Settings",{"depth":29,"slug":718,"text":719},"export-settings","Export Settings",[],[],{"draft":19,"title":703},[],"tr/ask-flowpilot",{"id":724,"data":726,"body":730,"filePath":731,"digest":732,"rendered":733},{"title":155,"editUrl":15,"head":727,"template":17,"sidebar":728,"pagefind":15,"draft":19},[],{"hidden":19,"attrs":729},{},"# Flowpilot Asistanına Sor\n\nBu sayfa, `DocsPage.tsx` içindeki AI Asistan bileşeni tarafından dinamik olarak değiştirilir. Bu dosya yalnızca Vite dinamik glob içe aktarıcısını ve yönlendirme mantığını karşılamak için mevcuttur.","src/content/docs/tr/ask-flowpilot.md","027005108468d86a",{"html":734,"metadata":735},"\u003Cdiv class=\"sl-heading-wrapper level-h1\">\u003Ch1 id=\"flowpilot-asistanına-sor\">Flowpilot Asistanına Sor\u003C/h1>\u003Ca class=\"sl-anchor-link\" href=\"#flowpilot-asistanına-sor\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Flowpilot Asistanına Sor”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Bu sayfa, \u003Ccode dir=\"auto\">DocsPage.tsx\u003C/code> içindeki AI Asistan bileşeni tarafından dinamik olarak değiştirilir. Bu dosya yalnızca Vite dinamik glob içe aktarıcısını ve yönlendirme mantığını karşılamak için mevcuttur.\u003C/p>",{"headings":736,"localImagePaths":740,"remoteImagePaths":741,"frontmatter":742,"imagePaths":743},[737],{"depth":67,"slug":738,"text":739},"flowpilot-asistanına-sor","Flowpilot Asistanına Sor",[],[],{"draft":19,"title":155},[],"v1-beta-launch",{"id":744,"data":746,"body":751,"filePath":752,"digest":753,"rendered":754},{"title":747,"editUrl":15,"head":748,"template":17,"sidebar":749,"pagefind":15,"draft":19},"V1 Beta Launch",[],{"hidden":19,"attrs":750},{},"# 🚀 OpenFlowKit V1 Beta: The Future of Diagram-as-Code is Here\n\nWe are beyond excited to officially announce the **OpenFlowKit V1 Beta**. What started as a simple flowchart tool has evolved into a comprehensive, white-label diagramming ecosystem designed for developers who demand premium aesthetics and local-first reliability.\n\nThis release marks a fundamental shift in our mission: **OpenFlowKit is no longer just an app; it's a foundation for your next project.**\n\n---\n\n## 🏗️ What's New in V1 Beta?\n\n### 🎨 The Brand Engine (True White-Labeling)\nMost diagramming tools force you to look like their product. OpenFlowKit is the first open-source tool built to look like **yours**.\n- **Dynamic Palette Generation**: Enter one primary color, and our engine generates a smooth, harmonious design system including surface, background, and accent colors.\n- **Typography Integration**: Native Google Fonts support allows you to sync your app's typography directly with the canvas.\n- **UI Physics**: Toggle Glassmorphism and adjust border radiuses to match your brand's aesthetic density.\n\n### 📜 Diagram-as-Code (DaC) Second-to-None\nWe treat diagrams as data. Whether you're a Mermaid.js power user or prefer a custom DSL, we've got you covered.\n- **Expanded Mermaid Support**: Full fidelity for Flowcharts, State Diagrams, and Subgraphs.\n- **FlowMind DSL**: A human-readable notation designed for rapid prototyping without touching a mouse.\n- **Live Sync**: Visual changes and code changes stay perfectly in sync, offering the best of both worlds.\n\n### 💎 Figma Fidelity Export\nStop screenshotting! Our \"Figma-First\" export strategy ensures your diagrams belong in your design files.\n- **Vector Perfection**: Export clean SVGs that maintain stroke precision and rounded corners.\n- **Editable Text**: Labels are exported as native SVG text blocks, meaning you can fix typos directly in Figma without redrawing.\n\n### 🔑 Privacy-First AI (BYOK)\nAI is powerful, but your data is private. Our **Bring Your Own Key** model puts you in control.\n- **Gemini Powered**: Use your own Gemini API key for intelligent diagram generation.\n- **Local Storage**: Your API keys are stored locally in your browser and never touch our servers.\n\n### 🖼️ Image-to-Flowchart (Vision AI)\nSketch it, scan it, ship it.\n- **Visual Recognition**: Upload a photo of a whiteboard session or napkin sketch.\n- **Instant Conversion**: Our AI analyzes the visual structure and converts it into a fully editable, semantic flowchart in seconds.\n\n### 📦 The Library Ecosystem\nIn addition to the standalone editor, we've extracted OpenFlowKit's core into `@openflowkit/core`. This allows developers to embed our state-of-the-art parsers and theming logic into their own applications.\n\n---\n\n## 🌟 The Philosophy: Premium & Open\nWe believe that open-source tools shouldn't \"look\" like open-source tools. OpenFlowKit V1 Beta brings the polish of a billion-dollar SaaS product to the open-source community, 100% free under the MIT license.\n\n---\n\n## 🛣️ What's Next?\nThe V1 Beta is just the beginning. We are working on:\n- **Collaborative Real-Time Editing** (Yjs/WebRTC).\n- **Expanded Component Libraries** for wireframing.\n- **Direct Figma Plugin** integration.\n\n---\n\n## ❤️ Get Involved\nOpenFlowKit is built by and for developers.\n- ⭐️ **Star us on GitHub**: Help us reach more developers!\n- 💬 **Join the Discussion**: Share your brand kits and feedback.\n- 🛠️ **Contribute**: Check out the `CONTRIBUTING.md` to help build the future of diagramming.\n\n**Happy Diagramming!**  \n*The OpenFlowKit Team*","src/content/docs/v1-beta-launch.md","427102a3c87c3431",{"html":755,"metadata":756},"\u003Cdiv class=\"sl-heading-wrapper level-h1\">\u003Ch1 id=\"-openflowkit-v1-beta-the-future-of-diagram-as-code-is-here\">🚀 OpenFlowKit V1 Beta: The Future of Diagram-as-Code is Here\u003C/h1>\u003Ca class=\"sl-anchor-link\" href=\"#-openflowkit-v1-beta-the-future-of-diagram-as-code-is-here\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “🚀 OpenFlowKit V1 Beta: The Future of Diagram-as-Code is Here”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>We are beyond excited to officially announce the \u003Cstrong>OpenFlowKit V1 Beta\u003C/strong>. What started as a simple flowchart tool has evolved into a comprehensive, white-label diagramming ecosystem designed for developers who demand premium aesthetics and local-first reliability.\u003C/p>\n\u003Cp>This release marks a fundamental shift in our mission: \u003Cstrong>OpenFlowKit is no longer just an app; it’s a foundation for your next project.\u003C/strong>\u003C/p>\n\u003Chr>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"️-whats-new-in-v1-beta\">🏗️ What’s New in V1 Beta?\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#️-whats-new-in-v1-beta\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “🏗️ What’s New in V1 Beta?”\u003C/span>\u003C/a>\u003C/div>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"-the-brand-engine-true-white-labeling\">🎨 The Brand Engine (True White-Labeling)\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#-the-brand-engine-true-white-labeling\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “🎨 The Brand Engine (True White-Labeling)”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Most diagramming tools force you to look like their product. OpenFlowKit is the first open-source tool built to look like \u003Cstrong>yours\u003C/strong>.\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Dynamic Palette Generation\u003C/strong>: Enter one primary color, and our engine generates a smooth, harmonious design system including surface, background, and accent colors.\u003C/li>\n\u003Cli>\u003Cstrong>Typography Integration\u003C/strong>: Native Google Fonts support allows you to sync your app’s typography directly with the canvas.\u003C/li>\n\u003Cli>\u003Cstrong>UI Physics\u003C/strong>: Toggle Glassmorphism and adjust border radiuses to match your brand’s aesthetic density.\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"-diagram-as-code-dac-second-to-none\">📜 Diagram-as-Code (DaC) Second-to-None\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#-diagram-as-code-dac-second-to-none\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “📜 Diagram-as-Code (DaC) Second-to-None”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>We treat diagrams as data. Whether you’re a Mermaid.js power user or prefer a custom DSL, we’ve got you covered.\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Expanded Mermaid Support\u003C/strong>: Full fidelity for Flowcharts, State Diagrams, and Subgraphs.\u003C/li>\n\u003Cli>\u003Cstrong>FlowMind DSL\u003C/strong>: A human-readable notation designed for rapid prototyping without touching a mouse.\u003C/li>\n\u003Cli>\u003Cstrong>Live Sync\u003C/strong>: Visual changes and code changes stay perfectly in sync, offering the best of both worlds.\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"-figma-fidelity-export\">💎 Figma Fidelity Export\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#-figma-fidelity-export\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “💎 Figma Fidelity Export”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Stop screenshotting! Our “Figma-First” export strategy ensures your diagrams belong in your design files.\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Vector Perfection\u003C/strong>: Export clean SVGs that maintain stroke precision and rounded corners.\u003C/li>\n\u003Cli>\u003Cstrong>Editable Text\u003C/strong>: Labels are exported as native SVG text blocks, meaning you can fix typos directly in Figma without redrawing.\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"-privacy-first-ai-byok\">🔑 Privacy-First AI (BYOK)\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#-privacy-first-ai-byok\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “🔑 Privacy-First AI (BYOK)”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>AI is powerful, but your data is private. Our \u003Cstrong>Bring Your Own Key\u003C/strong> model puts you in control.\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Gemini Powered\u003C/strong>: Use your own Gemini API key for intelligent diagram generation.\u003C/li>\n\u003Cli>\u003Cstrong>Local Storage\u003C/strong>: Your API keys are stored locally in your browser and never touch our servers.\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"️-image-to-flowchart-vision-ai\">🖼️ Image-to-Flowchart (Vision AI)\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#️-image-to-flowchart-vision-ai\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “🖼️ Image-to-Flowchart (Vision AI)”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Sketch it, scan it, ship it.\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Visual Recognition\u003C/strong>: Upload a photo of a whiteboard session or napkin sketch.\u003C/li>\n\u003Cli>\u003Cstrong>Instant Conversion\u003C/strong>: Our AI analyzes the visual structure and converts it into a fully editable, semantic flowchart in seconds.\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"-the-library-ecosystem\">📦 The Library Ecosystem\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#-the-library-ecosystem\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “📦 The Library Ecosystem”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>In addition to the standalone editor, we’ve extracted OpenFlowKit’s core into \u003Ccode dir=\"auto\">@openflowkit/core\u003C/code>. This allows developers to embed our state-of-the-art parsers and theming logic into their own applications.\u003C/p>\n\u003Chr>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"-the-philosophy-premium--open\">🌟 The Philosophy: Premium &#x26; Open\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#-the-philosophy-premium--open\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “🌟 The Philosophy: Premium &#x26; Open”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>We believe that open-source tools shouldn’t “look” like open-source tools. OpenFlowKit V1 Beta brings the polish of a billion-dollar SaaS product to the open-source community, 100% free under the MIT license.\u003C/p>\n\u003Chr>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"️-whats-next\">🛣️ What’s Next?\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#️-whats-next\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “🛣️ What’s Next?”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>The V1 Beta is just the beginning. We are working on:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Collaborative Real-Time Editing\u003C/strong> (Yjs/WebRTC).\u003C/li>\n\u003Cli>\u003Cstrong>Expanded Component Libraries\u003C/strong> for wireframing.\u003C/li>\n\u003Cli>\u003Cstrong>Direct Figma Plugin\u003C/strong> integration.\u003C/li>\n\u003C/ul>\n\u003Chr>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"️-get-involved\">❤️ Get Involved\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#️-get-involved\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “❤️ Get Involved”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>OpenFlowKit is built by and for developers.\u003C/p>\n\u003Cul>\n\u003Cli>⭐️ \u003Cstrong>Star us on GitHub\u003C/strong>: Help us reach more developers!\u003C/li>\n\u003Cli>💬 \u003Cstrong>Join the Discussion\u003C/strong>: Share your brand kits and feedback.\u003C/li>\n\u003Cli>🛠️ \u003Cstrong>Contribute\u003C/strong>: Check out the \u003Ccode dir=\"auto\">CONTRIBUTING.md\u003C/code> to help build the future of diagramming.\u003C/li>\n\u003C/ul>\n\u003Cp>\u003Cstrong>Happy Diagramming!\u003C/strong>\u003Cbr>\n\u003Cem>The OpenFlowKit Team\u003C/em>\u003C/p>",{"headings":757,"localImagePaths":791,"remoteImagePaths":792,"frontmatter":793,"imagePaths":794},[758,761,764,767,770,773,776,779,782,785,788],{"depth":67,"slug":759,"text":760},"-openflowkit-v1-beta-the-future-of-diagram-as-code-is-here","🚀 OpenFlowKit V1 Beta: The Future of Diagram-as-Code is Here",{"depth":29,"slug":762,"text":763},"️-whats-new-in-v1-beta","🏗️ What’s New in V1 Beta?",{"depth":36,"slug":765,"text":766},"-the-brand-engine-true-white-labeling","🎨 The Brand Engine (True White-Labeling)",{"depth":36,"slug":768,"text":769},"-diagram-as-code-dac-second-to-none","📜 Diagram-as-Code (DaC) Second-to-None",{"depth":36,"slug":771,"text":772},"-figma-fidelity-export","💎 Figma Fidelity Export",{"depth":36,"slug":774,"text":775},"-privacy-first-ai-byok","🔑 Privacy-First AI (BYOK)",{"depth":36,"slug":777,"text":778},"️-image-to-flowchart-vision-ai","🖼️ Image-to-Flowchart (Vision AI)",{"depth":36,"slug":780,"text":781},"-the-library-ecosystem","📦 The Library Ecosystem",{"depth":29,"slug":783,"text":784},"-the-philosophy-premium--open","🌟 The Philosophy: Premium & Open",{"depth":29,"slug":786,"text":787},"️-whats-next","🛣️ What’s Next?",{"depth":29,"slug":789,"text":790},"️-get-involved","❤️ Get Involved",[],[],{"draft":19,"title":747},[],"tr/ai-generation",{"id":795,"data":797,"body":801,"filePath":802,"digest":803,"rendered":804},{"title":89,"editUrl":15,"head":798,"template":17,"sidebar":799,"pagefind":15,"draft":19},[],{"hidden":19,"attrs":800},{},"FlowMind, doğal dili anlayarak yapısal diyagramlara dönüştürmek için Google'ın **Gemini 2.0 Flash** modelinden yararlanır.\n\n## Nasıl Çalışır?\n\n1.  **Niyet Analizi**: Yapay zeka, isteminizi analiz ederek *hedefi* (örn. \"Giriş Akışı\") ve *aktörleri* (Kullanıcı, Sunucu, Veritabanı) anlar.\n2.  **Yapısal Üretim**: Düğümleri ve bağlantıları temsil eden geçerli bir FlowMind DSL JSON nesnesi oluşturur.\n3.  **Düzen Optimizasyonu**: Motor, oluşturulan grafiğin okunabilir olmasını sağlamak için akıllı düzen algoritmaları uygular.\n\n## İstemler İçin En İyi Uygulamalar\n\nEn iyi sonuçları elde etmek için **adımlar** ve **çıktı** hakkında spesifik olun.\n\n### ❌ Çok Belirsiz\n> \"Bir sistem diyagramı yap.\"\n\n### ✅ İyi\n> \"Bir e-ticaret platformu için üst düzey sistem mimarisi oluştur. Web Uygulaması, API Ağ Geçidi, Kullanıcı Servisi, Ürün Servisi ve ortak bir PostgreSQL veritabanı içersin.\"\n\n### ✅ Daha İyi (Süreç Akışı)\n> \"Kullanıcı şifre sıfırlama süreci için bir akış diyagramı çiz. 'Kullanıcı şifremi unuttum'a tıklar' ile başla, e-postanın var olup olmadığını kontrol et. Evet ise benzersiz token gönder. Hayır ise hata göster. 'Kullanıcı yeni şifresini girer' ile bitir.\"\n\n## Yapay Zeka Sonuçlarını Düzenleme\n\nYapay zeka üretimi bir başlangıç noktasıdır, son nokta değil. Her zaman şunları yapabilirsiniz:\n*   Eksik adımları manuel olarak ekleyin.\n*   Netlik için düğümleri yeniden adlandırın.\n*   Belirli bölümleri yeniden oluşturun (Yakında).\n\n## 🔑 Kendi Anahtarını Getir (BYOK)\n\nFlowMind varsayılan olarak sınırlı kotaya sahip paylaşımlı bir API anahtarı kullanır. Yoğun kullanım, gizlilik veya kendi faturalandırmanızı kullanmak için kendi **Gemini API Anahtarınızı** getirebilirsiniz.\n\n1.  **Google AI Studio**'ya gidin ve [API Anahtarı Alın](https://aistudio.google.com/app/apikey).\n2.  FlowMind'da **Ayarlar**'ı (Dişli Simgesi) açın veya herhangi bir **Marka Kiti**'ne tıklayın.\n3.  **Yapay Zeka** sekmesine gidin.\n4.  Anahtarınızı güvenli giriş alanına yapıştırın.\n\n> [!NOTE]\n> Anahtarınız tarayıcınızın `localStorage` alanında yerel olarak saklanır ve sunucularımıza hiçbir zaman gönderilmez. Yalnızca Google'a yapılan istemci taraflı API çağrıları için kullanılır.","src/content/docs/tr/ai-generation.md","c843d448cc232314",{"html":805,"metadata":806},"\u003Cp>FlowMind, doğal dili anlayarak yapısal diyagramlara dönüştürmek için Google’ın \u003Cstrong>Gemini 2.0 Flash\u003C/strong> modelinden yararlanır.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"nasıl-çalışır\">Nasıl Çalışır?\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#nasıl-çalışır\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Nasıl Çalışır?”\u003C/span>\u003C/a>\u003C/div>\n\u003Col>\n\u003Cli>\u003Cstrong>Niyet Analizi\u003C/strong>: Yapay zeka, isteminizi analiz ederek \u003Cem>hedefi\u003C/em> (örn. “Giriş Akışı”) ve \u003Cem>aktörleri\u003C/em> (Kullanıcı, Sunucu, Veritabanı) anlar.\u003C/li>\n\u003Cli>\u003Cstrong>Yapısal Üretim\u003C/strong>: Düğümleri ve bağlantıları temsil eden geçerli bir FlowMind DSL JSON nesnesi oluşturur.\u003C/li>\n\u003Cli>\u003Cstrong>Düzen Optimizasyonu\u003C/strong>: Motor, oluşturulan grafiğin okunabilir olmasını sağlamak için akıllı düzen algoritmaları uygular.\u003C/li>\n\u003C/ol>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"i̇stemler-i̇çin-en-i̇yi-uygulamalar\">İstemler İçin En İyi Uygulamalar\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#i̇stemler-i̇çin-en-i̇yi-uygulamalar\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “İstemler İçin En İyi Uygulamalar”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>En iyi sonuçları elde etmek için \u003Cstrong>adımlar\u003C/strong> ve \u003Cstrong>çıktı\u003C/strong> hakkında spesifik olun.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"-çok-belirsiz\">❌ Çok Belirsiz\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#-çok-belirsiz\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “❌ Çok Belirsiz”\u003C/span>\u003C/a>\u003C/div>\n\u003Cblockquote>\n\u003Cp>“Bir sistem diyagramı yap.”\u003C/p>\n\u003C/blockquote>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"-i̇yi\">✅ İyi\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#-i̇yi\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “✅ İyi”\u003C/span>\u003C/a>\u003C/div>\n\u003Cblockquote>\n\u003Cp>“Bir e-ticaret platformu için üst düzey sistem mimarisi oluştur. Web Uygulaması, API Ağ Geçidi, Kullanıcı Servisi, Ürün Servisi ve ortak bir PostgreSQL veritabanı içersin.”\u003C/p>\n\u003C/blockquote>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"-daha-i̇yi-süreç-akışı\">✅ Daha İyi (Süreç Akışı)\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#-daha-i̇yi-süreç-akışı\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “✅ Daha İyi (Süreç Akışı)”\u003C/span>\u003C/a>\u003C/div>\n\u003Cblockquote>\n\u003Cp>“Kullanıcı şifre sıfırlama süreci için bir akış diyagramı çiz. ‘Kullanıcı şifremi unuttum’a tıklar’ ile başla, e-postanın var olup olmadığını kontrol et. Evet ise benzersiz token gönder. Hayır ise hata göster. ‘Kullanıcı yeni şifresini girer’ ile bitir.”\u003C/p>\n\u003C/blockquote>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"yapay-zeka-sonuçlarını-düzenleme\">Yapay Zeka Sonuçlarını Düzenleme\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#yapay-zeka-sonuçlarını-düzenleme\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Yapay Zeka Sonuçlarını Düzenleme”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Yapay zeka üretimi bir başlangıç noktasıdır, son nokta değil. Her zaman şunları yapabilirsiniz:\u003C/p>\n\u003Cul>\n\u003Cli>Eksik adımları manuel olarak ekleyin.\u003C/li>\n\u003Cli>Netlik için düğümleri yeniden adlandırın.\u003C/li>\n\u003Cli>Belirli bölümleri yeniden oluşturun (Yakında).\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"-kendi-anahtarını-getir-byok\">🔑 Kendi Anahtarını Getir (BYOK)\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#-kendi-anahtarını-getir-byok\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “🔑 Kendi Anahtarını Getir (BYOK)”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>FlowMind varsayılan olarak sınırlı kotaya sahip paylaşımlı bir API anahtarı kullanır. Yoğun kullanım, gizlilik veya kendi faturalandırmanızı kullanmak için kendi \u003Cstrong>Gemini API Anahtarınızı\u003C/strong> getirebilirsiniz.\u003C/p>\n\u003Col>\n\u003Cli>\u003Cstrong>Google AI Studio\u003C/strong>’ya gidin ve \u003Ca href=\"https://aistudio.google.com/app/apikey\">API Anahtarı Alın\u003C/a>.\u003C/li>\n\u003Cli>FlowMind’da \u003Cstrong>Ayarlar\u003C/strong>’ı (Dişli Simgesi) açın veya herhangi bir \u003Cstrong>Marka Kiti\u003C/strong>’ne tıklayın.\u003C/li>\n\u003Cli>\u003Cstrong>Yapay Zeka\u003C/strong> sekmesine gidin.\u003C/li>\n\u003Cli>Anahtarınızı güvenli giriş alanına yapıştırın.\u003C/li>\n\u003C/ol>\n\u003Cblockquote>\n\u003Cp>[!NOTE]\nAnahtarınız tarayıcınızın \u003Ccode dir=\"auto\">localStorage\u003C/code> alanında yerel olarak saklanır ve sunucularımıza hiçbir zaman gönderilmez. Yalnızca Google’a yapılan istemci taraflı API çağrıları için kullanılır.\u003C/p>\n\u003C/blockquote>",{"headings":807,"localImagePaths":829,"remoteImagePaths":830,"frontmatter":831,"imagePaths":832},[808,811,814,817,820,823,826],{"depth":29,"slug":809,"text":810},"nasıl-çalışır","Nasıl Çalışır?",{"depth":29,"slug":812,"text":813},"i̇stemler-i̇çin-en-i̇yi-uygulamalar","İstemler İçin En İyi Uygulamalar",{"depth":36,"slug":815,"text":816},"-çok-belirsiz","❌ Çok Belirsiz",{"depth":36,"slug":818,"text":819},"-i̇yi","✅ İyi",{"depth":36,"slug":821,"text":822},"-daha-i̇yi-süreç-akışı","✅ Daha İyi (Süreç Akışı)",{"depth":29,"slug":824,"text":825},"yapay-zeka-sonuçlarını-düzenleme","Yapay Zeka Sonuçlarını Düzenleme",{"depth":29,"slug":827,"text":828},"-kendi-anahtarını-getir-byok","🔑 Kendi Anahtarını Getir (BYOK)",[],[],{"draft":19,"title":89},[],"tr/canvas-basics",{"id":833,"data":835,"body":839,"filePath":840,"digest":841,"rendered":842},{"title":14,"editUrl":15,"head":836,"template":17,"sidebar":837,"pagefind":15,"draft":19},[],{"hidden":19,"attrs":838},{},"FlowMind tuvali sonsuz, etkileşimli bir çalışma alanıdır. Etkin biçimde gezinmek ve kullanmak için aşağıdaki rehberi inceleyin.\n\n## Gezinti\n\n*   **Kaydırma**: Belirli fare eylemi (örn. Boşluk Tuşu + Sürükle veya Orta Tıklama + Sürükle) tuval görünümünü taşır.\n*   **Yakınlaştırma**: Fare tekerleğini kullanarak yakınlaştırın ve uzaklaştırın.\n*   **Görünüme Sığdır**: Tüm düğümleri görünüme sığdırmak için \\`Shift + 1\\` tuşlarına basın.\n\n## Düğüm İşlemleri\n\n### Düğüm Seçme\n*   **Tekli Seçim**: Bir düğüme tıklayın.\n*   **Çoklu Seçim**: \\`Shift\\` tuşunu basılı tutarak birden fazla düğüme tıklayın veya etraflarına bir seçim kutusu çizmek için tıklayıp sürükleyin.\n\n### Kopyalama\nBir veya daha fazla düğümü seçin ve kopyalamak için \\`Cmd + D\\` (Mac) veya \\`Ctrl + D\\` (Windows) tuşlarına basın.\n\n### Silme\nDüğümleri seçin ve \\`Backspace\\` veya \\`Delete\\` tuşuna basın.\n\n## Mini Harita\n\nSağ alt köşedeki Mini Harita, tüm akışınıza genel bir bakış sunar. Büyük diyagramlarda hızlıca gezinmek için mini haritanın içindeki görünüm kutusunu sürükleyebilirsiniz.\n\n[YER TUTUCU: Çağrı açıklamalarıyla Tuval Arayüzü görseli]","src/content/docs/tr/canvas-basics.md","c525107ec2515892",{"html":843,"metadata":844},"\u003Cp>FlowMind tuvali sonsuz, etkileşimli bir çalışma alanıdır. Etkin biçimde gezinmek ve kullanmak için aşağıdaki rehberi inceleyin.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"gezinti\">Gezinti\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#gezinti\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Gezinti”\u003C/span>\u003C/a>\u003C/div>\n\u003Cul>\n\u003Cli>\u003Cstrong>Kaydırma\u003C/strong>: Belirli fare eylemi (örn. Boşluk Tuşu + Sürükle veya Orta Tıklama + Sürükle) tuval görünümünü taşır.\u003C/li>\n\u003Cli>\u003Cstrong>Yakınlaştırma\u003C/strong>: Fare tekerleğini kullanarak yakınlaştırın ve uzaklaştırın.\u003C/li>\n\u003Cli>\u003Cstrong>Görünüme Sığdır\u003C/strong>: Tüm düğümleri görünüme sığdırmak için `Shift + 1` tuşlarına basın.\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"düğüm-i̇şlemleri\">Düğüm İşlemleri\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#düğüm-i̇şlemleri\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Düğüm İşlemleri”\u003C/span>\u003C/a>\u003C/div>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"düğüm-seçme\">Düğüm Seçme\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#düğüm-seçme\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Düğüm Seçme”\u003C/span>\u003C/a>\u003C/div>\n\u003Cul>\n\u003Cli>\u003Cstrong>Tekli Seçim\u003C/strong>: Bir düğüme tıklayın.\u003C/li>\n\u003Cli>\u003Cstrong>Çoklu Seçim\u003C/strong>: `Shift` tuşunu basılı tutarak birden fazla düğüme tıklayın veya etraflarına bir seçim kutusu çizmek için tıklayıp sürükleyin.\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"kopyalama\">Kopyalama\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#kopyalama\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Kopyalama”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Bir veya daha fazla düğümü seçin ve kopyalamak için `Cmd + D` (Mac) veya `Ctrl + D` (Windows) tuşlarına basın.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"silme\">Silme\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#silme\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Silme”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Düğümleri seçin ve `Backspace` veya `Delete` tuşuna basın.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"mini-harita\">Mini Harita\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#mini-harita\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Mini Harita”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Sağ alt köşedeki Mini Harita, tüm akışınıza genel bir bakış sunar. Büyük diyagramlarda hızlıca gezinmek için mini haritanın içindeki görünüm kutusunu sürükleyebilirsiniz.\u003C/p>\n\u003Cp>[YER TUTUCU: Çağrı açıklamalarıyla Tuval Arayüzü görseli]\u003C/p>",{"headings":845,"localImagePaths":864,"remoteImagePaths":865,"frontmatter":866,"imagePaths":867},[846,849,852,855,858,861],{"depth":29,"slug":847,"text":848},"gezinti","Gezinti",{"depth":29,"slug":850,"text":851},"düğüm-i̇şlemleri","Düğüm İşlemleri",{"depth":36,"slug":853,"text":854},"düğüm-seçme","Düğüm Seçme",{"depth":36,"slug":856,"text":857},"kopyalama","Kopyalama",{"depth":36,"slug":859,"text":860},"silme","Silme",{"depth":29,"slug":862,"text":863},"mini-harita","Mini Harita",[],[],{"draft":19,"title":14},[],"tr/command-center",{"id":868,"data":870,"body":874,"filePath":875,"digest":876,"rendered":877},{"title":176,"editUrl":15,"head":871,"template":17,"sidebar":872,"pagefind":15,"draft":19},[],{"hidden":19,"attrs":873},{},"Komut Merkezi, ekranın alt kısmındaki kayan araç çubuğudur. FlowMind'ın \"klavye öncelikli\" iş akışının kalbidir.\n\n> [!NOTE]\n> Komut Merkezini istediğiniz zaman `Cmd + K` (Mac) veya `Ctrl + K` (Windows) tuşlarına basarak açabilirsiniz.\n\n## Özellikler\n\n### 1. Şablonlar\nSıfırdan başlamayın. Önceden hazırlanmış diyagram kütüphanesine erişin:\n*   AWS Mimari Şablonları\n*   Kullanıcı Yolculuğu Haritaları\n*   Veritabanı Şemaları\n*   Organizasyon Şemaları\n\n### 2. Tasarım Sistemi / Görseller\nDiyagramınızı zenginleştirmek için varlık kütüphanesine erişin:\n*   **Tel Çerçeveler**: Hızlı taslaklar oluşturmak için düşük kaliteli UI bileşenlerini (Düğmeler, Girişler, Modaller) sürükleyip bırakın.\n*   **İkonlar**: Herhangi bir ikonu bağımsız bir düğüm olarak arayın ve ekleyin.\n\n### 3. Yapay Zeka Copilot\nKomut Merkezindeki metin girişi, yapay zeka motorumuza doğrudan bağlantınızdır. Ne oluşturmak istediğinizi yazın ve `Enter` tuşuna basarak anında oluşturun.\n\n### 4. Düzen ve Araçlar\nYardımcı işlevlere hızlıca erişin:\n*   **Otomatik Düzen**: Karmaşıklığı düzenleyin.\n*   **Görünümü Sıfırla**: Merkeze geri dönün.\n*   **Kodu Biçimlendir**: DSL'nizi düzenleyin.","src/content/docs/tr/command-center.md","98fcf5c5e7afa893",{"html":878,"metadata":879},"\u003Cp>Komut Merkezi, ekranın alt kısmındaki kayan araç çubuğudur. FlowMind’ın “klavye öncelikli” iş akışının kalbidir.\u003C/p>\n\u003Cblockquote>\n\u003Cp>[!NOTE]\nKomut Merkezini istediğiniz zaman \u003Ccode dir=\"auto\">Cmd + K\u003C/code> (Mac) veya \u003Ccode dir=\"auto\">Ctrl + K\u003C/code> (Windows) tuşlarına basarak açabilirsiniz.\u003C/p>\n\u003C/blockquote>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"özellikler\">Özellikler\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#özellikler\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Özellikler”\u003C/span>\u003C/a>\u003C/div>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"1-şablonlar\">1. Şablonlar\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#1-şablonlar\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “1. Şablonlar”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Sıfırdan başlamayın. Önceden hazırlanmış diyagram kütüphanesine erişin:\u003C/p>\n\u003Cul>\n\u003Cli>AWS Mimari Şablonları\u003C/li>\n\u003Cli>Kullanıcı Yolculuğu Haritaları\u003C/li>\n\u003Cli>Veritabanı Şemaları\u003C/li>\n\u003Cli>Organizasyon Şemaları\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"2-tasarım-sistemi--görseller\">2. Tasarım Sistemi / Görseller\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#2-tasarım-sistemi--görseller\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “2. Tasarım Sistemi / Görseller”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Diyagramınızı zenginleştirmek için varlık kütüphanesine erişin:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Tel Çerçeveler\u003C/strong>: Hızlı taslaklar oluşturmak için düşük kaliteli UI bileşenlerini (Düğmeler, Girişler, Modaller) sürükleyip bırakın.\u003C/li>\n\u003Cli>\u003Cstrong>İkonlar\u003C/strong>: Herhangi bir ikonu bağımsız bir düğüm olarak arayın ve ekleyin.\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"3-yapay-zeka-copilot\">3. Yapay Zeka Copilot\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#3-yapay-zeka-copilot\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “3. Yapay Zeka Copilot”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Komut Merkezindeki metin girişi, yapay zeka motorumuza doğrudan bağlantınızdır. Ne oluşturmak istediğinizi yazın ve \u003Ccode dir=\"auto\">Enter\u003C/code> tuşuna basarak anında oluşturun.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"4-düzen-ve-araçlar\">4. Düzen ve Araçlar\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#4-düzen-ve-araçlar\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “4. Düzen ve Araçlar”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Yardımcı işlevlere hızlıca erişin:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Otomatik Düzen\u003C/strong>: Karmaşıklığı düzenleyin.\u003C/li>\n\u003Cli>\u003Cstrong>Görünümü Sıfırla\u003C/strong>: Merkeze geri dönün.\u003C/li>\n\u003Cli>\u003Cstrong>Kodu Biçimlendir\u003C/strong>: DSL’nizi düzenleyin.\u003C/li>\n\u003C/ul>",{"headings":880,"localImagePaths":896,"remoteImagePaths":897,"frontmatter":898,"imagePaths":899},[881,884,887,890,893],{"depth":29,"slug":882,"text":883},"özellikler","Özellikler",{"depth":36,"slug":885,"text":886},"1-şablonlar","1. Şablonlar",{"depth":36,"slug":888,"text":889},"2-tasarım-sistemi--görseller","2. Tasarım Sistemi / Görseller",{"depth":36,"slug":891,"text":892},"3-yapay-zeka-copilot","3. Yapay Zeka Copilot",{"depth":36,"slug":894,"text":895},"4-düzen-ve-araçlar","4. Düzen ve Araçlar",[],[],{"draft":19,"title":176},[],"tr/exporting",{"id":900,"data":902,"body":906,"filePath":907,"digest":908,"rendered":909},{"title":209,"editUrl":15,"head":903,"template":17,"sidebar":904,"pagefind":15,"draft":19},[],{"hidden":19,"attrs":905},{},"FlowMind, diyagramlarınızı sunumlarda, belgelerde veya diğer harici araçlarda kullanmanıza yardımcı olmak için geniş bir dışa aktarma seçenekleri yelpazesi sunar.\n\n> [!TIP]\n> Tüm dışa aktarma seçeneklerine araç çubuğunun sağ üst köşesindeki **\"Dışa Aktar\"** düğmesinden ulaşabilirsiniz.\n\n## Görsel Dışa Aktarma\n\nSlaytlar, belgeler veya Slack'te paylaşmak için idealdir.\n\n### PNG (Taşınabilir Ağ Grafikleri)\nMevcut akışınızın yüksek çözünürlüklü, piksel tabanlı bir görselini dışa aktarır.\n*   **En İyi Kullanım**: Slaytlar, Web, Genel Paylaşım.\n*   **Ayarlar**: Ayarlarda etkinleştirilmişse varsayılan olarak şeffaflık içerir.\n\n### JPEG (Ortak Fotoğrafçılık Uzmanları Grubu)\nSıkıştırılmış bir görsel dosyası dışa aktarır.\n*   **En İyi Kullanım**: E-posta ekleri, dosya boyutunun önemli olduğu durumlar.\n*   **Not**: Şeffaflığı desteklemez (arka plan beyaz olacaktır).\n\n## Veri ve Kod Dışa Aktarma\n\nFlowMind bir \"Kod Olarak Diyagram\" aracıdır; bu nedenle diyagram verilerinizi birinci sınıf vatandaş olarak ele alıyoruz.\n\n### JSON (FlowMind Yerel Formatı)\nTüm düğüm konumlarını, stillerini ve verilerini içeren ham `.json` dosyasını indirir.\n*   **En İyi Kullanım**: Yedekleme, Sürüm Kontrolü, Diğer FlowMind kullanıcılarıyla düzenlenebilir dosya paylaşımı.\n\n### FlowMind DSL\nBasitleştirilmiş Alan Spesifik Dil (DSL) temsilini panonuza kopyalar.\n*   **En İyi Kullanım**: Diyagram mantığını kod tabanı yorumlarında saklamak veya yapay zeka aracılığıyla benzer akışlar oluşturmak.\n\n### Mermaid.js\nMevcut diyagramınızı [Mermaid](https://mermaid.js.org/) sözdizimine dönüştürür ve panoya kopyalar.\n*   **En İyi Kullanım**: GitHub `README.md` dosyalarına, Notion veya Obsidian'a diyagram gömme.\n*   **Desteklenen**: Temel Akış Şemaları, Sekans Diyagramları.\n\n### PlantUML\nDiyagramınızın PlantUML temsilini kopyalar.\n*   **En İyi Kullanım**: Kurumsal wikiler (Confluence) veya eski dokümantasyon sistemleri.\n\n### Figma\nFigma'nın yapıştırma formatıyla uyumlu bir vektör temsilini kopyalar.\n*   **En İyi Kullanım**: Yüksek kaliteli parlatma için diyagramları tasarımcılara teslim etme.\n\n> [!WARNING]\n> Figma dışa aktarma deneyseldir. Karmaşık özel düğümler %100 mükemmel aktarılmayabilir.","src/content/docs/tr/exporting.md","7aee34f54b65b811",{"html":910,"metadata":911},"\u003Cp>FlowMind, diyagramlarınızı sunumlarda, belgelerde veya diğer harici araçlarda kullanmanıza yardımcı olmak için geniş bir dışa aktarma seçenekleri yelpazesi sunar.\u003C/p>\n\u003Cblockquote>\n\u003Cp>[!TIP]\nTüm dışa aktarma seçeneklerine araç çubuğunun sağ üst köşesindeki \u003Cstrong>“Dışa Aktar”\u003C/strong> düğmesinden ulaşabilirsiniz.\u003C/p>\n\u003C/blockquote>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"görsel-dışa-aktarma\">Görsel Dışa Aktarma\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#görsel-dışa-aktarma\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Görsel Dışa Aktarma”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Slaytlar, belgeler veya Slack’te paylaşmak için idealdir.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"png-taşınabilir-ağ-grafikleri\">PNG (Taşınabilir Ağ Grafikleri)\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#png-taşınabilir-ağ-grafikleri\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “PNG (Taşınabilir Ağ Grafikleri)”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Mevcut akışınızın yüksek çözünürlüklü, piksel tabanlı bir görselini dışa aktarır.\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>En İyi Kullanım\u003C/strong>: Slaytlar, Web, Genel Paylaşım.\u003C/li>\n\u003Cli>\u003Cstrong>Ayarlar\u003C/strong>: Ayarlarda etkinleştirilmişse varsayılan olarak şeffaflık içerir.\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"jpeg-ortak-fotoğrafçılık-uzmanları-grubu\">JPEG (Ortak Fotoğrafçılık Uzmanları Grubu)\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#jpeg-ortak-fotoğrafçılık-uzmanları-grubu\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “JPEG (Ortak Fotoğrafçılık Uzmanları Grubu)”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Sıkıştırılmış bir görsel dosyası dışa aktarır.\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>En İyi Kullanım\u003C/strong>: E-posta ekleri, dosya boyutunun önemli olduğu durumlar.\u003C/li>\n\u003Cli>\u003Cstrong>Not\u003C/strong>: Şeffaflığı desteklemez (arka plan beyaz olacaktır).\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"veri-ve-kod-dışa-aktarma\">Veri ve Kod Dışa Aktarma\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#veri-ve-kod-dışa-aktarma\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Veri ve Kod Dışa Aktarma”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>FlowMind bir “Kod Olarak Diyagram” aracıdır; bu nedenle diyagram verilerinizi birinci sınıf vatandaş olarak ele alıyoruz.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"json-flowmind-yerel-formatı\">JSON (FlowMind Yerel Formatı)\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#json-flowmind-yerel-formatı\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “JSON (FlowMind Yerel Formatı)”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Tüm düğüm konumlarını, stillerini ve verilerini içeren ham \u003Ccode dir=\"auto\">.json\u003C/code> dosyasını indirir.\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>En İyi Kullanım\u003C/strong>: Yedekleme, Sürüm Kontrolü, Diğer FlowMind kullanıcılarıyla düzenlenebilir dosya paylaşımı.\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"flowmind-dsl\">FlowMind DSL\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#flowmind-dsl\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “FlowMind DSL”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Basitleştirilmiş Alan Spesifik Dil (DSL) temsilini panonuza kopyalar.\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>En İyi Kullanım\u003C/strong>: Diyagram mantığını kod tabanı yorumlarında saklamak veya yapay zeka aracılığıyla benzer akışlar oluşturmak.\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"mermaidjs\">Mermaid.js\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#mermaidjs\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Mermaid.js”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Mevcut diyagramınızı \u003Ca href=\"https://mermaid.js.org/\">Mermaid\u003C/a> sözdizimine dönüştürür ve panoya kopyalar.\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>En İyi Kullanım\u003C/strong>: GitHub \u003Ccode dir=\"auto\">README.md\u003C/code> dosyalarına, Notion veya Obsidian’a diyagram gömme.\u003C/li>\n\u003Cli>\u003Cstrong>Desteklenen\u003C/strong>: Temel Akış Şemaları, Sekans Diyagramları.\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"plantuml\">PlantUML\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#plantuml\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “PlantUML”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Diyagramınızın PlantUML temsilini kopyalar.\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>En İyi Kullanım\u003C/strong>: Kurumsal wikiler (Confluence) veya eski dokümantasyon sistemleri.\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"figma\">Figma\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#figma\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Figma”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Figma’nın yapıştırma formatıyla uyumlu bir vektör temsilini kopyalar.\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>En İyi Kullanım\u003C/strong>: Yüksek kaliteli parlatma için diyagramları tasarımcılara teslim etme.\u003C/li>\n\u003C/ul>\n\u003Cblockquote>\n\u003Cp>[!WARNING]\nFigma dışa aktarma deneyseldir. Karmaşık özel düğümler %100 mükemmel aktarılmayabilir.\u003C/p>\n\u003C/blockquote>",{"headings":912,"localImagePaths":932,"remoteImagePaths":933,"frontmatter":934,"imagePaths":935},[913,916,919,922,925,928,929,930,931],{"depth":29,"slug":914,"text":915},"görsel-dışa-aktarma","Görsel Dışa Aktarma",{"depth":36,"slug":917,"text":918},"png-taşınabilir-ağ-grafikleri","PNG (Taşınabilir Ağ Grafikleri)",{"depth":36,"slug":920,"text":921},"jpeg-ortak-fotoğrafçılık-uzmanları-grubu","JPEG (Ortak Fotoğrafçılık Uzmanları Grubu)",{"depth":29,"slug":923,"text":924},"veri-ve-kod-dışa-aktarma","Veri ve Kod Dışa Aktarma",{"depth":36,"slug":926,"text":927},"json-flowmind-yerel-formatı","JSON (FlowMind Yerel Formatı)",{"depth":36,"slug":236,"text":237},{"depth":36,"slug":239,"text":240},{"depth":36,"slug":242,"text":243},{"depth":36,"slug":245,"text":246},[],[],{"draft":19,"title":209},[],"tr/introduction",{"id":936,"data":938,"body":942,"filePath":943,"digest":944,"rendered":945},{"title":254,"editUrl":15,"head":939,"template":17,"sidebar":940,"pagefind":15,"draft":19},[],{"hidden":19,"attrs":941},{},"**OpenFlowKit**, yapay zeka destekli görselleştirme ile hassas, kod tabanlı düzenleme arasındaki boşluğu dolduran yeni nesil bir diyagram aracıdır. Geliştiriciler, mimarlar ve ürün yöneticileri için tasarlanan OpenFlowKit, doğal dil veya özel DSL'imizi kullanarak karmaşık akış şemaları, sıra diyagramları ve sistem mimarileri oluşturmanıza olanak tanır.\n\n## Neden OpenFlowKit?\n\nGeleneksel diyagram araçları genellikle şu seçenekler arasında tercih yapmaya zorlar:\n1.  **Sürükle-bırak araçları**: Başlamak kolay, ancak sürdürmesi ve versiyon kontrolü zor.\n2.  **Kod tabanlı araçlar (Mermaid gibi)**: Versiyon kontrolü için harika, ancak sıfırdan yazmak zahmetli olabilir.\n\nOpenFlowKit size her iki dünyanın en iyisini sunar. Bir metin istemiyle başlangıç yapısını oluşturabilir, ardından **Hibrit Editörümüzü** kullanarak düzenleyebilirsiniz—düğümleri tuval üzerinde görsel olarak manipüle edebilir *veya* altta yatan kodu doğrudan düzenleyebilirsiniz.\n\n## Temel Özellikler\n\n### Yapay Zeka Destekli Üretim\nSisteminizi basitçe tanımlayın: *\"OAuth yedekli ve hata işlemeli bir giriş akışı oluştur.\"* OpenFlowKit'in Gemini entegrasyonu tüm diyagramı anında oluşturur.\n\n### Hibrit Tuval\nTuvalimiz sadece statik bir görüntü değil. Tamamen etkileşimli bir grafik ortamıdır.\n*   **Sürükle & Bırak**: Düğümleri taşıyın, otomatik hizalama.\n*   **Akıllı Düzenler**: Elk.js kullanarak tek tıkla yeniden düzenleme.\n*   **Özellikler Paneli**: CSS'e dokunmadan belirli düğüm stillerini ince ayarlayın.\n\n### Kod Olarak Diyagram\nHer diyagram okunabilir, düzenlenebilir bir JSON yapısı ile desteklenir ve Mermaid.js sözdizimi ile uyumludur. Bu, dokümantasyonunuzun kodunuzla birlikte yaşayabileceği anlamına gelir.\n\n### Premium Estetik\n\"Önce Tasarım\" yaklaşımıyla oluşturulan OpenFlowKit diyagramları varsayılan olarak sunum için hazırdır. Artık çirkin, varsayılan gri kutular yok.\n\n## Sonraki Adımlar\n\nBaşlamaya hazır mısınız?\n\n*   İlk akışınızı oluşturmak için [Hızlı Başlangıç](/docs/tr/quick-start) kılavuzuna göz atın.\n*   [Tuval Temelleri](/docs/tr/canvas-basics) hakkında bilgi edinin.\n*   [OpenFlow DSL](/docs/tr/openflow-dsl)'de ustalaşın.","src/content/docs/tr/introduction.md","350bc3a863554c4c",{"html":946,"metadata":947},"\u003Cp>\u003Cstrong>OpenFlowKit\u003C/strong>, yapay zeka destekli görselleştirme ile hassas, kod tabanlı düzenleme arasındaki boşluğu dolduran yeni nesil bir diyagram aracıdır. Geliştiriciler, mimarlar ve ürün yöneticileri için tasarlanan OpenFlowKit, doğal dil veya özel DSL’imizi kullanarak karmaşık akış şemaları, sıra diyagramları ve sistem mimarileri oluşturmanıza olanak tanır.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"neden-openflowkit\">Neden OpenFlowKit?\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#neden-openflowkit\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Neden OpenFlowKit?”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Geleneksel diyagram araçları genellikle şu seçenekler arasında tercih yapmaya zorlar:\u003C/p>\n\u003Col>\n\u003Cli>\u003Cstrong>Sürükle-bırak araçları\u003C/strong>: Başlamak kolay, ancak sürdürmesi ve versiyon kontrolü zor.\u003C/li>\n\u003Cli>\u003Cstrong>Kod tabanlı araçlar (Mermaid gibi)\u003C/strong>: Versiyon kontrolü için harika, ancak sıfırdan yazmak zahmetli olabilir.\u003C/li>\n\u003C/ol>\n\u003Cp>OpenFlowKit size her iki dünyanın en iyisini sunar. Bir metin istemiyle başlangıç yapısını oluşturabilir, ardından \u003Cstrong>Hibrit Editörümüzü\u003C/strong> kullanarak düzenleyebilirsiniz—düğümleri tuval üzerinde görsel olarak manipüle edebilir \u003Cem>veya\u003C/em> altta yatan kodu doğrudan düzenleyebilirsiniz.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"temel-özellikler\">Temel Özellikler\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#temel-özellikler\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Temel Özellikler”\u003C/span>\u003C/a>\u003C/div>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"yapay-zeka-destekli-üretim\">Yapay Zeka Destekli Üretim\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#yapay-zeka-destekli-üretim\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Yapay Zeka Destekli Üretim”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Sisteminizi basitçe tanımlayın: \u003Cem>“OAuth yedekli ve hata işlemeli bir giriş akışı oluştur.”\u003C/em> OpenFlowKit’in Gemini entegrasyonu tüm diyagramı anında oluşturur.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"hibrit-tuval\">Hibrit Tuval\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#hibrit-tuval\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Hibrit Tuval”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Tuvalimiz sadece statik bir görüntü değil. Tamamen etkileşimli bir grafik ortamıdır.\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Sürükle &#x26; Bırak\u003C/strong>: Düğümleri taşıyın, otomatik hizalama.\u003C/li>\n\u003Cli>\u003Cstrong>Akıllı Düzenler\u003C/strong>: Elk.js kullanarak tek tıkla yeniden düzenleme.\u003C/li>\n\u003Cli>\u003Cstrong>Özellikler Paneli\u003C/strong>: CSS’e dokunmadan belirli düğüm stillerini ince ayarlayın.\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"kod-olarak-diyagram\">Kod Olarak Diyagram\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#kod-olarak-diyagram\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Kod Olarak Diyagram”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Her diyagram okunabilir, düzenlenebilir bir JSON yapısı ile desteklenir ve Mermaid.js sözdizimi ile uyumludur. Bu, dokümantasyonunuzun kodunuzla birlikte yaşayabileceği anlamına gelir.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"premium-estetik\">Premium Estetik\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#premium-estetik\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Premium Estetik”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>“Önce Tasarım” yaklaşımıyla oluşturulan OpenFlowKit diyagramları varsayılan olarak sunum için hazırdır. Artık çirkin, varsayılan gri kutular yok.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"sonraki-adımlar\">Sonraki Adımlar\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#sonraki-adımlar\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Sonraki Adımlar”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Başlamaya hazır mısınız?\u003C/p>\n\u003Cul>\n\u003Cli>İlk akışınızı oluşturmak için \u003Ca href=\"/docs/tr/quick-start\">Hızlı Başlangıç\u003C/a> kılavuzuna göz atın.\u003C/li>\n\u003Cli>\u003Ca href=\"/docs/tr/canvas-basics\">Tuval Temelleri\u003C/a> hakkında bilgi edinin.\u003C/li>\n\u003Cli>\u003Ca href=\"/docs/tr/openflow-dsl\">OpenFlow DSL\u003C/a>’de ustalaşın.\u003C/li>\n\u003C/ul>",{"headings":948,"localImagePaths":970,"remoteImagePaths":971,"frontmatter":972,"imagePaths":973},[949,952,955,958,961,964,967],{"depth":29,"slug":950,"text":951},"neden-openflowkit","Neden OpenFlowKit?",{"depth":29,"slug":953,"text":954},"temel-özellikler","Temel Özellikler",{"depth":36,"slug":956,"text":957},"yapay-zeka-destekli-üretim","Yapay Zeka Destekli Üretim",{"depth":36,"slug":959,"text":960},"hibrit-tuval","Hibrit Tuval",{"depth":36,"slug":962,"text":963},"kod-olarak-diyagram","Kod Olarak Diyagram",{"depth":36,"slug":965,"text":966},"premium-estetik","Premium Estetik",{"depth":29,"slug":968,"text":969},"sonraki-adımlar","Sonraki Adımlar",[],[],{"draft":19,"title":254},[],"tr/node-types",{"id":974,"data":976,"body":980,"filePath":981,"digest":982,"rendered":983},{"title":356,"editUrl":15,"head":977,"template":17,"sidebar":978,"pagefind":15,"draft":19},[],{"hidden":19,"attrs":979},{},"FlowMind, farklı diyagram ihtiyaçlarını karşılamak için çeşitli özel düğüm türlerini destekler.\n\n## 1. Özel Düğüm (Varsayılan)\n\nDiyagramlarınızın temel yapı taşı. Başlık, isteğe bağlı ikon ve zengin bağlantı tutamaçlarını destekler.\n*   **En İyi Kullanım**: Süreç adımları, servisler, veritabanı tabloları veya genel varlıklar.\n*   **Özellikler**: Yeniden boyutlandırılabilir, düzenlenebilir etiket, ikon desteği.\n\n## 2. Metin Düğümü / Açıklama\n\nAkış yapısını etkilemeden tuvale yorum veya etiket eklemek için kullanılan hafif, kenarsız bir düğüm.\n*   **En İyi Kullanım**: Yapışkan notlar, bölüm başlıkları veya açıklayıcı metin ekleme.\n*   **Kullanım**: Araç çubuğundan \"Metin\" seçin veya \\`T\\` tuşuna basın.\n\n## 3. Grup Düğümü\n\nDiğer düğümleri görsel olarak bir arada tutan kapsayıcı düğümler. Bir grubu taşımak, içindeki tüm düğümleri de taşır.\n*   **En İyi Kullanım**: Alt sistemleri, VPC'leri veya mantıksal sınırları görselleştirme.\n*   **Kullanım**: Düğümleri seçin → Sağ Tıklayın → \"Seçimi Grupla\".\n\n## 4. Yüzme Şeridi Düğümü\n\nSüreçleri aktöre veya departmana göre düzenlemek için dikey veya yatay şeritler.\n*   **En İyi Kullanım**: Çok işlevli akış şemaları.\n\n## 5. Görsel Düğümü\n\nİsteğe bağlı görselleri doğrudan tuvale yerleştirin.\n*   **En İyi Kullanım**: Logo, ekran görüntüsü veya referans diyagramı ekleme.\n*   **Kullanım**: Bir görsel dosyasını doğrudan tuvalin üzerine sürükleyip bırakın.","src/content/docs/tr/node-types.md","d56aa30dae1afddb",{"html":984,"metadata":985},"\u003Cp>FlowMind, farklı diyagram ihtiyaçlarını karşılamak için çeşitli özel düğüm türlerini destekler.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"1-özel-düğüm-varsayılan\">1. Özel Düğüm (Varsayılan)\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#1-özel-düğüm-varsayılan\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “1. Özel Düğüm (Varsayılan)”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Diyagramlarınızın temel yapı taşı. Başlık, isteğe bağlı ikon ve zengin bağlantı tutamaçlarını destekler.\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>En İyi Kullanım\u003C/strong>: Süreç adımları, servisler, veritabanı tabloları veya genel varlıklar.\u003C/li>\n\u003Cli>\u003Cstrong>Özellikler\u003C/strong>: Yeniden boyutlandırılabilir, düzenlenebilir etiket, ikon desteği.\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"2-metin-düğümü--açıklama\">2. Metin Düğümü / Açıklama\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#2-metin-düğümü--açıklama\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “2. Metin Düğümü / Açıklama”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Akış yapısını etkilemeden tuvale yorum veya etiket eklemek için kullanılan hafif, kenarsız bir düğüm.\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>En İyi Kullanım\u003C/strong>: Yapışkan notlar, bölüm başlıkları veya açıklayıcı metin ekleme.\u003C/li>\n\u003Cli>\u003Cstrong>Kullanım\u003C/strong>: Araç çubuğundan “Metin” seçin veya `T` tuşuna basın.\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"3-grup-düğümü\">3. Grup Düğümü\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#3-grup-düğümü\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “3. Grup Düğümü”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Diğer düğümleri görsel olarak bir arada tutan kapsayıcı düğümler. Bir grubu taşımak, içindeki tüm düğümleri de taşır.\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>En İyi Kullanım\u003C/strong>: Alt sistemleri, VPC’leri veya mantıksal sınırları görselleştirme.\u003C/li>\n\u003Cli>\u003Cstrong>Kullanım\u003C/strong>: Düğümleri seçin → Sağ Tıklayın → “Seçimi Grupla”.\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"4-yüzme-şeridi-düğümü\">4. Yüzme Şeridi Düğümü\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#4-yüzme-şeridi-düğümü\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “4. Yüzme Şeridi Düğümü”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Süreçleri aktöre veya departmana göre düzenlemek için dikey veya yatay şeritler.\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>En İyi Kullanım\u003C/strong>: Çok işlevli akış şemaları.\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"5-görsel-düğümü\">5. Görsel Düğümü\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#5-görsel-düğümü\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “5. Görsel Düğümü”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>İsteğe bağlı görselleri doğrudan tuvale yerleştirin.\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>En İyi Kullanım\u003C/strong>: Logo, ekran görüntüsü veya referans diyagramı ekleme.\u003C/li>\n\u003Cli>\u003Cstrong>Kullanım\u003C/strong>: Bir görsel dosyasını doğrudan tuvalin üzerine sürükleyip bırakın.\u003C/li>\n\u003C/ul>",{"headings":986,"localImagePaths":1002,"remoteImagePaths":1003,"frontmatter":1004,"imagePaths":1005},[987,990,993,996,999],{"depth":29,"slug":988,"text":989},"1-özel-düğüm-varsayılan","1. Özel Düğüm (Varsayılan)",{"depth":29,"slug":991,"text":992},"2-metin-düğümü--açıklama","2. Metin Düğümü / Açıklama",{"depth":29,"slug":994,"text":995},"3-grup-düğümü","3. Grup Düğümü",{"depth":29,"slug":997,"text":998},"4-yüzme-şeridi-düğümü","4. Yüzme Şeridi Düğümü",{"depth":29,"slug":1000,"text":1001},"5-görsel-düğümü","5. Görsel Düğümü",[],[],{"draft":19,"title":356},[],"tr/keyboard-shortcuts",{"id":1006,"data":1008,"body":1012,"filePath":1013,"digest":1014,"rendered":1015},{"title":128,"editUrl":15,"head":1009,"template":17,"sidebar":1010,"pagefind":15,"draft":19},[],{"hidden":19,"attrs":1011},{},"İş akışınızı hızlandırmak için bu klavye kısayollarıyla FlowMind'ı ustalıkla kullanın.\n\n## Genel\n\n| Eylem | MacOS | Windows/Linux |\n| :--- | :--- | :--- |\n| **Komut Paleti** | \\`Cmd + K\\` | \\`Ctrl + K\\` |\n| **Kaydet** | \\`Cmd + S\\` | \\`Ctrl + S\\` |\n| **Geri Al** | \\`Cmd + Z\\` | \\`Ctrl + Z\\` |\n| **Yeniden Yap** | \\`Cmd + Shift + Z\\` | \\`Ctrl + Shift + Z\\` |\n\n## Tuval Gezintisi\n\n| Eylem | MacOS | Windows/Linux |\n| :--- | :--- | :--- |\n| **Yakınlaştır** | \\`+\\` | \\`+\\` |\n| **Uzaklaştır** | \\`-\\` | \\`-\\` |\n| **Görünüme Sığdır** | \\`Shift + 1\\` | \\`Shift + 1\\` |\n\n## Düzenleme\n\n| Eylem | MacOS | Windows/Linux |\n| :--- | :--- | :--- |\n| **Düğümü Kopyala** | \\`Cmd + D\\` veya \\`Alt + Sürükle\\` | \\`Ctrl + D\\` veya \\`Alt + Sürükle\\` |\n| **Düğümü Sil** | \\`Backspace\\` | \\`Backspace\\` |\n| **Tümünü Seç** | \\`Cmd + A\\` | \\`Ctrl + A\\` |\n| **Seçimi Grupla** | \\`Cmd + G\\` | \\`Ctrl + G\\` |\n\n> **Not:** Kısayollar yalnızca tuval odakta iken aktiftir.","src/content/docs/tr/keyboard-shortcuts.md","078b6955cd684b89",{"html":1016,"metadata":1017},"\u003Cp>İş akışınızı hızlandırmak için bu klavye kısayollarıyla FlowMind’ı ustalıkla kullanın.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"genel\">Genel\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#genel\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Genel”\u003C/span>\u003C/a>\u003C/div>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth align=\"left\">Eylem\u003C/th>\u003Cth align=\"left\">MacOS\u003C/th>\u003Cth align=\"left\">Windows/Linux\u003C/th>\u003C/tr>\u003C/thead>\u003Ctbody>\u003Ctr>\u003Ctd align=\"left\">\u003Cstrong>Komut Paleti\u003C/strong>\u003C/td>\u003Ctd align=\"left\">`Cmd + K`\u003C/td>\u003Ctd align=\"left\">`Ctrl + K`\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd align=\"left\">\u003Cstrong>Kaydet\u003C/strong>\u003C/td>\u003Ctd align=\"left\">`Cmd + S`\u003C/td>\u003Ctd align=\"left\">`Ctrl + S`\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd align=\"left\">\u003Cstrong>Geri Al\u003C/strong>\u003C/td>\u003Ctd align=\"left\">`Cmd + Z`\u003C/td>\u003Ctd align=\"left\">`Ctrl + Z`\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd align=\"left\">\u003Cstrong>Yeniden Yap\u003C/strong>\u003C/td>\u003Ctd align=\"left\">`Cmd + Shift + Z`\u003C/td>\u003Ctd align=\"left\">`Ctrl + Shift + Z`\u003C/td>\u003C/tr>\u003C/tbody>\u003C/table>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"tuval-gezintisi\">Tuval Gezintisi\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#tuval-gezintisi\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Tuval Gezintisi”\u003C/span>\u003C/a>\u003C/div>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth align=\"left\">Eylem\u003C/th>\u003Cth align=\"left\">MacOS\u003C/th>\u003Cth align=\"left\">Windows/Linux\u003C/th>\u003C/tr>\u003C/thead>\u003Ctbody>\u003Ctr>\u003Ctd align=\"left\">\u003Cstrong>Yakınlaştır\u003C/strong>\u003C/td>\u003Ctd align=\"left\">`+`\u003C/td>\u003Ctd align=\"left\">`+`\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd align=\"left\">\u003Cstrong>Uzaklaştır\u003C/strong>\u003C/td>\u003Ctd align=\"left\">`-`\u003C/td>\u003Ctd align=\"left\">`-`\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd align=\"left\">\u003Cstrong>Görünüme Sığdır\u003C/strong>\u003C/td>\u003Ctd align=\"left\">`Shift + 1`\u003C/td>\u003Ctd align=\"left\">`Shift + 1`\u003C/td>\u003C/tr>\u003C/tbody>\u003C/table>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"düzenleme\">Düzenleme\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#düzenleme\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Düzenleme”\u003C/span>\u003C/a>\u003C/div>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth align=\"left\">Eylem\u003C/th>\u003Cth align=\"left\">MacOS\u003C/th>\u003Cth align=\"left\">Windows/Linux\u003C/th>\u003C/tr>\u003C/thead>\u003Ctbody>\u003Ctr>\u003Ctd align=\"left\">\u003Cstrong>Düğümü Kopyala\u003C/strong>\u003C/td>\u003Ctd align=\"left\">`Cmd + D` veya `Alt + Sürükle`\u003C/td>\u003Ctd align=\"left\">`Ctrl + D` veya `Alt + Sürükle`\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd align=\"left\">\u003Cstrong>Düğümü Sil\u003C/strong>\u003C/td>\u003Ctd align=\"left\">`Backspace`\u003C/td>\u003Ctd align=\"left\">`Backspace`\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd align=\"left\">\u003Cstrong>Tümünü Seç\u003C/strong>\u003C/td>\u003Ctd align=\"left\">`Cmd + A`\u003C/td>\u003Ctd align=\"left\">`Ctrl + A`\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd align=\"left\">\u003Cstrong>Seçimi Grupla\u003C/strong>\u003C/td>\u003Ctd align=\"left\">`Cmd + G`\u003C/td>\u003Ctd align=\"left\">`Ctrl + G`\u003C/td>\u003C/tr>\u003C/tbody>\u003C/table>\n\u003Cblockquote>\n\u003Cp>\u003Cstrong>Not:\u003C/strong> Kısayollar yalnızca tuval odakta iken aktiftir.\u003C/p>\n\u003C/blockquote>",{"headings":1018,"localImagePaths":1028,"remoteImagePaths":1029,"frontmatter":1030,"imagePaths":1031},[1019,1022,1025],{"depth":29,"slug":1020,"text":1021},"genel","Genel",{"depth":29,"slug":1023,"text":1024},"tuval-gezintisi","Tuval Gezintisi",{"depth":29,"slug":1026,"text":1027},"düzenleme","Düzenleme",[],[],{"draft":19,"title":128},[],"tr/mermaid-integration",{"id":1032,"data":1034,"body":1038,"filePath":1039,"digest":1040,"rendered":1041},{"title":293,"editUrl":15,"head":1035,"template":17,"sidebar":1036,"pagefind":15,"draft":19},[],{"hidden":19,"attrs":1037},{},"FlowMind, kod olarak diyagram için endüstri standardı olan [Mermaid.js](https://mermaid.js.org/) ile yüksek uyumluluk sağlar.\n\n## Mermaid İçe Aktarma\n\nMevcut Mermaid kodunu doğrudan FlowMind'a yapıştırabilirsiniz.\n\n1.  Araç çubuğundaki **\"İçe Aktar\"** düğmesine tıklayın.\n2.  **\"Mermaid\"** seçeneğini seçin.\n3.  Kod parçacığınızı yapıştırın.\n\n### Desteklenen Diyagram Türleri\nFlowMind şu an için aşağıdakileri optimize etmektedir:\n*   **Akış Şemaları** (`graph TD`, `graph LR`)\n*   **Sekans Diyagramları** (Dönüşüm yoluyla kısmi destek)\n\n```mermaid\ngraph TD\n    A[Başlat] --> B{Çalışıyor mu?}\n    B -- Evet --> C[Harika!]\n    B -- Hayır --> D[Hata Ayıkla]\n```\n\n## Mermaid'e Dışa Aktarma\n\nHerhangi bir FlowMind diyagramını Mermaid sözdizimine *geri* aktarabilirsiniz.\nBu özellik, GitHub `README.md` dosyalarına veya Notion belgelerine diyagram gömmek için idealdir.\n\n1.  **Kod Paneli**'ni açın (alt panel).\n2.  **\"Mermaid\"** sekmesine geçin.\n3.  Oluşturulan kodu kopyalayın.","src/content/docs/tr/mermaid-integration.md","4d3dd83100824861",{"html":1042,"metadata":1043},"\u003Cp>FlowMind, kod olarak diyagram için endüstri standardı olan \u003Ca href=\"https://mermaid.js.org/\">Mermaid.js\u003C/a> ile yüksek uyumluluk sağlar.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"mermaid-i̇çe-aktarma\">Mermaid İçe Aktarma\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#mermaid-i̇çe-aktarma\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Mermaid İçe Aktarma”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Mevcut Mermaid kodunu doğrudan FlowMind’a yapıştırabilirsiniz.\u003C/p>\n\u003Col>\n\u003Cli>Araç çubuğundaki \u003Cstrong>“İçe Aktar”\u003C/strong> düğmesine tıklayın.\u003C/li>\n\u003Cli>\u003Cstrong>“Mermaid”\u003C/strong> seçeneğini seçin.\u003C/li>\n\u003Cli>Kod parçacığınızı yapıştırın.\u003C/li>\n\u003C/ol>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"desteklenen-diyagram-türleri\">Desteklenen Diyagram Türleri\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#desteklenen-diyagram-türleri\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Desteklenen Diyagram Türleri”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>FlowMind şu an için aşağıdakileri optimize etmektedir:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Akış Şemaları\u003C/strong> (\u003Ccode dir=\"auto\">graph TD\u003C/code>, \u003Ccode dir=\"auto\">graph LR\u003C/code>)\u003C/li>\n\u003Cli>\u003Cstrong>Sekans Diyagramları\u003C/strong> (Dönüşüm yoluyla kısmi destek)\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"expressive-code\">\u003Clink rel=\"stylesheet\" href=\"/_astro/ec.v4551.css\">\u003Cscript type=\"module\" src=\"/_astro/ec.0vx5m.js\">\u003C/script>\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"mermaid\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">graph TD\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">    \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">A[Başlat] --> B{Çalışıyor mu?}\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">    \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">B -- Evet --> C[Harika!]\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">    \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">B -- Hayır --> D[Hata Ayıkla]\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"graph TD    A[Başlat] --> B{Çalışıyor mu?}    B -- Evet --> C[Harika!]    B -- Hayır --> D[Hata Ayıkla]\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"mermaide-dışa-aktarma\">Mermaid’e Dışa Aktarma\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#mermaide-dışa-aktarma\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Mermaid’e Dışa Aktarma”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Herhangi bir FlowMind diyagramını Mermaid sözdizimine \u003Cem>geri\u003C/em> aktarabilirsiniz.\nBu özellik, GitHub \u003Ccode dir=\"auto\">README.md\u003C/code> dosyalarına veya Notion belgelerine diyagram gömmek için idealdir.\u003C/p>\n\u003Col>\n\u003Cli>\u003Cstrong>Kod Paneli\u003C/strong>’ni açın (alt panel).\u003C/li>\n\u003Cli>\u003Cstrong>“Mermaid”\u003C/strong> sekmesine geçin.\u003C/li>\n\u003Cli>Oluşturulan kodu kopyalayın.\u003C/li>\n\u003C/ol>",{"headings":1044,"localImagePaths":1054,"remoteImagePaths":1055,"frontmatter":1056,"imagePaths":1057},[1045,1048,1051],{"depth":29,"slug":1046,"text":1047},"mermaid-i̇çe-aktarma","Mermaid İçe Aktarma",{"depth":36,"slug":1049,"text":1050},"desteklenen-diyagram-türleri","Desteklenen Diyagram Türleri",{"depth":29,"slug":1052,"text":1053},"mermaide-dışa-aktarma","Mermaid’e Dışa Aktarma",[],[],{"draft":19,"title":293},[],"tr/playback-history",{"id":1058,"data":1060,"body":1064,"filePath":1065,"digest":1066,"rendered":1067},{"title":464,"editUrl":15,"head":1061,"template":17,"sidebar":1062,"pagefind":15,"draft":19},[],{"hidden":19,"attrs":1063},{},"FlowMind, yaptığınız her değişikliği otomatik olarak izler. **Oynatma** özelliği, karar sürecinizi gözden geçirmek için zamanda geriye gitmenizi sağlar.\n\n## Geçmiş Zaman Çizelgesi\n\nGeçmiş Zaman Çizelgesini açmak için üst gezinme çubuğundaki **Saat İkonuna** tıklayın.\n\n### Sürüm Kontrol Noktaları\nÖnemli bir eylem gerçekleştirdiğinizde (düğüm ekleme, renk değiştirme, otomatik düzen) her seferinde bir \"anlık görüntü\" kaydedilir.\n*   **Geri Al/Yeniden Yap**: Aynı sistemi kullanarak ileri geri atlar (`Cmd+Z`).\n\n## Oynatma Modu\n\nDiyagramınızın baştan sona inşa edildiğini izlemek için Geçmiş panelindeki **Oynat** düğmesine basın.\n*   **Hız Kontrolü**: Oynatma hızını ayarlayın (1x, 2x, 4x).\n*   **Kaydırma**: Sürgüyü belirli noktalara sürükleyin.\n*   **Geri Yükle**: Daha eski bir sürümü beğendiniz mi? Tuvali o duruma mükemmel biçimde geri döndürmek için \"Geri Yükle\"ye tıklayın.","src/content/docs/tr/playback-history.md","0b9fe5276a4dcce9",{"html":1068,"metadata":1069},"\u003Cp>FlowMind, yaptığınız her değişikliği otomatik olarak izler. \u003Cstrong>Oynatma\u003C/strong> özelliği, karar sürecinizi gözden geçirmek için zamanda geriye gitmenizi sağlar.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"geçmiş-zaman-çizelgesi\">Geçmiş Zaman Çizelgesi\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#geçmiş-zaman-çizelgesi\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Geçmiş Zaman Çizelgesi”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Geçmiş Zaman Çizelgesini açmak için üst gezinme çubuğundaki \u003Cstrong>Saat İkonuna\u003C/strong> tıklayın.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"sürüm-kontrol-noktaları\">Sürüm Kontrol Noktaları\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#sürüm-kontrol-noktaları\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Sürüm Kontrol Noktaları”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Önemli bir eylem gerçekleştirdiğinizde (düğüm ekleme, renk değiştirme, otomatik düzen) her seferinde bir “anlık görüntü” kaydedilir.\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Geri Al/Yeniden Yap\u003C/strong>: Aynı sistemi kullanarak ileri geri atlar (\u003Ccode dir=\"auto\">Cmd+Z\u003C/code>).\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"oynatma-modu\">Oynatma Modu\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#oynatma-modu\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Oynatma Modu”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Diyagramınızın baştan sona inşa edildiğini izlemek için Geçmiş panelindeki \u003Cstrong>Oynat\u003C/strong> düğmesine basın.\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Hız Kontrolü\u003C/strong>: Oynatma hızını ayarlayın (1x, 2x, 4x).\u003C/li>\n\u003Cli>\u003Cstrong>Kaydırma\u003C/strong>: Sürgüyü belirli noktalara sürükleyin.\u003C/li>\n\u003Cli>\u003Cstrong>Geri Yükle\u003C/strong>: Daha eski bir sürümü beğendiniz mi? Tuvali o duruma mükemmel biçimde geri döndürmek için “Geri Yükle”ye tıklayın.\u003C/li>\n\u003C/ul>",{"headings":1070,"localImagePaths":1080,"remoteImagePaths":1081,"frontmatter":1082,"imagePaths":1083},[1071,1074,1077],{"depth":29,"slug":1072,"text":1073},"geçmiş-zaman-çizelgesi","Geçmiş Zaman Çizelgesi",{"depth":36,"slug":1075,"text":1076},"sürüm-kontrol-noktaları","Sürüm Kontrol Noktaları",{"depth":29,"slug":1078,"text":1079},"oynatma-modu","Oynatma Modu",[],[],{"draft":19,"title":464},[],"tr/openflow-dsl",{"id":1084,"data":1086,"body":1090,"filePath":1091,"digest":1092,"rendered":1093},{"title":389,"editUrl":15,"head":1087,"template":17,"sidebar":1088,"pagefind":15,"draft":19},[],{"hidden":19,"attrs":1089},{},"# 🧠 FlowMind DSL Sözdizimi Rehberi (V2)\n\nFlowMind, diyagramları metin kullanarak tanımlamak için temiz, insan tarafından okunabilir bir DSL kullanır.\nSürüm 2 şunları sunar:\n\n* Açık düğüm kimlikleri\n* Stil özellikleri\n* Gruplar / kapsayıcılar\n* Kenar özelleştirmesi\n\n---\n\n# 1️⃣ Belge Başlığı\n\nHer DSL dosyası isteğe bağlı meta verilerle başlayabilir:\n\n```yaml\nflow: \"Harika İş Akışım\"\ndirection: TB\n```\n\n### Alanlar\n\n| Alan        | Açıklama                                                    |\n| ----------- | -------------------------------------------------------------- |\n| `flow`      | Diyagramın başlığı                                           |\n| `direction` | Düzen yönü: `TB` (Yukarıdan Aşağıya) veya `LR` (Soldan Sağa) |\n\n---\n\n# 2️⃣ Düğümler\n\nDüğümler diyagram öğelerini tanımlar.\n\n## Temel Sözdizimi\n\n```\n[start] Süreci Başlat\n[process] İsteği İşle\n[end] Süreci Sonlandır\n```\n\n---\n\n## Açık Kimliklerle\n\nÖzellikle büyük akışlarda netlik için kullanışlıdır.\n\n```\n[start] start: Süreci Başlat\n[process] proc1: İsteği İşle\n[end] end: Süreci Sonlandır\n\nstart -> proc1\nproc1 -> end\n```\n\n---\n\n## Özelliklerle\n\nÖzellikler JSON benzeri sözdizimi kullanır:\n\n```\n[process] p1: Kritik Adım { color: \"red\", icon: \"alert-triangle\" }\n[system] db: Veritabanı { icon: \"database\" }\n```\n\n### Özellik Örnekleri\n\n| Özellik   | Amaç                  |\n| --------- | --------------------- |\n| `color`   | Düğüm rengini geçersiz kıl |\n| `icon`    | İkon ekle              |\n| `style`   | Özel stil değiştirici |\n\n---\n\n## Desteklenen Düğüm Türleri\n\n| DSL Türü    | Şekil             | Varsayılan Renk |\n| ----------- | ----------------- | ------------- |\n| `start`     | Kapsül            | Zümrüt        |\n| `end`       | Kapsül            | Kırmızı       |\n| `process`   | Yuvarlak dikdörtgen | Arduvaz      |\n| `decision`  | Elmas             | Amber         |\n| `system`    | Özel düğüm        | Mor           |\n| `note`      | Yapışkan not      | Sarı          |\n| `section`   | Grup kapsayıcısı  | Mavi          |\n| `container` | Genel grup        | Gri           |\n\nBir düğüm bağlantıda referans alınır ancak tanımlanmazsa varsayılan olarak `process` kullanılır.\n\n---\n\n# 3️⃣ Kenarlar (Bağlantılar)\n\nBağlantılar düğümler arasındaki akışı tanımlar.\n\n## Temel Bağlantı\n\n```\nSüreci Başlat -> İsteği İşle\n```\n\n---\n\n## Kenar Türleri\n\n| Sembol | Anlam       |\n| ------ | ----------- |\n| `->`   | Düz çizgi   |\n| `-->`  | Kavisli çizgi |\n| `..>`  | Kesik çizgi |\n| `==>`  | Kalın çizgi |\n\nÖrnek:\n\n```\nA ..> B\nC ==> D\n```\n\n---\n\n## Etiketli Bağlantılar\n\nPipe karakterleri kullanın:\n\n```\nGeçerli mi? ->|Evet| Veriyi Kaydet\nGeçerli mi? ->|Hayır| Hata Döndür\n```\n\n---\n\n## Kenar Özellikleri\n\n```\nA -> B { style: \"dashed\", label: \"Async\" }\n```\n\n---\n\n# 4️⃣ Gruplar\n\nDüğümleri kümelemek için `group` kullanın.\n\n```\ngroup \"Backend Servisleri\" {\n    [process] api: API Sunucusu\n    [system] db: Veritabanı\n    api -> db\n}\n```\n\nGruplar mantıksal alanları görsel olarak ayırmaya yardımcı olur.\n\n---\n\n# 5️⃣ Yorumlar\n\n`#` ile başlayan satırlar yoksayılır.\n\n```\n# Bu bir yorumdur\n[start] Başla\n```\n\n---\n\n# ✅ Tam Örnek\n\n```yaml\nflow: \"Kullanıcı Giriş Akışı\"\ndirection: TB\n\n# Düğümleri Tanımla\n[start] user: Kullanıcı\n[process] login: Giriş Sayfası { icon: \"log-in\" }\n\ngroup \"Kimlik Doğrulama\" {\n    [system] auth: Auth Servisi\n    [decision] check: Geçerli mi?\n}\n\n[end] dash: Gösterge Paneli\n[end] err: Hata\n\n# Mantığı Tanımla\nuser -> login\nlogin -> auth\nauth -> check\n\ncheck ->|Evet| dash { color: \"green\" }\ncheck ->|Hayır| err { color: \"red\", style: \"dashed\" }\n```\n\n---\n\n# 🤖 LLM Ajan İstem Şablonu\n\nBir LLM ajanı kullanarak FlowMind DSL oluşturmak isteyenler aşağıdaki istemi kullanabilir:\n\n---\n\n## LLM için Kopyala-Yapıştır İstemi\n\n```\nSen uzman bir FlowMind DSL V2 oluşturucususun.\n\nGörevin, kullanıcının iş akışı açıklamasını geçerli FlowMind DSL'ye dönüştürmektir.\n\nAşağıda tanımlanan FlowMind DSL V2 spesifikasyonunu kesinlikle takip etmelisin.\n\n========================================\nFLOWMIND DSL V2 SPESİFİKASYONU\n========================================\n\n1. BELGE BAŞLIĞI (Zorunlu)\n\nHer çıktı şununla başlamalıdır:\n\nflow: \"Başlık Buraya\"\ndirection: TB veya LR\n\nKurallar:\n- Her zaman anlamlı bir başlık oluştur.\n- Kullanıcı açıkça yatay düzen belirtmediği sürece TB'yi varsayılan olarak kullan.\n\n----------------------------------------\n\n2. DÜĞÜM TANIMLAMA KURALLARI\n\nDüğüm sözdizimi:\n\n[tür] kimlik: Etiket { isteğe_bağlı_özellikler }\n\nÖrnek:\n[process] p1: İsteği İşle\n[decision] d1: Geçerli mi? { icon: \"help-circle\" }\n\nKurallar:\n- HER ZAMAN açık kimlikler kullan.\n- Kimlikler kısa, küçük harf ve boşluksuz olmalıdır.\n- Kimlikler benzersiz olmalıdır.\n- Anlamlı isimler kullan (start, login, checkAuth, db, vb.).\n- Etiketleri kimlik olarak KULLANMA.\n- Düğüm tanımlamalarını ATLAMA.\n\nBir düğüm bağlantıda referans alınıyorsa önce tanımlanmış OLMALIDIR.\n\n----------------------------------------\n\n3. DESTEKLENEN DÜĞÜM TÜRLERİ\n\nYALNIZCA bu türleri kullan:\n\nstart\nend\nprocess\ndecision\nsystem\nnote\nsection\ncontainer\n\nKılavuz:\n\nstart      → akışın başlangıcı\nend        → bitiş durumları\nprocess    → eylemler veya adımlar\ndecision   → dallanma mantığı\nsystem     → harici sistem/servis/veritabanı\nnote       → açıklamalar\nsection    → ana gruplu alan\ncontainer  → genel gruplama\n\n----------------------------------------\n\n4. DÜĞÜM ÖZELLİKLERİ (İsteğe Bağlı)\n\nÖzellikler JSON benzeri sözdizimi kullanır:\n\n{ color: \"red\", icon: \"database\", style: \"dashed\" }\n\nKurallar:\n- Özelliği yalnızca anlamlıysa ekle.\n- Stili minimal tut.\n- Desteklenmeyen özellikler uydurma.\n\n----------------------------------------\n\n5. KENARLAR (BAĞLANTILAR)\n\nTemel sözdizimi:\nkimlik1 -> kimlik2\n\nKenar türleri:\n->   düz\n-->  kavisli\n..>  kesik\n==>  kalın\n\nEtiketli kenarlar:\nkimlik1 ->|Evet| kimlik2\n\nÖzellikli kenar:\nkimlik1 -> kimlik2 { label: \"Async\", style: \"dashed\" }\n\nKurallar:\n- Her zaman etiket değil kimlik kullanarak bağlan.\n- Karar düğümleri etiketli kenarlar KULLANMALIDIR.\n- Karardan gelen her dal açık olmalıdır.\n- Yalnız düğüm bırakma.\n\n----------------------------------------\n\n6. GRUPLAR\n\nMantıksal kümeleme mevcutsa gruplama kullan.\n\nSözdizimi:\n\ngroup \"Grup Adı\" {\n    düğüm tanımlamaları\n    iç bağlantılar\n}\n\nKurallar:\n- Gruplar yalnızca ilgili düğümleri kapsamalıdır.\n- Gruplar arası bağlantılar grup bloğunun dışında tanımlanmalıdır.\n\n----------------------------------------\n\n7. YORUMLAR\n\nYorumlar için # kullan; aşırıya kaçma.\nAşırı yorum yapma.\n\n----------------------------------------\n\n8. ÇIKTI KURALLARI (KATI)\n\nZORUNLU:\n\n- YALNIZCA geçerli FlowMind DSL çıktısı üret\n- Açıklama YAPMA\n- Markdown biçimlendirmesi KULLANMA\n- Kod bloğuna SARMA\n- Yorum EKLEMEema\n- Ne yaptığını AÇIKLAMA\n- DSL dışında hiçbir şey ÇIKARMAK\n\nKullanıcı açıklaması belirsizse:\n- Makul varsayımlar yap\n- Mantıklı yapı seç\n- Akışı temiz ve okunabilir tut\n\n========================================\nMANTIK DÖNÜŞÜM STRATEJİSİ\n========================================\n\nKullanıcı girdisini dönüştürürken:\n\n1. Belirle:\n   - Başlangıç olayı\n   - Bitiş durumları\n   - Eylemler\n   - Kararlar\n   - Harici sistemler\n   - Mantıksal kümeler\n\n2. Dönüştür:\n   - Olaylar → start / end\n   - Eylemler → process\n   - Dallanma → decision\n   - Veritabanları/API'ler → system\n   - Paralel mantık → ayrı dallar\n   - Hata yolları → açık end düğümleri\n\n3. Sağla:\n   - Her yol bir uca ulaşır\n   - Yalnız düğüm yok\n   - Temiz mantıksal okunabilirlik\n\n========================================\nKULLANICI İSTEĞİ\n========================================\n\nAşağıdaki iş akışı açıklamasını FlowMind DSL V2'ye dönüştür:\n\n{{KULLANICI_İŞ_AKIŞI_AÇIKLAMASI}}\n\nDSL'yi şimdi oluştur.\n```\n\n---","src/content/docs/tr/openflow-dsl.md","b3a917640dcc8af7",{"html":1094,"metadata":1095},"\u003Cdiv class=\"sl-heading-wrapper level-h1\">\u003Ch1 id=\"-flowmind-dsl-sözdizimi-rehberi-v2\">🧠 FlowMind DSL Sözdizimi Rehberi (V2)\u003C/h1>\u003Ca class=\"sl-anchor-link\" href=\"#-flowmind-dsl-sözdizimi-rehberi-v2\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “🧠 FlowMind DSL Sözdizimi Rehberi (V2)”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>FlowMind, diyagramları metin kullanarak tanımlamak için temiz, insan tarafından okunabilir bir DSL kullanır.\nSürüm 2 şunları sunar:\u003C/p>\n\u003Cul>\n\u003Cli>Açık düğüm kimlikleri\u003C/li>\n\u003Cli>Stil özellikleri\u003C/li>\n\u003Cli>Gruplar / kapsayıcılar\u003C/li>\n\u003Cli>Kenar özelleştirmesi\u003C/li>\n\u003C/ul>\n\u003Chr>\n\u003Cdiv class=\"sl-heading-wrapper level-h1\">\u003Ch1 id=\"1️⃣-belge-başlığı\">1️⃣ Belge Başlığı\u003C/h1>\u003Ca class=\"sl-anchor-link\" href=\"#1️⃣-belge-başlığı\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “1️⃣ Belge Başlığı”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Her DSL dosyası isteğe bağlı meta verilerle başlayabilir:\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Clink rel=\"stylesheet\" href=\"/_astro/ec.v4551.css\">\u003Cscript type=\"module\" src=\"/_astro/ec.0vx5m.js\">\u003C/script>\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"yaml\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#7FDBCA;--1:#111111\">flow\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Harika İş Akışım\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#7FDBCA;--1:#111111\">direction\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">: \u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">TB\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"flow: &#x22;Harika İş Akışım&#x22;direction: TB\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"alanlar\">Alanlar\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#alanlar\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Alanlar”\u003C/span>\u003C/a>\u003C/div>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>Alan\u003C/th>\u003Cth>Açıklama\u003C/th>\u003C/tr>\u003C/thead>\u003Ctbody>\u003Ctr>\u003Ctd>\u003Ccode dir=\"auto\">flow\u003C/code>\u003C/td>\u003Ctd>Diyagramın başlığı\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Ccode dir=\"auto\">direction\u003C/code>\u003C/td>\u003Ctd>Düzen yönü: \u003Ccode dir=\"auto\">TB\u003C/code> (Yukarıdan Aşağıya) veya \u003Ccode dir=\"auto\">LR\u003C/code> (Soldan Sağa)\u003C/td>\u003C/tr>\u003C/tbody>\u003C/table>\n\u003Chr>\n\u003Cdiv class=\"sl-heading-wrapper level-h1\">\u003Ch1 id=\"2️⃣-düğümler\">2️⃣ Düğümler\u003C/h1>\u003Ca class=\"sl-anchor-link\" href=\"#2️⃣-düğümler\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “2️⃣ Düğümler”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Düğümler diyagram öğelerini tanımlar.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"temel-sözdizimi\">Temel Sözdizimi\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#temel-sözdizimi\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Temel Sözdizimi”\u003C/span>\u003C/a>\u003C/div>\n\u003Cdiv class=\"expressive-code\">\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"plaintext\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">[start] Süreci Başlat\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">[process] İsteği İşle\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">[end] Süreci Sonlandır\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"[start] Süreci Başlat[process] İsteği İşle[end] Süreci Sonlandır\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Chr>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"açık-kimliklerle\">Açık Kimliklerle\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#açık-kimliklerle\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Açık Kimliklerle”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Özellikle büyük akışlarda netlik için kullanışlıdır.\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"plaintext\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">[start] start: Süreci Başlat\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">[process] proc1: İsteği İşle\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">[end] end: Süreci Sonlandır\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">start -> proc1\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">proc1 -> end\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"[start] start: Süreci Başlat[process] proc1: İsteği İşle[end] end: Süreci Sonlandırstart -> proc1proc1 -> end\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Chr>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"özelliklerle\">Özelliklerle\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#özelliklerle\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Özelliklerle”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Özellikler JSON benzeri sözdizimi kullanır:\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"plaintext\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">[process] p1: Kritik Adım { color: \"red\", icon: \"alert-triangle\" }\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">[system] db: Veritabanı { icon: \"database\" }\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"[process] p1: Kritik Adım { color: &#x22;red&#x22;, icon: &#x22;alert-triangle&#x22; }[system] db: Veritabanı { icon: &#x22;database&#x22; }\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"özellik-örnekleri\">Özellik Örnekleri\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#özellik-örnekleri\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Özellik Örnekleri”\u003C/span>\u003C/a>\u003C/div>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>Özellik\u003C/th>\u003Cth>Amaç\u003C/th>\u003C/tr>\u003C/thead>\u003Ctbody>\u003Ctr>\u003Ctd>\u003Ccode dir=\"auto\">color\u003C/code>\u003C/td>\u003Ctd>Düğüm rengini geçersiz kıl\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Ccode dir=\"auto\">icon\u003C/code>\u003C/td>\u003Ctd>İkon ekle\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Ccode dir=\"auto\">style\u003C/code>\u003C/td>\u003Ctd>Özel stil değiştirici\u003C/td>\u003C/tr>\u003C/tbody>\u003C/table>\n\u003Chr>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"desteklenen-düğüm-türleri\">Desteklenen Düğüm Türleri\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#desteklenen-düğüm-türleri\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Desteklenen Düğüm Türleri”\u003C/span>\u003C/a>\u003C/div>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>DSL Türü\u003C/th>\u003Cth>Şekil\u003C/th>\u003Cth>Varsayılan Renk\u003C/th>\u003C/tr>\u003C/thead>\u003Ctbody>\u003Ctr>\u003Ctd>\u003Ccode dir=\"auto\">start\u003C/code>\u003C/td>\u003Ctd>Kapsül\u003C/td>\u003Ctd>Zümrüt\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Ccode dir=\"auto\">end\u003C/code>\u003C/td>\u003Ctd>Kapsül\u003C/td>\u003Ctd>Kırmızı\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Ccode dir=\"auto\">process\u003C/code>\u003C/td>\u003Ctd>Yuvarlak dikdörtgen\u003C/td>\u003Ctd>Arduvaz\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Ccode dir=\"auto\">decision\u003C/code>\u003C/td>\u003Ctd>Elmas\u003C/td>\u003Ctd>Amber\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Ccode dir=\"auto\">system\u003C/code>\u003C/td>\u003Ctd>Özel düğüm\u003C/td>\u003Ctd>Mor\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Ccode dir=\"auto\">note\u003C/code>\u003C/td>\u003Ctd>Yapışkan not\u003C/td>\u003Ctd>Sarı\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Ccode dir=\"auto\">section\u003C/code>\u003C/td>\u003Ctd>Grup kapsayıcısı\u003C/td>\u003Ctd>Mavi\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Ccode dir=\"auto\">container\u003C/code>\u003C/td>\u003Ctd>Genel grup\u003C/td>\u003Ctd>Gri\u003C/td>\u003C/tr>\u003C/tbody>\u003C/table>\n\u003Cp>Bir düğüm bağlantıda referans alınır ancak tanımlanmazsa varsayılan olarak \u003Ccode dir=\"auto\">process\u003C/code> kullanılır.\u003C/p>\n\u003Chr>\n\u003Cdiv class=\"sl-heading-wrapper level-h1\">\u003Ch1 id=\"3️⃣-kenarlar-bağlantılar\">3️⃣ Kenarlar (Bağlantılar)\u003C/h1>\u003Ca class=\"sl-anchor-link\" href=\"#3️⃣-kenarlar-bağlantılar\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “3️⃣ Kenarlar (Bağlantılar)”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Bağlantılar düğümler arasındaki akışı tanımlar.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"temel-bağlantı\">Temel Bağlantı\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#temel-bağlantı\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Temel Bağlantı”\u003C/span>\u003C/a>\u003C/div>\n\u003Cdiv class=\"expressive-code\">\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"plaintext\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">Süreci Başlat -> İsteği İşle\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"Süreci Başlat -> İsteği İşle\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Chr>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"kenar-türleri\">Kenar Türleri\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#kenar-türleri\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Kenar Türleri”\u003C/span>\u003C/a>\u003C/div>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>Sembol\u003C/th>\u003Cth>Anlam\u003C/th>\u003C/tr>\u003C/thead>\u003Ctbody>\u003Ctr>\u003Ctd>\u003Ccode dir=\"auto\">->\u003C/code>\u003C/td>\u003Ctd>Düz çizgi\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Ccode dir=\"auto\">-->\u003C/code>\u003C/td>\u003Ctd>Kavisli çizgi\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Ccode dir=\"auto\">..>\u003C/code>\u003C/td>\u003Ctd>Kesik çizgi\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Ccode dir=\"auto\">==>\u003C/code>\u003C/td>\u003Ctd>Kalın çizgi\u003C/td>\u003C/tr>\u003C/tbody>\u003C/table>\n\u003Cp>Örnek:\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"plaintext\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">A ..> B\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">C ==> D\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"A ..> BC ==> D\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Chr>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"etiketli-bağlantılar\">Etiketli Bağlantılar\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#etiketli-bağlantılar\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Etiketli Bağlantılar”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Pipe karakterleri kullanın:\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"plaintext\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">Geçerli mi? ->|Evet| Veriyi Kaydet\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">Geçerli mi? ->|Hayır| Hata Döndür\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"Geçerli mi? ->|Evet| Veriyi KaydetGeçerli mi? ->|Hayır| Hata Döndür\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Chr>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"kenar-özellikleri\">Kenar Özellikleri\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#kenar-özellikleri\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Kenar Özellikleri”\u003C/span>\u003C/a>\u003C/div>\n\u003Cdiv class=\"expressive-code\">\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"plaintext\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">A -> B { style: \"dashed\", label: \"Async\" }\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"A -> B { style: &#x22;dashed&#x22;, label: &#x22;Async&#x22; }\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Chr>\n\u003Cdiv class=\"sl-heading-wrapper level-h1\">\u003Ch1 id=\"4️⃣-gruplar\">4️⃣ Gruplar\u003C/h1>\u003Ca class=\"sl-anchor-link\" href=\"#4️⃣-gruplar\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “4️⃣ Gruplar”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Düğümleri kümelemek için \u003Ccode dir=\"auto\">group\u003C/code> kullanın.\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"plaintext\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">group \"Backend Servisleri\" {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">    \u003C/span>\u003C/span>\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">[process] api: API Sunucusu\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">    \u003C/span>\u003C/span>\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">[system] db: Veritabanı\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">    \u003C/span>\u003C/span>\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">api -> db\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">}\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"group &#x22;Backend Servisleri&#x22; {    [process] api: API Sunucusu    [system] db: Veritabanı    api -> db}\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cp>Gruplar mantıksal alanları görsel olarak ayırmaya yardımcı olur.\u003C/p>\n\u003Chr>\n\u003Cdiv class=\"sl-heading-wrapper level-h1\">\u003Ch1 id=\"5️⃣-yorumlar\">5️⃣ Yorumlar\u003C/h1>\u003Ca class=\"sl-anchor-link\" href=\"#5️⃣-yorumlar\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “5️⃣ Yorumlar”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>\u003Ccode dir=\"auto\">#\u003C/code> ile başlayan satırlar yoksayılır.\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"plaintext\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\"># Bu bir yorumdur\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">[start] Başla\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"# Bu bir yorumdur[start] Başla\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Chr>\n\u003Cdiv class=\"sl-heading-wrapper level-h1\">\u003Ch1 id=\"-tam-örnek\">✅ Tam Örnek\u003C/h1>\u003Ca class=\"sl-anchor-link\" href=\"#-tam-örnek\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “✅ Tam Örnek”\u003C/span>\u003C/a>\u003C/div>\n\u003Cdiv class=\"expressive-code\">\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"yaml\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#7FDBCA;--1:#111111\">flow\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Kullanıcı Giriş Akışı\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#7FDBCA;--1:#111111\">direction\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">: \u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">TB\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#919F9F;--1:#5F636F\"># Düğümleri Tanımla\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">[\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">start\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">] \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#111111\">user\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">: \u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">Kullanıcı\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">[\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">process\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">] \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#111111\">login\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">: \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#111111\">Giriş Sayfası { icon\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">log-in\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> }\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">group \"Kimlik Doğrulama\" {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">    \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">[\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">system\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">] \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#111111\">auth\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">: \u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">Auth Servisi\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">    \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">[\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">decision\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">] \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#111111\">check\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">: \u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">Geçerli mi?\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">[\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">end\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">] \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#111111\">dash\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">: \u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">Gösterge Paneli\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">[\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">end\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">] \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#111111\">err\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">: \u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">Hata\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#919F9F;--1:#5F636F\"># Mantığı Tanımla\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">user -> login\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">login -> auth\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">auth -> check\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#7FDBCA;--1:#111111\">check ->|Evet| dash { color\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">green\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> }\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#7FDBCA;--1:#111111\">check ->|Hayır| err { color\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">red\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">, \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#111111\">style\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">dashed\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> }\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"flow: &#x22;Kullanıcı Giriş Akışı&#x22;direction: TB# Düğümleri Tanımla[start] user: Kullanıcı[process] login: Giriş Sayfası { icon: &#x22;log-in&#x22; }group &#x22;Kimlik Doğrulama&#x22; {    [system] auth: Auth Servisi    [decision] check: Geçerli mi?}[end] dash: Gösterge Paneli[end] err: Hata# Mantığı Tanımlauser -> loginlogin -> authauth -> checkcheck ->|Evet| dash { color: &#x22;green&#x22; }check ->|Hayır| err { color: &#x22;red&#x22;, style: &#x22;dashed&#x22; }\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Chr>\n\u003Cdiv class=\"sl-heading-wrapper level-h1\">\u003Ch1 id=\"-llm-ajan-i̇stem-şablonu\">🤖 LLM Ajan İstem Şablonu\u003C/h1>\u003Ca class=\"sl-anchor-link\" href=\"#-llm-ajan-i̇stem-şablonu\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “🤖 LLM Ajan İstem Şablonu”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Bir LLM ajanı kullanarak FlowMind DSL oluşturmak isteyenler aşağıdaki istemi kullanabilir:\u003C/p>\n\u003Chr>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"llm-için-kopyala-yapıştır-i̇stemi\">LLM için Kopyala-Yapıştır İstemi\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#llm-için-kopyala-yapıştır-i̇stemi\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “LLM için Kopyala-Yapıştır İstemi”\u003C/span>\u003C/a>\u003C/div>\n\u003Cdiv class=\"expressive-code\">\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"plaintext\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">Sen uzman bir FlowMind DSL V2 oluşturucususun.\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">Görevin, kullanıcının iş akışı açıklamasını geçerli FlowMind DSL'ye dönüştürmektir.\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">Aşağıda tanımlanan FlowMind DSL V2 spesifikasyonunu kesinlikle takip etmelisin.\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">========================================\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">FLOWMIND DSL V2 SPESİFİKASYONU\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">========================================\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">1. BELGE BAŞLIĞI (Zorunlu)\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">Her çıktı şununla başlamalıdır:\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">flow: \"Başlık Buraya\"\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">direction: TB veya LR\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">Kurallar:\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">- Her zaman anlamlı bir başlık oluştur.\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">- Kullanıcı açıkça yatay düzen belirtmediği sürece TB'yi varsayılan olarak kullan.\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">----------------------------------------\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">2. DÜĞÜM TANIMLAMA KURALLARI\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">Düğüm sözdizimi:\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">[tür] kimlik: Etiket { isteğe_bağlı_özellikler }\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">Örnek:\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">[process] p1: İsteği İşle\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">[decision] d1: Geçerli mi? { icon: \"help-circle\" }\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">Kurallar:\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">- HER ZAMAN açık kimlikler kullan.\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">- Kimlikler kısa, küçük harf ve boşluksuz olmalıdır.\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">- Kimlikler benzersiz olmalıdır.\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">- Anlamlı isimler kullan (start, login, checkAuth, db, vb.).\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">- Etiketleri kimlik olarak KULLANMA.\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">- Düğüm tanımlamalarını ATLAMA.\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">Bir düğüm bağlantıda referans alınıyorsa önce tanımlanmış OLMALIDIR.\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">----------------------------------------\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">3. DESTEKLENEN DÜĞÜM TÜRLERİ\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">YALNIZCA bu türleri kullan:\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">start\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">end\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">process\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">decision\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">system\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">note\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">section\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">container\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">Kılavuz:\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">start      → akışın başlangıcı\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">end        → bitiş durumları\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">process    → eylemler veya adımlar\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">decision   → dallanma mantığı\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">system     → harici sistem/servis/veritabanı\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">note       → açıklamalar\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">section    → ana gruplu alan\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">container  → genel gruplama\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">----------------------------------------\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">4. DÜĞÜM ÖZELLİKLERİ (İsteğe Bağlı)\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">Özellikler JSON benzeri sözdizimi kullanır:\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">{ color: \"red\", icon: \"database\", style: \"dashed\" }\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">Kurallar:\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">- Özelliği yalnızca anlamlıysa ekle.\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">- Stili minimal tut.\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">- Desteklenmeyen özellikler uydurma.\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">----------------------------------------\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">5. KENARLAR (BAĞLANTILAR)\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">Temel sözdizimi:\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">kimlik1 -> kimlik2\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">Kenar türleri:\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">->   düz\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">-->  kavisli\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">..>  kesik\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">==>  kalın\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">Etiketli kenarlar:\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">kimlik1 ->|Evet| kimlik2\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">Özellikli kenar:\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">kimlik1 -> kimlik2 { label: \"Async\", style: \"dashed\" }\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">Kurallar:\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">- Her zaman etiket değil kimlik kullanarak bağlan.\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">- Karar düğümleri etiketli kenarlar KULLANMALIDIR.\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">- Karardan gelen her dal açık olmalıdır.\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">- Yalnız düğüm bırakma.\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">----------------------------------------\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">6. GRUPLAR\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">Mantıksal kümeleme mevcutsa gruplama kullan.\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">Sözdizimi:\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">group \"Grup Adı\" {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">    \u003C/span>\u003C/span>\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">düğüm tanımlamaları\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">    \u003C/span>\u003C/span>\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">iç bağlantılar\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">}\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">Kurallar:\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">- Gruplar yalnızca ilgili düğümleri kapsamalıdır.\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">- Gruplar arası bağlantılar grup bloğunun dışında tanımlanmalıdır.\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">----------------------------------------\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">7. YORUMLAR\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">Yorumlar için # kullan; aşırıya kaçma.\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">Aşırı yorum yapma.\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">----------------------------------------\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">8. ÇIKTI KURALLARI (KATI)\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">ZORUNLU:\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">- YALNIZCA geçerli FlowMind DSL çıktısı üret\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">- Açıklama YAPMA\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">- Markdown biçimlendirmesi KULLANMA\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">- Kod bloğuna SARMA\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">- Yorum EKLEMEema\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">- Ne yaptığını AÇIKLAMA\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">- DSL dışında hiçbir şey ÇIKARMAK\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">Kullanıcı açıklaması belirsizse:\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">- Makul varsayımlar yap\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">- Mantıklı yapı seç\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">- Akışı temiz ve okunabilir tut\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">========================================\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">MANTIK DÖNÜŞÜM STRATEJİSİ\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">========================================\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">Kullanıcı girdisini dönüştürürken:\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">1. Belirle:\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">   \u003C/span>\u003C/span>\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">- Başlangıç olayı\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">   \u003C/span>\u003C/span>\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">- Bitiş durumları\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">   \u003C/span>\u003C/span>\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">- Eylemler\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">   \u003C/span>\u003C/span>\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">- Kararlar\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">   \u003C/span>\u003C/span>\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">- Harici sistemler\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">   \u003C/span>\u003C/span>\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">- Mantıksal kümeler\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">2. Dönüştür:\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">   \u003C/span>\u003C/span>\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">- Olaylar → start / end\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">   \u003C/span>\u003C/span>\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">- Eylemler → process\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">   \u003C/span>\u003C/span>\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">- Dallanma → decision\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">   \u003C/span>\u003C/span>\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">- Veritabanları/API'ler → system\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">   \u003C/span>\u003C/span>\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">- Paralel mantık → ayrı dallar\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">   \u003C/span>\u003C/span>\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">- Hata yolları → açık end düğümleri\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">3. Sağla:\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">   \u003C/span>\u003C/span>\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">- Her yol bir uca ulaşır\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">   \u003C/span>\u003C/span>\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">- Yalnız düğüm yok\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">   \u003C/span>\u003C/span>\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">- Temiz mantıksal okunabilirlik\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">========================================\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">KULLANICI İSTEĞİ\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">========================================\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">Aşağıdaki iş akışı açıklamasını FlowMind DSL V2'ye dönüştür:\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">{{KULLANICI_İŞ_AKIŞI_AÇIKLAMASI}}\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">DSL'yi şimdi oluştur.\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"Sen uzman bir FlowMind DSL V2 oluşturucususun.Görevin, kullanıcının iş akışı açıklamasını geçerli FlowMind DSL&#x27;ye dönüştürmektir.Aşağıda tanımlanan FlowMind DSL V2 spesifikasyonunu kesinlikle takip etmelisin.========================================FLOWMIND DSL V2 SPESİFİKASYONU========================================1. BELGE BAŞLIĞI (Zorunlu)Her çıktı şununla başlamalıdır:flow: &#x22;Başlık Buraya&#x22;direction: TB veya LRKurallar:- Her zaman anlamlı bir başlık oluştur.- Kullanıcı açıkça yatay düzen belirtmediği sürece TB&#x27;yi varsayılan olarak kullan.----------------------------------------2. DÜĞÜM TANIMLAMA KURALLARIDüğüm sözdizimi:[tür] kimlik: Etiket { isteğe_bağlı_özellikler }Örnek:[process] p1: İsteği İşle[decision] d1: Geçerli mi? { icon: &#x22;help-circle&#x22; }Kurallar:- HER ZAMAN açık kimlikler kullan.- Kimlikler kısa, küçük harf ve boşluksuz olmalıdır.- Kimlikler benzersiz olmalıdır.- Anlamlı isimler kullan (start, login, checkAuth, db, vb.).- Etiketleri kimlik olarak KULLANMA.- Düğüm tanımlamalarını ATLAMA.Bir düğüm bağlantıda referans alınıyorsa önce tanımlanmış OLMALIDIR.----------------------------------------3. DESTEKLENEN DÜĞÜM TÜRLERİYALNIZCA bu türleri kullan:startendprocessdecisionsystemnotesectioncontainerKılavuz:start      → akışın başlangıcıend        → bitiş durumlarıprocess    → eylemler veya adımlardecision   → dallanma mantığısystem     → harici sistem/servis/veritabanınote       → açıklamalarsection    → ana gruplu alancontainer  → genel gruplama----------------------------------------4. DÜĞÜM ÖZELLİKLERİ (İsteğe Bağlı)Özellikler JSON benzeri sözdizimi kullanır:{ color: &#x22;red&#x22;, icon: &#x22;database&#x22;, style: &#x22;dashed&#x22; }Kurallar:- Özelliği yalnızca anlamlıysa ekle.- Stili minimal tut.- Desteklenmeyen özellikler uydurma.----------------------------------------5. KENARLAR (BAĞLANTILAR)Temel sözdizimi:kimlik1 -> kimlik2Kenar türleri:->   düz-->  kavisli..>  kesik==>  kalınEtiketli kenarlar:kimlik1 ->|Evet| kimlik2Özellikli kenar:kimlik1 -> kimlik2 { label: &#x22;Async&#x22;, style: &#x22;dashed&#x22; }Kurallar:- Her zaman etiket değil kimlik kullanarak bağlan.- Karar düğümleri etiketli kenarlar KULLANMALIDIR.- Karardan gelen her dal açık olmalıdır.- Yalnız düğüm bırakma.----------------------------------------6. GRUPLARMantıksal kümeleme mevcutsa gruplama kullan.Sözdizimi:group &#x22;Grup Adı&#x22; {    düğüm tanımlamaları    iç bağlantılar}Kurallar:- Gruplar yalnızca ilgili düğümleri kapsamalıdır.- Gruplar arası bağlantılar grup bloğunun dışında tanımlanmalıdır.----------------------------------------7. YORUMLARYorumlar için # kullan; aşırıya kaçma.Aşırı yorum yapma.----------------------------------------8. ÇIKTI KURALLARI (KATI)ZORUNLU:- YALNIZCA geçerli FlowMind DSL çıktısı üret- Açıklama YAPMA- Markdown biçimlendirmesi KULLANMA- Kod bloğuna SARMA- Yorum EKLEMEema- Ne yaptığını AÇIKLAMA- DSL dışında hiçbir şey ÇIKARMAKKullanıcı açıklaması belirsizse:- Makul varsayımlar yap- Mantıklı yapı seç- Akışı temiz ve okunabilir tut========================================MANTIK DÖNÜŞÜM STRATEJİSİ========================================Kullanıcı girdisini dönüştürürken:1. Belirle:   - Başlangıç olayı   - Bitiş durumları   - Eylemler   - Kararlar   - Harici sistemler   - Mantıksal kümeler2. Dönüştür:   - Olaylar → start / end   - Eylemler → process   - Dallanma → decision   - Veritabanları/API&#x27;ler → system   - Paralel mantık → ayrı dallar   - Hata yolları → açık end düğümleri3. Sağla:   - Her yol bir uca ulaşır   - Yalnız düğüm yok   - Temiz mantıksal okunabilirlik========================================KULLANICI İSTEĞİ========================================Aşağıdaki iş akışı açıklamasını FlowMind DSL V2&#x27;ye dönüştür:{{KULLANICI_İŞ_AKIŞI_AÇIKLAMASI}}DSL&#x27;yi şimdi oluştur.\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Chr>",{"headings":1096,"localImagePaths":1154,"remoteImagePaths":1155,"frontmatter":1156,"imagePaths":1157},[1097,1100,1103,1106,1109,1112,1115,1118,1121,1124,1127,1130,1133,1136,1139,1142,1145,1148,1151],{"depth":67,"slug":1098,"text":1099},"-flowmind-dsl-sözdizimi-rehberi-v2","🧠 FlowMind DSL Sözdizimi Rehberi (V2)",{"depth":67,"slug":1101,"text":1102},"1️⃣-belge-başlığı","1️⃣ Belge Başlığı",{"depth":36,"slug":1104,"text":1105},"alanlar","Alanlar",{"depth":67,"slug":1107,"text":1108},"2️⃣-düğümler","2️⃣ Düğümler",{"depth":29,"slug":1110,"text":1111},"temel-sözdizimi","Temel Sözdizimi",{"depth":29,"slug":1113,"text":1114},"açık-kimliklerle","Açık Kimliklerle",{"depth":29,"slug":1116,"text":1117},"özelliklerle","Özelliklerle",{"depth":36,"slug":1119,"text":1120},"özellik-örnekleri","Özellik Örnekleri",{"depth":29,"slug":1122,"text":1123},"desteklenen-düğüm-türleri","Desteklenen Düğüm Türleri",{"depth":67,"slug":1125,"text":1126},"3️⃣-kenarlar-bağlantılar","3️⃣ Kenarlar (Bağlantılar)",{"depth":29,"slug":1128,"text":1129},"temel-bağlantı","Temel Bağlantı",{"depth":29,"slug":1131,"text":1132},"kenar-türleri","Kenar Türleri",{"depth":29,"slug":1134,"text":1135},"etiketli-bağlantılar","Etiketli Bağlantılar",{"depth":29,"slug":1137,"text":1138},"kenar-özellikleri","Kenar Özellikleri",{"depth":67,"slug":1140,"text":1141},"4️⃣-gruplar","4️⃣ Gruplar",{"depth":67,"slug":1143,"text":1144},"5️⃣-yorumlar","5️⃣ Yorumlar",{"depth":67,"slug":1146,"text":1147},"-tam-örnek","✅ Tam Örnek",{"depth":67,"slug":1149,"text":1150},"-llm-ajan-i̇stem-şablonu","🤖 LLM Ajan İstem Şablonu",{"depth":29,"slug":1152,"text":1153},"llm-için-kopyala-yapıştır-i̇stemi","LLM için Kopyala-Yapıştır İstemi",[],[],{"draft":19,"title":389},[],"tr/quick-start",{"id":1158,"data":1160,"body":1164,"filePath":1165,"digest":1166,"rendered":1167},{"title":614,"editUrl":15,"head":1161,"template":17,"sidebar":1162,"pagefind":15,"draft":19},[],{"hidden":19,"attrs":1163},{},"Bu kılavuz, OpenFlowKit'te 2 dakikadan kısa sürede ilk diyagramınızı oluşturmanıza yardımcı olacaktır.\n\n## 1. Yeni Bir Akış Oluşturun\n\nKontrol Panelinden **\"Yeni Oluştur\"** düğmesine tıklayın (veya \\`Cmd+N\\` tuşuna basın). Temiz bir tuvale yönlendirileceksiniz.\n\n## 2. Yapay Zeka Üretimini Kullanma\n\nBaşlamanın en hızlı yolu bir istemle başlamaktır.\n\n1.  Ekranın alt kısmındaki komut çubuğunu bulun.\n2.  Akışınızın bir açıklamasını yazın.\n    *   *Örnek:* \"E-posta doğrulama ve veritabanı kontrolleri içeren bir kullanıcı kayıt akışı oluştur.\"\n3.  \\`Enter\\` tuşuna basın.\n\nOpenFlowKit sizin için eksiksiz bir diyagram yapısı oluşturacaktır.\n\n## 3. Düğümleri Düzenleme\n\nOluşturulduktan sonra diyagramı iyileştirebilirsiniz:\n\n*   **Taşı**: Herhangi bir düğümü yeniden konumlandırmak için tıklayın ve sürükleyin.\n*   **Metni Düzenle**: Etiketini değiştirmek için bir düğüme çift tıklayın.\n*   **Bağla**: Bir düğümü başka bir düğüme bağlamak için düğüm kenarındaki tutamaclardan (noktalar) sürükleyin.\n\n## 4. Akıllı Düzen Kullanma\n\nDiyagramınız karmaşıklaşırsa, üst araç çubuğundaki **\"Otomatik Düzen\"** düğmesine tıklayın. OpenFlowKit, düğümlerinizi temiz bir hiyerarşi içinde otomatik olarak düzenlemek için ELK düzen motorunu kullanır.\n\n## 5. Dışa Aktarma\n\nAkışınızdan memnun kaldığınızda:\n\n1.  Sağ üstteki **Dışa Aktar** düğmesine tıklayın.\n2.  Formatınızı seçin (PNG, SVG veya JSON).\n3.  Dosyanızı indirin.\n\n[YER TUTUCU: Oluşturma sürecini gösteren GIF]","src/content/docs/tr/quick-start.md","499fd7a35091afcc",{"html":1168,"metadata":1169},"\u003Cp>Bu kılavuz, OpenFlowKit’te 2 dakikadan kısa sürede ilk diyagramınızı oluşturmanıza yardımcı olacaktır.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"1-yeni-bir-akış-oluşturun\">1. Yeni Bir Akış Oluşturun\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#1-yeni-bir-akış-oluşturun\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “1. Yeni Bir Akış Oluşturun”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Kontrol Panelinden \u003Cstrong>“Yeni Oluştur”\u003C/strong> düğmesine tıklayın (veya `Cmd+N` tuşuna basın). Temiz bir tuvale yönlendirileceksiniz.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"2-yapay-zeka-üretimini-kullanma\">2. Yapay Zeka Üretimini Kullanma\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#2-yapay-zeka-üretimini-kullanma\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “2. Yapay Zeka Üretimini Kullanma”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Başlamanın en hızlı yolu bir istemle başlamaktır.\u003C/p>\n\u003Col>\n\u003Cli>Ekranın alt kısmındaki komut çubuğunu bulun.\u003C/li>\n\u003Cli>Akışınızın bir açıklamasını yazın.\n\u003Cul>\n\u003Cli>\u003Cem>Örnek:\u003C/em> “E-posta doğrulama ve veritabanı kontrolleri içeren bir kullanıcı kayıt akışı oluştur.”\u003C/li>\n\u003C/ul>\n\u003C/li>\n\u003Cli>`Enter` tuşuna basın.\u003C/li>\n\u003C/ol>\n\u003Cp>OpenFlowKit sizin için eksiksiz bir diyagram yapısı oluşturacaktır.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"3-düğümleri-düzenleme\">3. Düğümleri Düzenleme\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#3-düğümleri-düzenleme\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “3. Düğümleri Düzenleme”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Oluşturulduktan sonra diyagramı iyileştirebilirsiniz:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Taşı\u003C/strong>: Herhangi bir düğümü yeniden konumlandırmak için tıklayın ve sürükleyin.\u003C/li>\n\u003Cli>\u003Cstrong>Metni Düzenle\u003C/strong>: Etiketini değiştirmek için bir düğüme çift tıklayın.\u003C/li>\n\u003Cli>\u003Cstrong>Bağla\u003C/strong>: Bir düğümü başka bir düğüme bağlamak için düğüm kenarındaki tutamaclardan (noktalar) sürükleyin.\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"4-akıllı-düzen-kullanma\">4. Akıllı Düzen Kullanma\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#4-akıllı-düzen-kullanma\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “4. Akıllı Düzen Kullanma”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Diyagramınız karmaşıklaşırsa, üst araç çubuğundaki \u003Cstrong>“Otomatik Düzen”\u003C/strong> düğmesine tıklayın. OpenFlowKit, düğümlerinizi temiz bir hiyerarşi içinde otomatik olarak düzenlemek için ELK düzen motorunu kullanır.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"5-dışa-aktarma\">5. Dışa Aktarma\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#5-dışa-aktarma\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “5. Dışa Aktarma”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Akışınızdan memnun kaldığınızda:\u003C/p>\n\u003Col>\n\u003Cli>Sağ üstteki \u003Cstrong>Dışa Aktar\u003C/strong> düğmesine tıklayın.\u003C/li>\n\u003Cli>Formatınızı seçin (PNG, SVG veya JSON).\u003C/li>\n\u003Cli>Dosyanızı indirin.\u003C/li>\n\u003C/ol>\n\u003Cp>[YER TUTUCU: Oluşturma sürecini gösteren GIF]\u003C/p>",{"headings":1170,"localImagePaths":1186,"remoteImagePaths":1187,"frontmatter":1188,"imagePaths":1189},[1171,1174,1177,1180,1183],{"depth":29,"slug":1172,"text":1173},"1-yeni-bir-akış-oluşturun","1. Yeni Bir Akış Oluşturun",{"depth":29,"slug":1175,"text":1176},"2-yapay-zeka-üretimini-kullanma","2. Yapay Zeka Üretimini Kullanma",{"depth":29,"slug":1178,"text":1179},"3-düğümleri-düzenleme","3. Düğümleri Düzenleme",{"depth":29,"slug":1181,"text":1182},"4-akıllı-düzen-kullanma","4. Akıllı Düzen Kullanma",{"depth":29,"slug":1184,"text":1185},"5-dışa-aktarma","5. Dışa Aktarma",[],[],{"draft":19,"title":614},[],"tr/roadmap",{"id":1190,"data":1192,"body":1196,"filePath":1197,"digest":1198,"rendered":1199},{"title":557,"editUrl":15,"head":1193,"template":17,"sidebar":1194,"pagefind":15,"draft":19},[],{"hidden":19,"attrs":1195},{},"# 🗺️ OpenFlowKit Ürün Yol Haritası\n\nAçık kaynaklı, beyaz etiketli diyagramlama için standartı oluşturuyoruz. Bu yol haritası **OpenFlowKit**'in geleceğine yönelik vizyonumuzu özetlemektedir.\n\n> **Not**: Bu yaşayan bir belgedir. Öncelikler topluluk geri bildirimlerine göre değişebilir.\n\n---\n\n## 🚀 Ç3 2026: Yapay Zeka Genişlemesi (v1.2)\n*Odak: Diyagram oluşturmayı daha akıllı, daha hızlı ve daha çok yönlü hale getirmek.*\n\n### 🧠 Çok Modelli Yapay Zeka Desteği\nTek bir sağlayıcıyla sınırlı kalmayın. Tüm büyük LLM'ler için \"Kendi Anahtarını Getir\" modelini destekleyeceğiz:\n- **Anthropic Claude 3.5 Sonnet**: Karmaşık sistem mimarisi diyagramları için optimize edilmiş.\n- **OpenAI GPT-4o**: İş mantığı akışları için hızlı, muhakeme ağırlıklı üretim.\n- **Yerel LLM'ler (Ollama)**: %100 çevrimdışı, hava boşluklu diyagram oluşturma için Llama 3 veya Mistral'ı yerel olarak çalıştırın.\n\n### ⚡ Gerçek Zamanlı \"Copilot\" Modu\n- **Akışlar için Otomatik Tamamlama**: Bir düğümü sürüklerken yapay zeka, mevcut grafik bağlamınıza dayanarak en mantıklı 3 sonraki adımı önerir.\n- **Akıllı Yeniden Düzenleme**: Karmaşık düğümleri seçin ve yapay zekadan \"Düzeni Optimize Et\" veya \"Alt Gruba Grupla\" isteyin.\n\n---\n\n## 🤝 Ç4 2026: İş Birliği ve Ekipler (v2.0)\n*Odak: Bireysel bir geliştirici aracını ekip gücü merkezine dönüştürmek.*\n\n### 👥 Gerçek Zamanlı Çok Oyunculu\n- **Canlı İmleçler**: Takım arkadaşlarınızın nereye baktığını görün.\n- **Çakışmasız Düzenleme**: Sorunsuz iş birlikçi oturumlar için **Yjs** ve CRDT'lerle desteklenir.\n- **Varlık**: \"Bu akışta kim var?\" göstergeleri.\n\n### 💬 Bağlamsal Yorumlar\n- Yorumları doğrudan düğümlere veya kenarlara sabitleyin.\n- Diyagram içindeki görevlere takım üyelerini @etiketle.\n- Uygulamayı tamamladıkça konuları çözüme kavuşturun.\n\n### 💾 Bulut Kalıcılık Adaptörü\n- PostgreSQL/Supabase'e akış kaydetmek için isteğe bağlı referans uygulaması.\n- Yüzlerce diyagramı düzenlemek için \"Proje\" görünümü.\n\n---\n\n## 🛠️ 2027: Platform Dönemi (v3.0)\n*Odak: Geliştirici ekosistemine derin entegrasyon.*\n\n### 🔌 IDE Uzantıları\n- **VS Code Uzantısı**: Premium GUI'mizle `.flow` veya `.mermaid` dosyalarını doğrudan VS Code içinde düzenleyin.\n- **IntelliJ / JetBrains Eklentisi**: Java/Kotlin ekosistemi diyagramları için yerel destek.\n\n### 🎨 Gelişmiş Tasarım Sistemi\n- **Figma Senkronizasyonu**: İki yönlü senkronizasyon. Değişiklikleri Figma'dan OpenFlowKit'e ve tersine aktarın.\n- **Özel React Düğümleri**: Geliştiricilerin bir düğüm içinde *herhangi bir* React bileşenini (Grafikler, Veri Tabloları, Videolar) oluşturmasına olanak tanıyan eklenti API'si.\n\n### 📊 Veri Odaklı Diyagramlar\n- **Canlı Metrikler**: Düğüm renklerini/boyutlarını gerçek zamanlı API verilerine bağlayın (örn. Sunucu Sağlığı görselleştirmesi).\n- **SQL'den ERD'ye**: Veritabanınıza bağlanın ve Varlık İlişki Diyagramını otomatik olarak oluşturun.\n\n---\n\n## 💡 Topluluk İstek Listesi\nKullanıcı isteklerine göre incelediğimiz özellikler:\n- [ ] **Sunum Modu**: Karmaşık akışların slayt slayt anlatımı.\n- [ ] **Erişilebilirlik (A11y)**: Ekran okuyucu desteği ve klavye navigasyonu iyileştirmeleri.\n- [ ] **Uluslararasılaştırma (i18n)**: Arayüzü 10'dan fazla dile çevirme.\n\n---\n\n*Mevcut Sürüm: v1.0.0-beta*  \n*Son Güncelleme: Şubat 2026*","src/content/docs/tr/roadmap.md","ad6eda23dc0da2eb",{"html":1200,"metadata":1201},"\u003Cdiv class=\"sl-heading-wrapper level-h1\">\u003Ch1 id=\"️-openflowkit-ürün-yol-haritası\">🗺️ OpenFlowKit Ürün Yol Haritası\u003C/h1>\u003Ca class=\"sl-anchor-link\" href=\"#️-openflowkit-ürün-yol-haritası\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “🗺️ OpenFlowKit Ürün Yol Haritası”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Açık kaynaklı, beyaz etiketli diyagramlama için standartı oluşturuyoruz. Bu yol haritası \u003Cstrong>OpenFlowKit\u003C/strong>’in geleceğine yönelik vizyonumuzu özetlemektedir.\u003C/p>\n\u003Cblockquote>\n\u003Cp>\u003Cstrong>Not\u003C/strong>: Bu yaşayan bir belgedir. Öncelikler topluluk geri bildirimlerine göre değişebilir.\u003C/p>\n\u003C/blockquote>\n\u003Chr>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"-ç3-2026-yapay-zeka-genişlemesi-v12\">🚀 Ç3 2026: Yapay Zeka Genişlemesi (v1.2)\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#-ç3-2026-yapay-zeka-genişlemesi-v12\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “🚀 Ç3 2026: Yapay Zeka Genişlemesi (v1.2)”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>\u003Cem>Odak: Diyagram oluşturmayı daha akıllı, daha hızlı ve daha çok yönlü hale getirmek.\u003C/em>\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"-çok-modelli-yapay-zeka-desteği\">🧠 Çok Modelli Yapay Zeka Desteği\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#-çok-modelli-yapay-zeka-desteği\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “🧠 Çok Modelli Yapay Zeka Desteği”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Tek bir sağlayıcıyla sınırlı kalmayın. Tüm büyük LLM’ler için “Kendi Anahtarını Getir” modelini destekleyeceğiz:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Anthropic Claude 3.5 Sonnet\u003C/strong>: Karmaşık sistem mimarisi diyagramları için optimize edilmiş.\u003C/li>\n\u003Cli>\u003Cstrong>OpenAI GPT-4o\u003C/strong>: İş mantığı akışları için hızlı, muhakeme ağırlıklı üretim.\u003C/li>\n\u003Cli>\u003Cstrong>Yerel LLM’ler (Ollama)\u003C/strong>: %100 çevrimdışı, hava boşluklu diyagram oluşturma için Llama 3 veya Mistral’ı yerel olarak çalıştırın.\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"-gerçek-zamanlı-copilot-modu\">⚡ Gerçek Zamanlı “Copilot” Modu\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#-gerçek-zamanlı-copilot-modu\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “⚡ Gerçek Zamanlı “Copilot” Modu”\u003C/span>\u003C/a>\u003C/div>\n\u003Cul>\n\u003Cli>\u003Cstrong>Akışlar için Otomatik Tamamlama\u003C/strong>: Bir düğümü sürüklerken yapay zeka, mevcut grafik bağlamınıza dayanarak en mantıklı 3 sonraki adımı önerir.\u003C/li>\n\u003Cli>\u003Cstrong>Akıllı Yeniden Düzenleme\u003C/strong>: Karmaşık düğümleri seçin ve yapay zekadan “Düzeni Optimize Et” veya “Alt Gruba Grupla” isteyin.\u003C/li>\n\u003C/ul>\n\u003Chr>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"-ç4-2026-i̇ş-birliği-ve-ekipler-v20\">🤝 Ç4 2026: İş Birliği ve Ekipler (v2.0)\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#-ç4-2026-i̇ş-birliği-ve-ekipler-v20\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “🤝 Ç4 2026: İş Birliği ve Ekipler (v2.0)”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>\u003Cem>Odak: Bireysel bir geliştirici aracını ekip gücü merkezine dönüştürmek.\u003C/em>\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"-gerçek-zamanlı-çok-oyunculu\">👥 Gerçek Zamanlı Çok Oyunculu\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#-gerçek-zamanlı-çok-oyunculu\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “👥 Gerçek Zamanlı Çok Oyunculu”\u003C/span>\u003C/a>\u003C/div>\n\u003Cul>\n\u003Cli>\u003Cstrong>Canlı İmleçler\u003C/strong>: Takım arkadaşlarınızın nereye baktığını görün.\u003C/li>\n\u003Cli>\u003Cstrong>Çakışmasız Düzenleme\u003C/strong>: Sorunsuz iş birlikçi oturumlar için \u003Cstrong>Yjs\u003C/strong> ve CRDT’lerle desteklenir.\u003C/li>\n\u003Cli>\u003Cstrong>Varlık\u003C/strong>: “Bu akışta kim var?” göstergeleri.\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"-bağlamsal-yorumlar\">💬 Bağlamsal Yorumlar\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#-bağlamsal-yorumlar\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “💬 Bağlamsal Yorumlar”\u003C/span>\u003C/a>\u003C/div>\n\u003Cul>\n\u003Cli>Yorumları doğrudan düğümlere veya kenarlara sabitleyin.\u003C/li>\n\u003Cli>Diyagram içindeki görevlere takım üyelerini @etiketle.\u003C/li>\n\u003Cli>Uygulamayı tamamladıkça konuları çözüme kavuşturun.\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"-bulut-kalıcılık-adaptörü\">💾 Bulut Kalıcılık Adaptörü\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#-bulut-kalıcılık-adaptörü\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “💾 Bulut Kalıcılık Adaptörü”\u003C/span>\u003C/a>\u003C/div>\n\u003Cul>\n\u003Cli>PostgreSQL/Supabase’e akış kaydetmek için isteğe bağlı referans uygulaması.\u003C/li>\n\u003Cli>Yüzlerce diyagramı düzenlemek için “Proje” görünümü.\u003C/li>\n\u003C/ul>\n\u003Chr>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"️-2027-platform-dönemi-v30\">🛠️ 2027: Platform Dönemi (v3.0)\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#️-2027-platform-dönemi-v30\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “🛠️ 2027: Platform Dönemi (v3.0)”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>\u003Cem>Odak: Geliştirici ekosistemine derin entegrasyon.\u003C/em>\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"-ide-uzantıları\">🔌 IDE Uzantıları\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#-ide-uzantıları\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “🔌 IDE Uzantıları”\u003C/span>\u003C/a>\u003C/div>\n\u003Cul>\n\u003Cli>\u003Cstrong>VS Code Uzantısı\u003C/strong>: Premium GUI’mizle \u003Ccode dir=\"auto\">.flow\u003C/code> veya \u003Ccode dir=\"auto\">.mermaid\u003C/code> dosyalarını doğrudan VS Code içinde düzenleyin.\u003C/li>\n\u003Cli>\u003Cstrong>IntelliJ / JetBrains Eklentisi\u003C/strong>: Java/Kotlin ekosistemi diyagramları için yerel destek.\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"-gelişmiş-tasarım-sistemi\">🎨 Gelişmiş Tasarım Sistemi\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#-gelişmiş-tasarım-sistemi\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “🎨 Gelişmiş Tasarım Sistemi”\u003C/span>\u003C/a>\u003C/div>\n\u003Cul>\n\u003Cli>\u003Cstrong>Figma Senkronizasyonu\u003C/strong>: İki yönlü senkronizasyon. Değişiklikleri Figma’dan OpenFlowKit’e ve tersine aktarın.\u003C/li>\n\u003Cli>\u003Cstrong>Özel React Düğümleri\u003C/strong>: Geliştiricilerin bir düğüm içinde \u003Cem>herhangi bir\u003C/em> React bileşenini (Grafikler, Veri Tabloları, Videolar) oluşturmasına olanak tanıyan eklenti API’si.\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"-veri-odaklı-diyagramlar\">📊 Veri Odaklı Diyagramlar\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#-veri-odaklı-diyagramlar\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “📊 Veri Odaklı Diyagramlar”\u003C/span>\u003C/a>\u003C/div>\n\u003Cul>\n\u003Cli>\u003Cstrong>Canlı Metrikler\u003C/strong>: Düğüm renklerini/boyutlarını gerçek zamanlı API verilerine bağlayın (örn. Sunucu Sağlığı görselleştirmesi).\u003C/li>\n\u003Cli>\u003Cstrong>SQL’den ERD’ye\u003C/strong>: Veritabanınıza bağlanın ve Varlık İlişki Diyagramını otomatik olarak oluşturun.\u003C/li>\n\u003C/ul>\n\u003Chr>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"-topluluk-i̇stek-listesi\">💡 Topluluk İstek Listesi\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#-topluluk-i̇stek-listesi\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “💡 Topluluk İstek Listesi”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Kullanıcı isteklerine göre incelediğimiz özellikler:\u003C/p>\n\u003Cul class=\"contains-task-list\">\n\u003Cli class=\"task-list-item\">\u003Cinput type=\"checkbox\" disabled> \u003Cstrong>Sunum Modu\u003C/strong>: Karmaşık akışların slayt slayt anlatımı.\u003C/li>\n\u003Cli class=\"task-list-item\">\u003Cinput type=\"checkbox\" disabled> \u003Cstrong>Erişilebilirlik (A11y)\u003C/strong>: Ekran okuyucu desteği ve klavye navigasyonu iyileştirmeleri.\u003C/li>\n\u003Cli class=\"task-list-item\">\u003Cinput type=\"checkbox\" disabled> \u003Cstrong>Uluslararasılaştırma (i18n)\u003C/strong>: Arayüzü 10’dan fazla dile çevirme.\u003C/li>\n\u003C/ul>\n\u003Chr>\n\u003Cp>\u003Cem>Mevcut Sürüm: v1.0.0-beta\u003C/em>\u003Cbr>\n\u003Cem>Son Güncelleme: Şubat 2026\u003C/em>\u003C/p>",{"headings":1202,"localImagePaths":1242,"remoteImagePaths":1243,"frontmatter":1244,"imagePaths":1245},[1203,1206,1209,1212,1215,1218,1221,1224,1227,1230,1233,1236,1239],{"depth":67,"slug":1204,"text":1205},"️-openflowkit-ürün-yol-haritası","🗺️ OpenFlowKit Ürün Yol Haritası",{"depth":29,"slug":1207,"text":1208},"-ç3-2026-yapay-zeka-genişlemesi-v12","🚀 Ç3 2026: Yapay Zeka Genişlemesi (v1.2)",{"depth":36,"slug":1210,"text":1211},"-çok-modelli-yapay-zeka-desteği","🧠 Çok Modelli Yapay Zeka Desteği",{"depth":36,"slug":1213,"text":1214},"-gerçek-zamanlı-copilot-modu","⚡ Gerçek Zamanlı “Copilot” Modu",{"depth":29,"slug":1216,"text":1217},"-ç4-2026-i̇ş-birliği-ve-ekipler-v20","🤝 Ç4 2026: İş Birliği ve Ekipler (v2.0)",{"depth":36,"slug":1219,"text":1220},"-gerçek-zamanlı-çok-oyunculu","👥 Gerçek Zamanlı Çok Oyunculu",{"depth":36,"slug":1222,"text":1223},"-bağlamsal-yorumlar","💬 Bağlamsal Yorumlar",{"depth":36,"slug":1225,"text":1226},"-bulut-kalıcılık-adaptörü","💾 Bulut Kalıcılık Adaptörü",{"depth":29,"slug":1228,"text":1229},"️-2027-platform-dönemi-v30","🛠️ 2027: Platform Dönemi (v3.0)",{"depth":36,"slug":1231,"text":1232},"-ide-uzantıları","🔌 IDE Uzantıları",{"depth":36,"slug":1234,"text":1235},"-gelişmiş-tasarım-sistemi","🎨 Gelişmiş Tasarım Sistemi",{"depth":36,"slug":1237,"text":1238},"-veri-odaklı-diyagramlar","📊 Veri Odaklı Diyagramlar",{"depth":29,"slug":1240,"text":1241},"-topluluk-i̇stek-listesi","💡 Topluluk İstek Listesi",[],[],{"draft":19,"title":557},[],"tr/theming",{"id":1246,"data":1248,"body":1252,"filePath":1253,"digest":1254,"rendered":1255},{"title":703,"editUrl":15,"head":1249,"template":17,"sidebar":1250,"pagefind":15,"draft":19},[],{"hidden":19,"attrs":1251},{},"FlowMind'ı kişisel tercihlerinize veya marka kimliğinize göre özelleştirin.\n\n## Marka Ayarları\n\n**Ayarlar > Marka Kiti** bölümüne giderek aşağıdakileri yapılandırın:\n\n*   **Ana Renk**: Düğmeler, etkin durumlar ve odaklanmış düğümler için ana vurgu rengi.\n*   **Arka Plan**: Tuval arka plan rengi.\n*   **Yüzey**: Panellerin ve kenar çubuklarının rengi.\n*   **Logo**: Kenar çubuğundaki FlowMind simgesini değiştirmek için kendi logonuzu yükleyin.\n\n\n\n## Dışa Aktarma Ayarları\n\nGörüntüleri dışa aktarırken (PNG/SVG):\n*   **Şeffaf Arka Plan**: Diyagramı slaytların üzerine yerleştirmek istiyorsanız bu seçeneği etkinleştirin.\n*   **Ölçek**: Yüksek çözünürlüklü baskı için ölçeği artırın (ör. 2x, 3x).\n*   **Filigran Ekle**: Dışa aktarma ayarlarında marka filigranını devre dışı bırakabilirsiniz.","src/content/docs/tr/theming.md","77d55467afdc8f1f",{"html":1256,"metadata":1257},"\u003Cp>FlowMind’ı kişisel tercihlerinize veya marka kimliğinize göre özelleştirin.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"marka-ayarları\">Marka Ayarları\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#marka-ayarları\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Marka Ayarları”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>\u003Cstrong>Ayarlar > Marka Kiti\u003C/strong> bölümüne giderek aşağıdakileri yapılandırın:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Ana Renk\u003C/strong>: Düğmeler, etkin durumlar ve odaklanmış düğümler için ana vurgu rengi.\u003C/li>\n\u003Cli>\u003Cstrong>Arka Plan\u003C/strong>: Tuval arka plan rengi.\u003C/li>\n\u003Cli>\u003Cstrong>Yüzey\u003C/strong>: Panellerin ve kenar çubuklarının rengi.\u003C/li>\n\u003Cli>\u003Cstrong>Logo\u003C/strong>: Kenar çubuğundaki FlowMind simgesini değiştirmek için kendi logonuzu yükleyin.\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"dışa-aktarma-ayarları\">Dışa Aktarma Ayarları\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#dışa-aktarma-ayarları\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Dışa Aktarma Ayarları”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Görüntüleri dışa aktarırken (PNG/SVG):\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Şeffaf Arka Plan\u003C/strong>: Diyagramı slaytların üzerine yerleştirmek istiyorsanız bu seçeneği etkinleştirin.\u003C/li>\n\u003Cli>\u003Cstrong>Ölçek\u003C/strong>: Yüksek çözünürlüklü baskı için ölçeği artırın (ör. 2x, 3x).\u003C/li>\n\u003Cli>\u003Cstrong>Filigran Ekle\u003C/strong>: Dışa aktarma ayarlarında marka filigranını devre dışı bırakabilirsiniz.\u003C/li>\n\u003C/ul>",{"headings":1258,"localImagePaths":1265,"remoteImagePaths":1266,"frontmatter":1267,"imagePaths":1268},[1259,1262],{"depth":29,"slug":1260,"text":1261},"marka-ayarları","Marka Ayarları",{"depth":29,"slug":1263,"text":1264},"dışa-aktarma-ayarları","Dışa Aktarma Ayarları",[],[],{"draft":19,"title":703},[],"tr/properties-panel",{"id":1269,"data":1271,"body":1275,"filePath":1276,"digest":1277,"rendered":1278},{"title":670,"editUrl":15,"head":1272,"template":17,"sidebar":1273,"pagefind":15,"draft":19},[],{"hidden":19,"attrs":1274},{},"Özellikler Paneli, bireysel düğümleri özelleştirmek için kontrol merkezinizdir. Bir düğüm seçtiğinizde ekranın sağ tarafında görünür.\n\n## Düğüm Özelleştirme\n\n### Etiket Düzenleme\nHerhangi bir düğümü doğrudan panelden yeniden adlandırabilirsiniz. Etiket, tuval üzerinde gerçek zamanlı olarak güncellenir.\n\n### Görsel Stil\nDiyagramlarınızı özel stillerle öne çıkarın:\n*   **Renkler**: Anlamlı renk paletinden seçim yapın (Tehlike için Kırmızı, Başarı için Yeşil vb.).\n*   **İkonlar**: Anında tanınabilir hale getirmek için herhangi bir düğüme ikon ekleyin. Tam Lucide React ikon kütüphanesini destekliyoruz.\n*   **Çizgi Stili**: `Düz` ve `Kesik` kenarlıklar arasında geçiş yapın (geçici veya gelecekteki durumları temsil etmek için harikadır).\n\n### Düzen ve Boyutlandırma\n*   **Genişlik/Yükseklik**: Piksel mükemmeliyetinde hizalama için boyutları manuel olarak ayarlayın.\n*   **Konum**: Tam X/Y koordinatlarını görüntüleyin ve düzenleyin.\n\n## Toplu Düzenleme\n\n> [!TIP]\n> Hepsini aynı anda düzenlemek için birden fazla düğümü seçebilirsiniz (`Shift + Tıklama`)!\n\nBirden fazla düğüm seçildiğinde, Özellikler Paneli değişiklikleri (renk veya ikon gibi) **tüm** seçili düğümlere uygular.","src/content/docs/tr/properties-panel.md","65d5fea26de923a0",{"html":1279,"metadata":1280},"\u003Cp>Özellikler Paneli, bireysel düğümleri özelleştirmek için kontrol merkezinizdir. Bir düğüm seçtiğinizde ekranın sağ tarafında görünür.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"düğüm-özelleştirme\">Düğüm Özelleştirme\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#düğüm-özelleştirme\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Düğüm Özelleştirme”\u003C/span>\u003C/a>\u003C/div>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"etiket-düzenleme\">Etiket Düzenleme\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#etiket-düzenleme\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Etiket Düzenleme”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Herhangi bir düğümü doğrudan panelden yeniden adlandırabilirsiniz. Etiket, tuval üzerinde gerçek zamanlı olarak güncellenir.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"görsel-stil\">Görsel Stil\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#görsel-stil\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Görsel Stil”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Diyagramlarınızı özel stillerle öne çıkarın:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Renkler\u003C/strong>: Anlamlı renk paletinden seçim yapın (Tehlike için Kırmızı, Başarı için Yeşil vb.).\u003C/li>\n\u003Cli>\u003Cstrong>İkonlar\u003C/strong>: Anında tanınabilir hale getirmek için herhangi bir düğüme ikon ekleyin. Tam Lucide React ikon kütüphanesini destekliyoruz.\u003C/li>\n\u003Cli>\u003Cstrong>Çizgi Stili\u003C/strong>: \u003Ccode dir=\"auto\">Düz\u003C/code> ve \u003Ccode dir=\"auto\">Kesik\u003C/code> kenarlıklar arasında geçiş yapın (geçici veya gelecekteki durumları temsil etmek için harikadır).\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"düzen-ve-boyutlandırma\">Düzen ve Boyutlandırma\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#düzen-ve-boyutlandırma\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Düzen ve Boyutlandırma”\u003C/span>\u003C/a>\u003C/div>\n\u003Cul>\n\u003Cli>\u003Cstrong>Genişlik/Yükseklik\u003C/strong>: Piksel mükemmeliyetinde hizalama için boyutları manuel olarak ayarlayın.\u003C/li>\n\u003Cli>\u003Cstrong>Konum\u003C/strong>: Tam X/Y koordinatlarını görüntüleyin ve düzenleyin.\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"toplu-düzenleme\">Toplu Düzenleme\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#toplu-düzenleme\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Toplu Düzenleme”\u003C/span>\u003C/a>\u003C/div>\n\u003Cblockquote>\n\u003Cp>[!TIP]\nHepsini aynı anda düzenlemek için birden fazla düğümü seçebilirsiniz (\u003Ccode dir=\"auto\">Shift + Tıklama\u003C/code>)!\u003C/p>\n\u003C/blockquote>\n\u003Cp>Birden fazla düğüm seçildiğinde, Özellikler Paneli değişiklikleri (renk veya ikon gibi) \u003Cstrong>tüm\u003C/strong> seçili düğümlere uygular.\u003C/p>",{"headings":1281,"localImagePaths":1297,"remoteImagePaths":1298,"frontmatter":1299,"imagePaths":1300},[1282,1285,1288,1291,1294],{"depth":29,"slug":1283,"text":1284},"düğüm-özelleştirme","Düğüm Özelleştirme",{"depth":36,"slug":1286,"text":1287},"etiket-düzenleme","Etiket Düzenleme",{"depth":36,"slug":1289,"text":1290},"görsel-stil","Görsel Stil",{"depth":36,"slug":1292,"text":1293},"düzen-ve-boyutlandırma","Düzen ve Boyutlandırma",{"depth":29,"slug":1295,"text":1296},"toplu-düzenleme","Toplu Düzenleme",[],[],{"draft":19,"title":670},[],"tr/smart-layout",{"id":1301,"data":1303,"body":1307,"filePath":1308,"digest":1309,"rendered":1310},{"title":647,"editUrl":15,"head":1304,"template":17,"sidebar":1305,"pagefind":15,"draft":19},[],{"hidden":19,"attrs":1306},{},"FlowMind, **ELK (Eclipse Layout Kernel)** tarafından desteklenen güçlü bir \"Akıllı Düzen\" motoru içerir.\n\n## Nasıl Çalışır?\n\nKarmaşık diyagramları elle çizmek sıkıcıdır. Mantığı düşünmek yerine kutucukları HIZALAMAKLA zaman harcarsınız.\nAkıllı Düzen, düğümleri otomatik olarak düzenlemek için kuvvet yönlü bir algoritma çalıştırarak bu sorunu çözer.\n\n### Kullanım\n1.  Komut Merkezindeki (veya üst araç çubuğundaki) **Düzen** düğmesine tıklayın.\n2.  Motor, her düğüm ve kenar için en uygun konumu hesaplar.\n3.  Diyagram, yeni yapısına akıcı biçimde animasyonla geçer.\n\n### Özellikler\n*   **Hiyerarşik Katmanlama**: Akış şemaları ve organizasyon ağaçları için mükemmeldir.\n*   **Çakışma Algılama**: Düğümlerin asla üst üste gelmemesini sağlar.\n*   **Kenar Yönlendirme**: Daha temiz bir okunabilirlik için çizgi kesişimlerini en aza indirir.\n\n> [!TIP]\n> Ham Mermaid metni içe aktardıktan veya yapay zeka ile büyük bir akış oluşturduktan sonra sonucu anında düzenlemek için Akıllı Düzen'i kullanın.","src/content/docs/tr/smart-layout.md","2077fedcba8a0485",{"html":1311,"metadata":1312},"\u003Cp>FlowMind, \u003Cstrong>ELK (Eclipse Layout Kernel)\u003C/strong> tarafından desteklenen güçlü bir “Akıllı Düzen” motoru içerir.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"nasıl-çalışır\">Nasıl Çalışır?\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#nasıl-çalışır\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Nasıl Çalışır?”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Karmaşık diyagramları elle çizmek sıkıcıdır. Mantığı düşünmek yerine kutucukları HIZALAMAKLA zaman harcarsınız.\nAkıllı Düzen, düğümleri otomatik olarak düzenlemek için kuvvet yönlü bir algoritma çalıştırarak bu sorunu çözer.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"kullanım\">Kullanım\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#kullanım\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Kullanım”\u003C/span>\u003C/a>\u003C/div>\n\u003Col>\n\u003Cli>Komut Merkezindeki (veya üst araç çubuğundaki) \u003Cstrong>Düzen\u003C/strong> düğmesine tıklayın.\u003C/li>\n\u003Cli>Motor, her düğüm ve kenar için en uygun konumu hesaplar.\u003C/li>\n\u003Cli>Diyagram, yeni yapısına akıcı biçimde animasyonla geçer.\u003C/li>\n\u003C/ol>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"özellikler\">Özellikler\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#özellikler\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Özellikler”\u003C/span>\u003C/a>\u003C/div>\n\u003Cul>\n\u003Cli>\u003Cstrong>Hiyerarşik Katmanlama\u003C/strong>: Akış şemaları ve organizasyon ağaçları için mükemmeldir.\u003C/li>\n\u003Cli>\u003Cstrong>Çakışma Algılama\u003C/strong>: Düğümlerin asla üst üste gelmemesini sağlar.\u003C/li>\n\u003Cli>\u003Cstrong>Kenar Yönlendirme\u003C/strong>: Daha temiz bir okunabilirlik için çizgi kesişimlerini en aza indirir.\u003C/li>\n\u003C/ul>\n\u003Cblockquote>\n\u003Cp>[!TIP]\nHam Mermaid metni içe aktardıktan veya yapay zeka ile büyük bir akış oluşturduktan sonra sonucu anında düzenlemek için Akıllı Düzen’i kullanın.\u003C/p>\n\u003C/blockquote>",{"headings":1313,"localImagePaths":1319,"remoteImagePaths":1320,"frontmatter":1321,"imagePaths":1322},[1314,1315,1318],{"depth":29,"slug":809,"text":810},{"depth":36,"slug":1316,"text":1317},"kullanım","Kullanım",{"depth":36,"slug":882,"text":883},[],[],{"draft":19,"title":647},[],"tr/v1-beta-launch",{"id":1323,"data":1325,"body":1329,"filePath":1330,"digest":1331,"rendered":1332},{"title":747,"editUrl":15,"head":1326,"template":17,"sidebar":1327,"pagefind":15,"draft":19},[],{"hidden":19,"attrs":1328},{},"# 🚀 OpenFlowKit V1 Beta: Kod Olarak Diyagramın Geleceği Burada\n\n**OpenFlowKit V1 Beta**'yı resmi olarak duyurmaktan son derece heyecan duyuyoruz. Basit bir akış şeması aracı olarak başlayan bu proje; premium estetik ve yerel öncelikli güvenilirlik talep eden geliştiriciler için kapsamlı, beyaz etiketli bir diyagram ekosistemine dönüştü.\n\nBu sürüm misyonumuzda köklü bir değişimi simgeliyor: **OpenFlowKit artık sadece bir uygulama değil; bir sonraki projenizin temeli.**\n\n---\n\n## 🏗️ V1 Beta'daki Yenilikler\n\n### 🎨 Marka Motoru (Gerçek Beyaz Etiketleme)\nÇoğu diyagram aracı sizi kendi ürünlerine benzer görünmeye zorlar. OpenFlowKit, **sizin** gibi görünmek için tasarlanmış ilk açık kaynaklı araçtır.\n- **Dinamik Palet Oluşturma**: Tek bir ana renk girin; motorumuz yüzey, arka plan ve vurgu renklerini içeren uyumlu bir tasarım sistemi oluşturur.\n- **Tipografi Entegrasyonu**: Yerel Google Fonts desteği, uygulamanızın tipografisini doğrudan tuval ile senkronize etmenizi sağlar.\n- **UI Fiziği**: Glassmorphism'i açıp kapatın ve markanızın estetik yoğunluğuna uygun kenarlık yarıçaplarını ayarlayın.\n\n### 📜 Eşsiz Kod Olarak Diyagram (DaC)\nDiyagramlara veri olarak bakıyoruz. İster Mermaid.js uzmanı olun ister özel DSL tercih edin, sizi destekliyoruz.\n- **Genişletilmiş Mermaid Desteği**: Akış Şemaları, Durum Diyagramları ve Alt Grafikler için tam uyum.\n- **FlowMind DSL**: Fare kullanmadan hızlı prototipleme için tasarlanmış insan tarafından okunabilir bir gösterim.\n- **Canlı Senkronizasyon**: Görsel değişiklikler ve kod değişiklikleri mükemmel biçimde senkronize kalır; her iki dünyanın da en iyisini sunar.\n\n### 💎 Figma Kalitesinde Dışa Aktarma\nEkran görüntüsü almayı bırakın! \"Figma Öncelikli\" dışa aktarma stratejimiz, diyagramlarınızın tasarım dosyalarınıza ait olmasını sağlar.\n- **Vektör Mükemmeliyeti**: Çizgi hassasiyetini ve yuvarlak köşeleri koruyan temiz SVG'ler dışa aktarın.\n- **Düzenlenebilir Metin**: Etiketler yerel SVG metin blokları olarak dışa aktarılır; yani Figma'da yeniden çizmeden doğrudan yazım hatalarını düzeltebilirsiniz.\n\n### 🔑 Gizlilik Öncelikli Yapay Zeka (BYOK)\nYapay zeka güçlüdür, ancak verileriniz gizlidir. **Kendi Anahtarını Getir** modelimiz kontrolü size verir.\n- **Gemini ile Güçlendirilmiş**: Akıllı diyagram oluşturma için kendi Gemini API anahtarınızı kullanın.\n- **Yerel Depolama**: API anahtarlarınız tarayıcınızda yerel olarak depolanır ve sunucularımıza hiçbir zaman ulaşmaz.\n\n### 🖼️ Görselden Akış Şemasına (Görsel Yapay Zeka)\nÇizin, tarayın, gönderin.\n- **Görsel Tanıma**: Beyaz tahta oturumunuzun veya peçete üzerindeki taslağınızın fotoğrafını yükleyin.\n- **Anında Dönüşüm**: Yapay zekamız görsel yapıyı analiz eder ve saniyeler içinde tam düzenlenebilir, anlamlı bir akış şemasına dönüştürür.\n\n### 📦 Kütüphane Ekosistemi\nBağımsız düzenleyiciye ek olarak OpenFlowKit'in çekirdeğini `@openflowkit/core` olarak ayıkladık. Bu sayede geliştiriciler son teknoloji ayrıştırıcılarımızı ve tema mantığımızı kendi uygulamalarına gömebilir.\n\n---\n\n## 🌟 Felsefe: Premium ve Açık\nAçık kaynaklı araçların açık kaynak \"görünmesi\" gerektiğine inanmıyoruz. OpenFlowKit V1 Beta, milyar dolarlık SaaS ürünlerin kalitesini açık kaynak topluluğuna %100 ücretsiz olarak MIT lisansı altında sunuyor.\n\n---\n\n## 🛣️ Sırada Ne Var?\nV1 Beta yalnızca bir başlangıç. Üzerinde çalıştıklarımız:\n- **İş Birlikçi Gerçek Zamanlı Düzenleme** (Yjs/WebRTC).\n- **Tel çerçeveleme için Genişletilmiş Bileşen Kütüphaneleri**.\n- **Doğrudan Figma Eklentisi** entegrasyonu.\n\n---\n\n## ❤️ Dahil Olun\nOpenFlowKit, geliştiriciler tarafından geliştiriciler için inşa edilmektedir.\n- ⭐️ **GitHub'da Yıldız Verin**: Daha fazla geliştiriciye ulaşmamıza yardım edin!\n- 💬 **Tartışmaya Katılın**: Marka kitlerini ve geri bildirimlerinizi paylaşın.\n- 🛠️ **Katkıda Bulunun**: Diyagramlamanın geleceğini inşa etmeye yardımcı olmak için `CONTRIBUTING.md`'ye göz atın.\n\n**İyi Diyagramlamalar!**  \n*OpenFlowKit Ekibi*","src/content/docs/tr/v1-beta-launch.md","3f632d45d81d9bb7",{"html":1333,"metadata":1334},"\u003Cdiv class=\"sl-heading-wrapper level-h1\">\u003Ch1 id=\"-openflowkit-v1-beta-kod-olarak-diyagramın-geleceği-burada\">🚀 OpenFlowKit V1 Beta: Kod Olarak Diyagramın Geleceği Burada\u003C/h1>\u003Ca class=\"sl-anchor-link\" href=\"#-openflowkit-v1-beta-kod-olarak-diyagramın-geleceği-burada\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “🚀 OpenFlowKit V1 Beta: Kod Olarak Diyagramın Geleceği Burada”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>\u003Cstrong>OpenFlowKit V1 Beta\u003C/strong>’yı resmi olarak duyurmaktan son derece heyecan duyuyoruz. Basit bir akış şeması aracı olarak başlayan bu proje; premium estetik ve yerel öncelikli güvenilirlik talep eden geliştiriciler için kapsamlı, beyaz etiketli bir diyagram ekosistemine dönüştü.\u003C/p>\n\u003Cp>Bu sürüm misyonumuzda köklü bir değişimi simgeliyor: \u003Cstrong>OpenFlowKit artık sadece bir uygulama değil; bir sonraki projenizin temeli.\u003C/strong>\u003C/p>\n\u003Chr>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"️-v1-betadaki-yenilikler\">🏗️ V1 Beta’daki Yenilikler\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#️-v1-betadaki-yenilikler\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “🏗️ V1 Beta’daki Yenilikler”\u003C/span>\u003C/a>\u003C/div>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"-marka-motoru-gerçek-beyaz-etiketleme\">🎨 Marka Motoru (Gerçek Beyaz Etiketleme)\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#-marka-motoru-gerçek-beyaz-etiketleme\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “🎨 Marka Motoru (Gerçek Beyaz Etiketleme)”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Çoğu diyagram aracı sizi kendi ürünlerine benzer görünmeye zorlar. OpenFlowKit, \u003Cstrong>sizin\u003C/strong> gibi görünmek için tasarlanmış ilk açık kaynaklı araçtır.\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Dinamik Palet Oluşturma\u003C/strong>: Tek bir ana renk girin; motorumuz yüzey, arka plan ve vurgu renklerini içeren uyumlu bir tasarım sistemi oluşturur.\u003C/li>\n\u003Cli>\u003Cstrong>Tipografi Entegrasyonu\u003C/strong>: Yerel Google Fonts desteği, uygulamanızın tipografisini doğrudan tuval ile senkronize etmenizi sağlar.\u003C/li>\n\u003Cli>\u003Cstrong>UI Fiziği\u003C/strong>: Glassmorphism’i açıp kapatın ve markanızın estetik yoğunluğuna uygun kenarlık yarıçaplarını ayarlayın.\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"-eşsiz-kod-olarak-diyagram-dac\">📜 Eşsiz Kod Olarak Diyagram (DaC)\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#-eşsiz-kod-olarak-diyagram-dac\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “📜 Eşsiz Kod Olarak Diyagram (DaC)”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Diyagramlara veri olarak bakıyoruz. İster Mermaid.js uzmanı olun ister özel DSL tercih edin, sizi destekliyoruz.\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Genişletilmiş Mermaid Desteği\u003C/strong>: Akış Şemaları, Durum Diyagramları ve Alt Grafikler için tam uyum.\u003C/li>\n\u003Cli>\u003Cstrong>FlowMind DSL\u003C/strong>: Fare kullanmadan hızlı prototipleme için tasarlanmış insan tarafından okunabilir bir gösterim.\u003C/li>\n\u003Cli>\u003Cstrong>Canlı Senkronizasyon\u003C/strong>: Görsel değişiklikler ve kod değişiklikleri mükemmel biçimde senkronize kalır; her iki dünyanın da en iyisini sunar.\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"-figma-kalitesinde-dışa-aktarma\">💎 Figma Kalitesinde Dışa Aktarma\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#-figma-kalitesinde-dışa-aktarma\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “💎 Figma Kalitesinde Dışa Aktarma”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Ekran görüntüsü almayı bırakın! “Figma Öncelikli” dışa aktarma stratejimiz, diyagramlarınızın tasarım dosyalarınıza ait olmasını sağlar.\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Vektör Mükemmeliyeti\u003C/strong>: Çizgi hassasiyetini ve yuvarlak köşeleri koruyan temiz SVG’ler dışa aktarın.\u003C/li>\n\u003Cli>\u003Cstrong>Düzenlenebilir Metin\u003C/strong>: Etiketler yerel SVG metin blokları olarak dışa aktarılır; yani Figma’da yeniden çizmeden doğrudan yazım hatalarını düzeltebilirsiniz.\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"-gizlilik-öncelikli-yapay-zeka-byok\">🔑 Gizlilik Öncelikli Yapay Zeka (BYOK)\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#-gizlilik-öncelikli-yapay-zeka-byok\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “🔑 Gizlilik Öncelikli Yapay Zeka (BYOK)”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Yapay zeka güçlüdür, ancak verileriniz gizlidir. \u003Cstrong>Kendi Anahtarını Getir\u003C/strong> modelimiz kontrolü size verir.\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Gemini ile Güçlendirilmiş\u003C/strong>: Akıllı diyagram oluşturma için kendi Gemini API anahtarınızı kullanın.\u003C/li>\n\u003Cli>\u003Cstrong>Yerel Depolama\u003C/strong>: API anahtarlarınız tarayıcınızda yerel olarak depolanır ve sunucularımıza hiçbir zaman ulaşmaz.\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"️-görselden-akış-şemasına-görsel-yapay-zeka\">🖼️ Görselden Akış Şemasına (Görsel Yapay Zeka)\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#️-görselden-akış-şemasına-görsel-yapay-zeka\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “🖼️ Görselden Akış Şemasına (Görsel Yapay Zeka)”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Çizin, tarayın, gönderin.\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Görsel Tanıma\u003C/strong>: Beyaz tahta oturumunuzun veya peçete üzerindeki taslağınızın fotoğrafını yükleyin.\u003C/li>\n\u003Cli>\u003Cstrong>Anında Dönüşüm\u003C/strong>: Yapay zekamız görsel yapıyı analiz eder ve saniyeler içinde tam düzenlenebilir, anlamlı bir akış şemasına dönüştürür.\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"-kütüphane-ekosistemi\">📦 Kütüphane Ekosistemi\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#-kütüphane-ekosistemi\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “📦 Kütüphane Ekosistemi”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Bağımsız düzenleyiciye ek olarak OpenFlowKit’in çekirdeğini \u003Ccode dir=\"auto\">@openflowkit/core\u003C/code> olarak ayıkladık. Bu sayede geliştiriciler son teknoloji ayrıştırıcılarımızı ve tema mantığımızı kendi uygulamalarına gömebilir.\u003C/p>\n\u003Chr>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"-felsefe-premium-ve-açık\">🌟 Felsefe: Premium ve Açık\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#-felsefe-premium-ve-açık\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “🌟 Felsefe: Premium ve Açık”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Açık kaynaklı araçların açık kaynak “görünmesi” gerektiğine inanmıyoruz. OpenFlowKit V1 Beta, milyar dolarlık SaaS ürünlerin kalitesini açık kaynak topluluğuna %100 ücretsiz olarak MIT lisansı altında sunuyor.\u003C/p>\n\u003Chr>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"️-sırada-ne-var\">🛣️ Sırada Ne Var?\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#️-sırada-ne-var\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “🛣️ Sırada Ne Var?”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>V1 Beta yalnızca bir başlangıç. Üzerinde çalıştıklarımız:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>İş Birlikçi Gerçek Zamanlı Düzenleme\u003C/strong> (Yjs/WebRTC).\u003C/li>\n\u003Cli>\u003Cstrong>Tel çerçeveleme için Genişletilmiş Bileşen Kütüphaneleri\u003C/strong>.\u003C/li>\n\u003Cli>\u003Cstrong>Doğrudan Figma Eklentisi\u003C/strong> entegrasyonu.\u003C/li>\n\u003C/ul>\n\u003Chr>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"️-dahil-olun\">❤️ Dahil Olun\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#️-dahil-olun\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “❤️ Dahil Olun”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>OpenFlowKit, geliştiriciler tarafından geliştiriciler için inşa edilmektedir.\u003C/p>\n\u003Cul>\n\u003Cli>⭐️ \u003Cstrong>GitHub’da Yıldız Verin\u003C/strong>: Daha fazla geliştiriciye ulaşmamıza yardım edin!\u003C/li>\n\u003Cli>💬 \u003Cstrong>Tartışmaya Katılın\u003C/strong>: Marka kitlerini ve geri bildirimlerinizi paylaşın.\u003C/li>\n\u003Cli>🛠️ \u003Cstrong>Katkıda Bulunun\u003C/strong>: Diyagramlamanın geleceğini inşa etmeye yardımcı olmak için \u003Ccode dir=\"auto\">CONTRIBUTING.md\u003C/code>’ye göz atın.\u003C/li>\n\u003C/ul>\n\u003Cp>\u003Cstrong>İyi Diyagramlamalar!\u003C/strong>\u003Cbr>\n\u003Cem>OpenFlowKit Ekibi\u003C/em>\u003C/p>",{"headings":1335,"localImagePaths":1369,"remoteImagePaths":1370,"frontmatter":1371,"imagePaths":1372},[1336,1339,1342,1345,1348,1351,1354,1357,1360,1363,1366],{"depth":67,"slug":1337,"text":1338},"-openflowkit-v1-beta-kod-olarak-diyagramın-geleceği-burada","🚀 OpenFlowKit V1 Beta: Kod Olarak Diyagramın Geleceği Burada",{"depth":29,"slug":1340,"text":1341},"️-v1-betadaki-yenilikler","🏗️ V1 Beta’daki Yenilikler",{"depth":36,"slug":1343,"text":1344},"-marka-motoru-gerçek-beyaz-etiketleme","🎨 Marka Motoru (Gerçek Beyaz Etiketleme)",{"depth":36,"slug":1346,"text":1347},"-eşsiz-kod-olarak-diyagram-dac","📜 Eşsiz Kod Olarak Diyagram (DaC)",{"depth":36,"slug":1349,"text":1350},"-figma-kalitesinde-dışa-aktarma","💎 Figma Kalitesinde Dışa Aktarma",{"depth":36,"slug":1352,"text":1353},"-gizlilik-öncelikli-yapay-zeka-byok","🔑 Gizlilik Öncelikli Yapay Zeka (BYOK)",{"depth":36,"slug":1355,"text":1356},"️-görselden-akış-şemasına-görsel-yapay-zeka","🖼️ Görselden Akış Şemasına (Görsel Yapay Zeka)",{"depth":36,"slug":1358,"text":1359},"-kütüphane-ekosistemi","📦 Kütüphane Ekosistemi",{"depth":29,"slug":1361,"text":1362},"-felsefe-premium-ve-açık","🌟 Felsefe: Premium ve Açık",{"depth":29,"slug":1364,"text":1365},"️-sırada-ne-var","🛣️ Sırada Ne Var?",{"depth":29,"slug":1367,"text":1368},"️-dahil-olun","❤️ Dahil Olun",[],[],{"draft":19,"title":747},[]]
\ No newline at end of file
+[["Map",1,2,9,10],"meta::meta",["Map",3,4,5,6,7,8],"astro-version","5.18.1","content-config-digest","28e7bc87492477d9","astro-config-digest","{\"root\":{},\"srcDir\":{},\"publicDir\":{},\"outDir\":{},\"cacheDir\":{},\"site\":\"https://docs.openflowkit.com\",\"compressHTML\":true,\"base\":\"/\",\"trailingSlash\":\"ignore\",\"output\":\"static\",\"scopedStyleStrategy\":\"where\",\"build\":{\"format\":\"directory\",\"client\":{},\"server\":{},\"assets\":\"_astro\",\"serverEntry\":\"entry.mjs\",\"redirects\":true,\"inlineStylesheets\":\"auto\",\"concurrency\":1},\"server\":{\"open\":false,\"host\":\"0.0.0.0\",\"port\":4321,\"streaming\":true,\"allowedHosts\":[]},\"redirects\":{},\"image\":{\"endpoint\":{\"route\":\"/_image\"},\"service\":{\"entrypoint\":\"astro/assets/services/sharp\",\"config\":{}},\"domains\":[],\"remotePatterns\":[],\"responsiveStyles\":false},\"devToolbar\":{\"enabled\":true},\"markdown\":{\"syntaxHighlight\":false,\"shikiConfig\":{\"langs\":[],\"langAlias\":{},\"theme\":\"github-dark\",\"themes\":{},\"wrap\":false,\"transformers\":[]},\"remarkPlugins\":[null,null,null],\"rehypePlugins\":[null,[null,{\"experimentalHeadingIdCompat\":false}],null,[null,{\"themes\":[{\"name\":\"Night Owl No Italics\",\"type\":\"dark\",\"colors\":{\"focusBorder\":\"#122d42\",\"foreground\":\"#d6deeb\",\"disabledForeground\":\"#cccccc80\",\"descriptionForeground\":\"#d6deebb3\",\"errorForeground\":\"#ef5350\",\"icon.foreground\":\"#c5c5c5\",\"contrastActiveBorder\":null,\"contrastBorder\":\"#122d42\",\"textBlockQuote.background\":\"#7f7f7f1a\",\"textBlockQuote.border\":\"#007acc80\",\"textCodeBlock.background\":\"#4f4f4f\",\"textLink.activeForeground\":\"#3794ff\",\"textLink.foreground\":\"#3794ff\",\"textPreformat.foreground\":\"#d7ba7d\",\"textSeparator.foreground\":\"#ffffff2e\",\"editor.background\":\"#23262f\",\"editor.foreground\":\"#d6deeb\",\"editorLineNumber.foreground\":\"#4b6479\",\"editorLineNumber.activeForeground\":\"#c5e4fd\",\"editorActiveLineNumber.foreground\":\"#c6c6c6\",\"editor.selectionBackground\":\"#1d3b53\",\"editor.inactiveSelectionBackground\":\"#7e57c25a\",\"editor.selectionHighlightBackground\":\"#5f7e9779\",\"editorError.foreground\":\"#ef5350\",\"editorWarning.foreground\":\"#b39554\",\"editorInfo.foreground\":\"#3794ff\",\"editorHint.foreground\":\"#eeeeeeb2\",\"problemsErrorIcon.foreground\":\"#ef5350\",\"problemsWarningIcon.foreground\":\"#b39554\",\"problemsInfoIcon.foreground\":\"#3794ff\",\"editor.findMatchBackground\":\"#5f7e9779\",\"editor.findMatchHighlightBackground\":\"#1085bb5d\",\"editor.findRangeHighlightBackground\":\"#3a3d4166\",\"editorLink.activeForeground\":\"#4e94ce\",\"editorLightBulb.foreground\":\"#ffcc00\",\"editorLightBulbAutoFix.foreground\":\"#75beff\",\"diffEditor.insertedTextBackground\":\"#99b76d23\",\"diffEditor.insertedTextBorder\":\"#c5e47833\",\"diffEditor.removedTextBackground\":\"#ef535033\",\"diffEditor.removedTextBorder\":\"#ef53504d\",\"diffEditor.insertedLineBackground\":\"#9bb95533\",\"diffEditor.removedLineBackground\":\"#ff000033\",\"editorStickyScroll.background\":\"#011627\",\"editorStickyScrollHover.background\":\"#2a2d2e\",\"editorInlayHint.background\":\"#5f7e97cc\",\"editorInlayHint.foreground\":\"#ffffff\",\"editorInlayHint.typeBackground\":\"#5f7e97cc\",\"editorInlayHint.typeForeground\":\"#ffffff\",\"editorInlayHint.parameterBackground\":\"#5f7e97cc\",\"editorInlayHint.parameterForeground\":\"#ffffff\",\"editorPane.background\":\"#011627\",\"editorGroup.emptyBackground\":\"#011627\",\"editorGroup.focusedEmptyBorder\":null,\"editorGroupHeader.tabsBackground\":\"var(--sl-color-black)\",\"editorGroupHeader.tabsBorder\":\"color-mix(in srgb, var(--sl-color-gray-5), transparent 25%)\",\"editorGroupHeader.noTabsBackground\":\"#011627\",\"editorGroupHeader.border\":null,\"editorGroup.border\":\"#011627\",\"editorGroup.dropBackground\":\"#7e57c273\",\"editorGroup.dropIntoPromptForeground\":\"#d6deeb\",\"editorGroup.dropIntoPromptBackground\":\"#021320\",\"editorGroup.dropIntoPromptBorder\":null,\"sideBySideEditor.horizontalBorder\":\"#011627\",\"sideBySideEditor.verticalBorder\":\"#011627\",\"scrollbar.shadow\":\"#010b14\",\"scrollbarSlider.background\":\"#ffffff17\",\"scrollbarSlider.hoverBackground\":\"#ffffff40\",\"scrollbarSlider.activeBackground\":\"#084d8180\",\"panel.background\":\"#011627\",\"panel.border\":\"#5f7e97\",\"panelTitle.activeBorder\":\"#5f7e97\",\"panelTitle.activeForeground\":\"#ffffffcc\",\"panelTitle.inactiveForeground\":\"#d6deeb80\",\"panelSectionHeader.background\":\"#80808051\",\"terminal.background\":\"#011627\",\"widget.shadow\":\"#011627\",\"editorWidget.background\":\"#021320\",\"editorWidget.foreground\":\"#d6deeb\",\"editorWidget.border\":\"#5f7e97\",\"quickInput.background\":\"#021320\",\"quickInput.foreground\":\"#d6deeb\",\"quickInputTitle.background\":\"#ffffff1a\",\"pickerGroup.foreground\":\"#d1aaff\",\"pickerGroup.border\":\"#011627\",\"editor.hoverHighlightBackground\":\"#7e57c25a\",\"editorHoverWidget.background\":\"#011627\",\"editorHoverWidget.foreground\":\"#d6deeb\",\"editorHoverWidget.border\":\"#5f7e97\",\"editorHoverWidget.statusBarBackground\":\"#011a2f\",\"titleBar.activeBackground\":\"var(--sl-color-black)\",\"titleBar.activeForeground\":\"var(--sl-color-text)\",\"titleBar.inactiveBackground\":\"#010e1a\",\"titleBar.inactiveForeground\":\"#eeefff99\",\"titleBar.border\":\"color-mix(in srgb, var(--sl-color-gray-5), transparent 25%)\",\"toolbar.hoverBackground\":\"#5a5d5e50\",\"toolbar.activeBackground\":\"#63666750\",\"tab.activeBackground\":\"#0b2942\",\"tab.unfocusedActiveBackground\":\"#0b2942\",\"tab.inactiveBackground\":\"#01111d\",\"tab.unfocusedInactiveBackground\":\"#01111d\",\"tab.activeForeground\":\"var(--sl-color-text)\",\"tab.inactiveForeground\":\"#5f7e97\",\"tab.unfocusedActiveForeground\":\"#5f7e97\",\"tab.unfocusedInactiveForeground\":\"#5f7e97\",\"tab.hoverBackground\":null,\"tab.unfocusedHoverBackground\":null,\"tab.hoverForeground\":null,\"tab.unfocusedHoverForeground\":null,\"tab.border\":\"#272b3b\",\"tab.lastPinnedBorder\":\"#585858\",\"tab.activeBorder\":\"transparent\",\"tab.unfocusedActiveBorder\":\"#262a39\",\"tab.activeBorderTop\":\"var(--sl-color-accent-high)\",\"tab.unfocusedActiveBorderTop\":null,\"tab.hoverBorder\":null,\"tab.unfocusedHoverBorder\":null,\"tab.activeModifiedBorder\":\"#3399cc\",\"tab.inactiveModifiedBorder\":\"#3399cc80\",\"tab.unfocusedActiveModifiedBorder\":\"#3399cc80\",\"tab.unfocusedInactiveModifiedBorder\":\"#3399cc40\",\"badge.background\":\"#5f7e97\",\"badge.foreground\":\"#ffffff\",\"button.background\":\"#7e57c2cc\",\"button.foreground\":\"#ffffffcc\",\"button.border\":\"#122d42\",\"button.separator\":\"#ffffff52\",\"button.hoverBackground\":\"#7e57c2\",\"button.secondaryBackground\":\"#3a3d41\",\"button.secondaryForeground\":\"#ffffff\",\"button.secondaryHoverBackground\":\"#46494e\",\"dropdown.background\":\"#011627\",\"dropdown.foreground\":\"#ffffffcc\",\"dropdown.border\":\"#5f7e97\",\"list.activeSelectionBackground\":\"#234d708c\",\"list.activeSelectionForeground\":\"#ffffff\",\"tree.indentGuidesStroke\":\"#585858\",\"input.background\":\"#0b253a\",\"input.foreground\":\"#ffffffcc\",\"input.placeholderForeground\":\"#5f7e97\",\"inputOption.activeBorder\":\"#ffffffcc\",\"inputOption.hoverBackground\":\"#5a5d5e80\",\"inputOption.activeBackground\":\"#122d4266\",\"inputOption.activeForeground\":\"#ffffff\",\"inputValidation.infoBackground\":\"#00589ef2\",\"inputValidation.infoBorder\":\"#64b5f6\",\"inputValidation.warningBackground\":\"#675700f2\",\"inputValidation.warningBorder\":\"#ffca28\",\"inputValidation.errorBackground\":\"#ab0300f2\",\"inputValidation.errorBorder\":\"#ef5350\",\"keybindingLabel.background\":\"#8080802b\",\"keybindingLabel.foreground\":\"#cccccc\",\"keybindingLabel.border\":\"#33333399\",\"keybindingLabel.bottomBorder\":\"#44444499\",\"menu.foreground\":\"#ffffffcc\",\"menu.background\":\"#011627\",\"menu.selectionForeground\":\"#ffffff\",\"menu.selectionBackground\":\"#234d708c\",\"menu.separatorBackground\":\"#606060\",\"editor.snippetTabstopHighlightBackground\":\"#7c7c74c\",\"editor.snippetFinalTabstopHighlightBorder\":\"#525252\",\"terminal.ansiBlack\":\"#011627\",\"terminal.ansiRed\":\"#ef5350\",\"terminal.ansiGreen\":\"#22da6e\",\"terminal.ansiYellow\":\"#c5e478\",\"terminal.ansiBlue\":\"#82aaff\",\"terminal.ansiMagenta\":\"#c792ea\",\"terminal.ansiCyan\":\"#21c7a8\",\"terminal.ansiWhite\":\"#ffffff\",\"terminal.ansiBrightBlack\":\"#575656\",\"terminal.ansiBrightRed\":\"#ef5350\",\"terminal.ansiBrightGreen\":\"#22da6e\",\"terminal.ansiBrightYellow\":\"#ffeb95\",\"terminal.ansiBrightBlue\":\"#82aaff\",\"terminal.ansiBrightMagenta\":\"#c792ea\",\"terminal.ansiBrightCyan\":\"#7fdbca\",\"terminal.ansiBrightWhite\":\"#ffffff\",\"selection.background\":\"#4373c2\",\"input.border\":\"#5f7e97\",\"punctuation.definition.generic.begin.html\":\"#ef5350f2\",\"progress.background\":\"#7e57c2\",\"breadcrumb.foreground\":\"#a599e9\",\"breadcrumb.focusForeground\":\"#ffffff\",\"breadcrumb.activeSelectionForeground\":\"#ffffff\",\"breadcrumbPicker.background\":\"#001122\",\"list.invalidItemForeground\":\"#975f94\",\"list.dropBackground\":\"#011627\",\"list.focusBackground\":\"#010d18\",\"list.focusForeground\":\"#ffffff\",\"list.highlightForeground\":\"#ffffff\",\"list.hoverBackground\":\"#011627\",\"list.hoverForeground\":\"#ffffff\",\"list.inactiveSelectionBackground\":\"#0e293f\",\"list.inactiveSelectionForeground\":\"#5f7e97\",\"activityBar.background\":\"#011627\",\"activityBar.dropBackground\":\"#5f7e97\",\"activityBar.foreground\":\"#5f7e97\",\"activityBar.border\":\"#011627\",\"activityBarBadge.background\":\"#44596b\",\"activityBarBadge.foreground\":\"#ffffff\",\"sideBar.background\":\"#011627\",\"sideBar.foreground\":\"#89a4bb\",\"sideBar.border\":\"#011627\",\"sideBarTitle.foreground\":\"#5f7e97\",\"sideBarSectionHeader.background\":\"#011627\",\"sideBarSectionHeader.foreground\":\"#5f7e97\",\"editorCursor.foreground\":\"#80a4c2\",\"editor.wordHighlightBackground\":\"#f6bbe533\",\"editor.wordHighlightStrongBackground\":\"#e2a2f433\",\"editor.lineHighlightBackground\":\"#0003\",\"editor.rangeHighlightBackground\":\"#7e57c25a\",\"editorIndentGuide.background\":\"#5e81ce52\",\"editorIndentGuide.activeBackground\":\"#7e97ac\",\"editorRuler.foreground\":\"#5e81ce52\",\"editorCodeLens.foreground\":\"#5e82ceb4\",\"editorBracketMatch.background\":\"#5f7e974d\",\"editorOverviewRuler.currentContentForeground\":\"#7e57c2\",\"editorOverviewRuler.incomingContentForeground\":\"#7e57c2\",\"editorOverviewRuler.commonContentForeground\":\"#7e57c2\",\"editorGutter.background\":\"#011627\",\"editorGutter.modifiedBackground\":\"#e2b93d\",\"editorGutter.addedBackground\":\"#9ccc65\",\"editorGutter.deletedBackground\":\"#ef5350\",\"editorSuggestWidget.background\":\"#2c3043\",\"editorSuggestWidget.border\":\"#2b2f40\",\"editorSuggestWidget.foreground\":\"#d6deeb\",\"editorSuggestWidget.highlightForeground\":\"#ffffff\",\"editorSuggestWidget.selectedBackground\":\"#5f7e97\",\"debugExceptionWidget.background\":\"#011627\",\"debugExceptionWidget.border\":\"#5f7e97\",\"editorMarkerNavigation.background\":\"#0b2942\",\"editorMarkerNavigationError.background\":\"#ef5350\",\"editorMarkerNavigationWarning.background\":\"#ffca28\",\"peekView.border\":\"#5f7e97\",\"peekViewEditor.background\":\"#011627\",\"peekViewEditor.matchHighlightBackground\":\"#7e57c25a\",\"peekViewResult.background\":\"#011627\",\"peekViewResult.fileForeground\":\"#5f7e97\",\"peekViewResult.lineForeground\":\"#5f7e97\",\"peekViewResult.matchHighlightBackground\":\"#ffffffcc\",\"peekViewResult.selectionBackground\":\"#2e3250\",\"peekViewResult.selectionForeground\":\"#5f7e97\",\"peekViewTitle.background\":\"#011627\",\"peekViewTitleDescription.foreground\":\"#697098\",\"peekViewTitleLabel.foreground\":\"#5f7e97\",\"merge.currentHeaderBackground\":\"#5f7e97\",\"merge.incomingHeaderBackground\":\"#7e57c25a\",\"statusBar.background\":\"#011627\",\"statusBar.foreground\":\"#5f7e97\",\"statusBar.border\":\"#262a39\",\"statusBar.debuggingBackground\":\"#202431\",\"statusBar.debuggingBorder\":\"#1f2330\",\"statusBar.noFolderBackground\":\"#011627\",\"statusBar.noFolderBorder\":\"#25293a\",\"statusBarItem.activeBackground\":\"#202431\",\"statusBarItem.hoverBackground\":\"#202431\",\"statusBarItem.prominentBackground\":\"#202431\",\"statusBarItem.prominentHoverBackground\":\"#202431\",\"notifications.background\":\"#01111d\",\"notifications.border\":\"#262a39\",\"notificationCenter.border\":\"#262a39\",\"notificationToast.border\":\"#262a39\",\"notifications.foreground\":\"#ffffffcc\",\"notificationLink.foreground\":\"#80cbc4\",\"extensionButton.prominentForeground\":\"#ffffffcc\",\"extensionButton.prominentBackground\":\"#7e57c2cc\",\"extensionButton.prominentHoverBackground\":\"#7e57c2\",\"terminal.selectionBackground\":\"#1b90dd4d\",\"terminalCursor.background\":\"#234d70\",\"debugToolBar.background\":\"#011627\",\"welcomePage.buttonBackground\":\"#011627\",\"welcomePage.buttonHoverBackground\":\"#011627\",\"walkThrough.embeddedEditorBackground\":\"#011627\",\"gitDecoration.modifiedResourceForeground\":\"#a2bffc\",\"gitDecoration.deletedResourceForeground\":\"#ef535090\",\"gitDecoration.untrackedResourceForeground\":\"#c5e478ff\",\"gitDecoration.ignoredResourceForeground\":\"#395a75\",\"gitDecoration.conflictingResourceForeground\":\"#ffeb95cc\",\"source.elm\":\"#5f7e97\",\"string.quoted.single.js\":\"#ffffff\",\"meta.objectliteral.js\":\"#82aaff\"},\"fg\":\"#d6deeb\",\"bg\":\"#23262f\",\"semanticHighlighting\":false,\"settings\":[{\"name\":\"Changed\",\"scope\":[\"markup.changed\",\"meta.diff.header.git\",\"meta.diff.header.from-file\",\"meta.diff.header.to-file\"],\"settings\":{\"foreground\":\"#a2bffc\"}},{\"name\":\"Deleted\",\"scope\":[\"markup.deleted.diff\"],\"settings\":{\"foreground\":\"#f27775fe\"}},{\"name\":\"Inserted\",\"scope\":[\"markup.inserted.diff\"],\"settings\":{\"foreground\":\"#c5e478\"}},{\"name\":\"Global settings\",\"settings\":{\"background\":\"#011627\",\"foreground\":\"#d6deeb\"}},{\"name\":\"Comment\",\"scope\":[\"comment\"],\"settings\":{\"foreground\":\"#919f9f\",\"fontStyle\":\"\"}},{\"name\":\"String\",\"scope\":[\"string\"],\"settings\":{\"foreground\":\"#ecc48d\"}},{\"name\":\"String Quoted\",\"scope\":[\"string.quoted\",\"variable.other.readwrite.js\"],\"settings\":{\"foreground\":\"#ecc48d\"}},{\"name\":\"Support Constant Math\",\"scope\":[\"support.constant.math\"],\"settings\":{\"foreground\":\"#c5e478\"}},{\"name\":\"Number\",\"scope\":[\"constant.numeric\",\"constant.character.numeric\"],\"settings\":{\"foreground\":\"#f78c6c\",\"fontStyle\":\"\"}},{\"name\":\"Built-in constant\",\"scope\":[\"constant.language\",\"punctuation.definition.constant\",\"variable.other.constant\"],\"settings\":{\"foreground\":\"#82aaff\"}},{\"name\":\"User-defined constant\",\"scope\":[\"constant.character\",\"constant.other\"],\"settings\":{\"foreground\":\"#82aaff\"}},{\"name\":\"Constant Character Escape\",\"scope\":[\"constant.character.escape\"],\"settings\":{\"foreground\":\"#f78c6c\"}},{\"name\":\"RegExp String\",\"scope\":[\"string.regexp\",\"string.regexp keyword.other\"],\"settings\":{\"foreground\":\"#5ca7e4\"}},{\"name\":\"Comma in functions\",\"scope\":[\"meta.function punctuation.separator.comma\"],\"settings\":{\"foreground\":\"#889fb2\"}},{\"name\":\"Variable\",\"scope\":[\"variable\"],\"settings\":{\"foreground\":\"#c5e478\"}},{\"name\":\"Keyword\",\"scope\":[\"punctuation.accessor\",\"keyword\"],\"settings\":{\"foreground\":\"#c792ea\",\"fontStyle\":\"\"}},{\"name\":\"Storage\",\"scope\":[\"storage\",\"meta.var.expr\",\"meta.class meta.method.declaration meta.var.expr storage.type.js\",\"storage.type.property.js\",\"storage.type.property.ts\",\"storage.type.property.tsx\"],\"settings\":{\"foreground\":\"#c792ea\",\"fontStyle\":\"\"}},{\"name\":\"Storage type\",\"scope\":[\"storage.type\"],\"settings\":{\"foreground\":\"#c792ea\"}},{\"name\":\"Storage type\",\"scope\":[\"storage.type.function.arrow.js\"],\"settings\":{\"fontStyle\":\"\"}},{\"name\":\"Class name\",\"scope\":[\"entity.name.class\",\"meta.class entity.name.type.class\"],\"settings\":{\"foreground\":\"#ffcb8b\"}},{\"name\":\"Inherited class\",\"scope\":[\"entity.other.inherited-class\"],\"settings\":{\"foreground\":\"#c5e478\"}},{\"name\":\"Function name\",\"scope\":[\"entity.name.function\"],\"settings\":{\"foreground\":\"#c792ea\",\"fontStyle\":\"\"}},{\"name\":\"Meta Tag\",\"scope\":[\"punctuation.definition.tag\",\"meta.tag\"],\"settings\":{\"foreground\":\"#7fdbca\"}},{\"name\":\"HTML Tag names\",\"scope\":[\"entity.name.tag\",\"meta.tag.other.html\",\"meta.tag.other.js\",\"meta.tag.other.tsx\",\"entity.name.tag.tsx\",\"entity.name.tag.js\",\"entity.name.tag\",\"meta.tag.js\",\"meta.tag.tsx\",\"meta.tag.html\"],\"settings\":{\"foreground\":\"#caece6\",\"fontStyle\":\"\"}},{\"name\":\"Tag attribute\",\"scope\":[\"entity.other.attribute-name\"],\"settings\":{\"fontStyle\":\"\",\"foreground\":\"#c5e478\"}},{\"name\":\"Entity Name Tag Custom\",\"scope\":[\"entity.name.tag.custom\"],\"settings\":{\"foreground\":\"#c5e478\"}},{\"name\":\"Library (function & constant)\",\"scope\":[\"support.function\",\"support.constant\"],\"settings\":{\"foreground\":\"#82aaff\"}},{\"name\":\"Support Constant Property Value meta\",\"scope\":[\"support.constant.meta.property-value\"],\"settings\":{\"foreground\":\"#7fdbca\"}},{\"name\":\"Library class/type\",\"scope\":[\"support.type\",\"support.class\"],\"settings\":{\"foreground\":\"#c5e478\"}},{\"name\":\"Support Variable DOM\",\"scope\":[\"support.variable.dom\"],\"settings\":{\"foreground\":\"#c5e478\"}},{\"name\":\"Invalid\",\"scope\":[\"invalid\"],\"settings\":{\"background\":\"#ff2c83\",\"foreground\":\"#ffffff\"}},{\"name\":\"Invalid deprecated\",\"scope\":[\"invalid.deprecated\"],\"settings\":{\"foreground\":\"#ffffff\",\"background\":\"#d3423e\"}},{\"name\":\"Keyword Operator\",\"scope\":[\"keyword.operator\"],\"settings\":{\"foreground\":\"#7fdbca\",\"fontStyle\":\"\"}},{\"name\":\"Keyword Operator Relational\",\"scope\":[\"keyword.operator.relational\"],\"settings\":{\"foreground\":\"#c792ea\",\"fontStyle\":\"\"}},{\"name\":\"Keyword Operator Assignment\",\"scope\":[\"keyword.operator.assignment\"],\"settings\":{\"foreground\":\"#c792ea\"}},{\"name\":\"Keyword Operator Arithmetic\",\"scope\":[\"keyword.operator.arithmetic\"],\"settings\":{\"foreground\":\"#c792ea\"}},{\"name\":\"Keyword Operator Bitwise\",\"scope\":[\"keyword.operator.bitwise\"],\"settings\":{\"foreground\":\"#c792ea\"}},{\"name\":\"Keyword Operator Increment\",\"scope\":[\"keyword.operator.increment\"],\"settings\":{\"foreground\":\"#c792ea\"}},{\"name\":\"Keyword Operator Ternary\",\"scope\":[\"keyword.operator.ternary\"],\"settings\":{\"foreground\":\"#c792ea\"}},{\"name\":\"Double-Slashed Comment\",\"scope\":[\"comment.line.double-slash\"],\"settings\":{\"foreground\":\"#919f9f\"}},{\"name\":\"Object\",\"scope\":[\"object\"],\"settings\":{\"foreground\":\"#cdebf7\"}},{\"name\":\"Null\",\"scope\":[\"constant.language.null\"],\"settings\":{\"foreground\":\"#ff6a83\"}},{\"name\":\"Meta Brace\",\"scope\":[\"meta.brace\"],\"settings\":{\"foreground\":\"#d6deeb\"}},{\"name\":\"Meta Delimiter Period\",\"scope\":[\"meta.delimiter.period\"],\"settings\":{\"foreground\":\"#c792ea\",\"fontStyle\":\"\"}},{\"name\":\"Punctuation Definition String\",\"scope\":[\"punctuation.definition.string\"],\"settings\":{\"foreground\":\"#d9f5dd\"}},{\"name\":\"Punctuation Definition String Markdown\",\"scope\":[\"punctuation.definition.string.begin.markdown\"],\"settings\":{\"foreground\":\"#ff6a83\"}},{\"name\":\"Boolean\",\"scope\":[\"constant.language.boolean\"],\"settings\":{\"foreground\":\"#ff6a83\"}},{\"name\":\"Object Comma\",\"scope\":[\"object.comma\"],\"settings\":{\"foreground\":\"#ffffff\"}},{\"name\":\"Variable Parameter Function\",\"scope\":[\"variable.parameter.function\"],\"settings\":{\"foreground\":\"#7fdbca\",\"fontStyle\":\"\"}},{\"name\":\"Support Type Property Name & entity name tags\",\"scope\":[\"support.type.vendor.property-name\",\"support.constant.vendor.property-value\",\"support.type.property-name\",\"meta.property-list entity.name.tag\"],\"settings\":{\"foreground\":\"#80cbc4\",\"fontStyle\":\"\"}},{\"name\":\"Entity Name tag reference in stylesheets\",\"scope\":[\"meta.property-list entity.name.tag.reference\"],\"settings\":{\"foreground\":\"#57eaf1\"}},{\"name\":\"Constant Other Color RGB Value Punctuation Definition Constant\",\"scope\":[\"constant.other.color.rgb-value punctuation.definition.constant\"],\"settings\":{\"foreground\":\"#f78c6c\"}},{\"name\":\"Constant Other Color\",\"scope\":[\"constant.other.color\"],\"settings\":{\"foreground\":\"#ffeb95\"}},{\"name\":\"Keyword Other Unit\",\"scope\":[\"keyword.other.unit\"],\"settings\":{\"foreground\":\"#ffeb95\"}},{\"name\":\"Meta Selector\",\"scope\":[\"meta.selector\"],\"settings\":{\"foreground\":\"#c792ea\",\"fontStyle\":\"\"}},{\"name\":\"Entity Other Attribute Name Id\",\"scope\":[\"entity.other.attribute-name.id\"],\"settings\":{\"foreground\":\"#fad430\"}},{\"name\":\"Meta Property Name\",\"scope\":[\"meta.property-name\"],\"settings\":{\"foreground\":\"#80cbc4\"}},{\"name\":\"Doctypes\",\"scope\":[\"entity.name.tag.doctype\",\"meta.tag.sgml.doctype\"],\"settings\":{\"foreground\":\"#c792ea\",\"fontStyle\":\"\"}},{\"name\":\"Punctuation Definition Parameters\",\"scope\":[\"punctuation.definition.parameters\"],\"settings\":{\"foreground\":\"#d9f5dd\"}},{\"name\":\"Keyword Control Operator\",\"scope\":[\"keyword.control.operator\"],\"settings\":{\"foreground\":\"#7fdbca\"}},{\"name\":\"Keyword Operator Logical\",\"scope\":[\"keyword.operator.logical\"],\"settings\":{\"foreground\":\"#c792ea\",\"fontStyle\":\"\"}},{\"name\":\"Variable Instances\",\"scope\":[\"variable.instance\",\"variable.other.instance\",\"variable.readwrite.instance\",\"variable.other.readwrite.instance\",\"variable.other.property\"],\"settings\":{\"foreground\":\"#7fdbca\"}},{\"name\":\"Variable Property Other object property\",\"scope\":[\"variable.other.object.property\"],\"settings\":{\"foreground\":\"#faf39f\",\"fontStyle\":\"\"}},{\"name\":\"Variable Property Other object\",\"scope\":[\"variable.other.object.js\"],\"settings\":{\"fontStyle\":\"\"}},{\"name\":\"Entity Name Function\",\"scope\":[\"entity.name.function\"],\"settings\":{\"foreground\":\"#82aaff\",\"fontStyle\":\"\"}},{\"name\":\"Keyword Operator Comparison, returns, imports, and Keyword Operator Ruby\",\"scope\":[\"keyword.control.conditional.js\",\"keyword.operator.comparison\",\"keyword.control.flow.js\",\"keyword.control.flow.ts\",\"keyword.control.flow.tsx\",\"keyword.control.ruby\",\"keyword.control.def.ruby\",\"keyword.control.loop.js\",\"keyword.control.loop.ts\",\"keyword.control.import.js\",\"keyword.control.import.ts\",\"keyword.control.import.tsx\",\"keyword.control.from.js\",\"keyword.control.from.ts\",\"keyword.control.from.tsx\",\"keyword.control.conditional.js\",\"keyword.control.conditional.ts\",\"keyword.control.switch.js\",\"keyword.control.switch.ts\",\"keyword.operator.instanceof.js\",\"keyword.operator.expression.instanceof.ts\",\"keyword.operator.expression.instanceof.tsx\"],\"settings\":{\"foreground\":\"#c792ea\",\"fontStyle\":\"\"}},{\"name\":\"Support Constant, `new` keyword, Special Method Keyword, `debugger`, other keywords\",\"scope\":[\"support.constant\",\"keyword.other.special-method\",\"keyword.other.new\",\"keyword.other.debugger\",\"keyword.control\"],\"settings\":{\"foreground\":\"#7fdbca\"}},{\"name\":\"Support Function\",\"scope\":[\"support.function\"],\"settings\":{\"foreground\":\"#c5e478\"}},{\"name\":\"Invalid Broken\",\"scope\":[\"invalid.broken\"],\"settings\":{\"foreground\":\"#989da0\",\"background\":\"#F78C6C\"}},{\"name\":\"Invalid Unimplemented\",\"scope\":[\"invalid.unimplemented\"],\"settings\":{\"background\":\"#8BD649\",\"foreground\":\"#ffffff\"}},{\"name\":\"Invalid Illegal\",\"scope\":[\"invalid.illegal\"],\"settings\":{\"foreground\":\"#ffffff\",\"background\":\"#ec5f67\"}},{\"name\":\"Language Variable\",\"scope\":[\"variable.language\"],\"settings\":{\"foreground\":\"#7fdbca\"}},{\"name\":\"Support Variable Property\",\"scope\":[\"support.variable.property\"],\"settings\":{\"foreground\":\"#7fdbca\"}},{\"name\":\"Variable Function\",\"scope\":[\"variable.function\"],\"settings\":{\"foreground\":\"#82aaff\"}},{\"name\":\"Variable Interpolation\",\"scope\":[\"variable.interpolation\"],\"settings\":{\"foreground\":\"#ef787f\"}},{\"name\":\"Meta Function Call\",\"scope\":[\"meta.function-call\"],\"settings\":{\"foreground\":\"#82aaff\"}},{\"name\":\"Punctuation Section Embedded\",\"scope\":[\"punctuation.section.embedded\"],\"settings\":{\"foreground\":\"#e2817f\"}},{\"name\":\"Punctuation Tweaks\",\"scope\":[\"punctuation.terminator.expression\",\"punctuation.definition.arguments\",\"punctuation.definition.array\",\"punctuation.section.array\",\"meta.array\"],\"settings\":{\"foreground\":\"#d6deeb\"}},{\"name\":\"More Punctuation Tweaks\",\"scope\":[\"punctuation.definition.list.begin\",\"punctuation.definition.list.end\",\"punctuation.separator.arguments\",\"punctuation.definition.list\"],\"settings\":{\"foreground\":\"#d9f5dd\"}},{\"name\":\"Template Strings\",\"scope\":[\"string.template meta.template.expression\"],\"settings\":{\"foreground\":\"#e2817f\"}},{\"name\":\"Backtics(``) in Template Strings\",\"scope\":[\"string.template punctuation.definition.string\"],\"settings\":{\"foreground\":\"#d6deeb\"}},{\"name\":\"Italics\",\"scope\":[\"italic\"],\"settings\":{\"foreground\":\"#c792ea\",\"fontStyle\":\"italic\"}},{\"name\":\"Bold\",\"scope\":[\"bold\"],\"settings\":{\"foreground\":\"#c5e478\",\"fontStyle\":\"bold\"}},{\"name\":\"Quote\",\"scope\":[\"quote\"],\"settings\":{\"foreground\":\"#969bb7\",\"fontStyle\":\"\"}},{\"name\":\"Raw Code\",\"scope\":[\"raw\"],\"settings\":{\"foreground\":\"#80cbc4\"}},{\"name\":\"CoffeScript Variable Assignment\",\"scope\":[\"variable.assignment.coffee\"],\"settings\":{\"foreground\":\"#31e1eb\"}},{\"name\":\"CoffeScript Parameter Function\",\"scope\":[\"variable.parameter.function.coffee\"],\"settings\":{\"foreground\":\"#d6deeb\"}},{\"name\":\"CoffeeScript Assignments\",\"scope\":[\"variable.assignment.coffee\"],\"settings\":{\"foreground\":\"#7fdbca\"}},{\"name\":\"C# Readwrite Variables\",\"scope\":[\"variable.other.readwrite.cs\"],\"settings\":{\"foreground\":\"#d6deeb\"}},{\"name\":\"C# Classes & Storage types\",\"scope\":[\"entity.name.type.class.cs\",\"storage.type.cs\"],\"settings\":{\"foreground\":\"#ffcb8b\"}},{\"name\":\"C# Namespaces\",\"scope\":[\"entity.name.type.namespace.cs\"],\"settings\":{\"foreground\":\"#b2ccd6\"}},{\"name\":\"C# Unquoted String Zone\",\"scope\":[\"string.unquoted.preprocessor.message.cs\"],\"settings\":{\"foreground\":\"#d6deeb\"}},{\"name\":\"C# Region\",\"scope\":[\"punctuation.separator.hash.cs\",\"keyword.preprocessor.region.cs\",\"keyword.preprocessor.endregion.cs\"],\"settings\":{\"foreground\":\"#ffcb8b\",\"fontStyle\":\"bold\"}},{\"name\":\"C# Other Variables\",\"scope\":[\"variable.other.object.cs\"],\"settings\":{\"foreground\":\"#b2ccd6\"}},{\"name\":\"C# Enum\",\"scope\":[\"entity.name.type.enum.cs\"],\"settings\":{\"foreground\":\"#c5e478\"}},{\"name\":\"Dart String\",\"scope\":[\"string.interpolated.single.dart\",\"string.interpolated.double.dart\"],\"settings\":{\"foreground\":\"#ffcb8b\"}},{\"name\":\"Dart Class\",\"scope\":[\"support.class.dart\"],\"settings\":{\"foreground\":\"#ffcb8b\"}},{\"name\":\"Tag names in Stylesheets\",\"scope\":[\"entity.name.tag.css\",\"entity.name.tag.less\",\"entity.name.tag.custom.css\",\"support.constant.property-value.css\"],\"settings\":{\"foreground\":\"#ff6d6d\",\"fontStyle\":\"\"}},{\"name\":\"Wildcard(*) selector in Stylesheets\",\"scope\":[\"entity.name.tag.wildcard.css\",\"entity.name.tag.wildcard.less\",\"entity.name.tag.wildcard.scss\",\"entity.name.tag.wildcard.sass\"],\"settings\":{\"foreground\":\"#7fdbca\"}},{\"name\":\"CSS Keyword Other Unit\",\"scope\":[\"keyword.other.unit.css\"],\"settings\":{\"foreground\":\"#ffeb95\"}},{\"name\":\"Attribute Name for CSS\",\"scope\":[\"meta.attribute-selector.css entity.other.attribute-name.attribute\",\"variable.other.readwrite.js\"],\"settings\":{\"foreground\":\"#f78c6c\"}},{\"name\":\"Elixir Classes\",\"scope\":[\"source.elixir support.type.elixir\",\"source.elixir meta.module.elixir entity.name.class.elixir\"],\"settings\":{\"foreground\":\"#82aaff\"}},{\"name\":\"Elixir Functions\",\"scope\":[\"source.elixir entity.name.function\"],\"settings\":{\"foreground\":\"#c5e478\"}},{\"name\":\"Elixir Constants\",\"scope\":[\"source.elixir constant.other.symbol.elixir\",\"source.elixir constant.other.keywords.elixir\"],\"settings\":{\"foreground\":\"#82aaff\"}},{\"name\":\"Elixir String Punctuations\",\"scope\":[\"source.elixir punctuation.definition.string\"],\"settings\":{\"foreground\":\"#c5e478\"}},{\"name\":\"Elixir\",\"scope\":[\"source.elixir variable.other.readwrite.module.elixir\",\"source.elixir variable.other.readwrite.module.elixir punctuation.definition.variable.elixir\"],\"settings\":{\"foreground\":\"#c5e478\"}},{\"name\":\"Elixir Binary Punctuations\",\"scope\":[\"source.elixir .punctuation.binary.elixir\"],\"settings\":{\"foreground\":\"#c792ea\",\"fontStyle\":\"\"}},{\"name\":\"Closure Constant Keyword\",\"scope\":[\"constant.keyword.clojure\"],\"settings\":{\"foreground\":\"#7fdbca\"}},{\"name\":\"Go Function Calls\",\"scope\":[\"source.go meta.function-call.go\"],\"settings\":{\"foreground\":\"#dddddd\"}},{\"name\":\"Go Keywords\",\"scope\":[\"source.go keyword.package.go\",\"source.go keyword.import.go\",\"source.go keyword.function.go\",\"source.go keyword.type.go\",\"source.go keyword.struct.go\",\"source.go keyword.interface.go\",\"source.go keyword.const.go\",\"source.go keyword.var.go\",\"source.go keyword.map.go\",\"source.go keyword.channel.go\",\"source.go keyword.control.go\"],\"settings\":{\"foreground\":\"#c792ea\"}},{\"name\":\"Go Constants e.g. nil, string format (%s, %d, etc.)\",\"scope\":[\"source.go constant.language.go\",\"source.go constant.other.placeholder.go\"],\"settings\":{\"foreground\":\"#ff6a83\"}},{\"name\":\"C++ Functions\",\"scope\":[\"entity.name.function.preprocessor.cpp\",\"entity.scope.name.cpp\"],\"settings\":{\"foreground\":\"#7fdbca\"}},{\"name\":\"C++ Meta Namespace\",\"scope\":[\"meta.namespace-block.cpp\"],\"settings\":{\"foreground\":\"#e0dec6\"}},{\"name\":\"C++ Language Primitive Storage\",\"scope\":[\"storage.type.language.primitive.cpp\"],\"settings\":{\"foreground\":\"#ff6a83\"}},{\"name\":\"C++ Preprocessor Macro\",\"scope\":[\"meta.preprocessor.macro.cpp\"],\"settings\":{\"foreground\":\"#d6deeb\"}},{\"name\":\"C++ Variable Parameter\",\"scope\":[\"variable.parameter\"],\"settings\":{\"foreground\":\"#ffcb8b\"}},{\"name\":\"Powershell Variables\",\"scope\":[\"variable.other.readwrite.powershell\"],\"settings\":{\"foreground\":\"#82aaff\"}},{\"name\":\"Powershell Function\",\"scope\":[\"support.function.powershell\"],\"settings\":{\"foreground\":\"#7fdbca\"}},{\"name\":\"ID Attribute Name in HTML\",\"scope\":[\"entity.other.attribute-name.id.html\"],\"settings\":{\"foreground\":\"#c5e478\"}},{\"name\":\"HTML Punctuation Definition Tag\",\"scope\":[\"punctuation.definition.tag.html\"],\"settings\":{\"foreground\":\"#6ae9f0\"}},{\"name\":\"HTML Doctype\",\"scope\":[\"meta.tag.sgml.doctype.html\"],\"settings\":{\"foreground\":\"#c792ea\",\"fontStyle\":\"\"}},{\"name\":\"JavaScript Classes\",\"scope\":[\"meta.class entity.name.type.class.js\"],\"settings\":{\"foreground\":\"#ffcb8b\"}},{\"name\":\"JavaScript Method Declaration e.g. `constructor`\",\"scope\":[\"meta.method.declaration storage.type.js\"],\"settings\":{\"foreground\":\"#82aaff\"}},{\"name\":\"JavaScript Terminator\",\"scope\":[\"terminator.js\"],\"settings\":{\"foreground\":\"#d6deeb\"}},{\"name\":\"JavaScript Meta Punctuation Definition\",\"scope\":[\"meta.js punctuation.definition.js\"],\"settings\":{\"foreground\":\"#d6deeb\"}},{\"name\":\"Entity Names in Code Documentations\",\"scope\":[\"entity.name.type.instance.jsdoc\",\"entity.name.type.instance.phpdoc\"],\"settings\":{\"foreground\":\"#889fb2\"}},{\"name\":\"Other Variables in Code Documentations\",\"scope\":[\"variable.other.jsdoc\",\"variable.other.phpdoc\"],\"settings\":{\"foreground\":\"#78ccf0\"}},{\"name\":\"JavaScript module imports and exports\",\"scope\":[\"variable.other.meta.import.js\",\"meta.import.js variable.other\",\"variable.other.meta.export.js\",\"meta.export.js variable.other\"],\"settings\":{\"foreground\":\"#d6deeb\"}},{\"name\":\"JavaScript Variable Parameter Function\",\"scope\":[\"variable.parameter.function.js\"],\"settings\":{\"foreground\":\"#8b96ea\"}},{\"name\":\"JavaScript[React] Variable Other Object\",\"scope\":[\"variable.other.object.js\",\"variable.other.object.jsx\",\"variable.object.property.js\",\"variable.object.property.jsx\"],\"settings\":{\"foreground\":\"#d6deeb\"}},{\"name\":\"JavaScript Variables\",\"scope\":[\"variable.js\",\"variable.other.js\"],\"settings\":{\"foreground\":\"#d6deeb\"}},{\"name\":\"JavaScript Entity Name Type\",\"scope\":[\"entity.name.type.js\",\"entity.name.type.module.js\"],\"settings\":{\"foreground\":\"#ffcb8b\",\"fontStyle\":\"\"}},{\"name\":\"JavaScript Support Classes\",\"scope\":[\"support.class.js\"],\"settings\":{\"foreground\":\"#d6deeb\"}},{\"name\":\"JSON Property Names\",\"scope\":[\"support.type.property-name.json\"],\"settings\":{\"foreground\":\"#7fdbca\"}},{\"name\":\"JSON Support Constants\",\"scope\":[\"support.constant.json\"],\"settings\":{\"foreground\":\"#c5e478\"}},{\"name\":\"JSON Property values (string)\",\"scope\":[\"meta.structure.dictionary.value.json string.quoted.double\"],\"settings\":{\"foreground\":\"#c789d6\"}},{\"name\":\"Strings in JSON values\",\"scope\":[\"string.quoted.double.json punctuation.definition.string.json\"],\"settings\":{\"foreground\":\"#80cbc4\"}},{\"name\":\"Specific JSON Property values like null\",\"scope\":[\"meta.structure.dictionary.json meta.structure.dictionary.value constant.language\"],\"settings\":{\"foreground\":\"#ff6a83\"}},{\"name\":\"JavaScript Other Variable\",\"scope\":[\"variable.other.object.js\"],\"settings\":{\"foreground\":\"#7fdbca\"}},{\"name\":\"Ruby Variables\",\"scope\":[\"variable.other.ruby\"],\"settings\":{\"foreground\":\"#d6deeb\"}},{\"name\":\"Ruby Class\",\"scope\":[\"entity.name.type.class.ruby\"],\"settings\":{\"foreground\":\"#ecc48d\"}},{\"name\":\"Ruby Hashkeys\",\"scope\":[\"constant.language.symbol.hashkey.ruby\"],\"settings\":{\"foreground\":\"#7fdbca\"}},{\"name\":\"LESS Tag names\",\"scope\":[\"entity.name.tag.less\"],\"settings\":{\"foreground\":\"#7fdbca\"}},{\"name\":\"LESS Keyword Other Unit\",\"scope\":[\"keyword.other.unit.css\"],\"settings\":{\"foreground\":\"#ffeb95\"}},{\"name\":\"Attribute Name for LESS\",\"scope\":[\"meta.attribute-selector.less entity.other.attribute-name.attribute\"],\"settings\":{\"foreground\":\"#f78c6c\"}},{\"name\":\"Markdown Headings\",\"scope\":[\"markup.heading.markdown\",\"markup.heading.setext.1.markdown\",\"markup.heading.setext.2.markdown\"],\"settings\":{\"foreground\":\"#82b1ff\"}},{\"name\":\"Markdown Italics\",\"scope\":[\"markup.italic.markdown\"],\"settings\":{\"foreground\":\"#c792ea\",\"fontStyle\":\"italic\"}},{\"name\":\"Markdown Bold\",\"scope\":[\"markup.bold.markdown\"],\"settings\":{\"foreground\":\"#c5e478\",\"fontStyle\":\"bold\"}},{\"name\":\"Markdown Quote + others\",\"scope\":[\"markup.quote.markdown\"],\"settings\":{\"foreground\":\"#969bb7\",\"fontStyle\":\"\"}},{\"name\":\"Markdown Raw Code + others\",\"scope\":[\"markup.inline.raw.markdown\"],\"settings\":{\"foreground\":\"#80cbc4\"}},{\"name\":\"Markdown Links\",\"scope\":[\"markup.underline.link.markdown\",\"markup.underline.link.image.markdown\"],\"settings\":{\"foreground\":\"#ff869a\",\"fontStyle\":\"underline\"}},{\"name\":\"Markdown Link Title and Description\",\"scope\":[\"string.other.link.title.markdown\",\"string.other.link.description.markdown\"],\"settings\":{\"foreground\":\"#d6deeb\",\"fontStyle\":\"underline\"}},{\"name\":\"Markdown Punctuation\",\"scope\":[\"punctuation.definition.string.markdown\",\"punctuation.definition.string.begin.markdown\",\"punctuation.definition.string.end.markdown\",\"meta.link.inline.markdown punctuation.definition.string\"],\"settings\":{\"foreground\":\"#82b1ff\"}},{\"name\":\"Markdown MetaData Punctuation\",\"scope\":[\"punctuation.definition.metadata.markdown\"],\"settings\":{\"foreground\":\"#7fdbca\"}},{\"name\":\"Markdown List Punctuation\",\"scope\":[\"beginning.punctuation.definition.list.markdown\"],\"settings\":{\"foreground\":\"#82b1ff\"}},{\"name\":\"Markdown Inline Raw String\",\"scope\":[\"markup.inline.raw.string.markdown\"],\"settings\":{\"foreground\":\"#c5e478\"}},{\"name\":\"PHP Variables\",\"scope\":[\"variable.other.php\"],\"settings\":{\"foreground\":\"#bec5d4\"}},{\"name\":\"Support Classes in PHP\",\"scope\":[\"support.class.php\"],\"settings\":{\"foreground\":\"#ffcb8b\"}},{\"name\":\"Punctuations in PHP function calls\",\"scope\":[\"meta.function-call.php punctuation\"],\"settings\":{\"foreground\":\"#d6deeb\"}},{\"name\":\"PHP Global Variables\",\"scope\":[\"variable.other.global.php\"],\"settings\":{\"foreground\":\"#c5e478\"}},{\"name\":\"Declaration Punctuation in PHP Global Variables\",\"scope\":[\"variable.other.global.php punctuation.definition.variable\"],\"settings\":{\"foreground\":\"#c5e478\"}},{\"name\":\"Language Constants in Python\",\"scope\":[\"constant.language.python\"],\"settings\":{\"foreground\":\"#ff6a83\"}},{\"name\":\"Python Function Parameter and Arguments\",\"scope\":[\"variable.parameter.function.python\",\"meta.function-call.arguments.python\"],\"settings\":{\"foreground\":\"#82aaff\"}},{\"name\":\"Python Function Call\",\"scope\":[\"meta.function-call.python\",\"meta.function-call.generic.python\"],\"settings\":{\"foreground\":\"#b2ccd6\"}},{\"name\":\"Punctuations in Python\",\"scope\":[\"punctuation.python\"],\"settings\":{\"foreground\":\"#d6deeb\"}},{\"name\":\"Decorator Functions in Python\",\"scope\":[\"entity.name.function.decorator.python\"],\"settings\":{\"foreground\":\"#c5e478\"}},{\"name\":\"Python Language Variable\",\"scope\":[\"source.python variable.language.special\"],\"settings\":{\"foreground\":\"#8eace3\"}},{\"name\":\"Python import control keyword\",\"scope\":[\"keyword.control\"],\"settings\":{\"foreground\":\"#c792ea\"}},{\"name\":\"SCSS Variable\",\"scope\":[\"variable.scss\",\"variable.sass\",\"variable.parameter.url.scss\",\"variable.parameter.url.sass\"],\"settings\":{\"foreground\":\"#c5e478\"}},{\"name\":\"Variables in SASS At-Rules\",\"scope\":[\"source.css.scss meta.at-rule variable\",\"source.css.sass meta.at-rule variable\"],\"settings\":{\"foreground\":\"#82aaff\"}},{\"name\":\"Variables in SASS At-Rules\",\"scope\":[\"source.css.scss meta.at-rule variable\",\"source.css.sass meta.at-rule variable\"],\"settings\":{\"foreground\":\"#bec5d4\"}},{\"name\":\"Attribute Name for SASS\",\"scope\":[\"meta.attribute-selector.scss entity.other.attribute-name.attribute\",\"meta.attribute-selector.sass entity.other.attribute-name.attribute\"],\"settings\":{\"foreground\":\"#f78c6c\"}},{\"name\":\"Tag names in SASS\",\"scope\":[\"entity.name.tag.scss\",\"entity.name.tag.sass\"],\"settings\":{\"foreground\":\"#7fdbca\"}},{\"name\":\"SASS Keyword Other Unit\",\"scope\":[\"keyword.other.unit.scss\",\"keyword.other.unit.sass\"],\"settings\":{\"foreground\":\"#ffeb95\"}},{\"name\":\"TypeScript[React] Variables and Object Properties\",\"scope\":[\"variable.other.readwrite.alias.ts\",\"variable.other.readwrite.alias.tsx\",\"variable.other.readwrite.ts\",\"variable.other.readwrite.tsx\",\"variable.other.object.ts\",\"variable.other.object.tsx\",\"variable.object.property.ts\",\"variable.object.property.tsx\",\"variable.other.ts\",\"variable.other.tsx\",\"variable.tsx\",\"variable.ts\"],\"settings\":{\"foreground\":\"#d6deeb\"}},{\"name\":\"TypeScript[React] Entity Name Types\",\"scope\":[\"entity.name.type.ts\",\"entity.name.type.tsx\"],\"settings\":{\"foreground\":\"#ffcb8b\"}},{\"name\":\"TypeScript[React] Node Classes\",\"scope\":[\"support.class.node.ts\",\"support.class.node.tsx\"],\"settings\":{\"foreground\":\"#82aaff\"}},{\"name\":\"TypeScript[React] Entity Name Types as Parameters\",\"scope\":[\"meta.type.parameters.ts entity.name.type\",\"meta.type.parameters.tsx entity.name.type\"],\"settings\":{\"foreground\":\"#889fb2\"}},{\"name\":\"TypeScript[React] Import/Export Punctuations\",\"scope\":[\"meta.import.ts punctuation.definition.block\",\"meta.import.tsx punctuation.definition.block\",\"meta.export.ts punctuation.definition.block\",\"meta.export.tsx punctuation.definition.block\"],\"settings\":{\"foreground\":\"#d6deeb\"}},{\"name\":\"TypeScript[React] Punctuation Decorators\",\"scope\":[\"meta.decorator punctuation.decorator.ts\",\"meta.decorator punctuation.decorator.tsx\"],\"settings\":{\"foreground\":\"#82aaff\"}},{\"name\":\"TypeScript[React] Punctuation Decorators\",\"scope\":[\"meta.tag.js meta.jsx.children.tsx\"],\"settings\":{\"foreground\":\"#82aaff\"}},{\"name\":\"YAML Entity Name Tags\",\"scope\":[\"entity.name.tag.yaml\"],\"settings\":{\"foreground\":\"#7fdbca\"}},{\"name\":\"JavaScript Variable Other ReadWrite\",\"scope\":[\"variable.other.readwrite.js\",\"variable.parameter\"],\"settings\":{\"foreground\":\"#d7dbe0\"}},{\"name\":\"Support Class Component\",\"scope\":[\"support.class.component.js\",\"support.class.component.tsx\"],\"settings\":{\"foreground\":\"#f78c6c\",\"fontStyle\":\"\"}},{\"name\":\"Text nested in React tags\",\"scope\":[\"meta.jsx.children\",\"meta.jsx.children.js\",\"meta.jsx.children.tsx\"],\"settings\":{\"foreground\":\"#d6deeb\"}},{\"name\":\"TypeScript Classes\",\"scope\":[\"meta.class entity.name.type.class.tsx\"],\"settings\":{\"foreground\":\"#ffcb8b\"}},{\"name\":\"TypeScript Entity Name Type\",\"scope\":[\"entity.name.type.tsx\",\"entity.name.type.module.tsx\"],\"settings\":{\"foreground\":\"#ffcb8b\"}},{\"name\":\"TypeScript Class Variable Keyword\",\"scope\":[\"meta.class.ts meta.var.expr.ts storage.type.ts\",\"meta.class.tsx meta.var.expr.tsx storage.type.tsx\"],\"settings\":{\"foreground\":\"#c792ea\"}},{\"name\":\"TypeScript Method Declaration e.g. `constructor`\",\"scope\":[\"meta.method.declaration storage.type.ts\",\"meta.method.declaration storage.type.tsx\"],\"settings\":{\"foreground\":\"#82aaff\"}},{\"name\":\"normalize font style of certain components\",\"scope\":[\"meta.property-list.css meta.property-value.css variable.other.less\",\"meta.property-list.scss variable.scss\",\"meta.property-list.sass variable.sass\",\"meta.brace\",\"keyword.operator.operator\",\"keyword.operator.or.regexp\",\"keyword.operator.expression.in\",\"keyword.operator.relational\",\"keyword.operator.assignment\",\"keyword.operator.comparison\",\"keyword.operator.type\",\"keyword.operator\",\"keyword\",\"punctuation.definintion.string\",\"punctuation\",\"variable.other.readwrite.js\",\"storage.type\",\"source.css\",\"string.quoted\"],\"settings\":{\"fontStyle\":\"\"}}],\"styleOverrides\":{\"frames\":{\"editorBackground\":\"var(--sl-color-gray-6)\",\"terminalBackground\":\"var(--sl-color-gray-6)\",\"editorActiveTabBackground\":\"var(--sl-color-gray-6)\",\"terminalTitlebarDotsForeground\":\"color-mix(in srgb, var(--sl-color-gray-5), transparent 25%)\",\"terminalTitlebarDotsOpacity\":\"0.75\",\"inlineButtonForeground\":\"var(--sl-color-text)\",\"frameBoxShadowCssValue\":\"none\"},\"textMarkers\":{\"markBackground\":\"#ffffff17\",\"markBorderColor\":\"#ffffff40\"}}},{\"name\":\"Night Owl Light\",\"type\":\"light\",\"colors\":{\"focusBorder\":\"#93a1a1\",\"foreground\":\"#403f53\",\"disabledForeground\":\"#61616180\",\"descriptionForeground\":\"#403f53\",\"errorForeground\":\"#403f53\",\"icon.foreground\":\"#424242\",\"contrastActiveBorder\":null,\"contrastBorder\":null,\"textBlockQuote.background\":\"#7f7f7f1a\",\"textBlockQuote.border\":\"#007acc80\",\"textCodeBlock.background\":\"#dcdcdc66\",\"textLink.activeForeground\":\"#006ab1\",\"textLink.foreground\":\"#006ab1\",\"textPreformat.foreground\":\"#a31515\",\"textSeparator.foreground\":\"#0000002e\",\"editor.background\":\"#f6f7f9\",\"editor.foreground\":\"#403f53\",\"editorLineNumber.foreground\":\"#90a7b2\",\"editorLineNumber.activeForeground\":\"#403f53\",\"editorActiveLineNumber.foreground\":\"#0b216f\",\"editor.selectionBackground\":\"#e0e0e0\",\"editor.inactiveSelectionBackground\":\"#e0e0e080\",\"editor.selectionHighlightBackground\":\"#339cec33\",\"editorError.foreground\":\"#e64d49\",\"editorWarning.foreground\":\"#daaa01\",\"editorInfo.foreground\":\"#1a85ff\",\"editorHint.foreground\":\"#6c6c6c\",\"problemsErrorIcon.foreground\":\"#e64d49\",\"problemsWarningIcon.foreground\":\"#daaa01\",\"problemsInfoIcon.foreground\":\"#1a85ff\",\"editor.findMatchBackground\":\"#93a1a16c\",\"editor.findMatchHighlightBackground\":\"#93a1a16c\",\"editor.findRangeHighlightBackground\":\"#7497a633\",\"editorLink.activeForeground\":\"#0000ff\",\"editorLightBulb.foreground\":\"#ddb100\",\"editorLightBulbAutoFix.foreground\":\"#007acc\",\"diffEditor.insertedTextBackground\":\"#9ccc2c40\",\"diffEditor.insertedTextBorder\":null,\"diffEditor.removedTextBackground\":\"#ff000033\",\"diffEditor.removedTextBorder\":null,\"diffEditor.insertedLineBackground\":\"#9bb95533\",\"diffEditor.removedLineBackground\":\"#ff000033\",\"editorStickyScroll.background\":\"#fbfbfb\",\"editorStickyScrollHover.background\":\"#f0f0f0\",\"editorInlayHint.background\":\"#2aa29899\",\"editorInlayHint.foreground\":\"#f0f0f0\",\"editorInlayHint.typeBackground\":\"#2aa29899\",\"editorInlayHint.typeForeground\":\"#f0f0f0\",\"editorInlayHint.parameterBackground\":\"#2aa29899\",\"editorInlayHint.parameterForeground\":\"#f0f0f0\",\"editorPane.background\":\"#fbfbfb\",\"editorGroup.emptyBackground\":null,\"editorGroup.focusedEmptyBorder\":null,\"editorGroupHeader.tabsBackground\":\"var(--sl-color-gray-6)\",\"editorGroupHeader.tabsBorder\":\"color-mix(in srgb, var(--sl-color-gray-5), transparent 25%)\",\"editorGroupHeader.noTabsBackground\":\"#f0f0f0\",\"editorGroupHeader.border\":null,\"editorGroup.border\":\"#f0f0f0\",\"editorGroup.dropBackground\":\"#2677cb2d\",\"editorGroup.dropIntoPromptForeground\":\"#403f53\",\"editorGroup.dropIntoPromptBackground\":\"#f0f0f0\",\"editorGroup.dropIntoPromptBorder\":null,\"sideBySideEditor.horizontalBorder\":\"#f0f0f0\",\"sideBySideEditor.verticalBorder\":\"#f0f0f0\",\"scrollbar.shadow\":\"#cccccc\",\"scrollbarSlider.background\":\"#0000001a\",\"scrollbarSlider.hoverBackground\":\"#00000055\",\"scrollbarSlider.activeBackground\":\"#00000099\",\"panel.background\":\"#f0f0f0\",\"panel.border\":\"#d9d9d9\",\"panelTitle.activeBorder\":\"#424242\",\"panelTitle.activeForeground\":\"#424242\",\"panelTitle.inactiveForeground\":\"#424242bf\",\"panelSectionHeader.background\":\"#80808051\",\"terminal.background\":\"#f6f6f6\",\"widget.shadow\":\"#d9d9d9\",\"editorWidget.background\":\"#f0f0f0\",\"editorWidget.foreground\":\"#403f53\",\"editorWidget.border\":\"#d9d9d9\",\"quickInput.background\":\"#f0f0f0\",\"quickInput.foreground\":\"#403f53\",\"quickInputTitle.background\":\"#0000000f\",\"pickerGroup.foreground\":\"#403f53\",\"pickerGroup.border\":\"#d9d9d9\",\"editor.hoverHighlightBackground\":\"#339cec33\",\"editorHoverWidget.background\":\"#f0f0f0\",\"editorHoverWidget.foreground\":\"#403f53\",\"editorHoverWidget.border\":\"#d9d9d9\",\"editorHoverWidget.statusBarBackground\":\"#e4e4e4\",\"titleBar.activeBackground\":\"var(--sl-color-gray-6)\",\"titleBar.activeForeground\":\"var(--sl-color-text)\",\"titleBar.inactiveBackground\":\"#f0f0f099\",\"titleBar.inactiveForeground\":\"#33333399\",\"titleBar.border\":\"color-mix(in srgb, var(--sl-color-gray-5), transparent 25%)\",\"toolbar.hoverBackground\":\"#b8b8b850\",\"toolbar.activeBackground\":\"#a6a6a650\",\"tab.activeBackground\":\"#f6f6f6\",\"tab.unfocusedActiveBackground\":\"#f6f6f6\",\"tab.inactiveBackground\":\"#f0f0f0\",\"tab.unfocusedInactiveBackground\":\"#f0f0f0\",\"tab.activeForeground\":\"var(--sl-color-text)\",\"tab.inactiveForeground\":\"#403f53\",\"tab.unfocusedActiveForeground\":\"#403f53b3\",\"tab.unfocusedInactiveForeground\":\"#403f5380\",\"tab.hoverBackground\":null,\"tab.unfocusedHoverBackground\":null,\"tab.hoverForeground\":null,\"tab.unfocusedHoverForeground\":null,\"tab.border\":\"#f0f0f0\",\"tab.lastPinnedBorder\":\"#a9a9a9\",\"tab.activeBorder\":\"transparent\",\"tab.unfocusedActiveBorder\":null,\"tab.activeBorderTop\":\"var(--sl-color-accent)\",\"tab.unfocusedActiveBorderTop\":null,\"tab.hoverBorder\":null,\"tab.unfocusedHoverBorder\":null,\"tab.activeModifiedBorder\":\"#2aa298\",\"tab.inactiveModifiedBorder\":\"#93a1a1\",\"tab.unfocusedActiveModifiedBorder\":\"#93a1a1\",\"tab.unfocusedInactiveModifiedBorder\":\"#93a1a1\",\"badge.background\":\"#2aa298\",\"badge.foreground\":\"#f0f0f0\",\"button.background\":\"#2aa298\",\"button.foreground\":\"#f0f0f0\",\"button.border\":null,\"button.separator\":\"#f0f0f066\",\"button.hoverBackground\":\"#22827a\",\"button.secondaryBackground\":\"#5f6a79\",\"button.secondaryForeground\":\"#ffffff\",\"button.secondaryHoverBackground\":\"#4c5561\",\"dropdown.background\":\"#f0f0f0\",\"dropdown.foreground\":\"#403f53\",\"dropdown.border\":\"#d9d9d9\",\"list.activeSelectionBackground\":\"#d3e8f8\",\"list.activeSelectionForeground\":\"#403f53\",\"tree.indentGuidesStroke\":\"#a9a9a9\",\"input.background\":\"#f0f0f0\",\"input.foreground\":\"#403f53\",\"input.placeholderForeground\":\"#93a1a1\",\"inputOption.activeBorder\":\"#2aa298\",\"inputOption.hoverBackground\":\"#b8b8b850\",\"inputOption.activeBackground\":\"#93a1a133\",\"inputOption.activeForeground\":\"#000000\",\"inputValidation.infoBackground\":\"#f0f0f0\",\"inputValidation.infoBorder\":\"#d0d0d0\",\"inputValidation.warningBackground\":\"#daaa01\",\"inputValidation.warningBorder\":\"#e0af02\",\"inputValidation.errorBackground\":\"#f76e6e\",\"inputValidation.errorBorder\":\"#de3d3b\",\"keybindingLabel.background\":\"#dddddd66\",\"keybindingLabel.foreground\":\"#555555\",\"keybindingLabel.border\":\"#cccccc66\",\"keybindingLabel.bottomBorder\":\"#bbbbbb66\",\"menu.foreground\":\"#403f53\",\"menu.background\":\"#f0f0f0\",\"menu.selectionForeground\":\"#403f53\",\"menu.selectionBackground\":\"#d3e8f8\",\"menu.separatorBackground\":\"#d4d4d4\",\"editor.snippetTabstopHighlightBackground\":\"#0a326433\",\"editor.snippetFinalTabstopHighlightBorder\":\"#0a326480\",\"terminal.ansiBlack\":\"#403f53\",\"terminal.ansiRed\":\"#de3d3b\",\"terminal.ansiGreen\":\"#08916a\",\"terminal.ansiYellow\":\"#e0af02\",\"terminal.ansiBlue\":\"#288ed7\",\"terminal.ansiMagenta\":\"#d6438a\",\"terminal.ansiCyan\":\"#2aa298\",\"terminal.ansiWhite\":\"#f0f0f0\",\"terminal.ansiBrightBlack\":\"#403f53\",\"terminal.ansiBrightRed\":\"#de3d3b\",\"terminal.ansiBrightGreen\":\"#08916a\",\"terminal.ansiBrightYellow\":\"#daaa01\",\"terminal.ansiBrightBlue\":\"#288ed7\",\"terminal.ansiBrightMagenta\":\"#d6438a\",\"terminal.ansiBrightCyan\":\"#2aa298\",\"terminal.ansiBrightWhite\":\"#f0f0f0\",\"selection.background\":\"#7a8181ad\",\"notifications.background\":\"#f0f0f0\",\"notifications.foreground\":\"#403f53\",\"notificationLink.foreground\":\"#994cc3\",\"notifications.border\":\"#cccccc\",\"notificationCenter.border\":\"#cccccc\",\"notificationToast.border\":\"#cccccc\",\"notificationCenterHeader.foreground\":\"#403f53\",\"notificationCenterHeader.background\":\"#f0f0f0\",\"input.border\":\"#d9d9d9\",\"progressBar.background\":\"#2aa298\",\"list.inactiveSelectionBackground\":\"#e0e7ea\",\"list.inactiveSelectionForeground\":\"#403f53\",\"list.focusBackground\":\"#d3e8f8\",\"list.hoverBackground\":\"#d3e8f8\",\"list.focusForeground\":\"#403f53\",\"list.hoverForeground\":\"#403f53\",\"list.highlightForeground\":\"#403f53\",\"list.errorForeground\":\"#e64d49\",\"list.warningForeground\":\"#daaa01\",\"activityBar.background\":\"#f0f0f0\",\"activityBar.foreground\":\"#403f53\",\"activityBar.dropBackground\":\"#d0d0d0\",\"activityBarBadge.background\":\"#403f53\",\"activityBarBadge.foreground\":\"#f0f0f0\",\"activityBar.border\":\"#f0f0f0\",\"sideBar.background\":\"#f0f0f0\",\"sideBar.foreground\":\"#403f53\",\"sideBarTitle.foreground\":\"#403f53\",\"sideBar.border\":\"#f0f0f0\",\"editorGroup.background\":\"#f6f6f6\",\"editorCursor.foreground\":\"#90a7b2\",\"editor.wordHighlightBackground\":\"#339cec33\",\"editor.wordHighlightStrongBackground\":\"#007dd659\",\"editor.lineHighlightBackground\":\"#f0f0f0\",\"editor.rangeHighlightBackground\":\"#7497a633\",\"editorWhitespace.foreground\":\"#d9d9d9\",\"editorIndentGuide.background\":\"#d9d9d9\",\"editorCodeLens.foreground\":\"#403f53\",\"editorBracketMatch.background\":\"#d3e8f8\",\"editorBracketMatch.border\":\"#2aa298\",\"editorError.border\":\"#fbfbfb\",\"editorWarning.border\":\"#daaa01\",\"editorGutter.addedBackground\":\"#49d0c5\",\"editorGutter.modifiedBackground\":\"#6fbef6\",\"editorGutter.deletedBackground\":\"#f76e6e\",\"editorRuler.foreground\":\"#d9d9d9\",\"editorOverviewRuler.errorForeground\":\"#e64d49\",\"editorOverviewRuler.warningForeground\":\"#daaa01\",\"editorSuggestWidget.background\":\"#f0f0f0\",\"editorSuggestWidget.foreground\":\"#403f53\",\"editorSuggestWidget.highlightForeground\":\"#403f53\",\"editorSuggestWidget.selectedBackground\":\"#d3e8f8\",\"editorSuggestWidget.border\":\"#d9d9d9\",\"debugExceptionWidget.background\":\"#f0f0f0\",\"debugExceptionWidget.border\":\"#d9d9d9\",\"editorMarkerNavigation.background\":\"#d0d0d0\",\"editorMarkerNavigationError.background\":\"#f76e6e\",\"editorMarkerNavigationWarning.background\":\"#daaa01\",\"debugToolBar.background\":\"#f0f0f0\",\"extensionButton.prominentBackground\":\"#2aa298\",\"extensionButton.prominentForeground\":\"#f0f0f0\",\"statusBar.background\":\"#f0f0f0\",\"statusBar.border\":\"#f0f0f0\",\"statusBar.debuggingBackground\":\"#f0f0f0\",\"statusBar.debuggingForeground\":\"#403f53\",\"statusBar.foreground\":\"#403f53\",\"statusBar.noFolderBackground\":\"#f0f0f0\",\"statusBar.noFolderForeground\":\"#403f53\",\"peekView.border\":\"#d9d9d9\",\"peekViewEditor.background\":\"#f6f6f6\",\"peekViewEditorGutter.background\":\"#f6f6f6\",\"peekViewEditor.matchHighlightBackground\":\"#49d0c5\",\"peekViewResult.background\":\"#f0f0f0\",\"peekViewResult.fileForeground\":\"#403f53\",\"peekViewResult.lineForeground\":\"#403f53\",\"peekViewResult.matchHighlightBackground\":\"#49d0c5\",\"peekViewResult.selectionBackground\":\"#e0e7ea\",\"peekViewResult.selectionForeground\":\"#403f53\",\"peekViewTitle.background\":\"#f0f0f0\",\"peekViewTitleLabel.foreground\":\"#403f53\",\"peekViewTitleDescription.foreground\":\"#403f53\",\"terminal.foreground\":\"#403f53\"},\"fg\":\"#403f53\",\"bg\":\"#f6f7f9\",\"semanticHighlighting\":false,\"settings\":[{\"name\":\"Changed\",\"scope\":[\"markup.changed\",\"meta.diff.header.git\",\"meta.diff.header.from-file\",\"meta.diff.header.to-file\"],\"settings\":{\"foreground\":\"#556484\"}},{\"name\":\"Deleted\",\"scope\":[\"markup.deleted.diff\"],\"settings\":{\"foreground\":\"#ae3c3afd\"}},{\"name\":\"Inserted\",\"scope\":[\"markup.inserted.diff\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Global settings\",\"settings\":{\"background\":\"#011627\",\"foreground\":\"#403f53\"}},{\"name\":\"Comment\",\"scope\":[\"comment\"],\"settings\":{\"foreground\":\"#5f636f\"}},{\"name\":\"String\",\"scope\":[\"string\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"String Quoted\",\"scope\":[\"string.quoted\",\"variable.other.readwrite.js\"],\"settings\":{\"foreground\":\"#984e4d\"}},{\"name\":\"Support Constant Math\",\"scope\":[\"support.constant.math\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Number\",\"scope\":[\"constant.numeric\",\"constant.character.numeric\"],\"settings\":{\"foreground\":\"#aa0982\",\"fontStyle\":\"\"}},{\"name\":\"Built-in constant\",\"scope\":[\"constant.language\",\"punctuation.definition.constant\",\"variable.other.constant\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"User-defined constant\",\"scope\":[\"constant.character\",\"constant.other\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Constant Character Escape\",\"scope\":[\"constant.character.escape\"],\"settings\":{\"foreground\":\"#aa0982\"}},{\"name\":\"RegExp String\",\"scope\":[\"string.regexp\",\"string.regexp keyword.other\"],\"settings\":{\"foreground\":\"#3a688f\"}},{\"name\":\"Comma in functions\",\"scope\":[\"meta.function punctuation.separator.comma\"],\"settings\":{\"foreground\":\"#4d667b\"}},{\"name\":\"Variable\",\"scope\":[\"variable\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Keyword\",\"scope\":[\"punctuation.accessor\",\"keyword\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"Storage\",\"scope\":[\"storage\",\"meta.var.expr\",\"meta.class meta.method.declaration meta.var.expr storage.type.js\",\"storage.type.property.js\",\"storage.type.property.ts\",\"storage.type.property.tsx\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"Storage type\",\"scope\":[\"storage.type\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"Storage type\",\"scope\":[\"storage.type.function.arrow.js\"],\"settings\":{\"fontStyle\":\"\"}},{\"name\":\"Class name\",\"scope\":[\"entity.name.class\",\"meta.class entity.name.type.class\"],\"settings\":{\"foreground\":\"#111111\"}},{\"name\":\"Inherited class\",\"scope\":[\"entity.other.inherited-class\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Function name\",\"scope\":[\"entity.name.function\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"Meta Tag\",\"scope\":[\"punctuation.definition.tag\",\"meta.tag\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"HTML Tag names\",\"scope\":[\"entity.name.tag\",\"meta.tag.other.html\",\"meta.tag.other.js\",\"meta.tag.other.tsx\",\"entity.name.tag.tsx\",\"entity.name.tag.js\",\"entity.name.tag\",\"meta.tag.js\",\"meta.tag.tsx\",\"meta.tag.html\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"Tag attribute\",\"scope\":[\"entity.other.attribute-name\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Entity Name Tag Custom\",\"scope\":[\"entity.name.tag.custom\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Library (function & constant)\",\"scope\":[\"support.function\",\"support.constant\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Support Constant Property Value meta\",\"scope\":[\"support.constant.meta.property-value\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"Library class/type\",\"scope\":[\"support.type\",\"support.class\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Support Variable DOM\",\"scope\":[\"support.variable.dom\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Invalid\",\"scope\":[\"invalid\"],\"settings\":{\"foreground\":\"#bb2060\"}},{\"name\":\"Invalid deprecated\",\"scope\":[\"invalid.deprecated\"],\"settings\":{\"foreground\":\"#b23834\"}},{\"name\":\"Keyword Operator\",\"scope\":[\"keyword.operator\"],\"settings\":{\"foreground\":\"#096e72\",\"fontStyle\":\"\"}},{\"name\":\"Keyword Operator Relational\",\"scope\":[\"keyword.operator.relational\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"Keyword Operator Assignment\",\"scope\":[\"keyword.operator.assignment\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"Keyword Operator Arithmetic\",\"scope\":[\"keyword.operator.arithmetic\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"Keyword Operator Bitwise\",\"scope\":[\"keyword.operator.bitwise\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"Keyword Operator Increment\",\"scope\":[\"keyword.operator.increment\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"Keyword Operator Ternary\",\"scope\":[\"keyword.operator.ternary\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"Double-Slashed Comment\",\"scope\":[\"comment.line.double-slash\"],\"settings\":{\"foreground\":\"#5d6376\"}},{\"name\":\"Object\",\"scope\":[\"object\"],\"settings\":{\"foreground\":\"#58656a\"}},{\"name\":\"Null\",\"scope\":[\"constant.language.null\"],\"settings\":{\"foreground\":\"#a24848\"}},{\"name\":\"Meta Brace\",\"scope\":[\"meta.brace\"],\"settings\":{\"foreground\":\"#403f53\"}},{\"name\":\"Meta Delimiter Period\",\"scope\":[\"meta.delimiter.period\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"Punctuation Definition String\",\"scope\":[\"punctuation.definition.string\"],\"settings\":{\"foreground\":\"#111111\"}},{\"name\":\"Punctuation Definition String Markdown\",\"scope\":[\"punctuation.definition.string.begin.markdown\"],\"settings\":{\"foreground\":\"#a24848\"}},{\"name\":\"Boolean\",\"scope\":[\"constant.language.boolean\"],\"settings\":{\"foreground\":\"#a24848\"}},{\"name\":\"Object Comma\",\"scope\":[\"object.comma\"],\"settings\":{\"foreground\":\"#646464\"}},{\"name\":\"Variable Parameter Function\",\"scope\":[\"variable.parameter.function\"],\"settings\":{\"foreground\":\"#096e72\",\"fontStyle\":\"\"}},{\"name\":\"Support Type Property Name & entity name tags\",\"scope\":[\"support.type.vendor.property-name\",\"support.constant.vendor.property-value\",\"support.type.property-name\",\"meta.property-list entity.name.tag\"],\"settings\":{\"foreground\":\"#096e72\",\"fontStyle\":\"\"}},{\"name\":\"Entity Name tag reference in stylesheets\",\"scope\":[\"meta.property-list entity.name.tag.reference\"],\"settings\":{\"foreground\":\"#286d70\"}},{\"name\":\"Constant Other Color RGB Value Punctuation Definition Constant\",\"scope\":[\"constant.other.color.rgb-value punctuation.definition.constant\"],\"settings\":{\"foreground\":\"#aa0982\"}},{\"name\":\"Constant Other Color\",\"scope\":[\"constant.other.color\"],\"settings\":{\"foreground\":\"#aa0982\"}},{\"name\":\"Keyword Other Unit\",\"scope\":[\"keyword.other.unit\"],\"settings\":{\"foreground\":\"#aa0982\"}},{\"name\":\"Meta Selector\",\"scope\":[\"meta.selector\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"Entity Other Attribute Name Id\",\"scope\":[\"entity.other.attribute-name.id\"],\"settings\":{\"foreground\":\"#aa0982\"}},{\"name\":\"Meta Property Name\",\"scope\":[\"meta.property-name\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"Doctypes\",\"scope\":[\"entity.name.tag.doctype\",\"meta.tag.sgml.doctype\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"Punctuation Definition Parameters\",\"scope\":[\"punctuation.definition.parameters\"],\"settings\":{\"foreground\":\"#111111\"}},{\"name\":\"Keyword Control Operator\",\"scope\":[\"keyword.control.operator\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"Keyword Operator Logical\",\"scope\":[\"keyword.operator.logical\"],\"settings\":{\"foreground\":\"#8844ae\",\"fontStyle\":\"\"}},{\"name\":\"Variable Instances\",\"scope\":[\"variable.instance\",\"variable.other.instance\",\"variable.readwrite.instance\",\"variable.other.readwrite.instance\",\"variable.other.property\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"Variable Property Other object property\",\"scope\":[\"variable.other.object.property\"],\"settings\":{\"foreground\":\"#111111\"}},{\"name\":\"Variable Property Other object\",\"scope\":[\"variable.other.object.js\"],\"settings\":{\"fontStyle\":\"\"}},{\"name\":\"Entity Name Function\",\"scope\":[\"entity.name.function\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Keyword Operator Comparison, imports, returns and Keyword Operator Ruby\",\"scope\":[\"keyword.operator.comparison\",\"keyword.control.flow.js\",\"keyword.control.flow.ts\",\"keyword.control.flow.tsx\",\"keyword.control.ruby\",\"keyword.control.module.ruby\",\"keyword.control.class.ruby\",\"keyword.control.def.ruby\",\"keyword.control.loop.js\",\"keyword.control.loop.ts\",\"keyword.control.import.js\",\"keyword.control.import.ts\",\"keyword.control.import.tsx\",\"keyword.control.from.js\",\"keyword.control.from.ts\",\"keyword.control.from.tsx\",\"keyword.operator.instanceof.js\",\"keyword.operator.expression.instanceof.ts\",\"keyword.operator.expression.instanceof.tsx\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"Keyword Control Conditional\",\"scope\":[\"keyword.control.conditional.js\",\"keyword.control.conditional.ts\",\"keyword.control.switch.js\",\"keyword.control.switch.ts\"],\"settings\":{\"foreground\":\"#8844ae\",\"fontStyle\":\"\"}},{\"name\":\"Support Constant, `new` keyword, Special Method Keyword, `debugger`, other keywords\",\"scope\":[\"support.constant\",\"keyword.other.special-method\",\"keyword.other.new\",\"keyword.other.debugger\",\"keyword.control\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"Support Function\",\"scope\":[\"support.function\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Invalid Broken\",\"scope\":[\"invalid.broken\"],\"settings\":{\"foreground\":\"#aa0982\"}},{\"name\":\"Invalid Unimplemented\",\"scope\":[\"invalid.unimplemented\"],\"settings\":{\"foreground\":\"#486e26\"}},{\"name\":\"Invalid Illegal\",\"scope\":[\"invalid.illegal\"],\"settings\":{\"foreground\":\"#984e4d\"}},{\"name\":\"Language Variable\",\"scope\":[\"variable.language\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"Support Variable Property\",\"scope\":[\"support.variable.property\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"Variable Function\",\"scope\":[\"variable.function\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Variable Interpolation\",\"scope\":[\"variable.interpolation\"],\"settings\":{\"foreground\":\"#a64348\"}},{\"name\":\"Meta Function Call\",\"scope\":[\"meta.function-call\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Punctuation Section Embedded\",\"scope\":[\"punctuation.section.embedded\"],\"settings\":{\"foreground\":\"#b23834\"}},{\"name\":\"Punctuation Tweaks\",\"scope\":[\"punctuation.terminator.expression\",\"punctuation.definition.arguments\",\"punctuation.definition.array\",\"punctuation.section.array\",\"meta.array\"],\"settings\":{\"foreground\":\"#403f53\"}},{\"name\":\"More Punctuation Tweaks\",\"scope\":[\"punctuation.definition.list.begin\",\"punctuation.definition.list.end\",\"punctuation.separator.arguments\",\"punctuation.definition.list\"],\"settings\":{\"foreground\":\"#111111\"}},{\"name\":\"Template Strings\",\"scope\":[\"string.template meta.template.expression\"],\"settings\":{\"foreground\":\"#b23834\"}},{\"name\":\"Backtics(``) in Template Strings\",\"scope\":[\"string.template punctuation.definition.string\"],\"settings\":{\"foreground\":\"#403f53\"}},{\"name\":\"Italics\",\"scope\":[\"italic\"],\"settings\":{\"foreground\":\"#8844ae\",\"fontStyle\":\"italic\"}},{\"name\":\"Bold\",\"scope\":[\"bold\"],\"settings\":{\"foreground\":\"#3b61b0\",\"fontStyle\":\"bold\"}},{\"name\":\"Quote\",\"scope\":[\"quote\"],\"settings\":{\"foreground\":\"#5c6285\"}},{\"name\":\"Raw Code\",\"scope\":[\"raw\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"CoffeScript Variable Assignment\",\"scope\":[\"variable.assignment.coffee\"],\"settings\":{\"foreground\":\"#186e73\"}},{\"name\":\"CoffeScript Parameter Function\",\"scope\":[\"variable.parameter.function.coffee\"],\"settings\":{\"foreground\":\"#403f53\"}},{\"name\":\"CoffeeScript Assignments\",\"scope\":[\"variable.assignment.coffee\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"C# Readwrite Variables\",\"scope\":[\"variable.other.readwrite.cs\"],\"settings\":{\"foreground\":\"#403f53\"}},{\"name\":\"C# Classes & Storage types\",\"scope\":[\"entity.name.type.class.cs\",\"storage.type.cs\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"C# Namespaces\",\"scope\":[\"entity.name.type.namespace.cs\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"Tag names in Stylesheets\",\"scope\":[\"entity.name.tag.css\",\"entity.name.tag.less\",\"entity.name.tag.custom.css\",\"support.constant.property-value.css\"],\"settings\":{\"foreground\":\"#984e4d\",\"fontStyle\":\"\"}},{\"name\":\"Wildcard(*) selector in Stylesheets\",\"scope\":[\"entity.name.tag.wildcard.css\",\"entity.name.tag.wildcard.less\",\"entity.name.tag.wildcard.scss\",\"entity.name.tag.wildcard.sass\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"CSS Keyword Other Unit\",\"scope\":[\"keyword.other.unit.css\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Attribute Name for CSS\",\"scope\":[\"meta.attribute-selector.css entity.other.attribute-name.attribute\",\"variable.other.readwrite.js\"],\"settings\":{\"foreground\":\"#aa0982\"}},{\"name\":\"Elixir Classes\",\"scope\":[\"source.elixir support.type.elixir\",\"source.elixir meta.module.elixir entity.name.class.elixir\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Elixir Functions\",\"scope\":[\"source.elixir entity.name.function\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Elixir Constants\",\"scope\":[\"source.elixir constant.other.symbol.elixir\",\"source.elixir constant.other.keywords.elixir\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Elixir String Punctuations\",\"scope\":[\"source.elixir punctuation.definition.string\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Elixir\",\"scope\":[\"source.elixir variable.other.readwrite.module.elixir\",\"source.elixir variable.other.readwrite.module.elixir punctuation.definition.variable.elixir\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Elixir Binary Punctuations\",\"scope\":[\"source.elixir .punctuation.binary.elixir\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"Closure Constant Keyword\",\"scope\":[\"constant.keyword.clojure\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"Go Function Calls\",\"scope\":[\"source.go meta.function-call.go\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"Go Keywords\",\"scope\":[\"source.go keyword.package.go\",\"source.go keyword.import.go\",\"source.go keyword.function.go\",\"source.go keyword.type.go\",\"source.go keyword.struct.go\",\"source.go keyword.interface.go\",\"source.go keyword.const.go\",\"source.go keyword.var.go\",\"source.go keyword.map.go\",\"source.go keyword.channel.go\",\"source.go keyword.control.go\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"Go Constants e.g. nil, string format (%s, %d, etc.)\",\"scope\":[\"source.go constant.language.go\",\"source.go constant.other.placeholder.go\"],\"settings\":{\"foreground\":\"#a24848\"}},{\"name\":\"C++ Functions\",\"scope\":[\"entity.name.function.preprocessor.cpp\",\"entity.scope.name.cpp\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"C++ Meta Namespace\",\"scope\":[\"meta.namespace-block.cpp\"],\"settings\":{\"foreground\":\"#111111\"}},{\"name\":\"C++ Language Primitive Storage\",\"scope\":[\"storage.type.language.primitive.cpp\"],\"settings\":{\"foreground\":\"#a24848\"}},{\"name\":\"C++ Preprocessor Macro\",\"scope\":[\"meta.preprocessor.macro.cpp\"],\"settings\":{\"foreground\":\"#403f53\"}},{\"name\":\"C++ Variable Parameter\",\"scope\":[\"variable.parameter\"],\"settings\":{\"foreground\":\"#111111\"}},{\"name\":\"Powershell Variables\",\"scope\":[\"variable.other.readwrite.powershell\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Powershell Function\",\"scope\":[\"support.function.powershell\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"ID Attribute Name in HTML\",\"scope\":[\"entity.other.attribute-name.id.html\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"HTML Punctuation Definition Tag\",\"scope\":[\"punctuation.definition.tag.html\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"HTML Doctype\",\"scope\":[\"meta.tag.sgml.doctype.html\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"JavaScript Classes\",\"scope\":[\"meta.class entity.name.type.class.js\"],\"settings\":{\"foreground\":\"#111111\"}},{\"name\":\"JavaScript Method Declaration e.g. `constructor`\",\"scope\":[\"meta.method.declaration storage.type.js\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"JavaScript Terminator\",\"scope\":[\"terminator.js\"],\"settings\":{\"foreground\":\"#403f53\"}},{\"name\":\"JavaScript Meta Punctuation Definition\",\"scope\":[\"meta.js punctuation.definition.js\"],\"settings\":{\"foreground\":\"#403f53\"}},{\"name\":\"Entity Names in Code Documentations\",\"scope\":[\"entity.name.type.instance.jsdoc\",\"entity.name.type.instance.phpdoc\"],\"settings\":{\"foreground\":\"#4d667b\"}},{\"name\":\"Other Variables in Code Documentations\",\"scope\":[\"variable.other.jsdoc\",\"variable.other.phpdoc\"],\"settings\":{\"foreground\":\"#3e697c\"}},{\"name\":\"JavaScript module imports and exports\",\"scope\":[\"variable.other.meta.import.js\",\"meta.import.js variable.other\",\"variable.other.meta.export.js\",\"meta.export.js variable.other\"],\"settings\":{\"foreground\":\"#403f53\"}},{\"name\":\"JavaScript Variable Parameter Function\",\"scope\":[\"variable.parameter.function.js\"],\"settings\":{\"foreground\":\"#555ea2\"}},{\"name\":\"JavaScript[React] Variable Other Object\",\"scope\":[\"variable.other.object.js\",\"variable.other.object.jsx\",\"variable.object.property.js\",\"variable.object.property.jsx\"],\"settings\":{\"foreground\":\"#403f53\"}},{\"name\":\"JavaScript Variables\",\"scope\":[\"variable.js\",\"variable.other.js\"],\"settings\":{\"foreground\":\"#403f53\"}},{\"name\":\"JavaScript Entity Name Type\",\"scope\":[\"entity.name.type.js\",\"entity.name.type.module.js\"],\"settings\":{\"foreground\":\"#111111\",\"fontStyle\":\"\"}},{\"name\":\"JavaScript Support Classes\",\"scope\":[\"support.class.js\"],\"settings\":{\"foreground\":\"#403f53\"}},{\"name\":\"JSON Property Names\",\"scope\":[\"support.type.property-name.json\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"JSON Support Constants\",\"scope\":[\"support.constant.json\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"JSON Property values (string)\",\"scope\":[\"meta.structure.dictionary.value.json string.quoted.double\"],\"settings\":{\"foreground\":\"#7c5686\"}},{\"name\":\"Strings in JSON values\",\"scope\":[\"string.quoted.double.json punctuation.definition.string.json\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"Specific JSON Property values like null\",\"scope\":[\"meta.structure.dictionary.json meta.structure.dictionary.value constant.language\"],\"settings\":{\"foreground\":\"#a24848\"}},{\"name\":\"JavaScript Other Variable\",\"scope\":[\"variable.other.object.js\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"Ruby Variables\",\"scope\":[\"variable.other.ruby\"],\"settings\":{\"foreground\":\"#403f53\"}},{\"name\":\"Ruby Class\",\"scope\":[\"entity.name.type.class.ruby\"],\"settings\":{\"foreground\":\"#984e4d\"}},{\"name\":\"Ruby Hashkeys\",\"scope\":[\"constant.language.symbol.hashkey.ruby\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"Ruby Symbols\",\"scope\":[\"constant.language.symbol.ruby\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"LESS Tag names\",\"scope\":[\"entity.name.tag.less\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"LESS Keyword Other Unit\",\"scope\":[\"keyword.other.unit.css\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"Attribute Name for LESS\",\"scope\":[\"meta.attribute-selector.less entity.other.attribute-name.attribute\"],\"settings\":{\"foreground\":\"#aa0982\"}},{\"name\":\"Markdown Headings\",\"scope\":[\"markup.heading.markdown\",\"markup.heading.setext.1.markdown\",\"markup.heading.setext.2.markdown\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Markdown Italics\",\"scope\":[\"markup.italic.markdown\"],\"settings\":{\"foreground\":\"#8844ae\",\"fontStyle\":\"italic\"}},{\"name\":\"Markdown Bold\",\"scope\":[\"markup.bold.markdown\"],\"settings\":{\"foreground\":\"#3b61b0\",\"fontStyle\":\"bold\"}},{\"name\":\"Markdown Quote + others\",\"scope\":[\"markup.quote.markdown\"],\"settings\":{\"foreground\":\"#5c6285\"}},{\"name\":\"Markdown Raw Code + others\",\"scope\":[\"markup.inline.raw.markdown\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"Markdown Links\",\"scope\":[\"markup.underline.link.markdown\",\"markup.underline.link.image.markdown\"],\"settings\":{\"foreground\":\"#954f5a\",\"fontStyle\":\"underline\"}},{\"name\":\"Markdown Link Title and Description\",\"scope\":[\"string.other.link.title.markdown\",\"string.other.link.description.markdown\"],\"settings\":{\"foreground\":\"#403f53\",\"fontStyle\":\"underline\"}},{\"name\":\"Markdown Punctuation\",\"scope\":[\"punctuation.definition.string.markdown\",\"punctuation.definition.string.begin.markdown\",\"punctuation.definition.string.end.markdown\",\"meta.link.inline.markdown punctuation.definition.string\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Markdown MetaData Punctuation\",\"scope\":[\"punctuation.definition.metadata.markdown\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"Markdown List Punctuation\",\"scope\":[\"beginning.punctuation.definition.list.markdown\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Markdown Inline Raw String\",\"scope\":[\"markup.inline.raw.string.markdown\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"PHP Variables\",\"scope\":[\"variable.other.php\",\"variable.other.property.php\"],\"settings\":{\"foreground\":\"#111111\"}},{\"name\":\"Support Classes in PHP\",\"scope\":[\"support.class.php\"],\"settings\":{\"foreground\":\"#111111\"}},{\"name\":\"Punctuations in PHP function calls\",\"scope\":[\"meta.function-call.php punctuation\"],\"settings\":{\"foreground\":\"#403f53\"}},{\"name\":\"PHP Global Variables\",\"scope\":[\"variable.other.global.php\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Declaration Punctuation in PHP Global Variables\",\"scope\":[\"variable.other.global.php punctuation.definition.variable\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Language Constants in Python\",\"scope\":[\"constant.language.python\"],\"settings\":{\"foreground\":\"#a24848\"}},{\"name\":\"Python Function Parameter and Arguments\",\"scope\":[\"variable.parameter.function.python\",\"meta.function-call.arguments.python\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Python Function Call\",\"scope\":[\"meta.function-call.python\",\"meta.function-call.generic.python\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"Punctuations in Python\",\"scope\":[\"punctuation.python\"],\"settings\":{\"foreground\":\"#403f53\"}},{\"name\":\"Decorator Functions in Python\",\"scope\":[\"entity.name.function.decorator.python\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Python Language Variable\",\"scope\":[\"source.python variable.language.special\"],\"settings\":{\"foreground\":\"#aa0982\"}},{\"name\":\"Python import control keyword\",\"scope\":[\"keyword.control\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"SCSS Variable\",\"scope\":[\"variable.scss\",\"variable.sass\",\"variable.parameter.url.scss\",\"variable.parameter.url.sass\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Variables in SASS At-Rules\",\"scope\":[\"source.css.scss meta.at-rule variable\",\"source.css.sass meta.at-rule variable\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Variables in SASS At-Rules\",\"scope\":[\"source.css.scss meta.at-rule variable\",\"source.css.sass meta.at-rule variable\"],\"settings\":{\"foreground\":\"#111111\"}},{\"name\":\"Attribute Name for SASS\",\"scope\":[\"meta.attribute-selector.scss entity.other.attribute-name.attribute\",\"meta.attribute-selector.sass entity.other.attribute-name.attribute\"],\"settings\":{\"foreground\":\"#aa0982\"}},{\"name\":\"Tag names in SASS\",\"scope\":[\"entity.name.tag.scss\",\"entity.name.tag.sass\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"SASS Keyword Other Unit\",\"scope\":[\"keyword.other.unit.scss\",\"keyword.other.unit.sass\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"TypeScript[React] Variables and Object Properties\",\"scope\":[\"variable.other.readwrite.alias.ts\",\"variable.other.readwrite.alias.tsx\",\"variable.other.readwrite.ts\",\"variable.other.readwrite.tsx\",\"variable.other.object.ts\",\"variable.other.object.tsx\",\"variable.object.property.ts\",\"variable.object.property.tsx\",\"variable.other.ts\",\"variable.other.tsx\",\"variable.tsx\",\"variable.ts\"],\"settings\":{\"foreground\":\"#403f53\"}},{\"name\":\"TypeScript[React] Entity Name Types\",\"scope\":[\"entity.name.type.ts\",\"entity.name.type.tsx\"],\"settings\":{\"foreground\":\"#111111\"}},{\"name\":\"TypeScript[React] Node Classes\",\"scope\":[\"support.class.node.ts\",\"support.class.node.tsx\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"TypeScript[React] Entity Name Types as Parameters\",\"scope\":[\"meta.type.parameters.ts entity.name.type\",\"meta.type.parameters.tsx entity.name.type\"],\"settings\":{\"foreground\":\"#4d667b\"}},{\"name\":\"TypeScript[React] Import/Export Punctuations\",\"scope\":[\"meta.import.ts punctuation.definition.block\",\"meta.import.tsx punctuation.definition.block\",\"meta.export.ts punctuation.definition.block\",\"meta.export.tsx punctuation.definition.block\"],\"settings\":{\"foreground\":\"#403f53\"}},{\"name\":\"TypeScript[React] Punctuation Decorators\",\"scope\":[\"meta.decorator punctuation.decorator.ts\",\"meta.decorator punctuation.decorator.tsx\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"TypeScript[React] Punctuation Decorators\",\"scope\":[\"meta.tag.js meta.jsx.children.tsx\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"YAML Entity Name Tags\",\"scope\":[\"entity.name.tag.yaml\"],\"settings\":{\"foreground\":\"#111111\"}},{\"name\":\"JavaScript Variable Other ReadWrite\",\"scope\":[\"variable.other.readwrite.js\",\"variable.parameter\"],\"settings\":{\"foreground\":\"#403f53\"}},{\"name\":\"Support Class Component\",\"scope\":[\"support.class.component.js\",\"support.class.component.tsx\"],\"settings\":{\"foreground\":\"#aa0982\",\"fontStyle\":\"\"}},{\"name\":\"Text nested in React tags\",\"scope\":[\"meta.jsx.children\",\"meta.jsx.children.js\",\"meta.jsx.children.tsx\"],\"settings\":{\"foreground\":\"#403f53\"}},{\"name\":\"TypeScript Classes\",\"scope\":[\"meta.class entity.name.type.class.tsx\"],\"settings\":{\"foreground\":\"#111111\"}},{\"name\":\"TypeScript Entity Name Type\",\"scope\":[\"entity.name.type.tsx\",\"entity.name.type.module.tsx\"],\"settings\":{\"foreground\":\"#111111\"}},{\"name\":\"TypeScript Class Variable Keyword\",\"scope\":[\"meta.class.ts meta.var.expr.ts storage.type.ts\",\"meta.class.tsx meta.var.expr.tsx storage.type.tsx\"],\"settings\":{\"foreground\":\"#76578b\"}},{\"name\":\"TypeScript Method Declaration e.g. `constructor`\",\"scope\":[\"meta.method.declaration storage.type.ts\",\"meta.method.declaration storage.type.tsx\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"normalize font style of certain components\",\"scope\":[\"meta.property-list.css meta.property-value.css variable.other.less\",\"meta.property-list.scss variable.scss\",\"meta.property-list.sass variable.sass\",\"meta.brace\",\"keyword.operator.operator\",\"keyword.operator.or.regexp\",\"keyword.operator.expression.in\",\"keyword.operator.relational\",\"keyword.operator.assignment\",\"keyword.operator.comparison\",\"keyword.operator.type\",\"keyword.operator\",\"keyword\",\"punctuation.definintion.string\",\"punctuation\",\"variable.other.readwrite.js\",\"storage.type\",\"source.css\",\"string.quoted\"],\"settings\":{\"fontStyle\":\"\"}}],\"styleOverrides\":{\"frames\":{\"editorBackground\":\"var(--sl-color-gray-7)\",\"terminalBackground\":\"var(--sl-color-gray-7)\",\"editorActiveTabBackground\":\"var(--sl-color-gray-7)\",\"terminalTitlebarDotsForeground\":\"color-mix(in srgb, var(--sl-color-gray-5), transparent 25%)\",\"terminalTitlebarDotsOpacity\":\"0.75\",\"inlineButtonForeground\":\"var(--sl-color-text)\",\"frameBoxShadowCssValue\":\"none\"},\"textMarkers\":{\"markBackground\":\"#0000001a\",\"markBorderColor\":\"#00000055\"}}}],\"defaultLocale\":\"en\",\"cascadeLayer\":\"starlight.components\",\"styleOverrides\":{\"borderRadius\":\"0px\",\"borderWidth\":\"1px\",\"codePaddingBlock\":\"0.75rem\",\"codePaddingInline\":\"1rem\",\"codeFontFamily\":\"var(--__sl-font-mono)\",\"codeFontSize\":\"var(--sl-text-code)\",\"codeLineHeight\":\"var(--sl-line-height)\",\"uiFontFamily\":\"var(--__sl-font)\",\"textMarkers\":{\"lineDiffIndicatorMarginLeft\":\"0.25rem\",\"defaultChroma\":\"45\",\"backgroundOpacity\":\"60%\"}},\"plugins\":[{\"name\":\"Starlight Plugin\",\"hooks\":{}},{\"name\":\"astro-expressive-code\",\"hooks\":{}}]}]],\"remarkRehype\":{},\"gfm\":true,\"smartypants\":true},\"security\":{\"checkOrigin\":true,\"allowedDomains\":[],\"actionBodySizeLimit\":1048576},\"env\":{\"schema\":{},\"validateSecrets\":false},\"experimental\":{\"clientPrerender\":false,\"contentIntellisense\":false,\"headingIdCompat\":false,\"preserveScriptOrder\":false,\"liveContentCollections\":false,\"csp\":false,\"staticImportMetaEnv\":false,\"chromeDevtoolsWorkspace\":false,\"failOnPrerenderConflict\":false,\"svgo\":false},\"legacy\":{\"collections\":false},\"prefetch\":{\"prefetchAll\":true},\"i18n\":{\"defaultLocale\":\"en\",\"locales\":[{\"codes\":[\"en\"],\"path\":\"en\"},{\"codes\":[\"tr\"],\"path\":\"tr\"}],\"routing\":{\"prefixDefaultLocale\":false,\"redirectToDefaultLocale\":false,\"fallbackType\":\"redirect\"}}}","docs",["Map",11,12,62,63,102,103,133,134,157,158,192,193,225,226,265,266,297,298,329,330,366,367,394,395,423,424,467,468,495,496,544,545,578,579,607,608,650,651,682,683,714,715,747,748,776,777,815,816,860,861,894,895,926,927,958,959,1004,1005,1054,1055,1076,1077,1111,1112,1153,1154,1181,1182,1208,1209,1244,1245,1275,1276,1300,1301,1345,1346,1369,1370,1393,1394,1417,1418,1441,1442,1472,1473,1496,1497,1534,1535,1558,1559,1585,1586,1607,1608,1629,1630,1654,1655,1696,1697,1727,1728,1748,1749,1778,1779,1817,1818,1844,1845,1877,1878,1902,1903,1932,1933,1957,1958,1988,1989,2039,2040,2060,2061,2090,2091,2112,2113],"canvas-basics",{"id":11,"data":13,"body":22,"filePath":23,"digest":24,"rendered":25},{"title":14,"description":15,"editUrl":16,"head":17,"template":18,"sidebar":19,"pagefind":16,"draft":20},"Canvas Basics","Learn how to move, select, edit, and recover work on the OpenFlowKit canvas.",true,[],"doc",{"hidden":20,"attrs":21},false,{},"The canvas is the main editing surface in OpenFlowKit. It is optimized for desktop and larger-tablet workflows, with direct manipulation on the graph and exact edits in the side rails.\n\n## When to use the canvas\n\nUse the canvas when you want to:\n\n- sketch a diagram manually\n- refine something created by AI, imports, or code\n- inspect structure spatially instead of as text\n- move quickly between direct manipulation and inspector-based editing\n\n## Navigation\n\n### Pan and zoom\n\n- Mouse wheel zooms the canvas\n- `Space + Drag` pans\n- `H` switches to hand mode\n- `V` switches back to selection mode\n- `Shift + 1` fits the current graph in view\n- `Cmd/Ctrl + +/-` zooms in or out\n\n### Move around large diagrams\n\nFor large canvases, combine:\n\n- fit view to regain context\n- search from the Command Center to jump to named nodes\n- auto layout to re-establish readable structure\n\n## Selecting things\n\n### Single selection\n\nClick any node or edge to inspect and edit it.\n\n### Multi-selection\n\nUse either of these:\n\n- `Shift + Click`\n- `Shift + Drag` to draw a selection box\n\nWhen multiple nodes are selected, the right rail switches to **Bulk edit** mode.\n\n## Direct manipulation vs exact editing\n\nThe canvas is where you move, select, and compose the graph. For exact values and family-specific settings, switch to the [Properties Panel](/properties-panel/). For templates, search, layout, and workflow switching, use the [Command Center](/command-center/).\n\n## History and recovery\n\nUse regular undo/redo for short corrections and snapshots for larger rollback points. See [Playback & History](/playback-history/).","src/content/docs/canvas-basics.md","bddd6b0f04382e0f",{"html":26,"metadata":27},"\u003Cp>The canvas is the main editing surface in OpenFlowKit. It is optimized for desktop and larger-tablet workflows, with direct manipulation on the graph and exact edits in the side rails.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"when-to-use-the-canvas\">When to use the canvas\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#when-to-use-the-canvas\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “When to use the canvas”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Use the canvas when you want to:\u003C/p>\n\u003Cul>\n\u003Cli>sketch a diagram manually\u003C/li>\n\u003Cli>refine something created by AI, imports, or code\u003C/li>\n\u003Cli>inspect structure spatially instead of as text\u003C/li>\n\u003Cli>move quickly between direct manipulation and inspector-based editing\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"navigation\">Navigation\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#navigation\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Navigation”\u003C/span>\u003C/a>\u003C/div>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"pan-and-zoom\">Pan and zoom\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#pan-and-zoom\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Pan and zoom”\u003C/span>\u003C/a>\u003C/div>\n\u003Cul>\n\u003Cli>Mouse wheel zooms the canvas\u003C/li>\n\u003Cli>\u003Ccode dir=\"auto\">Space + Drag\u003C/code> pans\u003C/li>\n\u003Cli>\u003Ccode dir=\"auto\">H\u003C/code> switches to hand mode\u003C/li>\n\u003Cli>\u003Ccode dir=\"auto\">V\u003C/code> switches back to selection mode\u003C/li>\n\u003Cli>\u003Ccode dir=\"auto\">Shift + 1\u003C/code> fits the current graph in view\u003C/li>\n\u003Cli>\u003Ccode dir=\"auto\">Cmd/Ctrl + +/-\u003C/code> zooms in or out\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"move-around-large-diagrams\">Move around large diagrams\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#move-around-large-diagrams\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Move around large diagrams”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>For large canvases, combine:\u003C/p>\n\u003Cul>\n\u003Cli>fit view to regain context\u003C/li>\n\u003Cli>search from the Command Center to jump to named nodes\u003C/li>\n\u003Cli>auto layout to re-establish readable structure\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"selecting-things\">Selecting things\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#selecting-things\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Selecting things”\u003C/span>\u003C/a>\u003C/div>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"single-selection\">Single selection\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#single-selection\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Single selection”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Click any node or edge to inspect and edit it.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"multi-selection\">Multi-selection\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#multi-selection\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Multi-selection”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Use either of these:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Ccode dir=\"auto\">Shift + Click\u003C/code>\u003C/li>\n\u003Cli>\u003Ccode dir=\"auto\">Shift + Drag\u003C/code> to draw a selection box\u003C/li>\n\u003C/ul>\n\u003Cp>When multiple nodes are selected, the right rail switches to \u003Cstrong>Bulk edit\u003C/strong> mode.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"direct-manipulation-vs-exact-editing\">Direct manipulation vs exact editing\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#direct-manipulation-vs-exact-editing\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Direct manipulation vs exact editing”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>The canvas is where you move, select, and compose the graph. For exact values and family-specific settings, switch to the \u003Ca href=\"/properties-panel/\">Properties Panel\u003C/a>. For templates, search, layout, and workflow switching, use the \u003Ca href=\"/command-center/\">Command Center\u003C/a>.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"history-and-recovery\">History and recovery\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#history-and-recovery\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “History and recovery”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Use regular undo/redo for short corrections and snapshots for larger rollback points. See \u003Ca href=\"/playback-history/\">Playback &#x26; History\u003C/a>.\u003C/p>",{"headings":28,"localImagePaths":58,"remoteImagePaths":59,"frontmatter":60,"imagePaths":61},[29,33,36,40,43,46,49,52,55],{"depth":30,"slug":31,"text":32},2,"when-to-use-the-canvas","When to use the canvas",{"depth":30,"slug":34,"text":35},"navigation","Navigation",{"depth":37,"slug":38,"text":39},3,"pan-and-zoom","Pan and zoom",{"depth":37,"slug":41,"text":42},"move-around-large-diagrams","Move around large diagrams",{"depth":30,"slug":44,"text":45},"selecting-things","Selecting things",{"depth":37,"slug":47,"text":48},"single-selection","Single selection",{"depth":37,"slug":50,"text":51},"multi-selection","Multi-selection",{"depth":30,"slug":53,"text":54},"direct-manipulation-vs-exact-editing","Direct manipulation vs exact editing",{"depth":30,"slug":56,"text":57},"history-and-recovery","History and recovery",[],[],{"draft":20,"title":14,"description":15},[],"ai-generation",{"id":62,"data":64,"body":70,"filePath":71,"digest":72,"rendered":73},{"title":65,"description":66,"editUrl":16,"head":67,"template":18,"sidebar":68,"pagefind":16,"draft":20},"AI Generation","Generate and refine diagrams in Studio with FlowPilot, BYOK providers, code-to-architecture, and structured imports.",[],{"hidden":20,"attrs":69},{},"OpenFlowKit includes AI-assisted diagram generation through the Studio rail. FlowPilot is best used for first drafts, structural revisions, and code-backed architecture exploration.\n\nAI generation is most valuable when you need to go from ambiguity to structure quickly. It is not the only way to create diagrams in OpenFlowKit, and it is usually not the final step. Think of it as a draft accelerator.\n\n## Where AI lives in the product\n\nAI is available in the Studio panel under **FlowPilot** and through the **Open FlowPilot** command in the Command Center. Common sub-flows include:\n\n| Mode | What it does |\n| --- | --- |\n| **FlowPilot** | Chat-based generation and iteration |\n| **From Code** | Paste source code and generate an architecture diagram |\n| **Import** | Paste SQL, Terraform, K8s, or OpenAPI and generate a draft |\n\nTypical generation flow:\n\n1. capture your prompt and optional image\n2. send it through the configured provider\n3. receive a structured graph representation\n4. compose nodes and edges\n5. apply layout\n6. replace or update the current graph\n\n## Provider model\n\nThe app supports multiple BYOK providers, including:\n\n- Gemini\n- OpenAI\n- Claude\n- Groq\n- NVIDIA\n- Cerebras\n- Mistral\n- OpenRouter\n- Custom OpenAI-compatible endpoint\n\nThis matters because you are not locked to one hosted AI vendor or one billing model.\n\n## When AI is the right tool\n\nUse AI when:\n\n- you are starting from a plain-language idea\n- you want a fast first-pass architecture or workflow draft\n- you want to revise an existing diagram conceptually rather than move boxes one by one\n- you have source code and want a generated architecture view\n\nAvoid AI when:\n\n- you already have a precise text format such as Mermaid or OpenFlow DSL\n- you need deterministic output from infrastructure files\n- the diagram is small enough that manual editing is faster\n\nIn those cases, prefer [OpenFlow DSL](/openflow-dsl/), [Mermaid Integration](/mermaid-integration/), or [Infrastructure Sync](/infra-sync/).\n\n## How to get better results\n\nStrong prompts usually include:\n\n- the intended audience\n- the systems or actors involved\n- important branches or failure paths\n- the preferred diagram direction\n- the level of detail you want\n\nWeak prompts ask for “a diagram” without constraints. Strong prompts explain the system.\n\n## Recommended workflow\n\n1. Generate a first draft with FlowPilot.\n2. Inspect the structure on the canvas.\n3. Use the [Properties Panel](/properties-panel/) to normalize labels, color, and routing.\n4. Run [Smart Layout](/smart-layout/) if the structure is right but spacing is poor.\n5. Save a snapshot before another major rewrite.\n\n## Practical caution\n\nAI output should be treated as a draft, not a certified system model. For documentation, architecture review, or infra communication, you should still check naming, boundaries, and missing branches before exporting or sharing.\n\n## Related pages\n\n- [Ask FlowPilot](/ask-flowpilot/)\n- [Studio Overview](/studio-overview/)\n- [Choose an Input Mode](/choose-input-mode/)\n- [Prompting AI Agents](/prompting-agents/)","src/content/docs/ai-generation.md","176e8d654f1cf25c",{"html":74,"metadata":75},"\u003Cp>OpenFlowKit includes AI-assisted diagram generation through the Studio rail. FlowPilot is best used for first drafts, structural revisions, and code-backed architecture exploration.\u003C/p>\n\u003Cp>AI generation is most valuable when you need to go from ambiguity to structure quickly. It is not the only way to create diagrams in OpenFlowKit, and it is usually not the final step. Think of it as a draft accelerator.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"where-ai-lives-in-the-product\">Where AI lives in the product\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#where-ai-lives-in-the-product\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Where AI lives in the product”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>AI is available in the Studio panel under \u003Cstrong>FlowPilot\u003C/strong> and through the \u003Cstrong>Open FlowPilot\u003C/strong> command in the Command Center. Common sub-flows include:\u003C/p>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>Mode\u003C/th>\u003Cth>What it does\u003C/th>\u003C/tr>\u003C/thead>\u003Ctbody>\u003Ctr>\u003Ctd>\u003Cstrong>FlowPilot\u003C/strong>\u003C/td>\u003Ctd>Chat-based generation and iteration\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Cstrong>From Code\u003C/strong>\u003C/td>\u003Ctd>Paste source code and generate an architecture diagram\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Cstrong>Import\u003C/strong>\u003C/td>\u003Ctd>Paste SQL, Terraform, K8s, or OpenAPI and generate a draft\u003C/td>\u003C/tr>\u003C/tbody>\u003C/table>\n\u003Cp>Typical generation flow:\u003C/p>\n\u003Col>\n\u003Cli>capture your prompt and optional image\u003C/li>\n\u003Cli>send it through the configured provider\u003C/li>\n\u003Cli>receive a structured graph representation\u003C/li>\n\u003Cli>compose nodes and edges\u003C/li>\n\u003Cli>apply layout\u003C/li>\n\u003Cli>replace or update the current graph\u003C/li>\n\u003C/ol>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"provider-model\">Provider model\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#provider-model\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Provider model”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>The app supports multiple BYOK providers, including:\u003C/p>\n\u003Cul>\n\u003Cli>Gemini\u003C/li>\n\u003Cli>OpenAI\u003C/li>\n\u003Cli>Claude\u003C/li>\n\u003Cli>Groq\u003C/li>\n\u003Cli>NVIDIA\u003C/li>\n\u003Cli>Cerebras\u003C/li>\n\u003Cli>Mistral\u003C/li>\n\u003Cli>OpenRouter\u003C/li>\n\u003Cli>Custom OpenAI-compatible endpoint\u003C/li>\n\u003C/ul>\n\u003Cp>This matters because you are not locked to one hosted AI vendor or one billing model.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"when-ai-is-the-right-tool\">When AI is the right tool\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#when-ai-is-the-right-tool\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “When AI is the right tool”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Use AI when:\u003C/p>\n\u003Cul>\n\u003Cli>you are starting from a plain-language idea\u003C/li>\n\u003Cli>you want a fast first-pass architecture or workflow draft\u003C/li>\n\u003Cli>you want to revise an existing diagram conceptually rather than move boxes one by one\u003C/li>\n\u003Cli>you have source code and want a generated architecture view\u003C/li>\n\u003C/ul>\n\u003Cp>Avoid AI when:\u003C/p>\n\u003Cul>\n\u003Cli>you already have a precise text format such as Mermaid or OpenFlow DSL\u003C/li>\n\u003Cli>you need deterministic output from infrastructure files\u003C/li>\n\u003Cli>the diagram is small enough that manual editing is faster\u003C/li>\n\u003C/ul>\n\u003Cp>In those cases, prefer \u003Ca href=\"/openflow-dsl/\">OpenFlow DSL\u003C/a>, \u003Ca href=\"/mermaid-integration/\">Mermaid Integration\u003C/a>, or \u003Ca href=\"/infra-sync/\">Infrastructure Sync\u003C/a>.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"how-to-get-better-results\">How to get better results\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#how-to-get-better-results\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “How to get better results”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Strong prompts usually include:\u003C/p>\n\u003Cul>\n\u003Cli>the intended audience\u003C/li>\n\u003Cli>the systems or actors involved\u003C/li>\n\u003Cli>important branches or failure paths\u003C/li>\n\u003Cli>the preferred diagram direction\u003C/li>\n\u003Cli>the level of detail you want\u003C/li>\n\u003C/ul>\n\u003Cp>Weak prompts ask for “a diagram” without constraints. Strong prompts explain the system.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"recommended-workflow\">Recommended workflow\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#recommended-workflow\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Recommended workflow”\u003C/span>\u003C/a>\u003C/div>\n\u003Col>\n\u003Cli>Generate a first draft with FlowPilot.\u003C/li>\n\u003Cli>Inspect the structure on the canvas.\u003C/li>\n\u003Cli>Use the \u003Ca href=\"/properties-panel/\">Properties Panel\u003C/a> to normalize labels, color, and routing.\u003C/li>\n\u003Cli>Run \u003Ca href=\"/smart-layout/\">Smart Layout\u003C/a> if the structure is right but spacing is poor.\u003C/li>\n\u003Cli>Save a snapshot before another major rewrite.\u003C/li>\n\u003C/ol>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"practical-caution\">Practical caution\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#practical-caution\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Practical caution”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>AI output should be treated as a draft, not a certified system model. For documentation, architecture review, or infra communication, you should still check naming, boundaries, and missing branches before exporting or sharing.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"related-pages\">Related pages\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#related-pages\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Related pages”\u003C/span>\u003C/a>\u003C/div>\n\u003Cul>\n\u003Cli>\u003Ca href=\"/ask-flowpilot/\">Ask FlowPilot\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"/studio-overview/\">Studio Overview\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"/choose-input-mode/\">Choose an Input Mode\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"/prompting-agents/\">Prompting AI Agents\u003C/a>\u003C/li>\n\u003C/ul>",{"headings":76,"localImagePaths":98,"remoteImagePaths":99,"frontmatter":100,"imagePaths":101},[77,80,83,86,89,92,95],{"depth":30,"slug":78,"text":79},"where-ai-lives-in-the-product","Where AI lives in the product",{"depth":30,"slug":81,"text":82},"provider-model","Provider model",{"depth":30,"slug":84,"text":85},"when-ai-is-the-right-tool","When AI is the right tool",{"depth":30,"slug":87,"text":88},"how-to-get-better-results","How to get better results",{"depth":30,"slug":90,"text":91},"recommended-workflow","Recommended workflow",{"depth":30,"slug":93,"text":94},"practical-caution","Practical caution",{"depth":30,"slug":96,"text":97},"related-pages","Related pages",[],[],{"draft":20,"title":65,"description":66},[],"choose-input-mode",{"id":102,"data":104,"body":110,"filePath":111,"digest":112,"rendered":113},{"title":105,"description":106,"editUrl":16,"head":107,"template":18,"sidebar":108,"pagefind":16,"draft":20},"Choose an Input Mode","Decide when to use the canvas, AI, OpenFlow DSL, Mermaid, structured imports, or Infrastructure Sync.",[],{"hidden":20,"attrs":109},{},"OpenFlowKit supports multiple ways to create a diagram. The right choice depends on what you already have and how much control or determinism you need.\n\n## Quick guide\n\n| If you have... | Start with... |\n| --- | --- |\n| a rough idea | [AI Generation](/ai-generation/) |\n| a diagram you want to sketch manually | [Canvas Basics](/canvas-basics/) |\n| editor-native text you want to control precisely | [OpenFlow DSL](/openflow-dsl/) |\n| Mermaid already used elsewhere | [Mermaid Integration](/mermaid-integration/) |\n| SQL, OpenAPI, Terraform, or K8s source text | [Import from Structured Data](/import-from-data/) |\n| infra files you want parsed deterministically | [Infrastructure Sync](/infra-sync/) |\n\n## Rules of thumb\n\n- Choose AI for speed and ideation.\n- Choose OpenFlow DSL for editor-native precision.\n- Choose Mermaid for ecosystem compatibility.\n- Choose structured import when a source artifact already exists.\n- Choose Infra Sync when you want deterministic, non-AI parsing of supported infra inputs.\n\n## Common mistakes\n\n- Using AI when you already have a precise source artifact.\n- Using Mermaid as the editing master when fidelity inside OpenFlowKit matters more.\n- Redrawing infrastructure manually when the source files already exist.\n\n## Recommended pattern\n\nStart with the most structured truthful input you already have. Only move to a looser mode such as AI when the stronger input does not exist.","src/content/docs/choose-input-mode.md","f1816b676f8aaf08",{"html":114,"metadata":115},"\u003Cp>OpenFlowKit supports multiple ways to create a diagram. The right choice depends on what you already have and how much control or determinism you need.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"quick-guide\">Quick guide\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#quick-guide\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Quick guide”\u003C/span>\u003C/a>\u003C/div>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>If you have…\u003C/th>\u003Cth>Start with…\u003C/th>\u003C/tr>\u003C/thead>\u003Ctbody>\u003Ctr>\u003Ctd>a rough idea\u003C/td>\u003Ctd>\u003Ca href=\"/ai-generation/\">AI Generation\u003C/a>\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>a diagram you want to sketch manually\u003C/td>\u003Ctd>\u003Ca href=\"/canvas-basics/\">Canvas Basics\u003C/a>\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>editor-native text you want to control precisely\u003C/td>\u003Ctd>\u003Ca href=\"/openflow-dsl/\">OpenFlow DSL\u003C/a>\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>Mermaid already used elsewhere\u003C/td>\u003Ctd>\u003Ca href=\"/mermaid-integration/\">Mermaid Integration\u003C/a>\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>SQL, OpenAPI, Terraform, or K8s source text\u003C/td>\u003Ctd>\u003Ca href=\"/import-from-data/\">Import from Structured Data\u003C/a>\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>infra files you want parsed deterministically\u003C/td>\u003Ctd>\u003Ca href=\"/infra-sync/\">Infrastructure Sync\u003C/a>\u003C/td>\u003C/tr>\u003C/tbody>\u003C/table>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"rules-of-thumb\">Rules of thumb\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#rules-of-thumb\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Rules of thumb”\u003C/span>\u003C/a>\u003C/div>\n\u003Cul>\n\u003Cli>Choose AI for speed and ideation.\u003C/li>\n\u003Cli>Choose OpenFlow DSL for editor-native precision.\u003C/li>\n\u003Cli>Choose Mermaid for ecosystem compatibility.\u003C/li>\n\u003Cli>Choose structured import when a source artifact already exists.\u003C/li>\n\u003Cli>Choose Infra Sync when you want deterministic, non-AI parsing of supported infra inputs.\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"common-mistakes\">Common mistakes\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#common-mistakes\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Common mistakes”\u003C/span>\u003C/a>\u003C/div>\n\u003Cul>\n\u003Cli>Using AI when you already have a precise source artifact.\u003C/li>\n\u003Cli>Using Mermaid as the editing master when fidelity inside OpenFlowKit matters more.\u003C/li>\n\u003Cli>Redrawing infrastructure manually when the source files already exist.\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"recommended-pattern\">Recommended pattern\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#recommended-pattern\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Recommended pattern”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Start with the most structured truthful input you already have. Only move to a looser mode such as AI when the stronger input does not exist.\u003C/p>",{"headings":116,"localImagePaths":129,"remoteImagePaths":130,"frontmatter":131,"imagePaths":132},[117,120,123,126],{"depth":30,"slug":118,"text":119},"quick-guide","Quick guide",{"depth":30,"slug":121,"text":122},"rules-of-thumb","Rules of thumb",{"depth":30,"slug":124,"text":125},"common-mistakes","Common mistakes",{"depth":30,"slug":127,"text":128},"recommended-pattern","Recommended pattern",[],[],{"draft":20,"title":105,"description":106},[],"choose-export-format",{"id":133,"data":135,"body":141,"filePath":142,"digest":143,"rendered":144},{"title":136,"description":137,"editUrl":16,"head":138,"template":18,"sidebar":139,"pagefind":16,"draft":20},"Choose an Export Format","Pick the right OpenFlowKit export format for editing, docs, collaboration, embeds, or design-tool handoff.",[],{"hidden":20,"attrs":140},{},"OpenFlowKit supports both visual exports and editable handoff formats. The right format depends on what happens next.\n\n## Quick guide\n\n| Need | Best format |\n| --- | --- |\n| editable archival backup | JSON |\n| editor-native text | OpenFlow DSL |\n| Markdown or repo-friendly text | Mermaid |\n| docs, slides, or tickets | PNG, JPG, or SVG |\n| design-tool handoff | Figma |\n| short playback artifact | GIF or video |\n| live viewer or room access | Share / Embed |\n\n## Rules of thumb\n\n- Use JSON when fidelity matters most.\n- Use OpenFlow DSL when OpenFlowKit remains the editing home.\n- Use Mermaid when another docs or repo workflow expects Mermaid.\n- Use SVG when you need scalable vector output.\n- Use PNG or JPG for lightweight visual sharing.\n- Use share/embed when the diagram should remain interactive.\n\n## Default recommendation\n\nIf you want a safe pattern, keep:\n\n- JSON as the editable master\n- a visual export for presentation\n- Mermaid or DSL only when another text-based workflow needs it","src/content/docs/choose-export-format.md","dc2a49e75ed84600",{"html":145,"metadata":146},"\u003Cp>OpenFlowKit supports both visual exports and editable handoff formats. The right format depends on what happens next.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"quick-guide\">Quick guide\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#quick-guide\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Quick guide”\u003C/span>\u003C/a>\u003C/div>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>Need\u003C/th>\u003Cth>Best format\u003C/th>\u003C/tr>\u003C/thead>\u003Ctbody>\u003Ctr>\u003Ctd>editable archival backup\u003C/td>\u003Ctd>JSON\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>editor-native text\u003C/td>\u003Ctd>OpenFlow DSL\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>Markdown or repo-friendly text\u003C/td>\u003Ctd>Mermaid\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>docs, slides, or tickets\u003C/td>\u003Ctd>PNG, JPG, or SVG\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>design-tool handoff\u003C/td>\u003Ctd>Figma\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>short playback artifact\u003C/td>\u003Ctd>GIF or video\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>live viewer or room access\u003C/td>\u003Ctd>Share / Embed\u003C/td>\u003C/tr>\u003C/tbody>\u003C/table>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"rules-of-thumb\">Rules of thumb\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#rules-of-thumb\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Rules of thumb”\u003C/span>\u003C/a>\u003C/div>\n\u003Cul>\n\u003Cli>Use JSON when fidelity matters most.\u003C/li>\n\u003Cli>Use OpenFlow DSL when OpenFlowKit remains the editing home.\u003C/li>\n\u003Cli>Use Mermaid when another docs or repo workflow expects Mermaid.\u003C/li>\n\u003Cli>Use SVG when you need scalable vector output.\u003C/li>\n\u003Cli>Use PNG or JPG for lightweight visual sharing.\u003C/li>\n\u003Cli>Use share/embed when the diagram should remain interactive.\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"default-recommendation\">Default recommendation\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#default-recommendation\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Default recommendation”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>If you want a safe pattern, keep:\u003C/p>\n\u003Cul>\n\u003Cli>JSON as the editable master\u003C/li>\n\u003Cli>a visual export for presentation\u003C/li>\n\u003Cli>Mermaid or DSL only when another text-based workflow needs it\u003C/li>\n\u003C/ul>",{"headings":147,"localImagePaths":153,"remoteImagePaths":154,"frontmatter":155,"imagePaths":156},[148,149,150],{"depth":30,"slug":118,"text":119},{"depth":30,"slug":121,"text":122},{"depth":30,"slug":151,"text":152},"default-recommendation","Default recommendation",[],[],{"draft":20,"title":136,"description":137},[],"architecture-lint",{"id":157,"data":159,"body":165,"filePath":166,"digest":167,"rendered":168},{"title":160,"description":161,"editUrl":16,"head":162,"template":18,"sidebar":163,"pagefind":16,"draft":20},"Architecture Linting","Define JSON-based architecture rules in Studio and highlight diagram violations in real time.",[],{"hidden":20,"attrs":164},{},"Architecture Linting lets you define rules that catch violations directly on the canvas. It is the closest thing OpenFlowKit has to diagram linting for system design.\n\n## Where it lives\n\nOpen Studio and switch to the **Lint** tab.\n\n## What it does\n\nThe lint panel lets you:\n\n- paste or edit JSON-based rules\n- save and clear rule sets\n- see parse errors in the rule file\n- review live violations with error, warning, or info severity\n\nViolations are surfaced while you work, so the diagram becomes something you can validate, not just draw.\n\n## Why this matters\n\nMany diagrams are only descriptive. Architecture linting makes them evaluative as well. That is useful when the diagram represents real constraints, such as:\n\n- a frontend should not talk directly to a database\n- only certain services should cross a trust boundary\n- an imported topology should still conform to platform rules\n\n## Practical workflow\n\n1. Draft or import the diagram.\n2. Open Studio → **Lint**.\n3. Add or paste the rule JSON.\n4. Save rules and review violations.\n5. Fix the diagram and re-check until the rules pass.\n\n## Best use cases\n\n- architecture review\n- governance for platform diagrams\n- validating diagrams created from infrastructure sync\n- checking that large AI-assisted revisions did not break intended boundaries\n\n## Related pages\n\n- [Studio Overview](/studio-overview/)\n- [Infrastructure Sync](/infra-sync/)\n- [Diagram Diff & Compare](/diagram-diff/)","src/content/docs/architecture-lint.md","490a31346eb06e14",{"html":169,"metadata":170},"\u003Cp>Architecture Linting lets you define rules that catch violations directly on the canvas. It is the closest thing OpenFlowKit has to diagram linting for system design.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"where-it-lives\">Where it lives\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#where-it-lives\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Where it lives”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Open Studio and switch to the \u003Cstrong>Lint\u003C/strong> tab.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"what-it-does\">What it does\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#what-it-does\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “What it does”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>The lint panel lets you:\u003C/p>\n\u003Cul>\n\u003Cli>paste or edit JSON-based rules\u003C/li>\n\u003Cli>save and clear rule sets\u003C/li>\n\u003Cli>see parse errors in the rule file\u003C/li>\n\u003Cli>review live violations with error, warning, or info severity\u003C/li>\n\u003C/ul>\n\u003Cp>Violations are surfaced while you work, so the diagram becomes something you can validate, not just draw.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"why-this-matters\">Why this matters\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#why-this-matters\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Why this matters”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Many diagrams are only descriptive. Architecture linting makes them evaluative as well. That is useful when the diagram represents real constraints, such as:\u003C/p>\n\u003Cul>\n\u003Cli>a frontend should not talk directly to a database\u003C/li>\n\u003Cli>only certain services should cross a trust boundary\u003C/li>\n\u003Cli>an imported topology should still conform to platform rules\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"practical-workflow\">Practical workflow\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#practical-workflow\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Practical workflow”\u003C/span>\u003C/a>\u003C/div>\n\u003Col>\n\u003Cli>Draft or import the diagram.\u003C/li>\n\u003Cli>Open Studio → \u003Cstrong>Lint\u003C/strong>.\u003C/li>\n\u003Cli>Add or paste the rule JSON.\u003C/li>\n\u003Cli>Save rules and review violations.\u003C/li>\n\u003Cli>Fix the diagram and re-check until the rules pass.\u003C/li>\n\u003C/ol>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"best-use-cases\">Best use cases\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#best-use-cases\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Best use cases”\u003C/span>\u003C/a>\u003C/div>\n\u003Cul>\n\u003Cli>architecture review\u003C/li>\n\u003Cli>governance for platform diagrams\u003C/li>\n\u003Cli>validating diagrams created from infrastructure sync\u003C/li>\n\u003Cli>checking that large AI-assisted revisions did not break intended boundaries\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"related-pages\">Related pages\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#related-pages\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Related pages”\u003C/span>\u003C/a>\u003C/div>\n\u003Cul>\n\u003Cli>\u003Ca href=\"/studio-overview/\">Studio Overview\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"/infra-sync/\">Infrastructure Sync\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"/diagram-diff/\">Diagram Diff &#x26; Compare\u003C/a>\u003C/li>\n\u003C/ul>",{"headings":171,"localImagePaths":188,"remoteImagePaths":189,"frontmatter":190,"imagePaths":191},[172,175,178,181,184,187],{"depth":30,"slug":173,"text":174},"where-it-lives","Where it lives",{"depth":30,"slug":176,"text":177},"what-it-does","What it does",{"depth":30,"slug":179,"text":180},"why-this-matters","Why this matters",{"depth":30,"slug":182,"text":183},"practical-workflow","Practical workflow",{"depth":30,"slug":185,"text":186},"best-use-cases","Best use cases",{"depth":30,"slug":96,"text":97},[],[],{"draft":20,"title":160,"description":161},[],"design-systems-branding",{"id":192,"data":194,"body":200,"filePath":201,"digest":202,"rendered":203},{"title":195,"description":196,"editUrl":16,"head":197,"template":18,"sidebar":198,"pagefind":16,"draft":20},"Design Systems & Branding","Manage reusable design systems in OpenFlowKit and import or export theme definitions for consistent diagrams.",[],{"hidden":20,"attrs":199},{},"OpenFlowKit includes design-system support so your diagrams can inherit a repeatable visual language instead of being styled one by one.\n\n## What the design-system flow supports\n\nFrom the Command Center you can:\n\n- switch the active design system\n- create a new theme from an existing base\n- duplicate and edit themes\n- import theme JSON\n- export the active theme\n\nThis is the right workflow when consistency matters as much as diagram correctness.\n\n## When to use it\n\nUse design systems when:\n\n- multiple diagrams should share a consistent look\n- your team has visual standards you want to reuse\n- you want architecture, workflow, and product diagrams to feel like one system\n- you need to package diagram styling as something reusable instead of manual\n\n## Import and export\n\nThe design-system view supports JSON import and export. That makes it possible to:\n\n- move a theme between environments\n- create branded variants\n- version visual settings outside the current session\n\n## Relationship to Figma\n\nFigma style import is a related workflow. Use it when you want to fetch colors and text styles from a Figma file and apply them to a design system inside OpenFlowKit.\n\n## Recommended pattern\n\nKeep one stable default theme for everyday work and create variants only when the audience or brand needs are genuinely different. Too many themes usually create inconsistency instead of flexibility.\n\n## Related pages\n\n- [Figma Design Import](/figma-design-import/)\n- [Templates & Starter Flows](/templates-assets/)\n- [Command Center](/command-center/)","src/content/docs/design-systems-branding.md","e609f8b0aa7d939a",{"html":204,"metadata":205},"\u003Cp>OpenFlowKit includes design-system support so your diagrams can inherit a repeatable visual language instead of being styled one by one.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"what-the-design-system-flow-supports\">What the design-system flow supports\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#what-the-design-system-flow-supports\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “What the design-system flow supports”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>From the Command Center you can:\u003C/p>\n\u003Cul>\n\u003Cli>switch the active design system\u003C/li>\n\u003Cli>create a new theme from an existing base\u003C/li>\n\u003Cli>duplicate and edit themes\u003C/li>\n\u003Cli>import theme JSON\u003C/li>\n\u003Cli>export the active theme\u003C/li>\n\u003C/ul>\n\u003Cp>This is the right workflow when consistency matters as much as diagram correctness.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"when-to-use-it\">When to use it\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#when-to-use-it\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “When to use it”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Use design systems when:\u003C/p>\n\u003Cul>\n\u003Cli>multiple diagrams should share a consistent look\u003C/li>\n\u003Cli>your team has visual standards you want to reuse\u003C/li>\n\u003Cli>you want architecture, workflow, and product diagrams to feel like one system\u003C/li>\n\u003Cli>you need to package diagram styling as something reusable instead of manual\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"import-and-export\">Import and export\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#import-and-export\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Import and export”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>The design-system view supports JSON import and export. That makes it possible to:\u003C/p>\n\u003Cul>\n\u003Cli>move a theme between environments\u003C/li>\n\u003Cli>create branded variants\u003C/li>\n\u003Cli>version visual settings outside the current session\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"relationship-to-figma\">Relationship to Figma\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#relationship-to-figma\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Relationship to Figma”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Figma style import is a related workflow. Use it when you want to fetch colors and text styles from a Figma file and apply them to a design system inside OpenFlowKit.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"recommended-pattern\">Recommended pattern\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#recommended-pattern\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Recommended pattern”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Keep one stable default theme for everyday work and create variants only when the audience or brand needs are genuinely different. Too many themes usually create inconsistency instead of flexibility.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"related-pages\">Related pages\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#related-pages\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Related pages”\u003C/span>\u003C/a>\u003C/div>\n\u003Cul>\n\u003Cli>\u003Ca href=\"/figma-design-import/\">Figma Design Import\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"/templates-assets/\">Templates &#x26; Starter Flows\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"/command-center/\">Command Center\u003C/a>\u003C/li>\n\u003C/ul>",{"headings":206,"localImagePaths":221,"remoteImagePaths":222,"frontmatter":223,"imagePaths":224},[207,210,213,216,219,220],{"depth":30,"slug":208,"text":209},"what-the-design-system-flow-supports","What the design-system flow supports",{"depth":30,"slug":211,"text":212},"when-to-use-it","When to use it",{"depth":30,"slug":214,"text":215},"import-and-export","Import and export",{"depth":30,"slug":217,"text":218},"relationship-to-figma","Relationship to Figma",{"depth":30,"slug":127,"text":128},{"depth":30,"slug":96,"text":97},[],[],{"draft":20,"title":195,"description":196},[],"command-center",{"id":225,"data":227,"body":233,"filePath":234,"digest":235,"rendered":236},{"title":228,"description":229,"editUrl":16,"head":230,"template":18,"sidebar":231,"pagefind":16,"draft":20},"Command Center","Use the keyboard-first launcher to search, insert assets, start templates, switch into Studio, and run layout or design-system actions.",[],{"hidden":20,"attrs":232},{},"The Command Center is the keyboard-first launcher for the editor. It opens as a floating panel and is the fastest way to move between assets, templates, search, layout, and Studio actions.\n\n> [!NOTE]\n> Open it with `Cmd + K` on macOS or `Ctrl + K` on Windows/Linux.\n\n## Root commands\n\nThe top-level command list includes actions such as:\n\n- Open FlowPilot\n- Edit Flow DSL\n- Edit Mermaid Code\n- Assets\n- Search Nodes\n- Auto Layout\n- Start from Template\n- Design Systems\n\nPlayback-related entries may also appear when the relevant playback surface is active in the current product path.\n\n## Views inside the Command Center\n\n### Assets\n\nUse this to insert:\n\n- sticky notes\n- text blocks\n- sections\n- journey nodes\n- mind map nodes\n- architecture nodes\n- uploaded images\n- browser wireframes\n- mobile wireframes\n\n### Templates\n\nUse templates when you want a proven starting structure instead of a blank canvas.\n\n### Search\n\nUse search to jump to named nodes in larger diagrams.\n\n### Design Systems\n\nUse Design Systems to switch themes, duplicate them, edit them, or import/export theme JSON.\n\n## How it fits with the rest of the editor\n\nThe Command Center is the fastest bridge between the canvas and Studio:\n\n- use the canvas for direct manipulation\n- use the inspector for exact edits\n- use the Command Center for navigation, search, layout, templates, assets, and workflow switching","src/content/docs/command-center.md","099f8d200db010ac",{"html":237,"metadata":238},"\u003Cp>The Command Center is the keyboard-first launcher for the editor. It opens as a floating panel and is the fastest way to move between assets, templates, search, layout, and Studio actions.\u003C/p>\n\u003Cblockquote>\n\u003Cp>[!NOTE]\nOpen it with \u003Ccode dir=\"auto\">Cmd + K\u003C/code> on macOS or \u003Ccode dir=\"auto\">Ctrl + K\u003C/code> on Windows/Linux.\u003C/p>\n\u003C/blockquote>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"root-commands\">Root commands\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#root-commands\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Root commands”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>The top-level command list includes actions such as:\u003C/p>\n\u003Cul>\n\u003Cli>Open FlowPilot\u003C/li>\n\u003Cli>Edit Flow DSL\u003C/li>\n\u003Cli>Edit Mermaid Code\u003C/li>\n\u003Cli>Assets\u003C/li>\n\u003Cli>Search Nodes\u003C/li>\n\u003Cli>Auto Layout\u003C/li>\n\u003Cli>Start from Template\u003C/li>\n\u003Cli>Design Systems\u003C/li>\n\u003C/ul>\n\u003Cp>Playback-related entries may also appear when the relevant playback surface is active in the current product path.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"views-inside-the-command-center\">Views inside the Command Center\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#views-inside-the-command-center\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Views inside the Command Center”\u003C/span>\u003C/a>\u003C/div>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"assets\">Assets\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#assets\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Assets”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Use this to insert:\u003C/p>\n\u003Cul>\n\u003Cli>sticky notes\u003C/li>\n\u003Cli>text blocks\u003C/li>\n\u003Cli>sections\u003C/li>\n\u003Cli>journey nodes\u003C/li>\n\u003Cli>mind map nodes\u003C/li>\n\u003Cli>architecture nodes\u003C/li>\n\u003Cli>uploaded images\u003C/li>\n\u003Cli>browser wireframes\u003C/li>\n\u003Cli>mobile wireframes\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"templates\">Templates\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#templates\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Templates”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Use templates when you want a proven starting structure instead of a blank canvas.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"search\">Search\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#search\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Search”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Use search to jump to named nodes in larger diagrams.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"design-systems\">Design Systems\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#design-systems\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Design Systems”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Use Design Systems to switch themes, duplicate them, edit them, or import/export theme JSON.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"how-it-fits-with-the-rest-of-the-editor\">How it fits with the rest of the editor\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#how-it-fits-with-the-rest-of-the-editor\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “How it fits with the rest of the editor”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>The Command Center is the fastest bridge between the canvas and Studio:\u003C/p>\n\u003Cul>\n\u003Cli>use the canvas for direct manipulation\u003C/li>\n\u003Cli>use the inspector for exact edits\u003C/li>\n\u003Cli>use the Command Center for navigation, search, layout, templates, assets, and workflow switching\u003C/li>\n\u003C/ul>",{"headings":239,"localImagePaths":261,"remoteImagePaths":262,"frontmatter":263,"imagePaths":264},[240,243,246,249,252,255,258],{"depth":30,"slug":241,"text":242},"root-commands","Root commands",{"depth":30,"slug":244,"text":245},"views-inside-the-command-center","Views inside the Command Center",{"depth":37,"slug":247,"text":248},"assets","Assets",{"depth":37,"slug":250,"text":251},"templates","Templates",{"depth":37,"slug":253,"text":254},"search","Search",{"depth":37,"slug":256,"text":257},"design-systems","Design Systems",{"depth":30,"slug":259,"text":260},"how-it-fits-with-the-rest-of-the-editor","How it fits with the rest of the editor",[],[],{"draft":20,"title":228,"description":229},[],"collaboration-sharing",{"id":265,"data":267,"body":273,"filePath":274,"digest":275,"rendered":276},{"title":268,"description":269,"editUrl":16,"head":270,"template":18,"sidebar":271,"pagefind":16,"draft":20},"Collaboration & Sharing","Share room links, understand local-only fallback behavior, and use OpenFlowKit collaboration features safely.",[],{"hidden":20,"attrs":272},{},"OpenFlowKit supports share links and collaboration-oriented room flows while keeping local-first behavior as the default.\n\n## What the share flow includes\n\nThe share dialog can expose:\n\n- a room ID\n- an invite URL\n- current viewer count\n- participant badges\n- connection state such as realtime, connecting, or local-only fallback\n\n## Current collaboration model\n\nThe product includes a collaboration scaffold with presence, transport status, and local cache behavior. In practice, that means you can share a room link and see whether the current session is in live sync or local-only fallback mode.\n\nThis is important because local-first tools should fail gracefully. If realtime sync is not available, the app should not force you to stop working.\n\n## How to use it well\n\n- open the share dialog before inviting others\n- confirm whether the session is in live sync or fallback mode\n- use room links when you want collaborators in the same canvas context\n- export JSON when you need a durable editable backup outside the current browser state\n\n## When to use sharing vs exporting\n\nUse collaboration sharing when:\n\n- the diagram should stay interactive\n- other people should join the current working canvas\n- you want presence and room-based workflows\n\nUse exporting when:\n\n- you need an artifact, not a live session\n- the next destination is docs, slides, or a design tool\n- you need a durable handoff file\n\n## Related pages\n\n- [Exporting](/exporting/)\n- [Choose an Export Format](/choose-export-format/)\n- [Embed Diagrams in GitHub](/github-embed/)","src/content/docs/collaboration-sharing.md","f0415d65450ad5a8",{"html":277,"metadata":278},"\u003Cp>OpenFlowKit supports share links and collaboration-oriented room flows while keeping local-first behavior as the default.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"what-the-share-flow-includes\">What the share flow includes\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#what-the-share-flow-includes\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “What the share flow includes”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>The share dialog can expose:\u003C/p>\n\u003Cul>\n\u003Cli>a room ID\u003C/li>\n\u003Cli>an invite URL\u003C/li>\n\u003Cli>current viewer count\u003C/li>\n\u003Cli>participant badges\u003C/li>\n\u003Cli>connection state such as realtime, connecting, or local-only fallback\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"current-collaboration-model\">Current collaboration model\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#current-collaboration-model\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Current collaboration model”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>The product includes a collaboration scaffold with presence, transport status, and local cache behavior. In practice, that means you can share a room link and see whether the current session is in live sync or local-only fallback mode.\u003C/p>\n\u003Cp>This is important because local-first tools should fail gracefully. If realtime sync is not available, the app should not force you to stop working.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"how-to-use-it-well\">How to use it well\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#how-to-use-it-well\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “How to use it well”\u003C/span>\u003C/a>\u003C/div>\n\u003Cul>\n\u003Cli>open the share dialog before inviting others\u003C/li>\n\u003Cli>confirm whether the session is in live sync or fallback mode\u003C/li>\n\u003Cli>use room links when you want collaborators in the same canvas context\u003C/li>\n\u003Cli>export JSON when you need a durable editable backup outside the current browser state\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"when-to-use-sharing-vs-exporting\">When to use sharing vs exporting\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#when-to-use-sharing-vs-exporting\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “When to use sharing vs exporting”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Use collaboration sharing when:\u003C/p>\n\u003Cul>\n\u003Cli>the diagram should stay interactive\u003C/li>\n\u003Cli>other people should join the current working canvas\u003C/li>\n\u003Cli>you want presence and room-based workflows\u003C/li>\n\u003C/ul>\n\u003Cp>Use exporting when:\u003C/p>\n\u003Cul>\n\u003Cli>you need an artifact, not a live session\u003C/li>\n\u003Cli>the next destination is docs, slides, or a design tool\u003C/li>\n\u003Cli>you need a durable handoff file\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"related-pages\">Related pages\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#related-pages\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Related pages”\u003C/span>\u003C/a>\u003C/div>\n\u003Cul>\n\u003Cli>\u003Ca href=\"/exporting/\">Exporting\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"/choose-export-format/\">Choose an Export Format\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"/github-embed/\">Embed Diagrams in GitHub\u003C/a>\u003C/li>\n\u003C/ul>",{"headings":279,"localImagePaths":293,"remoteImagePaths":294,"frontmatter":295,"imagePaths":296},[280,283,286,289,292],{"depth":30,"slug":281,"text":282},"what-the-share-flow-includes","What the share flow includes",{"depth":30,"slug":284,"text":285},"current-collaboration-model","Current collaboration model",{"depth":30,"slug":287,"text":288},"how-to-use-it-well","How to use it well",{"depth":30,"slug":290,"text":291},"when-to-use-sharing-vs-exporting","When to use sharing vs exporting",{"depth":30,"slug":96,"text":97},[],[],{"draft":20,"title":268,"description":269},[],"ask-flowpilot",{"id":297,"data":299,"body":305,"filePath":306,"digest":307,"rendered":308},{"title":300,"description":301,"editUrl":16,"head":302,"template":18,"sidebar":303,"pagefind":16,"draft":20},"Ask Flowpilot","Use FlowPilot as the chat-based Studio assistant for drafting, revising, and explaining diagrams.",[],{"hidden":20,"attrs":304},{},"FlowPilot is the chat-based assistant inside Studio. It is the fastest way to describe a diagram in plain language, revise an existing draft, or ask for a different structural take before you start polishing the result manually.\n\n## Good use cases\n\nAsk FlowPilot when you want to:\n\n- create a first draft from a text prompt\n- revise an existing system into a cleaner structure\n- expand a rough flow with missing failure branches\n- convert source code or structured input into a diagram draft\n\n## What to include in your prompt\n\nUseful prompts specify:\n\n- the audience\n- the systems or actors involved\n- important branches or constraints\n- preferred direction such as `LR` or `TB`\n- whether you want a high-level overview or a detailed operational flow\n\n## Example prompt\n\n```text\nCreate a left-to-right architecture diagram for a SaaS app with:\nweb client, API gateway, auth service, billing service, Postgres,\nRedis cache, background workers, and S3-backed file storage.\nShow public ingress, async jobs, and failure-handling paths.\n```\n\n## What to do after generation\n\nFlowPilot is strongest as a draft generator, not the final editor. After generation:\n\n- inspect the structure on the canvas\n- relabel and normalize in the [Properties Panel](/properties-panel/)\n- run [Smart Layout](/smart-layout/) if spacing is poor\n- save a snapshot before the next major rewrite\n\n## Related pages\n\n- [AI Generation](/ai-generation/)\n- [Prompting AI Agents](/prompting-agents/)\n- [Choose an Input Mode](/choose-input-mode/)","src/content/docs/ask-flowpilot.md","d6a1e7e44a6e1d61",{"html":309,"metadata":310},"\u003Cp>FlowPilot is the chat-based assistant inside Studio. It is the fastest way to describe a diagram in plain language, revise an existing draft, or ask for a different structural take before you start polishing the result manually.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"good-use-cases\">Good use cases\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#good-use-cases\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Good use cases”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Ask FlowPilot when you want to:\u003C/p>\n\u003Cul>\n\u003Cli>create a first draft from a text prompt\u003C/li>\n\u003Cli>revise an existing system into a cleaner structure\u003C/li>\n\u003Cli>expand a rough flow with missing failure branches\u003C/li>\n\u003Cli>convert source code or structured input into a diagram draft\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"what-to-include-in-your-prompt\">What to include in your prompt\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#what-to-include-in-your-prompt\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “What to include in your prompt”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Useful prompts specify:\u003C/p>\n\u003Cul>\n\u003Cli>the audience\u003C/li>\n\u003Cli>the systems or actors involved\u003C/li>\n\u003Cli>important branches or constraints\u003C/li>\n\u003Cli>preferred direction such as \u003Ccode dir=\"auto\">LR\u003C/code> or \u003Ccode dir=\"auto\">TB\u003C/code>\u003C/li>\n\u003Cli>whether you want a high-level overview or a detailed operational flow\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"example-prompt\">Example prompt\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#example-prompt\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Example prompt”\u003C/span>\u003C/a>\u003C/div>\n\u003Cdiv class=\"expressive-code\">\u003Clink rel=\"stylesheet\" href=\"/_astro/ec.v4551.css\">\u003Cscript type=\"module\" src=\"/_astro/ec.0vx5m.js\">\u003C/script>\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"text\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">Create a left-to-right architecture diagram for a SaaS app with:\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">web client, API gateway, auth service, billing service, Postgres,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">Redis cache, background workers, and S3-backed file storage.\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">Show public ingress, async jobs, and failure-handling paths.\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"Create a left-to-right architecture diagram for a SaaS app with:web client, API gateway, auth service, billing service, Postgres,Redis cache, background workers, and S3-backed file storage.Show public ingress, async jobs, and failure-handling paths.\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"what-to-do-after-generation\">What to do after generation\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#what-to-do-after-generation\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “What to do after generation”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>FlowPilot is strongest as a draft generator, not the final editor. After generation:\u003C/p>\n\u003Cul>\n\u003Cli>inspect the structure on the canvas\u003C/li>\n\u003Cli>relabel and normalize in the \u003Ca href=\"/properties-panel/\">Properties Panel\u003C/a>\u003C/li>\n\u003Cli>run \u003Ca href=\"/smart-layout/\">Smart Layout\u003C/a> if spacing is poor\u003C/li>\n\u003Cli>save a snapshot before the next major rewrite\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"related-pages\">Related pages\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#related-pages\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Related pages”\u003C/span>\u003C/a>\u003C/div>\n\u003Cul>\n\u003Cli>\u003Ca href=\"/ai-generation/\">AI Generation\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"/prompting-agents/\">Prompting AI Agents\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"/choose-input-mode/\">Choose an Input Mode\u003C/a>\u003C/li>\n\u003C/ul>",{"headings":311,"localImagePaths":325,"remoteImagePaths":326,"frontmatter":327,"imagePaths":328},[312,315,318,321,324],{"depth":30,"slug":313,"text":314},"good-use-cases","Good use cases",{"depth":30,"slug":316,"text":317},"what-to-include-in-your-prompt","What to include in your prompt",{"depth":30,"slug":319,"text":320},"example-prompt","Example prompt",{"depth":30,"slug":322,"text":323},"what-to-do-after-generation","What to do after generation",{"depth":30,"slug":96,"text":97},[],[],{"draft":20,"title":300,"description":301},[],"aws-architecture",{"id":329,"data":331,"body":337,"filePath":338,"digest":339,"rendered":340},{"title":332,"description":333,"editUrl":16,"head":334,"template":18,"sidebar":335,"pagefind":16,"draft":20},"AWS Architecture Diagram","Use OpenFlowKit for AWS architecture diagrams with templates, icon-backed assets, AI drafting, DSL, and export workflows.",[],{"hidden":20,"attrs":336},{},"OpenFlowKit is a strong fit for AWS architecture diagrams because it supports provider-backed icon insertion, architecture-oriented layouts, AI-assisted drafting, and code-backed editing in the same workflow.\n\n## Best starting points\n\nFor AWS diagrams, start from the input that already exists:\n\n- an AWS template from the template browser\n- the Assets view with AWS icon catalog\n- AI generation with a provider-specific architecture prompt\n- OpenFlow DSL for a deterministic first pass\n\n## How to choose the starting point\n\n- Use templates when you want a known structural baseline.\n- Use assets when you know the services already and want manual control.\n- Use AI when you want a fast conceptual draft.\n- Use DSL when the graph should be reviewed as text.\n\n## Recommended workflow\n\n1. insert core services first\n2. add boundaries for VPCs, public/private tiers, or trust zones\n3. connect traffic paths and async flows\n4. run [Smart Layout](/smart-layout/)\n5. refine labels, protocols, and visual emphasis\n6. save a snapshot before large revisions\n7. export or share in the format your audience needs\n\n## Asset strategy\n\nThe assets panel can load provider-backed catalogs and previews. Use icon nodes for branded service identity, then use sections or boundaries to show grouping.\n\nThis is usually better than drawing every service as a generic box, especially when the audience expects cloud-provider cues at a glance.\n\n## Example prompt\n\n```text\nCreate an AWS architecture diagram for a three-tier web app with:\nRoute 53, CloudFront, ALB, ECS services, RDS PostgreSQL,\nElastiCache Redis, SQS worker queue, S3 assets bucket, and CloudWatch.\nShow public ingress, internal service traffic, and async worker processing.\n```\n\n## When to use OpenFlow DSL instead\n\nUse DSL when:\n\n- you want the graph reviewed in code form\n- you are iterating quickly on service composition\n- you want to pair the diagram with infrastructure change planning\n\n## Export recommendation\n\nFor architecture reviews:\n\n- export PNG or SVG for slides and docs\n- export JSON for editable backup\n- optionally export Mermaid or PlantUML for repo or docs workflows\n\n## Related pages\n\n- [Infrastructure Sync](/infra-sync/)\n- [Templates & Starter Flows](/templates-assets/)\n- [Choose an Export Format](/choose-export-format/)","src/content/docs/aws-architecture.md","431a9f3d67bef32c",{"html":341,"metadata":342},"\u003Cp>OpenFlowKit is a strong fit for AWS architecture diagrams because it supports provider-backed icon insertion, architecture-oriented layouts, AI-assisted drafting, and code-backed editing in the same workflow.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"best-starting-points\">Best starting points\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#best-starting-points\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Best starting points”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>For AWS diagrams, start from the input that already exists:\u003C/p>\n\u003Cul>\n\u003Cli>an AWS template from the template browser\u003C/li>\n\u003Cli>the Assets view with AWS icon catalog\u003C/li>\n\u003Cli>AI generation with a provider-specific architecture prompt\u003C/li>\n\u003Cli>OpenFlow DSL for a deterministic first pass\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"how-to-choose-the-starting-point\">How to choose the starting point\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#how-to-choose-the-starting-point\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “How to choose the starting point”\u003C/span>\u003C/a>\u003C/div>\n\u003Cul>\n\u003Cli>Use templates when you want a known structural baseline.\u003C/li>\n\u003Cli>Use assets when you know the services already and want manual control.\u003C/li>\n\u003Cli>Use AI when you want a fast conceptual draft.\u003C/li>\n\u003Cli>Use DSL when the graph should be reviewed as text.\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"recommended-workflow\">Recommended workflow\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#recommended-workflow\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Recommended workflow”\u003C/span>\u003C/a>\u003C/div>\n\u003Col>\n\u003Cli>insert core services first\u003C/li>\n\u003Cli>add boundaries for VPCs, public/private tiers, or trust zones\u003C/li>\n\u003Cli>connect traffic paths and async flows\u003C/li>\n\u003Cli>run \u003Ca href=\"/smart-layout/\">Smart Layout\u003C/a>\u003C/li>\n\u003Cli>refine labels, protocols, and visual emphasis\u003C/li>\n\u003Cli>save a snapshot before large revisions\u003C/li>\n\u003Cli>export or share in the format your audience needs\u003C/li>\n\u003C/ol>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"asset-strategy\">Asset strategy\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#asset-strategy\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Asset strategy”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>The assets panel can load provider-backed catalogs and previews. Use icon nodes for branded service identity, then use sections or boundaries to show grouping.\u003C/p>\n\u003Cp>This is usually better than drawing every service as a generic box, especially when the audience expects cloud-provider cues at a glance.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"example-prompt\">Example prompt\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#example-prompt\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Example prompt”\u003C/span>\u003C/a>\u003C/div>\n\u003Cdiv class=\"expressive-code\">\u003Clink rel=\"stylesheet\" href=\"/_astro/ec.v4551.css\">\u003Cscript type=\"module\" src=\"/_astro/ec.0vx5m.js\">\u003C/script>\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"text\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">Create an AWS architecture diagram for a three-tier web app with:\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">Route 53, CloudFront, ALB, ECS services, RDS PostgreSQL,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">ElastiCache Redis, SQS worker queue, S3 assets bucket, and CloudWatch.\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">Show public ingress, internal service traffic, and async worker processing.\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"Create an AWS architecture diagram for a three-tier web app with:Route 53, CloudFront, ALB, ECS services, RDS PostgreSQL,ElastiCache Redis, SQS worker queue, S3 assets bucket, and CloudWatch.Show public ingress, internal service traffic, and async worker processing.\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"when-to-use-openflow-dsl-instead\">When to use OpenFlow DSL instead\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#when-to-use-openflow-dsl-instead\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “When to use OpenFlow DSL instead”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Use DSL when:\u003C/p>\n\u003Cul>\n\u003Cli>you want the graph reviewed in code form\u003C/li>\n\u003Cli>you are iterating quickly on service composition\u003C/li>\n\u003Cli>you want to pair the diagram with infrastructure change planning\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"export-recommendation\">Export recommendation\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#export-recommendation\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Export recommendation”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>For architecture reviews:\u003C/p>\n\u003Cul>\n\u003Cli>export PNG or SVG for slides and docs\u003C/li>\n\u003Cli>export JSON for editable backup\u003C/li>\n\u003Cli>optionally export Mermaid or PlantUML for repo or docs workflows\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"related-pages\">Related pages\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#related-pages\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Related pages”\u003C/span>\u003C/a>\u003C/div>\n\u003Cul>\n\u003Cli>\u003Ca href=\"/infra-sync/\">Infrastructure Sync\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"/templates-assets/\">Templates &#x26; Starter Flows\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"/choose-export-format/\">Choose an Export Format\u003C/a>\u003C/li>\n\u003C/ul>",{"headings":343,"localImagePaths":362,"remoteImagePaths":363,"frontmatter":364,"imagePaths":365},[344,347,350,351,354,355,358,361],{"depth":30,"slug":345,"text":346},"best-starting-points","Best starting points",{"depth":30,"slug":348,"text":349},"how-to-choose-the-starting-point","How to choose the starting point",{"depth":30,"slug":90,"text":91},{"depth":30,"slug":352,"text":353},"asset-strategy","Asset strategy",{"depth":30,"slug":319,"text":320},{"depth":30,"slug":356,"text":357},"when-to-use-openflow-dsl-instead","When to use OpenFlow DSL instead",{"depth":30,"slug":359,"text":360},"export-recommendation","Export recommendation",{"depth":30,"slug":96,"text":97},[],[],{"draft":20,"title":332,"description":333},[],"diagram-diff",{"id":366,"data":368,"body":374,"filePath":375,"digest":376,"rendered":377},{"title":369,"description":370,"editUrl":16,"head":371,"template":18,"sidebar":372,"pagefind":16,"draft":20},"Diagram Diff & Compare","Compare the current diagram against a snapshot baseline and review added, removed, and changed elements.",[],{"hidden":20,"attrs":373},{},"Diagram Diff & Compare lets you inspect how the current graph differs from a saved baseline snapshot.\n\n## What compare mode shows\n\nWhen compare mode is active, OpenFlowKit surfaces:\n\n- added nodes and edges\n- removed nodes and edges\n- changed nodes\n- the baseline snapshot name and timestamp\n\nThis is useful after imports, AI rewrites, or manual restructures when you want to understand what actually changed rather than rely on memory.\n\n## Why it is valuable\n\nLarge diagram edits often fail in two ways:\n\n- the result is visually different but you cannot explain what changed\n- the result looks mostly similar, but a few important relationships disappeared\n\nCompare mode helps with both. It gives you a concrete change view against a known baseline.\n\n## Recommended workflow\n\n1. Save or identify the baseline snapshot.\n2. Make the changes you need.\n3. Enter compare mode against that snapshot.\n4. Review the counts for added, removed, and changed elements.\n5. Exit compare mode and continue editing if needed.\n\n## Good use cases\n\n- checking the impact of a major FlowPilot revision\n- reviewing the result of a large infrastructure refresh\n- comparing before-and-after states during architecture refactors\n- validating that a simplification pass did not delete something important\n\n## Related pages\n\n- [Playback & History](/playback-history/)\n- [AI Generation](/ai-generation/)\n- [Infrastructure Sync](/infra-sync/)","src/content/docs/diagram-diff.md","b19dc6be18c9c92e",{"html":378,"metadata":379},"\u003Cp>Diagram Diff &#x26; Compare lets you inspect how the current graph differs from a saved baseline snapshot.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"what-compare-mode-shows\">What compare mode shows\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#what-compare-mode-shows\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “What compare mode shows”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>When compare mode is active, OpenFlowKit surfaces:\u003C/p>\n\u003Cul>\n\u003Cli>added nodes and edges\u003C/li>\n\u003Cli>removed nodes and edges\u003C/li>\n\u003Cli>changed nodes\u003C/li>\n\u003Cli>the baseline snapshot name and timestamp\u003C/li>\n\u003C/ul>\n\u003Cp>This is useful after imports, AI rewrites, or manual restructures when you want to understand what actually changed rather than rely on memory.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"why-it-is-valuable\">Why it is valuable\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#why-it-is-valuable\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Why it is valuable”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Large diagram edits often fail in two ways:\u003C/p>\n\u003Cul>\n\u003Cli>the result is visually different but you cannot explain what changed\u003C/li>\n\u003Cli>the result looks mostly similar, but a few important relationships disappeared\u003C/li>\n\u003C/ul>\n\u003Cp>Compare mode helps with both. It gives you a concrete change view against a known baseline.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"recommended-workflow\">Recommended workflow\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#recommended-workflow\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Recommended workflow”\u003C/span>\u003C/a>\u003C/div>\n\u003Col>\n\u003Cli>Save or identify the baseline snapshot.\u003C/li>\n\u003Cli>Make the changes you need.\u003C/li>\n\u003Cli>Enter compare mode against that snapshot.\u003C/li>\n\u003Cli>Review the counts for added, removed, and changed elements.\u003C/li>\n\u003Cli>Exit compare mode and continue editing if needed.\u003C/li>\n\u003C/ol>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"good-use-cases\">Good use cases\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#good-use-cases\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Good use cases”\u003C/span>\u003C/a>\u003C/div>\n\u003Cul>\n\u003Cli>checking the impact of a major FlowPilot revision\u003C/li>\n\u003Cli>reviewing the result of a large infrastructure refresh\u003C/li>\n\u003Cli>comparing before-and-after states during architecture refactors\u003C/li>\n\u003Cli>validating that a simplification pass did not delete something important\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"related-pages\">Related pages\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#related-pages\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Related pages”\u003C/span>\u003C/a>\u003C/div>\n\u003Cul>\n\u003Cli>\u003Ca href=\"/playback-history/\">Playback &#x26; History\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"/ai-generation/\">AI Generation\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"/infra-sync/\">Infrastructure Sync\u003C/a>\u003C/li>\n\u003C/ul>",{"headings":380,"localImagePaths":390,"remoteImagePaths":391,"frontmatter":392,"imagePaths":393},[381,384,387,388,389],{"depth":30,"slug":382,"text":383},"what-compare-mode-shows","What compare mode shows",{"depth":30,"slug":385,"text":386},"why-it-is-valuable","Why it is valuable",{"depth":30,"slug":90,"text":91},{"depth":30,"slug":313,"text":314},{"depth":30,"slug":96,"text":97},[],[],{"draft":20,"title":369,"description":370},[],"diagram-families",{"id":394,"data":396,"body":402,"filePath":403,"digest":404,"rendered":405},{"title":397,"description":398,"editUrl":16,"head":399,"template":18,"sidebar":400,"pagefind":16,"draft":20},"Diagram Families","Choose the right diagram family in OpenFlowKit for flows, architecture maps, mind maps, journeys, class diagrams, ER diagrams, and more.",[],{"hidden":20,"attrs":401},{},"OpenFlowKit supports multiple diagram families because not every problem should be forced into the same node and edge model.\n\n## Families in the current editor\n\n| Family | Best for |\n| --- | --- |\n| `flowchart` | General process and system flows |\n| `architecture` | Cloud, service, and platform diagrams |\n| `mindmap` | Branching ideation and hierarchical thinking |\n| `journey` | User journey or multi-stage experience mapping |\n| `stateDiagram` | State transitions and event-driven logic |\n| `classDiagram` | Object modeling and relationships |\n| `erDiagram` | Tables, entities, and relational structure |\n| `gitGraph` | Git history and branching flows |\n\n## How to choose\n\nUse the family that matches the semantics of the diagram, not just the visual look.\n\n- Choose `flowchart` when the problem is procedural.\n- Choose `architecture` when services, infrastructure, or trust boundaries matter.\n- Choose `mindmap` when branching and hierarchy matter more than exact routing.\n- Choose `journey` when stages, actors, and sentiment or score matter.\n- Choose `classDiagram` or `erDiagram` when the relationships themselves carry meaning.\n\n## Why it matters\n\nDifferent families unlock different node behavior, import paths, layout assumptions, and inspector controls. Picking the right family early usually means less cleanup later.\n\n## Related pages\n\n- [Node Types](/node-types/)\n- [Choose an Input Mode](/choose-input-mode/)\n- [Studio Overview](/studio-overview/)","src/content/docs/diagram-families.md","f0c52d0e97ec568a",{"html":406,"metadata":407},"\u003Cp>OpenFlowKit supports multiple diagram families because not every problem should be forced into the same node and edge model.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"families-in-the-current-editor\">Families in the current editor\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#families-in-the-current-editor\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Families in the current editor”\u003C/span>\u003C/a>\u003C/div>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>Family\u003C/th>\u003Cth>Best for\u003C/th>\u003C/tr>\u003C/thead>\u003Ctbody>\u003Ctr>\u003Ctd>\u003Ccode dir=\"auto\">flowchart\u003C/code>\u003C/td>\u003Ctd>General process and system flows\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Ccode dir=\"auto\">architecture\u003C/code>\u003C/td>\u003Ctd>Cloud, service, and platform diagrams\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Ccode dir=\"auto\">mindmap\u003C/code>\u003C/td>\u003Ctd>Branching ideation and hierarchical thinking\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Ccode dir=\"auto\">journey\u003C/code>\u003C/td>\u003Ctd>User journey or multi-stage experience mapping\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Ccode dir=\"auto\">stateDiagram\u003C/code>\u003C/td>\u003Ctd>State transitions and event-driven logic\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Ccode dir=\"auto\">classDiagram\u003C/code>\u003C/td>\u003Ctd>Object modeling and relationships\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Ccode dir=\"auto\">erDiagram\u003C/code>\u003C/td>\u003Ctd>Tables, entities, and relational structure\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Ccode dir=\"auto\">gitGraph\u003C/code>\u003C/td>\u003Ctd>Git history and branching flows\u003C/td>\u003C/tr>\u003C/tbody>\u003C/table>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"how-to-choose\">How to choose\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#how-to-choose\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “How to choose”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Use the family that matches the semantics of the diagram, not just the visual look.\u003C/p>\n\u003Cul>\n\u003Cli>Choose \u003Ccode dir=\"auto\">flowchart\u003C/code> when the problem is procedural.\u003C/li>\n\u003Cli>Choose \u003Ccode dir=\"auto\">architecture\u003C/code> when services, infrastructure, or trust boundaries matter.\u003C/li>\n\u003Cli>Choose \u003Ccode dir=\"auto\">mindmap\u003C/code> when branching and hierarchy matter more than exact routing.\u003C/li>\n\u003Cli>Choose \u003Ccode dir=\"auto\">journey\u003C/code> when stages, actors, and sentiment or score matter.\u003C/li>\n\u003Cli>Choose \u003Ccode dir=\"auto\">classDiagram\u003C/code> or \u003Ccode dir=\"auto\">erDiagram\u003C/code> when the relationships themselves carry meaning.\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"why-it-matters\">Why it matters\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#why-it-matters\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Why it matters”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Different families unlock different node behavior, import paths, layout assumptions, and inspector controls. Picking the right family early usually means less cleanup later.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"related-pages\">Related pages\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#related-pages\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Related pages”\u003C/span>\u003C/a>\u003C/div>\n\u003Cul>\n\u003Cli>\u003Ca href=\"/node-types/\">Node Types\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"/choose-input-mode/\">Choose an Input Mode\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"/studio-overview/\">Studio Overview\u003C/a>\u003C/li>\n\u003C/ul>",{"headings":408,"localImagePaths":419,"remoteImagePaths":420,"frontmatter":421,"imagePaths":422},[409,412,415,418],{"depth":30,"slug":410,"text":411},"families-in-the-current-editor","Families in the current editor",{"depth":30,"slug":413,"text":414},"how-to-choose","How to choose",{"depth":30,"slug":416,"text":417},"why-it-matters","Why it matters",{"depth":30,"slug":96,"text":97},[],[],{"draft":20,"title":397,"description":398},[],"exporting",{"id":423,"data":425,"body":431,"filePath":432,"digest":433,"rendered":434},{"title":426,"description":427,"editUrl":16,"head":428,"template":18,"sidebar":429,"pagefind":16,"draft":20},"Exporting","Export diagrams from OpenFlowKit as images, playback media, JSON, code formats, design-tool handoff, or share/embed links.",[],{"hidden":20,"attrs":430},{},"Export lives in the top-right menu of the editor and covers both downloadable files and clipboard-oriented formats.\n\nThe right export choice depends on whether your next step is editing, publishing, presenting, embedding, or collaboration.\n\n## Downloaded file exports\n\n### PNG and JPG\n\nUse PNG or JPG for:\n\n- docs\n- slides\n- tickets\n- lightweight visual sharing\n\nPNG is usually the better default when you want cleaner transparency handling. JPG is useful when a simple white-background image is enough.\n\n### SVG\n\nUse SVG when you need vector output for docs, websites, or further design-tool handling. SVG is the best choice when the diagram needs to stay crisp across sizes.\n\n### JSON\n\nThis is the most faithful archival format for re-import into OpenFlowKit. Use it for:\n\n- backups\n- browser-to-browser handoff\n- preserving the most editable version of the graph\n- long-term retention of a diagram you may need to revise later\n\nIf you are unsure what to save as the master file, choose JSON.\n\n### Playback video and GIF\n\nUse animated exports when the diagram is meant to communicate change over time rather than a single static state. These are useful for demos, changelogs, social posts, and process walkthroughs.\n\n## Clipboard-oriented exports\n\nThese exports are generated from the current graph and copied rather than downloaded:\n\n- OpenFlow DSL\n- Mermaid\n- PlantUML\n- Figma editable export\n\nUse these when the next tool in the workflow expects text or design-tool-compatible handoff rather than an image.\n\n## Sharing\n\nThe export menu also includes **Share / Embed** for viewer-link and collaboration-oriented workflows. Use this when you want a room link, viewer URL, or embed-style flow instead of a file.\n\n## Recommended export pattern\n\nFor serious work, a practical pattern is:\n\n1. keep JSON as the editable master\n2. export Mermaid or DSL for text workflows\n3. export PNG, JPG, or SVG for presentation\n4. use share/embed when the diagram should remain interactive\n\n## Related pages\n\n- [Choose an Export Format](/choose-export-format/)\n- [Collaboration & Sharing](/collaboration-sharing/)\n- [Embed Diagrams in GitHub](/github-embed/)","src/content/docs/exporting.md","316ce9c7c72656f8",{"html":435,"metadata":436},"\u003Cp>Export lives in the top-right menu of the editor and covers both downloadable files and clipboard-oriented formats.\u003C/p>\n\u003Cp>The right export choice depends on whether your next step is editing, publishing, presenting, embedding, or collaboration.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"downloaded-file-exports\">Downloaded file exports\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#downloaded-file-exports\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Downloaded file exports”\u003C/span>\u003C/a>\u003C/div>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"png-and-jpg\">PNG and JPG\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#png-and-jpg\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “PNG and JPG”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Use PNG or JPG for:\u003C/p>\n\u003Cul>\n\u003Cli>docs\u003C/li>\n\u003Cli>slides\u003C/li>\n\u003Cli>tickets\u003C/li>\n\u003Cli>lightweight visual sharing\u003C/li>\n\u003C/ul>\n\u003Cp>PNG is usually the better default when you want cleaner transparency handling. JPG is useful when a simple white-background image is enough.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"svg\">SVG\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#svg\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “SVG”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Use SVG when you need vector output for docs, websites, or further design-tool handling. SVG is the best choice when the diagram needs to stay crisp across sizes.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"json\">JSON\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#json\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “JSON”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>This is the most faithful archival format for re-import into OpenFlowKit. Use it for:\u003C/p>\n\u003Cul>\n\u003Cli>backups\u003C/li>\n\u003Cli>browser-to-browser handoff\u003C/li>\n\u003Cli>preserving the most editable version of the graph\u003C/li>\n\u003Cli>long-term retention of a diagram you may need to revise later\u003C/li>\n\u003C/ul>\n\u003Cp>If you are unsure what to save as the master file, choose JSON.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"playback-video-and-gif\">Playback video and GIF\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#playback-video-and-gif\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Playback video and GIF”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Use animated exports when the diagram is meant to communicate change over time rather than a single static state. These are useful for demos, changelogs, social posts, and process walkthroughs.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"clipboard-oriented-exports\">Clipboard-oriented exports\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#clipboard-oriented-exports\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Clipboard-oriented exports”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>These exports are generated from the current graph and copied rather than downloaded:\u003C/p>\n\u003Cul>\n\u003Cli>OpenFlow DSL\u003C/li>\n\u003Cli>Mermaid\u003C/li>\n\u003Cli>PlantUML\u003C/li>\n\u003Cli>Figma editable export\u003C/li>\n\u003C/ul>\n\u003Cp>Use these when the next tool in the workflow expects text or design-tool-compatible handoff rather than an image.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"sharing\">Sharing\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#sharing\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Sharing”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>The export menu also includes \u003Cstrong>Share / Embed\u003C/strong> for viewer-link and collaboration-oriented workflows. Use this when you want a room link, viewer URL, or embed-style flow instead of a file.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"recommended-export-pattern\">Recommended export pattern\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#recommended-export-pattern\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Recommended export pattern”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>For serious work, a practical pattern is:\u003C/p>\n\u003Col>\n\u003Cli>keep JSON as the editable master\u003C/li>\n\u003Cli>export Mermaid or DSL for text workflows\u003C/li>\n\u003Cli>export PNG, JPG, or SVG for presentation\u003C/li>\n\u003Cli>use share/embed when the diagram should remain interactive\u003C/li>\n\u003C/ol>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"related-pages\">Related pages\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#related-pages\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Related pages”\u003C/span>\u003C/a>\u003C/div>\n\u003Cul>\n\u003Cli>\u003Ca href=\"/choose-export-format/\">Choose an Export Format\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"/collaboration-sharing/\">Collaboration &#x26; Sharing\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"/github-embed/\">Embed Diagrams in GitHub\u003C/a>\u003C/li>\n\u003C/ul>",{"headings":437,"localImagePaths":463,"remoteImagePaths":464,"frontmatter":465,"imagePaths":466},[438,441,444,447,450,453,456,459,462],{"depth":30,"slug":439,"text":440},"downloaded-file-exports","Downloaded file exports",{"depth":37,"slug":442,"text":443},"png-and-jpg","PNG and JPG",{"depth":37,"slug":445,"text":446},"svg","SVG",{"depth":37,"slug":448,"text":449},"json","JSON",{"depth":37,"slug":451,"text":452},"playback-video-and-gif","Playback video and GIF",{"depth":30,"slug":454,"text":455},"clipboard-oriented-exports","Clipboard-oriented exports",{"depth":30,"slug":457,"text":458},"sharing","Sharing",{"depth":30,"slug":460,"text":461},"recommended-export-pattern","Recommended export pattern",{"depth":30,"slug":96,"text":97},[],[],{"draft":20,"title":426,"description":427},[],"figma-design-import",{"id":467,"data":469,"body":475,"filePath":476,"digest":477,"rendered":478},{"title":470,"description":471,"editUrl":16,"head":472,"template":18,"sidebar":473,"pagefind":16,"draft":20},"Figma Design Import","Fetch colors and text styles from Figma and apply them to an OpenFlowKit design system.",[],{"hidden":20,"attrs":474},{},"OpenFlowKit includes a Figma import flow for design-system work. Instead of recreating theme tokens manually, you can fetch styles from a Figma file and apply them to a diagram theme.\n\n## What you need\n\n- a Figma file URL\n- a personal access token\n\nThe token is used in your browser to fetch styles. This is a token-based import flow, not a permanent synced integration.\n\n## What the import previews\n\nThe current import flow can preview:\n\n- color styles\n- text styles\n- font families represented in those text styles\n\nAfter review, you can apply the result to a design system inside OpenFlowKit.\n\n## Best use cases\n\n- aligning diagrams with an existing design language\n- quickly creating a theme from a product or brand system\n- reducing manual token setup work before building multiple diagrams\n\n## Recommended workflow\n\n1. Open the Figma import flow.\n2. Paste the Figma file URL.\n3. Enter a personal access token.\n4. Fetch styles and review the preview.\n5. Apply the imported result to a design system.\n6. Use that design system across your diagram set.\n\n## Related pages\n\n- [Design Systems & Branding](/design-systems-branding/)\n- [Templates & Starter Flows](/templates-assets/)","src/content/docs/figma-design-import.md","fc98ef85ab6124d2",{"html":479,"metadata":480},"\u003Cp>OpenFlowKit includes a Figma import flow for design-system work. Instead of recreating theme tokens manually, you can fetch styles from a Figma file and apply them to a diagram theme.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"what-you-need\">What you need\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#what-you-need\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “What you need”\u003C/span>\u003C/a>\u003C/div>\n\u003Cul>\n\u003Cli>a Figma file URL\u003C/li>\n\u003Cli>a personal access token\u003C/li>\n\u003C/ul>\n\u003Cp>The token is used in your browser to fetch styles. This is a token-based import flow, not a permanent synced integration.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"what-the-import-previews\">What the import previews\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#what-the-import-previews\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “What the import previews”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>The current import flow can preview:\u003C/p>\n\u003Cul>\n\u003Cli>color styles\u003C/li>\n\u003Cli>text styles\u003C/li>\n\u003Cli>font families represented in those text styles\u003C/li>\n\u003C/ul>\n\u003Cp>After review, you can apply the result to a design system inside OpenFlowKit.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"best-use-cases\">Best use cases\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#best-use-cases\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Best use cases”\u003C/span>\u003C/a>\u003C/div>\n\u003Cul>\n\u003Cli>aligning diagrams with an existing design language\u003C/li>\n\u003Cli>quickly creating a theme from a product or brand system\u003C/li>\n\u003Cli>reducing manual token setup work before building multiple diagrams\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"recommended-workflow\">Recommended workflow\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#recommended-workflow\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Recommended workflow”\u003C/span>\u003C/a>\u003C/div>\n\u003Col>\n\u003Cli>Open the Figma import flow.\u003C/li>\n\u003Cli>Paste the Figma file URL.\u003C/li>\n\u003Cli>Enter a personal access token.\u003C/li>\n\u003Cli>Fetch styles and review the preview.\u003C/li>\n\u003Cli>Apply the imported result to a design system.\u003C/li>\n\u003Cli>Use that design system across your diagram set.\u003C/li>\n\u003C/ol>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"related-pages\">Related pages\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#related-pages\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Related pages”\u003C/span>\u003C/a>\u003C/div>\n\u003Cul>\n\u003Cli>\u003Ca href=\"/design-systems-branding/\">Design Systems &#x26; Branding\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"/templates-assets/\">Templates &#x26; Starter Flows\u003C/a>\u003C/li>\n\u003C/ul>",{"headings":481,"localImagePaths":491,"remoteImagePaths":492,"frontmatter":493,"imagePaths":494},[482,485,488,489,490],{"depth":30,"slug":483,"text":484},"what-you-need","What you need",{"depth":30,"slug":486,"text":487},"what-the-import-previews","What the import previews",{"depth":30,"slug":185,"text":186},{"depth":30,"slug":90,"text":91},{"depth":30,"slug":96,"text":97},[],[],{"draft":20,"title":470,"description":471},[],"github-embed",{"id":495,"data":497,"body":503,"filePath":504,"digest":505,"rendered":506},{"title":498,"description":499,"editUrl":16,"head":500,"template":18,"sidebar":501,"pagefind":16,"draft":20},"Embed Diagrams in GitHub","Create viewer links for OpenFlowKit diagrams and embed them into GitHub-flavored documentation workflows.",[],{"hidden":20,"attrs":502},{},"OpenFlowKit diagrams can be embedded in any GitHub README or Markdown file as interactive, read-only views. No server setup or GitHub App required.\n\n## How it works\n\nThe `/view` route renders any OpenFlow DSL passed as a URL parameter. You encode your diagram as a URL-safe string and link to it from your README.\n\n```\nhttps://openflowkit.dev/#/view?flow=BASE64_ENCODED_DSL\n```\n\nWhen someone clicks the link, they see the fully rendered, interactive diagram and can pan, zoom, and click **Open in Editor** to load it into the canvas for editing.\n\n## When this is useful\n\nUse the GitHub embed workflow when:\n\n- your team documents systems in Markdown\n- you want a richer diagram experience than a static PNG\n- you want readers to be able to open the diagram back in the editor\n\n## Step-by-step\n\n### 1. Write your diagram in OpenFlow DSL\n\n```\nflow: \"My Architecture\"\ndirection: LR\n\n[browser] client: Web App\n[system] api: API Server\n[system] db: PostgreSQL\n\nclient -> api |HTTP|\napi -> db |SQL|\n```\n\n### 2. Encode it\n\nIn the browser console, or any JavaScript environment:\n\n```js\nconst dsl = `flow: \"My Architecture\"\ndirection: LR\n\n[browser] client: Web App\n[system] api: API Server\n[system] db: PostgreSQL\n\nclient -> api |HTTP|\napi -> db |SQL|`;\n\nconst encoded = btoa(encodeURIComponent(dsl));\nconsole.log(encoded);\n// → paste this into the URL below\n```\n\n### 3. Embed in your README\n\n```markdown\n[![Architecture Diagram](https://openflowkit.dev/og-diagram.png)](https://openflowkit.dev/#/view?flow=PASTE_ENCODED_VALUE_HERE)\n```\n\nThe outer image link makes GitHub show a clickable preview image. Replace `og-diagram.png` with a screenshot of your diagram for the best preview.\n\nOr link directly without an image:\n\n```markdown\n[View Architecture Diagram →](https://openflowkit.dev/#/view?flow=PASTE_ENCODED_VALUE_HERE)\n```\n\n## Updating diagrams\n\nEdit your DSL, re-encode, and update the URL in the README. Because the entire diagram is in the URL, there is no external file to keep in sync.\n\nFor diagrams you want to iterate on frequently, store the raw DSL in a `.flow` file in your repo and reference it in a comment next to the embed link:\n\n```markdown\n\u003C!-- Source: ./docs/architecture.flow -->\n[View Architecture →](https://openflowkit.dev/#/view?flow=...)\n```\n\n## Encoding helper\n\nYou can also export the viewer URL directly from the OpenFlowKit editor:\n\n1. Open your diagram in the editor\n2. Open **Studio → Code → OpenFlow DSL**\n3. Copy the DSL\n4. Encode it with the snippet above\n\n## Supported DSL features\n\nAll OpenFlow DSL node types and edge types render in the viewer:\n\n- All node types: `[system]`, `[browser]`, `[mobile]`, `[process]`, `[decision]`, `[section]`, `[annotation]`, and more\n- All edge styles: solid, dashed (`..>`), curved (`-->`), thick (`==>`)\n- Edge labels, colors, icons, and grouping sections\n\n## Related reading\n\n- [OpenFlow DSL Reference](/openflow-dsl/)\n- [Exporting Diagrams](/exporting/)\n- [Import from Structured Data](/import-from-data/)","src/content/docs/github-embed.md","abce7abf23fbf0ce",{"html":507,"metadata":508},"\u003Cp>OpenFlowKit diagrams can be embedded in any GitHub README or Markdown file as interactive, read-only views. No server setup or GitHub App required.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"how-it-works\">How it works\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#how-it-works\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “How it works”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>The \u003Ccode dir=\"auto\">/view\u003C/code> route renders any OpenFlow DSL passed as a URL parameter. You encode your diagram as a URL-safe string and link to it from your README.\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Clink rel=\"stylesheet\" href=\"/_astro/ec.v4551.css\">\u003Cscript type=\"module\" src=\"/_astro/ec.0vx5m.js\">\u003C/script>\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"plaintext\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">https://openflowkit.dev/#/view?flow=BASE64_ENCODED_DSL\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"https://openflowkit.dev/#/view?flow=BASE64_ENCODED_DSL\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cp>When someone clicks the link, they see the fully rendered, interactive diagram and can pan, zoom, and click \u003Cstrong>Open in Editor\u003C/strong> to load it into the canvas for editing.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"when-this-is-useful\">When this is useful\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#when-this-is-useful\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “When this is useful”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Use the GitHub embed workflow when:\u003C/p>\n\u003Cul>\n\u003Cli>your team documents systems in Markdown\u003C/li>\n\u003Cli>you want a richer diagram experience than a static PNG\u003C/li>\n\u003Cli>you want readers to be able to open the diagram back in the editor\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"step-by-step\">Step-by-step\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#step-by-step\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Step-by-step”\u003C/span>\u003C/a>\u003C/div>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"1-write-your-diagram-in-openflow-dsl\">1. Write your diagram in OpenFlow DSL\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#1-write-your-diagram-in-openflow-dsl\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “1. Write your diagram in OpenFlow DSL”\u003C/span>\u003C/a>\u003C/div>\n\u003Cdiv class=\"expressive-code\">\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"plaintext\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">flow: \"My Architecture\"\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">direction: LR\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">[browser] client: Web App\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">[system] api: API Server\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">[system] db: PostgreSQL\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">client -> api |HTTP|\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">api -> db |SQL|\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"flow: &#x22;My Architecture&#x22;direction: LR[browser] client: Web App[system] api: API Server[system] db: PostgreSQLclient -> api |HTTP|api -> db |SQL|\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"2-encode-it\">2. Encode it\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#2-encode-it\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “2. Encode it”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>In the browser console, or any JavaScript environment:\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"js\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">const \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">dsl\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> = \u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">`\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">flow: \"My Architecture\"\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">direction: LR\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">[browser] client: Web App\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">[system] api: API Server\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">[system] db: PostgreSQL\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">client -> api |HTTP|\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">api -> db |SQL|\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">`\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">const \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">encoded\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> = \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">btoa\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">encodeURIComponent\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">(\u003C/span>\u003Cspan style=\"--0:#D7DBE0\">dsl\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">));\u003C/span>\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">log\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">(\u003C/span>\u003Cspan style=\"--0:#D7DBE0\">encoded\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">);\u003C/span>\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// → paste this into the URL below\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"const dsl = &#x60;flow: &#x22;My Architecture&#x22;direction: LR[browser] client: Web App[system] api: API Server[system] db: PostgreSQLclient -> api |HTTP|api -> db |SQL|&#x60;;const encoded = btoa(encodeURIComponent(dsl));console.log(encoded);// → paste this into the URL below\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"3-embed-in-your-readme\">3. Embed in your README\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#3-embed-in-your-readme\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “3. Embed in your README”\u003C/span>\u003C/a>\u003C/div>\n\u003Cdiv class=\"expressive-code\">\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"markdown\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">[\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">![\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--0td:underline;--1:#403F53;--1td:underline\">Architecture Diagram\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">]\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">(\u003C/span>\u003Cspan style=\"--0:#FF869A;--0td:underline;--1:#954F5A;--1td:underline\">https://openflowkit.dev/og-diagram.png\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">)\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">]\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">(\u003C/span>\u003Cspan style=\"--0:#FF869A;--0td:underline;--1:#954F5A;--1td:underline\">https://openflowkit.dev/#/view?flow=PASTE_ENCODED_VALUE_HERE\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">)\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"[![Architecture Diagram](https://openflowkit.dev/og-diagram.png)](https://openflowkit.dev/#/view?flow=PASTE_ENCODED_VALUE_HERE)\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cp>The outer image link makes GitHub show a clickable preview image. Replace \u003Ccode dir=\"auto\">og-diagram.png\u003C/code> with a screenshot of your diagram for the best preview.\u003C/p>\n\u003Cp>Or link directly without an image:\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"markdown\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">[\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--0td:underline;--1:#403F53;--1td:underline\">View Architecture Diagram →\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">]\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">(\u003C/span>\u003Cspan style=\"--0:#FF869A;--0td:underline;--1:#954F5A;--1td:underline\">https://openflowkit.dev/#/view?flow=PASTE_ENCODED_VALUE_HERE\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">)\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"[View Architecture Diagram →](https://openflowkit.dev/#/view?flow=PASTE_ENCODED_VALUE_HERE)\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"updating-diagrams\">Updating diagrams\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#updating-diagrams\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Updating diagrams”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Edit your DSL, re-encode, and update the URL in the README. Because the entire diagram is in the URL, there is no external file to keep in sync.\u003C/p>\n\u003Cp>For diagrams you want to iterate on frequently, store the raw DSL in a \u003Ccode dir=\"auto\">.flow\u003C/code> file in your repo and reference it in a comment next to the embed link:\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"markdown\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#919F9F;--1:#5F636F\">&#x3C;!-- Source: ./docs/architecture.flow -->\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">[\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--0td:underline;--1:#403F53;--1td:underline\">View Architecture →\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">]\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">(\u003C/span>\u003Cspan style=\"--0:#FF869A;--0td:underline;--1:#954F5A;--1td:underline\">https://openflowkit.dev/#/view?flow=...\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">)\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"\u003C!-- Source: ./docs/architecture.flow -->[View Architecture →](https://openflowkit.dev/#/view?flow=...)\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"encoding-helper\">Encoding helper\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#encoding-helper\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Encoding helper”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>You can also export the viewer URL directly from the OpenFlowKit editor:\u003C/p>\n\u003Col>\n\u003Cli>Open your diagram in the editor\u003C/li>\n\u003Cli>Open \u003Cstrong>Studio → Code → OpenFlow DSL\u003C/strong>\u003C/li>\n\u003Cli>Copy the DSL\u003C/li>\n\u003Cli>Encode it with the snippet above\u003C/li>\n\u003C/ol>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"supported-dsl-features\">Supported DSL features\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#supported-dsl-features\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Supported DSL features”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>All OpenFlow DSL node types and edge types render in the viewer:\u003C/p>\n\u003Cul>\n\u003Cli>All node types: \u003Ccode dir=\"auto\">[system]\u003C/code>, \u003Ccode dir=\"auto\">[browser]\u003C/code>, \u003Ccode dir=\"auto\">[mobile]\u003C/code>, \u003Ccode dir=\"auto\">[process]\u003C/code>, \u003Ccode dir=\"auto\">[decision]\u003C/code>, \u003Ccode dir=\"auto\">[section]\u003C/code>, \u003Ccode dir=\"auto\">[annotation]\u003C/code>, and more\u003C/li>\n\u003Cli>All edge styles: solid, dashed (\u003Ccode dir=\"auto\">..>\u003C/code>), curved (\u003Ccode dir=\"auto\">-->\u003C/code>), thick (\u003Ccode dir=\"auto\">==>\u003C/code>)\u003C/li>\n\u003Cli>Edge labels, colors, icons, and grouping sections\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"related-reading\">Related reading\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#related-reading\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Related reading”\u003C/span>\u003C/a>\u003C/div>\n\u003Cul>\n\u003Cli>\u003Ca href=\"/openflow-dsl/\">OpenFlow DSL Reference\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"/exporting/\">Exporting Diagrams\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"/import-from-data/\">Import from Structured Data\u003C/a>\u003C/li>\n\u003C/ul>",{"headings":509,"localImagePaths":540,"remoteImagePaths":541,"frontmatter":542,"imagePaths":543},[510,513,516,519,522,525,528,531,534,537],{"depth":30,"slug":511,"text":512},"how-it-works","How it works",{"depth":30,"slug":514,"text":515},"when-this-is-useful","When this is useful",{"depth":30,"slug":517,"text":518},"step-by-step","Step-by-step",{"depth":37,"slug":520,"text":521},"1-write-your-diagram-in-openflow-dsl","1. Write your diagram in OpenFlow DSL",{"depth":37,"slug":523,"text":524},"2-encode-it","2. Encode it",{"depth":37,"slug":526,"text":527},"3-embed-in-your-readme","3. Embed in your README",{"depth":30,"slug":529,"text":530},"updating-diagrams","Updating diagrams",{"depth":30,"slug":532,"text":533},"encoding-helper","Encoding helper",{"depth":30,"slug":535,"text":536},"supported-dsl-features","Supported DSL features",{"depth":30,"slug":538,"text":539},"related-reading","Related reading",[],[],{"draft":20,"title":498,"description":499},[],"infra-sync",{"id":544,"data":546,"body":552,"filePath":553,"digest":554,"rendered":555},{"title":547,"description":548,"editUrl":16,"head":549,"template":18,"sidebar":550,"pagefind":16,"draft":20},"Infrastructure Sync (Living Diagrams)","Parse Terraform state, Kubernetes manifests, and Docker Compose files directly into diagrams without depending on an AI provider.",[],{"hidden":20,"attrs":551},{},"Infrastructure Sync converts real infrastructure files into OpenFlow diagrams deterministically. It works offline for supported inputs and produces diagrams that stay close to your actual infrastructure sources.\n\n## Supported formats\n\n- **Terraform State** (`.tfstate` JSON)\n- **Kubernetes YAML**\n- **Docker Compose YAML**\n- **Terraform HCL** through the AI-assisted path when needed\n\n## When to use it\n\nUse Infrastructure Sync when:\n\n- you already have real infrastructure files\n- you want deterministic parsing\n- you need an offline-friendly import path\n- you want an editable starting point for architecture review\n\n## Why it is different from AI import\n\nAI import is useful when the model needs to interpret messy or conceptual input. Infrastructure Sync is for cases where the source artifact already contains the structure and you want OpenFlowKit to parse it rather than reinterpret it.\n\nThat distinction matters for trust. If the goal is to stay close to the underlying infra source, deterministic parsing is usually the better first move.\n\n## How to use it\n\n1. Open Studio.\n2. Switch to the **Infra** tab.\n3. Select the matching format.\n4. Paste or drop the file contents.\n5. Generate the diagram.\n6. Review the summary.\n7. Apply it to the canvas.\n\n## After import\n\nThe result is still an editable OpenFlowKit diagram. After applying it to the canvas, you can:\n\n- annotate it\n- regroup it\n- run layout\n- export it\n- compare it against later snapshots\n- apply lint rules for architecture review\n\n## Best use cases\n\n- cloud topology reviews\n- current-state architecture documentation\n- infra change communication\n- turning operational source files into something easier to discuss visually\n\n## Related pages\n\n- [Import from Structured Data](/import-from-data/)\n- [Architecture Linting](/architecture-lint/)\n- [Diagram Diff & Compare](/diagram-diff/)","src/content/docs/infra-sync.md","76eac2378973d52a",{"html":556,"metadata":557},"\u003Cp>Infrastructure Sync converts real infrastructure files into OpenFlow diagrams deterministically. It works offline for supported inputs and produces diagrams that stay close to your actual infrastructure sources.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"supported-formats\">Supported formats\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#supported-formats\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Supported formats”\u003C/span>\u003C/a>\u003C/div>\n\u003Cul>\n\u003Cli>\u003Cstrong>Terraform State\u003C/strong> (\u003Ccode dir=\"auto\">.tfstate\u003C/code> JSON)\u003C/li>\n\u003Cli>\u003Cstrong>Kubernetes YAML\u003C/strong>\u003C/li>\n\u003Cli>\u003Cstrong>Docker Compose YAML\u003C/strong>\u003C/li>\n\u003Cli>\u003Cstrong>Terraform HCL\u003C/strong> through the AI-assisted path when needed\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"when-to-use-it\">When to use it\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#when-to-use-it\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “When to use it”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Use Infrastructure Sync when:\u003C/p>\n\u003Cul>\n\u003Cli>you already have real infrastructure files\u003C/li>\n\u003Cli>you want deterministic parsing\u003C/li>\n\u003Cli>you need an offline-friendly import path\u003C/li>\n\u003Cli>you want an editable starting point for architecture review\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"why-it-is-different-from-ai-import\">Why it is different from AI import\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#why-it-is-different-from-ai-import\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Why it is different from AI import”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>AI import is useful when the model needs to interpret messy or conceptual input. Infrastructure Sync is for cases where the source artifact already contains the structure and you want OpenFlowKit to parse it rather than reinterpret it.\u003C/p>\n\u003Cp>That distinction matters for trust. If the goal is to stay close to the underlying infra source, deterministic parsing is usually the better first move.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"how-to-use-it\">How to use it\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#how-to-use-it\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “How to use it”\u003C/span>\u003C/a>\u003C/div>\n\u003Col>\n\u003Cli>Open Studio.\u003C/li>\n\u003Cli>Switch to the \u003Cstrong>Infra\u003C/strong> tab.\u003C/li>\n\u003Cli>Select the matching format.\u003C/li>\n\u003Cli>Paste or drop the file contents.\u003C/li>\n\u003Cli>Generate the diagram.\u003C/li>\n\u003Cli>Review the summary.\u003C/li>\n\u003Cli>Apply it to the canvas.\u003C/li>\n\u003C/ol>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"after-import\">After import\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#after-import\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “After import”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>The result is still an editable OpenFlowKit diagram. After applying it to the canvas, you can:\u003C/p>\n\u003Cul>\n\u003Cli>annotate it\u003C/li>\n\u003Cli>regroup it\u003C/li>\n\u003Cli>run layout\u003C/li>\n\u003Cli>export it\u003C/li>\n\u003Cli>compare it against later snapshots\u003C/li>\n\u003Cli>apply lint rules for architecture review\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"best-use-cases\">Best use cases\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#best-use-cases\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Best use cases”\u003C/span>\u003C/a>\u003C/div>\n\u003Cul>\n\u003Cli>cloud topology reviews\u003C/li>\n\u003Cli>current-state architecture documentation\u003C/li>\n\u003Cli>infra change communication\u003C/li>\n\u003Cli>turning operational source files into something easier to discuss visually\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"related-pages\">Related pages\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#related-pages\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Related pages”\u003C/span>\u003C/a>\u003C/div>\n\u003Cul>\n\u003Cli>\u003Ca href=\"/import-from-data/\">Import from Structured Data\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"/architecture-lint/\">Architecture Linting\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"/diagram-diff/\">Diagram Diff &#x26; Compare\u003C/a>\u003C/li>\n\u003C/ul>",{"headings":558,"localImagePaths":574,"remoteImagePaths":575,"frontmatter":576,"imagePaths":577},[559,562,563,566,569,572,573],{"depth":30,"slug":560,"text":561},"supported-formats","Supported formats",{"depth":30,"slug":211,"text":212},{"depth":30,"slug":564,"text":565},"why-it-is-different-from-ai-import","Why it is different from AI import",{"depth":30,"slug":567,"text":568},"how-to-use-it","How to use it",{"depth":30,"slug":570,"text":571},"after-import","After import",{"depth":30,"slug":185,"text":186},{"depth":30,"slug":96,"text":97},[],[],{"title":547,"description":548},[],"import-from-data",{"id":578,"data":580,"body":586,"filePath":587,"digest":588,"rendered":589},{"title":581,"description":582,"editUrl":16,"head":583,"template":18,"sidebar":584,"pagefind":16,"draft":20},"Import from Structured Data","Turn SQL, OpenAPI, Terraform, and Kubernetes source text into editable diagrams from the Studio import flows.",[],{"hidden":20,"attrs":585},{},"The structured import flows in Studio convert source text into editable diagrams. This is useful when you already have SQL, OpenAPI, Terraform, or Kubernetes-related content and want a visual model quickly.\n\n## How it works\n\nPaste your source text, choose the matching mode, and generate the diagram. Depending on the input type, OpenFlowKit either runs a specialized AI-assisted import or a deterministic parser-based flow.\n\nOne common pipeline is:\n\n```text\nYour text → specialized prompt → AI model → DSL → ELK layout → canvas\n```\n\nAll your existing AI provider and API key settings apply.\n\nFor fully deterministic infrastructure parsing that does not need AI, use [Infrastructure Sync](/infra-sync/).\n\n## SQL DDL → Entity-Relationship Diagram\n\nPaste one or more `CREATE TABLE` statements to generate an ER diagram.\n\nFlowPilot will:\n\n- create one node per table\n- list primary keys, foreign keys, and key columns inside each node\n- draw edges between tables that share foreign key relationships\n- group related tables where the model can infer a useful structure\n\n## OpenAPI and service-structure imports\n\nUse OpenAPI import when you want a service or endpoint-level first pass from an existing API spec.\n\n## When to choose this flow\n\nChoose structured import when a source artifact already exists and you want a fast editable draft. Choose manual editing when the diagram is primarily conceptual. Choose [Infrastructure Sync](/infra-sync/) when determinism matters more than AI interpretation.","src/content/docs/import-from-data.md","607c700fb1045d48",{"html":590,"metadata":591},"\u003Cp>The structured import flows in Studio convert source text into editable diagrams. This is useful when you already have SQL, OpenAPI, Terraform, or Kubernetes-related content and want a visual model quickly.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"how-it-works\">How it works\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#how-it-works\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “How it works”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Paste your source text, choose the matching mode, and generate the diagram. Depending on the input type, OpenFlowKit either runs a specialized AI-assisted import or a deterministic parser-based flow.\u003C/p>\n\u003Cp>One common pipeline is:\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Clink rel=\"stylesheet\" href=\"/_astro/ec.v4551.css\">\u003Cscript type=\"module\" src=\"/_astro/ec.0vx5m.js\">\u003C/script>\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"text\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">Your text → specialized prompt → AI model → DSL → ELK layout → canvas\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"Your text → specialized prompt → AI model → DSL → ELK layout → canvas\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cp>All your existing AI provider and API key settings apply.\u003C/p>\n\u003Cp>For fully deterministic infrastructure parsing that does not need AI, use \u003Ca href=\"/infra-sync/\">Infrastructure Sync\u003C/a>.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"sql-ddl--entity-relationship-diagram\">SQL DDL → Entity-Relationship Diagram\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#sql-ddl--entity-relationship-diagram\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “SQL DDL → Entity-Relationship Diagram”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Paste one or more \u003Ccode dir=\"auto\">CREATE TABLE\u003C/code> statements to generate an ER diagram.\u003C/p>\n\u003Cp>FlowPilot will:\u003C/p>\n\u003Cul>\n\u003Cli>create one node per table\u003C/li>\n\u003Cli>list primary keys, foreign keys, and key columns inside each node\u003C/li>\n\u003Cli>draw edges between tables that share foreign key relationships\u003C/li>\n\u003Cli>group related tables where the model can infer a useful structure\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"openapi-and-service-structure-imports\">OpenAPI and service-structure imports\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#openapi-and-service-structure-imports\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “OpenAPI and service-structure imports”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Use OpenAPI import when you want a service or endpoint-level first pass from an existing API spec.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"when-to-choose-this-flow\">When to choose this flow\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#when-to-choose-this-flow\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “When to choose this flow”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Choose structured import when a source artifact already exists and you want a fast editable draft. Choose manual editing when the diagram is primarily conceptual. Choose \u003Ca href=\"/infra-sync/\">Infrastructure Sync\u003C/a> when determinism matters more than AI interpretation.\u003C/p>",{"headings":592,"localImagePaths":603,"remoteImagePaths":604,"frontmatter":605,"imagePaths":606},[593,594,597,600],{"depth":30,"slug":511,"text":512},{"depth":30,"slug":595,"text":596},"sql-ddl--entity-relationship-diagram","SQL DDL → Entity-Relationship Diagram",{"depth":30,"slug":598,"text":599},"openapi-and-service-structure-imports","OpenAPI and service-structure imports",{"depth":30,"slug":601,"text":602},"when-to-choose-this-flow","When to choose this flow",[],[],{"draft":20,"title":581,"description":582},[],"introduction",{"id":607,"data":609,"body":615,"filePath":616,"digest":617,"rendered":618},{"title":610,"description":611,"editUrl":16,"head":612,"template":18,"sidebar":613,"pagefind":16,"draft":20},"Introduction","OpenFlowKit is a local-first diagramming workspace for technical flows, architecture maps, code-backed diagrams, and AI-assisted editing.",[],{"hidden":20,"attrs":614},{},"OpenFlowKit is a local-first diagramming workspace for technical teams. It combines a visual canvas, code-friendly representations, deterministic imports, AI-assisted generation, and share/export workflows in one browser-based tool.\n\n## What OpenFlowKit is good at\n\nOpenFlowKit works best when a diagram needs to evolve instead of staying static:\n\n- start from a blank canvas, template, AI prompt, code representation, or imported source artifact\n- refine the result visually instead of treating generation as a one-shot output\n- keep a text representation close to the editor model when needed\n- export or share the same diagram across docs, design, and collaboration workflows\n\n## Core product surfaces\n\nThe current product centers on four major surfaces:\n\n- A visual canvas for direct editing\n- A command-driven launcher for search, templates, assets, layout, and design systems\n- A Studio rail for AI, code, imports, infrastructure sync, and linting\n- Export, embed, and share flows for moving work outside the editor\n\n## Diagram families in the app\n\nThe editor currently has first-class support for these diagram types:\n\n- `flowchart`\n- `stateDiagram`\n- `classDiagram`\n- `erDiagram`\n- `gitGraph`\n- `mindmap`\n- `journey`\n- `architecture`\n\nYou will also see reusable node families for general-purpose flows, architecture icon nodes, annotations, sections, images, and wireframe-style surfaces.\n\n## Core product concepts\n\n### Local-first by default\n\nDiagram state lives in the browser by default. You choose when to export, share, or join collaboration-style room flows.\n\n### Multiple input modes\n\nOpenFlowKit does not force a single source of truth. You can work visually, with AI, through OpenFlow DSL, through Mermaid, or from structured imports.\n\n### Editable outputs\n\nGenerated and imported diagrams come back into the same editable canvas model rather than becoming dead screenshots.\n\n## Start here\n\n- Read [Quick Start](/quick-start/) for the fastest first-run workflow.\n- Read [Studio Overview](/studio-overview/) for the AI, code, import, and lint flows.\n- Read [Choose an Input Mode](/choose-input-mode/) if you are not sure where to start.","src/content/docs/introduction.md","8324305db910b4bd",{"html":619,"metadata":620},"\u003Cp>OpenFlowKit is a local-first diagramming workspace for technical teams. It combines a visual canvas, code-friendly representations, deterministic imports, AI-assisted generation, and share/export workflows in one browser-based tool.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"what-openflowkit-is-good-at\">What OpenFlowKit is good at\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#what-openflowkit-is-good-at\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “What OpenFlowKit is good at”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>OpenFlowKit works best when a diagram needs to evolve instead of staying static:\u003C/p>\n\u003Cul>\n\u003Cli>start from a blank canvas, template, AI prompt, code representation, or imported source artifact\u003C/li>\n\u003Cli>refine the result visually instead of treating generation as a one-shot output\u003C/li>\n\u003Cli>keep a text representation close to the editor model when needed\u003C/li>\n\u003Cli>export or share the same diagram across docs, design, and collaboration workflows\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"core-product-surfaces\">Core product surfaces\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#core-product-surfaces\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Core product surfaces”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>The current product centers on four major surfaces:\u003C/p>\n\u003Cul>\n\u003Cli>A visual canvas for direct editing\u003C/li>\n\u003Cli>A command-driven launcher for search, templates, assets, layout, and design systems\u003C/li>\n\u003Cli>A Studio rail for AI, code, imports, infrastructure sync, and linting\u003C/li>\n\u003Cli>Export, embed, and share flows for moving work outside the editor\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"diagram-families-in-the-app\">Diagram families in the app\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#diagram-families-in-the-app\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Diagram families in the app”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>The editor currently has first-class support for these diagram types:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Ccode dir=\"auto\">flowchart\u003C/code>\u003C/li>\n\u003Cli>\u003Ccode dir=\"auto\">stateDiagram\u003C/code>\u003C/li>\n\u003Cli>\u003Ccode dir=\"auto\">classDiagram\u003C/code>\u003C/li>\n\u003Cli>\u003Ccode dir=\"auto\">erDiagram\u003C/code>\u003C/li>\n\u003Cli>\u003Ccode dir=\"auto\">gitGraph\u003C/code>\u003C/li>\n\u003Cli>\u003Ccode dir=\"auto\">mindmap\u003C/code>\u003C/li>\n\u003Cli>\u003Ccode dir=\"auto\">journey\u003C/code>\u003C/li>\n\u003Cli>\u003Ccode dir=\"auto\">architecture\u003C/code>\u003C/li>\n\u003C/ul>\n\u003Cp>You will also see reusable node families for general-purpose flows, architecture icon nodes, annotations, sections, images, and wireframe-style surfaces.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"core-product-concepts\">Core product concepts\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#core-product-concepts\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Core product concepts”\u003C/span>\u003C/a>\u003C/div>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"local-first-by-default\">Local-first by default\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#local-first-by-default\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Local-first by default”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Diagram state lives in the browser by default. You choose when to export, share, or join collaboration-style room flows.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"multiple-input-modes\">Multiple input modes\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#multiple-input-modes\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Multiple input modes”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>OpenFlowKit does not force a single source of truth. You can work visually, with AI, through OpenFlow DSL, through Mermaid, or from structured imports.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"editable-outputs\">Editable outputs\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#editable-outputs\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Editable outputs”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Generated and imported diagrams come back into the same editable canvas model rather than becoming dead screenshots.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"start-here\">Start here\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#start-here\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Start here”\u003C/span>\u003C/a>\u003C/div>\n\u003Cul>\n\u003Cli>Read \u003Ca href=\"/quick-start/\">Quick Start\u003C/a> for the fastest first-run workflow.\u003C/li>\n\u003Cli>Read \u003Ca href=\"/studio-overview/\">Studio Overview\u003C/a> for the AI, code, import, and lint flows.\u003C/li>\n\u003Cli>Read \u003Ca href=\"/choose-input-mode/\">Choose an Input Mode\u003C/a> if you are not sure where to start.\u003C/li>\n\u003C/ul>",{"headings":621,"localImagePaths":646,"remoteImagePaths":647,"frontmatter":648,"imagePaths":649},[622,625,628,631,634,637,640,643],{"depth":30,"slug":623,"text":624},"what-openflowkit-is-good-at","What OpenFlowKit is good at",{"depth":30,"slug":626,"text":627},"core-product-surfaces","Core product surfaces",{"depth":30,"slug":629,"text":630},"diagram-families-in-the-app","Diagram families in the app",{"depth":30,"slug":632,"text":633},"core-product-concepts","Core product concepts",{"depth":37,"slug":635,"text":636},"local-first-by-default","Local-first by default",{"depth":37,"slug":638,"text":639},"multiple-input-modes","Multiple input modes",{"depth":37,"slug":641,"text":642},"editable-outputs","Editable outputs",{"depth":30,"slug":644,"text":645},"start-here","Start here",[],[],{"draft":20,"title":610,"description":611},[],"keyboard-shortcuts",{"id":650,"data":652,"body":658,"filePath":659,"digest":660,"rendered":661},{"title":653,"description":654,"editUrl":16,"head":655,"template":18,"sidebar":656,"pagefind":16,"draft":20},"Keyboard Shortcuts","Reference the current keyboard shortcuts for editing, navigation, and diagram authoring in OpenFlowKit.",[],{"hidden":20,"attrs":657},{},"These are the current shortcut groups defined by the app.\n\n## Essentials\n\n| Action | macOS | Windows/Linux |\n| --- | --- | --- |\n| Undo | `Cmd + Z` | `Ctrl + Z` |\n| Redo | `Cmd + Shift + Z` | `Ctrl + Shift + Z` |\n| Select all | `Cmd + A` | `Ctrl + A` |\n| Delete selection | `Delete` | `Backspace` |\n\n## Manipulation\n\n| Action | macOS | Windows/Linux |\n| --- | --- | --- |\n| Multi-select | `Shift + Click` | `Shift + Click` |\n| Selection box | `Shift + Drag` | `Shift + Drag` |\n| Duplicate | `Cmd + D` | `Ctrl + D` |\n| Duplicate-drag | `Opt + Drag` | `Alt + Drag` |\n| Copy | `Cmd + C` | `Ctrl + C` |\n| Paste | `Cmd + V` | `Ctrl + V` |\n| Group selection | `Cmd + G` | `Ctrl + G` |\n\n## Nodes\n\n| Action | macOS | Windows/Linux |\n| --- | --- | --- |\n| Add mind map child | `Tab` | `Tab` |\n| Add mind map sibling | `Enter` | `Enter` |\n| Rename selection | `F2` | `F2` |\n\n## Navigation\n\n| Action | macOS | Windows/Linux |\n| --- | --- | --- |\n| Open Command Center | `Cmd + K` | `Ctrl + K` |\n| Fit view | `Shift + 1` | `Shift + 1` |\n\n## Notes\n\n- Shortcut availability depends on editor focus and current mode.\n- Use the [Command Center](/command-center/) for many actions that do not need a dedicated shortcut.","src/content/docs/keyboard-shortcuts.md","bb85ed48f211c31c",{"html":662,"metadata":663},"\u003Cp>These are the current shortcut groups defined by the app.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"essentials\">Essentials\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#essentials\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Essentials”\u003C/span>\u003C/a>\u003C/div>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>Action\u003C/th>\u003Cth>macOS\u003C/th>\u003Cth>Windows/Linux\u003C/th>\u003C/tr>\u003C/thead>\u003Ctbody>\u003Ctr>\u003Ctd>Undo\u003C/td>\u003Ctd>\u003Ccode dir=\"auto\">Cmd + Z\u003C/code>\u003C/td>\u003Ctd>\u003Ccode dir=\"auto\">Ctrl + Z\u003C/code>\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>Redo\u003C/td>\u003Ctd>\u003Ccode dir=\"auto\">Cmd + Shift + Z\u003C/code>\u003C/td>\u003Ctd>\u003Ccode dir=\"auto\">Ctrl + Shift + Z\u003C/code>\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>Select all\u003C/td>\u003Ctd>\u003Ccode dir=\"auto\">Cmd + A\u003C/code>\u003C/td>\u003Ctd>\u003Ccode dir=\"auto\">Ctrl + A\u003C/code>\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>Delete selection\u003C/td>\u003Ctd>\u003Ccode dir=\"auto\">Delete\u003C/code>\u003C/td>\u003Ctd>\u003Ccode dir=\"auto\">Backspace\u003C/code>\u003C/td>\u003C/tr>\u003C/tbody>\u003C/table>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"manipulation\">Manipulation\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#manipulation\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Manipulation”\u003C/span>\u003C/a>\u003C/div>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>Action\u003C/th>\u003Cth>macOS\u003C/th>\u003Cth>Windows/Linux\u003C/th>\u003C/tr>\u003C/thead>\u003Ctbody>\u003Ctr>\u003Ctd>Multi-select\u003C/td>\u003Ctd>\u003Ccode dir=\"auto\">Shift + Click\u003C/code>\u003C/td>\u003Ctd>\u003Ccode dir=\"auto\">Shift + Click\u003C/code>\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>Selection box\u003C/td>\u003Ctd>\u003Ccode dir=\"auto\">Shift + Drag\u003C/code>\u003C/td>\u003Ctd>\u003Ccode dir=\"auto\">Shift + Drag\u003C/code>\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>Duplicate\u003C/td>\u003Ctd>\u003Ccode dir=\"auto\">Cmd + D\u003C/code>\u003C/td>\u003Ctd>\u003Ccode dir=\"auto\">Ctrl + D\u003C/code>\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>Duplicate-drag\u003C/td>\u003Ctd>\u003Ccode dir=\"auto\">Opt + Drag\u003C/code>\u003C/td>\u003Ctd>\u003Ccode dir=\"auto\">Alt + Drag\u003C/code>\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>Copy\u003C/td>\u003Ctd>\u003Ccode dir=\"auto\">Cmd + C\u003C/code>\u003C/td>\u003Ctd>\u003Ccode dir=\"auto\">Ctrl + C\u003C/code>\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>Paste\u003C/td>\u003Ctd>\u003Ccode dir=\"auto\">Cmd + V\u003C/code>\u003C/td>\u003Ctd>\u003Ccode dir=\"auto\">Ctrl + V\u003C/code>\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>Group selection\u003C/td>\u003Ctd>\u003Ccode dir=\"auto\">Cmd + G\u003C/code>\u003C/td>\u003Ctd>\u003Ccode dir=\"auto\">Ctrl + G\u003C/code>\u003C/td>\u003C/tr>\u003C/tbody>\u003C/table>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"nodes\">Nodes\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#nodes\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Nodes”\u003C/span>\u003C/a>\u003C/div>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>Action\u003C/th>\u003Cth>macOS\u003C/th>\u003Cth>Windows/Linux\u003C/th>\u003C/tr>\u003C/thead>\u003Ctbody>\u003Ctr>\u003Ctd>Add mind map child\u003C/td>\u003Ctd>\u003Ccode dir=\"auto\">Tab\u003C/code>\u003C/td>\u003Ctd>\u003Ccode dir=\"auto\">Tab\u003C/code>\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>Add mind map sibling\u003C/td>\u003Ctd>\u003Ccode dir=\"auto\">Enter\u003C/code>\u003C/td>\u003Ctd>\u003Ccode dir=\"auto\">Enter\u003C/code>\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>Rename selection\u003C/td>\u003Ctd>\u003Ccode dir=\"auto\">F2\u003C/code>\u003C/td>\u003Ctd>\u003Ccode dir=\"auto\">F2\u003C/code>\u003C/td>\u003C/tr>\u003C/tbody>\u003C/table>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"navigation\">Navigation\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#navigation\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Navigation”\u003C/span>\u003C/a>\u003C/div>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>Action\u003C/th>\u003Cth>macOS\u003C/th>\u003Cth>Windows/Linux\u003C/th>\u003C/tr>\u003C/thead>\u003Ctbody>\u003Ctr>\u003Ctd>Open Command Center\u003C/td>\u003Ctd>\u003Ccode dir=\"auto\">Cmd + K\u003C/code>\u003C/td>\u003Ctd>\u003Ccode dir=\"auto\">Ctrl + K\u003C/code>\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>Fit view\u003C/td>\u003Ctd>\u003Ccode dir=\"auto\">Shift + 1\u003C/code>\u003C/td>\u003Ctd>\u003Ccode dir=\"auto\">Shift + 1\u003C/code>\u003C/td>\u003C/tr>\u003C/tbody>\u003C/table>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"notes\">Notes\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#notes\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Notes”\u003C/span>\u003C/a>\u003C/div>\n\u003Cul>\n\u003Cli>Shortcut availability depends on editor focus and current mode.\u003C/li>\n\u003Cli>Use the \u003Ca href=\"/command-center/\">Command Center\u003C/a> for many actions that do not need a dedicated shortcut.\u003C/li>\n\u003C/ul>",{"headings":664,"localImagePaths":678,"remoteImagePaths":679,"frontmatter":680,"imagePaths":681},[665,668,671,674,675],{"depth":30,"slug":666,"text":667},"essentials","Essentials",{"depth":30,"slug":669,"text":670},"manipulation","Manipulation",{"depth":30,"slug":672,"text":673},"nodes","Nodes",{"depth":30,"slug":34,"text":35},{"depth":30,"slug":676,"text":677},"notes","Notes",[],[],{"draft":20,"title":653,"description":654},[],"mermaid-vs-openflow",{"id":682,"data":684,"body":690,"filePath":691,"digest":692,"rendered":693},{"title":685,"description":686,"editUrl":16,"head":687,"template":18,"sidebar":688,"pagefind":16,"draft":20},"Mermaid vs OpenFlow","Decide whether Mermaid or OpenFlow DSL is the better text representation for your OpenFlowKit workflow.",[],{"hidden":20,"attrs":689},{},"Mermaid and OpenFlow DSL solve adjacent but different problems in OpenFlowKit.\n\n## Choose Mermaid when\n\n- the diagram must live in Markdown, docs sites, or README files\n- your team already reviews Mermaid in pull requests\n- external tooling expects Mermaid syntax\n\n## Choose OpenFlow DSL when\n\n- the diagram is primarily maintained inside OpenFlowKit\n- you want a format closer to the native graph model\n- you want fewer compatibility constraints during editing\n- you want a better target for OpenFlowKit-specific AI and Studio workflows\n\n## The real difference\n\nMermaid is the better portability format.\n\nOpenFlow DSL is the better editor-native format.\n\nThat usually means:\n\n- Mermaid is better for publication and interoperability\n- OpenFlow DSL is better for fidelity inside the product\n\n## Recommended team pattern\n\nIf you need both:\n\n- treat JSON or OpenFlow DSL as the editing master\n- publish Mermaid as a downstream representation when required\n\nThis avoids losing detail every time the diagram moves between ecosystems.\n\n## Related pages\n\n- [Mermaid Integration](/mermaid-integration/)\n- [OpenFlow DSL](/openflow-dsl/)\n- [Choose an Export Format](/choose-export-format/)","src/content/docs/mermaid-vs-openflow.md","1e99fc06d19af83c",{"html":694,"metadata":695},"\u003Cp>Mermaid and OpenFlow DSL solve adjacent but different problems in OpenFlowKit.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"choose-mermaid-when\">Choose Mermaid when\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#choose-mermaid-when\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Choose Mermaid when”\u003C/span>\u003C/a>\u003C/div>\n\u003Cul>\n\u003Cli>the diagram must live in Markdown, docs sites, or README files\u003C/li>\n\u003Cli>your team already reviews Mermaid in pull requests\u003C/li>\n\u003Cli>external tooling expects Mermaid syntax\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"choose-openflow-dsl-when\">Choose OpenFlow DSL when\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#choose-openflow-dsl-when\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Choose OpenFlow DSL when”\u003C/span>\u003C/a>\u003C/div>\n\u003Cul>\n\u003Cli>the diagram is primarily maintained inside OpenFlowKit\u003C/li>\n\u003Cli>you want a format closer to the native graph model\u003C/li>\n\u003Cli>you want fewer compatibility constraints during editing\u003C/li>\n\u003Cli>you want a better target for OpenFlowKit-specific AI and Studio workflows\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"the-real-difference\">The real difference\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#the-real-difference\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “The real difference”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Mermaid is the better portability format.\u003C/p>\n\u003Cp>OpenFlow DSL is the better editor-native format.\u003C/p>\n\u003Cp>That usually means:\u003C/p>\n\u003Cul>\n\u003Cli>Mermaid is better for publication and interoperability\u003C/li>\n\u003Cli>OpenFlow DSL is better for fidelity inside the product\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"recommended-team-pattern\">Recommended team pattern\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#recommended-team-pattern\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Recommended team pattern”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>If you need both:\u003C/p>\n\u003Cul>\n\u003Cli>treat JSON or OpenFlow DSL as the editing master\u003C/li>\n\u003Cli>publish Mermaid as a downstream representation when required\u003C/li>\n\u003C/ul>\n\u003Cp>This avoids losing detail every time the diagram moves between ecosystems.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"related-pages\">Related pages\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#related-pages\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Related pages”\u003C/span>\u003C/a>\u003C/div>\n\u003Cul>\n\u003Cli>\u003Ca href=\"/mermaid-integration/\">Mermaid Integration\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"/openflow-dsl/\">OpenFlow DSL\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"/choose-export-format/\">Choose an Export Format\u003C/a>\u003C/li>\n\u003C/ul>",{"headings":696,"localImagePaths":710,"remoteImagePaths":711,"frontmatter":712,"imagePaths":713},[697,700,703,706,709],{"depth":30,"slug":698,"text":699},"choose-mermaid-when","Choose Mermaid when",{"depth":30,"slug":701,"text":702},"choose-openflow-dsl-when","Choose OpenFlow DSL when",{"depth":30,"slug":704,"text":705},"the-real-difference","The real difference",{"depth":30,"slug":707,"text":708},"recommended-team-pattern","Recommended team pattern",{"depth":30,"slug":96,"text":97},[],[],{"draft":20,"title":685,"description":686},[],"mermaid-integration",{"id":714,"data":716,"body":722,"filePath":723,"digest":724,"rendered":725},{"title":717,"description":718,"editUrl":16,"head":719,"template":18,"sidebar":720,"pagefind":16,"draft":20},"Mermaid Integration","Import, edit, validate, and export Mermaid while keeping OpenFlowKit as the visual editing workspace.",[],{"hidden":20,"attrs":721},{},"OpenFlowKit includes Mermaid import, editing, and export paths, but Mermaid should be treated as a compatibility workflow rather than the editor's only source of truth.\n\n## What Mermaid support is for\n\nUse Mermaid support when:\n\n- you already have Mermaid diagrams in docs or repos\n- you want a Markdown-friendly text format\n- another system in your workflow expects Mermaid syntax\n\n## Mermaid in Studio\n\nThe Studio code rail has a dedicated Mermaid mode. From there you can:\n\n- view Mermaid generated from the current canvas\n- edit Mermaid directly\n- apply the parsed graph back into the editor\n- review diagnostics when parsing fails\n\nThis makes Mermaid useful as a bridge between documentation-centric workflows and a richer visual editor.\n\n## Mermaid export\n\nThe export menu can copy Mermaid text for the current graph to the clipboard. That is especially useful when a diagram needs to live in Markdown or Git-based documentation after you finish editing it visually.\n\n## Fidelity expectations\n\nMermaid round-tripping is useful, but not every OpenFlowKit concept maps perfectly. Be especially careful with:\n\n- highly visual hand-tuned layouts\n- provider-specific architecture icon presentation\n- family-specific semantics that are richer in the native graph model\n\nIf exact recovery matters, export JSON alongside Mermaid.\n\n## Recommended pattern\n\nUse Mermaid as the publishing or portability layer, not always the editing master. If you need both portability and fidelity, keep JSON or OpenFlow DSL as the authoritative version and regenerate Mermaid when needed.\n\n## Related pages\n\n- [Mermaid vs OpenFlow](/mermaid-vs-openflow/)\n- [OpenFlow DSL](/openflow-dsl/)\n- [Choose an Export Format](/choose-export-format/)","src/content/docs/mermaid-integration.md","dcd8d7c0a7b1375a",{"html":726,"metadata":727},"\u003Cp>OpenFlowKit includes Mermaid import, editing, and export paths, but Mermaid should be treated as a compatibility workflow rather than the editor’s only source of truth.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"what-mermaid-support-is-for\">What Mermaid support is for\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#what-mermaid-support-is-for\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “What Mermaid support is for”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Use Mermaid support when:\u003C/p>\n\u003Cul>\n\u003Cli>you already have Mermaid diagrams in docs or repos\u003C/li>\n\u003Cli>you want a Markdown-friendly text format\u003C/li>\n\u003Cli>another system in your workflow expects Mermaid syntax\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"mermaid-in-studio\">Mermaid in Studio\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#mermaid-in-studio\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Mermaid in Studio”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>The Studio code rail has a dedicated Mermaid mode. From there you can:\u003C/p>\n\u003Cul>\n\u003Cli>view Mermaid generated from the current canvas\u003C/li>\n\u003Cli>edit Mermaid directly\u003C/li>\n\u003Cli>apply the parsed graph back into the editor\u003C/li>\n\u003Cli>review diagnostics when parsing fails\u003C/li>\n\u003C/ul>\n\u003Cp>This makes Mermaid useful as a bridge between documentation-centric workflows and a richer visual editor.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"mermaid-export\">Mermaid export\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#mermaid-export\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Mermaid export”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>The export menu can copy Mermaid text for the current graph to the clipboard. That is especially useful when a diagram needs to live in Markdown or Git-based documentation after you finish editing it visually.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"fidelity-expectations\">Fidelity expectations\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#fidelity-expectations\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Fidelity expectations”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Mermaid round-tripping is useful, but not every OpenFlowKit concept maps perfectly. Be especially careful with:\u003C/p>\n\u003Cul>\n\u003Cli>highly visual hand-tuned layouts\u003C/li>\n\u003Cli>provider-specific architecture icon presentation\u003C/li>\n\u003Cli>family-specific semantics that are richer in the native graph model\u003C/li>\n\u003C/ul>\n\u003Cp>If exact recovery matters, export JSON alongside Mermaid.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"recommended-pattern\">Recommended pattern\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#recommended-pattern\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Recommended pattern”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Use Mermaid as the publishing or portability layer, not always the editing master. If you need both portability and fidelity, keep JSON or OpenFlow DSL as the authoritative version and regenerate Mermaid when needed.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"related-pages\">Related pages\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#related-pages\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Related pages”\u003C/span>\u003C/a>\u003C/div>\n\u003Cul>\n\u003Cli>\u003Ca href=\"/mermaid-vs-openflow/\">Mermaid vs OpenFlow\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"/openflow-dsl/\">OpenFlow DSL\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"/choose-export-format/\">Choose an Export Format\u003C/a>\u003C/li>\n\u003C/ul>",{"headings":728,"localImagePaths":743,"remoteImagePaths":744,"frontmatter":745,"imagePaths":746},[729,732,735,738,741,742],{"depth":30,"slug":730,"text":731},"what-mermaid-support-is-for","What Mermaid support is for",{"depth":30,"slug":733,"text":734},"mermaid-in-studio","Mermaid in Studio",{"depth":30,"slug":736,"text":737},"mermaid-export","Mermaid export",{"depth":30,"slug":739,"text":740},"fidelity-expectations","Fidelity expectations",{"depth":30,"slug":127,"text":128},{"depth":30,"slug":96,"text":97},[],[],{"draft":20,"title":717,"description":718},[],"local-first-diagramming",{"id":747,"data":749,"body":755,"filePath":756,"digest":757,"rendered":758},{"title":750,"description":751,"editUrl":16,"head":752,"template":18,"sidebar":753,"pagefind":16,"draft":20},"Local-First Diagramming","Understand what local-first means in OpenFlowKit and how it affects privacy, sharing, and day-to-day diagram work.",[],{"hidden":20,"attrs":754},{},"Local-first means your diagram work starts in the browser, not on a required hosted backend. In OpenFlowKit, that changes how you think about privacy, portability, and failure modes.\n\n## What local-first means here\n\nIn practical terms:\n\n- your diagram state lives in the browser by default\n- AI usage can follow a BYOK model instead of mandatory platform credits\n- collaboration can fall back to local-only behavior instead of blocking all work\n- export is explicit, so you decide when a diagram leaves the current device\n\n## Why it matters\n\nLocal-first workflows are useful when:\n\n- you are working with internal architecture diagrams\n- you do not want to depend on account creation for first use\n- you need a browser-native tool that still works well as a solo editor\n- you want control over when artifacts become shared assets\n\n## What it does not mean\n\nLocal-first does not mean isolated forever. OpenFlowKit still supports:\n\n- exports for images, JSON, text formats, and design-tool handoff\n- collaboration rooms and share links\n- embed flows for docs and GitHub-style usage\n\nIt means those are explicit actions instead of prerequisites.\n\n## Recommended next reads\n\n- [Introduction](/introduction/)\n- [Collaboration & Sharing](/collaboration-sharing/)\n- [Choose an Export Format](/choose-export-format/)","src/content/docs/local-first-diagramming.md","f5db44ee6e2b8f70",{"html":759,"metadata":760},"\u003Cp>Local-first means your diagram work starts in the browser, not on a required hosted backend. In OpenFlowKit, that changes how you think about privacy, portability, and failure modes.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"what-local-first-means-here\">What local-first means here\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#what-local-first-means-here\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “What local-first means here”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>In practical terms:\u003C/p>\n\u003Cul>\n\u003Cli>your diagram state lives in the browser by default\u003C/li>\n\u003Cli>AI usage can follow a BYOK model instead of mandatory platform credits\u003C/li>\n\u003Cli>collaboration can fall back to local-only behavior instead of blocking all work\u003C/li>\n\u003Cli>export is explicit, so you decide when a diagram leaves the current device\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"why-it-matters\">Why it matters\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#why-it-matters\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Why it matters”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Local-first workflows are useful when:\u003C/p>\n\u003Cul>\n\u003Cli>you are working with internal architecture diagrams\u003C/li>\n\u003Cli>you do not want to depend on account creation for first use\u003C/li>\n\u003Cli>you need a browser-native tool that still works well as a solo editor\u003C/li>\n\u003Cli>you want control over when artifacts become shared assets\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"what-it-does-not-mean\">What it does not mean\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#what-it-does-not-mean\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “What it does not mean”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Local-first does not mean isolated forever. OpenFlowKit still supports:\u003C/p>\n\u003Cul>\n\u003Cli>exports for images, JSON, text formats, and design-tool handoff\u003C/li>\n\u003Cli>collaboration rooms and share links\u003C/li>\n\u003Cli>embed flows for docs and GitHub-style usage\u003C/li>\n\u003C/ul>\n\u003Cp>It means those are explicit actions instead of prerequisites.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"recommended-next-reads\">Recommended next reads\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#recommended-next-reads\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Recommended next reads”\u003C/span>\u003C/a>\u003C/div>\n\u003Cul>\n\u003Cli>\u003Ca href=\"/introduction/\">Introduction\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"/collaboration-sharing/\">Collaboration &#x26; Sharing\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"/choose-export-format/\">Choose an Export Format\u003C/a>\u003C/li>\n\u003C/ul>",{"headings":761,"localImagePaths":772,"remoteImagePaths":773,"frontmatter":774,"imagePaths":775},[762,765,766,769],{"depth":30,"slug":763,"text":764},"what-local-first-means-here","What local-first means here",{"depth":30,"slug":416,"text":417},{"depth":30,"slug":767,"text":768},"what-it-does-not-mean","What it does not mean",{"depth":30,"slug":770,"text":771},"recommended-next-reads","Recommended next reads",[],[],{"draft":20,"title":750,"description":751},[],"node-types",{"id":776,"data":778,"body":784,"filePath":785,"digest":786,"rendered":787},{"title":779,"description":780,"editUrl":16,"head":781,"template":18,"sidebar":782,"pagefind":16,"draft":20},"Node Types","Understand the core node families available in OpenFlowKit and how they map to different diagram workflows.",[],{"hidden":20,"attrs":783},{},"OpenFlowKit supports both generic and family-specific nodes. The node model in the app covers flow, architecture, mind map, journey, class, ER, annotation, grouping, and media use cases.\n\n## Core node families\n\n### Flow nodes\n\nThese are the default building blocks for most workflows:\n\n- `start`\n- `process`\n- `decision`\n- `end`\n- `custom`\n\nUse them when the diagram is primarily procedural and you do not need a richer family model.\n\n### Mind map nodes\n\nMind map nodes carry extra structure such as:\n\n- depth\n- parent id\n- left/right side\n- branch style\n\nThey are better than plain flow nodes when hierarchy and branch structure matter more than route semantics.\n\n### Architecture and asset-backed nodes\n\nArchitecture-oriented diagrams can use provider-backed icon nodes and related visual grouping structures such as sections and boundaries.\n\nThese are useful when the diagram should read like a system topology instead of a generic flowchart.\n\n### Journey and experience nodes\n\nJourney-oriented nodes help when the diagram represents user or process stages instead of system topology. They are a better fit when actor, stage, and score-like information matter.\n\n### Media and wireframe nodes\n\nOpenFlowKit also supports image nodes and browser/mobile wireframe-style nodes for product, UX, and annotated architecture workflows.\n\n## How to choose\n\nChoose the node family that matches the semantics of the work, not just the shape you want on the canvas.\n\n- Use flow nodes for generic process logic.\n- Use architecture nodes for system and infrastructure modeling.\n- Use mind map nodes for branching ideation.\n- Use journey nodes for experience mapping.\n\n## Related pages\n\n- [Diagram Families](/diagram-families/)\n- [Properties Panel](/properties-panel/)\n- [Templates & Starter Flows](/templates-assets/)","src/content/docs/node-types.md","652c6df2ea8cc805",{"html":788,"metadata":789},"\u003Cp>OpenFlowKit supports both generic and family-specific nodes. The node model in the app covers flow, architecture, mind map, journey, class, ER, annotation, grouping, and media use cases.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"core-node-families\">Core node families\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#core-node-families\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Core node families”\u003C/span>\u003C/a>\u003C/div>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"flow-nodes\">Flow nodes\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#flow-nodes\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Flow nodes”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>These are the default building blocks for most workflows:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Ccode dir=\"auto\">start\u003C/code>\u003C/li>\n\u003Cli>\u003Ccode dir=\"auto\">process\u003C/code>\u003C/li>\n\u003Cli>\u003Ccode dir=\"auto\">decision\u003C/code>\u003C/li>\n\u003Cli>\u003Ccode dir=\"auto\">end\u003C/code>\u003C/li>\n\u003Cli>\u003Ccode dir=\"auto\">custom\u003C/code>\u003C/li>\n\u003C/ul>\n\u003Cp>Use them when the diagram is primarily procedural and you do not need a richer family model.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"mind-map-nodes\">Mind map nodes\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#mind-map-nodes\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Mind map nodes”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Mind map nodes carry extra structure such as:\u003C/p>\n\u003Cul>\n\u003Cli>depth\u003C/li>\n\u003Cli>parent id\u003C/li>\n\u003Cli>left/right side\u003C/li>\n\u003Cli>branch style\u003C/li>\n\u003C/ul>\n\u003Cp>They are better than plain flow nodes when hierarchy and branch structure matter more than route semantics.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"architecture-and-asset-backed-nodes\">Architecture and asset-backed nodes\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#architecture-and-asset-backed-nodes\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Architecture and asset-backed nodes”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Architecture-oriented diagrams can use provider-backed icon nodes and related visual grouping structures such as sections and boundaries.\u003C/p>\n\u003Cp>These are useful when the diagram should read like a system topology instead of a generic flowchart.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"journey-and-experience-nodes\">Journey and experience nodes\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#journey-and-experience-nodes\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Journey and experience nodes”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Journey-oriented nodes help when the diagram represents user or process stages instead of system topology. They are a better fit when actor, stage, and score-like information matter.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"media-and-wireframe-nodes\">Media and wireframe nodes\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#media-and-wireframe-nodes\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Media and wireframe nodes”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>OpenFlowKit also supports image nodes and browser/mobile wireframe-style nodes for product, UX, and annotated architecture workflows.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"how-to-choose\">How to choose\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#how-to-choose\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “How to choose”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Choose the node family that matches the semantics of the work, not just the shape you want on the canvas.\u003C/p>\n\u003Cul>\n\u003Cli>Use flow nodes for generic process logic.\u003C/li>\n\u003Cli>Use architecture nodes for system and infrastructure modeling.\u003C/li>\n\u003Cli>Use mind map nodes for branching ideation.\u003C/li>\n\u003Cli>Use journey nodes for experience mapping.\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"related-pages\">Related pages\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#related-pages\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Related pages”\u003C/span>\u003C/a>\u003C/div>\n\u003Cul>\n\u003Cli>\u003Ca href=\"/diagram-families/\">Diagram Families\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"/properties-panel/\">Properties Panel\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"/templates-assets/\">Templates &#x26; Starter Flows\u003C/a>\u003C/li>\n\u003C/ul>",{"headings":790,"localImagePaths":811,"remoteImagePaths":812,"frontmatter":813,"imagePaths":814},[791,794,797,800,803,806,809,810],{"depth":30,"slug":792,"text":793},"core-node-families","Core node families",{"depth":37,"slug":795,"text":796},"flow-nodes","Flow nodes",{"depth":37,"slug":798,"text":799},"mind-map-nodes","Mind map nodes",{"depth":37,"slug":801,"text":802},"architecture-and-asset-backed-nodes","Architecture and asset-backed nodes",{"depth":37,"slug":804,"text":805},"journey-and-experience-nodes","Journey and experience nodes",{"depth":37,"slug":807,"text":808},"media-and-wireframe-nodes","Media and wireframe nodes",{"depth":30,"slug":413,"text":414},{"depth":30,"slug":96,"text":97},[],[],{"draft":20,"title":779,"description":780},[],"payment-flow",{"id":815,"data":817,"body":823,"filePath":824,"digest":825,"rendered":826},{"title":818,"description":819,"editUrl":16,"head":820,"template":18,"sidebar":821,"pagefind":16,"draft":20},"Payment Flow Visualization","Model subscription, checkout, retry, and exception-heavy payment systems in OpenFlowKit.",[],{"hidden":20,"attrs":822},{},"Payment systems are one of the best use cases for OpenFlowKit because they mix clear business stages with asynchronous branches, retries, and exception handling.\n\nThey are also easy to get wrong if the diagram only shows the happy path. OpenFlowKit is a good fit because it lets you start rough, then keep adding operational detail.\n\n## What a useful payment diagram should include\n\nDo not stop at the happy path. Most payment diagrams need:\n\n- entry event\n- authorization or charge attempt\n- success and failure branches\n- retry logic\n- manual review path\n- customer notification path\n- final account state\n\nDepending on the workflow, you may also need:\n\n- fraud or risk review\n- webhook handling\n- customer notifications\n- ledger or billing-state updates\n\n## Suggested node pattern\n\nFor a typical subscription or checkout diagram:\n\n- `start` for invoice due or checkout initiated\n- `process` for charge, webhook handling, notifications, and retries\n- `decision` for gateway outcomes\n- `end` for terminal account states\n\n## Strong starting options\n\nYou can begin from:\n\n- a blank flowchart canvas\n- a payment or SaaS-oriented template\n- an AI prompt in FlowPilot\n- OpenFlow DSL if the flow should be reviewed as text\n\n## Example prompt\n\n```text\nCreate a payment recovery flow for a SaaS subscription.\nInclude invoice due, charge attempt, charge success decision,\nsmart retries, request updated card, manual fraud review,\ncustomer notification, subscription active, and account downgrade.\n```\n\n## Recommended workflow\n\n1. generate or sketch the happy path\n2. add all failure and retry branches\n3. label edges so business outcomes are explicit\n4. use layout to normalize spacing\n5. export a visual format for stakeholders and JSON for editable retention\n\n## Why this works well in OpenFlowKit\n\n- branch labeling is easy on edges\n- auto layout cleans up decision-heavy graphs\n- JSON export gives you a high-fidelity editable backup\n- Mermaid and PlantUML export help when finance or platform teams need docs-friendly formats\n\n## Recommended review pattern\n\nAfter drafting:\n\n1. label every branch edge\n2. verify timeout and retry behavior explicitly\n3. add notes for webhook or gateway dependencies\n4. save a manual snapshot before larger revisions\n\n- **Shareability**: Everyone from the PM to the backend engineer needs to see the same flow.\n- **Clarity**: Mapping out happy paths, failures, and webhook retries visually is much easier than reading through Stripe API documentation.\n- **Speed**: Use the [Command Center](/docs/en/command-center) and AI to generate the boilerplate flow in seconds.\n\n## Example: Stripe Checkout Flow\n\nHere is a common Stripe Checkout implementation mapped out. Notice how we use different node shapes to distinguish between client-side actions, server-side actions, and third-party API calls.\n\n```mermaid\nsequenceDiagram\n    participant User\n    participant Client as Frontend (React)\n    participant Server as Backend (Node.js)\n    participant Stripe\n    \n    User->>Client: Clicks \"Pay $50\"\n    Client->>Server: POST /create-checkout-session\n    Server->>Stripe: API Request: Create Session\n    Stripe-->>Server: Returns Session ID & URL\n    Server-->>Client: Returns Checkout URL\n    \n    Client->>User: Redirects to Stripe Checkout\n    User->>Stripe: Enters Credit Card Info\n    \n    alt Payment Success\n        Stripe-->>User: Redirect to Success URL\n        Stripe->>Server: Webhook event: checkout.session.completed\n        Server->>Server: Fulfills Order / Updates DB\n    else Payment Failure\n        Stripe-->>User: Redirect to Cancel URL\n        User->>Client: Try Again\n    end\n```\n\n## Tips for Better Payment Diagrams\n\n1. **Use Swimlanes**: Group actions by responsibility. Put the User in one lane, your API in another, and the Payment Processor (Stripe/PayPal) in a third.\n2. **Color Code**: Use green for happy paths (success), red for failure states (declines/insufficient funds), and gray for retries.\n3. **Explicit Callouts**: Use the **Annotation Node** to document exact webhook payloads or secret keys needed at specific steps.\n\n## AI Prompt Example\n\nTo generate a similar flow using [Ask Flowpilot](/docs/en/ask-flowpilot):\n\n> `\"Generate a flowchart showing a subscription payment flow using Braintree. Include the client requesting a client token, the server generating it, the user submitting a nonce, and the final server-side transaction creation. Show both success and failure branches.\"`\n\nNeed to present this to your team? Try the [Playback History](/docs/en/playback-history) feature to walk through the payment sequence step-by-step.","src/content/docs/payment-flow.md","ca6dd5261c4251e6",{"html":827,"metadata":828},"\u003Cp>Payment systems are one of the best use cases for OpenFlowKit because they mix clear business stages with asynchronous branches, retries, and exception handling.\u003C/p>\n\u003Cp>They are also easy to get wrong if the diagram only shows the happy path. OpenFlowKit is a good fit because it lets you start rough, then keep adding operational detail.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"what-a-useful-payment-diagram-should-include\">What a useful payment diagram should include\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#what-a-useful-payment-diagram-should-include\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “What a useful payment diagram should include”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Do not stop at the happy path. Most payment diagrams need:\u003C/p>\n\u003Cul>\n\u003Cli>entry event\u003C/li>\n\u003Cli>authorization or charge attempt\u003C/li>\n\u003Cli>success and failure branches\u003C/li>\n\u003Cli>retry logic\u003C/li>\n\u003Cli>manual review path\u003C/li>\n\u003Cli>customer notification path\u003C/li>\n\u003Cli>final account state\u003C/li>\n\u003C/ul>\n\u003Cp>Depending on the workflow, you may also need:\u003C/p>\n\u003Cul>\n\u003Cli>fraud or risk review\u003C/li>\n\u003Cli>webhook handling\u003C/li>\n\u003Cli>customer notifications\u003C/li>\n\u003Cli>ledger or billing-state updates\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"suggested-node-pattern\">Suggested node pattern\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#suggested-node-pattern\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Suggested node pattern”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>For a typical subscription or checkout diagram:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Ccode dir=\"auto\">start\u003C/code> for invoice due or checkout initiated\u003C/li>\n\u003Cli>\u003Ccode dir=\"auto\">process\u003C/code> for charge, webhook handling, notifications, and retries\u003C/li>\n\u003Cli>\u003Ccode dir=\"auto\">decision\u003C/code> for gateway outcomes\u003C/li>\n\u003Cli>\u003Ccode dir=\"auto\">end\u003C/code> for terminal account states\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"strong-starting-options\">Strong starting options\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#strong-starting-options\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Strong starting options”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>You can begin from:\u003C/p>\n\u003Cul>\n\u003Cli>a blank flowchart canvas\u003C/li>\n\u003Cli>a payment or SaaS-oriented template\u003C/li>\n\u003Cli>an AI prompt in FlowPilot\u003C/li>\n\u003Cli>OpenFlow DSL if the flow should be reviewed as text\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"example-prompt\">Example prompt\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#example-prompt\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Example prompt”\u003C/span>\u003C/a>\u003C/div>\n\u003Cdiv class=\"expressive-code\">\u003Clink rel=\"stylesheet\" href=\"/_astro/ec.v4551.css\">\u003Cscript type=\"module\" src=\"/_astro/ec.0vx5m.js\">\u003C/script>\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"text\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">Create a payment recovery flow for a SaaS subscription.\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">Include invoice due, charge attempt, charge success decision,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">smart retries, request updated card, manual fraud review,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">customer notification, subscription active, and account downgrade.\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"Create a payment recovery flow for a SaaS subscription.Include invoice due, charge attempt, charge success decision,smart retries, request updated card, manual fraud review,customer notification, subscription active, and account downgrade.\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"recommended-workflow\">Recommended workflow\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#recommended-workflow\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Recommended workflow”\u003C/span>\u003C/a>\u003C/div>\n\u003Col>\n\u003Cli>generate or sketch the happy path\u003C/li>\n\u003Cli>add all failure and retry branches\u003C/li>\n\u003Cli>label edges so business outcomes are explicit\u003C/li>\n\u003Cli>use layout to normalize spacing\u003C/li>\n\u003Cli>export a visual format for stakeholders and JSON for editable retention\u003C/li>\n\u003C/ol>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"why-this-works-well-in-openflowkit\">Why this works well in OpenFlowKit\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#why-this-works-well-in-openflowkit\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Why this works well in OpenFlowKit”\u003C/span>\u003C/a>\u003C/div>\n\u003Cul>\n\u003Cli>branch labeling is easy on edges\u003C/li>\n\u003Cli>auto layout cleans up decision-heavy graphs\u003C/li>\n\u003Cli>JSON export gives you a high-fidelity editable backup\u003C/li>\n\u003Cli>Mermaid and PlantUML export help when finance or platform teams need docs-friendly formats\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"recommended-review-pattern\">Recommended review pattern\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#recommended-review-pattern\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Recommended review pattern”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>After drafting:\u003C/p>\n\u003Col>\n\u003Cli>label every branch edge\u003C/li>\n\u003Cli>verify timeout and retry behavior explicitly\u003C/li>\n\u003Cli>add notes for webhook or gateway dependencies\u003C/li>\n\u003Cli>save a manual snapshot before larger revisions\u003C/li>\n\u003C/ol>\n\u003Cul>\n\u003Cli>\u003Cstrong>Shareability\u003C/strong>: Everyone from the PM to the backend engineer needs to see the same flow.\u003C/li>\n\u003Cli>\u003Cstrong>Clarity\u003C/strong>: Mapping out happy paths, failures, and webhook retries visually is much easier than reading through Stripe API documentation.\u003C/li>\n\u003Cli>\u003Cstrong>Speed\u003C/strong>: Use the \u003Ca href=\"/docs/en/command-center\">Command Center\u003C/a> and AI to generate the boilerplate flow in seconds.\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"example-stripe-checkout-flow\">Example: Stripe Checkout Flow\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#example-stripe-checkout-flow\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Example: Stripe Checkout Flow”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Here is a common Stripe Checkout implementation mapped out. Notice how we use different node shapes to distinguish between client-side actions, server-side actions, and third-party API calls.\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"mermaid\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">sequenceDiagram\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">    \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">participant User\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">    \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">participant Client as Frontend (React)\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">    \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">participant Server as Backend (Node.js)\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">    \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">participant Stripe\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">    \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">User->>Client: Clicks \"Pay $50\"\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">    \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">Client->>Server: POST /create-checkout-session\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">    \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">Server->>Stripe: API Request: Create Session\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">    \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">Stripe-->>Server: Returns Session ID &#x26; URL\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">    \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">Server-->>Client: Returns Checkout URL\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">    \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">Client->>User: Redirects to Stripe Checkout\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">    \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">User->>Stripe: Enters Credit Card Info\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">    \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">alt Payment Success\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">        \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">Stripe-->>User: Redirect to Success URL\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">        \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">Stripe->>Server: Webhook event: checkout.session.completed\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">        \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">Server->>Server: Fulfills Order / Updates DB\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">    \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">else Payment Failure\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">        \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">Stripe-->>User: Redirect to Cancel URL\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">        \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">User->>Client: Try Again\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">    \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">end\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"sequenceDiagram    participant User    participant Client as Frontend (React)    participant Server as Backend (Node.js)    participant Stripe    User->>Client: Clicks &#x22;Pay $50&#x22;    Client->>Server: POST /create-checkout-session    Server->>Stripe: API Request: Create Session    Stripe-->>Server: Returns Session ID &#x26; URL    Server-->>Client: Returns Checkout URL    Client->>User: Redirects to Stripe Checkout    User->>Stripe: Enters Credit Card Info    alt Payment Success        Stripe-->>User: Redirect to Success URL        Stripe->>Server: Webhook event: checkout.session.completed        Server->>Server: Fulfills Order / Updates DB    else Payment Failure        Stripe-->>User: Redirect to Cancel URL        User->>Client: Try Again    end\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"tips-for-better-payment-diagrams\">Tips for Better Payment Diagrams\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#tips-for-better-payment-diagrams\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Tips for Better Payment Diagrams”\u003C/span>\u003C/a>\u003C/div>\n\u003Col>\n\u003Cli>\u003Cstrong>Use Swimlanes\u003C/strong>: Group actions by responsibility. Put the User in one lane, your API in another, and the Payment Processor (Stripe/PayPal) in a third.\u003C/li>\n\u003Cli>\u003Cstrong>Color Code\u003C/strong>: Use green for happy paths (success), red for failure states (declines/insufficient funds), and gray for retries.\u003C/li>\n\u003Cli>\u003Cstrong>Explicit Callouts\u003C/strong>: Use the \u003Cstrong>Annotation Node\u003C/strong> to document exact webhook payloads or secret keys needed at specific steps.\u003C/li>\n\u003C/ol>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"ai-prompt-example\">AI Prompt Example\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#ai-prompt-example\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “AI Prompt Example”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>To generate a similar flow using \u003Ca href=\"/docs/en/ask-flowpilot\">Ask Flowpilot\u003C/a>:\u003C/p>\n\u003Cblockquote>\n\u003Cp>\u003Ccode dir=\"auto\">\"Generate a flowchart showing a subscription payment flow using Braintree. Include the client requesting a client token, the server generating it, the user submitting a nonce, and the final server-side transaction creation. Show both success and failure branches.\"\u003C/code>\u003C/p>\n\u003C/blockquote>\n\u003Cp>Need to present this to your team? Try the \u003Ca href=\"/docs/en/playback-history\">Playback History\u003C/a> feature to walk through the payment sequence step-by-step.\u003C/p>",{"headings":829,"localImagePaths":856,"remoteImagePaths":857,"frontmatter":858,"imagePaths":859},[830,833,836,839,840,841,844,847,850,853],{"depth":30,"slug":831,"text":832},"what-a-useful-payment-diagram-should-include","What a useful payment diagram should include",{"depth":30,"slug":834,"text":835},"suggested-node-pattern","Suggested node pattern",{"depth":30,"slug":837,"text":838},"strong-starting-options","Strong starting options",{"depth":30,"slug":319,"text":320},{"depth":30,"slug":90,"text":91},{"depth":30,"slug":842,"text":843},"why-this-works-well-in-openflowkit","Why this works well in OpenFlowKit",{"depth":30,"slug":845,"text":846},"recommended-review-pattern","Recommended review pattern",{"depth":30,"slug":848,"text":849},"example-stripe-checkout-flow","Example: Stripe Checkout Flow",{"depth":30,"slug":851,"text":852},"tips-for-better-payment-diagrams","Tips for Better Payment Diagrams",{"depth":30,"slug":854,"text":855},"ai-prompt-example","AI Prompt Example",[],[],{"draft":20,"title":818,"description":819},[],"openflow-dsl",{"id":860,"data":862,"body":868,"filePath":869,"digest":870,"rendered":871},{"title":863,"description":864,"editUrl":16,"head":865,"template":18,"sidebar":866,"pagefind":16,"draft":20},"OpenFlow DSL","Use OpenFlow DSL as the editor-native text representation for OpenFlowKit diagrams.",[],{"hidden":20,"attrs":867},{},"OpenFlow DSL is the native text representation used by OpenFlowKit Studio. It is the best option when you want a code-first representation that stays close to the editor's own graph model.\n\n## Where it fits\n\nUse OpenFlow DSL when you want:\n\n- a readable editor-native syntax\n- deterministic structural edits before layout\n- a better fit than Mermaid for OpenFlowKit-specific workflows\n- an easier target for AI-generated code than raw JSON\n\nThe Studio code panel can generate DSL from the current canvas and apply DSL back onto it.\n\nUse Mermaid instead when ecosystem compatibility matters more than editor-native fidelity. See [Mermaid vs OpenFlow](/mermaid-vs-openflow/).\n\n## Basic document structure\n\nStart with a header:\n\n```yaml\nflow: \"User Signup\"\ndirection: TB\n```\n\nCommon direction values:\n\n- `TB`\n- `LR`\n- `RL`\n- `BT`\n\n## Nodes\n\nUse explicit node declarations with stable ids.\n\n```text\nnode signup [label: \"Signup Form\"]\nnode verify [label: \"Verify Email\"]\nnode success [label: \"Workspace Ready\", shape: capsule]\n```\n\nGood ids are:\n\n- short\n- lowercase\n- semantic\n- stable enough to survive edits\n\n## Edges\n\nCreate edges with arrow syntax:\n\n```text\nsignup -> verify\nverify -> success\n```\n\nYou can also attach labels or other edge-level metadata when the diagram needs explicit branch meaning.\n\n## Why teams use it\n\nOpenFlow DSL is useful when:\n\n- OpenFlowKit is the primary editing environment\n- you want a reviewable text representation without committing to Mermaid’s constraints\n- you want a format that maps more directly to editor-native concepts\n- you want AI to target a structure that is closer to the actual canvas model\n\n## Recommended workflow\n\nUse DSL when you want to control the structure, then switch back to the canvas for final visual tuning. It is especially useful for:\n\n- architecture drafts\n- system workflows\n- iterative AI-assisted editing where text inspection matters\n\n## Related pages\n\n- [Mermaid vs OpenFlow](/mermaid-vs-openflow/)\n- [Studio Overview](/studio-overview/)\n- [Choose an Input Mode](/choose-input-mode/)","src/content/docs/openflow-dsl.md","65e254166cda822b",{"html":872,"metadata":873},"\u003Cp>OpenFlow DSL is the native text representation used by OpenFlowKit Studio. It is the best option when you want a code-first representation that stays close to the editor’s own graph model.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"where-it-fits\">Where it fits\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#where-it-fits\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Where it fits”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Use OpenFlow DSL when you want:\u003C/p>\n\u003Cul>\n\u003Cli>a readable editor-native syntax\u003C/li>\n\u003Cli>deterministic structural edits before layout\u003C/li>\n\u003Cli>a better fit than Mermaid for OpenFlowKit-specific workflows\u003C/li>\n\u003Cli>an easier target for AI-generated code than raw JSON\u003C/li>\n\u003C/ul>\n\u003Cp>The Studio code panel can generate DSL from the current canvas and apply DSL back onto it.\u003C/p>\n\u003Cp>Use Mermaid instead when ecosystem compatibility matters more than editor-native fidelity. See \u003Ca href=\"/mermaid-vs-openflow/\">Mermaid vs OpenFlow\u003C/a>.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"basic-document-structure\">Basic document structure\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#basic-document-structure\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Basic document structure”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Start with a header:\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Clink rel=\"stylesheet\" href=\"/_astro/ec.v4551.css\">\u003Cscript type=\"module\" src=\"/_astro/ec.0vx5m.js\">\u003C/script>\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"yaml\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#7FDBCA;--1:#111111\">flow\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">User Signup\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#7FDBCA;--1:#111111\">direction\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">: \u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">TB\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"flow: &#x22;User Signup&#x22;direction: TB\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cp>Common direction values:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Ccode dir=\"auto\">TB\u003C/code>\u003C/li>\n\u003Cli>\u003Ccode dir=\"auto\">LR\u003C/code>\u003C/li>\n\u003Cli>\u003Ccode dir=\"auto\">RL\u003C/code>\u003C/li>\n\u003Cli>\u003Ccode dir=\"auto\">BT\u003C/code>\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"nodes\">Nodes\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#nodes\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Nodes”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Use explicit node declarations with stable ids.\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"text\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">node signup [label: \"Signup Form\"]\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">node verify [label: \"Verify Email\"]\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">node success [label: \"Workspace Ready\", shape: capsule]\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"node signup [label: &#x22;Signup Form&#x22;]node verify [label: &#x22;Verify Email&#x22;]node success [label: &#x22;Workspace Ready&#x22;, shape: capsule]\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cp>Good ids are:\u003C/p>\n\u003Cul>\n\u003Cli>short\u003C/li>\n\u003Cli>lowercase\u003C/li>\n\u003Cli>semantic\u003C/li>\n\u003Cli>stable enough to survive edits\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"edges\">Edges\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#edges\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Edges”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Create edges with arrow syntax:\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"text\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">signup -> verify\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">verify -> success\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"signup -> verifyverify -> success\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cp>You can also attach labels or other edge-level metadata when the diagram needs explicit branch meaning.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"why-teams-use-it\">Why teams use it\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#why-teams-use-it\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Why teams use it”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>OpenFlow DSL is useful when:\u003C/p>\n\u003Cul>\n\u003Cli>OpenFlowKit is the primary editing environment\u003C/li>\n\u003Cli>you want a reviewable text representation without committing to Mermaid’s constraints\u003C/li>\n\u003Cli>you want a format that maps more directly to editor-native concepts\u003C/li>\n\u003Cli>you want AI to target a structure that is closer to the actual canvas model\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"recommended-workflow\">Recommended workflow\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#recommended-workflow\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Recommended workflow”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Use DSL when you want to control the structure, then switch back to the canvas for final visual tuning. It is especially useful for:\u003C/p>\n\u003Cul>\n\u003Cli>architecture drafts\u003C/li>\n\u003Cli>system workflows\u003C/li>\n\u003Cli>iterative AI-assisted editing where text inspection matters\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"related-pages\">Related pages\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#related-pages\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Related pages”\u003C/span>\u003C/a>\u003C/div>\n\u003Cul>\n\u003Cli>\u003Ca href=\"/mermaid-vs-openflow/\">Mermaid vs OpenFlow\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"/studio-overview/\">Studio Overview\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"/choose-input-mode/\">Choose an Input Mode\u003C/a>\u003C/li>\n\u003C/ul>",{"headings":874,"localImagePaths":890,"remoteImagePaths":891,"frontmatter":892,"imagePaths":893},[875,878,881,882,885,888,889],{"depth":30,"slug":876,"text":877},"where-it-fits","Where it fits",{"depth":30,"slug":879,"text":880},"basic-document-structure","Basic document structure",{"depth":30,"slug":672,"text":673},{"depth":30,"slug":883,"text":884},"edges","Edges",{"depth":30,"slug":886,"text":887},"why-teams-use-it","Why teams use it",{"depth":30,"slug":90,"text":91},{"depth":30,"slug":96,"text":97},[],[],{"draft":20,"title":863,"description":864},[],"playback-history",{"id":894,"data":896,"body":902,"filePath":903,"digest":904,"rendered":905},{"title":897,"description":898,"editUrl":16,"head":899,"template":18,"sidebar":900,"pagefind":16,"draft":20},"Playback & History","Use undo, snapshots, and playback-related state to recover work and review diagram evolution.",[],{"hidden":20,"attrs":901},{},"OpenFlowKit has two related but distinct recovery systems:\n\n- regular undo/redo history\n- snapshot-based history and playback state stored on tabs or documents\n\n## Undo and redo\n\nUse:\n\n- `Cmd/Ctrl + Z` to undo\n- `Cmd/Ctrl + Shift + Z` to redo\n\nThis is the fastest recovery path during active editing.\n\n## Snapshots\n\nUse snapshots when you are about to:\n\n- run a major AI rewrite\n- switch diagram family direction\n- do a broad text apply from Studio\n- restructure a large architecture map\n\nSnapshots are the safest checkpoint tool before large AI or import-driven edits. They are also the baseline you use for compare workflows later.\n\n## Playback model\n\nThe data model supports playback scenes, steps, and timed sequences. Animated export options appear in the export menu for playback-oriented outputs such as video and GIF.\n\n## Practical advice\n\nTreat history and snapshots differently:\n\n- use undo/redo for quick corrections\n- use snapshots for milestones\n\nIf the next operation could meaningfully rewrite the graph, create a snapshot first.\n\n## Related pages\n\n- [Diagram Diff & Compare](/diagram-diff/)\n- [Exporting](/exporting/)\n- [AI Generation](/ai-generation/)","src/content/docs/playback-history.md","a198505052390693",{"html":906,"metadata":907},"\u003Cp>OpenFlowKit has two related but distinct recovery systems:\u003C/p>\n\u003Cul>\n\u003Cli>regular undo/redo history\u003C/li>\n\u003Cli>snapshot-based history and playback state stored on tabs or documents\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"undo-and-redo\">Undo and redo\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#undo-and-redo\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Undo and redo”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Use:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Ccode dir=\"auto\">Cmd/Ctrl + Z\u003C/code> to undo\u003C/li>\n\u003Cli>\u003Ccode dir=\"auto\">Cmd/Ctrl + Shift + Z\u003C/code> to redo\u003C/li>\n\u003C/ul>\n\u003Cp>This is the fastest recovery path during active editing.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"snapshots\">Snapshots\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#snapshots\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Snapshots”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Use snapshots when you are about to:\u003C/p>\n\u003Cul>\n\u003Cli>run a major AI rewrite\u003C/li>\n\u003Cli>switch diagram family direction\u003C/li>\n\u003Cli>do a broad text apply from Studio\u003C/li>\n\u003Cli>restructure a large architecture map\u003C/li>\n\u003C/ul>\n\u003Cp>Snapshots are the safest checkpoint tool before large AI or import-driven edits. They are also the baseline you use for compare workflows later.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"playback-model\">Playback model\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#playback-model\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Playback model”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>The data model supports playback scenes, steps, and timed sequences. Animated export options appear in the export menu for playback-oriented outputs such as video and GIF.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"practical-advice\">Practical advice\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#practical-advice\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Practical advice”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Treat history and snapshots differently:\u003C/p>\n\u003Cul>\n\u003Cli>use undo/redo for quick corrections\u003C/li>\n\u003Cli>use snapshots for milestones\u003C/li>\n\u003C/ul>\n\u003Cp>If the next operation could meaningfully rewrite the graph, create a snapshot first.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"related-pages\">Related pages\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#related-pages\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Related pages”\u003C/span>\u003C/a>\u003C/div>\n\u003Cul>\n\u003Cli>\u003Ca href=\"/diagram-diff/\">Diagram Diff &#x26; Compare\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"/exporting/\">Exporting\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"/ai-generation/\">AI Generation\u003C/a>\u003C/li>\n\u003C/ul>",{"headings":908,"localImagePaths":922,"remoteImagePaths":923,"frontmatter":924,"imagePaths":925},[909,912,915,918,921],{"depth":30,"slug":910,"text":911},"undo-and-redo","Undo and redo",{"depth":30,"slug":913,"text":914},"snapshots","Snapshots",{"depth":30,"slug":916,"text":917},"playback-model","Playback model",{"depth":30,"slug":919,"text":920},"practical-advice","Practical advice",{"depth":30,"slug":96,"text":97},[],[],{"draft":20,"title":897,"description":898},[],"properties-panel",{"id":926,"data":928,"body":934,"filePath":935,"digest":936,"rendered":937},{"title":929,"description":930,"editUrl":16,"head":931,"template":18,"sidebar":932,"pagefind":16,"draft":20},"Properties Panel","Use the right-side inspector to make exact node, edge, bulk-edit, and Studio-related adjustments in OpenFlowKit.",[],{"hidden":20,"attrs":933},{},"The Properties panel is the right-side inspector that appears when you select a node or edge. It is the main place for exact edits after rough structure is already on the canvas.\n\n## When to use it\n\nUse the Properties panel when:\n\n- the rough structure is correct but the details are not\n- you need exact labels, colors, shapes, or typography\n- you want edge labels and routing adjustments\n- a diagram family exposes settings that are not convenient to edit directly on the graph\n\n## What opens in the right rail\n\nThe rail changes based on selection state:\n\n- one node selected: node inspector\n- multiple nodes selected: bulk edit\n- one edge selected: edge inspector\n- Studio mode active: AI, code, lint, or other Studio tabs instead of properties\n\n## Node editing\n\nFor a typical node, the inspector exposes combinations of these sections:\n\n- **Content** for label and sublabel\n- **Shape** for geometry selection\n- **Color** for presets and custom color\n- **Icon** for icon changes\n- **Typography** for font and emphasis controls\n- **Image** settings for image nodes\n- **Variant** settings for browser/mobile wireframes\n\nSome families add their own controls. For example:\n\n- mind maps expose child and sibling creation actions\n- architecture nodes expose architecture-specific semantics\n- icon-backed asset nodes expose asset search and category filtering\n\n## Edge editing\n\nWhen an edge is selected, the panel exposes:\n\n- **Label**\n- **Route**\n- appearance-related settings where supported\n\n## Bulk edit\n\nWhen multiple nodes are selected, the right rail switches to bulk edit so you can update common styling and shared properties together.","src/content/docs/properties-panel.md","00a2e20a95026253",{"html":938,"metadata":939},"\u003Cp>The Properties panel is the right-side inspector that appears when you select a node or edge. It is the main place for exact edits after rough structure is already on the canvas.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"when-to-use-it\">When to use it\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#when-to-use-it\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “When to use it”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Use the Properties panel when:\u003C/p>\n\u003Cul>\n\u003Cli>the rough structure is correct but the details are not\u003C/li>\n\u003Cli>you need exact labels, colors, shapes, or typography\u003C/li>\n\u003Cli>you want edge labels and routing adjustments\u003C/li>\n\u003Cli>a diagram family exposes settings that are not convenient to edit directly on the graph\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"what-opens-in-the-right-rail\">What opens in the right rail\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#what-opens-in-the-right-rail\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “What opens in the right rail”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>The rail changes based on selection state:\u003C/p>\n\u003Cul>\n\u003Cli>one node selected: node inspector\u003C/li>\n\u003Cli>multiple nodes selected: bulk edit\u003C/li>\n\u003Cli>one edge selected: edge inspector\u003C/li>\n\u003Cli>Studio mode active: AI, code, lint, or other Studio tabs instead of properties\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"node-editing\">Node editing\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#node-editing\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Node editing”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>For a typical node, the inspector exposes combinations of these sections:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Content\u003C/strong> for label and sublabel\u003C/li>\n\u003Cli>\u003Cstrong>Shape\u003C/strong> for geometry selection\u003C/li>\n\u003Cli>\u003Cstrong>Color\u003C/strong> for presets and custom color\u003C/li>\n\u003Cli>\u003Cstrong>Icon\u003C/strong> for icon changes\u003C/li>\n\u003Cli>\u003Cstrong>Typography\u003C/strong> for font and emphasis controls\u003C/li>\n\u003Cli>\u003Cstrong>Image\u003C/strong> settings for image nodes\u003C/li>\n\u003Cli>\u003Cstrong>Variant\u003C/strong> settings for browser/mobile wireframes\u003C/li>\n\u003C/ul>\n\u003Cp>Some families add their own controls. For example:\u003C/p>\n\u003Cul>\n\u003Cli>mind maps expose child and sibling creation actions\u003C/li>\n\u003Cli>architecture nodes expose architecture-specific semantics\u003C/li>\n\u003Cli>icon-backed asset nodes expose asset search and category filtering\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"edge-editing\">Edge editing\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#edge-editing\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Edge editing”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>When an edge is selected, the panel exposes:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Label\u003C/strong>\u003C/li>\n\u003Cli>\u003Cstrong>Route\u003C/strong>\u003C/li>\n\u003Cli>appearance-related settings where supported\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"bulk-edit\">Bulk edit\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#bulk-edit\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Bulk edit”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>When multiple nodes are selected, the right rail switches to bulk edit so you can update common styling and shared properties together.\u003C/p>",{"headings":940,"localImagePaths":954,"remoteImagePaths":955,"frontmatter":956,"imagePaths":957},[941,942,945,948,951],{"depth":30,"slug":211,"text":212},{"depth":30,"slug":943,"text":944},"what-opens-in-the-right-rail","What opens in the right rail",{"depth":30,"slug":946,"text":947},"node-editing","Node editing",{"depth":30,"slug":949,"text":950},"edge-editing","Edge editing",{"depth":30,"slug":952,"text":953},"bulk-edit","Bulk edit",[],[],{"draft":20,"title":929,"description":930},[],"prompting-agents",{"id":958,"data":960,"body":966,"filePath":967,"digest":968,"rendered":969},{"title":961,"description":962,"editUrl":16,"head":963,"template":18,"sidebar":964,"pagefind":16,"draft":20},"Prompting AI Agents","Write better prompts for coding assistants and AI systems when you want diagram output for OpenFlowKit.",[],{"hidden":20,"attrs":965},{},"If you use Cursor, Copilot, ChatGPT, Claude, or any other coding agent to help author diagrams, the prompt quality matters more than the model brand.\n\n## What to ask for\n\nAsk the agent for one of these outputs explicitly:\n\n- OpenFlow DSL\n- Mermaid\n- a diagram plan before code\n\nDo not ask for \"a diagram\" and hope it guesses the right syntax.\n\n## Good prompt structure\n\nInclude all of the following:\n\n- diagram purpose\n- intended audience\n- required systems or actors\n- important branches or failure paths\n- preferred direction (`TB` or `LR`)\n- preferred syntax (`OpenFlow DSL` or `Mermaid`)\n\n## Example prompt for OpenFlow DSL\n\n```text\nGenerate OpenFlow DSL for OpenFlowKit.\nMake a left-to-right payment recovery workflow.\nInclude invoice due, charge attempt, success decision,\nretry sequence, manual review, customer notification,\nand terminal success/failure nodes.\nUse explicit node ids and label every branch edge.\n```\n\n## Example prompt for Mermaid\n\n```text\nGenerate Mermaid flowchart code for a SaaS onboarding diagram.\nUse LR layout.\nInclude signup, email verification, workspace provisioning,\nbilling activation, support fallback, and success.\nKeep labels concise and production-ready.\n```\n\n## What to avoid\n\nAvoid prompts that:\n\n- mix multiple diagram families at once\n- ask for visual styling and architecture semantics in the same sentence\n- omit failure cases\n- omit the target syntax\n\n## Best workflow with agents\n\n1. generate first draft in text\n2. paste into Studio\n3. apply to canvas\n4. fix structure and styling visually\n5. export in the format your team needs\n\nThe secret to perfect AI generation is our `llms.txt` file. We host a machine-readable set of rules that teaches any AI exactly how to write OpenFlow DSL V2 code.\n\nWhen prompting an AI agent, just include a reference to this file.\n\n### Example Prompt for Cursor IDE\nOpen your Composer or Chat window and type:\n\n> `\"Read https://openflowkit.com/llms.txt and then generate an architecture diagram showing our Next.js frontend connecting to a Supabase backend.\"`\n\n### Example Prompt for ChatGPT\nIf you are using ChatGPT with web-browsing enabled:\n\n> `\"Go to https://openflowkit.com/llms.txt to learn the OpenFlowKit syntax. Then, write a flowchart detailing an OAuth2 login sequence. Output the result using the \\`\\`\\`openflow code block.\"`\n\n## Best Practices for Prompting\n\nEven with the rules, LLMs can sometimes get confused. Here are three tips for perfect diagrams every time:\n\n1. **Be specific about shapes**: Instead of just saying \"add a database\", say \"add a Node with the `[process]` type labeled 'Database'\". \n2. **Name your connections**: The diagram is much more useful if edges have labels. Example: \"Connect the frontend to the backend with the label '|REST API|'\".\n3. **Use Groups for clarity**: If you have multiple microservices, tell the AI to wrap them in a group: \"Put the 'Auth Service' and 'User DB' inside a group called 'Backend Infrastructure'.\"\n\n[Return to Editor](/#/canvas)","src/content/docs/prompting-agents.md","ce1d2363d1400d88",{"html":970,"metadata":971},"\u003Cp>If you use Cursor, Copilot, ChatGPT, Claude, or any other coding agent to help author diagrams, the prompt quality matters more than the model brand.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"what-to-ask-for\">What to ask for\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#what-to-ask-for\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “What to ask for”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Ask the agent for one of these outputs explicitly:\u003C/p>\n\u003Cul>\n\u003Cli>OpenFlow DSL\u003C/li>\n\u003Cli>Mermaid\u003C/li>\n\u003Cli>a diagram plan before code\u003C/li>\n\u003C/ul>\n\u003Cp>Do not ask for “a diagram” and hope it guesses the right syntax.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"good-prompt-structure\">Good prompt structure\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#good-prompt-structure\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Good prompt structure”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Include all of the following:\u003C/p>\n\u003Cul>\n\u003Cli>diagram purpose\u003C/li>\n\u003Cli>intended audience\u003C/li>\n\u003Cli>required systems or actors\u003C/li>\n\u003Cli>important branches or failure paths\u003C/li>\n\u003Cli>preferred direction (\u003Ccode dir=\"auto\">TB\u003C/code> or \u003Ccode dir=\"auto\">LR\u003C/code>)\u003C/li>\n\u003Cli>preferred syntax (\u003Ccode dir=\"auto\">OpenFlow DSL\u003C/code> or \u003Ccode dir=\"auto\">Mermaid\u003C/code>)\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"example-prompt-for-openflow-dsl\">Example prompt for OpenFlow DSL\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#example-prompt-for-openflow-dsl\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Example prompt for OpenFlow DSL”\u003C/span>\u003C/a>\u003C/div>\n\u003Cdiv class=\"expressive-code\">\u003Clink rel=\"stylesheet\" href=\"/_astro/ec.v4551.css\">\u003Cscript type=\"module\" src=\"/_astro/ec.0vx5m.js\">\u003C/script>\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"text\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">Generate OpenFlow DSL for OpenFlowKit.\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">Make a left-to-right payment recovery workflow.\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">Include invoice due, charge attempt, success decision,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">retry sequence, manual review, customer notification,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">and terminal success/failure nodes.\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">Use explicit node ids and label every branch edge.\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"Generate OpenFlow DSL for OpenFlowKit.Make a left-to-right payment recovery workflow.Include invoice due, charge attempt, success decision,retry sequence, manual review, customer notification,and terminal success/failure nodes.Use explicit node ids and label every branch edge.\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"example-prompt-for-mermaid\">Example prompt for Mermaid\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#example-prompt-for-mermaid\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Example prompt for Mermaid”\u003C/span>\u003C/a>\u003C/div>\n\u003Cdiv class=\"expressive-code\">\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"text\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">Generate Mermaid flowchart code for a SaaS onboarding diagram.\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">Use LR layout.\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">Include signup, email verification, workspace provisioning,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">billing activation, support fallback, and success.\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">Keep labels concise and production-ready.\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"Generate Mermaid flowchart code for a SaaS onboarding diagram.Use LR layout.Include signup, email verification, workspace provisioning,billing activation, support fallback, and success.Keep labels concise and production-ready.\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"what-to-avoid\">What to avoid\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#what-to-avoid\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “What to avoid”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Avoid prompts that:\u003C/p>\n\u003Cul>\n\u003Cli>mix multiple diagram families at once\u003C/li>\n\u003Cli>ask for visual styling and architecture semantics in the same sentence\u003C/li>\n\u003Cli>omit failure cases\u003C/li>\n\u003Cli>omit the target syntax\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"best-workflow-with-agents\">Best workflow with agents\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#best-workflow-with-agents\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Best workflow with agents”\u003C/span>\u003C/a>\u003C/div>\n\u003Col>\n\u003Cli>generate first draft in text\u003C/li>\n\u003Cli>paste into Studio\u003C/li>\n\u003Cli>apply to canvas\u003C/li>\n\u003Cli>fix structure and styling visually\u003C/li>\n\u003Cli>export in the format your team needs\u003C/li>\n\u003C/ol>\n\u003Cp>The secret to perfect AI generation is our \u003Ccode dir=\"auto\">llms.txt\u003C/code> file. We host a machine-readable set of rules that teaches any AI exactly how to write OpenFlow DSL V2 code.\u003C/p>\n\u003Cp>When prompting an AI agent, just include a reference to this file.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"example-prompt-for-cursor-ide\">Example Prompt for Cursor IDE\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#example-prompt-for-cursor-ide\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Example Prompt for Cursor IDE”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Open your Composer or Chat window and type:\u003C/p>\n\u003Cblockquote>\n\u003Cp>\u003Ccode dir=\"auto\">\"Read https://openflowkit.com/llms.txt and then generate an architecture diagram showing our Next.js frontend connecting to a Supabase backend.\"\u003C/code>\u003C/p>\n\u003C/blockquote>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"example-prompt-for-chatgpt\">Example Prompt for ChatGPT\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#example-prompt-for-chatgpt\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Example Prompt for ChatGPT”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>If you are using ChatGPT with web-browsing enabled:\u003C/p>\n\u003Cblockquote>\n\u003Cp>\u003Ccode dir=\"auto\">\"Go to https://openflowkit.com/llms.txt to learn the OpenFlowKit syntax. Then, write a flowchart detailing an OAuth2 login sequence. Output the result using the \\\u003C/code>“openflow code block.”`\u003C/p>\n\u003C/blockquote>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"best-practices-for-prompting\">Best Practices for Prompting\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#best-practices-for-prompting\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Best Practices for Prompting”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Even with the rules, LLMs can sometimes get confused. Here are three tips for perfect diagrams every time:\u003C/p>\n\u003Col>\n\u003Cli>\u003Cstrong>Be specific about shapes\u003C/strong>: Instead of just saying “add a database”, say “add a Node with the \u003Ccode dir=\"auto\">[process]\u003C/code> type labeled ‘Database’”.\u003C/li>\n\u003Cli>\u003Cstrong>Name your connections\u003C/strong>: The diagram is much more useful if edges have labels. Example: “Connect the frontend to the backend with the label ‘|REST API|’”.\u003C/li>\n\u003Cli>\u003Cstrong>Use Groups for clarity\u003C/strong>: If you have multiple microservices, tell the AI to wrap them in a group: “Put the ‘Auth Service’ and ‘User DB’ inside a group called ‘Backend Infrastructure’.”\u003C/li>\n\u003C/ol>\n\u003Cp>\u003Ca href=\"/#/canvas\">Return to Editor\u003C/a>\u003C/p>",{"headings":972,"localImagePaths":1000,"remoteImagePaths":1001,"frontmatter":1002,"imagePaths":1003},[973,976,979,982,985,988,991,994,997],{"depth":30,"slug":974,"text":975},"what-to-ask-for","What to ask for",{"depth":30,"slug":977,"text":978},"good-prompt-structure","Good prompt structure",{"depth":30,"slug":980,"text":981},"example-prompt-for-openflow-dsl","Example prompt for OpenFlow DSL",{"depth":30,"slug":983,"text":984},"example-prompt-for-mermaid","Example prompt for Mermaid",{"depth":30,"slug":986,"text":987},"what-to-avoid","What to avoid",{"depth":30,"slug":989,"text":990},"best-workflow-with-agents","Best workflow with agents",{"depth":37,"slug":992,"text":993},"example-prompt-for-cursor-ide","Example Prompt for Cursor IDE",{"depth":37,"slug":995,"text":996},"example-prompt-for-chatgpt","Example Prompt for ChatGPT",{"depth":30,"slug":998,"text":999},"best-practices-for-prompting","Best Practices for Prompting",[],[],{"draft":20,"title":961,"description":962},[],"quick-start",{"id":1004,"data":1006,"body":1012,"filePath":1013,"digest":1014,"rendered":1015},{"title":1007,"description":1008,"editUrl":16,"head":1009,"template":18,"sidebar":1010,"pagefind":16,"draft":20},"Quick Start","Create your first OpenFlowKit diagram from the canvas, templates, AI, code, or structured imports.",[],{"hidden":20,"attrs":1011},{},"This is the fastest reliable way to get productive in the current app.\n\n## 1. Open or create a document\n\nFrom the home screen you can:\n\n- create a new flow\n- open an existing browser-stored flow\n- duplicate a saved flow\n- import a JSON diagram document\n\nEach document opens in its own editor tab.\n\n## 2. Pick a starting point\n\nPick the path that matches the information you already have.\n\n### Blank canvas\n\nUse this when you already know the structure and want to sketch directly.\n\n### Template\n\nOpen the Command Center with `Cmd/Ctrl + K`, then choose **Start from Template**. Templates cover flowcharts, cloud diagrams, mind maps, journeys, and wireframes.\n\n### Assets\n\nOpen **Assets** from the Command Center to add notes, text, sections, wireframes, images, or provider-backed icons.\n\n### AI\n\nSwitch the right rail to Studio and open the **FlowPilot** tab. Enter a prompt such as:\n\n```text\nCreate a SaaS onboarding workflow with signup, email verification,\nteam invite, workspace creation, billing setup, and first success milestone.\n```\n\n### Code\n\nIf you already have Mermaid or OpenFlow DSL, open Studio and switch to the **Code** tab to paste and apply it.\n\n### Structured input\n\nIf you already have SQL, OpenAPI, Terraform, or Kubernetes text, use the import flows in Studio. See [Import from Structured Data](/import-from-data/) and [Infrastructure Sync](/infra-sync/).\n\n## 3. Refine the draft\n\nOnce something is on the canvas:\n\n- move nodes into rough position\n- use the [Properties Panel](/properties-panel/) for exact edits\n- run [Smart Layout](/smart-layout/) when the structure is right but spacing is rough\n- use the [Command Center](/command-center/) to search, switch workflows, or insert more assets\n\n## 4. Save recovery points\n\nBefore a major AI rewrite or import refresh, review the snapshot/history tooling so you can recover quickly if the new result is worse. See [Playback & History](/playback-history/).\n\n## 5. Share or export\n\nUse the export menu when you are ready to move the diagram into docs, design tools, or collaboration workflows.\n\n- See [Choose an Export Format](/choose-export-format/)\n- See [Exporting](/exporting/)\n- See [Collaboration & Sharing](/collaboration-sharing/)","src/content/docs/quick-start.md","b5c7a93347162f65",{"html":1016,"metadata":1017},"\u003Cp>This is the fastest reliable way to get productive in the current app.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"1-open-or-create-a-document\">1. Open or create a document\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#1-open-or-create-a-document\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “1. Open or create a document”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>From the home screen you can:\u003C/p>\n\u003Cul>\n\u003Cli>create a new flow\u003C/li>\n\u003Cli>open an existing browser-stored flow\u003C/li>\n\u003Cli>duplicate a saved flow\u003C/li>\n\u003Cli>import a JSON diagram document\u003C/li>\n\u003C/ul>\n\u003Cp>Each document opens in its own editor tab.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"2-pick-a-starting-point\">2. Pick a starting point\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#2-pick-a-starting-point\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “2. Pick a starting point”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Pick the path that matches the information you already have.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"blank-canvas\">Blank canvas\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#blank-canvas\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Blank canvas”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Use this when you already know the structure and want to sketch directly.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"template\">Template\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#template\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Template”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Open the Command Center with \u003Ccode dir=\"auto\">Cmd/Ctrl + K\u003C/code>, then choose \u003Cstrong>Start from Template\u003C/strong>. Templates cover flowcharts, cloud diagrams, mind maps, journeys, and wireframes.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"assets\">Assets\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#assets\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Assets”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Open \u003Cstrong>Assets\u003C/strong> from the Command Center to add notes, text, sections, wireframes, images, or provider-backed icons.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"ai\">AI\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#ai\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “AI”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Switch the right rail to Studio and open the \u003Cstrong>FlowPilot\u003C/strong> tab. Enter a prompt such as:\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Clink rel=\"stylesheet\" href=\"/_astro/ec.v4551.css\">\u003Cscript type=\"module\" src=\"/_astro/ec.0vx5m.js\">\u003C/script>\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"text\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">Create a SaaS onboarding workflow with signup, email verification,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">team invite, workspace creation, billing setup, and first success milestone.\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"Create a SaaS onboarding workflow with signup, email verification,team invite, workspace creation, billing setup, and first success milestone.\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"code\">Code\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#code\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Code”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>If you already have Mermaid or OpenFlow DSL, open Studio and switch to the \u003Cstrong>Code\u003C/strong> tab to paste and apply it.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"structured-input\">Structured input\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#structured-input\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Structured input”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>If you already have SQL, OpenAPI, Terraform, or Kubernetes text, use the import flows in Studio. See \u003Ca href=\"/import-from-data/\">Import from Structured Data\u003C/a> and \u003Ca href=\"/infra-sync/\">Infrastructure Sync\u003C/a>.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"3-refine-the-draft\">3. Refine the draft\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#3-refine-the-draft\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “3. Refine the draft”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Once something is on the canvas:\u003C/p>\n\u003Cul>\n\u003Cli>move nodes into rough position\u003C/li>\n\u003Cli>use the \u003Ca href=\"/properties-panel/\">Properties Panel\u003C/a> for exact edits\u003C/li>\n\u003Cli>run \u003Ca href=\"/smart-layout/\">Smart Layout\u003C/a> when the structure is right but spacing is rough\u003C/li>\n\u003Cli>use the \u003Ca href=\"/command-center/\">Command Center\u003C/a> to search, switch workflows, or insert more assets\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"4-save-recovery-points\">4. Save recovery points\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#4-save-recovery-points\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “4. Save recovery points”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Before a major AI rewrite or import refresh, review the snapshot/history tooling so you can recover quickly if the new result is worse. See \u003Ca href=\"/playback-history/\">Playback &#x26; History\u003C/a>.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"5-share-or-export\">5. Share or export\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#5-share-or-export\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “5. Share or export”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Use the export menu when you are ready to move the diagram into docs, design tools, or collaboration workflows.\u003C/p>\n\u003Cul>\n\u003Cli>See \u003Ca href=\"/choose-export-format/\">Choose an Export Format\u003C/a>\u003C/li>\n\u003Cli>See \u003Ca href=\"/exporting/\">Exporting\u003C/a>\u003C/li>\n\u003Cli>See \u003Ca href=\"/collaboration-sharing/\">Collaboration &#x26; Sharing\u003C/a>\u003C/li>\n\u003C/ul>",{"headings":1018,"localImagePaths":1050,"remoteImagePaths":1051,"frontmatter":1052,"imagePaths":1053},[1019,1022,1025,1028,1031,1032,1035,1038,1041,1044,1047],{"depth":30,"slug":1020,"text":1021},"1-open-or-create-a-document","1. Open or create a document",{"depth":30,"slug":1023,"text":1024},"2-pick-a-starting-point","2. Pick a starting point",{"depth":37,"slug":1026,"text":1027},"blank-canvas","Blank canvas",{"depth":37,"slug":1029,"text":1030},"template","Template",{"depth":37,"slug":247,"text":248},{"depth":37,"slug":1033,"text":1034},"ai","AI",{"depth":37,"slug":1036,"text":1037},"code","Code",{"depth":37,"slug":1039,"text":1040},"structured-input","Structured input",{"depth":30,"slug":1042,"text":1043},"3-refine-the-draft","3. Refine the draft",{"depth":30,"slug":1045,"text":1046},"4-save-recovery-points","4. Save recovery points",{"depth":30,"slug":1048,"text":1049},"5-share-or-export","5. Share or export",[],[],{"draft":20,"title":1007,"description":1008},[],"roadmap",{"id":1054,"data":1056,"body":1062,"filePath":1063,"digest":1064,"rendered":1065},{"title":1057,"description":1058,"editUrl":16,"head":1059,"template":18,"sidebar":1060,"pagefind":16,"draft":20},"Roadmap","How to read product direction without confusing roadmap ideas for currently documented functionality.",[],{"hidden":20,"attrs":1061},{},"This docs site focuses on current shipped behavior plus default-enabled product surfaces that are already part of the active experience.\n\n## What this page is for\n\nUse this page as a policy note, not as a promise list.\n\n- Docs pages describe current product behavior.\n- Strategy and roadmap materials may describe future direction separately.\n- If a capability is planned but not currently available in the product path, it should not be documented here as if it already ships.\n\nFor broader direction, refer to the project strategy materials in the repository rather than treating the docs site as a roadmap announcement channel.","src/content/docs/roadmap.md","95127551e5ea229e",{"html":1066,"metadata":1067},"\u003Cp>This docs site focuses on current shipped behavior plus default-enabled product surfaces that are already part of the active experience.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"what-this-page-is-for\">What this page is for\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#what-this-page-is-for\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “What this page is for”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Use this page as a policy note, not as a promise list.\u003C/p>\n\u003Cul>\n\u003Cli>Docs pages describe current product behavior.\u003C/li>\n\u003Cli>Strategy and roadmap materials may describe future direction separately.\u003C/li>\n\u003Cli>If a capability is planned but not currently available in the product path, it should not be documented here as if it already ships.\u003C/li>\n\u003C/ul>\n\u003Cp>For broader direction, refer to the project strategy materials in the repository rather than treating the docs site as a roadmap announcement channel.\u003C/p>",{"headings":1068,"localImagePaths":1072,"remoteImagePaths":1073,"frontmatter":1074,"imagePaths":1075},[1069],{"depth":30,"slug":1070,"text":1071},"what-this-page-is-for","What this page is for",[],[],{"draft":20,"title":1057,"description":1058},[],"smart-layout",{"id":1076,"data":1078,"body":1084,"filePath":1085,"digest":1086,"rendered":1087},{"title":1079,"description":1080,"editUrl":16,"head":1081,"template":18,"sidebar":1082,"pagefind":16,"draft":20},"Smart Layout","Use ELK-based layout to turn rough graphs into cleaner, more readable diagrams in OpenFlowKit.",[],{"hidden":20,"attrs":1083},{},"OpenFlowKit uses ELK-based layout strategies to turn rough graphs into readable diagrams quickly.\n\n## When to use auto layout\n\nUse layout when:\n\n- a template is structurally right but visually rough\n- AI generation gave you the right nodes in the wrong places\n- imported code needs normalization\n- you have added branches manually and want spacing fixed\n\n## How to run it\n\nOpen the Command Center and choose **Auto Layout**. The editor passes direction, algorithm, and spacing preferences into the layout request.\n\nCurrent directional options are:\n\n- `TB`\n- `LR`\n- `RL`\n- `BT`\n\nThe shell also uses active diagram type as context where needed.\n\n## What layout is good at\n\nAuto layout is especially effective for:\n\n- flowcharts\n- architecture graphs\n- state-like branching diagrams\n- AI-generated drafts\n\nIt is less effective for intentionally hand-composed slides or dense annotated canvases where visual storytelling matters more than graph regularity.\n\n## Practical strategy\n\nFor the best result:\n\n1. get the right nodes and edges first\n2. run layout\n3. group with sections if needed\n4. make final manual adjustments\n\nDo not spend time hand-aligning a graph before running layout. That work is usually wasted.\n\n## Layout plus code workflow\n\nOpenFlow DSL and Mermaid edits are especially effective when combined with layout:\n\n- make structural changes in text\n- apply them\n- run auto layout\n- finish visual polish in the properties panel\n\n## Related pages\n\n- [Canvas Basics](/canvas-basics/)\n- [OpenFlow DSL](/openflow-dsl/)\n- [Mermaid Integration](/mermaid-integration/)","src/content/docs/smart-layout.md","62b25766b466692d",{"html":1088,"metadata":1089},"\u003Cp>OpenFlowKit uses ELK-based layout strategies to turn rough graphs into readable diagrams quickly.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"when-to-use-auto-layout\">When to use auto layout\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#when-to-use-auto-layout\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “When to use auto layout”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Use layout when:\u003C/p>\n\u003Cul>\n\u003Cli>a template is structurally right but visually rough\u003C/li>\n\u003Cli>AI generation gave you the right nodes in the wrong places\u003C/li>\n\u003Cli>imported code needs normalization\u003C/li>\n\u003Cli>you have added branches manually and want spacing fixed\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"how-to-run-it\">How to run it\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#how-to-run-it\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “How to run it”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Open the Command Center and choose \u003Cstrong>Auto Layout\u003C/strong>. The editor passes direction, algorithm, and spacing preferences into the layout request.\u003C/p>\n\u003Cp>Current directional options are:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Ccode dir=\"auto\">TB\u003C/code>\u003C/li>\n\u003Cli>\u003Ccode dir=\"auto\">LR\u003C/code>\u003C/li>\n\u003Cli>\u003Ccode dir=\"auto\">RL\u003C/code>\u003C/li>\n\u003Cli>\u003Ccode dir=\"auto\">BT\u003C/code>\u003C/li>\n\u003C/ul>\n\u003Cp>The shell also uses active diagram type as context where needed.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"what-layout-is-good-at\">What layout is good at\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#what-layout-is-good-at\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “What layout is good at”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Auto layout is especially effective for:\u003C/p>\n\u003Cul>\n\u003Cli>flowcharts\u003C/li>\n\u003Cli>architecture graphs\u003C/li>\n\u003Cli>state-like branching diagrams\u003C/li>\n\u003Cli>AI-generated drafts\u003C/li>\n\u003C/ul>\n\u003Cp>It is less effective for intentionally hand-composed slides or dense annotated canvases where visual storytelling matters more than graph regularity.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"practical-strategy\">Practical strategy\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#practical-strategy\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Practical strategy”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>For the best result:\u003C/p>\n\u003Col>\n\u003Cli>get the right nodes and edges first\u003C/li>\n\u003Cli>run layout\u003C/li>\n\u003Cli>group with sections if needed\u003C/li>\n\u003Cli>make final manual adjustments\u003C/li>\n\u003C/ol>\n\u003Cp>Do not spend time hand-aligning a graph before running layout. That work is usually wasted.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"layout-plus-code-workflow\">Layout plus code workflow\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#layout-plus-code-workflow\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Layout plus code workflow”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>OpenFlow DSL and Mermaid edits are especially effective when combined with layout:\u003C/p>\n\u003Cul>\n\u003Cli>make structural changes in text\u003C/li>\n\u003Cli>apply them\u003C/li>\n\u003Cli>run auto layout\u003C/li>\n\u003Cli>finish visual polish in the properties panel\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"related-pages\">Related pages\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#related-pages\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Related pages”\u003C/span>\u003C/a>\u003C/div>\n\u003Cul>\n\u003Cli>\u003Ca href=\"/canvas-basics/\">Canvas Basics\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"/openflow-dsl/\">OpenFlow DSL\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"/mermaid-integration/\">Mermaid Integration\u003C/a>\u003C/li>\n\u003C/ul>",{"headings":1090,"localImagePaths":1107,"remoteImagePaths":1108,"frontmatter":1109,"imagePaths":1110},[1091,1094,1097,1100,1103,1106],{"depth":30,"slug":1092,"text":1093},"when-to-use-auto-layout","When to use auto layout",{"depth":30,"slug":1095,"text":1096},"how-to-run-it","How to run it",{"depth":30,"slug":1098,"text":1099},"what-layout-is-good-at","What layout is good at",{"depth":30,"slug":1101,"text":1102},"practical-strategy","Practical strategy",{"depth":30,"slug":1104,"text":1105},"layout-plus-code-workflow","Layout plus code workflow",{"depth":30,"slug":96,"text":97},[],[],{"draft":20,"title":1079,"description":1080},[],"studio-overview",{"id":1111,"data":1113,"body":1119,"filePath":1120,"digest":1121,"rendered":1122},{"title":1114,"description":1115,"editUrl":16,"head":1116,"template":18,"sidebar":1117,"pagefind":16,"draft":20},"Studio Overview","Understand the OpenFlowKit Studio rail for AI, code, imports, infrastructure sync, and architecture linting.",[],{"hidden":20,"attrs":1118},{},"Studio is the right-side workspace for generation, code-backed editing, imports, infrastructure parsing, and rule-driven validation. Use it when the canvas alone is not the best tool for the job.\n\nStudio matters because OpenFlowKit is not only a drag-and-drop editor. The product is built around moving between visual editing and structured inputs. Studio is where those structured workflows live.\n\n## Studio tabs in the current product path\n\n| Tab | Purpose |\n| --- | --- |\n| **FlowPilot** | AI-assisted generation, revision, and guided import flows |\n| **Code** | OpenFlow DSL and Mermaid editing against the current canvas |\n| **Infra** | Infrastructure Sync for supported infra file inputs |\n| **Lint** | Architecture rules and live violation feedback |\n\n## When to open Studio\n\nOpen Studio when you want to:\n\n- draft a diagram from a prompt\n- paste or edit OpenFlow DSL or Mermaid\n- import SQL, OpenAPI, Terraform, or Kubernetes-oriented inputs\n- parse infra files without AI\n- define architecture constraints and review violations\n\nIf you are already happy with the diagram structure and only need visual cleanup, stay on the canvas and use the [Properties Panel](/properties-panel/) instead.\n\n## FlowPilot tab\n\nFlowPilot is the AI-first area of Studio. Use it when you want:\n\n- a first draft from plain language\n- a different structural take on an existing concept\n- code-to-architecture generation\n- structured imports that benefit from model interpretation\n\nGood FlowPilot sessions are specific. Name the systems, actors, branches, constraints, and intended audience. If you want output that is easy to refine later, ask for explicit structure instead of purely aesthetic phrasing.\n\n## Code tab\n\nThe Code tab is where you switch from visual editing to text representations.\n\nUse it when:\n\n- you want to review or edit [OpenFlow DSL](/openflow-dsl/)\n- you already have Mermaid and want to apply it to the canvas\n- you want to compare an editor-native representation with a portable one\n\nThis tab is best when you want repeatability and precision. It is also the right choice when AI is unnecessary and the diagram is easier to reason about as code.\n\n## Infra tab\n\nThe Infra tab exists for deterministic infrastructure parsing. It is the best option when you already have:\n\n- Terraform state\n- Kubernetes YAML\n- Docker Compose YAML\n- other supported infra-oriented inputs\n\nUse this tab when you want a trustworthy structural import instead of a model-generated interpretation. The result still comes back as a regular editable OpenFlowKit diagram.\n\n## Lint tab\n\nThe Lint tab turns the diagram into something closer to a governed system model. You can define JSON rules and review violations as errors, warnings, or informational findings.\n\nThis is useful when a diagram is doing real architecture work instead of just presentation work. It helps answer questions like:\n\n- should this service be allowed to talk to that datastore?\n- did an imported architecture diagram violate an agreed boundary?\n- did a large refactor accidentally break a documented rule?\n\n## How Studio fits into the editor\n\nStudio complements, rather than replaces, the canvas:\n\n- use the canvas for spatial editing\n- use Studio for generation, import, code, and rule workflows\n- switch back to the [Properties Panel](/properties-panel/) when a generated result needs exact tuning\n- use the [Command Center](/command-center/) when you want to jump between workflows quickly\n\n## Recommended workflow\n\nFor most serious diagrams, a good sequence is:\n\n1. start with AI, code, template, or import\n2. inspect the result on the canvas\n3. make exact changes in the inspector\n4. save a snapshot before another major Studio operation\n5. export or share once the structure is stable\n\n## Related pages\n\n- [AI Generation](/ai-generation/)\n- [OpenFlow DSL](/openflow-dsl/)\n- [Infrastructure Sync](/infra-sync/)\n- [Architecture Linting](/architecture-lint/)\n- [Choose an Input Mode](/choose-input-mode/)","src/content/docs/studio-overview.md","74f3b9a2482e7fcc",{"html":1123,"metadata":1124},"\u003Cp>Studio is the right-side workspace for generation, code-backed editing, imports, infrastructure parsing, and rule-driven validation. Use it when the canvas alone is not the best tool for the job.\u003C/p>\n\u003Cp>Studio matters because OpenFlowKit is not only a drag-and-drop editor. The product is built around moving between visual editing and structured inputs. Studio is where those structured workflows live.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"studio-tabs-in-the-current-product-path\">Studio tabs in the current product path\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#studio-tabs-in-the-current-product-path\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Studio tabs in the current product path”\u003C/span>\u003C/a>\u003C/div>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>Tab\u003C/th>\u003Cth>Purpose\u003C/th>\u003C/tr>\u003C/thead>\u003Ctbody>\u003Ctr>\u003Ctd>\u003Cstrong>FlowPilot\u003C/strong>\u003C/td>\u003Ctd>AI-assisted generation, revision, and guided import flows\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Cstrong>Code\u003C/strong>\u003C/td>\u003Ctd>OpenFlow DSL and Mermaid editing against the current canvas\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Cstrong>Infra\u003C/strong>\u003C/td>\u003Ctd>Infrastructure Sync for supported infra file inputs\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Cstrong>Lint\u003C/strong>\u003C/td>\u003Ctd>Architecture rules and live violation feedback\u003C/td>\u003C/tr>\u003C/tbody>\u003C/table>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"when-to-open-studio\">When to open Studio\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#when-to-open-studio\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “When to open Studio”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Open Studio when you want to:\u003C/p>\n\u003Cul>\n\u003Cli>draft a diagram from a prompt\u003C/li>\n\u003Cli>paste or edit OpenFlow DSL or Mermaid\u003C/li>\n\u003Cli>import SQL, OpenAPI, Terraform, or Kubernetes-oriented inputs\u003C/li>\n\u003Cli>parse infra files without AI\u003C/li>\n\u003Cli>define architecture constraints and review violations\u003C/li>\n\u003C/ul>\n\u003Cp>If you are already happy with the diagram structure and only need visual cleanup, stay on the canvas and use the \u003Ca href=\"/properties-panel/\">Properties Panel\u003C/a> instead.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"flowpilot-tab\">FlowPilot tab\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#flowpilot-tab\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “FlowPilot tab”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>FlowPilot is the AI-first area of Studio. Use it when you want:\u003C/p>\n\u003Cul>\n\u003Cli>a first draft from plain language\u003C/li>\n\u003Cli>a different structural take on an existing concept\u003C/li>\n\u003Cli>code-to-architecture generation\u003C/li>\n\u003Cli>structured imports that benefit from model interpretation\u003C/li>\n\u003C/ul>\n\u003Cp>Good FlowPilot sessions are specific. Name the systems, actors, branches, constraints, and intended audience. If you want output that is easy to refine later, ask for explicit structure instead of purely aesthetic phrasing.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"code-tab\">Code tab\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#code-tab\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Code tab”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>The Code tab is where you switch from visual editing to text representations.\u003C/p>\n\u003Cp>Use it when:\u003C/p>\n\u003Cul>\n\u003Cli>you want to review or edit \u003Ca href=\"/openflow-dsl/\">OpenFlow DSL\u003C/a>\u003C/li>\n\u003Cli>you already have Mermaid and want to apply it to the canvas\u003C/li>\n\u003Cli>you want to compare an editor-native representation with a portable one\u003C/li>\n\u003C/ul>\n\u003Cp>This tab is best when you want repeatability and precision. It is also the right choice when AI is unnecessary and the diagram is easier to reason about as code.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"infra-tab\">Infra tab\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#infra-tab\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Infra tab”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>The Infra tab exists for deterministic infrastructure parsing. It is the best option when you already have:\u003C/p>\n\u003Cul>\n\u003Cli>Terraform state\u003C/li>\n\u003Cli>Kubernetes YAML\u003C/li>\n\u003Cli>Docker Compose YAML\u003C/li>\n\u003Cli>other supported infra-oriented inputs\u003C/li>\n\u003C/ul>\n\u003Cp>Use this tab when you want a trustworthy structural import instead of a model-generated interpretation. The result still comes back as a regular editable OpenFlowKit diagram.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"lint-tab\">Lint tab\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#lint-tab\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Lint tab”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>The Lint tab turns the diagram into something closer to a governed system model. You can define JSON rules and review violations as errors, warnings, or informational findings.\u003C/p>\n\u003Cp>This is useful when a diagram is doing real architecture work instead of just presentation work. It helps answer questions like:\u003C/p>\n\u003Cul>\n\u003Cli>should this service be allowed to talk to that datastore?\u003C/li>\n\u003Cli>did an imported architecture diagram violate an agreed boundary?\u003C/li>\n\u003Cli>did a large refactor accidentally break a documented rule?\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"how-studio-fits-into-the-editor\">How Studio fits into the editor\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#how-studio-fits-into-the-editor\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “How Studio fits into the editor”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Studio complements, rather than replaces, the canvas:\u003C/p>\n\u003Cul>\n\u003Cli>use the canvas for spatial editing\u003C/li>\n\u003Cli>use Studio for generation, import, code, and rule workflows\u003C/li>\n\u003Cli>switch back to the \u003Ca href=\"/properties-panel/\">Properties Panel\u003C/a> when a generated result needs exact tuning\u003C/li>\n\u003Cli>use the \u003Ca href=\"/command-center/\">Command Center\u003C/a> when you want to jump between workflows quickly\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"recommended-workflow\">Recommended workflow\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#recommended-workflow\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Recommended workflow”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>For most serious diagrams, a good sequence is:\u003C/p>\n\u003Col>\n\u003Cli>start with AI, code, template, or import\u003C/li>\n\u003Cli>inspect the result on the canvas\u003C/li>\n\u003Cli>make exact changes in the inspector\u003C/li>\n\u003Cli>save a snapshot before another major Studio operation\u003C/li>\n\u003Cli>export or share once the structure is stable\u003C/li>\n\u003C/ol>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"related-pages\">Related pages\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#related-pages\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Related pages”\u003C/span>\u003C/a>\u003C/div>\n\u003Cul>\n\u003Cli>\u003Ca href=\"/ai-generation/\">AI Generation\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"/openflow-dsl/\">OpenFlow DSL\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"/infra-sync/\">Infrastructure Sync\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"/architecture-lint/\">Architecture Linting\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"/choose-input-mode/\">Choose an Input Mode\u003C/a>\u003C/li>\n\u003C/ul>",{"headings":1125,"localImagePaths":1149,"remoteImagePaths":1150,"frontmatter":1151,"imagePaths":1152},[1126,1129,1132,1135,1138,1141,1144,1147,1148],{"depth":30,"slug":1127,"text":1128},"studio-tabs-in-the-current-product-path","Studio tabs in the current product path",{"depth":30,"slug":1130,"text":1131},"when-to-open-studio","When to open Studio",{"depth":30,"slug":1133,"text":1134},"flowpilot-tab","FlowPilot tab",{"depth":30,"slug":1136,"text":1137},"code-tab","Code tab",{"depth":30,"slug":1139,"text":1140},"infra-tab","Infra tab",{"depth":30,"slug":1142,"text":1143},"lint-tab","Lint tab",{"depth":30,"slug":1145,"text":1146},"how-studio-fits-into-the-editor","How Studio fits into the editor",{"depth":30,"slug":90,"text":91},{"depth":30,"slug":96,"text":97},[],[],{"draft":20,"title":1114,"description":1115},[],"templates-assets",{"id":1153,"data":1155,"body":1161,"filePath":1162,"digest":1163,"rendered":1164},{"title":1156,"description":1157,"editUrl":16,"head":1158,"template":18,"sidebar":1159,"pagefind":16,"draft":20},"Templates & Starter Flows","Start diagrams faster with built-in templates, provider icon assets, and starter packs.",[],{"hidden":20,"attrs":1160},{},"Templates and assets help you skip the empty-canvas problem. Use them when you want a strong starting structure or visual system before doing custom edits.\n\n## Templates\n\nThe template library includes starter graphs for common flowchart, architecture, mind map, journey, and wireframe use cases.\n\nRepresentative starter templates include flows such as:\n\n- subscription upgrade workflows\n- incident escalation runbooks\n- release-train and delivery flows\n- cloud-provider architecture starters\n\nUse templates when the structure is more important than the exact wording at the start.\n\n## Assets\n\nThe assets flow covers:\n\n- generic building blocks such as sections, text, and notes\n- images and wireframe-style surfaces\n- provider-backed architecture icons\n\nAssets are better than templates when you already know the overall structure and just need the right pieces.\n\n## Shape libraries\n\nOpenFlowKit also carries shape-library starter packs for curated reusable shapes. These are useful when a team wants a repeatable visual vocabulary beyond the default node palette.\n\n## Choosing between them\n\n- Use templates when you want a starting graph.\n- Use assets when you want to insert individual pieces into an existing graph.\n- Use design systems when the problem is styling consistency rather than structure.\n\n## Related pages\n\n- [Command Center](/command-center/)\n- [Design Systems & Branding](/design-systems-branding/)\n- [AWS Architecture](/aws-architecture/)","src/content/docs/templates-assets.md","27ed71edf89fa032",{"html":1165,"metadata":1166},"\u003Cp>Templates and assets help you skip the empty-canvas problem. Use them when you want a strong starting structure or visual system before doing custom edits.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"templates\">Templates\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#templates\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Templates”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>The template library includes starter graphs for common flowchart, architecture, mind map, journey, and wireframe use cases.\u003C/p>\n\u003Cp>Representative starter templates include flows such as:\u003C/p>\n\u003Cul>\n\u003Cli>subscription upgrade workflows\u003C/li>\n\u003Cli>incident escalation runbooks\u003C/li>\n\u003Cli>release-train and delivery flows\u003C/li>\n\u003Cli>cloud-provider architecture starters\u003C/li>\n\u003C/ul>\n\u003Cp>Use templates when the structure is more important than the exact wording at the start.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"assets\">Assets\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#assets\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Assets”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>The assets flow covers:\u003C/p>\n\u003Cul>\n\u003Cli>generic building blocks such as sections, text, and notes\u003C/li>\n\u003Cli>images and wireframe-style surfaces\u003C/li>\n\u003Cli>provider-backed architecture icons\u003C/li>\n\u003C/ul>\n\u003Cp>Assets are better than templates when you already know the overall structure and just need the right pieces.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"shape-libraries\">Shape libraries\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#shape-libraries\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Shape libraries”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>OpenFlowKit also carries shape-library starter packs for curated reusable shapes. These are useful when a team wants a repeatable visual vocabulary beyond the default node palette.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"choosing-between-them\">Choosing between them\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#choosing-between-them\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Choosing between them”\u003C/span>\u003C/a>\u003C/div>\n\u003Cul>\n\u003Cli>Use templates when you want a starting graph.\u003C/li>\n\u003Cli>Use assets when you want to insert individual pieces into an existing graph.\u003C/li>\n\u003Cli>Use design systems when the problem is styling consistency rather than structure.\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"related-pages\">Related pages\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#related-pages\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Related pages”\u003C/span>\u003C/a>\u003C/div>\n\u003Cul>\n\u003Cli>\u003Ca href=\"/command-center/\">Command Center\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"/design-systems-branding/\">Design Systems &#x26; Branding\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"/aws-architecture/\">AWS Architecture\u003C/a>\u003C/li>\n\u003C/ul>",{"headings":1167,"localImagePaths":1177,"remoteImagePaths":1178,"frontmatter":1179,"imagePaths":1180},[1168,1169,1170,1173,1176],{"depth":30,"slug":250,"text":251},{"depth":30,"slug":247,"text":248},{"depth":30,"slug":1171,"text":1172},"shape-libraries","Shape libraries",{"depth":30,"slug":1174,"text":1175},"choosing-between-them","Choosing between them",{"depth":30,"slug":96,"text":97},[],[],{"draft":20,"title":1156,"description":1157},[],"tr/architecture-lint",{"id":1181,"data":1183,"body":1188,"filePath":1189,"digest":1190,"rendered":1191},{"title":160,"description":1184,"editUrl":16,"head":1185,"template":18,"sidebar":1186,"pagefind":16,"draft":20},"JSON tabanlı mimari kurallar tanımlayın ve ihlalleri tuval üzerinde gerçek zamanlı görün.",[],{"hidden":20,"attrs":1187},{},"Architecture Linting, kuralları doğrudan diyagram üzerinde uygulamanızı sağlar. Bu, sistem diyagramları için lint mantığına en yakın yüzeydir.\n\n## Nerede bulunur?\n\nStudio içindeki **Lint** sekmesinde.\n\n## Neler yapar?\n\n- JSON kural seti düzenleme\n- kural dosyası parse hatalarını görme\n- error, warning ve info seviyelerinde ihlal listesi görme\n- diyagram üzerinde kural uyumunu hızlıca değerlendirme\n\n## Ne zaman kullanılır?\n\n- mimari sınırları zorlayan ilişkileri tespit etmek için\n- altyapı senkronizasyonundan gelen grafiği doğrulamak için\n- büyük AI revizyonlarından sonra yapısal kalite kontrolü yapmak için","src/content/docs/tr/architecture-lint.md","4bb0e9a9a5dea062",{"html":1192,"metadata":1193},"\u003Cp>Architecture Linting, kuralları doğrudan diyagram üzerinde uygulamanızı sağlar. Bu, sistem diyagramları için lint mantığına en yakın yüzeydir.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"nerede-bulunur\">Nerede bulunur?\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#nerede-bulunur\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Nerede bulunur?”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Studio içindeki \u003Cstrong>Lint\u003C/strong> sekmesinde.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"neler-yapar\">Neler yapar?\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#neler-yapar\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Neler yapar?”\u003C/span>\u003C/a>\u003C/div>\n\u003Cul>\n\u003Cli>JSON kural seti düzenleme\u003C/li>\n\u003Cli>kural dosyası parse hatalarını görme\u003C/li>\n\u003Cli>error, warning ve info seviyelerinde ihlal listesi görme\u003C/li>\n\u003Cli>diyagram üzerinde kural uyumunu hızlıca değerlendirme\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"ne-zaman-kullanılır\">Ne zaman kullanılır?\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#ne-zaman-kullanılır\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Ne zaman kullanılır?”\u003C/span>\u003C/a>\u003C/div>\n\u003Cul>\n\u003Cli>mimari sınırları zorlayan ilişkileri tespit etmek için\u003C/li>\n\u003Cli>altyapı senkronizasyonundan gelen grafiği doğrulamak için\u003C/li>\n\u003Cli>büyük AI revizyonlarından sonra yapısal kalite kontrolü yapmak için\u003C/li>\n\u003C/ul>",{"headings":1194,"localImagePaths":1204,"remoteImagePaths":1205,"frontmatter":1206,"imagePaths":1207},[1195,1198,1201],{"depth":30,"slug":1196,"text":1197},"nerede-bulunur","Nerede bulunur?",{"depth":30,"slug":1199,"text":1200},"neler-yapar","Neler yapar?",{"depth":30,"slug":1202,"text":1203},"ne-zaman-kullanılır","Ne zaman kullanılır?",[],[],{"draft":20,"title":160,"description":1184},[],"tr/ai-generation",{"id":1208,"data":1210,"body":1215,"filePath":1216,"digest":1217,"rendered":1218},{"title":65,"description":1211,"editUrl":16,"head":1212,"template":18,"sidebar":1213,"pagefind":16,"draft":20},"FlowPilot, BYOK sağlayıcılar, koddan mimari üretimi ve yapılandırılmış içe aktarma ile diyagram üretin ve geliştirin.",[],{"hidden":20,"attrs":1214},{},"OpenFlowKit, Studio alanı üzerinden yapay zeka destekli diyagram üretimi sunar. FlowPilot özellikle ilk taslak, yapısal revizyon ve kod tabanlı mimari görünümü üretmek için güçlüdür.\n\n## Üründe AI nerede yer alır?\n\nAI akışları Studio içindeki **FlowPilot** alanında ve Komut Merkezi üzerinden açılan **Open FlowPilot** eyleminde bulunur.\n\n| Mod | Ne yapar |\n| --- | --- |\n| **FlowPilot** | sohbet tabanlı üretim ve revizyon |\n| **From Code** | kaynak koddan mimari diyagram taslağı |\n| **Import** | SQL, Terraform, K8s veya OpenAPI girdilerinden taslak |\n\nTipik üretim akışı:\n\n1. istem ve varsa görsel alınır\n2. yapılandırılmış sağlayıcıya gönderilir\n3. yapısal graf temsili geri alınır\n4. düğüm ve kenarlar oluşturulur\n5. düzen uygulanır\n6. mevcut graf değiştirilir veya güncellenir\n\n## Sağlayıcı modeli\n\nUygulama birden çok BYOK sağlayıcıyı destekler:\n\n- Gemini\n- OpenAI\n- Claude\n- Groq\n- NVIDIA\n- Cerebras\n- Mistral\n- OpenRouter\n- özel OpenAI-uyumlu uç nokta\n\n## AI ne zaman doğru araçtır?\n\nŞu durumlarda kullanın:\n\n- elinizde sadece doğal dil açıklaması varsa\n- hızlı bir ilk taslak istiyorsanız\n- mevcut diyagramı kavramsal olarak yeniden şekillendirmek istiyorsanız\n- kaynak koddan yüksek seviyeli mimari çıkarımı almak istiyorsanız\n\nŞu durumlarda başka akışlar daha iyidir:\n\n- zaten kesin bir metinsel temsil varsa\n- deterministik altyapı parse’ı istiyorsanız\n- küçük diyagramı elle çizmek daha hızlıysa\n\n## Daha iyi sonuç almak için\n\nİyi istemler genellikle şunları içerir:\n\n- hedef kitle\n- sistemler veya aktörler\n- önemli dallar ve hata yolları\n- istenen yön\n- istenen detay seviyesi\n\n## Önerilen iş akışı\n\n1. FlowPilot ile ilk taslağı üretin\n2. tuval üzerinde yapıyı kontrol edin\n3. [Properties Panel](/tr/properties-panel/) ile ayrıntıları düzeltin\n4. gerekiyorsa [Smart Layout](/tr/smart-layout/) uygulayın\n5. sonraki büyük revizyondan önce snapshot alın\n\n## İlgili sayfalar\n\n- [Ask Flowpilot](/tr/ask-flowpilot/)\n- [Studio Overview](/tr/studio-overview/)\n- [Choose an Input Mode](/tr/choose-input-mode/)\n- [Prompting AI Agents](/tr/prompting-agents/)","src/content/docs/tr/ai-generation.md","ef64598bc4dce0bb",{"html":1219,"metadata":1220},"\u003Cp>OpenFlowKit, Studio alanı üzerinden yapay zeka destekli diyagram üretimi sunar. FlowPilot özellikle ilk taslak, yapısal revizyon ve kod tabanlı mimari görünümü üretmek için güçlüdür.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"üründe-ai-nerede-yer-alır\">Üründe AI nerede yer alır?\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#üründe-ai-nerede-yer-alır\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Üründe AI nerede yer alır?”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>AI akışları Studio içindeki \u003Cstrong>FlowPilot\u003C/strong> alanında ve Komut Merkezi üzerinden açılan \u003Cstrong>Open FlowPilot\u003C/strong> eyleminde bulunur.\u003C/p>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>Mod\u003C/th>\u003Cth>Ne yapar\u003C/th>\u003C/tr>\u003C/thead>\u003Ctbody>\u003Ctr>\u003Ctd>\u003Cstrong>FlowPilot\u003C/strong>\u003C/td>\u003Ctd>sohbet tabanlı üretim ve revizyon\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Cstrong>From Code\u003C/strong>\u003C/td>\u003Ctd>kaynak koddan mimari diyagram taslağı\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Cstrong>Import\u003C/strong>\u003C/td>\u003Ctd>SQL, Terraform, K8s veya OpenAPI girdilerinden taslak\u003C/td>\u003C/tr>\u003C/tbody>\u003C/table>\n\u003Cp>Tipik üretim akışı:\u003C/p>\n\u003Col>\n\u003Cli>istem ve varsa görsel alınır\u003C/li>\n\u003Cli>yapılandırılmış sağlayıcıya gönderilir\u003C/li>\n\u003Cli>yapısal graf temsili geri alınır\u003C/li>\n\u003Cli>düğüm ve kenarlar oluşturulur\u003C/li>\n\u003Cli>düzen uygulanır\u003C/li>\n\u003Cli>mevcut graf değiştirilir veya güncellenir\u003C/li>\n\u003C/ol>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"sağlayıcı-modeli\">Sağlayıcı modeli\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#sağlayıcı-modeli\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Sağlayıcı modeli”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Uygulama birden çok BYOK sağlayıcıyı destekler:\u003C/p>\n\u003Cul>\n\u003Cli>Gemini\u003C/li>\n\u003Cli>OpenAI\u003C/li>\n\u003Cli>Claude\u003C/li>\n\u003Cli>Groq\u003C/li>\n\u003Cli>NVIDIA\u003C/li>\n\u003Cli>Cerebras\u003C/li>\n\u003Cli>Mistral\u003C/li>\n\u003Cli>OpenRouter\u003C/li>\n\u003Cli>özel OpenAI-uyumlu uç nokta\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"ai-ne-zaman-doğru-araçtır\">AI ne zaman doğru araçtır?\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#ai-ne-zaman-doğru-araçtır\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “AI ne zaman doğru araçtır?”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Şu durumlarda kullanın:\u003C/p>\n\u003Cul>\n\u003Cli>elinizde sadece doğal dil açıklaması varsa\u003C/li>\n\u003Cli>hızlı bir ilk taslak istiyorsanız\u003C/li>\n\u003Cli>mevcut diyagramı kavramsal olarak yeniden şekillendirmek istiyorsanız\u003C/li>\n\u003Cli>kaynak koddan yüksek seviyeli mimari çıkarımı almak istiyorsanız\u003C/li>\n\u003C/ul>\n\u003Cp>Şu durumlarda başka akışlar daha iyidir:\u003C/p>\n\u003Cul>\n\u003Cli>zaten kesin bir metinsel temsil varsa\u003C/li>\n\u003Cli>deterministik altyapı parse’ı istiyorsanız\u003C/li>\n\u003Cli>küçük diyagramı elle çizmek daha hızlıysa\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"daha-iyi-sonuç-almak-için\">Daha iyi sonuç almak için\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#daha-iyi-sonuç-almak-için\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Daha iyi sonuç almak için”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>İyi istemler genellikle şunları içerir:\u003C/p>\n\u003Cul>\n\u003Cli>hedef kitle\u003C/li>\n\u003Cli>sistemler veya aktörler\u003C/li>\n\u003Cli>önemli dallar ve hata yolları\u003C/li>\n\u003Cli>istenen yön\u003C/li>\n\u003Cli>istenen detay seviyesi\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"önerilen-iş-akışı\">Önerilen iş akışı\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#önerilen-iş-akışı\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Önerilen iş akışı”\u003C/span>\u003C/a>\u003C/div>\n\u003Col>\n\u003Cli>FlowPilot ile ilk taslağı üretin\u003C/li>\n\u003Cli>tuval üzerinde yapıyı kontrol edin\u003C/li>\n\u003Cli>\u003Ca href=\"/tr/properties-panel/\">Properties Panel\u003C/a> ile ayrıntıları düzeltin\u003C/li>\n\u003Cli>gerekiyorsa \u003Ca href=\"/tr/smart-layout/\">Smart Layout\u003C/a> uygulayın\u003C/li>\n\u003Cli>sonraki büyük revizyondan önce snapshot alın\u003C/li>\n\u003C/ol>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"i̇lgili-sayfalar\">İlgili sayfalar\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#i̇lgili-sayfalar\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “İlgili sayfalar”\u003C/span>\u003C/a>\u003C/div>\n\u003Cul>\n\u003Cli>\u003Ca href=\"/tr/ask-flowpilot/\">Ask Flowpilot\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"/tr/studio-overview/\">Studio Overview\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"/tr/choose-input-mode/\">Choose an Input Mode\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"/tr/prompting-agents/\">Prompting AI Agents\u003C/a>\u003C/li>\n\u003C/ul>",{"headings":1221,"localImagePaths":1240,"remoteImagePaths":1241,"frontmatter":1242,"imagePaths":1243},[1222,1225,1228,1231,1234,1237],{"depth":30,"slug":1223,"text":1224},"üründe-ai-nerede-yer-alır","Üründe AI nerede yer alır?",{"depth":30,"slug":1226,"text":1227},"sağlayıcı-modeli","Sağlayıcı modeli",{"depth":30,"slug":1229,"text":1230},"ai-ne-zaman-doğru-araçtır","AI ne zaman doğru araçtır?",{"depth":30,"slug":1232,"text":1233},"daha-iyi-sonuç-almak-için","Daha iyi sonuç almak için",{"depth":30,"slug":1235,"text":1236},"önerilen-iş-akışı","Önerilen iş akışı",{"depth":30,"slug":1238,"text":1239},"i̇lgili-sayfalar","İlgili sayfalar",[],[],{"draft":20,"title":65,"description":1211},[],"tr/ask-flowpilot",{"id":1244,"data":1246,"body":1251,"filePath":1252,"digest":1253,"rendered":1254},{"title":300,"description":1247,"editUrl":16,"head":1248,"template":18,"sidebar":1249,"pagefind":16,"draft":20},"FlowPilot’i Studio içindeki sohbet tabanlı yardımcı olarak kullanın; diyagram taslağı üretin, revize edin ve yön değiştirin.",[],{"hidden":20,"attrs":1250},{},"FlowPilot, Studio içindeki sohbet tabanlı asistandır. Bir diyagramı doğal dille tarif etmek, mevcut bir taslağı yeniden kurmak veya farklı bir yapısal yaklaşım istemek için en hızlı yoldur.\n\n## İyi kullanım senaryoları\n\nFlowPilot’i şu durumlarda kullanın:\n\n- metin isteminden ilk taslağı üretmek için\n- mevcut sistemi daha temiz bir yapıya çevirmek için\n- eksik hata yollarını ve dalları eklemek için\n- kod veya yapılandırılmış girdiden ilk diyagram taslağını almak için\n\n## İsteminizde ne olmalı?\n\nİyi istemler genelde şunları içerir:\n\n- hedef kitle\n- sistemler veya aktörler\n- önemli dallar veya kısıtlar\n- tercih edilen yön (`LR`, `TB` gibi)\n- yüksek seviye mi, detaylı operasyon akışı mı istendiği\n\n## Örnek istem\n\n```text\nŞu bileşenleri içeren soldan sağa bir SaaS mimarisi oluştur:\nweb istemcisi, API gateway, auth servisi, billing servisi,\nPostgres, Redis cache, background workers ve S3 tabanlı dosya saklama.\nPublic ingress, async işler ve hata işleme yollarını göster.\n```\n\n## Üretimden sonra ne yapılmalı?\n\nFlowPilot en güçlü halini taslak üreticisi olarak gösterir, son editör olarak değil. Üretimden sonra:\n\n- yapıyı tuvalde inceleyin\n- [Properties Panel](/tr/properties-panel/) ile etiket ve görsel ayarları düzeltin\n- gerekirse [Smart Layout](/tr/smart-layout/) ile yerleşimi toplayın\n- yeni büyük revizyonlardan önce snapshot alın\n\n## İlgili sayfalar\n\n- [AI Generation](/tr/ai-generation/)\n- [Prompting AI Agents](/tr/prompting-agents/)\n- [Choose an Input Mode](/tr/choose-input-mode/)","src/content/docs/tr/ask-flowpilot.md","ed8e097de9d4d264",{"html":1255,"metadata":1256},"\u003Cp>FlowPilot, Studio içindeki sohbet tabanlı asistandır. Bir diyagramı doğal dille tarif etmek, mevcut bir taslağı yeniden kurmak veya farklı bir yapısal yaklaşım istemek için en hızlı yoldur.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"i̇yi-kullanım-senaryoları\">İyi kullanım senaryoları\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#i̇yi-kullanım-senaryoları\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “İyi kullanım senaryoları”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>FlowPilot’i şu durumlarda kullanın:\u003C/p>\n\u003Cul>\n\u003Cli>metin isteminden ilk taslağı üretmek için\u003C/li>\n\u003Cli>mevcut sistemi daha temiz bir yapıya çevirmek için\u003C/li>\n\u003Cli>eksik hata yollarını ve dalları eklemek için\u003C/li>\n\u003Cli>kod veya yapılandırılmış girdiden ilk diyagram taslağını almak için\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"i̇steminizde-ne-olmalı\">İsteminizde ne olmalı?\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#i̇steminizde-ne-olmalı\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “İsteminizde ne olmalı?”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>İyi istemler genelde şunları içerir:\u003C/p>\n\u003Cul>\n\u003Cli>hedef kitle\u003C/li>\n\u003Cli>sistemler veya aktörler\u003C/li>\n\u003Cli>önemli dallar veya kısıtlar\u003C/li>\n\u003Cli>tercih edilen yön (\u003Ccode dir=\"auto\">LR\u003C/code>, \u003Ccode dir=\"auto\">TB\u003C/code> gibi)\u003C/li>\n\u003Cli>yüksek seviye mi, detaylı operasyon akışı mı istendiği\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"örnek-istem\">Örnek istem\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#örnek-istem\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Örnek istem”\u003C/span>\u003C/a>\u003C/div>\n\u003Cdiv class=\"expressive-code\">\u003Clink rel=\"stylesheet\" href=\"/_astro/ec.v4551.css\">\u003Cscript type=\"module\" src=\"/_astro/ec.0vx5m.js\">\u003C/script>\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"text\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">Şu bileşenleri içeren soldan sağa bir SaaS mimarisi oluştur:\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">web istemcisi, API gateway, auth servisi, billing servisi,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">Postgres, Redis cache, background workers ve S3 tabanlı dosya saklama.\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">Public ingress, async işler ve hata işleme yollarını göster.\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"Şu bileşenleri içeren soldan sağa bir SaaS mimarisi oluştur:web istemcisi, API gateway, auth servisi, billing servisi,Postgres, Redis cache, background workers ve S3 tabanlı dosya saklama.Public ingress, async işler ve hata işleme yollarını göster.\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"üretimden-sonra-ne-yapılmalı\">Üretimden sonra ne yapılmalı?\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#üretimden-sonra-ne-yapılmalı\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Üretimden sonra ne yapılmalı?”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>FlowPilot en güçlü halini taslak üreticisi olarak gösterir, son editör olarak değil. Üretimden sonra:\u003C/p>\n\u003Cul>\n\u003Cli>yapıyı tuvalde inceleyin\u003C/li>\n\u003Cli>\u003Ca href=\"/tr/properties-panel/\">Properties Panel\u003C/a> ile etiket ve görsel ayarları düzeltin\u003C/li>\n\u003Cli>gerekirse \u003Ca href=\"/tr/smart-layout/\">Smart Layout\u003C/a> ile yerleşimi toplayın\u003C/li>\n\u003Cli>yeni büyük revizyonlardan önce snapshot alın\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"i̇lgili-sayfalar\">İlgili sayfalar\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#i̇lgili-sayfalar\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “İlgili sayfalar”\u003C/span>\u003C/a>\u003C/div>\n\u003Cul>\n\u003Cli>\u003Ca href=\"/tr/ai-generation/\">AI Generation\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"/tr/prompting-agents/\">Prompting AI Agents\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"/tr/choose-input-mode/\">Choose an Input Mode\u003C/a>\u003C/li>\n\u003C/ul>",{"headings":1257,"localImagePaths":1271,"remoteImagePaths":1272,"frontmatter":1273,"imagePaths":1274},[1258,1261,1264,1267,1270],{"depth":30,"slug":1259,"text":1260},"i̇yi-kullanım-senaryoları","İyi kullanım senaryoları",{"depth":30,"slug":1262,"text":1263},"i̇steminizde-ne-olmalı","İsteminizde ne olmalı?",{"depth":30,"slug":1265,"text":1266},"örnek-istem","Örnek istem",{"depth":30,"slug":1268,"text":1269},"üretimden-sonra-ne-yapılmalı","Üretimden sonra ne yapılmalı?",{"depth":30,"slug":1238,"text":1239},[],[],{"draft":20,"title":300,"description":1247},[],"tr/aws-architecture",{"id":1275,"data":1277,"body":1282,"filePath":1283,"digest":1284,"rendered":1285},{"title":332,"description":1278,"editUrl":16,"head":1279,"template":18,"sidebar":1280,"pagefind":16,"draft":20},"Şablonlar, ikon destekli varlıklar, AI taslağı, DSL ve dışa aktarma akışlarıyla OpenFlowKit içinde AWS mimari diyagramları oluşturun.",[],{"hidden":20,"attrs":1281},{},"OpenFlowKit, sağlayıcı ikonları, mimari odaklı yerleşim ve AI/kod tabanlı üretim kombinasyonu sayesinde AWS mimari diyagramları için güçlü bir çalışma alanıdır.\n\n## Başlangıç yolları\n\n- AWS şablonları\n- Assets içindeki AWS ikon kataloğu\n- FlowPilot ile mimari istemi\n- OpenFlow DSL ile deterministik ilk taslak\n\n## Önerilen akış\n\n1. ana servisleri yerleştirin\n2. VPC ve subnet sınırlarını ekleyin\n3. trafik ve async akışları bağlayın\n4. [Smart Layout](/tr/smart-layout/) uygulayın\n5. etiket, protokol ve görsel vurguları netleştirin\n6. gerekiyorsa snapshot alın\n7. uygun formatta paylaşın veya dışa aktarın\n\n## İlgili sayfalar\n\n- [Infrastructure Sync](/tr/infra-sync/)\n- [Templates & Starter Flows](/tr/templates-assets/)\n- [Choose an Export Format](/tr/choose-export-format/)","src/content/docs/tr/aws-architecture.md","471230e22d1f0072",{"html":1286,"metadata":1287},"\u003Cp>OpenFlowKit, sağlayıcı ikonları, mimari odaklı yerleşim ve AI/kod tabanlı üretim kombinasyonu sayesinde AWS mimari diyagramları için güçlü bir çalışma alanıdır.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"başlangıç-yolları\">Başlangıç yolları\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#başlangıç-yolları\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Başlangıç yolları”\u003C/span>\u003C/a>\u003C/div>\n\u003Cul>\n\u003Cli>AWS şablonları\u003C/li>\n\u003Cli>Assets içindeki AWS ikon kataloğu\u003C/li>\n\u003Cli>FlowPilot ile mimari istemi\u003C/li>\n\u003Cli>OpenFlow DSL ile deterministik ilk taslak\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"önerilen-akış\">Önerilen akış\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#önerilen-akış\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Önerilen akış”\u003C/span>\u003C/a>\u003C/div>\n\u003Col>\n\u003Cli>ana servisleri yerleştirin\u003C/li>\n\u003Cli>VPC ve subnet sınırlarını ekleyin\u003C/li>\n\u003Cli>trafik ve async akışları bağlayın\u003C/li>\n\u003Cli>\u003Ca href=\"/tr/smart-layout/\">Smart Layout\u003C/a> uygulayın\u003C/li>\n\u003Cli>etiket, protokol ve görsel vurguları netleştirin\u003C/li>\n\u003Cli>gerekiyorsa snapshot alın\u003C/li>\n\u003Cli>uygun formatta paylaşın veya dışa aktarın\u003C/li>\n\u003C/ol>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"i̇lgili-sayfalar\">İlgili sayfalar\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#i̇lgili-sayfalar\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “İlgili sayfalar”\u003C/span>\u003C/a>\u003C/div>\n\u003Cul>\n\u003Cli>\u003Ca href=\"/tr/infra-sync/\">Infrastructure Sync\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"/tr/templates-assets/\">Templates &#x26; Starter Flows\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"/tr/choose-export-format/\">Choose an Export Format\u003C/a>\u003C/li>\n\u003C/ul>",{"headings":1288,"localImagePaths":1296,"remoteImagePaths":1297,"frontmatter":1298,"imagePaths":1299},[1289,1292,1295],{"depth":30,"slug":1290,"text":1291},"başlangıç-yolları","Başlangıç yolları",{"depth":30,"slug":1293,"text":1294},"önerilen-akış","Önerilen akış",{"depth":30,"slug":1238,"text":1239},[],[],{"draft":20,"title":332,"description":1278},[],"tr/canvas-basics",{"id":1300,"data":1302,"body":1307,"filePath":1308,"digest":1309,"rendered":1310},{"title":14,"description":1303,"editUrl":16,"head":1304,"template":18,"sidebar":1305,"pagefind":16,"draft":20},"OpenFlowKit tuvalinde gezinmeyi, seçim yapmayı, düzenlemeyi ve çalışmanızı geri kazanmayı öğrenin.",[],{"hidden":20,"attrs":1306},{},"Tuval, OpenFlowKit’in ana düzenleme yüzeyidir. Doğrudan graf üzerinde çalışmayı ve kesin düzenlemeleri yan panellerle birleştirir.\n\n## Tuvali ne zaman kullanmalısınız?\n\nTuvali şu durumlarda kullanın:\n\n- diyagramı manuel olarak çizmek istediğinizde\n- yapay zeka, içe aktarma veya koddan gelen bir sonucu iyileştirmek istediğinizde\n- yapıyı metin yerine mekânsal olarak değerlendirmek istediğinizde\n- doğrudan sürükle-bırak düzenleme yapmak istediğinizde\n\n## Gezinme\n\n### Kaydırma ve yakınlaştırma\n\n- Fare tekerleği ile yakınlaşın veya uzaklaşın\n- `Space + Drag` ile kaydırın\n- `H` el moduna geçer\n- `V` seçim moduna döner\n- `Shift + 1` mevcut grafiği görünüşe sığdırır\n- `Cmd/Ctrl + +/-` yakınlaştırma kontrolü sağlar\n\n### Büyük diyagramlarda gezinme\n\n- görünüşe sığdırmayı kullanın\n- Komut Merkezi aramasıyla düğümlere atlayın\n- yapı doğruysa otomatik düzeni kullanın\n\n## Seçim\n\n### Tekli seçim\n\nBir düğüme veya kenara tıklayarak inceleyip düzenleyin.\n\n### Çoklu seçim\n\n- `Shift + Click`\n- `Shift + Drag` ile seçim kutusu\n\nBirden fazla düğüm seçildiğinde sağ panel toplu düzenleme moduna geçer.\n\n## Doğrudan düzenleme ve kesin düzenleme\n\nTuval, grafiği hareket ettirdiğiniz ve yapılandırdığınız yüzeydir. Kesin değerler ve aileye özgü ayarlar için [Properties Panel](/tr/properties-panel/) kullanın. Şablonlar, arama, düzen ve iş akışı geçişleri için [Command Center](/tr/command-center/) daha doğrudur.\n\n## Geçmiş ve kurtarma\n\nKısa düzeltmeler için undo/redo, büyük geri dönüşler için snapshot kullanın. Bkz. [Playback & History](/tr/playback-history/).","src/content/docs/tr/canvas-basics.md","a2b9fb3a1429fb82",{"html":1311,"metadata":1312},"\u003Cp>Tuval, OpenFlowKit’in ana düzenleme yüzeyidir. Doğrudan graf üzerinde çalışmayı ve kesin düzenlemeleri yan panellerle birleştirir.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"tuvali-ne-zaman-kullanmalısınız\">Tuvali ne zaman kullanmalısınız?\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#tuvali-ne-zaman-kullanmalısınız\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Tuvali ne zaman kullanmalısınız?”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Tuvali şu durumlarda kullanın:\u003C/p>\n\u003Cul>\n\u003Cli>diyagramı manuel olarak çizmek istediğinizde\u003C/li>\n\u003Cli>yapay zeka, içe aktarma veya koddan gelen bir sonucu iyileştirmek istediğinizde\u003C/li>\n\u003Cli>yapıyı metin yerine mekânsal olarak değerlendirmek istediğinizde\u003C/li>\n\u003Cli>doğrudan sürükle-bırak düzenleme yapmak istediğinizde\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"gezinme\">Gezinme\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#gezinme\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Gezinme”\u003C/span>\u003C/a>\u003C/div>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"kaydırma-ve-yakınlaştırma\">Kaydırma ve yakınlaştırma\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#kaydırma-ve-yakınlaştırma\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Kaydırma ve yakınlaştırma”\u003C/span>\u003C/a>\u003C/div>\n\u003Cul>\n\u003Cli>Fare tekerleği ile yakınlaşın veya uzaklaşın\u003C/li>\n\u003Cli>\u003Ccode dir=\"auto\">Space + Drag\u003C/code> ile kaydırın\u003C/li>\n\u003Cli>\u003Ccode dir=\"auto\">H\u003C/code> el moduna geçer\u003C/li>\n\u003Cli>\u003Ccode dir=\"auto\">V\u003C/code> seçim moduna döner\u003C/li>\n\u003Cli>\u003Ccode dir=\"auto\">Shift + 1\u003C/code> mevcut grafiği görünüşe sığdırır\u003C/li>\n\u003Cli>\u003Ccode dir=\"auto\">Cmd/Ctrl + +/-\u003C/code> yakınlaştırma kontrolü sağlar\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"büyük-diyagramlarda-gezinme\">Büyük diyagramlarda gezinme\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#büyük-diyagramlarda-gezinme\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Büyük diyagramlarda gezinme”\u003C/span>\u003C/a>\u003C/div>\n\u003Cul>\n\u003Cli>görünüşe sığdırmayı kullanın\u003C/li>\n\u003Cli>Komut Merkezi aramasıyla düğümlere atlayın\u003C/li>\n\u003Cli>yapı doğruysa otomatik düzeni kullanın\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"seçim\">Seçim\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#seçim\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Seçim”\u003C/span>\u003C/a>\u003C/div>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"tekli-seçim\">Tekli seçim\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#tekli-seçim\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Tekli seçim”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Bir düğüme veya kenara tıklayarak inceleyip düzenleyin.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"çoklu-seçim\">Çoklu seçim\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#çoklu-seçim\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Çoklu seçim”\u003C/span>\u003C/a>\u003C/div>\n\u003Cul>\n\u003Cli>\u003Ccode dir=\"auto\">Shift + Click\u003C/code>\u003C/li>\n\u003Cli>\u003Ccode dir=\"auto\">Shift + Drag\u003C/code> ile seçim kutusu\u003C/li>\n\u003C/ul>\n\u003Cp>Birden fazla düğüm seçildiğinde sağ panel toplu düzenleme moduna geçer.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"doğrudan-düzenleme-ve-kesin-düzenleme\">Doğrudan düzenleme ve kesin düzenleme\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#doğrudan-düzenleme-ve-kesin-düzenleme\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Doğrudan düzenleme ve kesin düzenleme”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Tuval, grafiği hareket ettirdiğiniz ve yapılandırdığınız yüzeydir. Kesin değerler ve aileye özgü ayarlar için \u003Ca href=\"/tr/properties-panel/\">Properties Panel\u003C/a> kullanın. Şablonlar, arama, düzen ve iş akışı geçişleri için \u003Ca href=\"/tr/command-center/\">Command Center\u003C/a> daha doğrudur.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"geçmiş-ve-kurtarma\">Geçmiş ve kurtarma\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#geçmiş-ve-kurtarma\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Geçmiş ve kurtarma”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Kısa düzeltmeler için undo/redo, büyük geri dönüşler için snapshot kullanın. Bkz. \u003Ca href=\"/tr/playback-history/\">Playback &#x26; History\u003C/a>.\u003C/p>",{"headings":1313,"localImagePaths":1341,"remoteImagePaths":1342,"frontmatter":1343,"imagePaths":1344},[1314,1317,1320,1323,1326,1329,1332,1335,1338],{"depth":30,"slug":1315,"text":1316},"tuvali-ne-zaman-kullanmalısınız","Tuvali ne zaman kullanmalısınız?",{"depth":30,"slug":1318,"text":1319},"gezinme","Gezinme",{"depth":37,"slug":1321,"text":1322},"kaydırma-ve-yakınlaştırma","Kaydırma ve yakınlaştırma",{"depth":37,"slug":1324,"text":1325},"büyük-diyagramlarda-gezinme","Büyük diyagramlarda gezinme",{"depth":30,"slug":1327,"text":1328},"seçim","Seçim",{"depth":37,"slug":1330,"text":1331},"tekli-seçim","Tekli seçim",{"depth":37,"slug":1333,"text":1334},"çoklu-seçim","Çoklu seçim",{"depth":30,"slug":1336,"text":1337},"doğrudan-düzenleme-ve-kesin-düzenleme","Doğrudan düzenleme ve kesin düzenleme",{"depth":30,"slug":1339,"text":1340},"geçmiş-ve-kurtarma","Geçmiş ve kurtarma",[],[],{"draft":20,"title":14,"description":1303},[],"tr/choose-export-format",{"id":1345,"data":1347,"body":1352,"filePath":1353,"digest":1354,"rendered":1355},{"title":136,"description":1348,"editUrl":16,"head":1349,"template":18,"sidebar":1350,"pagefind":16,"draft":20},"Düzenleme, dokümantasyon, ortak çalışma, gömme veya tasarım aracı aktarımı için doğru OpenFlowKit dışa aktarma formatını seçin.",[],{"hidden":20,"attrs":1351},{},"OpenFlowKit hem görsel hem de düzenlenebilir teslim formatlarını destekler. En doğru seçim bir sonraki adıma göre belirlenir.\n\n## Hızlı rehber\n\n| İhtiyaç | En iyi format |\n| --- | --- |\n| düzenlenebilir ana arşiv | JSON |\n| editör-doğal metin | OpenFlow DSL |\n| Markdown veya repo dostu metin | Mermaid |\n| dokümanlar ve sunumlar | PNG, JPG veya SVG |\n| tasarım aracı aktarımı | Figma |\n| kısa oynatma çıktısı | GIF veya video |\n| canlı izleyici veya oda erişimi | Share / Embed |\n\n## Varsayılan öneri\n\n- JSON’u ana düzenlenebilir kaynak olarak tutun\n- ihtiyaç halinde görsel çıktı üretin\n- metin iş akışı gerekiyorsa Mermaid veya DSL kullanın","src/content/docs/tr/choose-export-format.md","1b58fa2f3b8a2032",{"html":1356,"metadata":1357},"\u003Cp>OpenFlowKit hem görsel hem de düzenlenebilir teslim formatlarını destekler. En doğru seçim bir sonraki adıma göre belirlenir.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"hızlı-rehber\">Hızlı rehber\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#hızlı-rehber\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Hızlı rehber”\u003C/span>\u003C/a>\u003C/div>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>İhtiyaç\u003C/th>\u003Cth>En iyi format\u003C/th>\u003C/tr>\u003C/thead>\u003Ctbody>\u003Ctr>\u003Ctd>düzenlenebilir ana arşiv\u003C/td>\u003Ctd>JSON\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>editör-doğal metin\u003C/td>\u003Ctd>OpenFlow DSL\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>Markdown veya repo dostu metin\u003C/td>\u003Ctd>Mermaid\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>dokümanlar ve sunumlar\u003C/td>\u003Ctd>PNG, JPG veya SVG\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>tasarım aracı aktarımı\u003C/td>\u003Ctd>Figma\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>kısa oynatma çıktısı\u003C/td>\u003Ctd>GIF veya video\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>canlı izleyici veya oda erişimi\u003C/td>\u003Ctd>Share / Embed\u003C/td>\u003C/tr>\u003C/tbody>\u003C/table>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"varsayılan-öneri\">Varsayılan öneri\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#varsayılan-öneri\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Varsayılan öneri”\u003C/span>\u003C/a>\u003C/div>\n\u003Cul>\n\u003Cli>JSON’u ana düzenlenebilir kaynak olarak tutun\u003C/li>\n\u003Cli>ihtiyaç halinde görsel çıktı üretin\u003C/li>\n\u003Cli>metin iş akışı gerekiyorsa Mermaid veya DSL kullanın\u003C/li>\n\u003C/ul>",{"headings":1358,"localImagePaths":1365,"remoteImagePaths":1366,"frontmatter":1367,"imagePaths":1368},[1359,1362],{"depth":30,"slug":1360,"text":1361},"hızlı-rehber","Hızlı rehber",{"depth":30,"slug":1363,"text":1364},"varsayılan-öneri","Varsayılan öneri",[],[],{"draft":20,"title":136,"description":1348},[],"tr/choose-input-mode",{"id":1369,"data":1371,"body":1376,"filePath":1377,"digest":1378,"rendered":1379},{"title":105,"description":1372,"editUrl":16,"head":1373,"template":18,"sidebar":1374,"pagefind":16,"draft":20},"Tuval, AI, OpenFlow DSL, Mermaid, yapılandırılmış içe aktarma veya Infrastructure Sync arasında doğru başlangıç modunu seçin.",[],{"hidden":20,"attrs":1375},{},"OpenFlowKit bir diyagramı üretmek için birden fazla yol sunar. Doğru seçim, zaten elinizde ne olduğuna bağlıdır.\n\n## Hızlı eşleştirme\n\n| Elinizde olan | Başlangıç |\n| --- | --- |\n| kaba bir fikir | [AI Generation](/tr/ai-generation/) |\n| manuel çizilecek yapı | [Canvas Basics](/tr/canvas-basics/) |\n| editör-doğal metin kontrolü | [OpenFlow DSL](/tr/openflow-dsl/) |\n| mevcut Mermaid | [Mermaid Integration](/tr/mermaid-integration/) |\n| SQL, OpenAPI, Terraform veya K8s metni | [Import from Structured Data](/tr/import-from-data/) |\n| deterministik parse edilecek altyapı dosyaları | [Infrastructure Sync](/tr/infra-sync/) |\n\n## Temel kural\n\nElinizdeki en güçlü ve en doğru yapısal girdi ile başlayın. O yoksa daha gevşek bir mod olan AI’ya geçin.","src/content/docs/tr/choose-input-mode.md","079177613d16dd9b",{"html":1380,"metadata":1381},"\u003Cp>OpenFlowKit bir diyagramı üretmek için birden fazla yol sunar. Doğru seçim, zaten elinizde ne olduğuna bağlıdır.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"hızlı-eşleştirme\">Hızlı eşleştirme\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#hızlı-eşleştirme\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Hızlı eşleştirme”\u003C/span>\u003C/a>\u003C/div>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>Elinizde olan\u003C/th>\u003Cth>Başlangıç\u003C/th>\u003C/tr>\u003C/thead>\u003Ctbody>\u003Ctr>\u003Ctd>kaba bir fikir\u003C/td>\u003Ctd>\u003Ca href=\"/tr/ai-generation/\">AI Generation\u003C/a>\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>manuel çizilecek yapı\u003C/td>\u003Ctd>\u003Ca href=\"/tr/canvas-basics/\">Canvas Basics\u003C/a>\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>editör-doğal metin kontrolü\u003C/td>\u003Ctd>\u003Ca href=\"/tr/openflow-dsl/\">OpenFlow DSL\u003C/a>\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>mevcut Mermaid\u003C/td>\u003Ctd>\u003Ca href=\"/tr/mermaid-integration/\">Mermaid Integration\u003C/a>\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>SQL, OpenAPI, Terraform veya K8s metni\u003C/td>\u003Ctd>\u003Ca href=\"/tr/import-from-data/\">Import from Structured Data\u003C/a>\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>deterministik parse edilecek altyapı dosyaları\u003C/td>\u003Ctd>\u003Ca href=\"/tr/infra-sync/\">Infrastructure Sync\u003C/a>\u003C/td>\u003C/tr>\u003C/tbody>\u003C/table>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"temel-kural\">Temel kural\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#temel-kural\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Temel kural”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Elinizdeki en güçlü ve en doğru yapısal girdi ile başlayın. O yoksa daha gevşek bir mod olan AI’ya geçin.\u003C/p>",{"headings":1382,"localImagePaths":1389,"remoteImagePaths":1390,"frontmatter":1391,"imagePaths":1392},[1383,1386],{"depth":30,"slug":1384,"text":1385},"hızlı-eşleştirme","Hızlı eşleştirme",{"depth":30,"slug":1387,"text":1388},"temel-kural","Temel kural",[],[],{"draft":20,"title":105,"description":1372},[],"tr/collaboration-sharing",{"id":1393,"data":1395,"body":1400,"filePath":1401,"digest":1402,"rendered":1403},{"title":268,"description":1396,"editUrl":16,"head":1397,"template":18,"sidebar":1398,"pagefind":16,"draft":20},"Oda bağlantıları paylaşın, local-only fallback davranışını anlayın ve OpenFlowKit ortak çalışma akışlarını doğru kullanın.",[],{"hidden":20,"attrs":1399},{},"OpenFlowKit, varsayılan local-first davranışı korurken paylaşım bağlantıları ve ortak çalışma odası akışlarını destekler.\n\n## Paylaşım akışında neler bulunur?\n\n- oda kimliği\n- davet URL’si\n- izleyici sayısı\n- katılımcı rozetleri\n- bağlantı durumu: realtime, connecting veya local-only fallback\n\n## Ne zaman paylaşım, ne zaman dışa aktarma?\n\nPaylaşımı şu durumlarda kullanın:\n\n- diyagram etkileşimli kalacaksa\n- başkaları aynı çalışma oturumuna katılacaksa\n- oda temelli ortak çalışma gerekiyorsa\n\nDışa aktarmayı şu durumlarda kullanın:\n\n- dosya/artifact gerekiyorsa\n- hedef sunum, doküman veya tasarım aracıysa\n- kalıcı bir teslim dosyası gerekiyorsa","src/content/docs/tr/collaboration-sharing.md","4b5a79f539b2ccaa",{"html":1404,"metadata":1405},"\u003Cp>OpenFlowKit, varsayılan local-first davranışı korurken paylaşım bağlantıları ve ortak çalışma odası akışlarını destekler.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"paylaşım-akışında-neler-bulunur\">Paylaşım akışında neler bulunur?\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#paylaşım-akışında-neler-bulunur\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Paylaşım akışında neler bulunur?”\u003C/span>\u003C/a>\u003C/div>\n\u003Cul>\n\u003Cli>oda kimliği\u003C/li>\n\u003Cli>davet URL’si\u003C/li>\n\u003Cli>izleyici sayısı\u003C/li>\n\u003Cli>katılımcı rozetleri\u003C/li>\n\u003Cli>bağlantı durumu: realtime, connecting veya local-only fallback\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"ne-zaman-paylaşım-ne-zaman-dışa-aktarma\">Ne zaman paylaşım, ne zaman dışa aktarma?\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#ne-zaman-paylaşım-ne-zaman-dışa-aktarma\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Ne zaman paylaşım, ne zaman dışa aktarma?”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Paylaşımı şu durumlarda kullanın:\u003C/p>\n\u003Cul>\n\u003Cli>diyagram etkileşimli kalacaksa\u003C/li>\n\u003Cli>başkaları aynı çalışma oturumuna katılacaksa\u003C/li>\n\u003Cli>oda temelli ortak çalışma gerekiyorsa\u003C/li>\n\u003C/ul>\n\u003Cp>Dışa aktarmayı şu durumlarda kullanın:\u003C/p>\n\u003Cul>\n\u003Cli>dosya/artifact gerekiyorsa\u003C/li>\n\u003Cli>hedef sunum, doküman veya tasarım aracıysa\u003C/li>\n\u003Cli>kalıcı bir teslim dosyası gerekiyorsa\u003C/li>\n\u003C/ul>",{"headings":1406,"localImagePaths":1413,"remoteImagePaths":1414,"frontmatter":1415,"imagePaths":1416},[1407,1410],{"depth":30,"slug":1408,"text":1409},"paylaşım-akışında-neler-bulunur","Paylaşım akışında neler bulunur?",{"depth":30,"slug":1411,"text":1412},"ne-zaman-paylaşım-ne-zaman-dışa-aktarma","Ne zaman paylaşım, ne zaman dışa aktarma?",[],[],{"draft":20,"title":268,"description":1396},[],"tr/design-systems-branding",{"id":1417,"data":1419,"body":1424,"filePath":1425,"digest":1426,"rendered":1427},{"title":195,"description":1420,"editUrl":16,"head":1421,"template":18,"sidebar":1422,"pagefind":16,"draft":20},"Tutarlı diyagramlar için OpenFlowKit tasarım sistemlerini yönetin ve tema tanımlarını içe veya dışa aktarın.",[],{"hidden":20,"attrs":1423},{},"OpenFlowKit, diyagramların tek tek elle stillenmesi yerine tekrar kullanılabilir bir görsel sistemle çalışmasını sağlayan tasarım sistemi desteğine sahiptir.\n\n## Desteklenen akışlar\n\nKomut Merkezi üzerinden:\n\n- aktif tasarım sistemini değiştirebilir\n- mevcut temadan yeni tema türetebilir\n- tema çoğaltabilir ve düzenleyebilir\n- JSON içe aktarabilir\n- aktif temayı dışa aktarabilirsiniz\n\n## Ne zaman kullanılmalı?\n\n- birden çok diyagramın tutarlı görünmesi gerektiğinde\n- takımın marka veya ürün standartları olduğunda\n- diyagram stilini tekrar kullanılabilir bir varlık olarak yönetmek istediğinizde","src/content/docs/tr/design-systems-branding.md","4291a1cce220fc90",{"html":1428,"metadata":1429},"\u003Cp>OpenFlowKit, diyagramların tek tek elle stillenmesi yerine tekrar kullanılabilir bir görsel sistemle çalışmasını sağlayan tasarım sistemi desteğine sahiptir.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"desteklenen-akışlar\">Desteklenen akışlar\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#desteklenen-akışlar\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Desteklenen akışlar”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Komut Merkezi üzerinden:\u003C/p>\n\u003Cul>\n\u003Cli>aktif tasarım sistemini değiştirebilir\u003C/li>\n\u003Cli>mevcut temadan yeni tema türetebilir\u003C/li>\n\u003Cli>tema çoğaltabilir ve düzenleyebilir\u003C/li>\n\u003Cli>JSON içe aktarabilir\u003C/li>\n\u003Cli>aktif temayı dışa aktarabilirsiniz\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"ne-zaman-kullanılmalı\">Ne zaman kullanılmalı?\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#ne-zaman-kullanılmalı\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Ne zaman kullanılmalı?”\u003C/span>\u003C/a>\u003C/div>\n\u003Cul>\n\u003Cli>birden çok diyagramın tutarlı görünmesi gerektiğinde\u003C/li>\n\u003Cli>takımın marka veya ürün standartları olduğunda\u003C/li>\n\u003Cli>diyagram stilini tekrar kullanılabilir bir varlık olarak yönetmek istediğinizde\u003C/li>\n\u003C/ul>",{"headings":1430,"localImagePaths":1437,"remoteImagePaths":1438,"frontmatter":1439,"imagePaths":1440},[1431,1434],{"depth":30,"slug":1432,"text":1433},"desteklenen-akışlar","Desteklenen akışlar",{"depth":30,"slug":1435,"text":1436},"ne-zaman-kullanılmalı","Ne zaman kullanılmalı?",[],[],{"draft":20,"title":195,"description":1420},[],"tr/command-center",{"id":1441,"data":1443,"body":1448,"filePath":1449,"digest":1450,"rendered":1451},{"title":228,"description":1444,"editUrl":16,"head":1445,"template":18,"sidebar":1446,"pagefind":16,"draft":20},"Arama yapmak, varlık eklemek, şablon başlatmak, Studio’ya geçmek ve düzen/tasarım sistemi işlemlerini çalıştırmak için klavye odaklı başlatıcıyı kullanın.",[],{"hidden":20,"attrs":1447},{},"Komut Merkezi, editörün klavye öncelikli başlatıcısıdır. Yüzen bir panel olarak açılır ve varlıklar, şablonlar, arama, düzen ve Studio akışları arasında geçiş yapmanın en hızlı yoludur.\n\n> [!NOTE]\n> macOS için `Cmd + K`, Windows/Linux için `Ctrl + K` ile açılır.\n\n## Üst seviye komutlar\n\nSık kullanılan komutlar:\n\n- Open FlowPilot\n- Edit Flow DSL\n- Edit Mermaid Code\n- Assets\n- Search Nodes\n- Auto Layout\n- Start from Template\n- Design Systems\n\n## Görünümler\n\n### Assets\n\nŞunları eklemek için kullanın:\n\n- notlar\n- metin blokları\n- bölümler\n- journey düğümleri\n- zihin haritası düğümleri\n- mimari düğümler\n- yüklenen görseller\n- browser wireframe’leri\n- mobile wireframe’leri\n\n### Templates\n\nBoş tuval yerine kanıtlanmış bir başlangıç iskeleti istediğinizde kullanın.\n\n### Search\n\nBüyük diyagramlarda adlı düğümlere hızlı atlamak için kullanın.\n\n### Design Systems\n\nTema değiştirmek, çoğaltmak, düzenlemek veya JSON tema dosyalarını içe/dışa aktarmak için kullanın.\n\n## Editördeki yeri\n\nKomut Merkezi, tuval ile Studio arasında en hızlı geçiş yüzeyidir:\n\n- doğrudan düzenleme için tuvali kullanın\n- kesin düzenlemeler için özellik panelini kullanın\n- arama, şablon, varlık, düzen ve iş akışı geçişleri için Komut Merkezi’ni kullanın","src/content/docs/tr/command-center.md","34ecf20d35ae4b83",{"html":1452,"metadata":1453},"\u003Cp>Komut Merkezi, editörün klavye öncelikli başlatıcısıdır. Yüzen bir panel olarak açılır ve varlıklar, şablonlar, arama, düzen ve Studio akışları arasında geçiş yapmanın en hızlı yoludur.\u003C/p>\n\u003Cblockquote>\n\u003Cp>[!NOTE]\nmacOS için \u003Ccode dir=\"auto\">Cmd + K\u003C/code>, Windows/Linux için \u003Ccode dir=\"auto\">Ctrl + K\u003C/code> ile açılır.\u003C/p>\n\u003C/blockquote>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"üst-seviye-komutlar\">Üst seviye komutlar\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#üst-seviye-komutlar\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Üst seviye komutlar”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Sık kullanılan komutlar:\u003C/p>\n\u003Cul>\n\u003Cli>Open FlowPilot\u003C/li>\n\u003Cli>Edit Flow DSL\u003C/li>\n\u003Cli>Edit Mermaid Code\u003C/li>\n\u003Cli>Assets\u003C/li>\n\u003Cli>Search Nodes\u003C/li>\n\u003Cli>Auto Layout\u003C/li>\n\u003Cli>Start from Template\u003C/li>\n\u003Cli>Design Systems\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"görünümler\">Görünümler\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#görünümler\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Görünümler”\u003C/span>\u003C/a>\u003C/div>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"assets\">Assets\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#assets\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Assets”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Şunları eklemek için kullanın:\u003C/p>\n\u003Cul>\n\u003Cli>notlar\u003C/li>\n\u003Cli>metin blokları\u003C/li>\n\u003Cli>bölümler\u003C/li>\n\u003Cli>journey düğümleri\u003C/li>\n\u003Cli>zihin haritası düğümleri\u003C/li>\n\u003Cli>mimari düğümler\u003C/li>\n\u003Cli>yüklenen görseller\u003C/li>\n\u003Cli>browser wireframe’leri\u003C/li>\n\u003Cli>mobile wireframe’leri\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"templates\">Templates\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#templates\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Templates”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Boş tuval yerine kanıtlanmış bir başlangıç iskeleti istediğinizde kullanın.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"search\">Search\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#search\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Search”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Büyük diyagramlarda adlı düğümlere hızlı atlamak için kullanın.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"design-systems\">Design Systems\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#design-systems\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Design Systems”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Tema değiştirmek, çoğaltmak, düzenlemek veya JSON tema dosyalarını içe/dışa aktarmak için kullanın.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"editördeki-yeri\">Editördeki yeri\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#editördeki-yeri\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Editördeki yeri”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Komut Merkezi, tuval ile Studio arasında en hızlı geçiş yüzeyidir:\u003C/p>\n\u003Cul>\n\u003Cli>doğrudan düzenleme için tuvali kullanın\u003C/li>\n\u003Cli>kesin düzenlemeler için özellik panelini kullanın\u003C/li>\n\u003Cli>arama, şablon, varlık, düzen ve iş akışı geçişleri için Komut Merkezi’ni kullanın\u003C/li>\n\u003C/ul>",{"headings":1454,"localImagePaths":1468,"remoteImagePaths":1469,"frontmatter":1470,"imagePaths":1471},[1455,1458,1461,1462,1463,1464,1465],{"depth":30,"slug":1456,"text":1457},"üst-seviye-komutlar","Üst seviye komutlar",{"depth":30,"slug":1459,"text":1460},"görünümler","Görünümler",{"depth":37,"slug":247,"text":248},{"depth":37,"slug":250,"text":251},{"depth":37,"slug":253,"text":254},{"depth":37,"slug":256,"text":257},{"depth":30,"slug":1466,"text":1467},"editördeki-yeri","Editördeki yeri",[],[],{"draft":20,"title":228,"description":1444},[],"tr/diagram-diff",{"id":1472,"data":1474,"body":1479,"filePath":1480,"digest":1481,"rendered":1482},{"title":369,"description":1475,"editUrl":16,"head":1476,"template":18,"sidebar":1477,"pagefind":16,"draft":20},"Mevcut diyagramı bir snapshot tabanı ile karşılaştırın ve eklenen, kaldırılan veya değişen öğeleri görün.",[],{"hidden":20,"attrs":1478},{},"Diagram Diff & Compare, mevcut grafiğin kaydedilmiş bir baseline snapshot’a göre nasıl değiştiğini incelemenizi sağlar.\n\n## Neleri gösterir?\n\n- eklenen düğümler ve kenarlar\n- kaldırılan düğümler ve kenarlar\n- değişen düğümler\n- baseline snapshot adı ve zamanı\n\n## Neden yararlıdır?\n\nBüyük değişikliklerden sonra sadece “farklı görünüyor” demek yerine, tam olarak neyin değiştiğini görmek için en doğru akıştır.","src/content/docs/tr/diagram-diff.md","c3774e497cc026b5",{"html":1483,"metadata":1484},"\u003Cp>Diagram Diff &#x26; Compare, mevcut grafiğin kaydedilmiş bir baseline snapshot’a göre nasıl değiştiğini incelemenizi sağlar.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"neleri-gösterir\">Neleri gösterir?\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#neleri-gösterir\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Neleri gösterir?”\u003C/span>\u003C/a>\u003C/div>\n\u003Cul>\n\u003Cli>eklenen düğümler ve kenarlar\u003C/li>\n\u003Cli>kaldırılan düğümler ve kenarlar\u003C/li>\n\u003Cli>değişen düğümler\u003C/li>\n\u003Cli>baseline snapshot adı ve zamanı\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"neden-yararlıdır\">Neden yararlıdır?\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#neden-yararlıdır\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Neden yararlıdır?”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Büyük değişikliklerden sonra sadece “farklı görünüyor” demek yerine, tam olarak neyin değiştiğini görmek için en doğru akıştır.\u003C/p>",{"headings":1485,"localImagePaths":1492,"remoteImagePaths":1493,"frontmatter":1494,"imagePaths":1495},[1486,1489],{"depth":30,"slug":1487,"text":1488},"neleri-gösterir","Neleri gösterir?",{"depth":30,"slug":1490,"text":1491},"neden-yararlıdır","Neden yararlıdır?",[],[],{"draft":20,"title":369,"description":1475},[],"tr/exporting",{"id":1496,"data":1498,"body":1503,"filePath":1504,"digest":1505,"rendered":1506},{"title":426,"description":1499,"editUrl":16,"head":1500,"template":18,"sidebar":1501,"pagefind":16,"draft":20},"Diyagramları OpenFlowKit’ten görsel, oynatma medyası, JSON, kod formatları, tasarım aracı aktarımı veya paylaşım/gömme akışları olarak dışa aktarın.",[],{"hidden":20,"attrs":1502},{},"Dışa aktarma menüsü editörün sağ üstünde yer alır ve hem indirilen dosyaları hem de panoya kopyalanan formatları kapsar.\n\n## İndirilen formatlar\n\n### PNG ve JPG\n\nŞunlar için kullanın:\n\n- dokümanlar\n- slaytlar\n- ticket sistemleri\n- hızlı görsel paylaşım\n\nPNG genellikle şeffaflık ve netlik açısından daha iyi varsayılandır. JPG ise beyaz arka planlı hafif paylaşım için uygundur.\n\n### SVG\n\nWeb, dokümantasyon ve ölçeklenebilir tasarım kullanımları için en iyi seçenektir.\n\n### JSON\n\nOpenFlowKit’e en yüksek sadakatle geri içe aktarılabilen ana arşiv formatıdır. Şunlar için kullanın:\n\n- yedekleme\n- düzenlenebilir ana kopya saklama\n- tarayıcılar arası aktarım\n- ileri tarihte tekrar düzenlenecek diyagramlar\n\n### Oynatma videosu ve GIF\n\nDeğişimin zaman içinde anlatılması gereken akışlar için kullanın.\n\n## Panoya kopyalanan formatlar\n\n- OpenFlow DSL\n- Mermaid\n- PlantUML\n- Figma editable export\n\nBu formatlar bir sonraki araç metin veya tasarım düzeyinde girdi beklediğinde daha uygundur.\n\n## Paylaşım\n\nMenüdeki **Share / Embed** seçeneği izleyici bağlantısı ve iş birliği odası akışları içindir.\n\n## Önerilen yaklaşım\n\nÇoğu ciddi kullanım için iyi bir desen şudur:\n\n1. JSON’u düzenlenebilir ana kopya olarak saklayın\n2. sunum için görsel format dışa aktarın\n3. metin iş akışı gerekiyorsa Mermaid veya DSL üretin\n4. etkileşim gerekiyorsa paylaşım/gömme akışını kullanın","src/content/docs/tr/exporting.md","fb5fb8b6ad76d188",{"html":1507,"metadata":1508},"\u003Cp>Dışa aktarma menüsü editörün sağ üstünde yer alır ve hem indirilen dosyaları hem de panoya kopyalanan formatları kapsar.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"i̇ndirilen-formatlar\">İndirilen formatlar\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#i̇ndirilen-formatlar\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “İndirilen formatlar”\u003C/span>\u003C/a>\u003C/div>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"png-ve-jpg\">PNG ve JPG\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#png-ve-jpg\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “PNG ve JPG”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Şunlar için kullanın:\u003C/p>\n\u003Cul>\n\u003Cli>dokümanlar\u003C/li>\n\u003Cli>slaytlar\u003C/li>\n\u003Cli>ticket sistemleri\u003C/li>\n\u003Cli>hızlı görsel paylaşım\u003C/li>\n\u003C/ul>\n\u003Cp>PNG genellikle şeffaflık ve netlik açısından daha iyi varsayılandır. JPG ise beyaz arka planlı hafif paylaşım için uygundur.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"svg\">SVG\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#svg\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “SVG”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Web, dokümantasyon ve ölçeklenebilir tasarım kullanımları için en iyi seçenektir.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"json\">JSON\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#json\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “JSON”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>OpenFlowKit’e en yüksek sadakatle geri içe aktarılabilen ana arşiv formatıdır. Şunlar için kullanın:\u003C/p>\n\u003Cul>\n\u003Cli>yedekleme\u003C/li>\n\u003Cli>düzenlenebilir ana kopya saklama\u003C/li>\n\u003Cli>tarayıcılar arası aktarım\u003C/li>\n\u003Cli>ileri tarihte tekrar düzenlenecek diyagramlar\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"oynatma-videosu-ve-gif\">Oynatma videosu ve GIF\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#oynatma-videosu-ve-gif\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Oynatma videosu ve GIF”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Değişimin zaman içinde anlatılması gereken akışlar için kullanın.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"panoya-kopyalanan-formatlar\">Panoya kopyalanan formatlar\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#panoya-kopyalanan-formatlar\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Panoya kopyalanan formatlar”\u003C/span>\u003C/a>\u003C/div>\n\u003Cul>\n\u003Cli>OpenFlow DSL\u003C/li>\n\u003Cli>Mermaid\u003C/li>\n\u003Cli>PlantUML\u003C/li>\n\u003Cli>Figma editable export\u003C/li>\n\u003C/ul>\n\u003Cp>Bu formatlar bir sonraki araç metin veya tasarım düzeyinde girdi beklediğinde daha uygundur.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"paylaşım\">Paylaşım\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#paylaşım\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Paylaşım”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Menüdeki \u003Cstrong>Share / Embed\u003C/strong> seçeneği izleyici bağlantısı ve iş birliği odası akışları içindir.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"önerilen-yaklaşım\">Önerilen yaklaşım\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#önerilen-yaklaşım\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Önerilen yaklaşım”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Çoğu ciddi kullanım için iyi bir desen şudur:\u003C/p>\n\u003Col>\n\u003Cli>JSON’u düzenlenebilir ana kopya olarak saklayın\u003C/li>\n\u003Cli>sunum için görsel format dışa aktarın\u003C/li>\n\u003Cli>metin iş akışı gerekiyorsa Mermaid veya DSL üretin\u003C/li>\n\u003Cli>etkileşim gerekiyorsa paylaşım/gömme akışını kullanın\u003C/li>\n\u003C/ol>",{"headings":1509,"localImagePaths":1530,"remoteImagePaths":1531,"frontmatter":1532,"imagePaths":1533},[1510,1513,1516,1517,1518,1521,1524,1527],{"depth":30,"slug":1511,"text":1512},"i̇ndirilen-formatlar","İndirilen formatlar",{"depth":37,"slug":1514,"text":1515},"png-ve-jpg","PNG ve JPG",{"depth":37,"slug":445,"text":446},{"depth":37,"slug":448,"text":449},{"depth":37,"slug":1519,"text":1520},"oynatma-videosu-ve-gif","Oynatma videosu ve GIF",{"depth":30,"slug":1522,"text":1523},"panoya-kopyalanan-formatlar","Panoya kopyalanan formatlar",{"depth":30,"slug":1525,"text":1526},"paylaşım","Paylaşım",{"depth":30,"slug":1528,"text":1529},"önerilen-yaklaşım","Önerilen yaklaşım",[],[],{"draft":20,"title":426,"description":1499},[],"tr/diagram-families",{"id":1534,"data":1536,"body":1541,"filePath":1542,"digest":1543,"rendered":1544},{"title":397,"description":1537,"editUrl":16,"head":1538,"template":18,"sidebar":1539,"pagefind":16,"draft":20},"Akışlar, mimari haritalar, zihin haritaları, journey diyagramları, sınıf diyagramları ve ER diyagramları için doğru OpenFlowKit ailesini seçin.",[],{"hidden":20,"attrs":1540},{},"OpenFlowKit birden fazla diyagram ailesini destekler; çünkü her problem aynı düğüm ve kenar modeline zorlanmamalıdır.\n\n## Mevcut aileler\n\n| Aile | En uygun kullanım |\n| --- | --- |\n| `flowchart` | Genel süreç ve sistem akışları |\n| `architecture` | Bulut, servis ve platform diyagramları |\n| `mindmap` | Dallanarak düşünme ve hiyerarşik fikirler |\n| `journey` | Kullanıcı veya süreç yolculukları |\n| `stateDiagram` | Durum geçişleri |\n| `classDiagram` | Nesne modelleme ve ilişkiler |\n| `erDiagram` | Tablolar ve ilişkisel yapı |\n| `gitGraph` | Git geçmişi ve branch akışları |\n\n## Nasıl seçilir?\n\nŞekle değil, diyagramın anlamsal ihtiyacına göre seçim yapın.\n\n- süreç odaklıysa `flowchart`\n- sistem topolojisi önemliyse `architecture`\n- hiyerarşi önemliyse `mindmap`\n- aşama ve aktör önemliyse `journey`","src/content/docs/tr/diagram-families.md","2c092b3d6799f275",{"html":1545,"metadata":1546},"\u003Cp>OpenFlowKit birden fazla diyagram ailesini destekler; çünkü her problem aynı düğüm ve kenar modeline zorlanmamalıdır.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"mevcut-aileler\">Mevcut aileler\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#mevcut-aileler\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Mevcut aileler”\u003C/span>\u003C/a>\u003C/div>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>Aile\u003C/th>\u003Cth>En uygun kullanım\u003C/th>\u003C/tr>\u003C/thead>\u003Ctbody>\u003Ctr>\u003Ctd>\u003Ccode dir=\"auto\">flowchart\u003C/code>\u003C/td>\u003Ctd>Genel süreç ve sistem akışları\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Ccode dir=\"auto\">architecture\u003C/code>\u003C/td>\u003Ctd>Bulut, servis ve platform diyagramları\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Ccode dir=\"auto\">mindmap\u003C/code>\u003C/td>\u003Ctd>Dallanarak düşünme ve hiyerarşik fikirler\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Ccode dir=\"auto\">journey\u003C/code>\u003C/td>\u003Ctd>Kullanıcı veya süreç yolculukları\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Ccode dir=\"auto\">stateDiagram\u003C/code>\u003C/td>\u003Ctd>Durum geçişleri\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Ccode dir=\"auto\">classDiagram\u003C/code>\u003C/td>\u003Ctd>Nesne modelleme ve ilişkiler\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Ccode dir=\"auto\">erDiagram\u003C/code>\u003C/td>\u003Ctd>Tablolar ve ilişkisel yapı\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Ccode dir=\"auto\">gitGraph\u003C/code>\u003C/td>\u003Ctd>Git geçmişi ve branch akışları\u003C/td>\u003C/tr>\u003C/tbody>\u003C/table>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"nasıl-seçilir\">Nasıl seçilir?\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#nasıl-seçilir\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Nasıl seçilir?”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Şekle değil, diyagramın anlamsal ihtiyacına göre seçim yapın.\u003C/p>\n\u003Cul>\n\u003Cli>süreç odaklıysa \u003Ccode dir=\"auto\">flowchart\u003C/code>\u003C/li>\n\u003Cli>sistem topolojisi önemliyse \u003Ccode dir=\"auto\">architecture\u003C/code>\u003C/li>\n\u003Cli>hiyerarşi önemliyse \u003Ccode dir=\"auto\">mindmap\u003C/code>\u003C/li>\n\u003Cli>aşama ve aktör önemliyse \u003Ccode dir=\"auto\">journey\u003C/code>\u003C/li>\n\u003C/ul>",{"headings":1547,"localImagePaths":1554,"remoteImagePaths":1555,"frontmatter":1556,"imagePaths":1557},[1548,1551],{"depth":30,"slug":1549,"text":1550},"mevcut-aileler","Mevcut aileler",{"depth":30,"slug":1552,"text":1553},"nasıl-seçilir","Nasıl seçilir?",[],[],{"draft":20,"title":397,"description":1537},[],"tr/figma-design-import",{"id":1558,"data":1560,"body":1565,"filePath":1566,"digest":1567,"rendered":1568},{"title":470,"description":1561,"editUrl":16,"head":1562,"template":18,"sidebar":1563,"pagefind":16,"draft":20},"Figma’dan renk ve metin stillerini alıp bir OpenFlowKit tasarım sistemine uygulayın.",[],{"hidden":20,"attrs":1564},{},"Figma import akışı, tema token’larını elle yeniden kurmak yerine mevcut bir Figma dosyasından stil çekmenizi sağlar.\n\n## Gerekli olanlar\n\n- Figma dosya URL’si\n- kişisel erişim token’ı\n\n## Neler önizlenir?\n\n- renk stilleri\n- metin stilleri\n- ilgili font aileleri\n\n## Ne zaman faydalıdır?\n\n- mevcut marka sistemini diyagramlara taşırken\n- hızla bir tema oluşturmak isterken\n- birden çok diyagram için aynı görsel dili korurken","src/content/docs/tr/figma-design-import.md","19e8e0f4fee1c4a3",{"html":1569,"metadata":1570},"\u003Cp>Figma import akışı, tema token’larını elle yeniden kurmak yerine mevcut bir Figma dosyasından stil çekmenizi sağlar.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"gerekli-olanlar\">Gerekli olanlar\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#gerekli-olanlar\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Gerekli olanlar”\u003C/span>\u003C/a>\u003C/div>\n\u003Cul>\n\u003Cli>Figma dosya URL’si\u003C/li>\n\u003Cli>kişisel erişim token’ı\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"neler-önizlenir\">Neler önizlenir?\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#neler-önizlenir\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Neler önizlenir?”\u003C/span>\u003C/a>\u003C/div>\n\u003Cul>\n\u003Cli>renk stilleri\u003C/li>\n\u003Cli>metin stilleri\u003C/li>\n\u003Cli>ilgili font aileleri\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"ne-zaman-faydalıdır\">Ne zaman faydalıdır?\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#ne-zaman-faydalıdır\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Ne zaman faydalıdır?”\u003C/span>\u003C/a>\u003C/div>\n\u003Cul>\n\u003Cli>mevcut marka sistemini diyagramlara taşırken\u003C/li>\n\u003Cli>hızla bir tema oluşturmak isterken\u003C/li>\n\u003Cli>birden çok diyagram için aynı görsel dili korurken\u003C/li>\n\u003C/ul>",{"headings":1571,"localImagePaths":1581,"remoteImagePaths":1582,"frontmatter":1583,"imagePaths":1584},[1572,1575,1578],{"depth":30,"slug":1573,"text":1574},"gerekli-olanlar","Gerekli olanlar",{"depth":30,"slug":1576,"text":1577},"neler-önizlenir","Neler önizlenir?",{"depth":30,"slug":1579,"text":1580},"ne-zaman-faydalıdır","Ne zaman faydalıdır?",[],[],{"draft":20,"title":470,"description":1561},[],"tr/github-embed",{"id":1585,"data":1587,"body":1592,"filePath":1593,"digest":1594,"rendered":1595},{"title":498,"description":1588,"editUrl":16,"head":1589,"template":18,"sidebar":1590,"pagefind":16,"draft":20},"OpenFlowKit diyagramları için izleyici bağlantıları üretin ve bunları GitHub odaklı dokümantasyon akışlarında kullanın.",[],{"hidden":20,"attrs":1591},{},"OpenFlowKit diyagramlarını GitHub README veya başka Markdown tabanlı belgelerde etkileşimli, salt okunur görünüm bağlantılarıyla paylaşabilirsiniz.\n\n## Ne zaman faydalıdır?\n\n- ekip dokümantasyonu Markdown içinde yaşıyorsa\n- statik PNG yerine daha zengin bir deneyim istiyorsanız\n- okuyucunun diyagramı editörde açabilmesini istiyorsanız\n\n## Temel fikir\n\nOpenFlow DSL içeriği URL güvenli biçimde kodlanır ve `/view` rotasına aktarılır. Böylece harici servis veya GitHub uygulaması gerekmeden izleyici bağlantısı elde edilir.","src/content/docs/tr/github-embed.md","54c6b45add815424",{"html":1596,"metadata":1597},"\u003Cp>OpenFlowKit diyagramlarını GitHub README veya başka Markdown tabanlı belgelerde etkileşimli, salt okunur görünüm bağlantılarıyla paylaşabilirsiniz.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"ne-zaman-faydalıdır\">Ne zaman faydalıdır?\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#ne-zaman-faydalıdır\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Ne zaman faydalıdır?”\u003C/span>\u003C/a>\u003C/div>\n\u003Cul>\n\u003Cli>ekip dokümantasyonu Markdown içinde yaşıyorsa\u003C/li>\n\u003Cli>statik PNG yerine daha zengin bir deneyim istiyorsanız\u003C/li>\n\u003Cli>okuyucunun diyagramı editörde açabilmesini istiyorsanız\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"temel-fikir\">Temel fikir\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#temel-fikir\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Temel fikir”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>OpenFlow DSL içeriği URL güvenli biçimde kodlanır ve \u003Ccode dir=\"auto\">/view\u003C/code> rotasına aktarılır. Böylece harici servis veya GitHub uygulaması gerekmeden izleyici bağlantısı elde edilir.\u003C/p>",{"headings":1598,"localImagePaths":1603,"remoteImagePaths":1604,"frontmatter":1605,"imagePaths":1606},[1599,1600],{"depth":30,"slug":1579,"text":1580},{"depth":30,"slug":1601,"text":1602},"temel-fikir","Temel fikir",[],[],{"draft":20,"title":498,"description":1588},[],"tr/import-from-data",{"id":1607,"data":1609,"body":1614,"filePath":1615,"digest":1616,"rendered":1617},{"title":581,"description":1610,"editUrl":16,"head":1611,"template":18,"sidebar":1612,"pagefind":16,"draft":20},"SQL, OpenAPI, Terraform ve Kubernetes kaynak metnini Studio içinden düzenlenebilir diyagramlara dönüştürün.",[],{"hidden":20,"attrs":1613},{},"Studio içindeki yapılandırılmış içe aktarma akışları, mevcut kaynak metinleri düzenlenebilir diyagramlara dönüştürür.\n\n## Ne zaman kullanılmalı?\n\n- elinizde zaten SQL DDL varsa\n- OpenAPI spesifikasyonundan servis görünümü üretmek istiyorsanız\n- Terraform veya K8s metninden ilk taslağı almak istiyorsanız\n\n## Nasıl çalışır?\n\nKaynak metni yapıştırın, uygun modu seçin ve diyagramı üretin. Girdi türüne göre OpenFlowKit ya uzmanlaşmış AI destekli akış ya da daha deterministik parse akışı kullanır.\n\nTamamen deterministik altyapı parse’ı gerektiğinde [Infrastructure Sync](/tr/infra-sync/) kullanın.","src/content/docs/tr/import-from-data.md","bacfc7e050b4d25c",{"html":1618,"metadata":1619},"\u003Cp>Studio içindeki yapılandırılmış içe aktarma akışları, mevcut kaynak metinleri düzenlenebilir diyagramlara dönüştürür.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"ne-zaman-kullanılmalı\">Ne zaman kullanılmalı?\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#ne-zaman-kullanılmalı\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Ne zaman kullanılmalı?”\u003C/span>\u003C/a>\u003C/div>\n\u003Cul>\n\u003Cli>elinizde zaten SQL DDL varsa\u003C/li>\n\u003Cli>OpenAPI spesifikasyonundan servis görünümü üretmek istiyorsanız\u003C/li>\n\u003Cli>Terraform veya K8s metninden ilk taslağı almak istiyorsanız\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"nasıl-çalışır\">Nasıl çalışır?\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#nasıl-çalışır\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Nasıl çalışır?”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Kaynak metni yapıştırın, uygun modu seçin ve diyagramı üretin. Girdi türüne göre OpenFlowKit ya uzmanlaşmış AI destekli akış ya da daha deterministik parse akışı kullanır.\u003C/p>\n\u003Cp>Tamamen deterministik altyapı parse’ı gerektiğinde \u003Ca href=\"/tr/infra-sync/\">Infrastructure Sync\u003C/a> kullanın.\u003C/p>",{"headings":1620,"localImagePaths":1625,"remoteImagePaths":1626,"frontmatter":1627,"imagePaths":1628},[1621,1622],{"depth":30,"slug":1435,"text":1436},{"depth":30,"slug":1623,"text":1624},"nasıl-çalışır","Nasıl çalışır?",[],[],{"draft":20,"title":581,"description":1610},[],"tr/infra-sync",{"id":1629,"data":1631,"body":1636,"filePath":1637,"digest":1638,"rendered":1639},{"title":547,"description":1632,"editUrl":16,"head":1633,"template":18,"sidebar":1634,"pagefind":16,"draft":20},"Terraform state, Kubernetes manifestleri ve Docker Compose dosyalarını AI sağlayıcısına ihtiyaç duymadan doğrudan diyagrama dönüştürün.",[],{"hidden":20,"attrs":1635},{},"Infrastructure Sync, gerçek altyapı dosyalarını deterministik şekilde OpenFlowKit diyagramlarına dönüştürür.\n\n## Desteklenen formatlar\n\n- Terraform State (`.tfstate` JSON)\n- Kubernetes YAML\n- Docker Compose YAML\n- gerektiğinde AI destekli yol üzerinden Terraform HCL\n\n## Ne zaman kullanılmalı?\n\n- elinizde gerçek altyapı dosyaları varsa\n- deterministik parse gerekiyorsa\n- çevrimdışı dostu içe aktarma istiyorsanız\n- mimari inceleme için düzenlenebilir başlangıç noktası istiyorsanız\n\n## Sonrasında ne olur?\n\nOluşturulan sonuç yine normal bir OpenFlowKit diyagramıdır. Uyguladıktan sonra düzen, açıklama, dışa aktarma ve karşılaştırma akışlarına devam edebilirsiniz.","src/content/docs/tr/infra-sync.md","7672aa877dc2c1a3",{"html":1640,"metadata":1641},"\u003Cp>Infrastructure Sync, gerçek altyapı dosyalarını deterministik şekilde OpenFlowKit diyagramlarına dönüştürür.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"desteklenen-formatlar\">Desteklenen formatlar\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#desteklenen-formatlar\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Desteklenen formatlar”\u003C/span>\u003C/a>\u003C/div>\n\u003Cul>\n\u003Cli>Terraform State (\u003Ccode dir=\"auto\">.tfstate\u003C/code> JSON)\u003C/li>\n\u003Cli>Kubernetes YAML\u003C/li>\n\u003Cli>Docker Compose YAML\u003C/li>\n\u003Cli>gerektiğinde AI destekli yol üzerinden Terraform HCL\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"ne-zaman-kullanılmalı\">Ne zaman kullanılmalı?\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#ne-zaman-kullanılmalı\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Ne zaman kullanılmalı?”\u003C/span>\u003C/a>\u003C/div>\n\u003Cul>\n\u003Cli>elinizde gerçek altyapı dosyaları varsa\u003C/li>\n\u003Cli>deterministik parse gerekiyorsa\u003C/li>\n\u003Cli>çevrimdışı dostu içe aktarma istiyorsanız\u003C/li>\n\u003Cli>mimari inceleme için düzenlenebilir başlangıç noktası istiyorsanız\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"sonrasında-ne-olur\">Sonrasında ne olur?\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#sonrasında-ne-olur\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Sonrasında ne olur?”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Oluşturulan sonuç yine normal bir OpenFlowKit diyagramıdır. Uyguladıktan sonra düzen, açıklama, dışa aktarma ve karşılaştırma akışlarına devam edebilirsiniz.\u003C/p>",{"headings":1642,"localImagePaths":1650,"remoteImagePaths":1651,"frontmatter":1652,"imagePaths":1653},[1643,1646,1647],{"depth":30,"slug":1644,"text":1645},"desteklenen-formatlar","Desteklenen formatlar",{"depth":30,"slug":1435,"text":1436},{"depth":30,"slug":1648,"text":1649},"sonrasında-ne-olur","Sonrasında ne olur?",[],[],{"draft":20,"title":547,"description":1632},[],"tr/introduction",{"id":1654,"data":1656,"body":1661,"filePath":1662,"digest":1663,"rendered":1664},{"title":610,"description":1657,"editUrl":16,"head":1658,"template":18,"sidebar":1659,"pagefind":16,"draft":20},"OpenFlowKit; teknik akışlar, mimari diyagramlar, kod tabanlı temsil ve yapay zeka destekli düzenleme için local-first bir diyagram çalışma alanıdır.",[],{"hidden":20,"attrs":1660},{},"OpenFlowKit, teknik ekipler için tasarlanmış local-first bir diyagram çalışma alanıdır. Görsel tuvali, kod dostu temsilleri, deterministik içe aktarma yollarını, yapay zeka destekli üretimi ve paylaşım/dışa aktarma akışlarını tek bir tarayıcı tabanlı üründe birleştirir.\n\n## OpenFlowKit nerede güçlüdür?\n\nOpenFlowKit özellikle diyagramın zaman içinde evrilmesi gereken durumlarda güçlüdür:\n\n- boş tuval, şablon, yapay zeka istemi, kod temsili veya mevcut kaynak girdiden başlayabilirsiniz\n- sonucu tek seferlik bir çıktı gibi değil, düzenlenebilir bir çalışma yüzeyi gibi geliştirebilirsiniz\n- gerektiğinde metinsel temsili editör modeline yakın tutabilirsiniz\n- aynı diyagramı dokümantasyon, tasarım ve paylaşım iş akışlarına taşıyabilirsiniz\n\n## Ürünün temel yüzeyleri\n\nMevcut ürün dört ana yüzey etrafında şekillenir:\n\n- doğrudan düzenleme için görsel tuval\n- arama, şablon, varlık, düzen ve tasarım sistemleri için komut merkezi\n- yapay zeka, kod, içe aktarma, infra senkronizasyonu ve lint akışları için Studio alanı\n- editör dışına taşımak için dışa aktarma, gömme ve paylaşım akışları\n\n## Uygulamadaki diyagram aileleri\n\nEditör şu diyagram türlerini birinci sınıf olarak destekler:\n\n- `flowchart`\n- `stateDiagram`\n- `classDiagram`\n- `erDiagram`\n- `gitGraph`\n- `mindmap`\n- `journey`\n- `architecture`\n\nBuna ek olarak genel amaçlı akış düğümleri, mimari ikon düğümleri, açıklamalar, bölümler, görseller ve wireframe yüzeyleri de bulunur.\n\n## Temel kavramlar\n\n### Varsayılan olarak local-first\n\nDiyagram durumu varsayılan olarak tarayıcıda kalır. Ne zaman dışa aktaracağınızı, paylaşacağınızı veya bir ortak çalışma odasına gireceğinizi siz belirlersiniz.\n\n### Birden fazla giriş modu\n\nOpenFlowKit tek bir kaynak doğruluğu modeline sizi zorlamaz. Görsel düzenleme, yapay zeka, OpenFlow DSL, Mermaid veya yapılandırılmış içe aktarma arasında ihtiyaç bazlı geçiş yapabilirsiniz.\n\n### Düzenlenebilir çıktılar\n\nÜretilen veya içe aktarılan diyagramlar ölü ekran görüntülerine dönüşmez; aynı düzenlenebilir tuval modeline geri gelir.\n\n## Buradan başlayın\n\n- En hızlı ilk kullanım akışı için [Quick Start](/tr/quick-start/) sayfasını okuyun.\n- Yapay zeka, kod ve içe aktarma yüzeyleri için [Studio Overview](/tr/studio-overview/) sayfasını açın.\n- Nereden başlamanız gerektiğinden emin değilseniz [Choose an Input Mode](/tr/choose-input-mode/) sayfasına gidin.","src/content/docs/tr/introduction.md","ccedc0396b49921f",{"html":1665,"metadata":1666},"\u003Cp>OpenFlowKit, teknik ekipler için tasarlanmış local-first bir diyagram çalışma alanıdır. Görsel tuvali, kod dostu temsilleri, deterministik içe aktarma yollarını, yapay zeka destekli üretimi ve paylaşım/dışa aktarma akışlarını tek bir tarayıcı tabanlı üründe birleştirir.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"openflowkit-nerede-güçlüdür\">OpenFlowKit nerede güçlüdür?\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#openflowkit-nerede-güçlüdür\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “OpenFlowKit nerede güçlüdür?”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>OpenFlowKit özellikle diyagramın zaman içinde evrilmesi gereken durumlarda güçlüdür:\u003C/p>\n\u003Cul>\n\u003Cli>boş tuval, şablon, yapay zeka istemi, kod temsili veya mevcut kaynak girdiden başlayabilirsiniz\u003C/li>\n\u003Cli>sonucu tek seferlik bir çıktı gibi değil, düzenlenebilir bir çalışma yüzeyi gibi geliştirebilirsiniz\u003C/li>\n\u003Cli>gerektiğinde metinsel temsili editör modeline yakın tutabilirsiniz\u003C/li>\n\u003Cli>aynı diyagramı dokümantasyon, tasarım ve paylaşım iş akışlarına taşıyabilirsiniz\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"ürünün-temel-yüzeyleri\">Ürünün temel yüzeyleri\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#ürünün-temel-yüzeyleri\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Ürünün temel yüzeyleri”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Mevcut ürün dört ana yüzey etrafında şekillenir:\u003C/p>\n\u003Cul>\n\u003Cli>doğrudan düzenleme için görsel tuval\u003C/li>\n\u003Cli>arama, şablon, varlık, düzen ve tasarım sistemleri için komut merkezi\u003C/li>\n\u003Cli>yapay zeka, kod, içe aktarma, infra senkronizasyonu ve lint akışları için Studio alanı\u003C/li>\n\u003Cli>editör dışına taşımak için dışa aktarma, gömme ve paylaşım akışları\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"uygulamadaki-diyagram-aileleri\">Uygulamadaki diyagram aileleri\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#uygulamadaki-diyagram-aileleri\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Uygulamadaki diyagram aileleri”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Editör şu diyagram türlerini birinci sınıf olarak destekler:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Ccode dir=\"auto\">flowchart\u003C/code>\u003C/li>\n\u003Cli>\u003Ccode dir=\"auto\">stateDiagram\u003C/code>\u003C/li>\n\u003Cli>\u003Ccode dir=\"auto\">classDiagram\u003C/code>\u003C/li>\n\u003Cli>\u003Ccode dir=\"auto\">erDiagram\u003C/code>\u003C/li>\n\u003Cli>\u003Ccode dir=\"auto\">gitGraph\u003C/code>\u003C/li>\n\u003Cli>\u003Ccode dir=\"auto\">mindmap\u003C/code>\u003C/li>\n\u003Cli>\u003Ccode dir=\"auto\">journey\u003C/code>\u003C/li>\n\u003Cli>\u003Ccode dir=\"auto\">architecture\u003C/code>\u003C/li>\n\u003C/ul>\n\u003Cp>Buna ek olarak genel amaçlı akış düğümleri, mimari ikon düğümleri, açıklamalar, bölümler, görseller ve wireframe yüzeyleri de bulunur.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"temel-kavramlar\">Temel kavramlar\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#temel-kavramlar\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Temel kavramlar”\u003C/span>\u003C/a>\u003C/div>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"varsayılan-olarak-local-first\">Varsayılan olarak local-first\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#varsayılan-olarak-local-first\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Varsayılan olarak local-first”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Diyagram durumu varsayılan olarak tarayıcıda kalır. Ne zaman dışa aktaracağınızı, paylaşacağınızı veya bir ortak çalışma odasına gireceğinizi siz belirlersiniz.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"birden-fazla-giriş-modu\">Birden fazla giriş modu\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#birden-fazla-giriş-modu\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Birden fazla giriş modu”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>OpenFlowKit tek bir kaynak doğruluğu modeline sizi zorlamaz. Görsel düzenleme, yapay zeka, OpenFlow DSL, Mermaid veya yapılandırılmış içe aktarma arasında ihtiyaç bazlı geçiş yapabilirsiniz.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"düzenlenebilir-çıktılar\">Düzenlenebilir çıktılar\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#düzenlenebilir-çıktılar\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Düzenlenebilir çıktılar”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Üretilen veya içe aktarılan diyagramlar ölü ekran görüntülerine dönüşmez; aynı düzenlenebilir tuval modeline geri gelir.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"buradan-başlayın\">Buradan başlayın\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#buradan-başlayın\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Buradan başlayın”\u003C/span>\u003C/a>\u003C/div>\n\u003Cul>\n\u003Cli>En hızlı ilk kullanım akışı için \u003Ca href=\"/tr/quick-start/\">Quick Start\u003C/a> sayfasını okuyun.\u003C/li>\n\u003Cli>Yapay zeka, kod ve içe aktarma yüzeyleri için \u003Ca href=\"/tr/studio-overview/\">Studio Overview\u003C/a> sayfasını açın.\u003C/li>\n\u003Cli>Nereden başlamanız gerektiğinden emin değilseniz \u003Ca href=\"/tr/choose-input-mode/\">Choose an Input Mode\u003C/a> sayfasına gidin.\u003C/li>\n\u003C/ul>",{"headings":1667,"localImagePaths":1692,"remoteImagePaths":1693,"frontmatter":1694,"imagePaths":1695},[1668,1671,1674,1677,1680,1683,1686,1689],{"depth":30,"slug":1669,"text":1670},"openflowkit-nerede-güçlüdür","OpenFlowKit nerede güçlüdür?",{"depth":30,"slug":1672,"text":1673},"ürünün-temel-yüzeyleri","Ürünün temel yüzeyleri",{"depth":30,"slug":1675,"text":1676},"uygulamadaki-diyagram-aileleri","Uygulamadaki diyagram aileleri",{"depth":30,"slug":1678,"text":1679},"temel-kavramlar","Temel kavramlar",{"depth":37,"slug":1681,"text":1682},"varsayılan-olarak-local-first","Varsayılan olarak local-first",{"depth":37,"slug":1684,"text":1685},"birden-fazla-giriş-modu","Birden fazla giriş modu",{"depth":37,"slug":1687,"text":1688},"düzenlenebilir-çıktılar","Düzenlenebilir çıktılar",{"depth":30,"slug":1690,"text":1691},"buradan-başlayın","Buradan başlayın",[],[],{"draft":20,"title":610,"description":1657},[],"tr/keyboard-shortcuts",{"id":1696,"data":1698,"body":1703,"filePath":1704,"digest":1705,"rendered":1706},{"title":653,"description":1699,"editUrl":16,"head":1700,"template":18,"sidebar":1701,"pagefind":16,"draft":20},"OpenFlowKit’te düzenleme, gezinme ve diyagram üretimi için mevcut klavye kısayolları.",[],{"hidden":20,"attrs":1702},{},"Bu tablolar uygulamadaki temel kısayol gruplarını özetler.\n\n## Temel\n\n| Eylem | macOS | Windows/Linux |\n| --- | --- | --- |\n| Undo | `Cmd + Z` | `Ctrl + Z` |\n| Redo | `Cmd + Shift + Z` | `Ctrl + Shift + Z` |\n| Tümünü seç | `Cmd + A` | `Ctrl + A` |\n| Seçimi sil | `Delete` | `Backspace` |\n\n## Düzenleme\n\n| Eylem | macOS | Windows/Linux |\n| --- | --- | --- |\n| Çoklu seçim | `Shift + Click` | `Shift + Click` |\n| Seçim kutusu | `Shift + Drag` | `Shift + Drag` |\n| Çoğalt | `Cmd + D` | `Ctrl + D` |\n| Sürükleyerek çoğalt | `Opt + Drag` | `Alt + Drag` |\n| Kopyala | `Cmd + C` | `Ctrl + C` |\n| Yapıştır | `Cmd + V` | `Ctrl + V` |\n| Grupla | `Cmd + G` | `Ctrl + G` |\n\n## Düğüm işlemleri\n\n| Eylem | macOS | Windows/Linux |\n| --- | --- | --- |\n| Zihin haritasına çocuk ekle | `Tab` | `Tab` |\n| Zihin haritasına kardeş ekle | `Enter` | `Enter` |\n| Seçimi yeniden adlandır | `F2` | `F2` |\n\n## Gezinme\n\n| Eylem | macOS | Windows/Linux |\n| --- | --- | --- |\n| Komut Merkezi | `Cmd + K` | `Ctrl + K` |\n| Görünüşe sığdır | `Shift + 1` | `Shift + 1` |\n\n## Notlar\n\n- Kısayollar odak durumuna ve aktif moda göre değişebilir.\n- Bazı işlemler için doğrudan kısayol yerine [Command Center](/tr/command-center/) kullanmak daha hızlıdır.","src/content/docs/tr/keyboard-shortcuts.md","82ed7e60ccfc2785",{"html":1707,"metadata":1708},"\u003Cp>Bu tablolar uygulamadaki temel kısayol gruplarını özetler.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"temel\">Temel\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#temel\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Temel”\u003C/span>\u003C/a>\u003C/div>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>Eylem\u003C/th>\u003Cth>macOS\u003C/th>\u003Cth>Windows/Linux\u003C/th>\u003C/tr>\u003C/thead>\u003Ctbody>\u003Ctr>\u003Ctd>Undo\u003C/td>\u003Ctd>\u003Ccode dir=\"auto\">Cmd + Z\u003C/code>\u003C/td>\u003Ctd>\u003Ccode dir=\"auto\">Ctrl + Z\u003C/code>\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>Redo\u003C/td>\u003Ctd>\u003Ccode dir=\"auto\">Cmd + Shift + Z\u003C/code>\u003C/td>\u003Ctd>\u003Ccode dir=\"auto\">Ctrl + Shift + Z\u003C/code>\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>Tümünü seç\u003C/td>\u003Ctd>\u003Ccode dir=\"auto\">Cmd + A\u003C/code>\u003C/td>\u003Ctd>\u003Ccode dir=\"auto\">Ctrl + A\u003C/code>\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>Seçimi sil\u003C/td>\u003Ctd>\u003Ccode dir=\"auto\">Delete\u003C/code>\u003C/td>\u003Ctd>\u003Ccode dir=\"auto\">Backspace\u003C/code>\u003C/td>\u003C/tr>\u003C/tbody>\u003C/table>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"düzenleme\">Düzenleme\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#düzenleme\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Düzenleme”\u003C/span>\u003C/a>\u003C/div>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>Eylem\u003C/th>\u003Cth>macOS\u003C/th>\u003Cth>Windows/Linux\u003C/th>\u003C/tr>\u003C/thead>\u003Ctbody>\u003Ctr>\u003Ctd>Çoklu seçim\u003C/td>\u003Ctd>\u003Ccode dir=\"auto\">Shift + Click\u003C/code>\u003C/td>\u003Ctd>\u003Ccode dir=\"auto\">Shift + Click\u003C/code>\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>Seçim kutusu\u003C/td>\u003Ctd>\u003Ccode dir=\"auto\">Shift + Drag\u003C/code>\u003C/td>\u003Ctd>\u003Ccode dir=\"auto\">Shift + Drag\u003C/code>\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>Çoğalt\u003C/td>\u003Ctd>\u003Ccode dir=\"auto\">Cmd + D\u003C/code>\u003C/td>\u003Ctd>\u003Ccode dir=\"auto\">Ctrl + D\u003C/code>\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>Sürükleyerek çoğalt\u003C/td>\u003Ctd>\u003Ccode dir=\"auto\">Opt + Drag\u003C/code>\u003C/td>\u003Ctd>\u003Ccode dir=\"auto\">Alt + Drag\u003C/code>\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>Kopyala\u003C/td>\u003Ctd>\u003Ccode dir=\"auto\">Cmd + C\u003C/code>\u003C/td>\u003Ctd>\u003Ccode dir=\"auto\">Ctrl + C\u003C/code>\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>Yapıştır\u003C/td>\u003Ctd>\u003Ccode dir=\"auto\">Cmd + V\u003C/code>\u003C/td>\u003Ctd>\u003Ccode dir=\"auto\">Ctrl + V\u003C/code>\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>Grupla\u003C/td>\u003Ctd>\u003Ccode dir=\"auto\">Cmd + G\u003C/code>\u003C/td>\u003Ctd>\u003Ccode dir=\"auto\">Ctrl + G\u003C/code>\u003C/td>\u003C/tr>\u003C/tbody>\u003C/table>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"düğüm-işlemleri\">Düğüm işlemleri\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#düğüm-işlemleri\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Düğüm işlemleri”\u003C/span>\u003C/a>\u003C/div>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>Eylem\u003C/th>\u003Cth>macOS\u003C/th>\u003Cth>Windows/Linux\u003C/th>\u003C/tr>\u003C/thead>\u003Ctbody>\u003Ctr>\u003Ctd>Zihin haritasına çocuk ekle\u003C/td>\u003Ctd>\u003Ccode dir=\"auto\">Tab\u003C/code>\u003C/td>\u003Ctd>\u003Ccode dir=\"auto\">Tab\u003C/code>\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>Zihin haritasına kardeş ekle\u003C/td>\u003Ctd>\u003Ccode dir=\"auto\">Enter\u003C/code>\u003C/td>\u003Ctd>\u003Ccode dir=\"auto\">Enter\u003C/code>\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>Seçimi yeniden adlandır\u003C/td>\u003Ctd>\u003Ccode dir=\"auto\">F2\u003C/code>\u003C/td>\u003Ctd>\u003Ccode dir=\"auto\">F2\u003C/code>\u003C/td>\u003C/tr>\u003C/tbody>\u003C/table>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"gezinme\">Gezinme\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#gezinme\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Gezinme”\u003C/span>\u003C/a>\u003C/div>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>Eylem\u003C/th>\u003Cth>macOS\u003C/th>\u003Cth>Windows/Linux\u003C/th>\u003C/tr>\u003C/thead>\u003Ctbody>\u003Ctr>\u003Ctd>Komut Merkezi\u003C/td>\u003Ctd>\u003Ccode dir=\"auto\">Cmd + K\u003C/code>\u003C/td>\u003Ctd>\u003Ccode dir=\"auto\">Ctrl + K\u003C/code>\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>Görünüşe sığdır\u003C/td>\u003Ctd>\u003Ccode dir=\"auto\">Shift + 1\u003C/code>\u003C/td>\u003Ctd>\u003Ccode dir=\"auto\">Shift + 1\u003C/code>\u003C/td>\u003C/tr>\u003C/tbody>\u003C/table>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"notlar\">Notlar\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#notlar\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Notlar”\u003C/span>\u003C/a>\u003C/div>\n\u003Cul>\n\u003Cli>Kısayollar odak durumuna ve aktif moda göre değişebilir.\u003C/li>\n\u003Cli>Bazı işlemler için doğrudan kısayol yerine \u003Ca href=\"/tr/command-center/\">Command Center\u003C/a> kullanmak daha hızlıdır.\u003C/li>\n\u003C/ul>",{"headings":1709,"localImagePaths":1723,"remoteImagePaths":1724,"frontmatter":1725,"imagePaths":1726},[1710,1713,1716,1719,1720],{"depth":30,"slug":1711,"text":1712},"temel","Temel",{"depth":30,"slug":1714,"text":1715},"düzenleme","Düzenleme",{"depth":30,"slug":1717,"text":1718},"düğüm-işlemleri","Düğüm işlemleri",{"depth":30,"slug":1318,"text":1319},{"depth":30,"slug":1721,"text":1722},"notlar","Notlar",[],[],{"draft":20,"title":653,"description":1699},[],"tr/local-first-diagramming",{"id":1727,"data":1729,"body":1734,"filePath":1735,"digest":1736,"rendered":1737},{"title":750,"description":1730,"editUrl":16,"head":1731,"template":18,"sidebar":1732,"pagefind":16,"draft":20},"OpenFlowKit’te local-first yaklaşımının günlük çalışma, gizlilik ve paylaşım akışlarına etkisini öğrenin.",[],{"hidden":20,"attrs":1733},{},"Local-first, çalışmanın zorunlu olarak merkezi bir sunucuda başlamaması demektir. OpenFlowKit bağlamında bu; verinin varsayılan olarak tarayıcıda kalması ve paylaşımın bilinçli bir adım olması anlamına gelir.\n\n## Pratik etkileri\n\n- diyagram verisi varsayılan olarak tarayıcıdadır\n- dışa aktarma ve paylaşım kullanıcı kararıyla olur\n- canlı iş birliği mümkün değilse yerel çalışma devam edebilir\n- AI kullanımı BYOK ile daha kontrollü olabilir","src/content/docs/tr/local-first-diagramming.md","412d72414a1d2ebb",{"html":1738,"metadata":1739},"\u003Cp>Local-first, çalışmanın zorunlu olarak merkezi bir sunucuda başlamaması demektir. OpenFlowKit bağlamında bu; verinin varsayılan olarak tarayıcıda kalması ve paylaşımın bilinçli bir adım olması anlamına gelir.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"pratik-etkileri\">Pratik etkileri\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#pratik-etkileri\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Pratik etkileri”\u003C/span>\u003C/a>\u003C/div>\n\u003Cul>\n\u003Cli>diyagram verisi varsayılan olarak tarayıcıdadır\u003C/li>\n\u003Cli>dışa aktarma ve paylaşım kullanıcı kararıyla olur\u003C/li>\n\u003Cli>canlı iş birliği mümkün değilse yerel çalışma devam edebilir\u003C/li>\n\u003Cli>AI kullanımı BYOK ile daha kontrollü olabilir\u003C/li>\n\u003C/ul>",{"headings":1740,"localImagePaths":1744,"remoteImagePaths":1745,"frontmatter":1746,"imagePaths":1747},[1741],{"depth":30,"slug":1742,"text":1743},"pratik-etkileri","Pratik etkileri",[],[],{"draft":20,"title":750,"description":1730},[],"tr/mermaid-integration",{"id":1748,"data":1750,"body":1755,"filePath":1756,"digest":1757,"rendered":1758},{"title":717,"description":1751,"editUrl":16,"head":1752,"template":18,"sidebar":1753,"pagefind":16,"draft":20},"OpenFlowKit’i görsel düzenleme yüzeyi olarak kullanırken Mermaid içe aktarın, düzenleyin, doğrulayın ve dışa aktarın.",[],{"hidden":20,"attrs":1754},{},"OpenFlowKit, Mermaid için içe aktarma, düzenleme ve dışa aktarma yolları sunar. Ancak Mermaid’i editörün tek doğruluk kaynağı değil, bir uyumluluk katmanı olarak düşünmek gerekir.\n\n## Mermaid ne zaman doğru seçimdir?\n\nMermaid’i şu durumlarda kullanın:\n\n- diyagramlarınız zaten dokümanlarda veya repo içinde Mermaid olarak yaşıyorsa\n- Markdown dostu metinsel format gerekiyorsa\n- başka bir araç Mermaid bekliyorsa\n\n## Studio içinde Mermaid\n\nStudio’nun Code alanında Mermaid modu vardır. Burada:\n\n- mevcut tuvalden üretilen Mermaid’i görebilir\n- doğrudan Mermaid düzenleyebilir\n- parse edilen grafiği tekrar editöre uygulayabilir\n- parse hatalarında tanılama görebilirsiniz\n\n## Sadakat beklentisi\n\nMermaid round-trip faydalıdır, ancak OpenFlowKit’in tüm kavramları birebir eşlenmez. Özellikle şu konularda dikkatli olun:\n\n- elle ince ayarlanmış yerleşimler\n- sağlayıcı ikonlarıyla çalışan mimari sunumlar\n- editörde daha zengin olan aileye özgü semantik alanlar\n\nTam geri kazanım gerekiyorsa Mermaid ile birlikte JSON da saklayın.\n\n## Önerilen desen\n\nMermaid’i çoğu zaman yayınlama veya uyumluluk katmanı olarak kullanın. Asıl düzenleme kaynağı olarak JSON veya OpenFlow DSL tutmak genellikle daha güvenlidir.","src/content/docs/tr/mermaid-integration.md","efdf00a0152196e3",{"html":1759,"metadata":1760},"\u003Cp>OpenFlowKit, Mermaid için içe aktarma, düzenleme ve dışa aktarma yolları sunar. Ancak Mermaid’i editörün tek doğruluk kaynağı değil, bir uyumluluk katmanı olarak düşünmek gerekir.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"mermaid-ne-zaman-doğru-seçimdir\">Mermaid ne zaman doğru seçimdir?\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#mermaid-ne-zaman-doğru-seçimdir\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Mermaid ne zaman doğru seçimdir?”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Mermaid’i şu durumlarda kullanın:\u003C/p>\n\u003Cul>\n\u003Cli>diyagramlarınız zaten dokümanlarda veya repo içinde Mermaid olarak yaşıyorsa\u003C/li>\n\u003Cli>Markdown dostu metinsel format gerekiyorsa\u003C/li>\n\u003Cli>başka bir araç Mermaid bekliyorsa\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"studio-içinde-mermaid\">Studio içinde Mermaid\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#studio-içinde-mermaid\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Studio içinde Mermaid”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Studio’nun Code alanında Mermaid modu vardır. Burada:\u003C/p>\n\u003Cul>\n\u003Cli>mevcut tuvalden üretilen Mermaid’i görebilir\u003C/li>\n\u003Cli>doğrudan Mermaid düzenleyebilir\u003C/li>\n\u003Cli>parse edilen grafiği tekrar editöre uygulayabilir\u003C/li>\n\u003Cli>parse hatalarında tanılama görebilirsiniz\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"sadakat-beklentisi\">Sadakat beklentisi\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#sadakat-beklentisi\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Sadakat beklentisi”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Mermaid round-trip faydalıdır, ancak OpenFlowKit’in tüm kavramları birebir eşlenmez. Özellikle şu konularda dikkatli olun:\u003C/p>\n\u003Cul>\n\u003Cli>elle ince ayarlanmış yerleşimler\u003C/li>\n\u003Cli>sağlayıcı ikonlarıyla çalışan mimari sunumlar\u003C/li>\n\u003Cli>editörde daha zengin olan aileye özgü semantik alanlar\u003C/li>\n\u003C/ul>\n\u003Cp>Tam geri kazanım gerekiyorsa Mermaid ile birlikte JSON da saklayın.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"önerilen-desen\">Önerilen desen\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#önerilen-desen\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Önerilen desen”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Mermaid’i çoğu zaman yayınlama veya uyumluluk katmanı olarak kullanın. Asıl düzenleme kaynağı olarak JSON veya OpenFlow DSL tutmak genellikle daha güvenlidir.\u003C/p>",{"headings":1761,"localImagePaths":1774,"remoteImagePaths":1775,"frontmatter":1776,"imagePaths":1777},[1762,1765,1768,1771],{"depth":30,"slug":1763,"text":1764},"mermaid-ne-zaman-doğru-seçimdir","Mermaid ne zaman doğru seçimdir?",{"depth":30,"slug":1766,"text":1767},"studio-içinde-mermaid","Studio içinde Mermaid",{"depth":30,"slug":1769,"text":1770},"sadakat-beklentisi","Sadakat beklentisi",{"depth":30,"slug":1772,"text":1773},"önerilen-desen","Önerilen desen",[],[],{"draft":20,"title":717,"description":1751},[],"tr/node-types",{"id":1778,"data":1780,"body":1785,"filePath":1786,"digest":1787,"rendered":1788},{"title":779,"description":1781,"editUrl":16,"head":1782,"template":18,"sidebar":1783,"pagefind":16,"draft":20},"OpenFlowKit’teki temel düğüm ailelerini ve bunların hangi diyagram iş akışlarına uyduğunu anlayın.",[],{"hidden":20,"attrs":1784},{},"OpenFlowKit hem genel amaçlı hem de aileye özgü düğümleri destekler. Uygulamadaki düğüm modeli akış, mimari, zihin haritası, journey, sınıf, ER, açıklama, gruplama ve medya senaryolarını kapsar.\n\n## Temel düğüm aileleri\n\n### Flow düğümleri\n\nEn sık kullanılan temel yapı taşları:\n\n- `start`\n- `process`\n- `decision`\n- `end`\n- `custom`\n\n### Mind map düğümleri\n\nEk yapısal bilgiler taşırlar:\n\n- derinlik\n- ebeveyn\n- sol/sağ taraf\n- dal stili\n\n### Architecture ve varlık tabanlı düğümler\n\nMimari diyagramlar sağlayıcı ikonları, sınırlar ve bölümler ile daha güçlü okunabilirlik kazanır.\n\n### Journey ve deneyim odaklı düğümler\n\nAşama, aktör ve skor gibi bilgilerin önemli olduğu süreçler için daha uygundur.\n\n### Medya ve wireframe düğümleri\n\nOpenFlowKit ayrıca görsel düğümleri ile browser/mobile wireframe yüzeylerini destekler.\n\n## Nasıl seçilmeli?\n\nSadece şekle göre değil, diyagramın semantiğine göre seçim yapın:\n\n- genel süreçler için flow düğümleri\n- sistem topolojisi için architecture düğümleri\n- dallanan fikir yapıları için mind map düğümleri\n- deneyim haritaları için journey düğümleri","src/content/docs/tr/node-types.md","416c592876cd9815",{"html":1789,"metadata":1790},"\u003Cp>OpenFlowKit hem genel amaçlı hem de aileye özgü düğümleri destekler. Uygulamadaki düğüm modeli akış, mimari, zihin haritası, journey, sınıf, ER, açıklama, gruplama ve medya senaryolarını kapsar.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"temel-düğüm-aileleri\">Temel düğüm aileleri\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#temel-düğüm-aileleri\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Temel düğüm aileleri”\u003C/span>\u003C/a>\u003C/div>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"flow-düğümleri\">Flow düğümleri\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#flow-düğümleri\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Flow düğümleri”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>En sık kullanılan temel yapı taşları:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Ccode dir=\"auto\">start\u003C/code>\u003C/li>\n\u003Cli>\u003Ccode dir=\"auto\">process\u003C/code>\u003C/li>\n\u003Cli>\u003Ccode dir=\"auto\">decision\u003C/code>\u003C/li>\n\u003Cli>\u003Ccode dir=\"auto\">end\u003C/code>\u003C/li>\n\u003Cli>\u003Ccode dir=\"auto\">custom\u003C/code>\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"mind-map-düğümleri\">Mind map düğümleri\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#mind-map-düğümleri\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Mind map düğümleri”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Ek yapısal bilgiler taşırlar:\u003C/p>\n\u003Cul>\n\u003Cli>derinlik\u003C/li>\n\u003Cli>ebeveyn\u003C/li>\n\u003Cli>sol/sağ taraf\u003C/li>\n\u003Cli>dal stili\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"architecture-ve-varlık-tabanlı-düğümler\">Architecture ve varlık tabanlı düğümler\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#architecture-ve-varlık-tabanlı-düğümler\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Architecture ve varlık tabanlı düğümler”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Mimari diyagramlar sağlayıcı ikonları, sınırlar ve bölümler ile daha güçlü okunabilirlik kazanır.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"journey-ve-deneyim-odaklı-düğümler\">Journey ve deneyim odaklı düğümler\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#journey-ve-deneyim-odaklı-düğümler\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Journey ve deneyim odaklı düğümler”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Aşama, aktör ve skor gibi bilgilerin önemli olduğu süreçler için daha uygundur.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"medya-ve-wireframe-düğümleri\">Medya ve wireframe düğümleri\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#medya-ve-wireframe-düğümleri\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Medya ve wireframe düğümleri”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>OpenFlowKit ayrıca görsel düğümleri ile browser/mobile wireframe yüzeylerini destekler.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"nasıl-seçilmeli\">Nasıl seçilmeli?\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#nasıl-seçilmeli\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Nasıl seçilmeli?”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Sadece şekle göre değil, diyagramın semantiğine göre seçim yapın:\u003C/p>\n\u003Cul>\n\u003Cli>genel süreçler için flow düğümleri\u003C/li>\n\u003Cli>sistem topolojisi için architecture düğümleri\u003C/li>\n\u003Cli>dallanan fikir yapıları için mind map düğümleri\u003C/li>\n\u003Cli>deneyim haritaları için journey düğümleri\u003C/li>\n\u003C/ul>",{"headings":1791,"localImagePaths":1813,"remoteImagePaths":1814,"frontmatter":1815,"imagePaths":1816},[1792,1795,1798,1801,1804,1807,1810],{"depth":30,"slug":1793,"text":1794},"temel-düğüm-aileleri","Temel düğüm aileleri",{"depth":37,"slug":1796,"text":1797},"flow-düğümleri","Flow düğümleri",{"depth":37,"slug":1799,"text":1800},"mind-map-düğümleri","Mind map düğümleri",{"depth":37,"slug":1802,"text":1803},"architecture-ve-varlık-tabanlı-düğümler","Architecture ve varlık tabanlı düğümler",{"depth":37,"slug":1805,"text":1806},"journey-ve-deneyim-odaklı-düğümler","Journey ve deneyim odaklı düğümler",{"depth":37,"slug":1808,"text":1809},"medya-ve-wireframe-düğümleri","Medya ve wireframe düğümleri",{"depth":30,"slug":1811,"text":1812},"nasıl-seçilmeli","Nasıl seçilmeli?",[],[],{"draft":20,"title":779,"description":1781},[],"tr/mermaid-vs-openflow",{"id":1817,"data":1819,"body":1824,"filePath":1825,"digest":1826,"rendered":1827},{"title":685,"description":1820,"editUrl":16,"head":1821,"template":18,"sidebar":1822,"pagefind":16,"draft":20},"Mermaid ile OpenFlow DSL arasında hangi metin temsilinin iş akışınız için daha uygun olduğunu belirleyin.",[],{"hidden":20,"attrs":1823},{},"Mermaid ve OpenFlow DSL benzer görünen ama farklı amaçlara hizmet eden iki metin temsilidir.\n\n## Mermaid ne zaman seçilmeli?\n\n- Markdown ve README iş akışları için\n- dış araçlar Mermaid bekliyorsa\n- taşınabilirlik sadakatten daha önemliyse\n\n## OpenFlow DSL ne zaman seçilmeli?\n\n- OpenFlowKit ana düzenleme ortamıysa\n- editör içi sadakat önemliyse\n- Mermaid kısıtları gereksizse\n\n## Kısa sonuç\n\n- Mermaid taşınabilirlik için daha iyidir\n- OpenFlow DSL editör-doğal sadakat için daha iyidir","src/content/docs/tr/mermaid-vs-openflow.md","6bf98b52a951fc35",{"html":1828,"metadata":1829},"\u003Cp>Mermaid ve OpenFlow DSL benzer görünen ama farklı amaçlara hizmet eden iki metin temsilidir.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"mermaid-ne-zaman-seçilmeli\">Mermaid ne zaman seçilmeli?\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#mermaid-ne-zaman-seçilmeli\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Mermaid ne zaman seçilmeli?”\u003C/span>\u003C/a>\u003C/div>\n\u003Cul>\n\u003Cli>Markdown ve README iş akışları için\u003C/li>\n\u003Cli>dış araçlar Mermaid bekliyorsa\u003C/li>\n\u003Cli>taşınabilirlik sadakatten daha önemliyse\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"openflow-dsl-ne-zaman-seçilmeli\">OpenFlow DSL ne zaman seçilmeli?\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#openflow-dsl-ne-zaman-seçilmeli\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “OpenFlow DSL ne zaman seçilmeli?”\u003C/span>\u003C/a>\u003C/div>\n\u003Cul>\n\u003Cli>OpenFlowKit ana düzenleme ortamıysa\u003C/li>\n\u003Cli>editör içi sadakat önemliyse\u003C/li>\n\u003Cli>Mermaid kısıtları gereksizse\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"kısa-sonuç\">Kısa sonuç\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#kısa-sonuç\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Kısa sonuç”\u003C/span>\u003C/a>\u003C/div>\n\u003Cul>\n\u003Cli>Mermaid taşınabilirlik için daha iyidir\u003C/li>\n\u003Cli>OpenFlow DSL editör-doğal sadakat için daha iyidir\u003C/li>\n\u003C/ul>",{"headings":1830,"localImagePaths":1840,"remoteImagePaths":1841,"frontmatter":1842,"imagePaths":1843},[1831,1834,1837],{"depth":30,"slug":1832,"text":1833},"mermaid-ne-zaman-seçilmeli","Mermaid ne zaman seçilmeli?",{"depth":30,"slug":1835,"text":1836},"openflow-dsl-ne-zaman-seçilmeli","OpenFlow DSL ne zaman seçilmeli?",{"depth":30,"slug":1838,"text":1839},"kısa-sonuç","Kısa sonuç",[],[],{"draft":20,"title":685,"description":1820},[],"tr/openflow-dsl",{"id":1844,"data":1846,"body":1851,"filePath":1852,"digest":1853,"rendered":1854},{"title":863,"description":1847,"editUrl":16,"head":1848,"template":18,"sidebar":1849,"pagefind":16,"draft":20},"OpenFlowKit diyagramları için editör-doğal metin temsili olan OpenFlow DSL’i kullanın.",[],{"hidden":20,"attrs":1850},{},"OpenFlow DSL, OpenFlowKit Studio’da kullanılan yerel metinsel temsildir. Kod tabanlı bir çalışma istiyor ama editör modeline yakın kalmak istiyorsanız en iyi seçenektir.\n\n## Nerede doğru seçimdir?\n\nOpenFlow DSL’i şu durumlarda tercih edin:\n\n- okunabilir ve editör-doğal bir sözdizimi istediğinizde\n- düzen öncesi deterministik yapısal değişiklikler yapmak istediğinizde\n- Mermaid’e göre OpenFlowKit’e daha yakın bir temsil gerektiğinde\n- yapay zekanın ham JSON yerine daha iyi hedefleyebileceği bir format istediğinizde\n\nStudio içindeki Code alanı, mevcut tuvalden DSL üretebilir ve DSL’i tekrar grafiğe uygulayabilir.\n\nEkosistem uyumluluğu daha önemliyse Mermaid kullanın. Bkz. [Mermaid vs OpenFlow](/tr/mermaid-vs-openflow/).\n\n## Temel belge yapısı\n\n```yaml\nflow: \"Kullanıcı Kaydı\"\ndirection: TB\n```\n\nYaygın yön değerleri:\n\n- `TB`\n- `LR`\n- `RL`\n- `BT`\n\n## Düğümler\n\nKararlı kimliklere sahip açık düğüm tanımları kullanın:\n\n```text\nnode signup [label: \"Kayıt Formu\"]\nnode verify [label: \"E-postayı Doğrula\"]\nnode success [label: \"Çalışma Alanı Hazır\", shape: capsule]\n```\n\nİyi kimlikler:\n\n- kısa\n- küçük harfli\n- anlamlı\n- düzenlemeler arasında mümkün olduğunca kararlı\n\n## Kenarlar\n\n```text\nsignup -> verify\nverify -> success\n```\n\nGerekirse etiket ve ek meta veri de ekleyebilirsiniz.\n\n## Neden ekipler bunu kullanır?\n\n- OpenFlowKit ana düzenleme ortamıysa\n- graf kod olarak incelenecekse\n- editör içi sadakat uyumluluktan daha önemliyse\n- yapay zekaya editör-doğal bir hedef sağlamak istiyorsanız","src/content/docs/tr/openflow-dsl.md","54a9332fb64e6f8f",{"html":1855,"metadata":1856},"\u003Cp>OpenFlow DSL, OpenFlowKit Studio’da kullanılan yerel metinsel temsildir. Kod tabanlı bir çalışma istiyor ama editör modeline yakın kalmak istiyorsanız en iyi seçenektir.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"nerede-doğru-seçimdir\">Nerede doğru seçimdir?\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#nerede-doğru-seçimdir\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Nerede doğru seçimdir?”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>OpenFlow DSL’i şu durumlarda tercih edin:\u003C/p>\n\u003Cul>\n\u003Cli>okunabilir ve editör-doğal bir sözdizimi istediğinizde\u003C/li>\n\u003Cli>düzen öncesi deterministik yapısal değişiklikler yapmak istediğinizde\u003C/li>\n\u003Cli>Mermaid’e göre OpenFlowKit’e daha yakın bir temsil gerektiğinde\u003C/li>\n\u003Cli>yapay zekanın ham JSON yerine daha iyi hedefleyebileceği bir format istediğinizde\u003C/li>\n\u003C/ul>\n\u003Cp>Studio içindeki Code alanı, mevcut tuvalden DSL üretebilir ve DSL’i tekrar grafiğe uygulayabilir.\u003C/p>\n\u003Cp>Ekosistem uyumluluğu daha önemliyse Mermaid kullanın. Bkz. \u003Ca href=\"/tr/mermaid-vs-openflow/\">Mermaid vs OpenFlow\u003C/a>.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"temel-belge-yapısı\">Temel belge yapısı\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#temel-belge-yapısı\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Temel belge yapısı”\u003C/span>\u003C/a>\u003C/div>\n\u003Cdiv class=\"expressive-code\">\u003Clink rel=\"stylesheet\" href=\"/_astro/ec.v4551.css\">\u003Cscript type=\"module\" src=\"/_astro/ec.0vx5m.js\">\u003C/script>\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"yaml\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#7FDBCA;--1:#111111\">flow\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Kullanıcı Kaydı\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#7FDBCA;--1:#111111\">direction\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">: \u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">TB\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"flow: &#x22;Kullanıcı Kaydı&#x22;direction: TB\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cp>Yaygın yön değerleri:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Ccode dir=\"auto\">TB\u003C/code>\u003C/li>\n\u003Cli>\u003Ccode dir=\"auto\">LR\u003C/code>\u003C/li>\n\u003Cli>\u003Ccode dir=\"auto\">RL\u003C/code>\u003C/li>\n\u003Cli>\u003Ccode dir=\"auto\">BT\u003C/code>\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"düğümler\">Düğümler\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#düğümler\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Düğümler”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Kararlı kimliklere sahip açık düğüm tanımları kullanın:\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"text\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">node signup [label: \"Kayıt Formu\"]\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">node verify [label: \"E-postayı Doğrula\"]\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">node success [label: \"Çalışma Alanı Hazır\", shape: capsule]\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"node signup [label: &#x22;Kayıt Formu&#x22;]node verify [label: &#x22;E-postayı Doğrula&#x22;]node success [label: &#x22;Çalışma Alanı Hazır&#x22;, shape: capsule]\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cp>İyi kimlikler:\u003C/p>\n\u003Cul>\n\u003Cli>kısa\u003C/li>\n\u003Cli>küçük harfli\u003C/li>\n\u003Cli>anlamlı\u003C/li>\n\u003Cli>düzenlemeler arasında mümkün olduğunca kararlı\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"kenarlar\">Kenarlar\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#kenarlar\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Kenarlar”\u003C/span>\u003C/a>\u003C/div>\n\u003Cdiv class=\"expressive-code\">\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"text\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">signup -> verify\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">verify -> success\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"signup -> verifyverify -> success\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cp>Gerekirse etiket ve ek meta veri de ekleyebilirsiniz.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"neden-ekipler-bunu-kullanır\">Neden ekipler bunu kullanır?\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#neden-ekipler-bunu-kullanır\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Neden ekipler bunu kullanır?”\u003C/span>\u003C/a>\u003C/div>\n\u003Cul>\n\u003Cli>OpenFlowKit ana düzenleme ortamıysa\u003C/li>\n\u003Cli>graf kod olarak incelenecekse\u003C/li>\n\u003Cli>editör içi sadakat uyumluluktan daha önemliyse\u003C/li>\n\u003Cli>yapay zekaya editör-doğal bir hedef sağlamak istiyorsanız\u003C/li>\n\u003C/ul>",{"headings":1857,"localImagePaths":1873,"remoteImagePaths":1874,"frontmatter":1875,"imagePaths":1876},[1858,1861,1864,1867,1870],{"depth":30,"slug":1859,"text":1860},"nerede-doğru-seçimdir","Nerede doğru seçimdir?",{"depth":30,"slug":1862,"text":1863},"temel-belge-yapısı","Temel belge yapısı",{"depth":30,"slug":1865,"text":1866},"düğümler","Düğümler",{"depth":30,"slug":1868,"text":1869},"kenarlar","Kenarlar",{"depth":30,"slug":1871,"text":1872},"neden-ekipler-bunu-kullanır","Neden ekipler bunu kullanır?",[],[],{"draft":20,"title":863,"description":1847},[],"tr/payment-flow",{"id":1877,"data":1879,"body":1884,"filePath":1885,"digest":1886,"rendered":1887},{"title":818,"description":1880,"editUrl":16,"head":1881,"template":18,"sidebar":1882,"pagefind":16,"draft":20},"Abonelik, checkout, retry ve istisna yolları içeren ödeme sistemlerini OpenFlowKit ile modelleyin.",[],{"hidden":20,"attrs":1883},{},"Ödeme sistemleri, mutlu yolun ötesinde retry, hata işleme, manuel inceleme ve bildirim dalları içerdiği için OpenFlowKit için çok uygun bir kullanım alanıdır.\n\n## İyi bir ödeme diyagramı neleri içermelidir?\n\n- giriş olayı\n- tahsilat veya yetkilendirme denemesi\n- başarı ve başarısızlık dalları\n- retry mantığı\n- manuel inceleme\n- kullanıcı bildirimi\n- son hesap durumu\n\n## Güçlü başlangıç seçenekleri\n\n- boş flowchart tuvali\n- SaaS veya ödeme odaklı şablon\n- FlowPilot istemi\n- OpenFlow DSL ile metin tabanlı taslak\n\n## Önerilen akış\n\n1. önce mutlu yolu üretin veya çizin\n2. tüm hata ve retry dallarını ekleyin\n3. kenar etiketlerini açık hale getirin\n4. düzen ile yerleşimi temizleyin\n5. paydaşlar için görsel, düzenleme için JSON saklayın","src/content/docs/tr/payment-flow.md","8bde51fc9970a2c0",{"html":1888,"metadata":1889},"\u003Cp>Ödeme sistemleri, mutlu yolun ötesinde retry, hata işleme, manuel inceleme ve bildirim dalları içerdiği için OpenFlowKit için çok uygun bir kullanım alanıdır.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"i̇yi-bir-ödeme-diyagramı-neleri-içermelidir\">İyi bir ödeme diyagramı neleri içermelidir?\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#i̇yi-bir-ödeme-diyagramı-neleri-içermelidir\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “İyi bir ödeme diyagramı neleri içermelidir?”\u003C/span>\u003C/a>\u003C/div>\n\u003Cul>\n\u003Cli>giriş olayı\u003C/li>\n\u003Cli>tahsilat veya yetkilendirme denemesi\u003C/li>\n\u003Cli>başarı ve başarısızlık dalları\u003C/li>\n\u003Cli>retry mantığı\u003C/li>\n\u003Cli>manuel inceleme\u003C/li>\n\u003Cli>kullanıcı bildirimi\u003C/li>\n\u003Cli>son hesap durumu\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"güçlü-başlangıç-seçenekleri\">Güçlü başlangıç seçenekleri\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#güçlü-başlangıç-seçenekleri\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Güçlü başlangıç seçenekleri”\u003C/span>\u003C/a>\u003C/div>\n\u003Cul>\n\u003Cli>boş flowchart tuvali\u003C/li>\n\u003Cli>SaaS veya ödeme odaklı şablon\u003C/li>\n\u003Cli>FlowPilot istemi\u003C/li>\n\u003Cli>OpenFlow DSL ile metin tabanlı taslak\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"önerilen-akış\">Önerilen akış\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#önerilen-akış\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Önerilen akış”\u003C/span>\u003C/a>\u003C/div>\n\u003Col>\n\u003Cli>önce mutlu yolu üretin veya çizin\u003C/li>\n\u003Cli>tüm hata ve retry dallarını ekleyin\u003C/li>\n\u003Cli>kenar etiketlerini açık hale getirin\u003C/li>\n\u003Cli>düzen ile yerleşimi temizleyin\u003C/li>\n\u003Cli>paydaşlar için görsel, düzenleme için JSON saklayın\u003C/li>\n\u003C/ol>",{"headings":1890,"localImagePaths":1898,"remoteImagePaths":1899,"frontmatter":1900,"imagePaths":1901},[1891,1894,1897],{"depth":30,"slug":1892,"text":1893},"i̇yi-bir-ödeme-diyagramı-neleri-içermelidir","İyi bir ödeme diyagramı neleri içermelidir?",{"depth":30,"slug":1895,"text":1896},"güçlü-başlangıç-seçenekleri","Güçlü başlangıç seçenekleri",{"depth":30,"slug":1293,"text":1294},[],[],{"draft":20,"title":818,"description":1880},[],"tr/playback-history",{"id":1902,"data":1904,"body":1909,"filePath":1910,"digest":1911,"rendered":1912},{"title":897,"description":1905,"editUrl":16,"head":1906,"template":18,"sidebar":1907,"pagefind":16,"draft":20},"Çalışmanızı geri kazanmak ve diyagram evrimini izlemek için undo, snapshot ve oynatma durumunu kullanın.",[],{"hidden":20,"attrs":1908},{},"OpenFlowKit’te iki farklı ama ilişkili kurtarma sistemi vardır:\n\n- standart undo/redo geçmişi\n- belge veya sekme üzerinde saklanan snapshot tabanlı geçmiş ve playback durumu\n\n## Undo ve redo\n\nKullanın:\n\n- `Cmd/Ctrl + Z` undo\n- `Cmd/Ctrl + Shift + Z` redo\n\nBu, aktif düzenleme sırasında en hızlı geri dönüş yoludur.\n\n## Snapshot’lar\n\nŞu durumlarda snapshot kullanın:\n\n- büyük bir yapay zeka yeniden yazımı öncesinde\n- diyagram ailesi yönünü değiştirirken\n- Studio’dan geniş kapsamlı metin uygulamadan önce\n- büyük bir mimari haritayı yeniden yapılandırırken\n\nSnapshot’lar, özellikle büyük değişikliklerde gerçek güvenlik ağıdır.\n\n## Playback modeli\n\nVeri modeli playback sahneleri, adımlar ve zamanlı dizileri destekler. Bu nedenle video veya GIF gibi animasyonlu dışa aktarma akışlarıyla birlikte anlamlıdır.\n\n## Pratik öneri\n\n- küçük düzeltmeler için undo/redo kullanın\n- önemli kilometre taşları için snapshot alın\n\nBir sonraki işlem grafiği ciddi biçimde değiştirecekse önce snapshot oluşturun.","src/content/docs/tr/playback-history.md","7475bd12c2d56e43",{"html":1913,"metadata":1914},"\u003Cp>OpenFlowKit’te iki farklı ama ilişkili kurtarma sistemi vardır:\u003C/p>\n\u003Cul>\n\u003Cli>standart undo/redo geçmişi\u003C/li>\n\u003Cli>belge veya sekme üzerinde saklanan snapshot tabanlı geçmiş ve playback durumu\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"undo-ve-redo\">Undo ve redo\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#undo-ve-redo\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Undo ve redo”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Kullanın:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Ccode dir=\"auto\">Cmd/Ctrl + Z\u003C/code> undo\u003C/li>\n\u003Cli>\u003Ccode dir=\"auto\">Cmd/Ctrl + Shift + Z\u003C/code> redo\u003C/li>\n\u003C/ul>\n\u003Cp>Bu, aktif düzenleme sırasında en hızlı geri dönüş yoludur.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"snapshotlar\">Snapshot’lar\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#snapshotlar\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Snapshot’lar”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Şu durumlarda snapshot kullanın:\u003C/p>\n\u003Cul>\n\u003Cli>büyük bir yapay zeka yeniden yazımı öncesinde\u003C/li>\n\u003Cli>diyagram ailesi yönünü değiştirirken\u003C/li>\n\u003Cli>Studio’dan geniş kapsamlı metin uygulamadan önce\u003C/li>\n\u003Cli>büyük bir mimari haritayı yeniden yapılandırırken\u003C/li>\n\u003C/ul>\n\u003Cp>Snapshot’lar, özellikle büyük değişikliklerde gerçek güvenlik ağıdır.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"playback-modeli\">Playback modeli\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#playback-modeli\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Playback modeli”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Veri modeli playback sahneleri, adımlar ve zamanlı dizileri destekler. Bu nedenle video veya GIF gibi animasyonlu dışa aktarma akışlarıyla birlikte anlamlıdır.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"pratik-öneri\">Pratik öneri\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#pratik-öneri\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Pratik öneri”\u003C/span>\u003C/a>\u003C/div>\n\u003Cul>\n\u003Cli>küçük düzeltmeler için undo/redo kullanın\u003C/li>\n\u003Cli>önemli kilometre taşları için snapshot alın\u003C/li>\n\u003C/ul>\n\u003Cp>Bir sonraki işlem grafiği ciddi biçimde değiştirecekse önce snapshot oluşturun.\u003C/p>",{"headings":1915,"localImagePaths":1928,"remoteImagePaths":1929,"frontmatter":1930,"imagePaths":1931},[1916,1919,1922,1925],{"depth":30,"slug":1917,"text":1918},"undo-ve-redo","Undo ve redo",{"depth":30,"slug":1920,"text":1921},"snapshotlar","Snapshot’lar",{"depth":30,"slug":1923,"text":1924},"playback-modeli","Playback modeli",{"depth":30,"slug":1926,"text":1927},"pratik-öneri","Pratik öneri",[],[],{"draft":20,"title":897,"description":1905},[],"tr/prompting-agents",{"id":1932,"data":1934,"body":1939,"filePath":1940,"digest":1941,"rendered":1942},{"title":961,"description":1935,"editUrl":16,"head":1936,"template":18,"sidebar":1937,"pagefind":16,"draft":20},"OpenFlowKit için diyagram çıktısı isterken kodlama yardımcılarına ve AI sistemlerine daha iyi istemler yazın.",[],{"hidden":20,"attrs":1938},{},"Cursor, Copilot, ChatGPT, Claude veya başka bir ajan kullanıyor olmanızdan bağımsız olarak; iyi istem kalitesi, model markasından daha belirleyicidir.\n\n## Ne istemelisiniz?\n\nÇıktı türünü açıkça belirtin:\n\n- OpenFlow DSL\n- Mermaid\n- diyagram planı\n\n“Bir diyagram yap” demek yerine hangi formatı istediğinizi söyleyin.\n\n## Güçlü istem yapısı\n\nŞunları ekleyin:\n\n- diyagramın amacı\n- hedef kitle\n- gerekli sistemler veya aktörler\n- önemli dallar ya da hata yolları\n- tercih edilen yön (`TB`, `LR` gibi)\n- tercih edilen sözdizimi\n\n## İlgili sayfalar\n\n- [AI Generation](/tr/ai-generation/)\n- [Ask Flowpilot](/tr/ask-flowpilot/)\n- [OpenFlow DSL](/tr/openflow-dsl/)\n- [Mermaid Integration](/tr/mermaid-integration/)","src/content/docs/tr/prompting-agents.md","e597b9d75b345802",{"html":1943,"metadata":1944},"\u003Cp>Cursor, Copilot, ChatGPT, Claude veya başka bir ajan kullanıyor olmanızdan bağımsız olarak; iyi istem kalitesi, model markasından daha belirleyicidir.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"ne-istemelisiniz\">Ne istemelisiniz?\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#ne-istemelisiniz\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Ne istemelisiniz?”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Çıktı türünü açıkça belirtin:\u003C/p>\n\u003Cul>\n\u003Cli>OpenFlow DSL\u003C/li>\n\u003Cli>Mermaid\u003C/li>\n\u003Cli>diyagram planı\u003C/li>\n\u003C/ul>\n\u003Cp>“Bir diyagram yap” demek yerine hangi formatı istediğinizi söyleyin.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"güçlü-istem-yapısı\">Güçlü istem yapısı\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#güçlü-istem-yapısı\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Güçlü istem yapısı”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Şunları ekleyin:\u003C/p>\n\u003Cul>\n\u003Cli>diyagramın amacı\u003C/li>\n\u003Cli>hedef kitle\u003C/li>\n\u003Cli>gerekli sistemler veya aktörler\u003C/li>\n\u003Cli>önemli dallar ya da hata yolları\u003C/li>\n\u003Cli>tercih edilen yön (\u003Ccode dir=\"auto\">TB\u003C/code>, \u003Ccode dir=\"auto\">LR\u003C/code> gibi)\u003C/li>\n\u003Cli>tercih edilen sözdizimi\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"i̇lgili-sayfalar\">İlgili sayfalar\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#i̇lgili-sayfalar\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “İlgili sayfalar”\u003C/span>\u003C/a>\u003C/div>\n\u003Cul>\n\u003Cli>\u003Ca href=\"/tr/ai-generation/\">AI Generation\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"/tr/ask-flowpilot/\">Ask Flowpilot\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"/tr/openflow-dsl/\">OpenFlow DSL\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"/tr/mermaid-integration/\">Mermaid Integration\u003C/a>\u003C/li>\n\u003C/ul>",{"headings":1945,"localImagePaths":1953,"remoteImagePaths":1954,"frontmatter":1955,"imagePaths":1956},[1946,1949,1952],{"depth":30,"slug":1947,"text":1948},"ne-istemelisiniz","Ne istemelisiniz?",{"depth":30,"slug":1950,"text":1951},"güçlü-istem-yapısı","Güçlü istem yapısı",{"depth":30,"slug":1238,"text":1239},[],[],{"draft":20,"title":961,"description":1935},[],"tr/properties-panel",{"id":1957,"data":1959,"body":1964,"filePath":1965,"digest":1966,"rendered":1967},{"title":929,"description":1960,"editUrl":16,"head":1961,"template":18,"sidebar":1962,"pagefind":16,"draft":20},"OpenFlowKit’te düğüm, kenar, toplu düzenleme ve Studio ile ilişkili ayarlar için sağ taraftaki denetçiyi kullanın.",[],{"hidden":20,"attrs":1963},{},"Properties Panel, bir düğüm veya kenar seçtiğinizde açılan sağ taraf denetçisidir. Kabaca doğru olan yapıyı kesin düzeye taşıyan ana yüzeydir.\n\n## Ne zaman kullanılmalı?\n\nŞu durumlarda kullanın:\n\n- yapı doğru ama ayrıntılar yanlışsa\n- etiket, renk, şekil ve tipografi gibi ayarlar kesinleşecekse\n- kenar etiketleri veya rota davranışı ayarlanacaksa\n- aileye özgü alanlar doğrudan tuvalde düzenlemek için uygun değilse\n\n## Sağ panelin davranışı\n\n- tek düğüm seçiliyse: düğüm denetçisi\n- birden fazla düğüm seçiliyse: toplu düzenleme\n- tek kenar seçiliyse: kenar denetçisi\n- Studio aktifse: AI, kod, lint veya ilgili Studio görünümü\n\n## Düğüm düzenleme\n\nTipik olarak şunlar bulunur:\n\n- içerik\n- şekil\n- renk\n- ikon\n- tipografi\n- görsel ayarları\n- browser/mobile varyant ayarları\n\n## Kenar düzenleme\n\nKenar seçildiğinde tipik olarak:\n\n- etiket\n- rota\n- görünüm ayarları\n\nalanları düzenlenebilir.\n\n## Toplu düzenleme\n\nBirden fazla düğüm seçildiğinde ortak stil ve paylaşılan alanları tek seferde güncellemek için toplu düzenleme modu açılır.","src/content/docs/tr/properties-panel.md","510e26197f3e177b",{"html":1968,"metadata":1969},"\u003Cp>Properties Panel, bir düğüm veya kenar seçtiğinizde açılan sağ taraf denetçisidir. Kabaca doğru olan yapıyı kesin düzeye taşıyan ana yüzeydir.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"ne-zaman-kullanılmalı\">Ne zaman kullanılmalı?\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#ne-zaman-kullanılmalı\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Ne zaman kullanılmalı?”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Şu durumlarda kullanın:\u003C/p>\n\u003Cul>\n\u003Cli>yapı doğru ama ayrıntılar yanlışsa\u003C/li>\n\u003Cli>etiket, renk, şekil ve tipografi gibi ayarlar kesinleşecekse\u003C/li>\n\u003Cli>kenar etiketleri veya rota davranışı ayarlanacaksa\u003C/li>\n\u003Cli>aileye özgü alanlar doğrudan tuvalde düzenlemek için uygun değilse\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"sağ-panelin-davranışı\">Sağ panelin davranışı\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#sağ-panelin-davranışı\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Sağ panelin davranışı”\u003C/span>\u003C/a>\u003C/div>\n\u003Cul>\n\u003Cli>tek düğüm seçiliyse: düğüm denetçisi\u003C/li>\n\u003Cli>birden fazla düğüm seçiliyse: toplu düzenleme\u003C/li>\n\u003Cli>tek kenar seçiliyse: kenar denetçisi\u003C/li>\n\u003Cli>Studio aktifse: AI, kod, lint veya ilgili Studio görünümü\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"düğüm-düzenleme\">Düğüm düzenleme\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#düğüm-düzenleme\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Düğüm düzenleme”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Tipik olarak şunlar bulunur:\u003C/p>\n\u003Cul>\n\u003Cli>içerik\u003C/li>\n\u003Cli>şekil\u003C/li>\n\u003Cli>renk\u003C/li>\n\u003Cli>ikon\u003C/li>\n\u003Cli>tipografi\u003C/li>\n\u003Cli>görsel ayarları\u003C/li>\n\u003Cli>browser/mobile varyant ayarları\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"kenar-düzenleme\">Kenar düzenleme\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#kenar-düzenleme\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Kenar düzenleme”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Kenar seçildiğinde tipik olarak:\u003C/p>\n\u003Cul>\n\u003Cli>etiket\u003C/li>\n\u003Cli>rota\u003C/li>\n\u003Cli>görünüm ayarları\u003C/li>\n\u003C/ul>\n\u003Cp>alanları düzenlenebilir.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"toplu-düzenleme\">Toplu düzenleme\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#toplu-düzenleme\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Toplu düzenleme”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Birden fazla düğüm seçildiğinde ortak stil ve paylaşılan alanları tek seferde güncellemek için toplu düzenleme modu açılır.\u003C/p>",{"headings":1970,"localImagePaths":1984,"remoteImagePaths":1985,"frontmatter":1986,"imagePaths":1987},[1971,1972,1975,1978,1981],{"depth":30,"slug":1435,"text":1436},{"depth":30,"slug":1973,"text":1974},"sağ-panelin-davranışı","Sağ panelin davranışı",{"depth":30,"slug":1976,"text":1977},"düğüm-düzenleme","Düğüm düzenleme",{"depth":30,"slug":1979,"text":1980},"kenar-düzenleme","Kenar düzenleme",{"depth":30,"slug":1982,"text":1983},"toplu-düzenleme","Toplu düzenleme",[],[],{"draft":20,"title":929,"description":1960},[],"tr/quick-start",{"id":1988,"data":1990,"body":1995,"filePath":1996,"digest":1997,"rendered":1998},{"title":1007,"description":1991,"editUrl":16,"head":1992,"template":18,"sidebar":1993,"pagefind":16,"draft":20},"İlk OpenFlowKit diyagramınızı tuval, şablonlar, yapay zeka, kod veya yapılandırılmış içe aktarma ile oluşturun.",[],{"hidden":20,"attrs":1994},{},"Bu sayfa, mevcut üründe hızlıca üretken olmanız için en kısa güvenilir yoldur.\n\n## 1. Yeni bir belge açın veya oluşturun\n\nAna ekrandan şunları yapabilirsiniz:\n\n- yeni akış oluşturmak\n- tarayıcıda kayıtlı mevcut bir akışı açmak\n- kayıtlı bir akışı çoğaltmak\n- JSON diyagram belgesi içe aktarmak\n\nHer belge editör içinde ayrı bir sekmede açılır.\n\n## 2. Başlangıç noktanızı seçin\n\nElinizde hangi bilgi varsa ona uygun giriş yolunu seçin.\n\n### Boş tuval\n\nYapıyı zaten biliyorsanız ve doğrudan çizmek istiyorsanız bunu kullanın.\n\n### Şablon\n\n`Cmd/Ctrl + K` ile Komut Merkezi’ni açın ve **Start from Template** seçin. Şablonlar akış diyagramları, bulut mimarileri, zihin haritaları, journey akışları ve wireframe’leri kapsar.\n\n### Varlıklar\n\nKomut Merkezi içindeki **Assets** görünümünü kullanarak not, metin, bölüm, wireframe, görsel veya sağlayıcı ikonları ekleyin.\n\n### Yapay zeka\n\nSağ panelde Studio’yu açın ve **FlowPilot** sekmesine geçin. Örnek istem:\n\n```text\nKayıt, e-posta doğrulama, ekip daveti,\nçalışma alanı oluşturma, ödeme kurulumu\nve ilk başarı adımını içeren bir SaaS onboarding akışı oluştur.\n```\n\n### Kod\n\nElinizde Mermaid veya OpenFlow DSL varsa Studio içindeki **Code** sekmesinden doğrudan yapıştırıp uygulayın.\n\n### Yapılandırılmış giriş\n\nElinizde SQL, OpenAPI, Terraform veya Kubernetes girdisi varsa Studio içe aktarma akışlarını kullanın. Bkz. [Import from Structured Data](/tr/import-from-data/) ve [Infrastructure Sync](/tr/infra-sync/).\n\n## 3. Taslağı iyileştirin\n\nİlk taslak tuvale geldikten sonra:\n\n- düğümleri kabaca konumlandırın\n- kesin düzenlemeler için [Properties Panel](/tr/properties-panel/) kullanın\n- yapı doğru ama yerleşim dağınıksa [Smart Layout](/tr/smart-layout/) çalıştırın\n- arama, ek varlık ve iş akışı geçişleri için [Command Center](/tr/command-center/) kullanın\n\n## 4. Kurtarma noktaları oluşturun\n\nBüyük bir yapay zeka yeniden yazımı veya geniş içe aktarma yenilemesinden önce anlık görüntü geçmişinizi kontrol edin. Bkz. [Playback & History](/tr/playback-history/).\n\n## 5. Paylaşın veya dışa aktarın\n\nDiyagramı dokümantasyon, tasarım veya iş birliği akışına taşımaya hazır olduğunuzda dışa aktarma menüsünü kullanın.\n\n- [Choose an Export Format](/tr/choose-export-format/)\n- [Exporting](/tr/exporting/)\n- [Collaboration & Sharing](/tr/collaboration-sharing/)","src/content/docs/tr/quick-start.md","b82924a03c175c56",{"html":1999,"metadata":2000},"\u003Cp>Bu sayfa, mevcut üründe hızlıca üretken olmanız için en kısa güvenilir yoldur.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"1-yeni-bir-belge-açın-veya-oluşturun\">1. Yeni bir belge açın veya oluşturun\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#1-yeni-bir-belge-açın-veya-oluşturun\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “1. Yeni bir belge açın veya oluşturun”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Ana ekrandan şunları yapabilirsiniz:\u003C/p>\n\u003Cul>\n\u003Cli>yeni akış oluşturmak\u003C/li>\n\u003Cli>tarayıcıda kayıtlı mevcut bir akışı açmak\u003C/li>\n\u003Cli>kayıtlı bir akışı çoğaltmak\u003C/li>\n\u003Cli>JSON diyagram belgesi içe aktarmak\u003C/li>\n\u003C/ul>\n\u003Cp>Her belge editör içinde ayrı bir sekmede açılır.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"2-başlangıç-noktanızı-seçin\">2. Başlangıç noktanızı seçin\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#2-başlangıç-noktanızı-seçin\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “2. Başlangıç noktanızı seçin”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Elinizde hangi bilgi varsa ona uygun giriş yolunu seçin.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"boş-tuval\">Boş tuval\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#boş-tuval\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Boş tuval”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Yapıyı zaten biliyorsanız ve doğrudan çizmek istiyorsanız bunu kullanın.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"şablon\">Şablon\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#şablon\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Şablon”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>\u003Ccode dir=\"auto\">Cmd/Ctrl + K\u003C/code> ile Komut Merkezi’ni açın ve \u003Cstrong>Start from Template\u003C/strong> seçin. Şablonlar akış diyagramları, bulut mimarileri, zihin haritaları, journey akışları ve wireframe’leri kapsar.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"varlıklar\">Varlıklar\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#varlıklar\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Varlıklar”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Komut Merkezi içindeki \u003Cstrong>Assets\u003C/strong> görünümünü kullanarak not, metin, bölüm, wireframe, görsel veya sağlayıcı ikonları ekleyin.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"yapay-zeka\">Yapay zeka\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#yapay-zeka\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Yapay zeka”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Sağ panelde Studio’yu açın ve \u003Cstrong>FlowPilot\u003C/strong> sekmesine geçin. Örnek istem:\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Clink rel=\"stylesheet\" href=\"/_astro/ec.v4551.css\">\u003Cscript type=\"module\" src=\"/_astro/ec.0vx5m.js\">\u003C/script>\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"text\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">Kayıt, e-posta doğrulama, ekip daveti,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">çalışma alanı oluşturma, ödeme kurulumu\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#d6deeb;--1:#403f53\">ve ilk başarı adımını içeren bir SaaS onboarding akışı oluştur.\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"Kayıt, e-posta doğrulama, ekip daveti,çalışma alanı oluşturma, ödeme kurulumuve ilk başarı adımını içeren bir SaaS onboarding akışı oluştur.\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"kod\">Kod\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#kod\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Kod”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Elinizde Mermaid veya OpenFlow DSL varsa Studio içindeki \u003Cstrong>Code\u003C/strong> sekmesinden doğrudan yapıştırıp uygulayın.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"yapılandırılmış-giriş\">Yapılandırılmış giriş\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#yapılandırılmış-giriş\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Yapılandırılmış giriş”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Elinizde SQL, OpenAPI, Terraform veya Kubernetes girdisi varsa Studio içe aktarma akışlarını kullanın. Bkz. \u003Ca href=\"/tr/import-from-data/\">Import from Structured Data\u003C/a> ve \u003Ca href=\"/tr/infra-sync/\">Infrastructure Sync\u003C/a>.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"3-taslağı-iyileştirin\">3. Taslağı iyileştirin\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#3-taslağı-iyileştirin\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “3. Taslağı iyileştirin”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>İlk taslak tuvale geldikten sonra:\u003C/p>\n\u003Cul>\n\u003Cli>düğümleri kabaca konumlandırın\u003C/li>\n\u003Cli>kesin düzenlemeler için \u003Ca href=\"/tr/properties-panel/\">Properties Panel\u003C/a> kullanın\u003C/li>\n\u003Cli>yapı doğru ama yerleşim dağınıksa \u003Ca href=\"/tr/smart-layout/\">Smart Layout\u003C/a> çalıştırın\u003C/li>\n\u003Cli>arama, ek varlık ve iş akışı geçişleri için \u003Ca href=\"/tr/command-center/\">Command Center\u003C/a> kullanın\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"4-kurtarma-noktaları-oluşturun\">4. Kurtarma noktaları oluşturun\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#4-kurtarma-noktaları-oluşturun\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “4. Kurtarma noktaları oluşturun”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Büyük bir yapay zeka yeniden yazımı veya geniş içe aktarma yenilemesinden önce anlık görüntü geçmişinizi kontrol edin. Bkz. \u003Ca href=\"/tr/playback-history/\">Playback &#x26; History\u003C/a>.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"5-paylaşın-veya-dışa-aktarın\">5. Paylaşın veya dışa aktarın\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#5-paylaşın-veya-dışa-aktarın\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “5. Paylaşın veya dışa aktarın”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Diyagramı dokümantasyon, tasarım veya iş birliği akışına taşımaya hazır olduğunuzda dışa aktarma menüsünü kullanın.\u003C/p>\n\u003Cul>\n\u003Cli>\u003Ca href=\"/tr/choose-export-format/\">Choose an Export Format\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"/tr/exporting/\">Exporting\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"/tr/collaboration-sharing/\">Collaboration &#x26; Sharing\u003C/a>\u003C/li>\n\u003C/ul>",{"headings":2001,"localImagePaths":2035,"remoteImagePaths":2036,"frontmatter":2037,"imagePaths":2038},[2002,2005,2008,2011,2014,2017,2020,2023,2026,2029,2032],{"depth":30,"slug":2003,"text":2004},"1-yeni-bir-belge-açın-veya-oluşturun","1. Yeni bir belge açın veya oluşturun",{"depth":30,"slug":2006,"text":2007},"2-başlangıç-noktanızı-seçin","2. Başlangıç noktanızı seçin",{"depth":37,"slug":2009,"text":2010},"boş-tuval","Boş tuval",{"depth":37,"slug":2012,"text":2013},"şablon","Şablon",{"depth":37,"slug":2015,"text":2016},"varlıklar","Varlıklar",{"depth":37,"slug":2018,"text":2019},"yapay-zeka","Yapay zeka",{"depth":37,"slug":2021,"text":2022},"kod","Kod",{"depth":37,"slug":2024,"text":2025},"yapılandırılmış-giriş","Yapılandırılmış giriş",{"depth":30,"slug":2027,"text":2028},"3-taslağı-iyileştirin","3. Taslağı iyileştirin",{"depth":30,"slug":2030,"text":2031},"4-kurtarma-noktaları-oluşturun","4. Kurtarma noktaları oluşturun",{"depth":30,"slug":2033,"text":2034},"5-paylaşın-veya-dışa-aktarın","5. Paylaşın veya dışa aktarın",[],[],{"draft":20,"title":1007,"description":1991},[],"tr/roadmap",{"id":2039,"data":2041,"body":2046,"filePath":2047,"digest":2048,"rendered":2049},{"title":1057,"description":2042,"editUrl":16,"head":2043,"template":18,"sidebar":2044,"pagefind":16,"draft":20},"Yol haritası fikirleri ile şu anda belgelenen ürün davranışını birbirine karıştırmamak için bu sayfayı referans alın.",[],{"hidden":20,"attrs":2045},{},"Bu dokümantasyon sitesi, mevcut gönderilmiş davranışı ve ürün yolunda zaten aktif olan yüzeyleri anlatır.\n\n## Bu sayfanın amacı\n\nBu sayfayı bir vaat listesi olarak değil, içerik politikası notu olarak düşünün.\n\n- Doküman sayfaları mevcut ürün davranışını anlatır.\n- Strateji ve yol haritası belgeleri geleceğe dönük yönü ayrı olarak anlatabilir.\n- Henüz üründe olmayan bir yetenek, dokümantasyonda gönderilmiş gibi anlatılmamalıdır.","src/content/docs/tr/roadmap.md","67a8f18b4681e881",{"html":2050,"metadata":2051},"\u003Cp>Bu dokümantasyon sitesi, mevcut gönderilmiş davranışı ve ürün yolunda zaten aktif olan yüzeyleri anlatır.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"bu-sayfanın-amacı\">Bu sayfanın amacı\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#bu-sayfanın-amacı\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Bu sayfanın amacı”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Bu sayfayı bir vaat listesi olarak değil, içerik politikası notu olarak düşünün.\u003C/p>\n\u003Cul>\n\u003Cli>Doküman sayfaları mevcut ürün davranışını anlatır.\u003C/li>\n\u003Cli>Strateji ve yol haritası belgeleri geleceğe dönük yönü ayrı olarak anlatabilir.\u003C/li>\n\u003Cli>Henüz üründe olmayan bir yetenek, dokümantasyonda gönderilmiş gibi anlatılmamalıdır.\u003C/li>\n\u003C/ul>",{"headings":2052,"localImagePaths":2056,"remoteImagePaths":2057,"frontmatter":2058,"imagePaths":2059},[2053],{"depth":30,"slug":2054,"text":2055},"bu-sayfanın-amacı","Bu sayfanın amacı",[],[],{"draft":20,"title":1057,"description":2042},[],"tr/smart-layout",{"id":2060,"data":2062,"body":2067,"filePath":2068,"digest":2069,"rendered":2070},{"title":1079,"description":2063,"editUrl":16,"head":2064,"template":18,"sidebar":2065,"pagefind":16,"draft":20},"ELK tabanlı düzen ile kaba grafikleri daha okunabilir diyagramlara dönüştürün.",[],{"hidden":20,"attrs":2066},{},"OpenFlowKit, kaba grafikleri hızlı biçimde daha okunabilir diyagramlara dönüştürmek için ELK tabanlı düzen stratejileri kullanır.\n\n## Otomatik düzen ne zaman kullanılmalı?\n\n- şablonun yapısı doğru ama görünümü dağınıksa\n- yapay zeka doğru düğümleri üretip kötü konumlandırdıysa\n- kod veya içe aktarma sonrası normalizasyon gerekiyorsa\n- elle eklenen dallar yüzünden boşluklar bozulduysa\n\n## Nasıl çalıştırılır?\n\nKomut Merkezi’ni açın ve **Auto Layout** seçin. Editör yön, algoritma ve boşluk tercihlerini düzen motoruna geçirir.\n\nYaygın yönler:\n\n- `TB`\n- `LR`\n- `RL`\n- `BT`\n\n## Düzenin güçlü olduğu alanlar\n\n- akış şemaları\n- mimari grafikler\n- dallanan durum diyagramları\n- yapay zeka ile üretilmiş ilk taslaklar\n\nElle kurgulanmış sunum tarzı diyagramlarda ise her zaman sihirli sonuç vermez.\n\n## Pratik strateji\n\n1. önce doğru düğüm ve kenarları kurun\n2. ardından düzeni çalıştırın\n3. gerekirse bölümlerle gruplayın\n4. son görsel ayarları elle yapın\n\nYerleşimi düzen çalıştırmadan önce elle mükemmelleştirmeye çalışmak çoğu zaman boşa emektir.","src/content/docs/tr/smart-layout.md","d5180905178ed101",{"html":2071,"metadata":2072},"\u003Cp>OpenFlowKit, kaba grafikleri hızlı biçimde daha okunabilir diyagramlara dönüştürmek için ELK tabanlı düzen stratejileri kullanır.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"otomatik-düzen-ne-zaman-kullanılmalı\">Otomatik düzen ne zaman kullanılmalı?\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#otomatik-düzen-ne-zaman-kullanılmalı\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Otomatik düzen ne zaman kullanılmalı?”\u003C/span>\u003C/a>\u003C/div>\n\u003Cul>\n\u003Cli>şablonun yapısı doğru ama görünümü dağınıksa\u003C/li>\n\u003Cli>yapay zeka doğru düğümleri üretip kötü konumlandırdıysa\u003C/li>\n\u003Cli>kod veya içe aktarma sonrası normalizasyon gerekiyorsa\u003C/li>\n\u003Cli>elle eklenen dallar yüzünden boşluklar bozulduysa\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"nasıl-çalıştırılır\">Nasıl çalıştırılır?\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#nasıl-çalıştırılır\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Nasıl çalıştırılır?”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Komut Merkezi’ni açın ve \u003Cstrong>Auto Layout\u003C/strong> seçin. Editör yön, algoritma ve boşluk tercihlerini düzen motoruna geçirir.\u003C/p>\n\u003Cp>Yaygın yönler:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Ccode dir=\"auto\">TB\u003C/code>\u003C/li>\n\u003Cli>\u003Ccode dir=\"auto\">LR\u003C/code>\u003C/li>\n\u003Cli>\u003Ccode dir=\"auto\">RL\u003C/code>\u003C/li>\n\u003Cli>\u003Ccode dir=\"auto\">BT\u003C/code>\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"düzenin-güçlü-olduğu-alanlar\">Düzenin güçlü olduğu alanlar\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#düzenin-güçlü-olduğu-alanlar\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Düzenin güçlü olduğu alanlar”\u003C/span>\u003C/a>\u003C/div>\n\u003Cul>\n\u003Cli>akış şemaları\u003C/li>\n\u003Cli>mimari grafikler\u003C/li>\n\u003Cli>dallanan durum diyagramları\u003C/li>\n\u003Cli>yapay zeka ile üretilmiş ilk taslaklar\u003C/li>\n\u003C/ul>\n\u003Cp>Elle kurgulanmış sunum tarzı diyagramlarda ise her zaman sihirli sonuç vermez.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"pratik-strateji\">Pratik strateji\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#pratik-strateji\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Pratik strateji”\u003C/span>\u003C/a>\u003C/div>\n\u003Col>\n\u003Cli>önce doğru düğüm ve kenarları kurun\u003C/li>\n\u003Cli>ardından düzeni çalıştırın\u003C/li>\n\u003Cli>gerekirse bölümlerle gruplayın\u003C/li>\n\u003Cli>son görsel ayarları elle yapın\u003C/li>\n\u003C/ol>\n\u003Cp>Yerleşimi düzen çalıştırmadan önce elle mükemmelleştirmeye çalışmak çoğu zaman boşa emektir.\u003C/p>",{"headings":2073,"localImagePaths":2086,"remoteImagePaths":2087,"frontmatter":2088,"imagePaths":2089},[2074,2077,2080,2083],{"depth":30,"slug":2075,"text":2076},"otomatik-düzen-ne-zaman-kullanılmalı","Otomatik düzen ne zaman kullanılmalı?",{"depth":30,"slug":2078,"text":2079},"nasıl-çalıştırılır","Nasıl çalıştırılır?",{"depth":30,"slug":2081,"text":2082},"düzenin-güçlü-olduğu-alanlar","Düzenin güçlü olduğu alanlar",{"depth":30,"slug":2084,"text":2085},"pratik-strateji","Pratik strateji",[],[],{"draft":20,"title":1079,"description":2063},[],"tr/templates-assets",{"id":2090,"data":2092,"body":2097,"filePath":2098,"digest":2099,"rendered":2100},{"title":1156,"description":2093,"editUrl":16,"head":2094,"template":18,"sidebar":2095,"pagefind":16,"draft":20},"Yerleşik şablonlar, sağlayıcı ikon varlıkları ve başlangıç paketleriyle diyagramlara daha hızlı başlayın.",[],{"hidden":20,"attrs":2096},{},"Şablonlar ve varlıklar, boş tuval problemini azaltır. Yapı veya görsel sistem için güçlü bir başlangıç istediğinizde bu yüzeyleri kullanın.\n\n## Şablonlar\n\nBaşlangıç grafikleri sunar:\n\n- abonelik yükseltme akışları\n- incident escalation akışları\n- release train yapıları\n- bulut mimarisi başlangıçları\n\n## Varlıklar\n\n- genel yapı taşları\n- wireframe yüzeyleri\n- sağlayıcı ikonları\n\nŞablon tüm iskeleti, varlık ise parça düzeyinde eklemeyi çözer.","src/content/docs/tr/templates-assets.md","95597206e0b3999b",{"html":2101,"metadata":2102},"\u003Cp>Şablonlar ve varlıklar, boş tuval problemini azaltır. Yapı veya görsel sistem için güçlü bir başlangıç istediğinizde bu yüzeyleri kullanın.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"şablonlar\">Şablonlar\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#şablonlar\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Şablonlar”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Başlangıç grafikleri sunar:\u003C/p>\n\u003Cul>\n\u003Cli>abonelik yükseltme akışları\u003C/li>\n\u003Cli>incident escalation akışları\u003C/li>\n\u003Cli>release train yapıları\u003C/li>\n\u003Cli>bulut mimarisi başlangıçları\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"varlıklar\">Varlıklar\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#varlıklar\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Varlıklar”\u003C/span>\u003C/a>\u003C/div>\n\u003Cul>\n\u003Cli>genel yapı taşları\u003C/li>\n\u003Cli>wireframe yüzeyleri\u003C/li>\n\u003Cli>sağlayıcı ikonları\u003C/li>\n\u003C/ul>\n\u003Cp>Şablon tüm iskeleti, varlık ise parça düzeyinde eklemeyi çözer.\u003C/p>",{"headings":2103,"localImagePaths":2108,"remoteImagePaths":2109,"frontmatter":2110,"imagePaths":2111},[2104,2107],{"depth":30,"slug":2105,"text":2106},"şablonlar","Şablonlar",{"depth":30,"slug":2015,"text":2016},[],[],{"draft":20,"title":1156,"description":2093},[],"tr/studio-overview",{"id":2112,"data":2114,"body":2119,"filePath":2120,"digest":2121,"rendered":2122},{"title":1114,"description":2115,"editUrl":16,"head":2116,"template":18,"sidebar":2117,"pagefind":16,"draft":20},"OpenFlowKit Studio yüzeyinde AI, kod, içe aktarma, altyapı çözümleme ve mimari lint akışlarını anlayın.",[],{"hidden":20,"attrs":2118},{},"Studio, görsel tuvalin yanında çalışan yapılandırılmış üretim alanıdır. Tuval tek başına en iyi araç olmadığında Studio’ya geçersiniz.\n\n## Sekmeler\n\n| Sekme | Amaç |\n| --- | --- |\n| **FlowPilot** | AI ile üretim ve revizyon |\n| **Code** | OpenFlow DSL ve Mermaid ile çalışma |\n| **Infra** | Destekli altyapı girdileri için parse akışı |\n| **Lint** | Mimari kural ve ihlal görünümü |\n\n## Ne zaman açılmalı?\n\n- istemden diyagram üretirken\n- kod tabanlı temsillerle çalışırken\n- altyapı veya yapılandırılmış veri içe aktarırken\n- mimari kuralları doğrularken","src/content/docs/tr/studio-overview.md","5ae3ead79d29754c",{"html":2123,"metadata":2124},"\u003Cp>Studio, görsel tuvalin yanında çalışan yapılandırılmış üretim alanıdır. Tuval tek başına en iyi araç olmadığında Studio’ya geçersiniz.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"sekmeler\">Sekmeler\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#sekmeler\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Sekmeler”\u003C/span>\u003C/a>\u003C/div>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>Sekme\u003C/th>\u003Cth>Amaç\u003C/th>\u003C/tr>\u003C/thead>\u003Ctbody>\u003Ctr>\u003Ctd>\u003Cstrong>FlowPilot\u003C/strong>\u003C/td>\u003Ctd>AI ile üretim ve revizyon\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Cstrong>Code\u003C/strong>\u003C/td>\u003Ctd>OpenFlow DSL ve Mermaid ile çalışma\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Cstrong>Infra\u003C/strong>\u003C/td>\u003Ctd>Destekli altyapı girdileri için parse akışı\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Cstrong>Lint\u003C/strong>\u003C/td>\u003Ctd>Mimari kural ve ihlal görünümü\u003C/td>\u003C/tr>\u003C/tbody>\u003C/table>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"ne-zaman-açılmalı\">Ne zaman açılmalı?\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#ne-zaman-açılmalı\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Ne zaman açılmalı?”\u003C/span>\u003C/a>\u003C/div>\n\u003Cul>\n\u003Cli>istemden diyagram üretirken\u003C/li>\n\u003Cli>kod tabanlı temsillerle çalışırken\u003C/li>\n\u003Cli>altyapı veya yapılandırılmış veri içe aktarırken\u003C/li>\n\u003Cli>mimari kuralları doğrularken\u003C/li>\n\u003C/ul>",{"headings":2125,"localImagePaths":2132,"remoteImagePaths":2133,"frontmatter":2134,"imagePaths":2135},[2126,2129],{"depth":30,"slug":2127,"text":2128},"sekmeler","Sekmeler",{"depth":30,"slug":2130,"text":2131},"ne-zaman-açılmalı","Ne zaman açılmalı?",[],[],{"draft":20,"title":1114,"description":2115},[]]
\ No newline at end of file
diff --git a/docs-site/_headers b/docs-site/_headers
index 2d74e76..904f9dc 100644
--- a/docs-site/_headers
+++ b/docs-site/_headers
@@ -3,3 +3,4 @@
   X-Content-Type-Options: nosniff
   Referrer-Policy: strict-origin-when-cross-origin
   Permissions-Policy: camera=(), microphone=(), geolocation=()
+  Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; connect-src 'self'; img-src 'self' data: https:; font-src 'self' data:; frame-ancestors 'none';
diff --git a/docs-site/astro.config.mjs b/docs-site/astro.config.mjs
index 2c408ce..34e6d25 100644
--- a/docs-site/astro.config.mjs
+++ b/docs-site/astro.config.mjs
@@ -1,5 +1,6 @@
 import { defineConfig } from 'astro/config';
 import starlight from '@astrojs/starlight';
+import { toStarlightSidebar } from '../src/docs/publicDocsCatalog.js';
 
 export default defineConfig({
   site: 'https://docs.openflowkit.com',
@@ -23,55 +24,8 @@ export default defineConfig({
         root: { label: 'English', lang: 'en' },
         tr: { label: 'Türkçe', lang: 'tr' },
       },
-      sidebar: [
-        {
-          label: 'Getting Started',
-          items: [
-            { label: 'Introduction', slug: 'introduction' },
-            { label: 'Quick Start', slug: 'quick-start' },
-          ],
-        },
-        {
-          label: 'Core Workflows',
-          items: [
-            { label: 'Canvas Basics', slug: 'canvas-basics' },
-            { label: 'Node Types', slug: 'node-types' },
-            { label: 'Properties Panel', slug: 'properties-panel' },
-            { label: 'Command Center', slug: 'command-center' },
-          ],
-        },
-        {
-          label: 'Studio & Automation',
-          items: [
-            { label: 'AI Generation', slug: 'ai-generation' },
-            { label: 'Smart Layout', slug: 'smart-layout' },
-            { label: 'Playback & History', slug: 'playback-history' },
-            { label: 'OpenFlow DSL', slug: 'openflow-dsl' },
-          ],
-        },
-        {
-          label: 'Guides',
-          items: [
-            { label: 'Prompting AI Agents', slug: 'prompting-agents' },
-            { label: 'Mermaid vs OpenFlow', slug: 'mermaid-vs-openflow' },
-            { label: 'AWS Architecture', slug: 'aws-architecture' },
-            { label: 'Payment Flow', slug: 'payment-flow' },
-            { label: 'Mermaid Integration', slug: 'mermaid-integration' },
-            { label: 'Exporting', slug: 'exporting' },
-            { label: 'Keyboard Shortcuts', slug: 'keyboard-shortcuts' },
-          ],
-        },
-        {
-          label: 'Project Notes',
-          items: [
-            { label: 'Roadmap', slug: 'roadmap' },
-          ],
-        },
-      ],
+      sidebar: toStarlightSidebar(),
       customCss: ['./src/styles/custom.css'],
     }),
   ],
-  redirects: {
-    '/': '/introduction',
-  },
 });
diff --git a/docs-site/src/content/docs/ai-generation.md b/docs-site/src/content/docs/ai-generation.md
index bd66d9e..5c25933 100644
--- a/docs-site/src/content/docs/ai-generation.md
+++ b/docs-site/src/content/docs/ai-generation.md
@@ -1,22 +1,40 @@
 ---
 draft: false
 title: AI Generation
+description: Generate and refine diagrams in Studio with Flowpilot, BYOK providers, code-to-architecture, and structured imports.
 ---
 
-OpenFlowKit ships with AI-assisted diagram generation through the Studio rail. Internally this flow composes a graph, lays it out, applies it to the current canvas, and keeps the exchange history in the local session.
+OpenFlowKit includes AI-assisted diagram generation through the Studio rail. Flowpilot is best used for first drafts, structural revisions, and code-backed architecture exploration.
+
+AI generation is most valuable when you need to go from ambiguity to structure quickly. It is not the only way to create diagrams in OpenFlowKit, and it is usually not the final step. Think of it as a draft accelerator.
+
+## Access and setup
+
+Flowpilot lives inside Studio. If an API key is not configured yet, OpenFlowKit prompts you to open the shared AI settings modal instead of keeping setup inline inside the panel.
+
+That matters for two reasons:
+
+- the same AI settings surface is used across the product
+- provider choice, model choice, and key storage behavior stay consistent whether you open AI from Home, Studio, or Settings
 
 ## Where AI lives in the product
 
-AI is available in the Studio panel under the **AI** tab and through the **Open FlowPilot** command in the Command Center.
+AI is available in the Studio panel under **Flowpilot** and through the **Open Flowpilot** command in the Command Center. Common sub-flows include:
 
-The current hook path:
+| Mode | What it does |
+| --- | --- |
+| **Flowpilot** | Chat-based generation and iteration |
+| **From Code** | Paste source code and generate an architecture diagram |
+| **Import** | Paste SQL, Terraform, K8s, or OpenAPI and generate a draft |
 
-1. captures your prompt and optional image
-2. sends it using your configured provider settings
-3. receives DSL-like graph output
-4. composes nodes and edges
-5. applies layout
-6. replaces the current working graph
+Typical generation flow:
+
+1. capture your prompt and optional image
+2. send it through the configured provider
+3. receive a structured graph representation
+4. compose nodes and edges
+5. apply layout
+6. replace or update the current graph
 
 ## Provider model
 
@@ -32,103 +50,54 @@ The app supports multiple BYOK providers, including:
 - OpenRouter
 - Custom OpenAI-compatible endpoint
 
-Default models are defined in the app config, but you can choose from provider-specific lists in Settings.
-
-## Important operational detail
-
-Your API configuration is stored locally in browser state. OpenFlowKit does not require an application account to use the editor.
+This matters because you are not locked to one hosted AI vendor or one billing model.
 
-Some providers are more browser-friendly than others. In the codebase, provider risk is explicitly categorized, so for certain providers a proxy setup may still be the more reliable production choice.
+API keys stay browser-local. Persistent keys can be stored for reuse on the current device, and session-only mode is available when you do not want the key to survive the browser session.
 
-## Prompting patterns that work well
+## When AI is the right tool
 
-Use prompts that specify:
+Use AI when:
 
-- the diagram goal
-- actors or systems
-- decision points
-- important branches
-- desired layout direction if it matters
-- the diagram family if it matters
+- you are starting from a plain-language idea
+- you want a fast first-pass architecture or workflow draft
+- you want to revise an existing diagram conceptually rather than move boxes one by one
+- you have source code and want a generated architecture view
 
-Example:
+Avoid AI when:
 
-```text
-Create a left-to-right architecture diagram for a SaaS product with:
-Cloudflare edge, API gateway, auth service, product service, Postgres,
-Redis, background worker, S3-compatible object storage, and observability.
-Show user traffic, internal service calls, and async jobs.
-```
+- you already have a precise text format such as Mermaid or OpenFlow DSL
+- you need deterministic output from infrastructure files
+- the diagram is small enough that manual editing is faster
 
-## Iteration workflow
+In those cases, prefer [OpenFlow DSL](/openflow-dsl/), [Mermaid Integration](/mermaid-integration/), or [Infrastructure Sync](/infra-sync/).
 
-The fastest loop is usually:
+## How to get better results
 
-1. generate a first draft with AI
-2. clean structure with auto layout
-3. refine labels and edge semantics in Properties
-4. switch to OpenFlow DSL or Mermaid for exact textual edits
+Strong prompts usually include:
 
-## What AI changes and what it does not
+- the intended audience
+- the systems or actors involved
+- important branches or failure paths
+- the preferred diagram direction
+- the level of detail you want
 
-AI is good at:
+Weak prompts ask for “a diagram” without constraints. Strong prompts explain the system.
 
-- initial graph creation
-- rough decomposition
-- generating branch logic
-- filling in missing surrounding steps
+## Recommended workflow
 
-AI is weaker at:
+1. Generate a first draft with Flowpilot.
+2. Inspect the structure on the canvas.
+3. Use the [Properties Panel](/properties-panel/) to normalize labels, color, and routing.
+4. Run [Smart Layout](/smart-layout/) if the structure is right but spacing is poor.
+5. Save a snapshot before another major rewrite.
 
-- strict provider-specific architecture semantics
-- exact naming conventions
-- pixel-level visual composition
-- preserving a very specific existing diagram unless you guide it tightly
+## Practical caution
 
-## Best practices
+AI output should be treated as a draft, not a certified system model. For documentation, architecture review, or infra communication, you should still check naming, boundaries, and missing branches before exporting or sharing.
 
-- keep prompts concrete
-- ask for one diagram family at a time
-- include failure paths explicitly
-- avoid mixing product requirements and visual polish in the same prompt
-- use a follow-up pass for naming, grouping, and export cleanup
-
-## Related reading
+## Related pages
 
+- [Ask Flowpilot](/ask-flowpilot/)
+- [Studio Overview](/studio-overview/)
+- [Choose an Input Mode](/choose-input-mode/)
 - [Prompting AI Agents](/prompting-agents/)
-- [OpenFlow DSL](/openflow-dsl/)
-- [Mermaid Integration](/mermaid-integration/)
-2.  **Structural Generation**: It constructs a valid FlowMind DSL JSON object representing the nodes and connections.
-3.  **Layout Optimization**: The engine applies smart layout algorithms to ensure the generated graph is readable.
-
-## Best Practices for Prompts
-
-To get the best results, be specific about the **steps** and the **outcome**.
-
-### ❌ Too Vague
-> "Make a system diagram."
-
-### ✅ Good
-> "Create a high-level system architecture for an e-commerce platform. Include a Web App, API Gateway, User Service, Product Service, and a shared PostgreSQL database."
-
-### ✅ Better (Process Flow)
-> "Draw a flowchart for a user password reset process. Start with 'User clicks forgot password', check if email exists. If yes, send distinct token. If no, show error. End with 'User enters new password'."
-
-## Editing AI Results
-
-AI generation is a starting point, not the end. You can always:
-*   Add missing steps manaully.
-*   Renaming nodes for clarity.
-*   Regenerating specific sections (Coming Soon).
-
-## 🔑 Bring Your Own Key (BYOK)
-
-By default, FlowMind uses a shared API key with limited quotas. For heavy usage, privacy, or to use your own billing, you can bring your own **Gemini API Key**.
-
-1.  Go to **Google AI Studio** and [Get an API Key](https://aistudio.google.com/app/apikey).
-2.  In FlowMind, open **Settings** (Gear Icon) or click on any **Brand Kit**.
-3.  Navigate to the **AI** tab.
-4.  Paste your key into the secure input field.
-
-> [!NOTE]
-> Your key is stored locally in your browser's `localStorage` and is never sent to our servers. It is strictly used for client-side API calls to Google.
diff --git a/docs-site/src/content/docs/architecture-lint.md b/docs-site/src/content/docs/architecture-lint.md
new file mode 100644
index 0000000..76eeddf
--- /dev/null
+++ b/docs-site/src/content/docs/architecture-lint.md
@@ -0,0 +1,51 @@
+---
+draft: false
+title: Architecture Linting
+description: Define JSON-based architecture rules in Studio and highlight diagram violations in real time.
+---
+
+Architecture Linting lets you define rules that catch violations directly on the canvas. It is the closest thing OpenFlowKit has to diagram linting for system design.
+
+## Where it lives
+
+Open Studio and switch to the **Lint** tab.
+
+## What it does
+
+The lint panel lets you:
+
+- paste or edit JSON-based rules
+- save and clear rule sets
+- see parse errors in the rule file
+- review live violations with error, warning, or info severity
+
+Violations are surfaced while you work, so the diagram becomes something you can validate, not just draw.
+
+## Why this matters
+
+Many diagrams are only descriptive. Architecture linting makes them evaluative as well. That is useful when the diagram represents real constraints, such as:
+
+- a frontend should not talk directly to a database
+- only certain services should cross a trust boundary
+- an imported topology should still conform to platform rules
+
+## Practical workflow
+
+1. Draft or import the diagram.
+2. Open Studio → **Lint**.
+3. Add or paste the rule JSON.
+4. Save rules and review violations.
+5. Fix the diagram and re-check until the rules pass.
+
+## Best use cases
+
+- architecture review
+- governance for platform diagrams
+- validating diagrams created from infrastructure sync
+- checking that large AI-assisted revisions did not break intended boundaries
+
+## Related pages
+
+- [Studio Overview](/studio-overview/)
+- [Infrastructure Sync](/infra-sync/)
+- [Diagram Diff & Compare](/diagram-diff/)
diff --git a/docs-site/src/content/docs/ask-flowpilot.md b/docs-site/src/content/docs/ask-flowpilot.md
index 35b4828..a74383d 100644
--- a/docs-site/src/content/docs/ask-flowpilot.md
+++ b/docs-site/src/content/docs/ask-flowpilot.md
@@ -1,8 +1,50 @@
 ---
 draft: false
 title: Ask Flowpilot
+description: Use Flowpilot as the chat-based Studio assistant for drafting, revising, and explaining diagrams.
 ---
 
-# Ask Flowpilot Assistant
+Flowpilot is the chat-based assistant inside Studio. It is the fastest way to describe a diagram in plain language, revise an existing draft, or ask for a different structural take before you start polishing the result manually.
 
-This page is dynamically replaced by the AI Assistant component inside `DocsPage.tsx`. This file exists only to satisfy the Vite dynamic glob importer and routing logic.
+## Good use cases
+
+Ask Flowpilot when you want to:
+
+- create a first draft from a text prompt
+- revise an existing system into a cleaner structure
+- expand a rough flow with missing failure branches
+- convert source code or structured input into a diagram draft
+
+## What to include in your prompt
+
+Useful prompts specify:
+
+- the audience
+- the systems or actors involved
+- important branches or constraints
+- preferred direction such as `LR` or `TB`
+- whether you want a high-level overview or a detailed operational flow
+
+## Example prompt
+
+```text
+Create a left-to-right architecture diagram for a SaaS app with:
+web client, API gateway, auth service, billing service, Postgres,
+Redis cache, background workers, and S3-backed file storage.
+Show public ingress, async jobs, and failure-handling paths.
+```
+
+## What to do after generation
+
+Flowpilot is strongest as a draft generator, not the final editor. After generation:
+
+- inspect the structure on the canvas
+- relabel and normalize in the [Properties Panel](/properties-panel/)
+- run [Smart Layout](/smart-layout/) if spacing is poor
+- save a snapshot before the next major rewrite
+
+## Related pages
+
+- [AI Generation](/ai-generation/)
+- [Prompting AI Agents](/prompting-agents/)
+- [Choose an Input Mode](/choose-input-mode/)
diff --git a/docs-site/src/content/docs/aws-architecture.md b/docs-site/src/content/docs/aws-architecture.md
index 46cbbb8..cd15dd6 100644
--- a/docs-site/src/content/docs/aws-architecture.md
+++ b/docs-site/src/content/docs/aws-architecture.md
@@ -1,30 +1,42 @@
 ---
 draft: false
 title: AWS Architecture Diagram
+description: Use OpenFlowKit for AWS architecture diagrams with templates, icon-backed assets, AI drafting, DSL, and export workflows.
 ---
 
-OpenFlowKit is a strong fit for AWS architecture diagrams because it supports both provider-backed icon insertion and code-first drafting.
+OpenFlowKit is a strong fit for AWS architecture diagrams because it supports provider-backed icon insertion, architecture-oriented layouts, AI-assisted drafting, and code-backed editing in the same workflow.
 
 ## Best starting points
 
-For AWS diagrams, use one of these:
+For AWS diagrams, start from the input that already exists:
 
 - an AWS template from the template browser
 - the Assets view with AWS icon catalog
 - AI generation with a provider-specific architecture prompt
 - OpenFlow DSL for a deterministic first pass
 
+## How to choose the starting point
+
+- Use templates when you want a known structural baseline.
+- Use assets when you know the services already and want manual control.
+- Use AI when you want a fast conceptual draft.
+- Use DSL when the graph should be reviewed as text.
+
 ## Recommended workflow
 
 1. insert core services first
-2. add boundaries and sections for VPCs, public/private tiers, or trust zones
-3. connect traffic paths
-4. run auto layout
-5. refine protocols and edge labels
+2. add boundaries for VPCs, public/private tiers, or trust zones
+3. connect traffic paths and async flows
+4. run [Smart Layout](/smart-layout/)
+5. refine labels, protocols, and visual emphasis
+6. save a snapshot before large revisions
+7. export or share in the format your audience needs
 
 ## Asset strategy
 
-The assets panel can load provider-backed catalogs and previews. Use icon nodes for branded service identity, then use sections or architecture boundaries to show grouping.
+The assets panel can load provider-backed catalogs and previews. Use icon nodes for branded service identity, then use sections or boundaries to show grouping.
+
+This is usually better than drawing every service as a generic box, especially when the audience expects cloud-provider cues at a glance.
 
 ## Example prompt
 
@@ -47,70 +59,12 @@ Use DSL when:
 
 For architecture reviews:
 
-- export PNG for slides
+- export PNG or SVG for slides and docs
 - export JSON for editable backup
-- optionally export Mermaid or PlantUML for docs workflows
-
-- **Version Control**: Track infrastructure changes over time.
-- **Auto-Layout**: No more overlapping lines or misaligned VPCs.
-- **Speed**: Type a few lines, get a complete diagram.
-
-
-## Example: Basic Web Architecture (Mermaid.js)
-
-OpenFlowKit natively supports Mermaid.js, which is great for standard cloud structures. Here is how you can visualize an AWS VPC with a Load Balancer, EC2 instances, and an RDS database.
-
-```mermaid
-flowchart TD
-    %% Define Styles
-    classDef aws fill:#FF9900,stroke:#fff,stroke-width:2px,color:#fff,rx:8px,ry:8px;
-    classDef vpc fill:#f5f5f5,stroke:#00A4A6,stroke-width:2px,stroke-dasharray: 5 5,rx:12px,ry:12px;
-    
-    Client((User Traffic))
-
-    subgraph AWS_VPC [AWS Cloud VPC]
-        ALB(Application Load Balancer)
-        
-        subgraph Public_Subnet [Public Subnet]
-            EC2_1(Web Server 1)
-            EC2_2(Web Server 2)
-        end
-        
-        subgraph Private_Subnet [Private Subnet]
-            RDS[(Amazon RDS)]
-            ElastiCache[(Redis Cache)]
-        end
-    end
-
-    %% Connections
-    Client -->|HTTPS| ALB
-    ALB -->|Round Robin| EC2_1
-    ALB -->|Round Robin| EC2_2
-    
-    EC2_1 --> RDS
-    EC2_1 --> ElastiCache
-    EC2_2 --> RDS
-    EC2_2 --> ElastiCache
-
-    %% Apply Styles
-    class ALB,EC2_1,EC2_2 aws;
-    class RDS,ElastiCache aws;
-    class AWS_VPC,Public_Subnet,Private_Subnet vpc;
-```
-
-## Creating AWS Diagrams with AI
-
-If you don't know Mermaid syntax, you can use **Flowpilot**, our built-in AI assistant. 
-
-1. Open the [Command Center](/docs/en/command-center).
-2. Type a prompt like:
-> `"Create an AWS architecture diagram showing an API Gateway routing traffic to three AWS Lambda functions, which all connect to a central DynamoDB table."`
-3. Hit enter. Flowpilot will instantly generate the DSL and render the diagram.
-
-## Exporting for internal documentation
+- optionally export Mermaid or PlantUML for repo or docs workflows
 
-Once your AWS Architecture is generated, you can easily export it:
-- **SVG / PNG**: For Confluence, Jira, or Slack.
-- **Figma Editable**: Want your UX team to polish the diagram? Click *Figma Editable* and paste it directly into Figma as native, editable vector layers.
+## Related pages
 
-[Try building your first AWS Architecture diagram now!](/#/canvas)
+- [Infrastructure Sync](/infra-sync/)
+- [Templates & Starter Flows](/templates-assets/)
+- [Choose an Export Format](/choose-export-format/)
diff --git a/docs-site/src/content/docs/canvas-basics.md b/docs-site/src/content/docs/canvas-basics.md
index 0c5dc09..a8c91fb 100644
--- a/docs-site/src/content/docs/canvas-basics.md
+++ b/docs-site/src/content/docs/canvas-basics.md
@@ -1,9 +1,19 @@
 ---
 draft: false
 title: Canvas Basics
+description: Learn how to move, select, edit, and recover work on the OpenFlowKit canvas.
 ---
 
-The canvas is the main editing surface. It is optimized for desktop and large tablet layouts, with selection, panning, layout, and right-rail editing built around a large-screen workflow.
+The canvas is the main editing surface in OpenFlowKit. It is optimized for desktop and larger-tablet workflows, with direct manipulation on the graph and exact edits in the side rails.
+
+## When to use the canvas
+
+Use the canvas when you want to:
+
+- sketch a diagram manually
+- refine something created by AI, imports, or code
+- inspect structure spatially instead of as text
+- move quickly between direct manipulation and inspector-based editing
 
 ## Navigation
 
@@ -39,61 +49,10 @@ Use either of these:
 
 When multiple nodes are selected, the right rail switches to **Bulk edit** mode.
 
-## Moving and editing nodes
-
-### Reposition
-
-Drag nodes directly on the canvas.
-
-### Rename
-
-- double-click directly on a node for fast label editing
-- or select the node and edit its content from the Properties panel
-- `F2` triggers rename for the current selection
-
-### Duplicate and delete
-
-- `Cmd/Ctrl + D` duplicates the current selection
-- `Option/Alt + Drag` performs duplicate-drag
-- `Delete` or `Backspace` removes the current selection
-
-## Creating connections
-
-Drag from a node handle to another node to create an edge. After that, use the edge inspector to refine:
-
-- label
-- route style
-- color
-- condition semantics
-- appearance and animation flags
-
-Architecture edges expose extra semantics such as protocol, port, and direction.
-
-## Working styles
-
-The editor supports two primary interaction modes:
-
-- **Select mode** for object manipulation
-- **Pan mode** for navigation
-
-This matters most on dense diagrams, where accidental node moves become expensive.
-
-## Canvas support tools
-
-### Command Center
-
-Use `Cmd/Ctrl + K` to add assets, browse templates, search nodes, or run layout without leaving the canvas.
-
-### Properties rail
-
-Select a node or edge to open the right-side inspector.
-
-### History and snapshots
+## Direct manipulation vs exact editing
 
-Open the snapshots/history panel when you need recovery points or want to revisit a previous graph state.
+The canvas is where you move, select, and compose the graph. For exact values and family-specific settings, switch to the [Properties Panel](/properties-panel/). For templates, search, layout, and workflow switching, use the [Command Center](/command-center/).
 
-## Practical advice
+## History and recovery
 
-- Use sections to create visual boundaries before a diagram gets large
-- Use auto layout early, not only when a canvas is already messy
-- Switch to OpenFlow DSL or Mermaid in Studio when structural edits are faster in text than by drag-and-drop
+Use regular undo/redo for short corrections and snapshots for larger rollback points. See [Playback & History](/playback-history/).
diff --git a/docs-site/src/content/docs/choose-export-format.md b/docs-site/src/content/docs/choose-export-format.md
new file mode 100644
index 0000000..99a2011
--- /dev/null
+++ b/docs-site/src/content/docs/choose-export-format.md
@@ -0,0 +1,36 @@
+---
+draft: false
+title: Choose an Export Format
+description: Pick the right OpenFlowKit export format for editing, docs, collaboration, embeds, or design-tool handoff.
+---
+
+OpenFlowKit supports both visual exports and editable handoff formats. The right format depends on what happens next.
+
+## Quick guide
+
+| Need | Best format |
+| --- | --- |
+| editable archival backup | JSON |
+| editor-native text | OpenFlow DSL |
+| Markdown or repo-friendly text | Mermaid |
+| docs, slides, or tickets | PNG, JPG, or SVG |
+| design-tool handoff | Figma |
+| short playback artifact | GIF or video |
+| live viewer or room access | Share / Embed |
+
+## Rules of thumb
+
+- Use JSON when fidelity matters most.
+- Use OpenFlow DSL when OpenFlowKit remains the editing home.
+- Use Mermaid when another docs or repo workflow expects Mermaid.
+- Use SVG when you need scalable vector output.
+- Use PNG or JPG for lightweight visual sharing.
+- Use share/embed when the diagram should remain interactive.
+
+## Default recommendation
+
+If you want a safe pattern, keep:
+
+- JSON as the editable master
+- a visual export for presentation
+- Mermaid or DSL only when another text-based workflow needs it
diff --git a/docs-site/src/content/docs/choose-input-mode.md b/docs-site/src/content/docs/choose-input-mode.md
new file mode 100644
index 0000000..f51b38c
--- /dev/null
+++ b/docs-site/src/content/docs/choose-input-mode.md
@@ -0,0 +1,39 @@
+---
+draft: false
+title: Choose an Input Mode
+description: Decide when to use templates, AI, OpenFlow DSL, Mermaid, structured imports, or direct canvas editing.
+---
+
+OpenFlowKit supports multiple ways to create a diagram. The best choice depends on what source material already exists and how deterministic you need the result to be.
+
+## Quick guide
+
+| If you have... | Start with... |
+| --- | --- |
+| a common builder workflow you want to adapt quickly | [Templates & Starter Flows](/templates-assets/) |
+| a rough idea | [AI Generation](/ai-generation/) |
+| a diagram you want to sketch manually | [Canvas Basics](/canvas-basics/) |
+| editor-native text you want to control precisely | [OpenFlow DSL](/openflow-dsl/) |
+| Mermaid already used elsewhere | [Mermaid Integration](/mermaid-integration/) |
+| SQL, OpenAPI, Terraform, or K8s source text | [Import from Structured Data](/import-from-data/) |
+| infra files you want parsed deterministically | [Infrastructure Sync](/infra-sync/) |
+
+## Rules of thumb
+
+- Choose templates when the shape is familiar but the exact labels are not.
+- Choose AI for speed and ideation.
+- Choose OpenFlow DSL for editor-native precision.
+- Choose Mermaid for ecosystem compatibility.
+- Choose structured import when a source artifact already exists.
+- Choose Infra Sync when you want deterministic, non-AI parsing of supported infra inputs.
+
+## Common mistakes
+
+- Using AI when you already have a precise source artifact.
+- Starting from a blank canvas when a starter template is already close to the workflow.
+- Using Mermaid as the editing master when fidelity inside OpenFlowKit matters more.
+- Redrawing infrastructure manually when the source files already exist.
+
+## Recommended pattern
+
+Start with the most structured truthful input you already have. Move from template or source text into the visual editor, then use AI only when the stronger input does not exist or when you want alternate drafts fast.
diff --git a/docs-site/src/content/docs/collaboration-sharing.md b/docs-site/src/content/docs/collaboration-sharing.md
new file mode 100644
index 0000000..7cce4f1
--- /dev/null
+++ b/docs-site/src/content/docs/collaboration-sharing.md
@@ -0,0 +1,50 @@
+---
+draft: false
+title: Collaboration & Sharing
+description: Share room links, understand local-only fallback behavior, and use OpenFlowKit collaboration features safely.
+---
+
+OpenFlowKit supports share links and collaboration-oriented room flows while keeping local-first behavior as the default.
+
+## What the share flow includes
+
+The share dialog can expose:
+
+- a room ID
+- an invite URL
+- current viewer count
+- participant badges
+- connection state such as realtime, connecting, or local-only fallback
+
+## Current collaboration model
+
+The product includes a collaboration scaffold with presence, transport status, and local cache behavior. In practice, that means you can share a room link and see whether the current session is in live sync or local-only fallback mode.
+
+This is important because local-first tools should fail gracefully. If realtime sync is not available, the app should not force you to stop working.
+
+## How to use it well
+
+- open the share dialog before inviting others
+- confirm whether the session is in live sync or fallback mode
+- use room links when you want collaborators in the same canvas context
+- export JSON when you need a durable editable backup outside the current browser state
+
+## When to use sharing vs exporting
+
+Use collaboration sharing when:
+
+- the diagram should stay interactive
+- other people should join the current working canvas
+- you want presence and room-based workflows
+
+Use exporting when:
+
+- you need an artifact, not a live session
+- the next destination is docs, slides, or a design tool
+- you need a durable handoff file
+
+## Related pages
+
+- [Exporting](/exporting/)
+- [Choose an Export Format](/choose-export-format/)
+- [Embed Diagrams in GitHub](/github-embed/)
diff --git a/docs-site/src/content/docs/command-center.md b/docs-site/src/content/docs/command-center.md
index df54ce5..3f3b078 100644
--- a/docs-site/src/content/docs/command-center.md
+++ b/docs-site/src/content/docs/command-center.md
@@ -1,18 +1,19 @@
 ---
 draft: false
 title: Command Center
+description: Use the keyboard-first launcher to search, insert assets, start templates, switch into Studio, and run layout or design-system actions.
 ---
 
-The Command Center is the keyboard-first launcher for the editor. It opens as a floating panel and is the fastest way to move between assets, templates, search, layout, and studio actions.
+The Command Center is the keyboard-first launcher for the editor. It opens as a floating panel and is the fastest way to move between assets, templates, search, layout, and Studio actions.
 
 > [!NOTE]
 > Open it with `Cmd + K` on macOS or `Ctrl + K` on Windows/Linux.
 
 ## Root commands
 
-The top-level command list currently includes:
+The top-level command list includes actions such as:
 
-- Open FlowPilot
+- Open Flowpilot
 - Edit Flow DSL
 - Edit Mermaid Code
 - Assets
@@ -21,7 +22,7 @@ The top-level command list currently includes:
 - Start from Template
 - Design Systems
 
-Playback Studio also appears when its rollout flag is enabled.
+Playback-related entries may also appear when the relevant playback surface is active in the current product path.
 
 ## Views inside the Command Center
 
@@ -38,54 +39,23 @@ Use this to insert:
 - uploaded images
 - browser wireframes
 - mobile wireframes
-- provider-backed icons and cloud assets
 
 ### Templates
 
-The template browser supports search and category filtering. It is the fastest way to start from a known graph shape.
+Use templates when you want a proven starting structure instead of a blank canvas.
 
 ### Search
 
-Search scans existing nodes on the current canvas so you can find and jump to content in large diagrams.
-
-### Layout
-
-The layout view lets you run auto layout without leaving the keyboard workflow.
+Use search to jump to named nodes in larger diagrams.
 
 ### Design Systems
 
-This view is used to manage reusable visual styling choices for the canvas.
-
-## Why use it instead of clicking around
-
-Use the Command Center when:
-
-- you are working on a laptop and want minimal pointer travel
-- the canvas is crowded and the toolbar is slower than search
-- you want to switch directly into AI or code editing
-- you want to insert assets in batches
-
-## Recommended habit
-
-Treat the Command Center as the default launcher, not a secondary shortcut. In daily use it becomes the fastest path to most non-drag operations.
-
-### 1. Templates
-Don't start from scratch. Access a library of pre-built diagrams:
-*   AWS Architecture Patterns
-*   User Journey Maps
-*   Database Schemas
-*   Organizational Charts
+Use Design Systems to switch themes, duplicate them, edit them, or import/export theme JSON.
 
-### 2. Design System / Visuals
-Access a library of assets to enhance your diagram:
-*   **Wireframes**: Drag and drop low-fidelity UI components (Buttons, Inputs, Modals) to build quick mockups.
-*   **Icons**: Search and insert any icon as a standalone node.
+## How it fits with the rest of the editor
 
-### 3. AI Copilot
-The text input in the Command Center is your direct line to our AI engine. Type what you want to build, and hitting `Enter` generates it instantly.
+The Command Center is the fastest bridge between the canvas and Studio:
 
-### 4. Layout & Tools
-Quickly access utility functions:
-*   **Auto Layout**: Re-organize the chaos.
-*   **Reset View**: Jump back to center.
-*   **Format Code**: Clean up your DSL.
+- use the canvas for direct manipulation
+- use the inspector for exact edits
+- use the Command Center for navigation, search, layout, templates, assets, and workflow switching
diff --git a/docs-site/src/content/docs/design-systems-branding.md b/docs-site/src/content/docs/design-systems-branding.md
new file mode 100644
index 0000000..7f61566
--- /dev/null
+++ b/docs-site/src/content/docs/design-systems-branding.md
@@ -0,0 +1,50 @@
+---
+draft: false
+title: Design Systems & Branding
+description: Manage reusable design systems in OpenFlowKit and import or export theme definitions for consistent diagrams.
+---
+
+OpenFlowKit includes design-system support so your diagrams can inherit a repeatable visual language instead of being styled one by one.
+
+## What the design-system flow supports
+
+From the Command Center you can:
+
+- switch the active design system
+- create a new theme from an existing base
+- duplicate and edit themes
+- import theme JSON
+- export the active theme
+
+This is the right workflow when consistency matters as much as diagram correctness.
+
+## When to use it
+
+Use design systems when:
+
+- multiple diagrams should share a consistent look
+- your team has visual standards you want to reuse
+- you want architecture, workflow, and product diagrams to feel like one system
+- you need to package diagram styling as something reusable instead of manual
+
+## Import and export
+
+The design-system view supports JSON import and export. That makes it possible to:
+
+- move a theme between environments
+- create branded variants
+- version visual settings outside the current session
+
+## Relationship to Figma
+
+Figma style import is a related workflow. Use it when you want to fetch colors and text styles from a Figma file and apply them to a design system inside OpenFlowKit.
+
+## Recommended pattern
+
+Keep one stable default theme for everyday work and create variants only when the audience or brand needs are genuinely different. Too many themes usually create inconsistency instead of flexibility.
+
+## Related pages
+
+- [Figma Design Import](/figma-design-import/)
+- [Templates & Starter Flows](/templates-assets/)
+- [Command Center](/command-center/)
diff --git a/docs-site/src/content/docs/diagram-diff.md b/docs-site/src/content/docs/diagram-diff.md
new file mode 100644
index 0000000..d5bea48
--- /dev/null
+++ b/docs-site/src/content/docs/diagram-diff.md
@@ -0,0 +1,48 @@
+---
+draft: false
+title: Diagram Diff & Compare
+description: Compare the current diagram against a snapshot baseline and review added, removed, and changed elements.
+---
+
+Diagram Diff & Compare lets you inspect how the current graph differs from a saved baseline snapshot.
+
+## What compare mode shows
+
+When compare mode is active, OpenFlowKit surfaces:
+
+- added nodes and edges
+- removed nodes and edges
+- changed nodes
+- the baseline snapshot name and timestamp
+
+This is useful after imports, AI rewrites, or manual restructures when you want to understand what actually changed rather than rely on memory.
+
+## Why it is valuable
+
+Large diagram edits often fail in two ways:
+
+- the result is visually different but you cannot explain what changed
+- the result looks mostly similar, but a few important relationships disappeared
+
+Compare mode helps with both. It gives you a concrete change view against a known baseline.
+
+## Recommended workflow
+
+1. Save or identify the baseline snapshot.
+2. Make the changes you need.
+3. Enter compare mode against that snapshot.
+4. Review the counts for added, removed, and changed elements.
+5. Exit compare mode and continue editing if needed.
+
+## Good use cases
+
+- checking the impact of a major Flowpilot revision
+- reviewing the result of a large infrastructure refresh
+- comparing before-and-after states during architecture refactors
+- validating that a simplification pass did not delete something important
+
+## Related pages
+
+- [Playback & History](/playback-history/)
+- [AI Generation](/ai-generation/)
+- [Infrastructure Sync](/infra-sync/)
diff --git a/docs-site/src/content/docs/diagram-families.md b/docs-site/src/content/docs/diagram-families.md
new file mode 100644
index 0000000..1a92dc8
--- /dev/null
+++ b/docs-site/src/content/docs/diagram-families.md
@@ -0,0 +1,40 @@
+---
+draft: false
+title: Diagram Families
+description: Choose the right diagram family in OpenFlowKit for flows, architecture maps, mind maps, journeys, class diagrams, ER diagrams, and more.
+---
+
+OpenFlowKit supports multiple diagram families because not every problem should be forced into the same node and edge model.
+
+## Families in the current editor
+
+| Family | Best for |
+| --- | --- |
+| `flowchart` | General process and system flows |
+| `architecture` | Cloud, service, and platform diagrams |
+| `mindmap` | Branching ideation and hierarchical thinking |
+| `journey` | User journey or multi-stage experience mapping |
+| `stateDiagram` | State transitions and event-driven logic |
+| `classDiagram` | Object modeling and relationships |
+| `erDiagram` | Tables, entities, and relational structure |
+| `gitGraph` | Git history and branching flows |
+
+## How to choose
+
+Use the family that matches the semantics of the diagram, not just the visual look.
+
+- Choose `flowchart` when the problem is procedural.
+- Choose `architecture` when services, infrastructure, or trust boundaries matter.
+- Choose `mindmap` when branching and hierarchy matter more than exact routing.
+- Choose `journey` when stages, actors, and sentiment or score matter.
+- Choose `classDiagram` or `erDiagram` when the relationships themselves carry meaning.
+
+## Why it matters
+
+Different families unlock different node behavior, import paths, layout assumptions, and inspector controls. Picking the right family early usually means less cleanup later.
+
+## Related pages
+
+- [Node Types](/node-types/)
+- [Choose an Input Mode](/choose-input-mode/)
+- [Studio Overview](/studio-overview/)
diff --git a/docs-site/src/content/docs/exporting.md b/docs-site/src/content/docs/exporting.md
index 5f3893c..88ed055 100644
--- a/docs-site/src/content/docs/exporting.md
+++ b/docs-site/src/content/docs/exporting.md
@@ -1,36 +1,46 @@
 ---
 draft: false
 title: Exporting
+description: Export diagrams from OpenFlowKit as images, cinematic media, JSON, code formats, design-tool handoff, or share/embed links.
 ---
 
 Export lives in the top-right menu of the editor and covers both downloadable files and clipboard-oriented formats.
 
+The right export choice depends on whether your next step is editing, publishing, presenting, embedding, or collaboration.
+
 ## Downloaded file exports
 
-### PNG
+### PNG and JPG
 
-Best for:
+Use PNG or JPG for:
 
 - docs
 - slides
-- issue trackers
-- transparent-background diagram drops
+- tickets
+- lightweight visual sharing
 
-### JPG
+PNG is usually the better default when you want cleaner transparency handling. JPG is useful when a simple white-background image is enough.
 
-Best for:
+### SVG
 
-- white-background presentations
-- lightweight sharing where transparency is not required
+Use SVG when you need vector output for docs, websites, or further design-tool handling. SVG is the best choice when the diagram needs to stay crisp across sizes.
 
 ### JSON
 
 This is the most faithful archival format for re-import into OpenFlowKit. Use it for:
 
 - backups
-- migration between browsers or machines
-- preserving playback metadata where present
-- team handoff of editable diagrams
+- browser-to-browser handoff
+- preserving the most editable version of the graph
+- long-term retention of a diagram you may need to revise later
+
+If you are unsure what to save as the master file, choose JSON.
+
+### Cinematic video and GIF
+
+Use cinematic exports when the diagram is meant to communicate change over time rather than a single static state. These are useful for demos, changelogs, social posts, and process walkthroughs.
+
+These exports are presentation-oriented. Keep JSON as the editable master if you may need to revise the underlying diagram later.
 
 ## Clipboard-oriented exports
 
@@ -39,71 +49,25 @@ These exports are generated from the current graph and copied rather than downlo
 - OpenFlow DSL
 - Mermaid
 - PlantUML
-- Figma-friendly SVG payload
-
-Use these when the next destination is another editor rather than a file browser.
-
-## Animated export
-
-The codebase supports playback export to:
-
-- GIF
-- browser-recorded video
-
-These options appear only when the animated export rollout flag is enabled.
-
-## Fidelity guidance
-
-Choose formats by goal:
-
-- use **JSON** for maximum round-trip fidelity
-- use **OpenFlow DSL** for editor-native textual workflows
-- use **Mermaid** when the target is Markdown or docs tooling
-- use **PlantUML** when the destination stack already expects PlantUML
-- use **PNG/JPG** when the result only needs to be viewed
-
-## Import pairing
-
-If you expect to continue editing later, always export a JSON copy alongside any presentation export.
-
-That one habit prevents most avoidable rework.
-
-Perfect for slides, documents, or sharing on Slack.
-
-### PNG (Portable Network Graphics)
-Exports a high-resolution, pixel-based image of your current flow.
-*   **Best for**: Slides, Web, General Sharing.
-*   **Settings**: Includes transparency by default if enabled in settings.
-
-### JPEG (Joint Photographic Experts Group)
-Exports a compressed image file.
-*   **Best for**: Email attachments, situations where file size matters.
-*   **Note**: Does not support transparency (background will be white).
+- Figma editable export
 
-## Data & Code Exports
+Use these when the next tool in the workflow expects text or design-tool-compatible handoff rather than an image.
 
-FlowMind is a "Diagram-as-Code" tool, so we treat your diagram data as a first-class citizen.
+## Sharing
 
-### JSON (FlowMind Native)
-Downloads the raw `.json` file containing all node positions, styles, and data.
-*   **Best for**: Backups, Version Control, Sharing editable files with other FlowMind users.
+The export menu also includes **Share / Embed** for viewer-link and collaboration-oriented workflows. Use this when you want a room link, viewer URL, or embed-style flow instead of a file.
 
-### FlowMind DSL
-Copies the simplified Domain Specific Language (DSL) representation to your clipboard.
-*   **Best for**: Storing diagram logic in your codebase comments or generating similar flows via AI.
+## Recommended export pattern
 
-### Mermaid.js
-Converts your current diagram into [Mermaid](https://mermaid.js.org/) syntax and copies it to the clipboard.
-*   **Best for**: Embedding diagrams in GitHub `README.md` files, Notion, or Obsidian.
-*   **Supported**: Basic Flowcharts, Sequence Diagrams.
+For serious work, a practical pattern is:
 
-### PlantUML
-Copies the PlantUML representation of your diagram.
-*   **Best for**: Enterprise wikis (Confluence) or legacy documentation systems.
+1. keep JSON as the editable master
+2. export Mermaid or DSL for text workflows
+3. export PNG, JPG, or SVG for presentation
+4. use share/embed when the diagram should remain interactive
 
-### Figma
-Copies a vector representation compatible with Figma's paste format.
-*   **Best for**: Handing off diagrams to designers for high-fidelity polishing.
+## Related pages
 
-> [!WARNING]
-> Figma export is experimental. Complex custom nodes may not transfer 100% perfectly.
+- [Choose an Export Format](/choose-export-format/)
+- [Collaboration & Sharing](/collaboration-sharing/)
+- [Embed Diagrams in GitHub](/github-embed/)
diff --git a/docs-site/src/content/docs/figma-design-import.md b/docs-site/src/content/docs/figma-design-import.md
new file mode 100644
index 0000000..bfdba58
--- /dev/null
+++ b/docs-site/src/content/docs/figma-design-import.md
@@ -0,0 +1,44 @@
+---
+draft: false
+title: Figma Design Import
+description: Fetch colors and text styles from Figma and apply them to an OpenFlowKit design system.
+---
+
+OpenFlowKit includes a Figma import flow for design-system work. Instead of recreating theme tokens manually, you can fetch styles from a Figma file and apply them to a diagram theme.
+
+## What you need
+
+- a Figma file URL
+- a personal access token
+
+The token is used in your browser to fetch styles. This is a token-based import flow, not a permanent synced integration.
+
+## What the import previews
+
+The current import flow can preview:
+
+- color styles
+- text styles
+- font families represented in those text styles
+
+After review, you can apply the result to a design system inside OpenFlowKit.
+
+## Best use cases
+
+- aligning diagrams with an existing design language
+- quickly creating a theme from a product or brand system
+- reducing manual token setup work before building multiple diagrams
+
+## Recommended workflow
+
+1. Open the Figma import flow.
+2. Paste the Figma file URL.
+3. Enter a personal access token.
+4. Fetch styles and review the preview.
+5. Apply the imported result to a design system.
+6. Use that design system across your diagram set.
+
+## Related pages
+
+- [Design Systems & Branding](/design-systems-branding/)
+- [Templates & Starter Flows](/templates-assets/)
diff --git a/docs-site/src/content/docs/github-embed.md b/docs-site/src/content/docs/github-embed.md
new file mode 100644
index 0000000..4a9621c
--- /dev/null
+++ b/docs-site/src/content/docs/github-embed.md
@@ -0,0 +1,109 @@
+---
+draft: false
+title: Embed Diagrams in GitHub
+description: Create viewer links for OpenFlowKit diagrams and embed them into GitHub-flavored documentation workflows.
+---
+
+OpenFlowKit diagrams can be embedded in any GitHub README or Markdown file as interactive, read-only views. No server setup or GitHub App required.
+
+## How it works
+
+The `/view` route renders any OpenFlow DSL passed as a URL parameter. You encode your diagram as a URL-safe string and link to it from your README.
+
+```
+https://openflowkit.dev/#/view?flow=BASE64_ENCODED_DSL
+```
+
+When someone clicks the link, they see the fully rendered, interactive diagram and can pan, zoom, and click **Open in Editor** to load it into the canvas for editing.
+
+## When this is useful
+
+Use the GitHub embed workflow when:
+
+- your team documents systems in Markdown
+- you want a richer diagram experience than a static PNG
+- you want readers to be able to open the diagram back in the editor
+
+## Step-by-step
+
+### 1. Write your diagram in OpenFlow DSL
+
+```
+flow: "My Architecture"
+direction: LR
+
+[browser] client: Web App
+[system] api: API Server
+[system] db: PostgreSQL
+
+client -> api |HTTP|
+api -> db |SQL|
+```
+
+### 2. Encode it
+
+In the browser console, or any JavaScript environment:
+
+```js
+const dsl = `flow: "My Architecture"
+direction: LR
+
+[browser] client: Web App
+[system] api: API Server
+[system] db: PostgreSQL
+
+client -> api |HTTP|
+api -> db |SQL|`;
+
+const encoded = btoa(encodeURIComponent(dsl));
+console.log(encoded);
+// → paste this into the URL below
+```
+
+### 3. Embed in your README
+
+```markdown
+[![Architecture Diagram](https://openflowkit.dev/og-diagram.png)](https://openflowkit.dev/#/view?flow=PASTE_ENCODED_VALUE_HERE)
+```
+
+The outer image link makes GitHub show a clickable preview image. Replace `og-diagram.png` with a screenshot of your diagram for the best preview.
+
+Or link directly without an image:
+
+```markdown
+[View Architecture Diagram →](https://openflowkit.dev/#/view?flow=PASTE_ENCODED_VALUE_HERE)
+```
+
+## Updating diagrams
+
+Edit your DSL, re-encode, and update the URL in the README. Because the entire diagram is in the URL, there is no external file to keep in sync.
+
+For diagrams you want to iterate on frequently, store the raw DSL in a `.flow` file in your repo and reference it in a comment next to the embed link:
+
+```markdown
+<!-- Source: ./docs/architecture.flow -->
+[View Architecture →](https://openflowkit.dev/#/view?flow=...)
+```
+
+## Encoding helper
+
+You can also export the viewer URL directly from the OpenFlowKit editor:
+
+1. Open your diagram in the editor
+2. Open **Studio → Code → OpenFlow DSL**
+3. Copy the DSL
+4. Encode it with the snippet above
+
+## Supported DSL features
+
+All OpenFlow DSL node types and edge types render in the viewer:
+
+- All node types: `[system]`, `[browser]`, `[mobile]`, `[process]`, `[decision]`, `[section]`, `[annotation]`, and more
+- All edge styles: solid, dashed (`..>`), curved (`-->`), thick (`==>`)
+- Edge labels, colors, icons, and grouping sections
+
+## Related reading
+
+- [OpenFlow DSL Reference](/openflow-dsl/)
+- [Exporting Diagrams](/exporting/)
+- [Import from Structured Data](/import-from-data/)
diff --git a/docs-site/src/content/docs/import-from-data.md b/docs-site/src/content/docs/import-from-data.md
new file mode 100644
index 0000000..5b1184d
--- /dev/null
+++ b/docs-site/src/content/docs/import-from-data.md
@@ -0,0 +1,40 @@
+---
+draft: false
+title: Import from Structured Data
+description: Turn SQL, OpenAPI, Terraform, and Kubernetes source text into editable diagrams from the Studio import flows.
+---
+
+The structured import flows in Studio convert source text into editable diagrams. This is useful when you already have SQL, OpenAPI, Terraform, or Kubernetes-related content and want a visual model quickly.
+
+## How it works
+
+Paste your source text, choose the matching mode, and generate the diagram. Depending on the input type, OpenFlowKit either runs a specialized AI-assisted import or a deterministic parser-based flow.
+
+One common pipeline is:
+
+```text
+Your text → specialized prompt → AI model → DSL → ELK layout → canvas
+```
+
+All your existing AI provider and API key settings apply.
+
+For fully deterministic infrastructure parsing that does not need AI, use [Infrastructure Sync](/infra-sync/).
+
+## SQL DDL → Entity-Relationship Diagram
+
+Paste one or more `CREATE TABLE` statements to generate an ER diagram.
+
+Flowpilot will:
+
+- create one node per table
+- list primary keys, foreign keys, and key columns inside each node
+- draw edges between tables that share foreign key relationships
+- group related tables where the model can infer a useful structure
+
+## OpenAPI and service-structure imports
+
+Use OpenAPI import when you want a service or endpoint-level first pass from an existing API spec.
+
+## When to choose this flow
+
+Choose structured import when a source artifact already exists and you want a fast editable draft. Choose manual editing when the diagram is primarily conceptual. Choose [Infrastructure Sync](/infra-sync/) when determinism matters more than AI interpretation.
diff --git a/docs-site/src/content/docs/infra-sync.md b/docs-site/src/content/docs/infra-sync.md
new file mode 100644
index 0000000..daf72fd
--- /dev/null
+++ b/docs-site/src/content/docs/infra-sync.md
@@ -0,0 +1,62 @@
+---
+title: Infrastructure Sync (Living Diagrams)
+description: Parse Terraform state, Kubernetes manifests, and Docker Compose files directly into diagrams without depending on an AI provider.
+---
+
+Infrastructure Sync converts real infrastructure files into OpenFlow diagrams deterministically. It works offline for supported inputs and produces diagrams that stay close to your actual infrastructure sources.
+
+## Supported formats
+
+- **Terraform State** (`.tfstate` JSON)
+- **Kubernetes YAML**
+- **Docker Compose YAML**
+- **Terraform HCL** through the AI-assisted path when needed
+
+## When to use it
+
+Use Infrastructure Sync when:
+
+- you already have real infrastructure files
+- you want deterministic parsing
+- you need an offline-friendly import path
+- you want an editable starting point for architecture review
+
+## Why it is different from AI import
+
+AI import is useful when the model needs to interpret messy or conceptual input. Infrastructure Sync is for cases where the source artifact already contains the structure and you want OpenFlowKit to parse it rather than reinterpret it.
+
+That distinction matters for trust. If the goal is to stay close to the underlying infra source, deterministic parsing is usually the better first move.
+
+## How to use it
+
+1. Open Studio.
+2. Switch to the **Infra** tab.
+3. Select the matching format.
+4. Paste or drop the file contents.
+5. Generate the diagram.
+6. Review the summary.
+7. Apply it to the canvas.
+
+## After import
+
+The result is still an editable OpenFlowKit diagram. After applying it to the canvas, you can:
+
+- annotate it
+- regroup it
+- run layout
+- export it
+- compare it against later snapshots
+- apply lint rules for architecture review
+
+## Best use cases
+
+- cloud topology reviews
+- current-state architecture documentation
+- infra change communication
+- turning operational source files into something easier to discuss visually
+
+## Related pages
+
+- [Import from Structured Data](/import-from-data/)
+- [Architecture Linting](/architecture-lint/)
+- [Diagram Diff & Compare](/diagram-diff/)
diff --git a/docs-site/src/content/docs/introduction.md b/docs-site/src/content/docs/introduction.md
index 3b6bf6d..fe469fc 100644
--- a/docs-site/src/content/docs/introduction.md
+++ b/docs-site/src/content/docs/introduction.md
@@ -1,24 +1,29 @@
 ---
 draft: false
 title: Introduction
+description: OpenFlowKit is a local-first diagramming workspace for developers and builders working on technical flows, architecture maps, code-backed diagrams, and AI-assisted editing.
 ---
 
-OpenFlowKit is a local-first diagram editor for technical flows, architecture maps, mind maps, journey maps, and code-backed diagram workflows.
+OpenFlowKit is a local-first diagramming workspace for developers and builders. It combines a visual canvas, code-friendly representations, deterministic imports, AI-assisted generation, and share/export workflows in one browser-based tool.
 
-The current product combines four working modes:
+## What OpenFlowKit is good at
 
-- A visual canvas for direct editing
-- A command-driven asset and template browser
-- A studio rail for AI, OpenFlow DSL, and Mermaid editing
-- Export and import paths for sharing diagrams outside the app
+OpenFlowKit works best when a diagram needs to evolve instead of staying static:
 
-## What OpenFlowKit is good at
+- start from a blank canvas, template, AI prompt, code representation, or imported source artifact
+- move quickly from Mermaid, SQL, OpenAPI, infrastructure files, or a builder-oriented starter template
+- refine the result visually instead of treating generation as a one-shot output
+- keep a text representation close to the editor model when needed
+- export or share the same diagram across docs, design, and collaboration workflows
 
-OpenFlowKit works best when you need a diagram that starts rough and becomes structured over time:
+## Core product surfaces
 
-- You can begin from a blank canvas, a template, imported JSON, Mermaid text, or an AI prompt.
-- You can keep refining the result visually with node handles, layout tools, properties, and edge controls.
-- You can switch to code when you want a more repeatable or reviewable representation.
+The current product centers on four major surfaces:
+
+- A visual canvas for direct editing
+- A command-driven launcher for search, templates, assets, layout, and design systems
+- A Studio rail for AI, code, imports, infrastructure sync, and linting
+- Export, embed, and share flows for moving work outside the editor
 
 ## Diagram families in the app
 
@@ -39,37 +44,18 @@ You will also see reusable node families for general-purpose flows, architecture
 
 ### Local-first by default
 
-Regular editing state is stored in the browser. You do not need an account to create or edit diagrams.
-
-### Bring your own model access
-
-AI generation uses the provider and model you configure in Settings. API keys stay in local browser storage.
-
-### Visual plus code workflow
-
-The Studio panel lets you work in:
-
-- **FlowPilot** for AI-driven edits
-- **OpenFlow DSL** for OpenFlowKit-native code
-- **Mermaid** for Mermaid-compatible text editing
+Diagram state lives in the browser by default. You choose when to export, share, or join collaboration-style room flows.
 
-### Export beyond the canvas
+### Multiple input modes
 
-You can export or copy diagrams as:
+OpenFlowKit does not force a single source of truth. You can work visually, with AI, through OpenFlow DSL, through Mermaid, or from structured imports.
 
-- PNG
-- JPG
-- JSON document
-- OpenFlow DSL
-- Mermaid
-- PlantUML
-- Figma-friendly SVG payload
+### Editable outputs
 
-Animated playback export exists in the codebase, but it is currently gated behind a rollout flag and should be treated as optional rather than universally available.
+Generated and imported diagrams come back into the same editable canvas model rather than becoming dead screenshots.
 
-## What to read next
+## Start here
 
-- Start with [Quick Start](/quick-start/)
-- Learn the editor model in [Canvas Basics](/canvas-basics/)
-- Review data and syntax in [OpenFlow DSL](/openflow-dsl/)
-- See automation workflows in [AI Generation](/ai-generation/)
+- Read [Quick Start](/quick-start/) for the fastest first-run workflow.
+- Read [Studio Overview](/studio-overview/) for the AI, code, import, and lint flows.
+- Read [Choose an Input Mode](/choose-input-mode/) if you are not sure where to start.
diff --git a/docs-site/src/content/docs/keyboard-shortcuts.md b/docs-site/src/content/docs/keyboard-shortcuts.md
index b4b373b..3958de9 100644
--- a/docs-site/src/content/docs/keyboard-shortcuts.md
+++ b/docs-site/src/content/docs/keyboard-shortcuts.md
@@ -1,6 +1,7 @@
 ---
 draft: false
 title: Keyboard Shortcuts
+description: Reference the current keyboard shortcuts for editing, navigation, and diagram authoring in OpenFlowKit.
 ---
 
 These are the current shortcut groups defined by the app.
@@ -38,45 +39,10 @@ These are the current shortcut groups defined by the app.
 
 | Action | macOS | Windows/Linux |
 | --- | --- | --- |
-| Select tool | `V` | `V` |
-| Hand tool | `H` | `H` |
-| Pan canvas | `Space + Drag` | `Space + Drag` |
-| Zoom | `Cmd + +/-` | `Ctrl + +/-` |
+| Open Command Center | `Cmd + K` | `Ctrl + K` |
 | Fit view | `Shift + 1` | `Shift + 1` |
-| Nudge node | `Arrow keys` | `Arrow keys` |
-
-## Help and launcher
-
-| Action | macOS | Windows/Linux |
-| --- | --- | --- |
-| Keyboard shortcuts | `?` | `?` |
-| Command Center | `Cmd + K` | `Ctrl + K` |
 
 ## Notes
 
-- The app also opens the shortcut modal with `Cmd/Ctrl + /`
-- Shortcuts are suppressed when you are actively typing in an input, textarea, or editable text field
-| :--- | :--- | :--- |
-| **Command Palette** | \`Cmd + K\` | \`Ctrl + K\` |
-| **Save** | \`Cmd + S\` | \`Ctrl + S\` |
-| **Undo** | \`Cmd + Z\` | \`Ctrl + Z\` |
-| **Redo** | \`Cmd + Shift + Z\` | \`Ctrl + Shift + Z\` |
-
-## Canvas Navigation
-
-| Action | MacOS | Windows/Linux |
-| :--- | :--- | :--- |
-| **Zoom In** | \`+\` | \`+\` |
-| **Zoom Out** | \`-\` | \`-\` |
-| **Fit View** | \`Shift + 1\` | \`Shift + 1\` |
-
-## Editing
-
-| Action | MacOS | Windows/Linux |
-| :--- | :--- | :--- |
-| **Duplicate Node** | \`Cmd + D\` or \`Alt + Drag\` | \`Ctrl + D\` or \`Alt + Drag\` |
-| **Delete Node** | \`Backspace\` | \`Backspace\` |
-| **Select All** | \`Cmd + A\` | \`Ctrl + A\` |
-| **Group Selection** | \`Cmd + G\` | \`Ctrl + G\` |
-
-> **Note:** Shortcuts are active when the canvas has focus.
+- Shortcut availability depends on editor focus and current mode.
+- Use the [Command Center](/command-center/) for many actions that do not need a dedicated shortcut.
diff --git a/docs-site/src/content/docs/local-first-diagramming.md b/docs-site/src/content/docs/local-first-diagramming.md
new file mode 100644
index 0000000..daae3ad
--- /dev/null
+++ b/docs-site/src/content/docs/local-first-diagramming.md
@@ -0,0 +1,55 @@
+---
+draft: false
+title: Local-First Diagramming
+description: Understand what local-first means in OpenFlowKit and how it affects privacy, sharing, and day-to-day diagram work.
+---
+
+Local-first means your diagram work starts in the browser, not on a required hosted backend. In OpenFlowKit, that changes how you think about privacy, portability, and failure modes.
+
+## What local-first means here
+
+In practical terms:
+
+- your diagram state lives in the browser by default
+- refreshes and browser restarts should restore your saved documents instead of resetting to a blank canvas
+- AI usage can follow a BYOK model instead of mandatory platform credits
+- collaboration can fall back to local-only behavior instead of blocking all work
+- export is explicit, so you decide when a diagram leaves the current device
+
+OpenFlowKit now treats the browser database as the durable source of truth for saved document state. The live editor is rebuilt from that local data after reload rather than assuming the in-memory canvas is still available.
+
+## Why it matters
+
+Local-first workflows are useful when:
+
+- you are working with internal architecture diagrams
+- you do not want to depend on account creation for first use
+- you need a browser-native tool that still works well as a solo editor
+- you want control over when artifacts become shared assets
+
+## What stays on the current device
+
+By default, OpenFlowKit keeps these things in browser-local storage on the current device:
+
+- saved diagrams and tabs
+- document-oriented chat history for Flowpilot sessions
+- persistent AI settings when you choose persistent storage
+- local workspace preferences
+
+Session-only secrets can still be kept for just the current browser session when you prefer that behavior.
+
+## What it does not mean
+
+Local-first does not mean isolated forever. OpenFlowKit still supports:
+
+- exports for images, JSON, text formats, and design-tool handoff
+- collaboration rooms and share links
+- embed flows for docs and GitHub-style usage
+
+It means those are explicit actions instead of prerequisites.
+
+## Recommended next reads
+
+- [Introduction](/introduction/)
+- [Collaboration & Sharing](/collaboration-sharing/)
+- [Choose an Export Format](/choose-export-format/)
diff --git a/docs-site/src/content/docs/mermaid-integration.md b/docs-site/src/content/docs/mermaid-integration.md
index fa3632e..e7f4781 100644
--- a/docs-site/src/content/docs/mermaid-integration.md
+++ b/docs-site/src/content/docs/mermaid-integration.md
@@ -1,72 +1,50 @@
 ---
 draft: false
 title: Mermaid Integration
+description: Import, edit, validate, and export Mermaid while keeping OpenFlowKit as the visual editing workspace.
 ---
 
-OpenFlowKit includes Mermaid import, editing, and export paths, but it should be treated as a compatibility workflow, not the editor's only source of truth.
+OpenFlowKit includes Mermaid import, editing, and export paths, but Mermaid should be treated as a compatibility workflow rather than the editor's only source of truth.
 
 ## What Mermaid support is for
 
 Use Mermaid support when:
 
 - you already have Mermaid diagrams in docs or repos
-- you want to keep diagrams close to Markdown workflows
-- you want to move between Mermaid and a visual editor
+- you want a Markdown-friendly text format
+- another system in your workflow expects Mermaid syntax
 
 ## Mermaid in Studio
 
-The Studio code rail has a dedicated **Mermaid** mode. From there you can:
+The Studio code rail has a dedicated Mermaid mode. From there you can:
 
 - view Mermaid generated from the current canvas
 - edit Mermaid directly
 - apply the parsed graph back into the editor
+- review diagnostics when parsing fails
 
-When parsing fails, the Studio panel surfaces validation feedback and diagnostics.
+This makes Mermaid useful as a bridge between documentation-centric workflows and a richer visual editor.
 
 ## Mermaid export
 
-The export menu can copy Mermaid text for the current graph to the clipboard.
+The export menu can copy Mermaid text for the current graph to the clipboard. That is especially useful when a diagram needs to live in Markdown or Git-based documentation after you finish editing it visually.
 
 ## Fidelity expectations
 
-Mermaid round-tripping is useful, but not every OpenFlowKit concept maps perfectly. Be careful with:
+Mermaid round-tripping is useful, but not every OpenFlowKit concept maps perfectly. Be especially careful with:
 
 - highly visual hand-tuned layouts
 - provider-specific architecture icon presentation
-- some family-specific semantics that are richer in the native graph model
+- family-specific semantics that are richer in the native graph model
 
 If exact recovery matters, export JSON alongside Mermaid.
 
-## Best workflow
+## Recommended pattern
 
-For teams already using Mermaid:
+Use Mermaid as the publishing or portability layer, not always the editing master. If you need both portability and fidelity, keep JSON or OpenFlow DSL as the authoritative version and regenerate Mermaid when needed.
 
-1. import or paste Mermaid
-2. refine visually in OpenFlowKit
-3. export Mermaid again if the downstream system still needs it
-4. keep JSON as the editable master backup
+## Related pages
 
-1.  Click the **"Import"** button in the toolbar.
-2.  Select **"Mermaid"**.
-3.  Paste your code snippet.
-
-### Supported Diagram Types
-Currently, FlowMind optimizes for:
-*   **Flowcharts** (`graph TD`, `graph LR`)
-*   **Sequence Diagrams** (Partial support via conversion)
-
-```mermaid
-graph TD
-    A[Start] --> B{Is it working?}
-    B -- Yes --> C[Great!]
-    B -- No --> D[Debug]
-```
-
-## Exporting to Mermaid
-
-You can also export any FlowMind diagram *back* to Mermaid syntax.
-This is perfect for embedding diagrams in GitHub `README.md` files or Notion documents.
-
-1.  Open the **Code Panel** (bottom panel).
-2.  Switch to the **"Mermaid"** tab.
-3.  Copy the generated code.
+- [Mermaid vs OpenFlow](/mermaid-vs-openflow/)
+- [OpenFlow DSL](/openflow-dsl/)
+- [Choose an Export Format](/choose-export-format/)
diff --git a/docs-site/src/content/docs/mermaid-vs-openflow.md b/docs-site/src/content/docs/mermaid-vs-openflow.md
index 575d93b..7a46483 100644
--- a/docs-site/src/content/docs/mermaid-vs-openflow.md
+++ b/docs-site/src/content/docs/mermaid-vs-openflow.md
@@ -1,6 +1,7 @@
 ---
 draft: false
 title: Mermaid vs OpenFlow
+description: Decide whether Mermaid or OpenFlow DSL is the better text representation for your OpenFlowKit workflow.
 ---
 
 Mermaid and OpenFlow DSL solve adjacent but different problems in OpenFlowKit.
@@ -18,16 +19,16 @@ Mermaid and OpenFlow DSL solve adjacent but different problems in OpenFlowKit.
 - you want fewer compatibility constraints during editing
 - you want a better target for OpenFlowKit-specific AI and Studio workflows
 
-## Practical difference
+## The real difference
 
-Mermaid is a broad ecosystem format.
+Mermaid is the better portability format.
 
-OpenFlow DSL is an editor-native format.
+OpenFlow DSL is the better editor-native format.
 
 That usually means:
 
-- Mermaid is better for portability
-- OpenFlow DSL is better for fidelity inside this product
+- Mermaid is better for publication and interoperability
+- OpenFlow DSL is better for fidelity inside the product
 
 ## Recommended team pattern
 
@@ -36,47 +37,10 @@ If you need both:
 - treat JSON or OpenFlow DSL as the editing master
 - publish Mermaid as a downstream representation when required
 
-This avoids losing detail every time a diagram moves between ecosystems.
+This avoids losing detail every time the diagram moves between ecosystems.
 
-**Mermaid.js:**
-- Renders SVGs based on predefined themes (default, dark, forest, neutral).
-- Customizing styles requires inline CSS classes, which can clutter your markdown.
+## Related pages
 
-**OpenFlowKit:**
-- Features a full **White-Label Design System**.
-- You can inject [Theming](/docs/en/theming) tokens dynamically (colors, corner radii, fonts).
-- Nodes automatically adopt glassmorphism, shadows, and modern UI treatments without writing a single line of CSS.
-
-## 2. Interaction and Editing
-
-**Mermaid.js:**
-- Strictly code-in, diagram-out. To move a node, you rewrite the code.
-- Layouts are handled automatically by Dagre, which is great but offers zero manual control if a line routes awkwardly.
-
-**OpenFlowKit:**
-- **Two-Way Sync**: Write code and watch the canvas update, *or* drag a node on the canvas and watch the code update automatically. 
-- You get full drag-and-drop capabilities, manual edge routing, and [Smart Layouts](/docs/en/smart-layout) via ELK.js.
-
-## 3. Export Options
-
-**Mermaid.js:**
-- Typically exports as SVG or PNG via a CLI or browser extension.
-
-**OpenFlowKit:**
-- Native [Exporting](/docs/en/exporting) to SVG, high-res PNG/JPG.
-- **Figma Editable**: OpenFlowKit can export diagrams directly to your clipboard in a format that pastes into Figma as native, editable vector layers and text objects.
-
-## 4. Artificial Intelligence
-
-While AI can write Mermaid syntax, iterating on it is difficult.
-
-**OpenFlowKit:**
-- Integrated [Flowpilot AI](/docs/en/ask-flowpilot) directly into the [Command Center](/docs/en/command-center).
-- You can prompt the AI, generate the canvas, and then manually adjust the final 10% visually instead of trying to perfectly craft a prompt to fix a misaligned node.
-- Supports **BYOK (Bring Your Own Key)** for 7 different AI providers.
-
-## Direct Compatibility
-
-We love Mermaid. That is why OpenFlowKit has a native [Mermaid Integration](/docs/en/mermaid-integration). You can paste any existing Mermaid flowchart or state diagram into OpenFlowKit, and it will instantly convert it into editable, styled React Flow nodes.
-
-Try converting your Mermaid diagrams today in the [Editor](/#/canvas).
+- [Mermaid Integration](/mermaid-integration/)
+- [OpenFlow DSL](/openflow-dsl/)
+- [Choose an Export Format](/choose-export-format/)
diff --git a/docs-site/src/content/docs/node-types.md b/docs-site/src/content/docs/node-types.md
index 4bd0d3e..b887d0d 100644
--- a/docs-site/src/content/docs/node-types.md
+++ b/docs-site/src/content/docs/node-types.md
@@ -1,9 +1,10 @@
 ---
 draft: false
 title: Node Types
+description: Understand the core node families available in OpenFlowKit and how they map to different diagram workflows.
 ---
 
-OpenFlowKit supports both generic and family-specific nodes. The actual node model in the app covers flow, architecture, mind map, journey, class, ER, annotation, grouping, and media use cases.
+OpenFlowKit supports both generic and family-specific nodes. The node model in the app covers flow, architecture, mind map, journey, class, ER, annotation, grouping, and media use cases.
 
 ## Core node families
 
@@ -17,131 +18,44 @@ These are the default building blocks for most workflows:
 - `end`
 - `custom`
 
-Typical properties include:
-
-- label and sublabel
-- icon
-- color preset or custom color
-- shape
-- typography
-- dimensions and rotation
+Use them when the diagram is primarily procedural and you do not need a richer family model.
 
 ### Mind map nodes
 
-`mindmap` nodes track extra structure such as:
+Mind map nodes carry extra structure such as:
 
 - depth
 - parent id
 - left/right side
 - branch style
 
-Keyboard helpers:
-
-- `Tab` adds a child
-- `Enter` adds a sibling
-
-### Journey nodes
-
-`journey` nodes include journey-specific metadata such as:
-
-- actor
-- section
-- task
-- score
-
-These are useful for service blueprints and UX journey maps.
-
-### Architecture nodes
-
-`architecture` and icon-backed `custom` nodes are designed for system diagrams. They can carry:
-
-- provider metadata
-- resource type
-- environment and trust domain fields
-- provider icon pack references
-- architecture boundary relationships
-
-### Structural and content nodes
-
-These support organization and annotation:
-
-- `annotation`
-- `section`
-- `group`
-- `swimlane`
-- `image`
+They are better than plain flow nodes when hierarchy and branch structure matter more than route semantics.
 
-Use them to explain or frame diagrams rather than only to model system entities.
+### Architecture and asset-backed nodes
 
-## Shapes
+Architecture-oriented diagrams can use provider-backed icon nodes and related visual grouping structures such as sections and boundaries.
 
-The node data model supports these shape variants:
+These are useful when the diagram should read like a system topology instead of a generic flowchart.
 
-- rectangle
-- rounded
-- capsule
-- diamond
-- hexagon
-- cylinder
-- ellipse
-- parallelogram
-- circle
+### Journey and experience nodes
 
-Not every family exposes every shape in the same way. General flow nodes are the most flexible.
+Journey-oriented nodes help when the diagram represents user or process stages instead of system topology. They are a better fit when actor, stage, and score-like information matter.
 
-## Wireframe surfaces
+### Media and wireframe nodes
 
-The asset browser can create browser and mobile wireframe nodes. These are useful when you need UI flow context inside the same canvas as process logic.
+OpenFlowKit also supports image nodes and browser/mobile wireframe-style nodes for product, UX, and annotated architecture workflows.
 
-## Provider-backed icon nodes
+## How to choose
 
-The assets panel can load icon catalogs for:
+Choose the node family that matches the semantics of the work, not just the shape you want on the canvas.
 
-- general icons
-- AWS
-- Azure
-- GCP
-- CNCF
+- Use flow nodes for generic process logic.
+- Use architecture nodes for system and infrastructure modeling.
+- Use mind map nodes for branching ideation.
+- Use journey nodes for experience mapping.
 
-These are inserted as icon-presented nodes rather than plain boxes, which makes them better suited for infrastructure maps.
-
-## Which node should you use?
-
-Use this rule of thumb:
-
-- choose **process/start/decision/end** for classic workflows
-- choose **mindmap** for branching idea trees
-- choose **journey** for actor and stage-based experiences
-- choose **architecture** or provider icons for cloud/system diagrams
-- choose **annotation**, **text**, and **section** for explanation and grouping
-
-## Related reading
+## Related pages
 
+- [Diagram Families](/diagram-families/)
 - [Properties Panel](/properties-panel/)
-- [AWS Architecture](/aws-architecture/)
-- [Payment Flow](/payment-flow/)
-*   **Best for**: Process steps, services, database tables, or general entities.
-*   **Features**: Resizable, editable label, support for icons.
-
-## 2. Text Node / Annotation
-
-A lightweight, borderless node used for adding comments or labels to the canvas without affecting the flow structure.
-*   **Best for**: Adding sticky notes, section headers, or explanatory text.
-*   **Usage**: Select "Text" from the toolbar or press \`T\`.
-
-## 3. Group Node
-
-Container nodes that visually group other nodes together. Moving a group moves all nodes inside it.
-*   **Best for**: Visualizing sub-systems, VPCs, or logical boundaries.
-*   **Usage**: Select nodes -> Right Click -> "Group Selection".
-
-## 4. Swimlane Node
-
-Vertical or horizontal lanes to organize processes by actor or department.
-*   **Best for**: Cross-functional flowcharts.
-
-## 5. Image Node
-
-Embed arbitrary images directly onto the canvas.
-*   **Best for**: Adding logos, screenshots, or reference diagrams.
-*   **Usage**: Drag and drop an image file directly onto the canvas.
+- [Templates & Starter Flows](/templates-assets/)
diff --git a/docs-site/src/content/docs/openflow-dsl.md b/docs-site/src/content/docs/openflow-dsl.md
index bac0532..e778254 100644
--- a/docs-site/src/content/docs/openflow-dsl.md
+++ b/docs-site/src/content/docs/openflow-dsl.md
@@ -1,6 +1,7 @@
 ---
 draft: false
 title: OpenFlow DSL
+description: Use OpenFlow DSL as the editor-native text representation for OpenFlowKit diagrams.
 ---
 
 OpenFlow DSL is the native text representation used by OpenFlowKit Studio. It is the best option when you want a code-first representation that stays close to the editor's own graph model.
@@ -16,6 +17,8 @@ Use OpenFlow DSL when you want:
 
 The Studio code panel can generate DSL from the current canvas and apply DSL back onto it.
 
+Use Mermaid instead when ecosystem compatibility matters more than editor-native fidelity. See [Mermaid vs OpenFlow](/mermaid-vs-openflow/).
+
 ## Basic document structure
 
 Start with a header:
@@ -58,221 +61,27 @@ signup -> verify
 verify -> success
 ```
 
-You can add labels and other edge-level metadata:
-
-```text
-verify -> success [label: "Verified"]
-verify -> retry [label: "Expired"]
-```
-
-## Typical node attributes
-
-The visual node model supports a broad set of properties. In practice, the most useful attributes to express in DSL are:
-
-- `label`
-- `subLabel`
-- `shape`
-- `color`
-- `icon`
-
-For advanced families, the graph model also carries metadata for mind maps, journey nodes, architecture nodes, class diagrams, and ER diagrams.
-
-## Example
-
-```text
-flow: "Payment Recovery"
-direction: LR
-
-node invoice [label: "Invoice Due", color: blue]
-node charge [label: "Attempt Charge", color: emerald]
-node decision [label: "Charge Successful?", shape: diamond, color: amber]
-node retry [label: "Retry Sequence", color: violet]
-node review [label: "Manual Review", color: slate]
-node success [label: "Subscription Active", shape: capsule, color: emerald]
-
-invoice -> charge
-charge -> decision
-decision -> success [label: "Yes"]
-decision -> retry [label: "Retry"]
-decision -> review [label: "Manual"]
-```
-
-## Editing workflow in Studio
-
-The Studio code panel does three things:
-
-1. generates current DSL from the canvas
-2. previews whether your draft is valid
-3. applies the parsed graph back to the editor
-
-Use **Reset** if the draft diverges too far from the current canvas.
-
-## When to choose OpenFlow DSL over Mermaid
-
-Prefer OpenFlow DSL when:
-
-- the diagram lives mainly inside OpenFlowKit
-- you want fewer Mermaid translation constraints
-- you want a format tailored to the editor's own graph model
-
-Prefer Mermaid when:
-
-- the diagram must also live in Markdown-heavy environments
-- you already have Mermaid sources
-- external tooling expects Mermaid syntax
-
-## Recommended AI instruction
-
-If you want another agent to write OpenFlow DSL for this app, give it these constraints:
-
-```text
-Generate OpenFlow DSL for OpenFlowKit.
-Use explicit node ids.
-Create a clear flow title and direction.
-Prefer process, decision, start, end, and custom nodes unless a more specific family is required.
-Label all meaningful branch edges.
-Keep names concise and production-friendly.
-```
-
-Use ONLY these types:
-
-start
-end
-process
-decision
-system
-note
-section
-container
-
-Guidelines:
+You can also attach labels or other edge-level metadata when the diagram needs explicit branch meaning.
 
-start      → beginning of flow
-end        → termination states
-process    → actions or steps
-decision   → branching logic
-system     → external system/service/database
-note       → annotations
-section    → major grouped area
-container  → generic grouping
+## Why teams use it
 
-----------------------------------------
+OpenFlow DSL is useful when:
 
-4. NODE ATTRIBUTES (Optional)
+- OpenFlowKit is the primary editing environment
+- you want a reviewable text representation without committing to Mermaid’s constraints
+- you want a format that maps more directly to editor-native concepts
+- you want AI to target a structure that is closer to the actual canvas model
 
-Attributes use JSON-like syntax:
+## Recommended workflow
 
-{ color: "red", icon: "database", style: "dashed" }
+Use DSL when you want to control the structure, then switch back to the canvas for final visual tuning. It is especially useful for:
 
-Rules:
-- Only add attributes if meaningful.
-- Keep styling minimal.
-- Do not invent unsupported properties.
+- architecture drafts
+- system workflows
+- iterative AI-assisted editing where text inspection matters
 
-----------------------------------------
+## Related pages
 
-5. EDGES (CONNECTIONS)
-
-Basic syntax:
-id1 -> id2
-
-Edge types:
-->   solid
--->  curved
-..>  dashed
-==>  thick
-
-Labeled edges:
-id1 ->|Yes| id2
-
-Edge with attributes:
-id1 -> id2 { label: "Async", style: "dashed" }
-
-Rules:
-- Always connect using IDs, not labels.
-- Decision nodes MUST use labeled edges.
-- Every branch from a decision must be explicit.
-- No floating nodes.
-
-----------------------------------------
-
-6. GROUPS
-
-Use grouping when logical clustering exists.
-
-Syntax:
-
-group "Group Name" {
-    node declarations
-    internal connections
-}
-
-Rules:
-- Groups should wrap related nodes only.
-- Connections across groups should be declared outside the group block.
-
-----------------------------------------
-
-7. COMMENTS
-
-Use # for comments sparingly.
-Do not over-comment.
-
-----------------------------------------
-
-8. OUTPUT RULES (STRICT)
-
-You MUST:
-
-- Output ONLY valid FlowMind DSL
-- Do NOT explain
-- Do NOT use markdown formatting
-- Do NOT wrap in code blocks
-- Do NOT add commentary
-- Do NOT describe what you are doing
-- Do NOT output anything except the DSL
-
-If user description is vague:
-- Make reasonable assumptions
-- Choose logical structure
-- Keep flow clean and readable
-
-========================================
-LOGIC CONVERSION STRATEGY
-========================================
-
-When converting user input:
-
-1. Identify:
-   - Start event
-   - End states
-   - Actions
-   - Decisions
-   - External systems
-   - Logical clusters
-
-2. Convert:
-   - Events → start / end
-   - Actions → process
-   - Branching → decision
-   - Databases/APIs → system
-   - Parallel logic → separate branches
-   - Error paths → explicit end nodes
-
-3. Ensure:
-   - Every path leads to an end
-   - No orphan nodes
-   - Clean logical readability
-
-========================================
-USER REQUEST
-========================================
-
-Convert the following workflow description into FlowMind DSL V2:
-
-{{USER_WORKFLOW_DESCRIPTION}}
-
-Generate the DSL now.
-```
-
----
+- [Mermaid vs OpenFlow](/mermaid-vs-openflow/)
+- [Studio Overview](/studio-overview/)
+- [Choose an Input Mode](/choose-input-mode/)
diff --git a/docs-site/src/content/docs/payment-flow.md b/docs-site/src/content/docs/payment-flow.md
index 0ab9445..6fcbb5a 100644
--- a/docs-site/src/content/docs/payment-flow.md
+++ b/docs-site/src/content/docs/payment-flow.md
@@ -1,10 +1,13 @@
 ---
 draft: false
 title: Payment Flow Visualization
+description: Model subscription, checkout, retry, and exception-heavy payment systems in OpenFlowKit.
 ---
 
 Payment systems are one of the best use cases for OpenFlowKit because they mix clear business stages with asynchronous branches, retries, and exception handling.
 
+They are also easy to get wrong if the diagram only shows the happy path. OpenFlowKit is a good fit because it lets you start rough, then keep adding operational detail.
+
 ## What a useful payment diagram should include
 
 Do not stop at the happy path. Most payment diagrams need:
@@ -17,6 +20,13 @@ Do not stop at the happy path. Most payment diagrams need:
 - customer notification path
 - final account state
 
+Depending on the workflow, you may also need:
+
+- fraud or risk review
+- webhook handling
+- customer notifications
+- ledger or billing-state updates
+
 ## Suggested node pattern
 
 For a typical subscription or checkout diagram:
@@ -26,6 +36,15 @@ For a typical subscription or checkout diagram:
 - `decision` for gateway outcomes
 - `end` for terminal account states
 
+## Strong starting options
+
+You can begin from:
+
+- a blank flowchart canvas
+- a payment or SaaS-oriented template
+- an AI prompt in Flowpilot
+- OpenFlow DSL if the flow should be reviewed as text
+
 ## Example prompt
 
 ```text
@@ -35,6 +54,14 @@ smart retries, request updated card, manual fraud review,
 customer notification, subscription active, and account downgrade.
 ```
 
+## Recommended workflow
+
+1. generate or sketch the happy path
+2. add all failure and retry branches
+3. label edges so business outcomes are explicit
+4. use layout to normalize spacing
+5. export a visual format for stakeholders and JSON for editable retention
+
 ## Why this works well in OpenFlowKit
 
 - branch labeling is easy on edges
@@ -53,7 +80,7 @@ After drafting:
 
 - **Shareability**: Everyone from the PM to the backend engineer needs to see the same flow.
 - **Clarity**: Mapping out happy paths, failures, and webhook retries visually is much easier than reading through Stripe API documentation.
-- **Speed**: Use the [Command Center](/docs/en/command-center) and AI to generate the boilerplate flow in seconds.
+- **Speed**: Use the [Command Center](/command-center/) and AI to generate the boilerplate flow in seconds.
 
 ## Example: Stripe Checkout Flow
 
@@ -93,8 +120,8 @@ sequenceDiagram
 
 ## AI Prompt Example
 
-To generate a similar flow using [Ask Flowpilot](/docs/en/ask-flowpilot):
+To generate a similar flow using [Ask Flowpilot](/ask-flowpilot/):
 
 > `"Generate a flowchart showing a subscription payment flow using Braintree. Include the client requesting a client token, the server generating it, the user submitting a nonce, and the final server-side transaction creation. Show both success and failure branches."`
 
-Need to present this to your team? Try the [Playback History](/docs/en/playback-history) feature to walk through the payment sequence step-by-step.
+Need to present this to your team? Try the [Playback History](/playback-history/) feature to walk through the payment sequence step-by-step.
diff --git a/docs-site/src/content/docs/playback-history.md b/docs-site/src/content/docs/playback-history.md
index 99654ac..97fd532 100644
--- a/docs-site/src/content/docs/playback-history.md
+++ b/docs-site/src/content/docs/playback-history.md
@@ -1,29 +1,25 @@
 ---
 draft: false
 title: Playback & History
+description: Use undo, snapshots, and playback-related state to recover work and review diagram evolution.
 ---
 
 OpenFlowKit has two related but distinct recovery systems:
 
 - regular undo/redo history
-- snapshot-based history and playback state stored on tabs/documents
+- snapshot-based history and playback state stored on tabs or documents
 
 ## Undo and redo
 
-The editor keeps standard editing history for canvas operations. Use:
+Use:
 
 - `Cmd/Ctrl + Z` to undo
 - `Cmd/Ctrl + Shift + Z` to redo
 
-This is your fastest local recovery path during active editing.
+This is the fastest recovery path during active editing.
 
 ## Snapshots
 
-The history panel exposes:
-
-- manual snapshots you name yourself
-- automatic snapshots queued while you work
-
 Use snapshots when you are about to:
 
 - run a major AI rewrite
@@ -31,39 +27,23 @@ Use snapshots when you are about to:
 - do a broad text apply from Studio
 - restructure a large architecture map
 
-## Playback model
-
-The data model already supports playback scenes, timeline steps, selected scenes, and default step durations.
-
-In practice this means OpenFlowKit is structured for diagram playback authoring, even though some playback-studio surfaces remain behind rollout flags.
+Snapshots are the safest checkpoint tool before large AI or import-driven edits. They are also the baseline you use for compare workflows later.
 
-## Animated export status
-
-Animated export code exists for:
-
-- GIF
-- browser-recorded video
-
-However, these options are only shown when `animatedExportV1` is enabled. Do not assume every deployment exposes them.
+## Playback model
 
-## Recommended workflow
+The data model supports playback scenes, steps, and timed sequences. Animated export options appear in the export menu for playback-oriented outputs such as video and GIF.
 
-For stable edits:
+## Practical advice
 
-1. save a manual snapshot
-2. perform your risky change
-3. compare visually
-4. restore if needed
+Treat history and snapshots differently:
 
-This is safer than relying only on a long undo chain.
+- use undo/redo for quick corrections
+- use snapshots for milestones
 
-### Version Checkpoints
-Every time you perform a significant action (adding a node, changing a color, auto-layout), a "snapshot" is saved.
-*   **Undo/Redo**: Uses this same system to jump back and forth (`Cmd+Z`).
+If the next operation could meaningfully rewrite the graph, create a snapshot first.
 
-## Playback Mode
+## Related pages
 
-Press the **Play** button in the History panel to watch a "movie" of your diagram being built from start to finish.
-*   **Speed Control**: Adjust playback speed (1x, 2x, 4x).
-*   **Scrubbing**: Drag the slider to specific points in time.
-*   **Restore**: Found an older version you like better? Click "Restore" to revert the canvas to that state perfectly.
+- [Diagram Diff & Compare](/diagram-diff/)
+- [Exporting](/exporting/)
+- [AI Generation](/ai-generation/)
diff --git a/docs-site/src/content/docs/prompting-agents.md b/docs-site/src/content/docs/prompting-agents.md
index b816d76..76c7c63 100644
--- a/docs-site/src/content/docs/prompting-agents.md
+++ b/docs-site/src/content/docs/prompting-agents.md
@@ -1,6 +1,7 @@
 ---
 draft: false
 title: Prompting AI Agents
+description: Write better prompts for coding assistants and AI systems when you want diagram output for OpenFlowKit.
 ---
 
 If you use Cursor, Copilot, ChatGPT, Claude, or any other coding agent to help author diagrams, the prompt quality matters more than the model brand.
diff --git a/docs-site/src/content/docs/properties-panel.md b/docs-site/src/content/docs/properties-panel.md
index 6faf5d3..0f21df1 100644
--- a/docs-site/src/content/docs/properties-panel.md
+++ b/docs-site/src/content/docs/properties-panel.md
@@ -1,10 +1,20 @@
 ---
 draft: false
 title: Properties Panel
+description: Use the right-side inspector to make exact node, edge, bulk-edit, and Studio-related adjustments in OpenFlowKit.
 ---
 
 The Properties panel is the right-side inspector that appears when you select a node or edge. It is the main place for exact edits after rough structure is already on the canvas.
 
+## When to use it
+
+Use the Properties panel when:
+
+- the rough structure is correct but the details are not
+- you need exact labels, colors, shapes, or typography
+- you want edge labels and routing adjustments
+- a diagram family exposes settings that are not convenient to edit directly on the graph
+
 ## What opens in the right rail
 
 The rail changes based on selection state:
@@ -12,7 +22,7 @@ The rail changes based on selection state:
 - one node selected: node inspector
 - multiple nodes selected: bulk edit
 - one edge selected: edge inspector
-- Studio mode active: AI, code, or playback rail instead of properties
+- Studio mode active: AI, code, lint, or other Studio tabs instead of properties
 
 ## Node editing
 
@@ -38,52 +48,8 @@ When an edge is selected, the panel exposes:
 
 - **Label**
 - **Route**
-- **Color**
-- **Appearance**
-- **Condition**
-
-If both ends are architecture nodes, you also get an **Architecture** section for connection semantics such as protocol and direction.
-
-## Bulk edit mode
-
-When you multi-select nodes, the panel switches to bulk mode. Use this for operations like:
-
-- applying the same color to a group
-- changing shared typography
-- normalizing labels with prefixes or suffixes
-
-This is faster than editing nodes one by one after template insertion or AI generation.
-
-## Practical workflow
-
-A good editing pattern is:
-
-1. create structure on canvas
-2. select key nodes and assign the right family or icon style
-3. use bulk edit for visual consistency
-4. finish with edge labels and route cleanup
-
-## When not to use the panel
-
-Do not force everything through the inspector.
-
-- For large structural changes, use auto layout
-- For mass insertion, use templates or assets
-- For text-first refactors, use Studio with OpenFlow DSL or Mermaid
-
-### Visual Styling
-Make your diagrams pop with custom styles:
-*   **Colors**: Choose from a curated palette of semantic colors (Red for danger, Green for success, etc.).
-*   **Icons**: Add an icon to any node to make it instantly recognizable. We support the full Lucide React icon library.
-*   **Stroke Style**: Toggle between `Solid` and `Dashed` borders (great for representing tentative or future states).
-
-### Layout & Sizing
-*   **Width/Height**: Manually set dimensions for pixel-perfect alignment.
-*   **Position**: View and edit exact X/Y coordinates.
-
-## Bulk Editing
+- appearance-related settings where supported
 
-> [!TIP]
-> You can select multiple nodes (`Shift + Click`) to edit them all at once!
+## Bulk edit
 
-When multiple nodes are selected, the Properties Panel will apply changes (like color or icon) to **all** selected nodes.
+When multiple nodes are selected, the right rail switches to bulk edit so you can update common styling and shared properties together.
diff --git a/docs-site/src/content/docs/quick-start.md b/docs-site/src/content/docs/quick-start.md
index ea0af52..caeedc1 100644
--- a/docs-site/src/content/docs/quick-start.md
+++ b/docs-site/src/content/docs/quick-start.md
@@ -1,91 +1,75 @@
 ---
 draft: false
 title: Quick Start
+description: Create your first OpenFlowKit diagram from builder templates, imports, AI, code, or the canvas.
 ---
 
-This walkthrough is the fastest reliable way to get productive in the current app.
+This is the fastest reliable way to get productive if you are building software, documenting systems, or preparing technical diagrams for docs and reviews.
 
-## 1. Open or create a flow
+## 1. Start from the home screen
 
-From the home screen you can:
+The first screen is designed to get you to a useful draft in under a couple of minutes. From there you can:
 
-- create a new flow
+- create a blank flow
 - open an existing browser-stored flow
 - duplicate a saved flow
 - import a JSON diagram document
+- jump directly into templates or Flowpilot
 
-Each flow opens in its own tab inside the editor.
+Each document opens in its own editor tab.
 
-## 2. Pick a starting point
+## 2. Pick the strongest input you already have
 
-You have five realistic entry paths:
+OpenFlowKit works best when you start from the most truthful source available, then refine visually.
 
-### Blank canvas
+### Template-first
 
-Use this when you already know the structure and want to sketch directly.
+Use **Browse Templates** when you need a strong developer-oriented starting structure fast. The starter set includes release flows, incident runbooks, cloud diagrams, sequence flows, C4 context, and network-edge layouts.
 
-### Template
+### Import or code-first
 
-Open the Command Center with `Cmd/Ctrl + K`, then choose **Start from Template**. Templates cover flowcharts, cloud diagrams, mind maps, journeys, and wireframes.
+Use import or the Studio code flows when you already have a technical source artifact:
 
-### Assets
+- Mermaid or OpenFlow DSL for editable diagram-as-code
+- SQL or OpenAPI for structured system drafts
+- Terraform or Kubernetes text for deterministic infra parsing
+- JSON/OpenFlow when you are restoring a saved graph exactly
 
-Open **Assets** from the Command Center to add notes, text, sections, wireframes, images, or provider-backed icons.
+### Prompt-to-diagram
 
-### AI
-
-Switch the right rail to Studio and open the **AI** tab. Enter a prompt such as:
+Switch the right rail to Studio and open the **Flowpilot** tab. Enter a prompt such as:
 
 ```text
 Create a SaaS onboarding workflow with signup, email verification,
-workspace setup, billing check, and success/failure branches.
+team invite, workspace creation, billing setup, and first success milestone.
 ```
 
-### Code
-
-Open Studio and switch to **OpenFlow DSL** or **Mermaid** if you prefer to start from text.
-
-## 3. Edit on the canvas
-
-Once you have content:
-
-- drag nodes to reposition them
-- click a node or edge to open the Properties panel
-- drag from a handle to create a connection
-- use `Shift + Click` or `Shift + Drag` for multi-select
-- use `Cmd/Ctrl + D` to duplicate
-- use `Delete` or `Backspace` to remove the current selection
-
-## 4. Clean up the structure
+Use this when the shape is still fuzzy and you want a first draft quickly. For technical work, prompt generation is usually strongest after you already know the systems involved.
 
-For fast organization:
+If AI is not configured yet, use the **Add key** action to open the shared AI settings modal, choose your provider, and decide whether the key should persist on this device or only for the current session.
 
-1. Open `Cmd/Ctrl + K`
-2. Choose **Auto Layout**
-3. Pick direction, algorithm, and spacing
+### Blank canvas and assets
 
-The app uses ELK-based layout strategies and passes the active diagram type into layout decisions where relevant.
+Use blank canvas when the structure is already in your head and visual iteration is faster than import. Open **Assets** from the Command Center to add sections, notes, wireframes, provider icons, and reusable building blocks.
 
-## 5. Save a recovery point
+## 3. Refine the diagram visually
 
-Open the history panel and create a manual snapshot before major edits. OpenFlowKit also keeps automatic snapshots while you work.
+Once something is on the canvas:
 
-## 6. Export or share
+- move nodes into rough position
+- use the [Properties Panel](/properties-panel/) for exact edits and architecture metadata
+- run [Smart Layout](/smart-layout/) when the structure is right but spacing is rough
+- use the [Command Center](/command-center/) to search, switch workflows, or insert more assets
 
-Use the top-right export menu for:
+## 4. Save recovery points
 
-- PNG
-- JPG
-- JSON
-- OpenFlow DSL
-- Mermaid
-- PlantUML
-- Figma payload copy
+Before a major AI rewrite or import refresh, review the snapshot/history tooling so you can recover quickly if the new result is worse. See [Playback & History](/playback-history/).
 
-Use the Share control if you want a lightweight collaboration room link.
+## 5. Share or export the result
 
-## Recommended next steps
+Use the export menu when you are ready to move the diagram into docs, design tools, code review threads, or launch assets.
 
-- Read [Canvas Basics](/canvas-basics/) for navigation and selection details
-- Read [Properties Panel](/properties-panel/) for editing controls
-- Read [AI Generation](/ai-generation/) if you plan to use FlowPilot or BYOK models
+- See [Choose an Export Format](/choose-export-format/)
+- See [Exporting](/exporting/)
+- See [Collaboration & Sharing](/collaboration-sharing/)
+- Use viewer links and embed snippets when you want the diagram to stay live instead of pasting a screenshot
diff --git a/docs-site/src/content/docs/roadmap.md b/docs-site/src/content/docs/roadmap.md
index e5820a7..2a60199 100644
--- a/docs-site/src/content/docs/roadmap.md
+++ b/docs-site/src/content/docs/roadmap.md
@@ -1,10 +1,17 @@
 ---
 draft: false
 title: Roadmap
+description: How to read product direction without confusing roadmap ideas for currently documented functionality.
 ---
 
-Roadmap details are being refreshed.
+This docs site focuses on current shipped behavior plus default-enabled product surfaces that are already part of the active experience.
 
-## Coming Soon
+## What this page is for
 
-This page will return with an updated roadmap once the current product direction is finalized.
+Use this page as a policy note, not as a promise list.
+
+- Docs pages describe current product behavior.
+- Strategy and roadmap materials may describe future direction separately.
+- If a capability is planned but not currently available in the product path, it should not be documented here as if it already ships.
+
+For broader direction, refer to the project strategy materials in the repository rather than treating the docs site as a roadmap announcement channel.
diff --git a/docs-site/src/content/docs/smart-layout.md b/docs-site/src/content/docs/smart-layout.md
index 10424c3..968a831 100644
--- a/docs-site/src/content/docs/smart-layout.md
+++ b/docs-site/src/content/docs/smart-layout.md
@@ -1,6 +1,7 @@
 ---
 draft: false
 title: Smart Layout
+description: Use ELK-based layout to turn rough graphs into cleaner, more readable diagrams in OpenFlowKit.
 ---
 
 OpenFlowKit uses ELK-based layout strategies to turn rough graphs into readable diagrams quickly.
@@ -36,7 +37,7 @@ Auto layout is especially effective for:
 - state-like branching diagrams
 - AI-generated drafts
 
-It is less magical for intentionally hand-composed slides or dense annotated canvases where visual storytelling matters more than graph regularity.
+It is less effective for intentionally hand-composed slides or dense annotated canvases where visual storytelling matters more than graph regularity.
 
 ## Practical strategy
 
@@ -56,17 +57,10 @@ OpenFlow DSL and Mermaid edits are especially effective when combined with layou
 - make structural changes in text
 - apply them
 - run auto layout
-- then finish visual polish in Properties
+- finish visual polish in the properties panel
 
-### Usage
-1.  Click the **Layout** button in the Command Center (or top toolbar).
-2.  The engine calculates the optimal position for every node and edge.
-3.  The diagram animates smoothly to its new structure.
+## Related pages
 
-### Features
-*   **Hierarchical Layering**: Perfect for flowcharts and organizational trees.
-*   **Collision Detection**: Ensures nodes never overlap.
-*   **Edge Routing**: Minimizes line crossings for cleaner readability.
-
-> [!TIP]
-> Use Smart Layout after importing a raw Mermaid text or generating a large flow with AI to instantly tidy up the result.
+- [Canvas Basics](/canvas-basics/)
+- [OpenFlow DSL](/openflow-dsl/)
+- [Mermaid Integration](/mermaid-integration/)
diff --git a/docs-site/src/content/docs/studio-overview.md b/docs-site/src/content/docs/studio-overview.md
new file mode 100644
index 0000000..361c77d
--- /dev/null
+++ b/docs-site/src/content/docs/studio-overview.md
@@ -0,0 +1,101 @@
+---
+draft: false
+title: Studio Overview
+description: Understand the OpenFlowKit Studio rail for AI, code, imports, infrastructure sync, and architecture linting.
+---
+
+Studio is the right-side workspace for generation, code-backed editing, imports, infrastructure parsing, and rule-driven validation. Use it when the canvas alone is not the best tool for the job.
+
+Studio matters because OpenFlowKit is not only a drag-and-drop editor. The product is built around moving between visual editing and structured inputs. Studio is where those structured workflows live.
+
+## Studio tabs in the current product path
+
+| Tab | Purpose |
+| --- | --- |
+| **Flowpilot** | AI-assisted generation, revision, and guided import flows |
+| **Code** | OpenFlow DSL and Mermaid editing against the current canvas |
+| **Infra** | Infrastructure Sync for supported infra file inputs |
+| **Lint** | Architecture rules and live violation feedback |
+
+## When to open Studio
+
+Open Studio when you want to:
+
+- draft a diagram from a prompt
+- paste or edit OpenFlow DSL or Mermaid
+- import SQL, OpenAPI, Terraform, or Kubernetes-oriented inputs
+- parse infra files without AI
+- define architecture constraints and review violations
+
+If you are already happy with the diagram structure and only need visual cleanup, stay on the canvas and use the [Properties Panel](/properties-panel/) instead.
+
+## Flowpilot tab
+
+Flowpilot is the AI-first area of Studio. Use it when you want:
+
+- a first draft from plain language
+- a different structural take on an existing concept
+- code-to-architecture generation
+- structured imports that benefit from model interpretation
+
+Good Flowpilot sessions are specific. Name the systems, actors, branches, constraints, and intended audience. If you want output that is easy to refine later, ask for explicit structure instead of purely aesthetic phrasing.
+
+## Code tab
+
+The Code tab is where you switch from visual editing to text representations.
+
+Use it when:
+
+- you want to review or edit [OpenFlow DSL](/openflow-dsl/)
+- you already have Mermaid and want to apply it to the canvas
+- you want to compare an editor-native representation with a portable one
+
+This tab is best when you want repeatability and precision. It is also the right choice when AI is unnecessary and the diagram is easier to reason about as code.
+
+## Infra tab
+
+The Infra tab exists for deterministic infrastructure parsing. It is the best option when you already have:
+
+- Terraform state
+- Kubernetes YAML
+- Docker Compose YAML
+- other supported infra-oriented inputs
+
+Use this tab when you want a trustworthy structural import instead of a model-generated interpretation. The result still comes back as a regular editable OpenFlowKit diagram.
+
+## Lint tab
+
+The Lint tab turns the diagram into something closer to a governed system model. You can define JSON rules and review violations as errors, warnings, or informational findings.
+
+This is useful when a diagram is doing real architecture work instead of just presentation work. It helps answer questions like:
+
+- should this service be allowed to talk to that datastore?
+- did an imported architecture diagram violate an agreed boundary?
+- did a large refactor accidentally break a documented rule?
+
+## How Studio fits into the editor
+
+Studio complements, rather than replaces, the canvas:
+
+- use the canvas for spatial editing
+- use Studio for generation, import, code, and rule workflows
+- switch back to the [Properties Panel](/properties-panel/) when a generated result needs exact tuning
+- use the [Command Center](/command-center/) when you want to jump between workflows quickly
+
+## Recommended workflow
+
+For most serious diagrams, a good sequence is:
+
+1. start with AI, code, template, or import
+2. inspect the result on the canvas
+3. make exact changes in the inspector
+4. save a snapshot before another major Studio operation
+5. export or share once the structure is stable
+
+## Related pages
+
+- [AI Generation](/ai-generation/)
+- [OpenFlow DSL](/openflow-dsl/)
+- [Infrastructure Sync](/infra-sync/)
+- [Architecture Linting](/architecture-lint/)
+- [Choose an Input Mode](/choose-input-mode/)
diff --git a/docs-site/src/content/docs/templates-assets.md b/docs-site/src/content/docs/templates-assets.md
new file mode 100644
index 0000000..dd1494f
--- /dev/null
+++ b/docs-site/src/content/docs/templates-assets.md
@@ -0,0 +1,58 @@
+---
+draft: false
+title: Templates & Starter Flows
+description: Start diagrams faster with developer-oriented templates, architecture assets, and reusable starter packs.
+---
+
+Templates and assets help you skip the empty-canvas problem. In OpenFlowKit they are tuned for developer and builder workflows first: architecture communication, sequence flows, cloud systems, network diagrams, and technical documentation.
+
+## Template starter paths
+
+The template library includes starter graphs for common builder workflows across flowcharts, architecture, cloud diagrams, sequence diagrams, mind maps, journeys, and wireframes.
+
+High-value starter examples include:
+
+- release-train and delivery flows
+- incident escalation runbooks
+- backend request handoff sequence diagrams
+- AWS event-driven architecture starters
+- C4 system context diagrams
+- network-edge and perimeter layouts
+
+Use templates when the structure is more important than the exact wording at the start. The goal is to get you to a diagram worth editing in minutes, not to lock you into a canned output.
+
+## Assets and provider libraries
+
+The assets flow covers:
+
+- generic building blocks such as sections, text, and notes
+- images and wireframe-style surfaces
+- provider-backed architecture icons
+- C4 and network-aware architecture nodes
+
+Assets are better than templates when you already know the overall structure and just need the right pieces to finish it.
+
+## When to use templates vs assets
+
+- Use templates when you want a starting graph with the layout already implied.
+- Use assets when you want to insert individual nodes into an existing diagram.
+- Use provider-backed asset packs when the diagram needs cloud icon fidelity.
+- Use design systems when the problem is styling consistency rather than structure.
+
+## Recommended launch-ready starter set
+
+If you are evaluating the product quickly, start with these first:
+
+1. `CI/CD Release Train`
+2. `API Request Handoff`
+3. `AWS Event-Driven API`
+4. `C4 System Context`
+5. `Network Edge Security`
+
+That set shows the best mix of developer-builder workflows, visual editing, and export/share value.
+
+## Related pages
+
+- [Command Center](/command-center/)
+- [Design Systems & Branding](/design-systems-branding/)
+- [AWS Architecture](/aws-architecture/)
diff --git a/docs-site/src/content/docs/theming.md b/docs-site/src/content/docs/theming.md
new file mode 100644
index 0000000..bb73a63
--- /dev/null
+++ b/docs-site/src/content/docs/theming.md
@@ -0,0 +1,46 @@
+---
+draft: false
+title: Theming
+description: Use design systems in OpenFlowKit to keep diagram styling consistent without manually restyling every canvas.
+---
+
+OpenFlowKit handles theming through reusable design systems rather than ad hoc per-diagram styling.
+
+## What theming means in OpenFlowKit
+
+Theming is not a separate rendering mode. It is the design-system layer that controls how diagrams feel across sessions and teams.
+
+Use it when you want to:
+
+- keep multiple diagrams visually consistent
+- create branded variants for different audiences
+- avoid hand-tuning colors and styling on every new flow
+- move styling definitions between environments
+
+## Recommended workflow
+
+The practical workflow is:
+
+1. Start from a stable default design system.
+2. Duplicate it when you need a branded or audience-specific variant.
+3. Apply the active design system while editing instead of restyling each diagram manually.
+4. Export theme JSON when the styling needs to travel outside the current browser session.
+
+## Where to manage it
+
+Open the Command Center and use the design-system tools to:
+
+- switch the active design system
+- duplicate or edit existing themes
+- import a theme from JSON
+- export the active theme
+
+## Keep the system small
+
+Too many themes usually create drift instead of flexibility. In most cases, one default system and a small number of variants is the maintainable path.
+
+## Related pages
+
+- [Design Systems & Branding](/design-systems-branding/)
+- [Command Center](/command-center/)
+- [Figma Design Import](/figma-design-import/)
diff --git a/docs-site/src/content/docs/tr/ai-generation.md b/docs-site/src/content/docs/tr/ai-generation.md
index ce5fa1d..64871ff 100644
--- a/docs-site/src/content/docs/tr/ai-generation.md
+++ b/docs-site/src/content/docs/tr/ai-generation.md
@@ -1,46 +1,80 @@
 ---
 draft: false
 title: AI Generation
+description: Flowpilot, BYOK sağlayıcılar, koddan mimari üretimi ve yapılandırılmış içe aktarma ile diyagram üretin ve geliştirin.
 ---
 
+OpenFlowKit, Studio alanı üzerinden yapay zeka destekli diyagram üretimi sunar. Flowpilot özellikle ilk taslak, yapısal revizyon ve kod tabanlı mimari görünümü üretmek için güçlüdür.
 
+## Üründe AI nerede yer alır?
 
-FlowMind, doğal dili anlayarak yapısal diyagramlara dönüştürmek için Google'ın **Gemini 2.0 Flash** modelinden yararlanır.
+AI akışları Studio içindeki **Flowpilot** alanında ve Komut Merkezi üzerinden açılan **Open Flowpilot** eyleminde bulunur.
 
-## Nasıl Çalışır?
+| Mod | Ne yapar |
+| --- | --- |
+| **Flowpilot** | sohbet tabanlı üretim ve revizyon |
+| **From Code** | kaynak koddan mimari diyagram taslağı |
+| **Import** | SQL, Terraform, K8s veya OpenAPI girdilerinden taslak |
 
-1.  **Niyet Analizi**: Yapay zeka, isteminizi analiz ederek *hedefi* (örn. "Giriş Akışı") ve *aktörleri* (Kullanıcı, Sunucu, Veritabanı) anlar.
-2.  **Yapısal Üretim**: Düğümleri ve bağlantıları temsil eden geçerli bir FlowMind DSL JSON nesnesi oluşturur.
-3.  **Düzen Optimizasyonu**: Motor, oluşturulan grafiğin okunabilir olmasını sağlamak için akıllı düzen algoritmaları uygular.
+Tipik üretim akışı:
 
-## İstemler İçin En İyi Uygulamalar
+1. istem ve varsa görsel alınır
+2. yapılandırılmış sağlayıcıya gönderilir
+3. yapısal graf temsili geri alınır
+4. düğüm ve kenarlar oluşturulur
+5. düzen uygulanır
+6. mevcut graf değiştirilir veya güncellenir
 
-En iyi sonuçları elde etmek için **adımlar** ve **çıktı** hakkında spesifik olun.
+## Sağlayıcı modeli
 
-### ❌ Çok Belirsiz
-> "Bir sistem diyagramı yap."
+Uygulama birden çok BYOK sağlayıcıyı destekler:
 
-### ✅ İyi
-> "Bir e-ticaret platformu için üst düzey sistem mimarisi oluştur. Web Uygulaması, API Ağ Geçidi, Kullanıcı Servisi, Ürün Servisi ve ortak bir PostgreSQL veritabanı içersin."
+- Gemini
+- OpenAI
+- Claude
+- Groq
+- NVIDIA
+- Cerebras
+- Mistral
+- OpenRouter
+- özel OpenAI-uyumlu uç nokta
 
-### ✅ Daha İyi (Süreç Akışı)
-> "Kullanıcı şifre sıfırlama süreci için bir akış diyagramı çiz. 'Kullanıcı şifremi unuttum'a tıklar' ile başla, e-postanın var olup olmadığını kontrol et. Evet ise benzersiz token gönder. Hayır ise hata göster. 'Kullanıcı yeni şifresini girer' ile bitir."
+## AI ne zaman doğru araçtır?
 
-## Yapay Zeka Sonuçlarını Düzenleme
+Şu durumlarda kullanın:
 
-Yapay zeka üretimi bir başlangıç noktasıdır, son nokta değil. Her zaman şunları yapabilirsiniz:
-*   Eksik adımları manuel olarak ekleyin.
-*   Netlik için düğümleri yeniden adlandırın.
-*   Belirli bölümleri yeniden oluşturun (Yakında).
+- elinizde sadece doğal dil açıklaması varsa
+- hızlı bir ilk taslak istiyorsanız
+- mevcut diyagramı kavramsal olarak yeniden şekillendirmek istiyorsanız
+- kaynak koddan yüksek seviyeli mimari çıkarımı almak istiyorsanız
 
-## 🔑 Kendi Anahtarını Getir (BYOK)
+Şu durumlarda başka akışlar daha iyidir:
 
-FlowMind varsayılan olarak sınırlı kotaya sahip paylaşımlı bir API anahtarı kullanır. Yoğun kullanım, gizlilik veya kendi faturalandırmanızı kullanmak için kendi **Gemini API Anahtarınızı** getirebilirsiniz.
+- zaten kesin bir metinsel temsil varsa
+- deterministik altyapı parse’ı istiyorsanız
+- küçük diyagramı elle çizmek daha hızlıysa
 
-1.  **Google AI Studio**'ya gidin ve [API Anahtarı Alın](https://aistudio.google.com/app/apikey).
-2.  FlowMind'da **Ayarlar**'ı (Dişli Simgesi) açın veya herhangi bir **Marka Kiti**'ne tıklayın.
-3.  **Yapay Zeka** sekmesine gidin.
-4.  Anahtarınızı güvenli giriş alanına yapıştırın.
+## Daha iyi sonuç almak için
 
-> [!NOTE]
-> Anahtarınız tarayıcınızın `localStorage` alanında yerel olarak saklanır ve sunucularımıza hiçbir zaman gönderilmez. Yalnızca Google'a yapılan istemci taraflı API çağrıları için kullanılır.
+İyi istemler genellikle şunları içerir:
+
+- hedef kitle
+- sistemler veya aktörler
+- önemli dallar ve hata yolları
+- istenen yön
+- istenen detay seviyesi
+
+## Önerilen iş akışı
+
+1. Flowpilot ile ilk taslağı üretin
+2. tuval üzerinde yapıyı kontrol edin
+3. [Properties Panel](/tr/properties-panel/) ile ayrıntıları düzeltin
+4. gerekiyorsa [Smart Layout](/tr/smart-layout/) uygulayın
+5. sonraki büyük revizyondan önce snapshot alın
+
+## İlgili sayfalar
+
+- [Ask Flowpilot](/tr/ask-flowpilot/)
+- [Studio Overview](/tr/studio-overview/)
+- [Choose an Input Mode](/tr/choose-input-mode/)
+- [Prompting AI Agents](/tr/prompting-agents/)
diff --git a/docs-site/src/content/docs/tr/architecture-lint.md b/docs-site/src/content/docs/tr/architecture-lint.md
new file mode 100644
index 0000000..5fcc82c
--- /dev/null
+++ b/docs-site/src/content/docs/tr/architecture-lint.md
@@ -0,0 +1,24 @@
+---
+draft: false
+title: Architecture Linting
+description: JSON tabanlı mimari kurallar tanımlayın ve ihlalleri tuval üzerinde gerçek zamanlı görün.
+---
+
+Architecture Linting, kuralları doğrudan diyagram üzerinde uygulamanızı sağlar. Bu, sistem diyagramları için lint mantığına en yakın yüzeydir.
+
+## Nerede bulunur?
+
+Studio içindeki **Lint** sekmesinde.
+
+## Neler yapar?
+
+- JSON kural seti düzenleme
+- kural dosyası parse hatalarını görme
+- error, warning ve info seviyelerinde ihlal listesi görme
+- diyagram üzerinde kural uyumunu hızlıca değerlendirme
+
+## Ne zaman kullanılır?
+
+- mimari sınırları zorlayan ilişkileri tespit etmek için
+- altyapı senkronizasyonundan gelen grafiği doğrulamak için
+- büyük AI revizyonlarından sonra yapısal kalite kontrolü yapmak için
diff --git a/docs-site/src/content/docs/tr/ask-flowpilot.md b/docs-site/src/content/docs/tr/ask-flowpilot.md
index 10bccca..9d50691 100644
--- a/docs-site/src/content/docs/tr/ask-flowpilot.md
+++ b/docs-site/src/content/docs/tr/ask-flowpilot.md
@@ -1,8 +1,50 @@
 ---
 draft: false
 title: Ask Flowpilot
+description: Flowpilot’i Studio içindeki sohbet tabanlı yardımcı olarak kullanın; diyagram taslağı üretin, revize edin ve yön değiştirin.
 ---
 
-# Flowpilot Asistanına Sor
+Flowpilot, Studio içindeki sohbet tabanlı asistandır. Bir diyagramı doğal dille tarif etmek, mevcut bir taslağı yeniden kurmak veya farklı bir yapısal yaklaşım istemek için en hızlı yoldur.
 
-Bu sayfa, `DocsPage.tsx` içindeki AI Asistan bileşeni tarafından dinamik olarak değiştirilir. Bu dosya yalnızca Vite dinamik glob içe aktarıcısını ve yönlendirme mantığını karşılamak için mevcuttur.
+## İyi kullanım senaryoları
+
+Flowpilot’i şu durumlarda kullanın:
+
+- metin isteminden ilk taslağı üretmek için
+- mevcut sistemi daha temiz bir yapıya çevirmek için
+- eksik hata yollarını ve dalları eklemek için
+- kod veya yapılandırılmış girdiden ilk diyagram taslağını almak için
+
+## İsteminizde ne olmalı?
+
+İyi istemler genelde şunları içerir:
+
+- hedef kitle
+- sistemler veya aktörler
+- önemli dallar veya kısıtlar
+- tercih edilen yön (`LR`, `TB` gibi)
+- yüksek seviye mi, detaylı operasyon akışı mı istendiği
+
+## Örnek istem
+
+```text
+Şu bileşenleri içeren soldan sağa bir SaaS mimarisi oluştur:
+web istemcisi, API gateway, auth servisi, billing servisi,
+Postgres, Redis cache, background workers ve S3 tabanlı dosya saklama.
+Public ingress, async işler ve hata işleme yollarını göster.
+```
+
+## Üretimden sonra ne yapılmalı?
+
+Flowpilot en güçlü halini taslak üreticisi olarak gösterir, son editör olarak değil. Üretimden sonra:
+
+- yapıyı tuvalde inceleyin
+- [Properties Panel](/tr/properties-panel/) ile etiket ve görsel ayarları düzeltin
+- gerekirse [Smart Layout](/tr/smart-layout/) ile yerleşimi toplayın
+- yeni büyük revizyonlardan önce snapshot alın
+
+## İlgili sayfalar
+
+- [AI Generation](/tr/ai-generation/)
+- [Prompting AI Agents](/tr/prompting-agents/)
+- [Choose an Input Mode](/tr/choose-input-mode/)
diff --git a/docs-site/src/content/docs/tr/aws-architecture.md b/docs-site/src/content/docs/tr/aws-architecture.md
new file mode 100644
index 0000000..afec7e5
--- /dev/null
+++ b/docs-site/src/content/docs/tr/aws-architecture.md
@@ -0,0 +1,30 @@
+---
+draft: false
+title: AWS Architecture Diagram
+description: Şablonlar, ikon destekli varlıklar, AI taslağı, DSL ve dışa aktarma akışlarıyla OpenFlowKit içinde AWS mimari diyagramları oluşturun.
+---
+
+OpenFlowKit, sağlayıcı ikonları, mimari odaklı yerleşim ve AI/kod tabanlı üretim kombinasyonu sayesinde AWS mimari diyagramları için güçlü bir çalışma alanıdır.
+
+## Başlangıç yolları
+
+- AWS şablonları
+- Assets içindeki AWS ikon kataloğu
+- Flowpilot ile mimari istemi
+- OpenFlow DSL ile deterministik ilk taslak
+
+## Önerilen akış
+
+1. ana servisleri yerleştirin
+2. VPC ve subnet sınırlarını ekleyin
+3. trafik ve async akışları bağlayın
+4. [Smart Layout](/tr/smart-layout/) uygulayın
+5. etiket, protokol ve görsel vurguları netleştirin
+6. gerekiyorsa snapshot alın
+7. uygun formatta paylaşın veya dışa aktarın
+
+## İlgili sayfalar
+
+- [Infrastructure Sync](/tr/infra-sync/)
+- [Templates & Starter Flows](/tr/templates-assets/)
+- [Choose an Export Format](/tr/choose-export-format/)
diff --git a/docs-site/src/content/docs/tr/canvas-basics.md b/docs-site/src/content/docs/tr/canvas-basics.md
index 503c267..10b0da8 100644
--- a/docs-site/src/content/docs/tr/canvas-basics.md
+++ b/docs-site/src/content/docs/tr/canvas-basics.md
@@ -1,31 +1,54 @@
 ---
 draft: false
 title: Canvas Basics
+description: OpenFlowKit tuvalinde gezinmeyi, seçim yapmayı, düzenlemeyi ve çalışmanızı geri kazanmayı öğrenin.
 ---
 
+Tuval, OpenFlowKit’in ana düzenleme yüzeyidir. Doğrudan graf üzerinde çalışmayı ve kesin düzenlemeleri yan panellerle birleştirir.
 
-FlowMind tuvali sonsuz, etkileşimli bir çalışma alanıdır. Etkin biçimde gezinmek ve kullanmak için aşağıdaki rehberi inceleyin.
+## Tuvali ne zaman kullanmalısınız?
 
-## Gezinti
+Tuvali şu durumlarda kullanın:
 
-*   **Kaydırma**: Belirli fare eylemi (örn. Boşluk Tuşu + Sürükle veya Orta Tıklama + Sürükle) tuval görünümünü taşır.
-*   **Yakınlaştırma**: Fare tekerleğini kullanarak yakınlaştırın ve uzaklaştırın.
-*   **Görünüme Sığdır**: Tüm düğümleri görünüme sığdırmak için \`Shift + 1\` tuşlarına basın.
+- diyagramı manuel olarak çizmek istediğinizde
+- yapay zeka, içe aktarma veya koddan gelen bir sonucu iyileştirmek istediğinizde
+- yapıyı metin yerine mekânsal olarak değerlendirmek istediğinizde
+- doğrudan sürükle-bırak düzenleme yapmak istediğinizde
 
-## Düğüm İşlemleri
+## Gezinme
 
-### Düğüm Seçme
-*   **Tekli Seçim**: Bir düğüme tıklayın.
-*   **Çoklu Seçim**: \`Shift\` tuşunu basılı tutarak birden fazla düğüme tıklayın veya etraflarına bir seçim kutusu çizmek için tıklayıp sürükleyin.
+### Kaydırma ve yakınlaştırma
 
-### Kopyalama
-Bir veya daha fazla düğümü seçin ve kopyalamak için \`Cmd + D\` (Mac) veya \`Ctrl + D\` (Windows) tuşlarına basın.
+- Fare tekerleği ile yakınlaşın veya uzaklaşın
+- `Space + Drag` ile kaydırın
+- `H` el moduna geçer
+- `V` seçim moduna döner
+- `Shift + 1` mevcut grafiği görünüşe sığdırır
+- `Cmd/Ctrl + +/-` yakınlaştırma kontrolü sağlar
 
-### Silme
-Düğümleri seçin ve \`Backspace\` veya \`Delete\` tuşuna basın.
+### Büyük diyagramlarda gezinme
 
-## Mini Harita
+- görünüşe sığdırmayı kullanın
+- Komut Merkezi aramasıyla düğümlere atlayın
+- yapı doğruysa otomatik düzeni kullanın
 
-Sağ alt köşedeki Mini Harita, tüm akışınıza genel bir bakış sunar. Büyük diyagramlarda hızlıca gezinmek için mini haritanın içindeki görünüm kutusunu sürükleyebilirsiniz.
+## Seçim
 
-[YER TUTUCU: Çağrı açıklamalarıyla Tuval Arayüzü görseli]
+### Tekli seçim
+
+Bir düğüme veya kenara tıklayarak inceleyip düzenleyin.
+
+### Çoklu seçim
+
+- `Shift + Click`
+- `Shift + Drag` ile seçim kutusu
+
+Birden fazla düğüm seçildiğinde sağ panel toplu düzenleme moduna geçer.
+
+## Doğrudan düzenleme ve kesin düzenleme
+
+Tuval, grafiği hareket ettirdiğiniz ve yapılandırdığınız yüzeydir. Kesin değerler ve aileye özgü ayarlar için [Properties Panel](/tr/properties-panel/) kullanın. Şablonlar, arama, düzen ve iş akışı geçişleri için [Command Center](/tr/command-center/) daha doğrudur.
+
+## Geçmiş ve kurtarma
+
+Kısa düzeltmeler için undo/redo, büyük geri dönüşler için snapshot kullanın. Bkz. [Playback & History](/tr/playback-history/).
diff --git a/docs-site/src/content/docs/tr/choose-export-format.md b/docs-site/src/content/docs/tr/choose-export-format.md
new file mode 100644
index 0000000..7884d50
--- /dev/null
+++ b/docs-site/src/content/docs/tr/choose-export-format.md
@@ -0,0 +1,25 @@
+---
+draft: false
+title: Choose an Export Format
+description: Düzenleme, dokümantasyon, ortak çalışma, gömme veya tasarım aracı aktarımı için doğru OpenFlowKit dışa aktarma formatını seçin.
+---
+
+OpenFlowKit hem görsel hem de düzenlenebilir teslim formatlarını destekler. En doğru seçim bir sonraki adıma göre belirlenir.
+
+## Hızlı rehber
+
+| İhtiyaç | En iyi format |
+| --- | --- |
+| düzenlenebilir ana arşiv | JSON |
+| editör-doğal metin | OpenFlow DSL |
+| Markdown veya repo dostu metin | Mermaid |
+| dokümanlar ve sunumlar | PNG, JPG veya SVG |
+| tasarım aracı aktarımı | Figma |
+| kısa oynatma çıktısı | GIF veya video |
+| canlı izleyici veya oda erişimi | Share / Embed |
+
+## Varsayılan öneri
+
+- JSON’u ana düzenlenebilir kaynak olarak tutun
+- ihtiyaç halinde görsel çıktı üretin
+- metin iş akışı gerekiyorsa Mermaid veya DSL kullanın
diff --git a/docs-site/src/content/docs/tr/choose-input-mode.md b/docs-site/src/content/docs/tr/choose-input-mode.md
new file mode 100644
index 0000000..82fdc2a
--- /dev/null
+++ b/docs-site/src/content/docs/tr/choose-input-mode.md
@@ -0,0 +1,22 @@
+---
+draft: false
+title: Choose an Input Mode
+description: Tuval, AI, OpenFlow DSL, Mermaid, yapılandırılmış içe aktarma veya Infrastructure Sync arasında doğru başlangıç modunu seçin.
+---
+
+OpenFlowKit bir diyagramı üretmek için birden fazla yol sunar. Doğru seçim, zaten elinizde ne olduğuna bağlıdır.
+
+## Hızlı eşleştirme
+
+| Elinizde olan | Başlangıç |
+| --- | --- |
+| kaba bir fikir | [AI Generation](/tr/ai-generation/) |
+| manuel çizilecek yapı | [Canvas Basics](/tr/canvas-basics/) |
+| editör-doğal metin kontrolü | [OpenFlow DSL](/tr/openflow-dsl/) |
+| mevcut Mermaid | [Mermaid Integration](/tr/mermaid-integration/) |
+| SQL, OpenAPI, Terraform veya K8s metni | [Import from Structured Data](/tr/import-from-data/) |
+| deterministik parse edilecek altyapı dosyaları | [Infrastructure Sync](/tr/infra-sync/) |
+
+## Temel kural
+
+Elinizdeki en güçlü ve en doğru yapısal girdi ile başlayın. O yoksa daha gevşek bir mod olan AI’ya geçin.
diff --git a/docs-site/src/content/docs/tr/collaboration-sharing.md b/docs-site/src/content/docs/tr/collaboration-sharing.md
new file mode 100644
index 0000000..b6658f0
--- /dev/null
+++ b/docs-site/src/content/docs/tr/collaboration-sharing.md
@@ -0,0 +1,29 @@
+---
+draft: false
+title: Collaboration & Sharing
+description: Oda bağlantıları paylaşın, local-only fallback davranışını anlayın ve OpenFlowKit ortak çalışma akışlarını doğru kullanın.
+---
+
+OpenFlowKit, varsayılan local-first davranışı korurken paylaşım bağlantıları ve ortak çalışma odası akışlarını destekler.
+
+## Paylaşım akışında neler bulunur?
+
+- oda kimliği
+- davet URL’si
+- izleyici sayısı
+- katılımcı rozetleri
+- bağlantı durumu: realtime, connecting veya local-only fallback
+
+## Ne zaman paylaşım, ne zaman dışa aktarma?
+
+Paylaşımı şu durumlarda kullanın:
+
+- diyagram etkileşimli kalacaksa
+- başkaları aynı çalışma oturumuna katılacaksa
+- oda temelli ortak çalışma gerekiyorsa
+
+Dışa aktarmayı şu durumlarda kullanın:
+
+- dosya/artifact gerekiyorsa
+- hedef sunum, doküman veya tasarım aracıysa
+- kalıcı bir teslim dosyası gerekiyorsa
diff --git a/docs-site/src/content/docs/tr/command-center.md b/docs-site/src/content/docs/tr/command-center.md
index f27bcb3..8e1c51b 100644
--- a/docs-site/src/content/docs/tr/command-center.md
+++ b/docs-site/src/content/docs/tr/command-center.md
@@ -1,32 +1,59 @@
 ---
 draft: false
 title: Command Center
+description: Arama yapmak, varlık eklemek, şablon başlatmak, Studio’ya geçmek ve düzen/tasarım sistemi işlemlerini çalıştırmak için klavye odaklı başlatıcıyı kullanın.
 ---
 
-Komut Merkezi, ekranın alt kısmındaki kayan araç çubuğudur. FlowMind'ın "klavye öncelikli" iş akışının kalbidir.
+Komut Merkezi, editörün klavye öncelikli başlatıcısıdır. Yüzen bir panel olarak açılır ve varlıklar, şablonlar, arama, düzen ve Studio akışları arasında geçiş yapmanın en hızlı yoludur.
 
 > [!NOTE]
-> Komut Merkezini istediğiniz zaman `Cmd + K` (Mac) veya `Ctrl + K` (Windows) tuşlarına basarak açabilirsiniz.
-
-## Özellikler
-
-### 1. Şablonlar
-Sıfırdan başlamayın. Önceden hazırlanmış diyagram kütüphanesine erişin:
-*   AWS Mimari Şablonları
-*   Kullanıcı Yolculuğu Haritaları
-*   Veritabanı Şemaları
-*   Organizasyon Şemaları
-
-### 2. Tasarım Sistemi / Görseller
-Diyagramınızı zenginleştirmek için varlık kütüphanesine erişin:
-*   **Tel Çerçeveler**: Hızlı taslaklar oluşturmak için düşük kaliteli UI bileşenlerini (Düğmeler, Girişler, Modaller) sürükleyip bırakın.
-*   **İkonlar**: Herhangi bir ikonu bağımsız bir düğüm olarak arayın ve ekleyin.
-
-### 3. Yapay Zeka Copilot
-Komut Merkezindeki metin girişi, yapay zeka motorumuza doğrudan bağlantınızdır. Ne oluşturmak istediğinizi yazın ve `Enter` tuşuna basarak anında oluşturun.
-
-### 4. Düzen ve Araçlar
-Yardımcı işlevlere hızlıca erişin:
-*   **Otomatik Düzen**: Karmaşıklığı düzenleyin.
-*   **Görünümü Sıfırla**: Merkeze geri dönün.
-*   **Kodu Biçimlendir**: DSL'nizi düzenleyin.
+> macOS için `Cmd + K`, Windows/Linux için `Ctrl + K` ile açılır.
+
+## Üst seviye komutlar
+
+Sık kullanılan komutlar:
+
+- Open Flowpilot
+- Edit Flow DSL
+- Edit Mermaid Code
+- Assets
+- Search Nodes
+- Auto Layout
+- Start from Template
+- Design Systems
+
+## Görünümler
+
+### Assets
+
+Şunları eklemek için kullanın:
+
+- notlar
+- metin blokları
+- bölümler
+- journey düğümleri
+- zihin haritası düğümleri
+- mimari düğümler
+- yüklenen görseller
+- browser wireframe’leri
+- mobile wireframe’leri
+
+### Templates
+
+Boş tuval yerine kanıtlanmış bir başlangıç iskeleti istediğinizde kullanın.
+
+### Search
+
+Büyük diyagramlarda adlı düğümlere hızlı atlamak için kullanın.
+
+### Design Systems
+
+Tema değiştirmek, çoğaltmak, düzenlemek veya JSON tema dosyalarını içe/dışa aktarmak için kullanın.
+
+## Editördeki yeri
+
+Komut Merkezi, tuval ile Studio arasında en hızlı geçiş yüzeyidir:
+
+- doğrudan düzenleme için tuvali kullanın
+- kesin düzenlemeler için özellik panelini kullanın
+- arama, şablon, varlık, düzen ve iş akışı geçişleri için Komut Merkezi’ni kullanın
diff --git a/docs-site/src/content/docs/tr/design-systems-branding.md b/docs-site/src/content/docs/tr/design-systems-branding.md
new file mode 100644
index 0000000..d4fb8b5
--- /dev/null
+++ b/docs-site/src/content/docs/tr/design-systems-branding.md
@@ -0,0 +1,23 @@
+---
+draft: false
+title: Design Systems & Branding
+description: Tutarlı diyagramlar için OpenFlowKit tasarım sistemlerini yönetin ve tema tanımlarını içe veya dışa aktarın.
+---
+
+OpenFlowKit, diyagramların tek tek elle stillenmesi yerine tekrar kullanılabilir bir görsel sistemle çalışmasını sağlayan tasarım sistemi desteğine sahiptir.
+
+## Desteklenen akışlar
+
+Komut Merkezi üzerinden:
+
+- aktif tasarım sistemini değiştirebilir
+- mevcut temadan yeni tema türetebilir
+- tema çoğaltabilir ve düzenleyebilir
+- JSON içe aktarabilir
+- aktif temayı dışa aktarabilirsiniz
+
+## Ne zaman kullanılmalı?
+
+- birden çok diyagramın tutarlı görünmesi gerektiğinde
+- takımın marka veya ürün standartları olduğunda
+- diyagram stilini tekrar kullanılabilir bir varlık olarak yönetmek istediğinizde
diff --git a/docs-site/src/content/docs/tr/diagram-diff.md b/docs-site/src/content/docs/tr/diagram-diff.md
new file mode 100644
index 0000000..9c01a2b
--- /dev/null
+++ b/docs-site/src/content/docs/tr/diagram-diff.md
@@ -0,0 +1,18 @@
+---
+draft: false
+title: Diagram Diff & Compare
+description: Mevcut diyagramı bir snapshot tabanı ile karşılaştırın ve eklenen, kaldırılan veya değişen öğeleri görün.
+---
+
+Diagram Diff & Compare, mevcut grafiğin kaydedilmiş bir baseline snapshot’a göre nasıl değiştiğini incelemenizi sağlar.
+
+## Neleri gösterir?
+
+- eklenen düğümler ve kenarlar
+- kaldırılan düğümler ve kenarlar
+- değişen düğümler
+- baseline snapshot adı ve zamanı
+
+## Neden yararlıdır?
+
+Büyük değişikliklerden sonra sadece “farklı görünüyor” demek yerine, tam olarak neyin değiştiğini görmek için en doğru akıştır.
diff --git a/docs-site/src/content/docs/tr/diagram-families.md b/docs-site/src/content/docs/tr/diagram-families.md
new file mode 100644
index 0000000..6be19b6
--- /dev/null
+++ b/docs-site/src/content/docs/tr/diagram-families.md
@@ -0,0 +1,29 @@
+---
+draft: false
+title: Diagram Families
+description: Akışlar, mimari haritalar, zihin haritaları, journey diyagramları, sınıf diyagramları ve ER diyagramları için doğru OpenFlowKit ailesini seçin.
+---
+
+OpenFlowKit birden fazla diyagram ailesini destekler; çünkü her problem aynı düğüm ve kenar modeline zorlanmamalıdır.
+
+## Mevcut aileler
+
+| Aile | En uygun kullanım |
+| --- | --- |
+| `flowchart` | Genel süreç ve sistem akışları |
+| `architecture` | Bulut, servis ve platform diyagramları |
+| `mindmap` | Dallanarak düşünme ve hiyerarşik fikirler |
+| `journey` | Kullanıcı veya süreç yolculukları |
+| `stateDiagram` | Durum geçişleri |
+| `classDiagram` | Nesne modelleme ve ilişkiler |
+| `erDiagram` | Tablolar ve ilişkisel yapı |
+| `gitGraph` | Git geçmişi ve branch akışları |
+
+## Nasıl seçilir?
+
+Şekle değil, diyagramın anlamsal ihtiyacına göre seçim yapın.
+
+- süreç odaklıysa `flowchart`
+- sistem topolojisi önemliyse `architecture`
+- hiyerarşi önemliyse `mindmap`
+- aşama ve aktör önemliyse `journey`
diff --git a/docs-site/src/content/docs/tr/exporting.md b/docs-site/src/content/docs/tr/exporting.md
index 6230da5..f1cf91c 100644
--- a/docs-site/src/content/docs/tr/exporting.md
+++ b/docs-site/src/content/docs/tr/exporting.md
@@ -1,51 +1,59 @@
 ---
 draft: false
 title: Exporting
+description: Diyagramları OpenFlowKit’ten görsel, oynatma medyası, JSON, kod formatları, tasarım aracı aktarımı veya paylaşım/gömme akışları olarak dışa aktarın.
 ---
 
-FlowMind, diyagramlarınızı sunumlarda, belgelerde veya diğer harici araçlarda kullanmanıza yardımcı olmak için geniş bir dışa aktarma seçenekleri yelpazesi sunar.
+Dışa aktarma menüsü editörün sağ üstünde yer alır ve hem indirilen dosyaları hem de panoya kopyalanan formatları kapsar.
 
-> [!TIP]
-> Tüm dışa aktarma seçeneklerine araç çubuğunun sağ üst köşesindeki **"Dışa Aktar"** düğmesinden ulaşabilirsiniz.
+## İndirilen formatlar
 
-## Görsel Dışa Aktarma
+### PNG ve JPG
 
-Slaytlar, belgeler veya Slack'te paylaşmak için idealdir.
+Şunlar için kullanın:
 
-### PNG (Taşınabilir Ağ Grafikleri)
-Mevcut akışınızın yüksek çözünürlüklü, piksel tabanlı bir görselini dışa aktarır.
-*   **En İyi Kullanım**: Slaytlar, Web, Genel Paylaşım.
-*   **Ayarlar**: Ayarlarda etkinleştirilmişse varsayılan olarak şeffaflık içerir.
+- dokümanlar
+- slaytlar
+- ticket sistemleri
+- hızlı görsel paylaşım
 
-### JPEG (Ortak Fotoğrafçılık Uzmanları Grubu)
-Sıkıştırılmış bir görsel dosyası dışa aktarır.
-*   **En İyi Kullanım**: E-posta ekleri, dosya boyutunun önemli olduğu durumlar.
-*   **Not**: Şeffaflığı desteklemez (arka plan beyaz olacaktır).
+PNG genellikle şeffaflık ve netlik açısından daha iyi varsayılandır. JPG ise beyaz arka planlı hafif paylaşım için uygundur.
 
-## Veri ve Kod Dışa Aktarma
+### SVG
 
-FlowMind bir "Kod Olarak Diyagram" aracıdır; bu nedenle diyagram verilerinizi birinci sınıf vatandaş olarak ele alıyoruz.
+Web, dokümantasyon ve ölçeklenebilir tasarım kullanımları için en iyi seçenektir.
 
-### JSON (FlowMind Yerel Formatı)
-Tüm düğüm konumlarını, stillerini ve verilerini içeren ham `.json` dosyasını indirir.
-*   **En İyi Kullanım**: Yedekleme, Sürüm Kontrolü, Diğer FlowMind kullanıcılarıyla düzenlenebilir dosya paylaşımı.
+### JSON
 
-### FlowMind DSL
-Basitleştirilmiş Alan Spesifik Dil (DSL) temsilini panonuza kopyalar.
-*   **En İyi Kullanım**: Diyagram mantığını kod tabanı yorumlarında saklamak veya yapay zeka aracılığıyla benzer akışlar oluşturmak.
+OpenFlowKit’e en yüksek sadakatle geri içe aktarılabilen ana arşiv formatıdır. Şunlar için kullanın:
 
-### Mermaid.js
-Mevcut diyagramınızı [Mermaid](https://mermaid.js.org/) sözdizimine dönüştürür ve panoya kopyalar.
-*   **En İyi Kullanım**: GitHub `README.md` dosyalarına, Notion veya Obsidian'a diyagram gömme.
-*   **Desteklenen**: Temel Akış Şemaları, Sekans Diyagramları.
+- yedekleme
+- düzenlenebilir ana kopya saklama
+- tarayıcılar arası aktarım
+- ileri tarihte tekrar düzenlenecek diyagramlar
 
-### PlantUML
-Diyagramınızın PlantUML temsilini kopyalar.
-*   **En İyi Kullanım**: Kurumsal wikiler (Confluence) veya eski dokümantasyon sistemleri.
+### Oynatma videosu ve GIF
 
-### Figma
-Figma'nın yapıştırma formatıyla uyumlu bir vektör temsilini kopyalar.
-*   **En İyi Kullanım**: Yüksek kaliteli parlatma için diyagramları tasarımcılara teslim etme.
+Değişimin zaman içinde anlatılması gereken akışlar için kullanın.
 
-> [!WARNING]
-> Figma dışa aktarma deneyseldir. Karmaşık özel düğümler %100 mükemmel aktarılmayabilir.
+## Panoya kopyalanan formatlar
+
+- OpenFlow DSL
+- Mermaid
+- PlantUML
+- Figma editable export
+
+Bu formatlar bir sonraki araç metin veya tasarım düzeyinde girdi beklediğinde daha uygundur.
+
+## Paylaşım
+
+Menüdeki **Share / Embed** seçeneği izleyici bağlantısı ve iş birliği odası akışları içindir.
+
+## Önerilen yaklaşım
+
+Çoğu ciddi kullanım için iyi bir desen şudur:
+
+1. JSON’u düzenlenebilir ana kopya olarak saklayın
+2. sunum için görsel format dışa aktarın
+3. metin iş akışı gerekiyorsa Mermaid veya DSL üretin
+4. etkileşim gerekiyorsa paylaşım/gömme akışını kullanın
diff --git a/docs-site/src/content/docs/tr/figma-design-import.md b/docs-site/src/content/docs/tr/figma-design-import.md
new file mode 100644
index 0000000..5d9c7ad
--- /dev/null
+++ b/docs-site/src/content/docs/tr/figma-design-import.md
@@ -0,0 +1,24 @@
+---
+draft: false
+title: Figma Design Import
+description: Figma’dan renk ve metin stillerini alıp bir OpenFlowKit tasarım sistemine uygulayın.
+---
+
+Figma import akışı, tema token’larını elle yeniden kurmak yerine mevcut bir Figma dosyasından stil çekmenizi sağlar.
+
+## Gerekli olanlar
+
+- Figma dosya URL’si
+- kişisel erişim token’ı
+
+## Neler önizlenir?
+
+- renk stilleri
+- metin stilleri
+- ilgili font aileleri
+
+## Ne zaman faydalıdır?
+
+- mevcut marka sistemini diyagramlara taşırken
+- hızla bir tema oluşturmak isterken
+- birden çok diyagram için aynı görsel dili korurken
diff --git a/docs-site/src/content/docs/tr/github-embed.md b/docs-site/src/content/docs/tr/github-embed.md
new file mode 100644
index 0000000..082f4e9
--- /dev/null
+++ b/docs-site/src/content/docs/tr/github-embed.md
@@ -0,0 +1,17 @@
+---
+draft: false
+title: Embed Diagrams in GitHub
+description: OpenFlowKit diyagramları için izleyici bağlantıları üretin ve bunları GitHub odaklı dokümantasyon akışlarında kullanın.
+---
+
+OpenFlowKit diyagramlarını GitHub README veya başka Markdown tabanlı belgelerde etkileşimli, salt okunur görünüm bağlantılarıyla paylaşabilirsiniz.
+
+## Ne zaman faydalıdır?
+
+- ekip dokümantasyonu Markdown içinde yaşıyorsa
+- statik PNG yerine daha zengin bir deneyim istiyorsanız
+- okuyucunun diyagramı editörde açabilmesini istiyorsanız
+
+## Temel fikir
+
+OpenFlow DSL içeriği URL güvenli biçimde kodlanır ve `/view` rotasına aktarılır. Böylece harici servis veya GitHub uygulaması gerekmeden izleyici bağlantısı elde edilir.
diff --git a/docs-site/src/content/docs/tr/import-from-data.md b/docs-site/src/content/docs/tr/import-from-data.md
new file mode 100644
index 0000000..9d73c00
--- /dev/null
+++ b/docs-site/src/content/docs/tr/import-from-data.md
@@ -0,0 +1,19 @@
+---
+draft: false
+title: Import from Structured Data
+description: SQL, OpenAPI, Terraform ve Kubernetes kaynak metnini Studio içinden düzenlenebilir diyagramlara dönüştürün.
+---
+
+Studio içindeki yapılandırılmış içe aktarma akışları, mevcut kaynak metinleri düzenlenebilir diyagramlara dönüştürür.
+
+## Ne zaman kullanılmalı?
+
+- elinizde zaten SQL DDL varsa
+- OpenAPI spesifikasyonundan servis görünümü üretmek istiyorsanız
+- Terraform veya K8s metninden ilk taslağı almak istiyorsanız
+
+## Nasıl çalışır?
+
+Kaynak metni yapıştırın, uygun modu seçin ve diyagramı üretin. Girdi türüne göre OpenFlowKit ya uzmanlaşmış AI destekli akış ya da daha deterministik parse akışı kullanır.
+
+Tamamen deterministik altyapı parse’ı gerektiğinde [Infrastructure Sync](/tr/infra-sync/) kullanın.
diff --git a/docs-site/src/content/docs/tr/infra-sync.md b/docs-site/src/content/docs/tr/infra-sync.md
new file mode 100644
index 0000000..5437089
--- /dev/null
+++ b/docs-site/src/content/docs/tr/infra-sync.md
@@ -0,0 +1,25 @@
+---
+draft: false
+title: Infrastructure Sync (Living Diagrams)
+description: Terraform state, Kubernetes manifestleri ve Docker Compose dosyalarını AI sağlayıcısına ihtiyaç duymadan doğrudan diyagrama dönüştürün.
+---
+
+Infrastructure Sync, gerçek altyapı dosyalarını deterministik şekilde OpenFlowKit diyagramlarına dönüştürür.
+
+## Desteklenen formatlar
+
+- Terraform State (`.tfstate` JSON)
+- Kubernetes YAML
+- Docker Compose YAML
+- gerektiğinde AI destekli yol üzerinden Terraform HCL
+
+## Ne zaman kullanılmalı?
+
+- elinizde gerçek altyapı dosyaları varsa
+- deterministik parse gerekiyorsa
+- çevrimdışı dostu içe aktarma istiyorsanız
+- mimari inceleme için düzenlenebilir başlangıç noktası istiyorsanız
+
+## Sonrasında ne olur?
+
+Oluşturulan sonuç yine normal bir OpenFlowKit diyagramıdır. Uyguladıktan sonra düzen, açıklama, dışa aktarma ve karşılaştırma akışlarına devam edebilirsiniz.
diff --git a/docs-site/src/content/docs/tr/introduction.md b/docs-site/src/content/docs/tr/introduction.md
index 4444ced..d30ed50 100644
--- a/docs-site/src/content/docs/tr/introduction.md
+++ b/docs-site/src/content/docs/tr/introduction.md
@@ -1,39 +1,60 @@
 ---
 draft: false
 title: Introduction
+description: OpenFlowKit; teknik akışlar, mimari diyagramlar, kod tabanlı temsil ve yapay zeka destekli düzenleme için local-first bir diyagram çalışma alanıdır.
 ---
 
-**OpenFlowKit**, yapay zeka destekli görselleştirme ile hassas, kod tabanlı düzenleme arasındaki boşluğu dolduran yeni nesil bir diyagram aracıdır. Geliştiriciler, mimarlar ve ürün yöneticileri için tasarlanan OpenFlowKit, doğal dil veya özel DSL'imizi kullanarak karmaşık akış şemaları, sıra diyagramları ve sistem mimarileri oluşturmanıza olanak tanır.
+OpenFlowKit, teknik ekipler için tasarlanmış local-first bir diyagram çalışma alanıdır. Görsel tuvali, kod dostu temsilleri, deterministik içe aktarma yollarını, yapay zeka destekli üretimi ve paylaşım/dışa aktarma akışlarını tek bir tarayıcı tabanlı üründe birleştirir.
 
-## Neden OpenFlowKit?
+## OpenFlowKit nerede güçlüdür?
 
-Geleneksel diyagram araçları genellikle şu seçenekler arasında tercih yapmaya zorlar:
-1.  **Sürükle-bırak araçları**: Başlamak kolay, ancak sürdürmesi ve versiyon kontrolü zor.
-2.  **Kod tabanlı araçlar (Mermaid gibi)**: Versiyon kontrolü için harika, ancak sıfırdan yazmak zahmetli olabilir.
+OpenFlowKit özellikle diyagramın zaman içinde evrilmesi gereken durumlarda güçlüdür:
 
-OpenFlowKit size her iki dünyanın en iyisini sunar. Bir metin istemiyle başlangıç yapısını oluşturabilir, ardından **Hibrit Editörümüzü** kullanarak düzenleyebilirsiniz—düğümleri tuval üzerinde görsel olarak manipüle edebilir *veya* altta yatan kodu doğrudan düzenleyebilirsiniz.
+- boş tuval, şablon, yapay zeka istemi, kod temsili veya mevcut kaynak girdiden başlayabilirsiniz
+- sonucu tek seferlik bir çıktı gibi değil, düzenlenebilir bir çalışma yüzeyi gibi geliştirebilirsiniz
+- gerektiğinde metinsel temsili editör modeline yakın tutabilirsiniz
+- aynı diyagramı dokümantasyon, tasarım ve paylaşım iş akışlarına taşıyabilirsiniz
 
-## Temel Özellikler
+## Ürünün temel yüzeyleri
 
-### Yapay Zeka Destekli Üretim
-Sisteminizi basitçe tanımlayın: *"OAuth yedekli ve hata işlemeli bir giriş akışı oluştur."* OpenFlowKit'in Gemini entegrasyonu tüm diyagramı anında oluşturur.
+Mevcut ürün dört ana yüzey etrafında şekillenir:
 
-### Hibrit Tuval
-Tuvalimiz sadece statik bir görüntü değil. Tamamen etkileşimli bir grafik ortamıdır.
-*   **Sürükle & Bırak**: Düğümleri taşıyın, otomatik hizalama.
-*   **Akıllı Düzenler**: Elk.js kullanarak tek tıkla yeniden düzenleme.
-*   **Özellikler Paneli**: CSS'e dokunmadan belirli düğüm stillerini ince ayarlayın.
+- doğrudan düzenleme için görsel tuval
+- arama, şablon, varlık, düzen ve tasarım sistemleri için komut merkezi
+- yapay zeka, kod, içe aktarma, infra senkronizasyonu ve lint akışları için Studio alanı
+- editör dışına taşımak için dışa aktarma, gömme ve paylaşım akışları
 
-### Kod Olarak Diyagram
-Her diyagram okunabilir, düzenlenebilir bir JSON yapısı ile desteklenir ve Mermaid.js sözdizimi ile uyumludur. Bu, dokümantasyonunuzun kodunuzla birlikte yaşayabileceği anlamına gelir.
+## Uygulamadaki diyagram aileleri
 
-### Premium Estetik
-"Önce Tasarım" yaklaşımıyla oluşturulan OpenFlowKit diyagramları varsayılan olarak sunum için hazırdır. Artık çirkin, varsayılan gri kutular yok.
+Editör şu diyagram türlerini birinci sınıf olarak destekler:
 
-## Sonraki Adımlar
+- `flowchart`
+- `stateDiagram`
+- `classDiagram`
+- `erDiagram`
+- `gitGraph`
+- `mindmap`
+- `journey`
+- `architecture`
 
-Başlamaya hazır mısınız?
+Buna ek olarak genel amaçlı akış düğümleri, mimari ikon düğümleri, açıklamalar, bölümler, görseller ve wireframe yüzeyleri de bulunur.
 
-*   İlk akışınızı oluşturmak için [Hızlı Başlangıç](/docs/tr/quick-start) kılavuzuna göz atın.
-*   [Tuval Temelleri](/docs/tr/canvas-basics) hakkında bilgi edinin.
-*   [OpenFlow DSL](/docs/tr/openflow-dsl)'de ustalaşın.
+## Temel kavramlar
+
+### Varsayılan olarak local-first
+
+Diyagram durumu varsayılan olarak tarayıcıda kalır. Ne zaman dışa aktaracağınızı, paylaşacağınızı veya bir ortak çalışma odasına gireceğinizi siz belirlersiniz.
+
+### Birden fazla giriş modu
+
+OpenFlowKit tek bir kaynak doğruluğu modeline sizi zorlamaz. Görsel düzenleme, yapay zeka, OpenFlow DSL, Mermaid veya yapılandırılmış içe aktarma arasında ihtiyaç bazlı geçiş yapabilirsiniz.
+
+### Düzenlenebilir çıktılar
+
+Üretilen veya içe aktarılan diyagramlar ölü ekran görüntülerine dönüşmez; aynı düzenlenebilir tuval modeline geri gelir.
+
+## Buradan başlayın
+
+- En hızlı ilk kullanım akışı için [Quick Start](/tr/quick-start/) sayfasını okuyun.
+- Yapay zeka, kod ve içe aktarma yüzeyleri için [Studio Overview](/tr/studio-overview/) sayfasını açın.
+- Nereden başlamanız gerektiğinden emin değilseniz [Choose an Input Mode](/tr/choose-input-mode/) sayfasına gidin.
diff --git a/docs-site/src/content/docs/tr/keyboard-shortcuts.md b/docs-site/src/content/docs/tr/keyboard-shortcuts.md
index 237357d..942d654 100644
--- a/docs-site/src/content/docs/tr/keyboard-shortcuts.md
+++ b/docs-site/src/content/docs/tr/keyboard-shortcuts.md
@@ -1,35 +1,48 @@
 ---
 draft: false
 title: Keyboard Shortcuts
+description: OpenFlowKit’te düzenleme, gezinme ve diyagram üretimi için mevcut klavye kısayolları.
 ---
 
+Bu tablolar uygulamadaki temel kısayol gruplarını özetler.
 
-İş akışınızı hızlandırmak için bu klavye kısayollarıyla FlowMind'ı ustalıkla kullanın.
+## Temel
 
-## Genel
+| Eylem | macOS | Windows/Linux |
+| --- | --- | --- |
+| Undo | `Cmd + Z` | `Ctrl + Z` |
+| Redo | `Cmd + Shift + Z` | `Ctrl + Shift + Z` |
+| Tümünü seç | `Cmd + A` | `Ctrl + A` |
+| Seçimi sil | `Delete` | `Backspace` |
 
-| Eylem | MacOS | Windows/Linux |
-| :--- | :--- | :--- |
-| **Komut Paleti** | \`Cmd + K\` | \`Ctrl + K\` |
-| **Kaydet** | \`Cmd + S\` | \`Ctrl + S\` |
-| **Geri Al** | \`Cmd + Z\` | \`Ctrl + Z\` |
-| **Yeniden Yap** | \`Cmd + Shift + Z\` | \`Ctrl + Shift + Z\` |
+## Düzenleme
 
-## Tuval Gezintisi
+| Eylem | macOS | Windows/Linux |
+| --- | --- | --- |
+| Çoklu seçim | `Shift + Click` | `Shift + Click` |
+| Seçim kutusu | `Shift + Drag` | `Shift + Drag` |
+| Çoğalt | `Cmd + D` | `Ctrl + D` |
+| Sürükleyerek çoğalt | `Opt + Drag` | `Alt + Drag` |
+| Kopyala | `Cmd + C` | `Ctrl + C` |
+| Yapıştır | `Cmd + V` | `Ctrl + V` |
+| Grupla | `Cmd + G` | `Ctrl + G` |
 
-| Eylem | MacOS | Windows/Linux |
-| :--- | :--- | :--- |
-| **Yakınlaştır** | \`+\` | \`+\` |
-| **Uzaklaştır** | \`-\` | \`-\` |
-| **Görünüme Sığdır** | \`Shift + 1\` | \`Shift + 1\` |
+## Düğüm işlemleri
 
-## Düzenleme
+| Eylem | macOS | Windows/Linux |
+| --- | --- | --- |
+| Zihin haritasına çocuk ekle | `Tab` | `Tab` |
+| Zihin haritasına kardeş ekle | `Enter` | `Enter` |
+| Seçimi yeniden adlandır | `F2` | `F2` |
+
+## Gezinme
+
+| Eylem | macOS | Windows/Linux |
+| --- | --- | --- |
+| Komut Merkezi | `Cmd + K` | `Ctrl + K` |
+| Görünüşe sığdır | `Shift + 1` | `Shift + 1` |
 
-| Eylem | MacOS | Windows/Linux |
-| :--- | :--- | :--- |
-| **Düğümü Kopyala** | \`Cmd + D\` veya \`Alt + Sürükle\` | \`Ctrl + D\` veya \`Alt + Sürükle\` |
-| **Düğümü Sil** | \`Backspace\` | \`Backspace\` |
-| **Tümünü Seç** | \`Cmd + A\` | \`Ctrl + A\` |
-| **Seçimi Grupla** | \`Cmd + G\` | \`Ctrl + G\` |
+## Notlar
 
-> **Not:** Kısayollar yalnızca tuval odakta iken aktiftir.
+- Kısayollar odak durumuna ve aktif moda göre değişebilir.
+- Bazı işlemler için doğrudan kısayol yerine [Command Center](/tr/command-center/) kullanmak daha hızlıdır.
diff --git a/docs-site/src/content/docs/tr/local-first-diagramming.md b/docs-site/src/content/docs/tr/local-first-diagramming.md
new file mode 100644
index 0000000..d575f2f
--- /dev/null
+++ b/docs-site/src/content/docs/tr/local-first-diagramming.md
@@ -0,0 +1,14 @@
+---
+draft: false
+title: Local-First Diagramming
+description: OpenFlowKit’te local-first yaklaşımının günlük çalışma, gizlilik ve paylaşım akışlarına etkisini öğrenin.
+---
+
+Local-first, çalışmanın zorunlu olarak merkezi bir sunucuda başlamaması demektir. OpenFlowKit bağlamında bu; verinin varsayılan olarak tarayıcıda kalması ve paylaşımın bilinçli bir adım olması anlamına gelir.
+
+## Pratik etkileri
+
+- diyagram verisi varsayılan olarak tarayıcıdadır
+- dışa aktarma ve paylaşım kullanıcı kararıyla olur
+- canlı iş birliği mümkün değilse yerel çalışma devam edebilir
+- AI kullanımı BYOK ile daha kontrollü olabilir
diff --git a/docs-site/src/content/docs/tr/mermaid-integration.md b/docs-site/src/content/docs/tr/mermaid-integration.md
index 6f52c65..93681c2 100644
--- a/docs-site/src/content/docs/tr/mermaid-integration.md
+++ b/docs-site/src/content/docs/tr/mermaid-integration.md
@@ -1,35 +1,38 @@
 ---
 draft: false
 title: Mermaid Integration
+description: OpenFlowKit’i görsel düzenleme yüzeyi olarak kullanırken Mermaid içe aktarın, düzenleyin, doğrulayın ve dışa aktarın.
 ---
 
-FlowMind, kod olarak diyagram için endüstri standardı olan [Mermaid.js](https://mermaid.js.org/) ile yüksek uyumluluk sağlar.
+OpenFlowKit, Mermaid için içe aktarma, düzenleme ve dışa aktarma yolları sunar. Ancak Mermaid’i editörün tek doğruluk kaynağı değil, bir uyumluluk katmanı olarak düşünmek gerekir.
 
-## Mermaid İçe Aktarma
+## Mermaid ne zaman doğru seçimdir?
 
-Mevcut Mermaid kodunu doğrudan FlowMind'a yapıştırabilirsiniz.
+Mermaid’i şu durumlarda kullanın:
 
-1.  Araç çubuğundaki **"İçe Aktar"** düğmesine tıklayın.
-2.  **"Mermaid"** seçeneğini seçin.
-3.  Kod parçacığınızı yapıştırın.
+- diyagramlarınız zaten dokümanlarda veya repo içinde Mermaid olarak yaşıyorsa
+- Markdown dostu metinsel format gerekiyorsa
+- başka bir araç Mermaid bekliyorsa
 
-### Desteklenen Diyagram Türleri
-FlowMind şu an için aşağıdakileri optimize etmektedir:
-*   **Akış Şemaları** (`graph TD`, `graph LR`)
-*   **Sekans Diyagramları** (Dönüşüm yoluyla kısmi destek)
+## Studio içinde Mermaid
 
-```mermaid
-graph TD
-    A[Başlat] --> B{Çalışıyor mu?}
-    B -- Evet --> C[Harika!]
-    B -- Hayır --> D[Hata Ayıkla]
-```
+Studio’nun Code alanında Mermaid modu vardır. Burada:
 
-## Mermaid'e Dışa Aktarma
+- mevcut tuvalden üretilen Mermaid’i görebilir
+- doğrudan Mermaid düzenleyebilir
+- parse edilen grafiği tekrar editöre uygulayabilir
+- parse hatalarında tanılama görebilirsiniz
 
-Herhangi bir FlowMind diyagramını Mermaid sözdizimine *geri* aktarabilirsiniz.
-Bu özellik, GitHub `README.md` dosyalarına veya Notion belgelerine diyagram gömmek için idealdir.
+## Sadakat beklentisi
 
-1.  **Kod Paneli**'ni açın (alt panel).
-2.  **"Mermaid"** sekmesine geçin.
-3.  Oluşturulan kodu kopyalayın.
+Mermaid round-trip faydalıdır, ancak OpenFlowKit’in tüm kavramları birebir eşlenmez. Özellikle şu konularda dikkatli olun:
+
+- elle ince ayarlanmış yerleşimler
+- sağlayıcı ikonlarıyla çalışan mimari sunumlar
+- editörde daha zengin olan aileye özgü semantik alanlar
+
+Tam geri kazanım gerekiyorsa Mermaid ile birlikte JSON da saklayın.
+
+## Önerilen desen
+
+Mermaid’i çoğu zaman yayınlama veya uyumluluk katmanı olarak kullanın. Asıl düzenleme kaynağı olarak JSON veya OpenFlow DSL tutmak genellikle daha güvenlidir.
diff --git a/docs-site/src/content/docs/tr/mermaid-vs-openflow.md b/docs-site/src/content/docs/tr/mermaid-vs-openflow.md
new file mode 100644
index 0000000..e446f0c
--- /dev/null
+++ b/docs-site/src/content/docs/tr/mermaid-vs-openflow.md
@@ -0,0 +1,24 @@
+---
+draft: false
+title: Mermaid vs OpenFlow
+description: Mermaid ile OpenFlow DSL arasında hangi metin temsilinin iş akışınız için daha uygun olduğunu belirleyin.
+---
+
+Mermaid ve OpenFlow DSL benzer görünen ama farklı amaçlara hizmet eden iki metin temsilidir.
+
+## Mermaid ne zaman seçilmeli?
+
+- Markdown ve README iş akışları için
+- dış araçlar Mermaid bekliyorsa
+- taşınabilirlik sadakatten daha önemliyse
+
+## OpenFlow DSL ne zaman seçilmeli?
+
+- OpenFlowKit ana düzenleme ortamıysa
+- editör içi sadakat önemliyse
+- Mermaid kısıtları gereksizse
+
+## Kısa sonuç
+
+- Mermaid taşınabilirlik için daha iyidir
+- OpenFlow DSL editör-doğal sadakat için daha iyidir
diff --git a/docs-site/src/content/docs/tr/node-types.md b/docs-site/src/content/docs/tr/node-types.md
index 7cfd498..ca23eee 100644
--- a/docs-site/src/content/docs/tr/node-types.md
+++ b/docs-site/src/content/docs/tr/node-types.md
@@ -1,36 +1,49 @@
 ---
 draft: false
 title: Node Types
+description: OpenFlowKit’teki temel düğüm ailelerini ve bunların hangi diyagram iş akışlarına uyduğunu anlayın.
 ---
 
+OpenFlowKit hem genel amaçlı hem de aileye özgü düğümleri destekler. Uygulamadaki düğüm modeli akış, mimari, zihin haritası, journey, sınıf, ER, açıklama, gruplama ve medya senaryolarını kapsar.
 
-FlowMind, farklı diyagram ihtiyaçlarını karşılamak için çeşitli özel düğüm türlerini destekler.
+## Temel düğüm aileleri
 
-## 1. Özel Düğüm (Varsayılan)
+### Flow düğümleri
 
-Diyagramlarınızın temel yapı taşı. Başlık, isteğe bağlı ikon ve zengin bağlantı tutamaçlarını destekler.
-*   **En İyi Kullanım**: Süreç adımları, servisler, veritabanı tabloları veya genel varlıklar.
-*   **Özellikler**: Yeniden boyutlandırılabilir, düzenlenebilir etiket, ikon desteği.
+En sık kullanılan temel yapı taşları:
 
-## 2. Metin Düğümü / Açıklama
+- `start`
+- `process`
+- `decision`
+- `end`
+- `custom`
 
-Akış yapısını etkilemeden tuvale yorum veya etiket eklemek için kullanılan hafif, kenarsız bir düğüm.
-*   **En İyi Kullanım**: Yapışkan notlar, bölüm başlıkları veya açıklayıcı metin ekleme.
-*   **Kullanım**: Araç çubuğundan "Metin" seçin veya \`T\` tuşuna basın.
+### Mind map düğümleri
 
-## 3. Grup Düğümü
+Ek yapısal bilgiler taşırlar:
 
-Diğer düğümleri görsel olarak bir arada tutan kapsayıcı düğümler. Bir grubu taşımak, içindeki tüm düğümleri de taşır.
-*   **En İyi Kullanım**: Alt sistemleri, VPC'leri veya mantıksal sınırları görselleştirme.
-*   **Kullanım**: Düğümleri seçin → Sağ Tıklayın → "Seçimi Grupla".
+- derinlik
+- ebeveyn
+- sol/sağ taraf
+- dal stili
 
-## 4. Yüzme Şeridi Düğümü
+### Architecture ve varlık tabanlı düğümler
 
-Süreçleri aktöre veya departmana göre düzenlemek için dikey veya yatay şeritler.
-*   **En İyi Kullanım**: Çok işlevli akış şemaları.
+Mimari diyagramlar sağlayıcı ikonları, sınırlar ve bölümler ile daha güçlü okunabilirlik kazanır.
 
-## 5. Görsel Düğümü
+### Journey ve deneyim odaklı düğümler
 
-İsteğe bağlı görselleri doğrudan tuvale yerleştirin.
-*   **En İyi Kullanım**: Logo, ekran görüntüsü veya referans diyagramı ekleme.
-*   **Kullanım**: Bir görsel dosyasını doğrudan tuvalin üzerine sürükleyip bırakın.
+Aşama, aktör ve skor gibi bilgilerin önemli olduğu süreçler için daha uygundur.
+
+### Medya ve wireframe düğümleri
+
+OpenFlowKit ayrıca görsel düğümleri ile browser/mobile wireframe yüzeylerini destekler.
+
+## Nasıl seçilmeli?
+
+Sadece şekle göre değil, diyagramın semantiğine göre seçim yapın:
+
+- genel süreçler için flow düğümleri
+- sistem topolojisi için architecture düğümleri
+- dallanan fikir yapıları için mind map düğümleri
+- deneyim haritaları için journey düğümleri
diff --git a/docs-site/src/content/docs/tr/openflow-dsl.md b/docs-site/src/content/docs/tr/openflow-dsl.md
index 02a5081..ad75389 100644
--- a/docs-site/src/content/docs/tr/openflow-dsl.md
+++ b/docs-site/src/content/docs/tr/openflow-dsl.md
@@ -1,403 +1,67 @@
 ---
 draft: false
 title: OpenFlow DSL
+description: OpenFlowKit diyagramları için editör-doğal metin temsili olan OpenFlow DSL’i kullanın.
 ---
 
-# 🧠 FlowMind DSL Sözdizimi Rehberi (V2)
+OpenFlow DSL, OpenFlowKit Studio’da kullanılan yerel metinsel temsildir. Kod tabanlı bir çalışma istiyor ama editör modeline yakın kalmak istiyorsanız en iyi seçenektir.
 
-FlowMind, diyagramları metin kullanarak tanımlamak için temiz, insan tarafından okunabilir bir DSL kullanır.
-Sürüm 2 şunları sunar:
+## Nerede doğru seçimdir?
 
-* Açık düğüm kimlikleri
-* Stil özellikleri
-* Gruplar / kapsayıcılar
-* Kenar özelleştirmesi
+OpenFlow DSL’i şu durumlarda tercih edin:
 
----
-
-# 1️⃣ Belge Başlığı
-
-Her DSL dosyası isteğe bağlı meta verilerle başlayabilir:
-
-```yaml
-flow: "Harika İş Akışım"
-direction: TB
-```
-
-### Alanlar
-
-| Alan        | Açıklama                                                    |
-| ----------- | -------------------------------------------------------------- |
-| `flow`      | Diyagramın başlığı                                           |
-| `direction` | Düzen yönü: `TB` (Yukarıdan Aşağıya) veya `LR` (Soldan Sağa) |
-
----
-
-# 2️⃣ Düğümler
-
-Düğümler diyagram öğelerini tanımlar.
-
-## Temel Sözdizimi
-
-```
-[start] Süreci Başlat
-[process] İsteği İşle
-[end] Süreci Sonlandır
-```
-
----
-
-## Açık Kimliklerle
-
-Özellikle büyük akışlarda netlik için kullanışlıdır.
-
-```
-[start] start: Süreci Başlat
-[process] proc1: İsteği İşle
-[end] end: Süreci Sonlandır
-
-start -> proc1
-proc1 -> end
-```
-
----
-
-## Özelliklerle
-
-Özellikler JSON benzeri sözdizimi kullanır:
-
-```
-[process] p1: Kritik Adım { color: "red", icon: "alert-triangle" }
-[system] db: Veritabanı { icon: "database" }
-```
-
-### Özellik Örnekleri
-
-| Özellik   | Amaç                  |
-| --------- | --------------------- |
-| `color`   | Düğüm rengini geçersiz kıl |
-| `icon`    | İkon ekle              |
-| `style`   | Özel stil değiştirici |
-
----
+- okunabilir ve editör-doğal bir sözdizimi istediğinizde
+- düzen öncesi deterministik yapısal değişiklikler yapmak istediğinizde
+- Mermaid’e göre OpenFlowKit’e daha yakın bir temsil gerektiğinde
+- yapay zekanın ham JSON yerine daha iyi hedefleyebileceği bir format istediğinizde
 
-## Desteklenen Düğüm Türleri
+Studio içindeki Code alanı, mevcut tuvalden DSL üretebilir ve DSL’i tekrar grafiğe uygulayabilir.
 
-| DSL Türü    | Şekil             | Varsayılan Renk |
-| ----------- | ----------------- | ------------- |
-| `start`     | Kapsül            | Zümrüt        |
-| `end`       | Kapsül            | Kırmızı       |
-| `process`   | Yuvarlak dikdörtgen | Arduvaz      |
-| `decision`  | Elmas             | Amber         |
-| `system`    | Özel düğüm        | Mor           |
-| `note`      | Yapışkan not      | Sarı          |
-| `section`   | Grup kapsayıcısı  | Mavi          |
-| `container` | Genel grup        | Gri           |
+Ekosistem uyumluluğu daha önemliyse Mermaid kullanın. Bkz. [Mermaid vs OpenFlow](/tr/mermaid-vs-openflow/).
 
-Bir düğüm bağlantıda referans alınır ancak tanımlanmazsa varsayılan olarak `process` kullanılır.
-
----
-
-# 3️⃣ Kenarlar (Bağlantılar)
-
-Bağlantılar düğümler arasındaki akışı tanımlar.
-
-## Temel Bağlantı
-
-```
-Süreci Başlat -> İsteği İşle
-```
-
----
-
-## Kenar Türleri
-
-| Sembol | Anlam       |
-| ------ | ----------- |
-| `->`   | Düz çizgi   |
-| `-->`  | Kavisli çizgi |
-| `..>`  | Kesik çizgi |
-| `==>`  | Kalın çizgi |
-
-Örnek:
-
-```
-A ..> B
-C ==> D
-```
-
----
-
-## Etiketli Bağlantılar
-
-Pipe karakterleri kullanın:
-
-```
-Geçerli mi? ->|Evet| Veriyi Kaydet
-Geçerli mi? ->|Hayır| Hata Döndür
-```
-
----
-
-## Kenar Özellikleri
-
-```
-A -> B { style: "dashed", label: "Async" }
-```
-
----
-
-# 4️⃣ Gruplar
-
-Düğümleri kümelemek için `group` kullanın.
-
-```
-group "Backend Servisleri" {
-    [process] api: API Sunucusu
-    [system] db: Veritabanı
-    api -> db
-}
-```
-
-Gruplar mantıksal alanları görsel olarak ayırmaya yardımcı olur.
-
----
-
-# 5️⃣ Yorumlar
-
-`#` ile başlayan satırlar yoksayılır.
-
-```
-# Bu bir yorumdur
-[start] Başla
-```
-
----
-
-# ✅ Tam Örnek
+## Temel belge yapısı
 
 ```yaml
-flow: "Kullanıcı Giriş Akışı"
+flow: "Kullanıcı Kaydı"
 direction: TB
-
-# Düğümleri Tanımla
-[start] user: Kullanıcı
-[process] login: Giriş Sayfası { icon: "log-in" }
-
-group "Kimlik Doğrulama" {
-    [system] auth: Auth Servisi
-    [decision] check: Geçerli mi?
-}
-
-[end] dash: Gösterge Paneli
-[end] err: Hata
-
-# Mantığı Tanımla
-user -> login
-login -> auth
-auth -> check
-
-check ->|Evet| dash { color: "green" }
-check ->|Hayır| err { color: "red", style: "dashed" }
 ```
 
----
-
-# 🤖 LLM Ajan İstem Şablonu
+Yaygın yön değerleri:
 
-Bir LLM ajanı kullanarak FlowMind DSL oluşturmak isteyenler aşağıdaki istemi kullanabilir:
+- `TB`
+- `LR`
+- `RL`
+- `BT`
 
----
+## Düğümler
 
-## LLM için Kopyala-Yapıştır İstemi
+Kararlı kimliklere sahip açık düğüm tanımları kullanın:
 
+```text
+node signup [label: "Kayıt Formu"]
+node verify [label: "E-postayı Doğrula"]
+node success [label: "Çalışma Alanı Hazır", shape: capsule]
 ```
-Sen uzman bir FlowMind DSL V2 oluşturucususun.
-
-Görevin, kullanıcının iş akışı açıklamasını geçerli FlowMind DSL'ye dönüştürmektir.
-
-Aşağıda tanımlanan FlowMind DSL V2 spesifikasyonunu kesinlikle takip etmelisin.
-
-========================================
-FLOWMIND DSL V2 SPESİFİKASYONU
-========================================
-
-1. BELGE BAŞLIĞI (Zorunlu)
-
-Her çıktı şununla başlamalıdır:
-
-flow: "Başlık Buraya"
-direction: TB veya LR
-
-Kurallar:
-- Her zaman anlamlı bir başlık oluştur.
-- Kullanıcı açıkça yatay düzen belirtmediği sürece TB'yi varsayılan olarak kullan.
-
-----------------------------------------
-
-2. DÜĞÜM TANIMLAMA KURALLARI
-
-Düğüm sözdizimi:
-
-[tür] kimlik: Etiket { isteğe_bağlı_özellikler }
-
-Örnek:
-[process] p1: İsteği İşle
-[decision] d1: Geçerli mi? { icon: "help-circle" }
-
-Kurallar:
-- HER ZAMAN açık kimlikler kullan.
-- Kimlikler kısa, küçük harf ve boşluksuz olmalıdır.
-- Kimlikler benzersiz olmalıdır.
-- Anlamlı isimler kullan (start, login, checkAuth, db, vb.).
-- Etiketleri kimlik olarak KULLANMA.
-- Düğüm tanımlamalarını ATLAMA.
-
-Bir düğüm bağlantıda referans alınıyorsa önce tanımlanmış OLMALIDIR.
-
-----------------------------------------
-
-3. DESTEKLENEN DÜĞÜM TÜRLERİ
-
-YALNIZCA bu türleri kullan:
 
-start
-end
-process
-decision
-system
-note
-section
-container
+İyi kimlikler:
 
-Kılavuz:
+- kısa
+- küçük harfli
+- anlamlı
+- düzenlemeler arasında mümkün olduğunca kararlı
 
-start      → akışın başlangıcı
-end        → bitiş durumları
-process    → eylemler veya adımlar
-decision   → dallanma mantığı
-system     → harici sistem/servis/veritabanı
-note       → açıklamalar
-section    → ana gruplu alan
-container  → genel gruplama
+## Kenarlar
 
-----------------------------------------
-
-4. DÜĞÜM ÖZELLİKLERİ (İsteğe Bağlı)
-
-Özellikler JSON benzeri sözdizimi kullanır:
-
-{ color: "red", icon: "database", style: "dashed" }
-
-Kurallar:
-- Özelliği yalnızca anlamlıysa ekle.
-- Stili minimal tut.
-- Desteklenmeyen özellikler uydurma.
-
-----------------------------------------
-
-5. KENARLAR (BAĞLANTILAR)
-
-Temel sözdizimi:
-kimlik1 -> kimlik2
-
-Kenar türleri:
-->   düz
--->  kavisli
-..>  kesik
-==>  kalın
-
-Etiketli kenarlar:
-kimlik1 ->|Evet| kimlik2
-
-Özellikli kenar:
-kimlik1 -> kimlik2 { label: "Async", style: "dashed" }
-
-Kurallar:
-- Her zaman etiket değil kimlik kullanarak bağlan.
-- Karar düğümleri etiketli kenarlar KULLANMALIDIR.
-- Karardan gelen her dal açık olmalıdır.
-- Yalnız düğüm bırakma.
-
-----------------------------------------
-
-6. GRUPLAR
-
-Mantıksal kümeleme mevcutsa gruplama kullan.
-
-Sözdizimi:
-
-group "Grup Adı" {
-    düğüm tanımlamaları
-    iç bağlantılar
-}
-
-Kurallar:
-- Gruplar yalnızca ilgili düğümleri kapsamalıdır.
-- Gruplar arası bağlantılar grup bloğunun dışında tanımlanmalıdır.
-
-----------------------------------------
-
-7. YORUMLAR
-
-Yorumlar için # kullan; aşırıya kaçma.
-Aşırı yorum yapma.
-
-----------------------------------------
-
-8. ÇIKTI KURALLARI (KATI)
-
-ZORUNLU:
-
-- YALNIZCA geçerli FlowMind DSL çıktısı üret
-- Açıklama YAPMA
-- Markdown biçimlendirmesi KULLANMA
-- Kod bloğuna SARMA
-- Yorum EKLEMEema
-- Ne yaptığını AÇIKLAMA
-- DSL dışında hiçbir şey ÇIKARMAK
-
-Kullanıcı açıklaması belirsizse:
-- Makul varsayımlar yap
-- Mantıklı yapı seç
-- Akışı temiz ve okunabilir tut
-
-========================================
-MANTIK DÖNÜŞÜM STRATEJİSİ
-========================================
-
-Kullanıcı girdisini dönüştürürken:
-
-1. Belirle:
-   - Başlangıç olayı
-   - Bitiş durumları
-   - Eylemler
-   - Kararlar
-   - Harici sistemler
-   - Mantıksal kümeler
-
-2. Dönüştür:
-   - Olaylar → start / end
-   - Eylemler → process
-   - Dallanma → decision
-   - Veritabanları/API'ler → system
-   - Paralel mantık → ayrı dallar
-   - Hata yolları → açık end düğümleri
-
-3. Sağla:
-   - Her yol bir uca ulaşır
-   - Yalnız düğüm yok
-   - Temiz mantıksal okunabilirlik
-
-========================================
-KULLANICI İSTEĞİ
-========================================
-
-Aşağıdaki iş akışı açıklamasını FlowMind DSL V2'ye dönüştür:
+```text
+signup -> verify
+verify -> success
+```
 
-{{KULLANICI_İŞ_AKIŞI_AÇIKLAMASI}}
+Gerekirse etiket ve ek meta veri de ekleyebilirsiniz.
 
-DSL'yi şimdi oluştur.
-```
+## Neden ekipler bunu kullanır?
 
----
+- OpenFlowKit ana düzenleme ortamıysa
+- graf kod olarak incelenecekse
+- editör içi sadakat uyumluluktan daha önemliyse
+- yapay zekaya editör-doğal bir hedef sağlamak istiyorsanız
diff --git a/docs-site/src/content/docs/tr/payment-flow.md b/docs-site/src/content/docs/tr/payment-flow.md
new file mode 100644
index 0000000..e6d79a8
--- /dev/null
+++ b/docs-site/src/content/docs/tr/payment-flow.md
@@ -0,0 +1,32 @@
+---
+draft: false
+title: Payment Flow Visualization
+description: Abonelik, checkout, retry ve istisna yolları içeren ödeme sistemlerini OpenFlowKit ile modelleyin.
+---
+
+Ödeme sistemleri, mutlu yolun ötesinde retry, hata işleme, manuel inceleme ve bildirim dalları içerdiği için OpenFlowKit için çok uygun bir kullanım alanıdır.
+
+## İyi bir ödeme diyagramı neleri içermelidir?
+
+- giriş olayı
+- tahsilat veya yetkilendirme denemesi
+- başarı ve başarısızlık dalları
+- retry mantığı
+- manuel inceleme
+- kullanıcı bildirimi
+- son hesap durumu
+
+## Güçlü başlangıç seçenekleri
+
+- boş flowchart tuvali
+- SaaS veya ödeme odaklı şablon
+- Flowpilot istemi
+- OpenFlow DSL ile metin tabanlı taslak
+
+## Önerilen akış
+
+1. önce mutlu yolu üretin veya çizin
+2. tüm hata ve retry dallarını ekleyin
+3. kenar etiketlerini açık hale getirin
+4. düzen ile yerleşimi temizleyin
+5. paydaşlar için görsel, düzenleme için JSON saklayın
diff --git a/docs-site/src/content/docs/tr/playback-history.md b/docs-site/src/content/docs/tr/playback-history.md
index f11cc93..20da6dc 100644
--- a/docs-site/src/content/docs/tr/playback-history.md
+++ b/docs-site/src/content/docs/tr/playback-history.md
@@ -1,22 +1,41 @@
 ---
 draft: false
 title: Playback & History
+description: Çalışmanızı geri kazanmak ve diyagram evrimini izlemek için undo, snapshot ve oynatma durumunu kullanın.
 ---
 
+OpenFlowKit’te iki farklı ama ilişkili kurtarma sistemi vardır:
 
-FlowMind, yaptığınız her değişikliği otomatik olarak izler. **Oynatma** özelliği, karar sürecinizi gözden geçirmek için zamanda geriye gitmenizi sağlar.
+- standart undo/redo geçmişi
+- belge veya sekme üzerinde saklanan snapshot tabanlı geçmiş ve playback durumu
 
-## Geçmiş Zaman Çizelgesi
+## Undo ve redo
 
-Geçmiş Zaman Çizelgesini açmak için üst gezinme çubuğundaki **Saat İkonuna** tıklayın.
+Kullanın:
 
-### Sürüm Kontrol Noktaları
-Önemli bir eylem gerçekleştirdiğinizde (düğüm ekleme, renk değiştirme, otomatik düzen) her seferinde bir "anlık görüntü" kaydedilir.
-*   **Geri Al/Yeniden Yap**: Aynı sistemi kullanarak ileri geri atlar (`Cmd+Z`).
+- `Cmd/Ctrl + Z` undo
+- `Cmd/Ctrl + Shift + Z` redo
 
-## Oynatma Modu
+Bu, aktif düzenleme sırasında en hızlı geri dönüş yoludur.
 
-Diyagramınızın baştan sona inşa edildiğini izlemek için Geçmiş panelindeki **Oynat** düğmesine basın.
-*   **Hız Kontrolü**: Oynatma hızını ayarlayın (1x, 2x, 4x).
-*   **Kaydırma**: Sürgüyü belirli noktalara sürükleyin.
-*   **Geri Yükle**: Daha eski bir sürümü beğendiniz mi? Tuvali o duruma mükemmel biçimde geri döndürmek için "Geri Yükle"ye tıklayın.
+## Snapshot’lar
+
+Şu durumlarda snapshot kullanın:
+
+- büyük bir yapay zeka yeniden yazımı öncesinde
+- diyagram ailesi yönünü değiştirirken
+- Studio’dan geniş kapsamlı metin uygulamadan önce
+- büyük bir mimari haritayı yeniden yapılandırırken
+
+Snapshot’lar, özellikle büyük değişikliklerde gerçek güvenlik ağıdır.
+
+## Playback modeli
+
+Veri modeli playback sahneleri, adımlar ve zamanlı dizileri destekler. Bu nedenle video veya GIF gibi animasyonlu dışa aktarma akışlarıyla birlikte anlamlıdır.
+
+## Pratik öneri
+
+- küçük düzeltmeler için undo/redo kullanın
+- önemli kilometre taşları için snapshot alın
+
+Bir sonraki işlem grafiği ciddi biçimde değiştirecekse önce snapshot oluşturun.
diff --git a/docs-site/src/content/docs/tr/prompting-agents.md b/docs-site/src/content/docs/tr/prompting-agents.md
new file mode 100644
index 0000000..bfa31ac
--- /dev/null
+++ b/docs-site/src/content/docs/tr/prompting-agents.md
@@ -0,0 +1,35 @@
+---
+draft: false
+title: Prompting AI Agents
+description: OpenFlowKit için diyagram çıktısı isterken kodlama yardımcılarına ve AI sistemlerine daha iyi istemler yazın.
+---
+
+Cursor, Copilot, ChatGPT, Claude veya başka bir ajan kullanıyor olmanızdan bağımsız olarak; iyi istem kalitesi, model markasından daha belirleyicidir.
+
+## Ne istemelisiniz?
+
+Çıktı türünü açıkça belirtin:
+
+- OpenFlow DSL
+- Mermaid
+- diyagram planı
+
+“Bir diyagram yap” demek yerine hangi formatı istediğinizi söyleyin.
+
+## Güçlü istem yapısı
+
+Şunları ekleyin:
+
+- diyagramın amacı
+- hedef kitle
+- gerekli sistemler veya aktörler
+- önemli dallar ya da hata yolları
+- tercih edilen yön (`TB`, `LR` gibi)
+- tercih edilen sözdizimi
+
+## İlgili sayfalar
+
+- [AI Generation](/tr/ai-generation/)
+- [Ask Flowpilot](/tr/ask-flowpilot/)
+- [OpenFlow DSL](/tr/openflow-dsl/)
+- [Mermaid Integration](/tr/mermaid-integration/)
diff --git a/docs-site/src/content/docs/tr/properties-panel.md b/docs-site/src/content/docs/tr/properties-panel.md
index 11d3130..ffcf634 100644
--- a/docs-site/src/content/docs/tr/properties-panel.md
+++ b/docs-site/src/content/docs/tr/properties-panel.md
@@ -1,29 +1,49 @@
 ---
 draft: false
 title: Properties Panel
+description: OpenFlowKit’te düğüm, kenar, toplu düzenleme ve Studio ile ilişkili ayarlar için sağ taraftaki denetçiyi kullanın.
 ---
 
+Properties Panel, bir düğüm veya kenar seçtiğinizde açılan sağ taraf denetçisidir. Kabaca doğru olan yapıyı kesin düzeye taşıyan ana yüzeydir.
 
-Özellikler Paneli, bireysel düğümleri özelleştirmek için kontrol merkezinizdir. Bir düğüm seçtiğinizde ekranın sağ tarafında görünür.
+## Ne zaman kullanılmalı?
 
-## Düğüm Özelleştirme
+Şu durumlarda kullanın:
 
-### Etiket Düzenleme
-Herhangi bir düğümü doğrudan panelden yeniden adlandırabilirsiniz. Etiket, tuval üzerinde gerçek zamanlı olarak güncellenir.
+- yapı doğru ama ayrıntılar yanlışsa
+- etiket, renk, şekil ve tipografi gibi ayarlar kesinleşecekse
+- kenar etiketleri veya rota davranışı ayarlanacaksa
+- aileye özgü alanlar doğrudan tuvalde düzenlemek için uygun değilse
 
-### Görsel Stil
-Diyagramlarınızı özel stillerle öne çıkarın:
-*   **Renkler**: Anlamlı renk paletinden seçim yapın (Tehlike için Kırmızı, Başarı için Yeşil vb.).
-*   **İkonlar**: Anında tanınabilir hale getirmek için herhangi bir düğüme ikon ekleyin. Tam Lucide React ikon kütüphanesini destekliyoruz.
-*   **Çizgi Stili**: `Düz` ve `Kesik` kenarlıklar arasında geçiş yapın (geçici veya gelecekteki durumları temsil etmek için harikadır).
+## Sağ panelin davranışı
 
-### Düzen ve Boyutlandırma
-*   **Genişlik/Yükseklik**: Piksel mükemmeliyetinde hizalama için boyutları manuel olarak ayarlayın.
-*   **Konum**: Tam X/Y koordinatlarını görüntüleyin ve düzenleyin.
+- tek düğüm seçiliyse: düğüm denetçisi
+- birden fazla düğüm seçiliyse: toplu düzenleme
+- tek kenar seçiliyse: kenar denetçisi
+- Studio aktifse: AI, kod, lint veya ilgili Studio görünümü
 
-## Toplu Düzenleme
+## Düğüm düzenleme
 
-> [!TIP]
-> Hepsini aynı anda düzenlemek için birden fazla düğümü seçebilirsiniz (`Shift + Tıklama`)!
+Tipik olarak şunlar bulunur:
 
-Birden fazla düğüm seçildiğinde, Özellikler Paneli değişiklikleri (renk veya ikon gibi) **tüm** seçili düğümlere uygular.
+- içerik
+- şekil
+- renk
+- ikon
+- tipografi
+- görsel ayarları
+- browser/mobile varyant ayarları
+
+## Kenar düzenleme
+
+Kenar seçildiğinde tipik olarak:
+
+- etiket
+- rota
+- görünüm ayarları
+
+alanları düzenlenebilir.
+
+## Toplu düzenleme
+
+Birden fazla düğüm seçildiğinde ortak stil ve paylaşılan alanları tek seferde güncellemek için toplu düzenleme modu açılır.
diff --git a/docs-site/src/content/docs/tr/quick-start.md b/docs-site/src/content/docs/tr/quick-start.md
index 026429b..b1cd48d 100644
--- a/docs-site/src/content/docs/tr/quick-start.md
+++ b/docs-site/src/content/docs/tr/quick-start.md
@@ -1,43 +1,73 @@
 ---
 draft: false
 title: Quick Start
+description: İlk OpenFlowKit diyagramınızı tuval, şablonlar, yapay zeka, kod veya yapılandırılmış içe aktarma ile oluşturun.
 ---
 
-Bu kılavuz, OpenFlowKit'te 2 dakikadan kısa sürede ilk diyagramınızı oluşturmanıza yardımcı olacaktır.
+Bu sayfa, mevcut üründe hızlıca üretken olmanız için en kısa güvenilir yoldur.
 
-## 1. Yeni Bir Akış Oluşturun
+## 1. Yeni bir belge açın veya oluşturun
 
-Kontrol Panelinden **"Yeni Oluştur"** düğmesine tıklayın (veya \`Cmd+N\` tuşuna basın). Temiz bir tuvale yönlendirileceksiniz.
+Ana ekrandan şunları yapabilirsiniz:
 
-## 2. Yapay Zeka Üretimini Kullanma
+- yeni akış oluşturmak
+- tarayıcıda kayıtlı mevcut bir akışı açmak
+- kayıtlı bir akışı çoğaltmak
+- JSON diyagram belgesi içe aktarmak
 
-Başlamanın en hızlı yolu bir istemle başlamaktır.
+Her belge editör içinde ayrı bir sekmede açılır.
 
-1.  Ekranın alt kısmındaki komut çubuğunu bulun.
-2.  Akışınızın bir açıklamasını yazın.
-    *   *Örnek:* "E-posta doğrulama ve veritabanı kontrolleri içeren bir kullanıcı kayıt akışı oluştur."
-3.  \`Enter\` tuşuna basın.
+## 2. Başlangıç noktanızı seçin
 
-OpenFlowKit sizin için eksiksiz bir diyagram yapısı oluşturacaktır.
+Elinizde hangi bilgi varsa ona uygun giriş yolunu seçin.
 
-## 3. Düğümleri Düzenleme
+### Boş tuval
 
-Oluşturulduktan sonra diyagramı iyileştirebilirsiniz:
+Yapıyı zaten biliyorsanız ve doğrudan çizmek istiyorsanız bunu kullanın.
 
-*   **Taşı**: Herhangi bir düğümü yeniden konumlandırmak için tıklayın ve sürükleyin.
-*   **Metni Düzenle**: Etiketini değiştirmek için bir düğüme çift tıklayın.
-*   **Bağla**: Bir düğümü başka bir düğüme bağlamak için düğüm kenarındaki tutamaclardan (noktalar) sürükleyin.
+### Şablon
 
-## 4. Akıllı Düzen Kullanma
+`Cmd/Ctrl + K` ile Komut Merkezi’ni açın ve **Start from Template** seçin. Şablonlar akış diyagramları, bulut mimarileri, zihin haritaları, journey akışları ve wireframe’leri kapsar.
 
-Diyagramınız karmaşıklaşırsa, üst araç çubuğundaki **"Otomatik Düzen"** düğmesine tıklayın. OpenFlowKit, düğümlerinizi temiz bir hiyerarşi içinde otomatik olarak düzenlemek için ELK düzen motorunu kullanır.
+### Varlıklar
 
-## 5. Dışa Aktarma
+Komut Merkezi içindeki **Assets** görünümünü kullanarak not, metin, bölüm, wireframe, görsel veya sağlayıcı ikonları ekleyin.
 
-Akışınızdan memnun kaldığınızda:
+### Yapay zeka
 
-1.  Sağ üstteki **Dışa Aktar** düğmesine tıklayın.
-2.  Formatınızı seçin (PNG, SVG veya JSON).
-3.  Dosyanızı indirin.
+Sağ panelde Studio’yu açın ve **Flowpilot** sekmesine geçin. Örnek istem:
 
-[YER TUTUCU: Oluşturma sürecini gösteren GIF]
+```text
+Kayıt, e-posta doğrulama, ekip daveti,
+çalışma alanı oluşturma, ödeme kurulumu
+ve ilk başarı adımını içeren bir SaaS onboarding akışı oluştur.
+```
+
+### Kod
+
+Elinizde Mermaid veya OpenFlow DSL varsa Studio içindeki **Code** sekmesinden doğrudan yapıştırıp uygulayın.
+
+### Yapılandırılmış giriş
+
+Elinizde SQL, OpenAPI, Terraform veya Kubernetes girdisi varsa Studio içe aktarma akışlarını kullanın. Bkz. [Import from Structured Data](/tr/import-from-data/) ve [Infrastructure Sync](/tr/infra-sync/).
+
+## 3. Taslağı iyileştirin
+
+İlk taslak tuvale geldikten sonra:
+
+- düğümleri kabaca konumlandırın
+- kesin düzenlemeler için [Properties Panel](/tr/properties-panel/) kullanın
+- yapı doğru ama yerleşim dağınıksa [Smart Layout](/tr/smart-layout/) çalıştırın
+- arama, ek varlık ve iş akışı geçişleri için [Command Center](/tr/command-center/) kullanın
+
+## 4. Kurtarma noktaları oluşturun
+
+Büyük bir yapay zeka yeniden yazımı veya geniş içe aktarma yenilemesinden önce anlık görüntü geçmişinizi kontrol edin. Bkz. [Playback & History](/tr/playback-history/).
+
+## 5. Paylaşın veya dışa aktarın
+
+Diyagramı dokümantasyon, tasarım veya iş birliği akışına taşımaya hazır olduğunuzda dışa aktarma menüsünü kullanın.
+
+- [Choose an Export Format](/tr/choose-export-format/)
+- [Exporting](/tr/exporting/)
+- [Collaboration & Sharing](/tr/collaboration-sharing/)
diff --git a/docs-site/src/content/docs/tr/roadmap.md b/docs-site/src/content/docs/tr/roadmap.md
index 4045d0f..9f6b06d 100644
--- a/docs-site/src/content/docs/tr/roadmap.md
+++ b/docs-site/src/content/docs/tr/roadmap.md
@@ -1,10 +1,15 @@
 ---
 draft: false
 title: Roadmap
+description: Yol haritası fikirleri ile şu anda belgelenen ürün davranışını birbirine karıştırmamak için bu sayfayı referans alın.
 ---
 
-Yol haritası ayrıntıları yenileniyor.
+Bu dokümantasyon sitesi, mevcut gönderilmiş davranışı ve ürün yolunda zaten aktif olan yüzeyleri anlatır.
 
-## Yakında
+## Bu sayfanın amacı
 
-Bu sayfa, ürün yönü netleştiğinde güncellenmiş yol haritasıyla geri dönecek.
+Bu sayfayı bir vaat listesi olarak değil, içerik politikası notu olarak düşünün.
+
+- Doküman sayfaları mevcut ürün davranışını anlatır.
+- Strateji ve yol haritası belgeleri geleceğe dönük yönü ayrı olarak anlatabilir.
+- Henüz üründe olmayan bir yetenek, dokümantasyonda gönderilmiş gibi anlatılmamalıdır.
diff --git a/docs-site/src/content/docs/tr/smart-layout.md b/docs-site/src/content/docs/tr/smart-layout.md
index 54ed19b..83e0362 100644
--- a/docs-site/src/content/docs/tr/smart-layout.md
+++ b/docs-site/src/content/docs/tr/smart-layout.md
@@ -1,25 +1,43 @@
 ---
 draft: false
 title: Smart Layout
+description: ELK tabanlı düzen ile kaba grafikleri daha okunabilir diyagramlara dönüştürün.
 ---
 
+OpenFlowKit, kaba grafikleri hızlı biçimde daha okunabilir diyagramlara dönüştürmek için ELK tabanlı düzen stratejileri kullanır.
 
-FlowMind, **ELK (Eclipse Layout Kernel)** tarafından desteklenen güçlü bir "Akıllı Düzen" motoru içerir.
+## Otomatik düzen ne zaman kullanılmalı?
 
-## Nasıl Çalışır?
+- şablonun yapısı doğru ama görünümü dağınıksa
+- yapay zeka doğru düğümleri üretip kötü konumlandırdıysa
+- kod veya içe aktarma sonrası normalizasyon gerekiyorsa
+- elle eklenen dallar yüzünden boşluklar bozulduysa
 
-Karmaşık diyagramları elle çizmek sıkıcıdır. Mantığı düşünmek yerine kutucukları HIZALAMAKLA zaman harcarsınız.
-Akıllı Düzen, düğümleri otomatik olarak düzenlemek için kuvvet yönlü bir algoritma çalıştırarak bu sorunu çözer.
+## Nasıl çalıştırılır?
 
-### Kullanım
-1.  Komut Merkezindeki (veya üst araç çubuğundaki) **Düzen** düğmesine tıklayın.
-2.  Motor, her düğüm ve kenar için en uygun konumu hesaplar.
-3.  Diyagram, yeni yapısına akıcı biçimde animasyonla geçer.
+Komut Merkezi’ni açın ve **Auto Layout** seçin. Editör yön, algoritma ve boşluk tercihlerini düzen motoruna geçirir.
 
-### Özellikler
-*   **Hiyerarşik Katmanlama**: Akış şemaları ve organizasyon ağaçları için mükemmeldir.
-*   **Çakışma Algılama**: Düğümlerin asla üst üste gelmemesini sağlar.
-*   **Kenar Yönlendirme**: Daha temiz bir okunabilirlik için çizgi kesişimlerini en aza indirir.
+Yaygın yönler:
 
-> [!TIP]
-> Ham Mermaid metni içe aktardıktan veya yapay zeka ile büyük bir akış oluşturduktan sonra sonucu anında düzenlemek için Akıllı Düzen'i kullanın.
+- `TB`
+- `LR`
+- `RL`
+- `BT`
+
+## Düzenin güçlü olduğu alanlar
+
+- akış şemaları
+- mimari grafikler
+- dallanan durum diyagramları
+- yapay zeka ile üretilmiş ilk taslaklar
+
+Elle kurgulanmış sunum tarzı diyagramlarda ise her zaman sihirli sonuç vermez.
+
+## Pratik strateji
+
+1. önce doğru düğüm ve kenarları kurun
+2. ardından düzeni çalıştırın
+3. gerekirse bölümlerle gruplayın
+4. son görsel ayarları elle yapın
+
+Yerleşimi düzen çalıştırmadan önce elle mükemmelleştirmeye çalışmak çoğu zaman boşa emektir.
diff --git a/docs-site/src/content/docs/tr/studio-overview.md b/docs-site/src/content/docs/tr/studio-overview.md
new file mode 100644
index 0000000..268ab9a
--- /dev/null
+++ b/docs-site/src/content/docs/tr/studio-overview.md
@@ -0,0 +1,23 @@
+---
+draft: false
+title: Studio Overview
+description: OpenFlowKit Studio yüzeyinde AI, kod, içe aktarma, altyapı çözümleme ve mimari lint akışlarını anlayın.
+---
+
+Studio, görsel tuvalin yanında çalışan yapılandırılmış üretim alanıdır. Tuval tek başına en iyi araç olmadığında Studio’ya geçersiniz.
+
+## Sekmeler
+
+| Sekme | Amaç |
+| --- | --- |
+| **Flowpilot** | AI ile üretim ve revizyon |
+| **Code** | OpenFlow DSL ve Mermaid ile çalışma |
+| **Infra** | Destekli altyapı girdileri için parse akışı |
+| **Lint** | Mimari kural ve ihlal görünümü |
+
+## Ne zaman açılmalı?
+
+- istemden diyagram üretirken
+- kod tabanlı temsillerle çalışırken
+- altyapı veya yapılandırılmış veri içe aktarırken
+- mimari kuralları doğrularken
diff --git a/docs-site/src/content/docs/tr/templates-assets.md b/docs-site/src/content/docs/tr/templates-assets.md
new file mode 100644
index 0000000..b48faee
--- /dev/null
+++ b/docs-site/src/content/docs/tr/templates-assets.md
@@ -0,0 +1,24 @@
+---
+draft: false
+title: Templates & Starter Flows
+description: Yerleşik şablonlar, sağlayıcı ikon varlıkları ve başlangıç paketleriyle diyagramlara daha hızlı başlayın.
+---
+
+Şablonlar ve varlıklar, boş tuval problemini azaltır. Yapı veya görsel sistem için güçlü bir başlangıç istediğinizde bu yüzeyleri kullanın.
+
+## Şablonlar
+
+Başlangıç grafikleri sunar:
+
+- abonelik yükseltme akışları
+- incident escalation akışları
+- release train yapıları
+- bulut mimarisi başlangıçları
+
+## Varlıklar
+
+- genel yapı taşları
+- wireframe yüzeyleri
+- sağlayıcı ikonları
+
+Şablon tüm iskeleti, varlık ise parça düzeyinde eklemeyi çözer.
diff --git a/docs-site/src/content/docs/tr/theming.md b/docs-site/src/content/docs/tr/theming.md
new file mode 100644
index 0000000..2f1e7e2
--- /dev/null
+++ b/docs-site/src/content/docs/tr/theming.md
@@ -0,0 +1,46 @@
+---
+draft: false
+title: Theming
+description: OpenFlowKit içinde tasarım sistemleri kullanarak her diyagramı tek tek stillendirmeden tutarlı bir görsel dil kurun.
+---
+
+OpenFlowKit, tema yönetimini tek tek diyagram stilleri yerine tekrar kullanılabilir tasarım sistemleri üzerinden ele alır.
+
+## OpenFlowKit içinde theming ne anlama gelir?
+
+Theming ayrı bir render modu değildir. Diyagramların oturumlar ve ekipler arasında nasıl göründüğünü belirleyen tasarım sistemi katmanıdır.
+
+Şu durumlarda kullanın:
+
+- birden çok diyagramın tutarlı görünmesi gerektiğinde
+- farklı hedef kitleler için markalı varyantlar oluşturmak istediğinizde
+- her yeni akışta renk ve stil ayarlarını yeniden yapmak istemediğinizde
+- stil tanımlarını ortamlar arasında taşımak gerektiğinde
+
+## Önerilen kullanım şekli
+
+Pratik akış şu şekildedir:
+
+1. Kararlı bir varsayılan tasarım sistemi ile başlayın.
+2. Marka veya kullanım bağlamı değiştiğinde onu çoğaltın.
+3. Diyagramları tek tek yeniden biçimlendirmek yerine aktif tasarım sistemini kullanın.
+4. Stil tanımını tarayıcı oturumu dışına taşımak gerektiğinde tema JSON'unu dışa aktarın.
+
+## Nereden yönetilir?
+
+Komut Merkezi üzerinden tasarım sistemi araçlarıyla şunları yapabilirsiniz:
+
+- aktif tasarım sistemini değiştirme
+- mevcut temaları çoğaltma ve düzenleme
+- JSON içe aktarma
+- aktif temayı dışa aktarma
+
+## Sistemi küçük tutun
+
+Fazla sayıda tema çoğu zaman esneklikten çok tutarsızlık üretir. Çoğu ekip için bir varsayılan sistem ve az sayıda varyant en sürdürülebilir yaklaşımdır.
+
+## İlgili sayfalar
+
+- [Design Systems & Branding](/tr/design-systems-branding/)
+- [Command Center](/tr/command-center/)
+- [Figma Design Import](/tr/figma-design-import/)
diff --git a/docs-site/src/content/docs/tr/v1-beta-launch.md b/docs-site/src/content/docs/tr/v1-beta-launch.md
new file mode 100644
index 0000000..ed03e67
--- /dev/null
+++ b/docs-site/src/content/docs/tr/v1-beta-launch.md
@@ -0,0 +1,37 @@
+---
+draft: false
+title: V1 Beta Launch
+description: OpenFlowKit V1 beta dönüm noktasını ve o sürümün getirdiği ürün yönünü özetleyen tarihsel sürüm notu.
+---
+
+Bu sayfa, V1 beta sürümünü güncel özellik taahhüdü olarak değil, ürün tarihinin bir notu olarak korur.
+
+## V1 beta neyi temsil ediyordu?
+
+V1 beta, OpenFlowKit'in basit bir akış şeması aracından daha geniş bir local-first diyagram çalışma alanına dönüştüğü dönüm noktasıydı.
+
+Bu sürümle birlikte ürün yönü netleşti:
+
+- genel whiteboard yerine teknik diyagramlama odağı
+- varsayılan yaklaşım olarak local-first düzenleme
+- görsel tuvale ek olarak kod ve içe aktarma temelli çalışma akışları
+- ölü çıktı yerine düzenlenebilir başlangıç noktası olarak yapay zeka üretimi
+
+## Bu sürüm notu neden korunuyor?
+
+Tarihsel sürüm notları şu konular için değerlidir:
+
+- ürün konumlandırmasının nasıl evrildiğini görmek
+- o dönemde hangi yeteneklerin temel kabul edildiğini anlamak
+- sonraki mimari ve iş akışı kararlarının neden alındığını takip etmek
+
+## Bunu tarih olarak okuyun, güncel yol haritası olarak değil
+
+O dönem öne çıkan bazı maddeler zamanla şekil değiştirdi, olgunlaştı veya daha güncel uygulamalarla yer değiştirdi. Güncel davranış için bu sayfayı değil, mevcut ürün dokümantasyonunu referans alın.
+
+## Güncel referanslar
+
+- [Introduction](/tr/introduction/)
+- [Quick Start](/tr/quick-start/)
+- [Studio Overview](/tr/studio-overview/)
+- [Roadmap](/tr/roadmap/)
diff --git a/docs-site/src/content/docs/v1-beta-launch.md b/docs-site/src/content/docs/v1-beta-launch.md
new file mode 100644
index 0000000..ca10076
--- /dev/null
+++ b/docs-site/src/content/docs/v1-beta-launch.md
@@ -0,0 +1,37 @@
+---
+draft: false
+title: V1 Beta Launch
+description: Historical release note for the OpenFlowKit V1 beta milestone and the product direction it introduced.
+---
+
+This page records the original V1 beta milestone as a product-history note rather than a current feature promise.
+
+## What the V1 beta represented
+
+The V1 beta marked the point where OpenFlowKit stopped being treated as a basic flowchart tool and became a broader local-first diagramming workspace.
+
+That milestone brought the product direction into focus:
+
+- technical diagramming instead of generic whiteboarding
+- local-first editing as a default posture
+- code-backed and import-backed workflows alongside the visual canvas
+- AI-assisted generation as an editable starting point rather than a dead output
+
+## Why keep this release note
+
+Historical release notes are useful when you want to understand:
+
+- how the product positioning evolved
+- which capabilities were considered foundational at the time
+- why some later architecture and workflow decisions exist
+
+## Read it as history, not roadmap
+
+Some items that were exciting at the time have since changed shape, matured, or been replaced by more current implementations. For current behavior, use the product docs instead of treating this page as a live feature contract.
+
+## Better current references
+
+- [Introduction](/introduction/)
+- [Quick Start](/quick-start/)
+- [Studio Overview](/studio-overview/)
+- [Roadmap](/roadmap/)
diff --git a/docs-site/src/pages/index.astro b/docs-site/src/pages/index.astro
new file mode 100644
index 0000000..8bf4647
--- /dev/null
+++ b/docs-site/src/pages/index.astro
@@ -0,0 +1,133 @@
+---
+import StarlightPage from '@astrojs/starlight/components/StarlightPage.astro';
+
+const guidedTracks = [
+  {
+    title: 'Start the editor fast',
+    href: '/quick-start/',
+    description: 'Open a document, choose a starting point, and get to a usable diagram quickly.',
+  },
+  {
+    title: 'Learn the core surfaces',
+    href: '/introduction/',
+    description: 'Understand the canvas, command center, Studio, and export/share model before you go deep.',
+  },
+  {
+    title: 'Pick the right input mode',
+    href: '/choose-input-mode/',
+    description: 'Decide when to use canvas editing, AI, OpenFlow DSL, Mermaid, or structured imports.',
+  },
+  {
+    title: 'Work with AI intentionally',
+    href: '/ai-generation/',
+    description: 'See where AI fits, where it helps, and how to avoid treating it like a one-shot generator.',
+  },
+];
+
+const workflowCards = [
+  {
+    title: 'Architecture diagrams',
+    href: '/aws-architecture/',
+    kicker: 'Guide',
+    description: 'The fastest path from icons, AI, and layout into a presentable architecture map.',
+  },
+  {
+    title: 'Code-backed diagrams',
+    href: '/openflow-dsl/',
+    kicker: 'Reference',
+    description: 'Use OpenFlow DSL when the diagram model needs to stay structured and editable.',
+  },
+  {
+    title: 'Import existing systems',
+    href: '/import-from-data/',
+    kicker: 'Workflow',
+    description: 'Bring in SQL, OpenAPI, and other structured sources without starting from scratch.',
+  },
+  {
+    title: 'Share or export',
+    href: '/choose-export-format/',
+    kicker: 'Decision',
+    description: 'Choose the right output path for docs, handoff, review, and collaboration.',
+  },
+];
+
+const referenceLinks = [
+  { title: 'Studio Overview', href: '/studio-overview/' },
+  { title: 'Command Center', href: '/command-center/' },
+  { title: 'Templates & Assets', href: '/templates-assets/' },
+  { title: 'Keyboard Shortcuts', href: '/keyboard-shortcuts/' },
+  { title: 'Prompting AI Agents', href: '/prompting-agents/' },
+  { title: 'Roadmap & Release Policy', href: '/roadmap/' },
+];
+---
+
+<StarlightPage
+  hasSidebar={false}
+  frontmatter={{
+    title: 'OpenFlowKit Docs',
+    description: 'The fastest way to learn OpenFlowKit without getting lost in the full page tree.',
+    template: 'splash',
+  }}
+>
+  <section class="docs-home-hero">
+    <p class="docs-home-eyebrow">Docs Home</p>
+    <h1>Start with the right path, not the full tree.</h1>
+    <p class="docs-home-lead">
+      OpenFlowKit has multiple ways to begin: canvas-first editing, AI-assisted drafting, code-backed
+      diagrams, and structured imports. This page is the fastest way to choose the right route.
+    </p>
+    <div class="docs-home-actions">
+      <a class="docs-home-primary" href="/quick-start/">Open Quick Start</a>
+      <a class="docs-home-secondary" href="/introduction/">Read Introduction</a>
+    </div>
+  </section>
+
+  <section class="docs-home-section">
+    <div class="docs-home-section-copy">
+      <p class="docs-home-section-label">Start Here</p>
+      <h2>Choose by what you need to do next</h2>
+      <p>
+        These are the highest-signal entry points for new users and returning users who want a fast answer.
+      </p>
+    </div>
+    <div class="docs-home-grid docs-home-grid--tracks">
+      {guidedTracks.map((track) => (
+        <a class="docs-home-card" href={track.href}>
+          <h3>{track.title}</h3>
+          <p>{track.description}</p>
+        </a>
+      ))}
+    </div>
+  </section>
+
+  <section class="docs-home-section">
+    <div class="docs-home-section-copy">
+      <p class="docs-home-section-label">Common Journeys</p>
+      <h2>Use docs by workflow, not just by feature name</h2>
+      <p>
+        The docs are easier to navigate when they are framed around the work you are trying to finish.
+      </p>
+    </div>
+    <div class="docs-home-grid">
+      {workflowCards.map((card) => (
+        <a class="docs-home-card docs-home-card--workflow" href={card.href}>
+          <span class="docs-home-kicker">{card.kicker}</span>
+          <h3>{card.title}</h3>
+          <p>{card.description}</p>
+        </a>
+      ))}
+    </div>
+  </section>
+
+  <section class="docs-home-section docs-home-section--compact">
+    <div class="docs-home-section-copy">
+      <p class="docs-home-section-label">Reference</p>
+      <h2>Frequently useful pages</h2>
+    </div>
+    <div class="docs-home-link-list">
+      {referenceLinks.map((link) => (
+        <a href={link.href}>{link.title}</a>
+      ))}
+    </div>
+  </section>
+</StarlightPage>
diff --git a/docs-site/src/styles/custom.css b/docs-site/src/styles/custom.css
index 7f5e725..783becb 100644
--- a/docs-site/src/styles/custom.css
+++ b/docs-site/src/styles/custom.css
@@ -9,3 +9,162 @@
   --sl-color-accent: #f97316;
   --sl-color-accent-high: #fed7aa;
 }
+
+.docs-home-hero {
+  padding: 0.5rem 0 1rem;
+}
+
+.docs-home-eyebrow,
+.docs-home-section-label,
+.docs-home-kicker {
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  font-size: 0.72rem;
+  font-weight: 700;
+}
+
+.docs-home-eyebrow,
+.docs-home-section-label {
+  color: var(--sl-color-text-accent);
+}
+
+.docs-home-hero h1,
+.docs-home-section h2 {
+  margin: 0;
+  letter-spacing: -0.03em;
+}
+
+.docs-home-hero h1 {
+  max-width: 12ch;
+  font-size: clamp(2.4rem, 5vw, 4rem);
+  line-height: 0.95;
+}
+
+.docs-home-lead,
+.docs-home-section-copy p,
+.docs-home-card p {
+  color: var(--sl-color-gray-3);
+}
+
+.docs-home-lead {
+  max-width: 46rem;
+  font-size: 1.05rem;
+  line-height: 1.7;
+}
+
+.docs-home-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  margin-top: 1.5rem;
+}
+
+.docs-home-actions a {
+  text-decoration: none;
+}
+
+.docs-home-primary,
+.docs-home-secondary {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 2.8rem;
+  padding: 0.75rem 1.1rem;
+  border-radius: 999px;
+  font-weight: 700;
+}
+
+.docs-home-primary {
+  background: var(--sl-color-accent);
+  color: white;
+}
+
+.docs-home-secondary {
+  border: 1px solid var(--sl-color-gray-5);
+  color: var(--sl-color-white);
+  background: color-mix(in srgb, var(--sl-color-black) 18%, transparent);
+}
+
+:root[data-theme='light'] .docs-home-secondary {
+  background: white;
+  color: var(--sl-color-black);
+}
+
+.docs-home-section {
+  margin-top: 2.5rem;
+}
+
+.docs-home-section-copy {
+  max-width: 40rem;
+  margin-bottom: 1rem;
+}
+
+.docs-home-grid {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.docs-home-grid--tracks {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.docs-home-card {
+  display: block;
+  padding: 1.2rem;
+  border: 1px solid var(--sl-color-gray-5);
+  border-radius: 1rem;
+  background:
+    linear-gradient(180deg, color-mix(in srgb, var(--sl-color-accent) 8%, transparent), transparent 42%),
+    color-mix(in srgb, var(--sl-color-bg-inline-code) 68%, transparent);
+  text-decoration: none;
+}
+
+.docs-home-card h3 {
+  margin: 0.35rem 0 0.45rem;
+  color: var(--sl-color-white);
+  font-size: 1.02rem;
+}
+
+:root[data-theme='light'] .docs-home-card h3 {
+  color: var(--sl-color-black);
+}
+
+.docs-home-card p {
+  margin: 0;
+  line-height: 1.6;
+}
+
+.docs-home-link-list {
+  display: grid;
+  gap: 0.75rem;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.docs-home-link-list a {
+  display: block;
+  padding: 0.95rem 1rem;
+  border-radius: 0.9rem;
+  border: 1px solid var(--sl-color-gray-5);
+  text-decoration: none;
+  font-weight: 600;
+  color: var(--sl-color-white);
+  background: color-mix(in srgb, var(--sl-color-black) 18%, transparent);
+}
+
+:root[data-theme='light'] .docs-home-link-list a {
+  background: white;
+  color: var(--sl-color-black);
+}
+
+@media (max-width: 50em) {
+  .docs-home-grid,
+  .docs-home-grid--tracks,
+  .docs-home-link-list {
+    grid-template-columns: 1fr;
+  }
+
+  .docs-home-hero h1 {
+    max-width: none;
+  }
+}
diff --git a/docs/en/ai-generation.md b/docs/en/ai-generation.md
deleted file mode 100644
index bcd2f0f..0000000
--- a/docs/en/ai-generation.md
+++ /dev/null
@@ -1,41 +0,0 @@
-
-
-FlowMind leverages Google's **Gemini 2.0 Flash** model to understand natural language and convert it into structural diagrams.
-
-## How it Works
-
-1.  **Intent Analysis**: The AI analyzes your prompt to understand the *goal* (e.g., "Login Flow") and the *actors* (User, Server, Database).
-2.  **Structural Generation**: It constructs a valid FlowMind DSL JSON object representing the nodes and connections.
-3.  **Layout Optimization**: The engine applies smart layout algorithms to ensure the generated graph is readable.
-
-## Best Practices for Prompts
-
-To get the best results, be specific about the **steps** and the **outcome**.
-
-### ❌ Too Vague
-> "Make a system diagram."
-
-### ✅ Good
-> "Create a high-level system architecture for an e-commerce platform. Include a Web App, API Gateway, User Service, Product Service, and a shared PostgreSQL database."
-
-### ✅ Better (Process Flow)
-> "Draw a flowchart for a user password reset process. Start with 'User clicks forgot password', check if email exists. If yes, send distinct token. If no, show error. End with 'User enters new password'."
-
-## Editing AI Results
-
-AI generation is a starting point, not the end. You can always:
-*   Add missing steps manaully.
-*   Renaming nodes for clarity.
-*   Regenerating specific sections (Coming Soon).
-
-## 🔑 Bring Your Own Key (BYOK)
-
-By default, FlowMind uses a shared API key with limited quotas. For heavy usage, privacy, or to use your own billing, you can bring your own **Gemini API Key**.
-
-1.  Go to **Google AI Studio** and [Get an API Key](https://aistudio.google.com/app/apikey).
-2.  In FlowMind, open **Settings** (Gear Icon) or click on any **Brand Kit**.
-3.  Navigate to the **AI** tab.
-4.  Paste your key into the secure input field.
-
-> [!NOTE]
-> Your key is stored locally in your browser's `localStorage` and is never sent to our servers. It is strictly used for client-side API calls to Google.
diff --git a/docs/en/ask-flowpilot.md b/docs/en/ask-flowpilot.md
deleted file mode 100644
index cd39da8..0000000
--- a/docs/en/ask-flowpilot.md
+++ /dev/null
@@ -1,3 +0,0 @@
-# Ask Flowpilot Assistant
-
-This page is dynamically replaced by the AI Assistant component inside `DocsPage.tsx`. This file exists only to satisfy the Vite dynamic glob importer and routing logic.
diff --git a/docs/en/aws-architecture.md b/docs/en/aws-architecture.md
deleted file mode 100644
index 4fd2792..0000000
--- a/docs/en/aws-architecture.md
+++ /dev/null
@@ -1,71 +0,0 @@
-# How to Draw AWS Architecture Diagrams with OpenFlowKit
-
-Drawing cloud infrastructure can be tedious if you are dragging and dropping shapes manually. OpenFlowKit provides a **Diagram-as-Code** approach to visualizing AWS Architectures, making it perfect for DevOps teams, Solutions Architects, and Cloud Engineers.
-
-## Why Use Diagram-as-Code for AWS?
-
-Instead of spending hours aligning server icons, you can write simple text that OpenFlowKit instantly renders into a beautiful, auto-routed diagram. Because it's code, your architecture diagram can live right next to your Terraform or CloudFormation scripts in Git.
-
-- **Version Control**: Track infrastructure changes over time.
-- **Auto-Layout**: No more overlapping lines or misaligned VPCs.
-- **Speed**: Type a few lines, get a complete diagram.
-
-
-## Example: Basic Web Architecture (Mermaid.js)
-
-OpenFlowKit natively supports Mermaid.js, which is great for standard cloud structures. Here is how you can visualize an AWS VPC with a Load Balancer, EC2 instances, and an RDS database.
-
-```mermaid
-flowchart TD
-    %% Define Styles
-    classDef aws fill:#FF9900,stroke:#fff,stroke-width:2px,color:#fff,rx:8px,ry:8px;
-    classDef vpc fill:#f5f5f5,stroke:#00A4A6,stroke-width:2px,stroke-dasharray: 5 5,rx:12px,ry:12px;
-    
-    Client((User Traffic))
-
-    subgraph AWS_VPC [AWS Cloud VPC]
-        ALB(Application Load Balancer)
-        
-        subgraph Public_Subnet [Public Subnet]
-            EC2_1(Web Server 1)
-            EC2_2(Web Server 2)
-        end
-        
-        subgraph Private_Subnet [Private Subnet]
-            RDS[(Amazon RDS)]
-            ElastiCache[(Redis Cache)]
-        end
-    end
-
-    %% Connections
-    Client -->|HTTPS| ALB
-    ALB -->|Round Robin| EC2_1
-    ALB -->|Round Robin| EC2_2
-    
-    EC2_1 --> RDS
-    EC2_1 --> ElastiCache
-    EC2_2 --> RDS
-    EC2_2 --> ElastiCache
-
-    %% Apply Styles
-    class ALB,EC2_1,EC2_2 aws;
-    class RDS,ElastiCache aws;
-    class AWS_VPC,Public_Subnet,Private_Subnet vpc;
-```
-
-## Creating AWS Diagrams with AI
-
-If you don't know Mermaid syntax, you can use **Flowpilot**, our built-in AI assistant. 
-
-1. Open the [Command Center](/docs/en/command-center).
-2. Type a prompt like:
-> `"Create an AWS architecture diagram showing an API Gateway routing traffic to three AWS Lambda functions, which all connect to a central DynamoDB table."`
-3. Hit enter. Flowpilot will instantly generate the DSL and render the diagram.
-
-## Exporting for internal documentation
-
-Once your AWS Architecture is generated, you can easily export it:
-- **SVG / PNG**: For Confluence, Jira, or Slack.
-- **Figma Editable**: Want your UX team to polish the diagram? Click *Figma Editable* and paste it directly into Figma as native, editable vector layers.
-
-[Try building your first AWS Architecture diagram now!](/#/canvas)
diff --git a/docs/en/canvas-basics.md b/docs/en/canvas-basics.md
deleted file mode 100644
index 3647d47..0000000
--- a/docs/en/canvas-basics.md
+++ /dev/null
@@ -1,27 +0,0 @@
-
-
-The FlowMind canvas is an infinite, interactive workspace. Here's how to navigate and manipulate it effectively.
-
-## Navigation
-
-*   **Pan**: specific mouse action (e.g., Hold Space + Drag, or Middle Click + Drag) moves the canvas view.
-*   **Zoom**: Use the mouse wheel to zoom in and out.
-*   **Fit View**: Press \`Shift + 1\` to fit all nodes within the view.
-
-## Node Operations
-
-### Selecting Nodes
-*   **Single Select**: Click a node.
-*   **Multi-Select**: Hold \`Shift\` and click multiple nodes, or click and drag a selection box around them.
-
-### Duplicating
-Select one or more nodes and press \`Cmd + D\` (Mac) or \`Ctrl + D\` (Windows) to duplicate them.
-
-### Deleting
-Select nodes and press \`Backspace\` or \`Delete\`.
-
-## The Mini-Map
-
-The Mini-Map in the bottom right corner gives you a high-level overview of your entire flow. You can drag the viewport box inside the mini-map to quickly navigate large diagrams.
-
-[PLACEHOLDER: Image of Canvas Interface with callouts]
diff --git a/docs/en/command-center.md b/docs/en/command-center.md
deleted file mode 100644
index 65967a6..0000000
--- a/docs/en/command-center.md
+++ /dev/null
@@ -1,28 +0,0 @@
-
-The Command Center is the floating toolbar at the bottom of the screen. It's the heart of FlowMind's "keyboard-first" workflow.
-
-> [!NOTE]
-> Open the Command Center anytime by pressing `Cmd + K` (Mac) or `Ctrl + K` (Windows).
-
-## Features
-
-### 1. Templates
-Don't start from scratch. Access a library of pre-built diagrams:
-*   AWS Architecture Patterns
-*   User Journey Maps
-*   Database Schemas
-*   Organizational Charts
-
-### 2. Design System / Visuals
-Access a library of assets to enhance your diagram:
-*   **Wireframes**: Drag and drop low-fidelity UI components (Buttons, Inputs, Modals) to build quick mockups.
-*   **Icons**: Search and insert any icon as a standalone node.
-
-### 3. AI Copilot
-The text input in the Command Center is your direct line to our AI engine. Type what you want to build, and hitting `Enter` generates it instantly.
-
-### 4. Layout & Tools
-Quickly access utility functions:
-*   **Auto Layout**: Re-organize the chaos.
-*   **Reset View**: Jump back to center.
-*   **Format Code**: Clean up your DSL.
diff --git a/docs/en/exporting.md b/docs/en/exporting.md
deleted file mode 100644
index 1f1c2c8..0000000
--- a/docs/en/exporting.md
+++ /dev/null
@@ -1,47 +0,0 @@
-
-FlowMind offers a wide range of export options to help you use your diagrams in presentations, documentation, or other external tools.
-
-> [!TIP]
-> All export options are available via the **"Export"** button in the top right corner of the toolbar.
-
-## Image Exports
-
-Perfect for slides, documents, or sharing on Slack.
-
-### PNG (Portable Network Graphics)
-Exports a high-resolution, pixel-based image of your current flow.
-*   **Best for**: Slides, Web, General Sharing.
-*   **Settings**: Includes transparency by default if enabled in settings.
-
-### JPEG (Joint Photographic Experts Group)
-Exports a compressed image file.
-*   **Best for**: Email attachments, situations where file size matters.
-*   **Note**: Does not support transparency (background will be white).
-
-## Data & Code Exports
-
-FlowMind is a "Diagram-as-Code" tool, so we treat your diagram data as a first-class citizen.
-
-### JSON (FlowMind Native)
-Downloads the raw `.json` file containing all node positions, styles, and data.
-*   **Best for**: Backups, Version Control, Sharing editable files with other FlowMind users.
-
-### FlowMind DSL
-Copies the simplified Domain Specific Language (DSL) representation to your clipboard.
-*   **Best for**: Storing diagram logic in your codebase comments or generating similar flows via AI.
-
-### Mermaid.js
-Converts your current diagram into [Mermaid](https://mermaid.js.org/) syntax and copies it to the clipboard.
-*   **Best for**: Embedding diagrams in GitHub `README.md` files, Notion, or Obsidian.
-*   **Supported**: Basic Flowcharts, Sequence Diagrams.
-
-### PlantUML
-Copies the PlantUML representation of your diagram.
-*   **Best for**: Enterprise wikis (Confluence) or legacy documentation systems.
-
-### Figma
-Copies a vector representation compatible with Figma's paste format.
-*   **Best for**: Handing off diagrams to designers for high-fidelity polishing.
-
-> [!WARNING]
-> Figma export is experimental. Complex custom nodes may not transfer 100% perfectly.
diff --git a/docs/en/introduction.md b/docs/en/introduction.md
deleted file mode 100644
index fe3d3c9..0000000
--- a/docs/en/introduction.md
+++ /dev/null
@@ -1,34 +0,0 @@
-**OpenFlowKit** is a next-generation diagramming tool that bridges the gap between AI-generated visualization and precise, code-based editing. Designed for developers, architects, and product managers, OpenFlowKit allows you to create complex flowcharts, sequence diagrams, and system architectures using natural language or our specialized DSL.
-
-## Why OpenFlowKit?
-
-Traditional diagramming tools often force a choice between:
-1.  **Drag-and-drop tools**: Easy to start, but hard to maintain and version control.
-2.  **Code-based tools (like Mermaid)**: Great for versioning, but can be tedious to write from scratch.
-
-FlowMind gives you the best of both worlds. You can start with a text prompt to generate an initial structure, then refine it using our **Hybrid Editor**—manipulating nodes visually on the canvas *or* editing the underlying code directly.
-
-## Key Features
-
-### AI-Powered Generation
-Simply describe your system: *"Create a login flow with OAuth fallback and error handling."* FlowMind's Gemini integration scaffolds the entire diagram effectively instantly.
-
-### Hybrid Canvas
-Our canvas isn't just a static image. It's a fully interactive graph environment.
-*   **Drag & Drop**: Move nodes, auto-snap alignment.
-*   **Smart Layouts**: One-click re-organization using Elk.js.
-*   **Properties Panel**: Fine-tune specific node styling without touching CSS.
-
-### Diagram-as-Code
-Every diagram is backed by a readable, editable JSON structure and compatible with Mermaid.js syntax. This means your documentation can live alongside your code.
-
-### Premium Aesthetics
-Built with a "Design First" code, FlowMind diagrams are presentation-ready by default. No more ugly, default-grey boxes.
-
-## Next Steps
-
-Ready to get started?
-
-*   Check out the [Quick Start](/docs/quick-start) guide to build your first flow.
-*   Learn about the [Canvas Basics](/docs/canvas-basics).
-*   Master the [OpenFlow DSL](/docs/openflow-dsl).
diff --git a/docs/en/keyboard-shortcuts.md b/docs/en/keyboard-shortcuts.md
deleted file mode 100644
index 16a8bff..0000000
--- a/docs/en/keyboard-shortcuts.md
+++ /dev/null
@@ -1,31 +0,0 @@
-
-
-Master FlowMind with these keyboard shortcuts to speed up your workflow.
-
-## General
-
-| Action | MacOS | Windows/Linux |
-| :--- | :--- | :--- |
-| **Command Palette** | \`Cmd + K\` | \`Ctrl + K\` |
-| **Save** | \`Cmd + S\` | \`Ctrl + S\` |
-| **Undo** | \`Cmd + Z\` | \`Ctrl + Z\` |
-| **Redo** | \`Cmd + Shift + Z\` | \`Ctrl + Shift + Z\` |
-
-## Canvas Navigation
-
-| Action | MacOS | Windows/Linux |
-| :--- | :--- | :--- |
-| **Zoom In** | \`+\` | \`+\` |
-| **Zoom Out** | \`-\` | \`-\` |
-| **Fit View** | \`Shift + 1\` | \`Shift + 1\` |
-
-## Editing
-
-| Action | MacOS | Windows/Linux |
-| :--- | :--- | :--- |
-| **Duplicate Node** | \`Cmd + D\` or \`Alt + Drag\` | \`Ctrl + D\` or \`Alt + Drag\` |
-| **Delete Node** | \`Backspace\` | \`Backspace\` |
-| **Select All** | \`Cmd + A\` | \`Ctrl + A\` |
-| **Group Selection** | \`Cmd + G\` | \`Ctrl + G\` |
-
-> **Note:** Shortcuts are active when the canvas has focus.
diff --git a/docs/en/mermaid-integration.md b/docs/en/mermaid-integration.md
deleted file mode 100644
index 1a00a73..0000000
--- a/docs/en/mermaid-integration.md
+++ /dev/null
@@ -1,31 +0,0 @@
-
-FlowMind maintains high compatibility with [Mermaid.js](https://mermaid.js.org/), the industry standard for diagram-as-code.
-
-## Importing Mermaid
-
-You can paste existing Mermaid code directly into FlowMind.
-
-1.  Click the **"Import"** button in the toolbar.
-2.  Select **"Mermaid"**.
-3.  Paste your code snippet.
-
-### Supported Diagram Types
-Currently, FlowMind optimizes for:
-*   **Flowcharts** (`graph TD`, `graph LR`)
-*   **Sequence Diagrams** (Partial support via conversion)
-
-```mermaid
-graph TD
-    A[Start] --> B{Is it working?}
-    B -- Yes --> C[Great!]
-    B -- No --> D[Debug]
-```
-
-## Exporting to Mermaid
-
-You can also export any FlowMind diagram *back* to Mermaid syntax.
-This is perfect for embedding diagrams in GitHub `README.md` files or Notion documents.
-
-1.  Open the **Code Panel** (bottom panel).
-2.  Switch to the **"Mermaid"** tab.
-3.  Copy the generated code.
diff --git a/docs/en/mermaid-vs-openflow.md b/docs/en/mermaid-vs-openflow.md
deleted file mode 100644
index 4cdfa04..0000000
--- a/docs/en/mermaid-vs-openflow.md
+++ /dev/null
@@ -1,50 +0,0 @@
-# Mermaid.js vs OpenFlowKit
-
-Mermaid.js is an incredible text-based diagramming tool that has become the standard for markdown-based documentation. However, when you need a presentation-ready, highly interactive canvas, raw Mermaid can sometimes feel limiting.
-
-This is why **OpenFlowKit is built on top of Mermaid.js**, giving you the best of both worlds: Diagram-as-code speed with visual-editor polish.
-
-## 1. Aesthetics and Branding
-
-**Mermaid.js:**
-- Renders SVGs based on predefined themes (default, dark, forest, neutral).
-- Customizing styles requires inline CSS classes, which can clutter your markdown.
-
-**OpenFlowKit:**
-- Features a full **White-Label Design System**.
-- You can inject [Theming](/docs/en/theming) tokens dynamically (colors, corner radii, fonts).
-- Nodes automatically adopt glassmorphism, shadows, and modern UI treatments without writing a single line of CSS.
-
-## 2. Interaction and Editing
-
-**Mermaid.js:**
-- Strictly code-in, diagram-out. To move a node, you rewrite the code.
-- Layouts are handled automatically by Dagre, which is great but offers zero manual control if a line routes awkwardly.
-
-**OpenFlowKit:**
-- **Two-Way Sync**: Write code and watch the canvas update, *or* drag a node on the canvas and watch the code update automatically. 
-- You get full drag-and-drop capabilities, manual edge routing, and [Smart Layouts](/docs/en/smart-layout) via ELK.js.
-
-## 3. Export Options
-
-**Mermaid.js:**
-- Typically exports as SVG or PNG via a CLI or browser extension.
-
-**OpenFlowKit:**
-- Native [Exporting](/docs/en/exporting) to SVG, high-res PNG/JPG.
-- **Figma Editable**: OpenFlowKit can export diagrams directly to your clipboard in a format that pastes into Figma as native, editable vector layers and text objects.
-
-## 4. Artificial Intelligence
-
-While AI can write Mermaid syntax, iterating on it is difficult.
-
-**OpenFlowKit:**
-- Integrated [Flowpilot AI](/docs/en/ask-flowpilot) directly into the [Command Center](/docs/en/command-center).
-- You can prompt the AI, generate the canvas, and then manually adjust the final 10% visually instead of trying to perfectly craft a prompt to fix a misaligned node.
-- Supports **BYOK (Bring Your Own Key)** for 7 different AI providers.
-
-## Direct Compatibility
-
-We love Mermaid. That is why OpenFlowKit has a native [Mermaid Integration](/docs/en/mermaid-integration). You can paste any existing Mermaid flowchart or state diagram into OpenFlowKit, and it will instantly convert it into editable, styled React Flow nodes.
-
-Try converting your Mermaid diagrams today in the [Editor](/#/canvas).
diff --git a/docs/en/node-types.md b/docs/en/node-types.md
deleted file mode 100644
index 68a1bad..0000000
--- a/docs/en/node-types.md
+++ /dev/null
@@ -1,32 +0,0 @@
-
-
-FlowMind supports several specialized node types to handle different diagramming needs.
-
-## 1. Custom Node (Default)
-
-The workhorse of your diagrams. It supports a title, an optional icon, and rich connection handles.
-*   **Best for**: Process steps, services, database tables, or general entities.
-*   **Features**: Resizable, editable label, support for icons.
-
-## 2. Text Node / Annotation
-
-A lightweight, borderless node used for adding comments or labels to the canvas without affecting the flow structure.
-*   **Best for**: Adding sticky notes, section headers, or explanatory text.
-*   **Usage**: Select "Text" from the toolbar or press \`T\`.
-
-## 3. Group Node
-
-Container nodes that visually group other nodes together. Moving a group moves all nodes inside it.
-*   **Best for**: Visualizing sub-systems, VPCs, or logical boundaries.
-*   **Usage**: Select nodes -> Right Click -> "Group Selection".
-
-## 4. Swimlane Node
-
-Vertical or horizontal lanes to organize processes by actor or department.
-*   **Best for**: Cross-functional flowcharts.
-
-## 5. Image Node
-
-Embed arbitrary images directly onto the canvas.
-*   **Best for**: Adding logos, screenshots, or reference diagrams.
-*   **Usage**: Drag and drop an image file directly onto the canvas.
diff --git a/docs/en/openflow-dsl.md b/docs/en/openflow-dsl.md
deleted file mode 100644
index a417fbf..0000000
--- a/docs/en/openflow-dsl.md
+++ /dev/null
@@ -1,398 +0,0 @@
-# 🧠 FlowMind DSL Syntax Guide (V2)
-
-FlowMind uses a clean, human-readable DSL to define diagrams using text.
-Version 2 introduces:
-
-* Explicit node IDs
-* Styling attributes
-* Groups / containers
-* Edge customization
-
----
-
-# 1️⃣ Document Header
-
-Every DSL file can begin with optional metadata:
-
-```yaml
-flow: "My Awesome Workflow"
-direction: TB
-```
-
-### Fields
-
-| Field       | Description                                                    |
-| ----------- | -------------------------------------------------------------- |
-| `flow`      | Title of the diagram                                           |
-| `direction` | Layout direction: `TB` (Top to Bottom) or `LR` (Left to Right) |
-
----
-
-# 2️⃣ Nodes
-
-Nodes define diagram elements.
-
-## Basic Syntax
-
-```
-[start] Start Process
-[process] Handle Request
-[end] End Process
-```
-
----
-
-## With Explicit IDs
-
-Useful for clarity, especially in large flows.
-
-```
-[start] start: Start Process
-[process] proc1: Handle Request
-[end] end: End Process
-
-start -> proc1
-proc1 -> end
-```
-
----
-
-## With Attributes
-
-Attributes use JSON-like syntax:
-
-```
-[process] p1: Critical Step { color: "red", icon: "alert-triangle" }
-[system] db: Database { icon: "database" }
-```
-
-### Attribute Examples
-
-| Attribute | Purpose               |
-| --------- | --------------------- |
-| `color`   | Override node color   |
-| `icon`    | Add icon              |
-| `style`   | Custom style modifier |
-
----
-
-## Supported Node Types
-
-| DSL Type    | Shape             | Default Color |
-| ----------- | ----------------- | ------------- |
-| `start`     | Capsule           | Emerald       |
-| `end`       | Capsule           | Red           |
-| `process`   | Rounded rectangle | Slate         |
-| `decision`  | Diamond           | Amber         |
-| `system`    | Custom node       | Violet        |
-| `note`      | Sticky note       | Yellow        |
-| `section`   | Group container   | Blue          |
-| `container` | Generic group     | Gray          |
-
-If a node is referenced in a connection but not declared, it defaults to `process`.
-
----
-
-# 3️⃣ Edges (Connections)
-
-Connections define flow between nodes.
-
-## Basic Connection
-
-```
-Start Process -> Handle Request
-```
-
----
-
-## Edge Types
-
-| Symbol | Meaning     |
-| ------ | ----------- |
-| `->`   | Solid line  |
-| `-->`  | Curved line |
-| `..>`  | Dashed line |
-| `==>`  | Thick line  |
-
-Example:
-
-```
-A ..> B
-C ==> D
-```
-
----
-
-## Labeled Connections
-
-Use pipes:
-
-```
-Is Valid? ->|Yes| Save Data
-Is Valid? ->|No| Return Error
-```
-
----
-
-## Edge Attributes
-
-```
-A -> B { style: "dashed", label: "Async" }
-```
-
----
-
-# 4️⃣ Groups
-
-Use `group` to cluster nodes.
-
-```
-group "Backend Services" {
-    [process] api: API Server
-    [system] db: Database
-    api -> db
-}
-```
-
-Groups help visually separate logical areas.
-
----
-
-# 5️⃣ Comments
-
-Lines starting with `#` are ignored.
-
-```
-# This is a comment
-[start] Begin
-```
-
----
-
-# ✅ Complete Example
-
-```yaml
-flow: "User Login Flow"
-direction: TB
-
-# Define Nodes
-[start] user: User
-[process] login: Login Page { icon: "log-in" }
-
-group "Authentication" {
-    [system] auth: Auth Service
-    [decision] check: Is Valid?
-}
-
-[end] dash: Dashboard
-[end] err: Error
-
-# Define Logic
-user -> login
-login -> auth
-auth -> check
-
-check ->|Yes| dash { color: "green" }
-check ->|No| err { color: "red", style: "dashed" }
-```
-
----
-
-# 🤖 LLM Agent Prompt Template
-
-If someone wants to generate FlowMind DSL using an LLM agent, they can paste the following prompt:
-
----
-
-## Copy-Paste Prompt for LLM
-
-```
-You are an expert FlowMind DSL V2 generator.
-
-Your job is to convert a user's workflow description into valid FlowMind DSL.
-
-You must strictly follow the FlowMind DSL V2 specification defined below.
-
-========================================
-FLOWMIND DSL V2 SPECIFICATION
-========================================
-
-1. DOCUMENT HEADER (Required)
-
-Every output MUST begin with:
-
-flow: "Title Here"
-direction: TB or LR
-
-Rules:
-- Always generate a meaningful title.
-- Default to TB unless user clearly needs horizontal layout.
-
-----------------------------------------
-
-2. NODE DECLARATION RULES
-
-Node syntax:
-
-[type] id: Label { optional_attributes }
-
-Example:
-[process] p1: Handle Request
-[decision] d1: Is Valid? { icon: "help-circle" }
-
-Rules:
-- ALWAYS use explicit IDs.
-- IDs must be short, lowercase, no spaces.
-- IDs must be unique.
-- Use semantic naming (start, login, checkAuth, db, etc).
-- Do NOT reuse labels as IDs.
-- Do NOT skip node declarations.
-
-If a node is referenced in a connection, it MUST be declared first.
-
-----------------------------------------
-
-3. SUPPORTED NODE TYPES
-
-Use ONLY these types:
-
-start
-end
-process
-decision
-system
-note
-section
-container
-
-Guidelines:
-
-start      → beginning of flow
-end        → termination states
-process    → actions or steps
-decision   → branching logic
-system     → external system/service/database
-note       → annotations
-section    → major grouped area
-container  → generic grouping
-
-----------------------------------------
-
-4. NODE ATTRIBUTES (Optional)
-
-Attributes use JSON-like syntax:
-
-{ color: "red", icon: "database", style: "dashed" }
-
-Rules:
-- Only add attributes if meaningful.
-- Keep styling minimal.
-- Do not invent unsupported properties.
-
-----------------------------------------
-
-5. EDGES (CONNECTIONS)
-
-Basic syntax:
-id1 -> id2
-
-Edge types:
-->   solid
--->  curved
-..>  dashed
-==>  thick
-
-Labeled edges:
-id1 ->|Yes| id2
-
-Edge with attributes:
-id1 -> id2 { label: "Async", style: "dashed" }
-
-Rules:
-- Always connect using IDs, not labels.
-- Decision nodes MUST use labeled edges.
-- Every branch from a decision must be explicit.
-- No floating nodes.
-
-----------------------------------------
-
-6. GROUPS
-
-Use grouping when logical clustering exists.
-
-Syntax:
-
-group "Group Name" {
-    node declarations
-    internal connections
-}
-
-Rules:
-- Groups should wrap related nodes only.
-- Connections across groups should be declared outside the group block.
-
-----------------------------------------
-
-7. COMMENTS
-
-Use # for comments sparingly.
-Do not over-comment.
-
-----------------------------------------
-
-8. OUTPUT RULES (STRICT)
-
-You MUST:
-
-- Output ONLY valid FlowMind DSL
-- Do NOT explain
-- Do NOT use markdown formatting
-- Do NOT wrap in code blocks
-- Do NOT add commentary
-- Do NOT describe what you are doing
-- Do NOT output anything except the DSL
-
-If user description is vague:
-- Make reasonable assumptions
-- Choose logical structure
-- Keep flow clean and readable
-
-========================================
-LOGIC CONVERSION STRATEGY
-========================================
-
-When converting user input:
-
-1. Identify:
-   - Start event
-   - End states
-   - Actions
-   - Decisions
-   - External systems
-   - Logical clusters
-
-2. Convert:
-   - Events → start / end
-   - Actions → process
-   - Branching → decision
-   - Databases/APIs → system
-   - Parallel logic → separate branches
-   - Error paths → explicit end nodes
-
-3. Ensure:
-   - Every path leads to an end
-   - No orphan nodes
-   - Clean logical readability
-
-========================================
-USER REQUEST
-========================================
-
-Convert the following workflow description into FlowMind DSL V2:
-
-{{USER_WORKFLOW_DESCRIPTION}}
-
-Generate the DSL now.
-```
-
----
diff --git a/docs/en/payment-flow.md b/docs/en/payment-flow.md
deleted file mode 100644
index 2ce1bdb..0000000
--- a/docs/en/payment-flow.md
+++ /dev/null
@@ -1,55 +0,0 @@
-# How to Visualize Payment Flows (Stripe, PayPal, etc.)
-
-When building e-commerce or SaaS applications, understanding the exact sequence of a payment flow is critical. A single missed webhook can lead to a dropped order or an angry customer.
-
-OpenFlowKit allows you to map out complex asynchronous payment architectures quickly using a variety of [Node Types](/docs/en/node-types).
-
-## Why build payment architectures with OpenFlowKit?
-
-- **Shareability**: Everyone from the PM to the backend engineer needs to see the same flow.
-- **Clarity**: Mapping out happy paths, failures, and webhook retries visually is much easier than reading through Stripe API documentation.
-- **Speed**: Use the [Command Center](/docs/en/command-center) and AI to generate the boilerplate flow in seconds.
-
-## Example: Stripe Checkout Flow
-
-Here is a common Stripe Checkout implementation mapped out. Notice how we use different node shapes to distinguish between client-side actions, server-side actions, and third-party API calls.
-
-```mermaid
-sequenceDiagram
-    participant User
-    participant Client as Frontend (React)
-    participant Server as Backend (Node.js)
-    participant Stripe
-    
-    User->>Client: Clicks "Pay $50"
-    Client->>Server: POST /create-checkout-session
-    Server->>Stripe: API Request: Create Session
-    Stripe-->>Server: Returns Session ID & URL
-    Server-->>Client: Returns Checkout URL
-    
-    Client->>User: Redirects to Stripe Checkout
-    User->>Stripe: Enters Credit Card Info
-    
-    alt Payment Success
-        Stripe-->>User: Redirect to Success URL
-        Stripe->>Server: Webhook event: checkout.session.completed
-        Server->>Server: Fulfills Order / Updates DB
-    else Payment Failure
-        Stripe-->>User: Redirect to Cancel URL
-        User->>Client: Try Again
-    end
-```
-
-## Tips for Better Payment Diagrams
-
-1. **Use Swimlanes**: Group actions by responsibility. Put the User in one lane, your API in another, and the Payment Processor (Stripe/PayPal) in a third.
-2. **Color Code**: Use green for happy paths (success), red for failure states (declines/insufficient funds), and gray for retries.
-3. **Explicit Callouts**: Use the **Annotation Node** to document exact webhook payloads or secret keys needed at specific steps.
-
-## AI Prompt Example
-
-To generate a similar flow using [Ask Flowpilot](/docs/en/ask-flowpilot):
-
-> `"Generate a flowchart showing a subscription payment flow using Braintree. Include the client requesting a client token, the server generating it, the user submitting a nonce, and the final server-side transaction creation. Show both success and failure branches."`
-
-Need to present this to your team? Try the [Playback History](/docs/en/playback-history) feature to walk through the payment sequence step-by-step.
diff --git a/docs/en/playback-history.md b/docs/en/playback-history.md
deleted file mode 100644
index 4c743e1..0000000
--- a/docs/en/playback-history.md
+++ /dev/null
@@ -1,17 +0,0 @@
-
-FlowMind automatically tracks every change you make. The **Playback** features allows you to travel back in time to review your decision process.
-
-## History Timeline
-
-Click the **Clock Icon** in the top navigation bar to open the History Timeline.
-
-### Version Checkpoints
-Every time you perform a significant action (adding a node, changing a color, auto-layout), a "snapshot" is saved.
-*   **Undo/Redo**: Uses this same system to jump back and forth (`Cmd+Z`).
-
-## Playback Mode
-
-Press the **Play** button in the History panel to watch a "movie" of your diagram being built from start to finish.
-*   **Speed Control**: Adjust playback speed (1x, 2x, 4x).
-*   **Scrubbing**: Drag the slider to specific points in time.
-*   **Restore**: Found an older version you like better? Click "Restore" to revert the canvas to that state perfectly.
diff --git a/docs/en/prompting-agents.md b/docs/en/prompting-agents.md
deleted file mode 100644
index 0297089..0000000
--- a/docs/en/prompting-agents.md
+++ /dev/null
@@ -1,31 +0,0 @@
-# How to Prompt AI Agents (Cursor, Copilot, ChatGPT)
-
-OpenFlowKit is built to be AI-native. While it includes **Flowpilot** (our built-in AI assistant), you often want to generate diagrams directly inside your IDE using tools like Cursor, GitHub Copilot, or even regular ChatGPT.
-
-To get the best results from any LLM, you need to point them to our syntax rules.
-
-## The Magic Keyword: `llms.txt`
-
-The secret to perfect AI generation is our `llms.txt` file. We host a machine-readable set of rules that teaches any AI exactly how to write OpenFlow DSL V2 code.
-
-When prompting an AI agent, just include a reference to this file.
-
-### Example Prompt for Cursor IDE
-Open your Composer or Chat window and type:
-
-> `"Read https://openflowkit.com/llms.txt and then generate an architecture diagram showing our Next.js frontend connecting to a Supabase backend."`
-
-### Example Prompt for ChatGPT
-If you are using ChatGPT with web-browsing enabled:
-
-> `"Go to https://openflowkit.com/llms.txt to learn the OpenFlowKit syntax. Then, write a flowchart detailing an OAuth2 login sequence. Output the result using the \`\`\`openflow code block."`
-
-## Best Practices for Prompting
-
-Even with the rules, LLMs can sometimes get confused. Here are three tips for perfect diagrams every time:
-
-1. **Be specific about shapes**: Instead of just saying "add a database", say "add a Node with the `[process]` type labeled 'Database'". 
-2. **Name your connections**: The diagram is much more useful if edges have labels. Example: "Connect the frontend to the backend with the label '|REST API|'".
-3. **Use Groups for clarity**: If you have multiple microservices, tell the AI to wrap them in a group: "Put the 'Auth Service' and 'User DB' inside a group called 'Backend Infrastructure'."
-
-[Return to Editor](/#/canvas)
diff --git a/docs/en/properties-panel.md b/docs/en/properties-panel.md
deleted file mode 100644
index 11f81f0..0000000
--- a/docs/en/properties-panel.md
+++ /dev/null
@@ -1,24 +0,0 @@
-
-The Properties Panel is your control center for customizing individual nodes. It appears on the right side of the screen when you select a node.
-
-## Node Customization
-
-### Label Editing
-You can rename any node directly from the panel. The label updates in real-time on the canvas.
-
-### Visual Styling
-Make your diagrams pop with custom styles:
-*   **Colors**: Choose from a curated palette of semantic colors (Red for danger, Green for success, etc.).
-*   **Icons**: Add an icon to any node to make it instantly recognizable. We support the full Lucide React icon library.
-*   **Stroke Style**: Toggle between `Solid` and `Dashed` borders (great for representing tentative or future states).
-
-### Layout & Sizing
-*   **Width/Height**: Manually set dimensions for pixel-perfect alignment.
-*   **Position**: View and edit exact X/Y coordinates.
-
-## Bulk Editing
-
-> [!TIP]
-> You can select multiple nodes (`Shift + Click`) to edit them all at once!
-
-When multiple nodes are selected, the Properties Panel will apply changes (like color or icon) to **all** selected nodes.
diff --git a/docs/en/quick-start.md b/docs/en/quick-start.md
deleted file mode 100644
index 918001e..0000000
--- a/docs/en/quick-start.md
+++ /dev/null
@@ -1,40 +0,0 @@
-
-
-This guide will help you create your first diagram in FlowMind in under 2 minutes.
-
-## 1. Create a New Flow
-
-From the Dashboard, click the **"Create New"** button (or press \`Cmd+N\`). You will be taken to a fresh canvas.
-
-## 2. Using AI Generation
-
-The fastest way to start is with a prompt.
-
-1.  Locate the command bar at the bottom of the screen.
-2.  Type a description of your flow.
-    *   *Example:* "Create a user registration flow that includes email verification and database checks."
-3.  Press \`Enter\`.
-
-FlowMind will generate a complete diagram structure for you.
-
-## 3. Editing Nodes
-
-Once generated, you can refine the diagram:
-
-*   **Move**: Click and drag any node to reposition it.
-*   **Edit Text**: Double-click a node to change its label.
-*   **Connect**: Drag from the handles (dots) on a node's edge to connect it to another node.
-
-## 4. Using Smart Layout
-
-If your diagram gets messy, click the **"Auto Layout"** button in the top toolbar. FlowMind uses the ELK layout engine to automatically organize your nodes into a clean hierarchy.
-
-## 5. Exporting
-
-When you're happy with your flow:
-
-1.  Click the **Export** button in the top right.
-2.  Choose your format (PNG, SVG, or JSON).
-3.  Download your file.
-
-[PLACEHOLDER: GIF showing the creation process]
diff --git a/docs/en/roadmap.md b/docs/en/roadmap.md
deleted file mode 100644
index 1fd5182..0000000
--- a/docs/en/roadmap.md
+++ /dev/null
@@ -1,70 +0,0 @@
-# 🗺️ OpenFlowKit Product Roadmap
-
-We are building the standard for open-source, white-label diagramming. This roadmap outlines our vision for the future of **OpenFlowKit**.
-
-> **Note**: This is a living document. Priorities may change based on community feedback.
-
----
-
-## 🚀 Q3 2026: The AI Expansion (v1.2)
-*Focus: Making the diagram generation smarter, faster, and more versatile.*
-
-### 🧠 Multi-Model AI Support
-Move beyond a single provider. We will support a "Bring Your Own Key" model for all major LLMs:
-- **Anthropic Claude 3.5 Sonnet**: Optimized for complex system architecture diagrams.
-- **OpenAI GPT-4o**: Fast, reasoning-heavy generation for business logic flows.
-- **Local LLMs (Ollama)**: run Llama 3 or Mistral locally for 100% offline, air-gapped diagram generation.
-
-### ⚡ Real-time "Copilot" Mode
-- **Autocomplete for Flows**: As you drag a node, the AI suggests the next 3 most logical steps based on your current graph context.
-- **Smart Refactoring**: Select a mess of nodes and ask AI to "Optimize Layout" or "Group into Subgraph".
-
-
----
-
-## 🤝 Q4 2026: Collaboration & Teams (v2.0)
-*Focus: Turning a solo developer tool into a team powerhouse.*
-
-### 👥 Real-Time Multiplayer
-- **Live Cursors**: See where your teammates are looking.
-- **Conflict-Free Editing**: Powered by **Yjs** and CRDTs for seamless collaborative sessions.
-- **Presence**: "Who's on this flow?" indicators.
-
-### 💬 Contextual Comments
-- Pin comments directly to nodes or edges.
-- @mention team members to assigned tasks within the diagram.
-- Resolve threads as you complete the implementation.
-
-### 💾 Cloud Persistence Adapter
-- Optional reference implementation for saving flows to PostgreSQL/Supabase.
-- "Project" view to organize hundreds of diagrams.
-
----
-
-## 🛠️ 2027: The Platform Era (v3.0)
-*Focus: Deep integration into the developer ecosystem.*
-
-### 🔌 IDE Extensions
-- **VS Code Extension**: Edit `.flow` or `.mermaid` files directly inside VS Code with our premium GUI.
-- **IntelliJ / JetBrains Plugin**: Native support for Java/Kotlin ecosystem diagrams.
-
-### 🎨 Advanced Design System
-- **Figma Sync**: Two-way synchronization. Push changes from Figma to OpenFlowKit and vice-versa.
-- **Custom React Nodes**: A plugin API to let developers render *any* React component inside a node (Charts, Data Grids, Videos).
-
-### 📊 Data-Driven Diagrams
-- **Live Metrics**: Bind node colors/sizes to real-time API data (e.g., Server Health visualization).
-- **SQL-to-ERD**: Connect to your DB and auto-generate the Entity Relationship Diagram.
-
----
-
-## 💡 Community Wishlist
-Features we are exploring based on user requests:
-- [ ] **Presentation Mode**: Slide-by-slide walkthrough of complex flows.
-- [ ] **Accessibility (A11y)**: Screen reader support and keyboard navigation improvements.
-- [ ] **Internationalization (i18n)**: Translating the UI into 10+ languages.
-
----
-
-*Current Version: v1.0.0-beta*  
-*Last Updated: February 2026*
diff --git a/docs/en/smart-layout.md b/docs/en/smart-layout.md
deleted file mode 100644
index 8dfa17b..0000000
--- a/docs/en/smart-layout.md
+++ /dev/null
@@ -1,20 +0,0 @@
-
-FlowMind includes a powerful "Smart Layout" engine powered by **ELK (Eclipse Layout Kernel)**. 
-
-## How it Works
-
-Drawing complex diagrams by hand is tedious. You spend more time ALIGNING boxes than thinking about the logic. 
-Smart Layout fixes this by running a force-directed algorithm to automatically arrange your nodes.
-
-### Usage
-1.  Click the **Layout** button in the Command Center (or top toolbar).
-2.  The engine calculates the optimal position for every node and edge.
-3.  The diagram animates smoothly to its new structure.
-
-### Features
-*   **Hierarchical Layering**: Perfect for flowcharts and organizational trees.
-*   **Collision Detection**: Ensures nodes never overlap.
-*   **Edge Routing**: Minimizes line crossings for cleaner readability.
-
-> [!TIP]
-> Use Smart Layout after importing a raw Mermaid text or generating a large flow with AI to instantly tidy up the result.
diff --git a/docs/en/theming.md b/docs/en/theming.md
deleted file mode 100644
index d3bac43..0000000
--- a/docs/en/theming.md
+++ /dev/null
@@ -1,21 +0,0 @@
-
-
-Customize FlowMind to match your personal preference or brand identity.
-
-## Brand Settings
-
-Navigate to **Settings > Brand Kit** to configure:
-
-*   **Primary Color**: The main accent color for buttons, active states, and focused nodes.
-*   **Background**: The canvas background color.
-*   **Surface**: The color of panels and sidebars.
-*   **Logo**: Upload your own logo to replace the FlowMind icon in the sidebar.
-
-
-
-## Export Settings
-
-When exporting images (PNG/SVG):
-*   **Transparent Background**: Toggle this if you want to overlay the diagram on slides.
-*   **Scale**: Increase scale (e.g., 2x, 3x) for high-resolution printing.
-*   **Include Watermark**: You can disable the branding watermark in the export settings.
diff --git a/docs/en/v1-beta-launch.md b/docs/en/v1-beta-launch.md
deleted file mode 100644
index 2baf887..0000000
--- a/docs/en/v1-beta-launch.md
+++ /dev/null
@@ -1,63 +0,0 @@
-# 🚀 OpenFlowKit V1 Beta: The Future of Diagram-as-Code is Here
-
-We are beyond excited to officially announce the **OpenFlowKit V1 Beta**. What started as a simple flowchart tool has evolved into a comprehensive, white-label diagramming ecosystem designed for developers who demand premium aesthetics and local-first reliability.
-
-This release marks a fundamental shift in our mission: **OpenFlowKit is no longer just an app; it's a foundation for your next project.**
-
----
-
-## 🏗️ What's New in V1 Beta?
-
-### 🎨 The Brand Engine (True White-Labeling)
-Most diagramming tools force you to look like their product. OpenFlowKit is the first open-source tool built to look like **yours**.
-- **Dynamic Palette Generation**: Enter one primary color, and our engine generates a smooth, harmonious design system including surface, background, and accent colors.
-- **Typography Integration**: Native Google Fonts support allows you to sync your app's typography directly with the canvas.
-- **UI Physics**: Toggle Glassmorphism and adjust border radiuses to match your brand's aesthetic density.
-
-### 📜 Diagram-as-Code (DaC) Second-to-None
-We treat diagrams as data. Whether you're a Mermaid.js power user or prefer a custom DSL, we've got you covered.
-- **Expanded Mermaid Support**: Full fidelity for Flowcharts, State Diagrams, and Subgraphs.
-- **FlowMind DSL**: A human-readable notation designed for rapid prototyping without touching a mouse.
-- **Live Sync**: Visual changes and code changes stay perfectly in sync, offering the best of both worlds.
-
-### 💎 Figma Fidelity Export
-Stop screenshotting! Our "Figma-First" export strategy ensures your diagrams belong in your design files.
-- **Vector Perfection**: Export clean SVGs that maintain stroke precision and rounded corners.
-- **Editable Text**: Labels are exported as native SVG text blocks, meaning you can fix typos directly in Figma without redrawing.
-
-### 🔑 Privacy-First AI (BYOK)
-AI is powerful, but your data is private. Our **Bring Your Own Key** model puts you in control.
-- **Gemini Powered**: Use your own Gemini API key for intelligent diagram generation.
-- **Local Storage**: Your API keys are stored locally in your browser and never touch our servers.
-
-### 🖼️ Image-to-Flowchart (Vision AI)
-Sketch it, scan it, ship it.
-- **Visual Recognition**: Upload a photo of a whiteboard session or napkin sketch.
-- **Instant Conversion**: Our AI analyzes the visual structure and converts it into a fully editable, semantic flowchart in seconds.
-
-### 📦 The Library Ecosystem
-In addition to the standalone editor, we've extracted OpenFlowKit's core into `@openflowkit/core`. This allows developers to embed our state-of-the-art parsers and theming logic into their own applications.
-
----
-
-## 🌟 The Philosophy: Premium & Open
-We believe that open-source tools shouldn't "look" like open-source tools. OpenFlowKit V1 Beta brings the polish of a billion-dollar SaaS product to the open-source community, 100% free under the MIT license.
-
----
-
-## 🛣️ What's Next?
-The V1 Beta is just the beginning. We are working on:
-- **Collaborative Real-Time Editing** (Yjs/WebRTC).
-- **Expanded Component Libraries** for wireframing.
-- **Direct Figma Plugin** integration.
-
----
-
-## ❤️ Get Involved
-OpenFlowKit is built by and for developers.
-- ⭐️ **Star us on GitHub**: Help us reach more developers!
-- 💬 **Join the Discussion**: Share your brand kits and feedback.
-- 🛠️ **Contribute**: Check out the `CONTRIBUTING.md` to help build the future of diagramming.
-
-**Happy Diagramming!**  
-*The OpenFlowKit Team*
diff --git a/docs/internal/COMPETITIVE_ANALYSIS.md b/docs/internal/COMPETITIVE_ANALYSIS.md
new file mode 100644
index 0000000..d9aa93e
--- /dev/null
+++ b/docs/internal/COMPETITIVE_ANALYSIS.md
@@ -0,0 +1,273 @@
+# OpenFlowKit — Competitive Analysis + Launch Roadmap
+
+**Last updated:** 2026-03-26
+**Audience:** Founder. Unfiltered.
+**Status:** Rewritten against the current codebase, not old assumptions.
+
+---
+
+## Who We Are Actually Building For
+
+Primary audience:
+- developers
+- technical builders
+- DevRel / technical writers
+- startup teams shipping technical products
+
+Secondary audience:
+- PMs and designers who work closely with technical systems
+
+This matters because our strongest wedge is not "general diagramming for everyone."
+It is:
+
+> **local-first diagramming for builders who need structure, portability, privacy, and AI-assisted workflows**
+
+The product can serve broader users, but the launch story is strongest when we lead with the technical builder use case.
+
+---
+
+## Verified Current State
+
+### Clearly Shipped
+
+These are real in the codebase today:
+
+- Welcome flow with template/import/blank entry points
+- Inline AI key setup in the studio panel
+- Cinematic animated export in the product UI as video and GIF
+- Sequence diagrams with plugin support, Mermaid import/export, property-panel support, and starter template coverage
+- `/view` route and share viewer flow
+- Template system with launch-priority metadata
+- SQL import, Terraform/Kubernetes/Docker Compose infrastructure parsing, Mermaid import/export, OpenFlow JSON document import/export
+- Architecture linting with rule library/templates
+- Playback/presentation system
+- Collaboration beta
+- Figma export and Figma style import
+
+### Shipped But Still Needs Polish
+
+- Welcome flow is better than before, but the builder-first path can still be more explicit.
+- AI setup works, but the local-first / BYOK explanation can still be clearer.
+- Template gallery has strong foundations, but the launch-facing set is still thin relative to the opportunity.
+- Share/embed exists, but the output and promotion surface are still not strong enough.
+- Cinematic export direction is strong, but visual polish and export performance still have room to improve.
+
+### Partially Shipped
+
+- Sequence is no longer missing. It is partially complete and already useful, but still deserves a completion audit before aggressive claims.
+- C4 and network support exist in meaningful form through architecture resource types, starter templates, asset categories, and lint templates, but the breadth is still below dedicated enterprise diagram suites.
+- Local-first persistence is real, but cold-start offline app-shell support is still not defensible.
+
+### Not Shipped Yet
+
+- true offline PWA/app-shell caching
+- larger enterprise-oriented shape breadth
+- scale/performance work specifically for very large diagrams
+- stronger embed preset system for README/card/full share formats
+
+---
+
+## Verified By Code Inspection
+
+### What is actually true right now
+
+| Feature | Status | Notes |
+|---|---|---|
+| Welcome onboarding | ✅ | Builder-oriented starter templates/import prompts are already configured in `src/services/onboarding/config.ts` |
+| Inline AI setup | ✅ | Present in `StudioAIPanel` and wired into the main studio flow |
+| Cinematic export | ✅ | Current animated export path is cinematic-only in the UI |
+| Sequence diagrams | ✅ | Visual node/edge types, property panels, Mermaid export, parser plugin, starter template |
+| C4 architecture support | ✅ partial | Resource types, templates, lint library support exist |
+| Network/infra support | ✅ partial | Network resource types, templates, provider catalogs, infra parsers exist |
+| README/share viewer | ✅ | `/view` route and share modal flow exist |
+| Local-first persistence | ✅ | Stored locally; no server account model required |
+| Full offline cold-start | ❌ | No defensible service-worker app-shell layer yet |
+
+### Important corrections to old assumptions
+
+- Sequence is **not** a missing feature anymore.
+- Animated export is **not** "playback/reveal first" anymore in the product UI. The product now exposes cinematic export.
+- C4 and network support are **not** fully absent. They exist, but are still shallow compared with the eventual target.
+- The product is stronger for technical builders than the old "broad builders" framing admitted.
+
+---
+
+## Competitive Read
+
+### Where we are genuinely strong
+
+1. **AI breadth + privacy**
+We have a wider practical AI surface than most diagram tools, and we do it with a BYOK/local-first posture that is genuinely differentiated.
+
+2. **Export portability**
+PNG, SVG, PDF, Mermaid, PlantUML, JSON/OpenFlow, Figma, and cinematic animated output is an unusually strong export surface.
+
+3. **Structured technical diagram depth**
+ER, architecture, class, state, journey, mindmap, flowchart, and sequence give us a better technical-builder mix than the usual whiteboard-first tools.
+
+4. **Local-first product story**
+No account, no default server storage, portable artifacts, and private workflows are a meaningful wedge.
+
+### Where competitors still feel stronger
+
+1. **Activation and immediate clarity**
+FigJam, Excalidraw, and even Lucidchart feel clearer in the first minute.
+
+2. **Template breadth**
+Lucidchart and draw.io win on sheer catalog volume.
+
+3. **Visual polish**
+We are better than before, but still not at the level where people immediately describe the product as premium or inevitable.
+
+4. **Cold-start offline**
+We can honestly claim local-first persistence. We should not yet over-claim full offline web-app resilience.
+
+---
+
+## Honest Gaps
+
+### Gap 1 — Activation polish
+
+Still the highest-priority product gap.
+
+What remains:
+- make the fastest builder paths even more obvious
+- reduce any ambiguity between template, import, and AI-first starts
+- ensure the first useful artifact happens in under 2 minutes
+
+Why it matters:
+- this directly affects Product Hunt conversion
+- this directly affects Hacker News patience
+- this is more important than adding breadth right now
+
+### Gap 2 — AI setup clarity
+
+The capability is real. The explanation can still be sharper.
+
+What remains:
+- clearer provider guidance
+- clearer local-first / key storage explanation
+- clearer “what to do next” immediately after a key is saved
+
+Why it matters:
+- AI is one of our biggest moats
+- if setup feels unclear, the moat is invisible
+
+### Gap 3 — Sequence completion audit
+
+Sequence is already in the product, but it should be treated as a completion/polish project.
+
+What remains:
+- verify create/edit/export/re-import paths end to end
+- ensure discovery is strong enough from app entry points
+- tighten starter template and documentation support
+
+Why it matters:
+- sequence is highly searched by backend/API users
+- under-claiming a real feature is better than overstating a partial one
+
+### Gap 4 — Share/embed quality
+
+The underlying share system exists. The output is not yet strong enough to become a distribution loop.
+
+What remains:
+- better viewer presets
+- better Markdown/embed snippets
+- more explicit promotion of shareable outputs
+
+Why it matters:
+- this is the bridge from “good product” to “artifacts that spread”
+
+### Gap 5 — Template gallery depth
+
+The system exists. The catalog is the weak point.
+
+What remains:
+- more curated technical-builder templates
+- stronger naming, descriptions, and launch-quality examples
+- a better “first page” of templates for common builder tasks
+
+Why it matters:
+- this improves activation
+- this improves SEO/content capture
+- this reduces blank-canvas friction
+
+### Gap 6 — Offline/PWA defensibility
+
+Current honest statement:
+- local-first persistence: yes
+- works without a backend for many flows: yes
+- guaranteed cold-start offline web app: no
+
+What remains:
+- app-shell caching
+- service-worker strategy
+- removal of remaining cold-start external dependencies from the critical offline path
+
+### Gap 7 — Performance at scale
+
+Current work has improved structure and some export performance, but large-diagram behavior still needs direct profiling and targeted optimization.
+
+What remains:
+- large graph profiling
+- path/render cost reduction
+- export performance follow-up
+
+---
+
+## Outdated Claims Removed
+
+These were stale and should no longer guide planning:
+
+- "Sequence must build from scratch"
+- "Cinematic reveal export needs to be invented"
+- "C4/network are not started at all"
+- "Playback/reveal export menu is the current product surface"
+
+These are no longer true enough to use as roadmap anchors.
+
+---
+
+## Recommended Execution Order
+
+### Next 2 Weeks
+
+1. Activation polish
+2. AI setup clarity
+3. Sequence completion audit
+4. Share/embed preset quality
+5. Template gallery expansion
+
+### After That
+
+1. Offline/PWA hardening
+2. Performance-at-scale work
+3. Broader C4/network depth
+4. Additional enterprise-oriented shape breadth
+
+---
+
+## What I Would Improve In This Doc Later
+
+This version is now a much better source of truth, but it could still improve by adding:
+
+- a stricter scoring table per pending item
+- a launch-only subset versus a post-launch subset
+- explicit owner/scope per item
+- direct links from each roadmap bullet to the code surface that supports it
+
+---
+
+## Bottom Line
+
+The product is stronger than the older roadmap implied.
+
+The biggest remaining work is not "invent major new capability."
+It is:
+
+- finish and sharpen what already exists
+- make the best features easier to discover
+- make the resulting artifacts easier to share
+- only then broaden further
+
+That is a much better position than being early on fundamentals.
diff --git a/docs/tr/ai-generation.md b/docs/tr/ai-generation.md
deleted file mode 100644
index 6a5e6ee..0000000
--- a/docs/tr/ai-generation.md
+++ /dev/null
@@ -1,41 +0,0 @@
-
-
-FlowMind, doğal dili anlayarak yapısal diyagramlara dönüştürmek için Google'ın **Gemini 2.0 Flash** modelinden yararlanır.
-
-## Nasıl Çalışır?
-
-1.  **Niyet Analizi**: Yapay zeka, isteminizi analiz ederek *hedefi* (örn. "Giriş Akışı") ve *aktörleri* (Kullanıcı, Sunucu, Veritabanı) anlar.
-2.  **Yapısal Üretim**: Düğümleri ve bağlantıları temsil eden geçerli bir FlowMind DSL JSON nesnesi oluşturur.
-3.  **Düzen Optimizasyonu**: Motor, oluşturulan grafiğin okunabilir olmasını sağlamak için akıllı düzen algoritmaları uygular.
-
-## İstemler İçin En İyi Uygulamalar
-
-En iyi sonuçları elde etmek için **adımlar** ve **çıktı** hakkında spesifik olun.
-
-### ❌ Çok Belirsiz
-> "Bir sistem diyagramı yap."
-
-### ✅ İyi
-> "Bir e-ticaret platformu için üst düzey sistem mimarisi oluştur. Web Uygulaması, API Ağ Geçidi, Kullanıcı Servisi, Ürün Servisi ve ortak bir PostgreSQL veritabanı içersin."
-
-### ✅ Daha İyi (Süreç Akışı)
-> "Kullanıcı şifre sıfırlama süreci için bir akış diyagramı çiz. 'Kullanıcı şifremi unuttum'a tıklar' ile başla, e-postanın var olup olmadığını kontrol et. Evet ise benzersiz token gönder. Hayır ise hata göster. 'Kullanıcı yeni şifresini girer' ile bitir."
-
-## Yapay Zeka Sonuçlarını Düzenleme
-
-Yapay zeka üretimi bir başlangıç noktasıdır, son nokta değil. Her zaman şunları yapabilirsiniz:
-*   Eksik adımları manuel olarak ekleyin.
-*   Netlik için düğümleri yeniden adlandırın.
-*   Belirli bölümleri yeniden oluşturun (Yakında).
-
-## 🔑 Kendi Anahtarını Getir (BYOK)
-
-FlowMind varsayılan olarak sınırlı kotaya sahip paylaşımlı bir API anahtarı kullanır. Yoğun kullanım, gizlilik veya kendi faturalandırmanızı kullanmak için kendi **Gemini API Anahtarınızı** getirebilirsiniz.
-
-1.  **Google AI Studio**'ya gidin ve [API Anahtarı Alın](https://aistudio.google.com/app/apikey).
-2.  FlowMind'da **Ayarlar**'ı (Dişli Simgesi) açın veya herhangi bir **Marka Kiti**'ne tıklayın.
-3.  **Yapay Zeka** sekmesine gidin.
-4.  Anahtarınızı güvenli giriş alanına yapıştırın.
-
-> [!NOTE]
-> Anahtarınız tarayıcınızın `localStorage` alanında yerel olarak saklanır ve sunucularımıza hiçbir zaman gönderilmez. Yalnızca Google'a yapılan istemci taraflı API çağrıları için kullanılır.
diff --git a/docs/tr/ask-flowpilot.md b/docs/tr/ask-flowpilot.md
deleted file mode 100644
index cd31b20..0000000
--- a/docs/tr/ask-flowpilot.md
+++ /dev/null
@@ -1,3 +0,0 @@
-# Flowpilot Asistanına Sor
-
-Bu sayfa, `DocsPage.tsx` içindeki AI Asistan bileşeni tarafından dinamik olarak değiştirilir. Bu dosya yalnızca Vite dinamik glob içe aktarıcısını ve yönlendirme mantığını karşılamak için mevcuttur.
diff --git a/docs/tr/canvas-basics.md b/docs/tr/canvas-basics.md
deleted file mode 100644
index 1d05751..0000000
--- a/docs/tr/canvas-basics.md
+++ /dev/null
@@ -1,26 +0,0 @@
-
-FlowMind tuvali sonsuz, etkileşimli bir çalışma alanıdır. Etkin biçimde gezinmek ve kullanmak için aşağıdaki rehberi inceleyin.
-
-## Gezinti
-
-*   **Kaydırma**: Belirli fare eylemi (örn. Boşluk Tuşu + Sürükle veya Orta Tıklama + Sürükle) tuval görünümünü taşır.
-*   **Yakınlaştırma**: Fare tekerleğini kullanarak yakınlaştırın ve uzaklaştırın.
-*   **Görünüme Sığdır**: Tüm düğümleri görünüme sığdırmak için \`Shift + 1\` tuşlarına basın.
-
-## Düğüm İşlemleri
-
-### Düğüm Seçme
-*   **Tekli Seçim**: Bir düğüme tıklayın.
-*   **Çoklu Seçim**: \`Shift\` tuşunu basılı tutarak birden fazla düğüme tıklayın veya etraflarına bir seçim kutusu çizmek için tıklayıp sürükleyin.
-
-### Kopyalama
-Bir veya daha fazla düğümü seçin ve kopyalamak için \`Cmd + D\` (Mac) veya \`Ctrl + D\` (Windows) tuşlarına basın.
-
-### Silme
-Düğümleri seçin ve \`Backspace\` veya \`Delete\` tuşuna basın.
-
-## Mini Harita
-
-Sağ alt köşedeki Mini Harita, tüm akışınıza genel bir bakış sunar. Büyük diyagramlarda hızlıca gezinmek için mini haritanın içindeki görünüm kutusunu sürükleyebilirsiniz.
-
-[YER TUTUCU: Çağrı açıklamalarıyla Tuval Arayüzü görseli]
diff --git a/docs/tr/command-center.md b/docs/tr/command-center.md
deleted file mode 100644
index 7e89bdf..0000000
--- a/docs/tr/command-center.md
+++ /dev/null
@@ -1,27 +0,0 @@
-Komut Merkezi, ekranın alt kısmındaki kayan araç çubuğudur. FlowMind'ın "klavye öncelikli" iş akışının kalbidir.
-
-> [!NOTE]
-> Komut Merkezini istediğiniz zaman `Cmd + K` (Mac) veya `Ctrl + K` (Windows) tuşlarına basarak açabilirsiniz.
-
-## Özellikler
-
-### 1. Şablonlar
-Sıfırdan başlamayın. Önceden hazırlanmış diyagram kütüphanesine erişin:
-*   AWS Mimari Şablonları
-*   Kullanıcı Yolculuğu Haritaları
-*   Veritabanı Şemaları
-*   Organizasyon Şemaları
-
-### 2. Tasarım Sistemi / Görseller
-Diyagramınızı zenginleştirmek için varlık kütüphanesine erişin:
-*   **Tel Çerçeveler**: Hızlı taslaklar oluşturmak için düşük kaliteli UI bileşenlerini (Düğmeler, Girişler, Modaller) sürükleyip bırakın.
-*   **İkonlar**: Herhangi bir ikonu bağımsız bir düğüm olarak arayın ve ekleyin.
-
-### 3. Yapay Zeka Copilot
-Komut Merkezindeki metin girişi, yapay zeka motorumuza doğrudan bağlantınızdır. Ne oluşturmak istediğinizi yazın ve `Enter` tuşuna basarak anında oluşturun.
-
-### 4. Düzen ve Araçlar
-Yardımcı işlevlere hızlıca erişin:
-*   **Otomatik Düzen**: Karmaşıklığı düzenleyin.
-*   **Görünümü Sıfırla**: Merkeze geri dönün.
-*   **Kodu Biçimlendir**: DSL'nizi düzenleyin.
diff --git a/docs/tr/exporting.md b/docs/tr/exporting.md
deleted file mode 100644
index 9a0032f..0000000
--- a/docs/tr/exporting.md
+++ /dev/null
@@ -1,46 +0,0 @@
-FlowMind, diyagramlarınızı sunumlarda, belgelerde veya diğer harici araçlarda kullanmanıza yardımcı olmak için geniş bir dışa aktarma seçenekleri yelpazesi sunar.
-
-> [!TIP]
-> Tüm dışa aktarma seçeneklerine araç çubuğunun sağ üst köşesindeki **"Dışa Aktar"** düğmesinden ulaşabilirsiniz.
-
-## Görsel Dışa Aktarma
-
-Slaytlar, belgeler veya Slack'te paylaşmak için idealdir.
-
-### PNG (Taşınabilir Ağ Grafikleri)
-Mevcut akışınızın yüksek çözünürlüklü, piksel tabanlı bir görselini dışa aktarır.
-*   **En İyi Kullanım**: Slaytlar, Web, Genel Paylaşım.
-*   **Ayarlar**: Ayarlarda etkinleştirilmişse varsayılan olarak şeffaflık içerir.
-
-### JPEG (Ortak Fotoğrafçılık Uzmanları Grubu)
-Sıkıştırılmış bir görsel dosyası dışa aktarır.
-*   **En İyi Kullanım**: E-posta ekleri, dosya boyutunun önemli olduğu durumlar.
-*   **Not**: Şeffaflığı desteklemez (arka plan beyaz olacaktır).
-
-## Veri ve Kod Dışa Aktarma
-
-FlowMind bir "Kod Olarak Diyagram" aracıdır; bu nedenle diyagram verilerinizi birinci sınıf vatandaş olarak ele alıyoruz.
-
-### JSON (FlowMind Yerel Formatı)
-Tüm düğüm konumlarını, stillerini ve verilerini içeren ham `.json` dosyasını indirir.
-*   **En İyi Kullanım**: Yedekleme, Sürüm Kontrolü, Diğer FlowMind kullanıcılarıyla düzenlenebilir dosya paylaşımı.
-
-### FlowMind DSL
-Basitleştirilmiş Alan Spesifik Dil (DSL) temsilini panonuza kopyalar.
-*   **En İyi Kullanım**: Diyagram mantığını kod tabanı yorumlarında saklamak veya yapay zeka aracılığıyla benzer akışlar oluşturmak.
-
-### Mermaid.js
-Mevcut diyagramınızı [Mermaid](https://mermaid.js.org/) sözdizimine dönüştürür ve panoya kopyalar.
-*   **En İyi Kullanım**: GitHub `README.md` dosyalarına, Notion veya Obsidian'a diyagram gömme.
-*   **Desteklenen**: Temel Akış Şemaları, Sekans Diyagramları.
-
-### PlantUML
-Diyagramınızın PlantUML temsilini kopyalar.
-*   **En İyi Kullanım**: Kurumsal wikiler (Confluence) veya eski dokümantasyon sistemleri.
-
-### Figma
-Figma'nın yapıştırma formatıyla uyumlu bir vektör temsilini kopyalar.
-*   **En İyi Kullanım**: Yüksek kaliteli parlatma için diyagramları tasarımcılara teslim etme.
-
-> [!WARNING]
-> Figma dışa aktarma deneyseldir. Karmaşık özel düğümler %100 mükemmel aktarılmayabilir.
diff --git a/docs/tr/introduction.md b/docs/tr/introduction.md
deleted file mode 100644
index 1beaf01..0000000
--- a/docs/tr/introduction.md
+++ /dev/null
@@ -1,34 +0,0 @@
-**OpenFlowKit**, yapay zeka destekli görselleştirme ile hassas, kod tabanlı düzenleme arasındaki boşluğu dolduran yeni nesil bir diyagram aracıdır. Geliştiriciler, mimarlar ve ürün yöneticileri için tasarlanan OpenFlowKit, doğal dil veya özel DSL'imizi kullanarak karmaşık akış şemaları, sıra diyagramları ve sistem mimarileri oluşturmanıza olanak tanır.
-
-## Neden OpenFlowKit?
-
-Geleneksel diyagram araçları genellikle şu seçenekler arasında tercih yapmaya zorlar:
-1.  **Sürükle-bırak araçları**: Başlamak kolay, ancak sürdürmesi ve versiyon kontrolü zor.
-2.  **Kod tabanlı araçlar (Mermaid gibi)**: Versiyon kontrolü için harika, ancak sıfırdan yazmak zahmetli olabilir.
-
-OpenFlowKit size her iki dünyanın en iyisini sunar. Bir metin istemiyle başlangıç yapısını oluşturabilir, ardından **Hibrit Editörümüzü** kullanarak düzenleyebilirsiniz—düğümleri tuval üzerinde görsel olarak manipüle edebilir *veya* altta yatan kodu doğrudan düzenleyebilirsiniz.
-
-## Temel Özellikler
-
-### Yapay Zeka Destekli Üretim
-Sisteminizi basitçe tanımlayın: *"OAuth yedekli ve hata işlemeli bir giriş akışı oluştur."* OpenFlowKit'in Gemini entegrasyonu tüm diyagramı anında oluşturur.
-
-### Hibrit Tuval
-Tuvalimiz sadece statik bir görüntü değil. Tamamen etkileşimli bir grafik ortamıdır.
-*   **Sürükle & Bırak**: Düğümleri taşıyın, otomatik hizalama.
-*   **Akıllı Düzenler**: Elk.js kullanarak tek tıkla yeniden düzenleme.
-*   **Özellikler Paneli**: CSS'e dokunmadan belirli düğüm stillerini ince ayarlayın.
-
-### Kod Olarak Diyagram
-Her diyagram okunabilir, düzenlenebilir bir JSON yapısı ile desteklenir ve Mermaid.js sözdizimi ile uyumludur. Bu, dokümantasyonunuzun kodunuzla birlikte yaşayabileceği anlamına gelir.
-
-### Premium Estetik
-"Önce Tasarım" yaklaşımıyla oluşturulan OpenFlowKit diyagramları varsayılan olarak sunum için hazırdır. Artık çirkin, varsayılan gri kutular yok.
-
-## Sonraki Adımlar
-
-Başlamaya hazır mısınız?
-
-*   İlk akışınızı oluşturmak için [Hızlı Başlangıç](/docs/tr/quick-start) kılavuzuna göz atın.
-*   [Tuval Temelleri](/docs/tr/canvas-basics) hakkında bilgi edinin.
-*   [OpenFlow DSL](/docs/tr/openflow-dsl)'de ustalaşın.
diff --git a/docs/tr/keyboard-shortcuts.md b/docs/tr/keyboard-shortcuts.md
deleted file mode 100644
index a577f78..0000000
--- a/docs/tr/keyboard-shortcuts.md
+++ /dev/null
@@ -1,30 +0,0 @@
-
-İş akışınızı hızlandırmak için bu klavye kısayollarıyla FlowMind'ı ustalıkla kullanın.
-
-## Genel
-
-| Eylem | MacOS | Windows/Linux |
-| :--- | :--- | :--- |
-| **Komut Paleti** | \`Cmd + K\` | \`Ctrl + K\` |
-| **Kaydet** | \`Cmd + S\` | \`Ctrl + S\` |
-| **Geri Al** | \`Cmd + Z\` | \`Ctrl + Z\` |
-| **Yeniden Yap** | \`Cmd + Shift + Z\` | \`Ctrl + Shift + Z\` |
-
-## Tuval Gezintisi
-
-| Eylem | MacOS | Windows/Linux |
-| :--- | :--- | :--- |
-| **Yakınlaştır** | \`+\` | \`+\` |
-| **Uzaklaştır** | \`-\` | \`-\` |
-| **Görünüme Sığdır** | \`Shift + 1\` | \`Shift + 1\` |
-
-## Düzenleme
-
-| Eylem | MacOS | Windows/Linux |
-| :--- | :--- | :--- |
-| **Düğümü Kopyala** | \`Cmd + D\` veya \`Alt + Sürükle\` | \`Ctrl + D\` veya \`Alt + Sürükle\` |
-| **Düğümü Sil** | \`Backspace\` | \`Backspace\` |
-| **Tümünü Seç** | \`Cmd + A\` | \`Ctrl + A\` |
-| **Seçimi Grupla** | \`Cmd + G\` | \`Ctrl + G\` |
-
-> **Not:** Kısayollar yalnızca tuval odakta iken aktiftir.
diff --git a/docs/tr/mermaid-integration.md b/docs/tr/mermaid-integration.md
deleted file mode 100644
index 05b892c..0000000
--- a/docs/tr/mermaid-integration.md
+++ /dev/null
@@ -1,30 +0,0 @@
-FlowMind, kod olarak diyagram için endüstri standardı olan [Mermaid.js](https://mermaid.js.org/) ile yüksek uyumluluk sağlar.
-
-## Mermaid İçe Aktarma
-
-Mevcut Mermaid kodunu doğrudan FlowMind'a yapıştırabilirsiniz.
-
-1.  Araç çubuğundaki **"İçe Aktar"** düğmesine tıklayın.
-2.  **"Mermaid"** seçeneğini seçin.
-3.  Kod parçacığınızı yapıştırın.
-
-### Desteklenen Diyagram Türleri
-FlowMind şu an için aşağıdakileri optimize etmektedir:
-*   **Akış Şemaları** (`graph TD`, `graph LR`)
-*   **Sekans Diyagramları** (Dönüşüm yoluyla kısmi destek)
-
-```mermaid
-graph TD
-    A[Başlat] --> B{Çalışıyor mu?}
-    B -- Evet --> C[Harika!]
-    B -- Hayır --> D[Hata Ayıkla]
-```
-
-## Mermaid'e Dışa Aktarma
-
-Herhangi bir FlowMind diyagramını Mermaid sözdizimine *geri* aktarabilirsiniz.
-Bu özellik, GitHub `README.md` dosyalarına veya Notion belgelerine diyagram gömmek için idealdir.
-
-1.  **Kod Paneli**'ni açın (alt panel).
-2.  **"Mermaid"** sekmesine geçin.
-3.  Oluşturulan kodu kopyalayın.
diff --git a/docs/tr/node-types.md b/docs/tr/node-types.md
deleted file mode 100644
index a3b7881..0000000
--- a/docs/tr/node-types.md
+++ /dev/null
@@ -1,31 +0,0 @@
-
-FlowMind, farklı diyagram ihtiyaçlarını karşılamak için çeşitli özel düğüm türlerini destekler.
-
-## 1. Özel Düğüm (Varsayılan)
-
-Diyagramlarınızın temel yapı taşı. Başlık, isteğe bağlı ikon ve zengin bağlantı tutamaçlarını destekler.
-*   **En İyi Kullanım**: Süreç adımları, servisler, veritabanı tabloları veya genel varlıklar.
-*   **Özellikler**: Yeniden boyutlandırılabilir, düzenlenebilir etiket, ikon desteği.
-
-## 2. Metin Düğümü / Açıklama
-
-Akış yapısını etkilemeden tuvale yorum veya etiket eklemek için kullanılan hafif, kenarsız bir düğüm.
-*   **En İyi Kullanım**: Yapışkan notlar, bölüm başlıkları veya açıklayıcı metin ekleme.
-*   **Kullanım**: Araç çubuğundan "Metin" seçin veya \`T\` tuşuna basın.
-
-## 3. Grup Düğümü
-
-Diğer düğümleri görsel olarak bir arada tutan kapsayıcı düğümler. Bir grubu taşımak, içindeki tüm düğümleri de taşır.
-*   **En İyi Kullanım**: Alt sistemleri, VPC'leri veya mantıksal sınırları görselleştirme.
-*   **Kullanım**: Düğümleri seçin → Sağ Tıklayın → "Seçimi Grupla".
-
-## 4. Yüzme Şeridi Düğümü
-
-Süreçleri aktöre veya departmana göre düzenlemek için dikey veya yatay şeritler.
-*   **En İyi Kullanım**: Çok işlevli akış şemaları.
-
-## 5. Görsel Düğümü
-
-İsteğe bağlı görselleri doğrudan tuvale yerleştirin.
-*   **En İyi Kullanım**: Logo, ekran görüntüsü veya referans diyagramı ekleme.
-*   **Kullanım**: Bir görsel dosyasını doğrudan tuvalin üzerine sürükleyip bırakın.
diff --git a/docs/tr/openflow-dsl.md b/docs/tr/openflow-dsl.md
deleted file mode 100644
index d01ee91..0000000
--- a/docs/tr/openflow-dsl.md
+++ /dev/null
@@ -1,398 +0,0 @@
-# 🧠 FlowMind DSL Sözdizimi Rehberi (V2)
-
-FlowMind, diyagramları metin kullanarak tanımlamak için temiz, insan tarafından okunabilir bir DSL kullanır.
-Sürüm 2 şunları sunar:
-
-* Açık düğüm kimlikleri
-* Stil özellikleri
-* Gruplar / kapsayıcılar
-* Kenar özelleştirmesi
-
----
-
-# 1️⃣ Belge Başlığı
-
-Her DSL dosyası isteğe bağlı meta verilerle başlayabilir:
-
-```yaml
-flow: "Harika İş Akışım"
-direction: TB
-```
-
-### Alanlar
-
-| Alan        | Açıklama                                                    |
-| ----------- | -------------------------------------------------------------- |
-| `flow`      | Diyagramın başlığı                                           |
-| `direction` | Düzen yönü: `TB` (Yukarıdan Aşağıya) veya `LR` (Soldan Sağa) |
-
----
-
-# 2️⃣ Düğümler
-
-Düğümler diyagram öğelerini tanımlar.
-
-## Temel Sözdizimi
-
-```
-[start] Süreci Başlat
-[process] İsteği İşle
-[end] Süreci Sonlandır
-```
-
----
-
-## Açık Kimliklerle
-
-Özellikle büyük akışlarda netlik için kullanışlıdır.
-
-```
-[start] start: Süreci Başlat
-[process] proc1: İsteği İşle
-[end] end: Süreci Sonlandır
-
-start -> proc1
-proc1 -> end
-```
-
----
-
-## Özelliklerle
-
-Özellikler JSON benzeri sözdizimi kullanır:
-
-```
-[process] p1: Kritik Adım { color: "red", icon: "alert-triangle" }
-[system] db: Veritabanı { icon: "database" }
-```
-
-### Özellik Örnekleri
-
-| Özellik   | Amaç                  |
-| --------- | --------------------- |
-| `color`   | Düğüm rengini geçersiz kıl |
-| `icon`    | İkon ekle              |
-| `style`   | Özel stil değiştirici |
-
----
-
-## Desteklenen Düğüm Türleri
-
-| DSL Türü    | Şekil             | Varsayılan Renk |
-| ----------- | ----------------- | ------------- |
-| `start`     | Kapsül            | Zümrüt        |
-| `end`       | Kapsül            | Kırmızı       |
-| `process`   | Yuvarlak dikdörtgen | Arduvaz      |
-| `decision`  | Elmas             | Amber         |
-| `system`    | Özel düğüm        | Mor           |
-| `note`      | Yapışkan not      | Sarı          |
-| `section`   | Grup kapsayıcısı  | Mavi          |
-| `container` | Genel grup        | Gri           |
-
-Bir düğüm bağlantıda referans alınır ancak tanımlanmazsa varsayılan olarak `process` kullanılır.
-
----
-
-# 3️⃣ Kenarlar (Bağlantılar)
-
-Bağlantılar düğümler arasındaki akışı tanımlar.
-
-## Temel Bağlantı
-
-```
-Süreci Başlat -> İsteği İşle
-```
-
----
-
-## Kenar Türleri
-
-| Sembol | Anlam       |
-| ------ | ----------- |
-| `->`   | Düz çizgi   |
-| `-->`  | Kavisli çizgi |
-| `..>`  | Kesik çizgi |
-| `==>`  | Kalın çizgi |
-
-Örnek:
-
-```
-A ..> B
-C ==> D
-```
-
----
-
-## Etiketli Bağlantılar
-
-Pipe karakterleri kullanın:
-
-```
-Geçerli mi? ->|Evet| Veriyi Kaydet
-Geçerli mi? ->|Hayır| Hata Döndür
-```
-
----
-
-## Kenar Özellikleri
-
-```
-A -> B { style: "dashed", label: "Async" }
-```
-
----
-
-# 4️⃣ Gruplar
-
-Düğümleri kümelemek için `group` kullanın.
-
-```
-group "Backend Servisleri" {
-    [process] api: API Sunucusu
-    [system] db: Veritabanı
-    api -> db
-}
-```
-
-Gruplar mantıksal alanları görsel olarak ayırmaya yardımcı olur.
-
----
-
-# 5️⃣ Yorumlar
-
-`#` ile başlayan satırlar yoksayılır.
-
-```
-# Bu bir yorumdur
-[start] Başla
-```
-
----
-
-# ✅ Tam Örnek
-
-```yaml
-flow: "Kullanıcı Giriş Akışı"
-direction: TB
-
-# Düğümleri Tanımla
-[start] user: Kullanıcı
-[process] login: Giriş Sayfası { icon: "log-in" }
-
-group "Kimlik Doğrulama" {
-    [system] auth: Auth Servisi
-    [decision] check: Geçerli mi?
-}
-
-[end] dash: Gösterge Paneli
-[end] err: Hata
-
-# Mantığı Tanımla
-user -> login
-login -> auth
-auth -> check
-
-check ->|Evet| dash { color: "green" }
-check ->|Hayır| err { color: "red", style: "dashed" }
-```
-
----
-
-# 🤖 LLM Ajan İstem Şablonu
-
-Bir LLM ajanı kullanarak FlowMind DSL oluşturmak isteyenler aşağıdaki istemi kullanabilir:
-
----
-
-## LLM için Kopyala-Yapıştır İstemi
-
-```
-Sen uzman bir FlowMind DSL V2 oluşturucususun.
-
-Görevin, kullanıcının iş akışı açıklamasını geçerli FlowMind DSL'ye dönüştürmektir.
-
-Aşağıda tanımlanan FlowMind DSL V2 spesifikasyonunu kesinlikle takip etmelisin.
-
-========================================
-FLOWMIND DSL V2 SPESİFİKASYONU
-========================================
-
-1. BELGE BAŞLIĞI (Zorunlu)
-
-Her çıktı şununla başlamalıdır:
-
-flow: "Başlık Buraya"
-direction: TB veya LR
-
-Kurallar:
-- Her zaman anlamlı bir başlık oluştur.
-- Kullanıcı açıkça yatay düzen belirtmediği sürece TB'yi varsayılan olarak kullan.
-
-----------------------------------------
-
-2. DÜĞÜM TANIMLAMA KURALLARI
-
-Düğüm sözdizimi:
-
-[tür] kimlik: Etiket { isteğe_bağlı_özellikler }
-
-Örnek:
-[process] p1: İsteği İşle
-[decision] d1: Geçerli mi? { icon: "help-circle" }
-
-Kurallar:
-- HER ZAMAN açık kimlikler kullan.
-- Kimlikler kısa, küçük harf ve boşluksuz olmalıdır.
-- Kimlikler benzersiz olmalıdır.
-- Anlamlı isimler kullan (start, login, checkAuth, db, vb.).
-- Etiketleri kimlik olarak KULLANMA.
-- Düğüm tanımlamalarını ATLAMA.
-
-Bir düğüm bağlantıda referans alınıyorsa önce tanımlanmış OLMALIDIR.
-
-----------------------------------------
-
-3. DESTEKLENEN DÜĞÜM TÜRLERİ
-
-YALNIZCA bu türleri kullan:
-
-start
-end
-process
-decision
-system
-note
-section
-container
-
-Kılavuz:
-
-start      → akışın başlangıcı
-end        → bitiş durumları
-process    → eylemler veya adımlar
-decision   → dallanma mantığı
-system     → harici sistem/servis/veritabanı
-note       → açıklamalar
-section    → ana gruplu alan
-container  → genel gruplama
-
-----------------------------------------
-
-4. DÜĞÜM ÖZELLİKLERİ (İsteğe Bağlı)
-
-Özellikler JSON benzeri sözdizimi kullanır:
-
-{ color: "red", icon: "database", style: "dashed" }
-
-Kurallar:
-- Özelliği yalnızca anlamlıysa ekle.
-- Stili minimal tut.
-- Desteklenmeyen özellikler uydurma.
-
-----------------------------------------
-
-5. KENARLAR (BAĞLANTILAR)
-
-Temel sözdizimi:
-kimlik1 -> kimlik2
-
-Kenar türleri:
-->   düz
--->  kavisli
-..>  kesik
-==>  kalın
-
-Etiketli kenarlar:
-kimlik1 ->|Evet| kimlik2
-
-Özellikli kenar:
-kimlik1 -> kimlik2 { label: "Async", style: "dashed" }
-
-Kurallar:
-- Her zaman etiket değil kimlik kullanarak bağlan.
-- Karar düğümleri etiketli kenarlar KULLANMALIDIR.
-- Karardan gelen her dal açık olmalıdır.
-- Yalnız düğüm bırakma.
-
-----------------------------------------
-
-6. GRUPLAR
-
-Mantıksal kümeleme mevcutsa gruplama kullan.
-
-Sözdizimi:
-
-group "Grup Adı" {
-    düğüm tanımlamaları
-    iç bağlantılar
-}
-
-Kurallar:
-- Gruplar yalnızca ilgili düğümleri kapsamalıdır.
-- Gruplar arası bağlantılar grup bloğunun dışında tanımlanmalıdır.
-
-----------------------------------------
-
-7. YORUMLAR
-
-Yorumlar için # kullan; aşırıya kaçma.
-Aşırı yorum yapma.
-
-----------------------------------------
-
-8. ÇIKTI KURALLARI (KATI)
-
-ZORUNLU:
-
-- YALNIZCA geçerli FlowMind DSL çıktısı üret
-- Açıklama YAPMA
-- Markdown biçimlendirmesi KULLANMA
-- Kod bloğuna SARMA
-- Yorum EKLEMEema
-- Ne yaptığını AÇIKLAMA
-- DSL dışında hiçbir şey ÇIKARMAK
-
-Kullanıcı açıklaması belirsizse:
-- Makul varsayımlar yap
-- Mantıklı yapı seç
-- Akışı temiz ve okunabilir tut
-
-========================================
-MANTIK DÖNÜŞÜM STRATEJİSİ
-========================================
-
-Kullanıcı girdisini dönüştürürken:
-
-1. Belirle:
-   - Başlangıç olayı
-   - Bitiş durumları
-   - Eylemler
-   - Kararlar
-   - Harici sistemler
-   - Mantıksal kümeler
-
-2. Dönüştür:
-   - Olaylar → start / end
-   - Eylemler → process
-   - Dallanma → decision
-   - Veritabanları/API'ler → system
-   - Paralel mantık → ayrı dallar
-   - Hata yolları → açık end düğümleri
-
-3. Sağla:
-   - Her yol bir uca ulaşır
-   - Yalnız düğüm yok
-   - Temiz mantıksal okunabilirlik
-
-========================================
-KULLANICI İSTEĞİ
-========================================
-
-Aşağıdaki iş akışı açıklamasını FlowMind DSL V2'ye dönüştür:
-
-{{KULLANICI_İŞ_AKIŞI_AÇIKLAMASI}}
-
-DSL'yi şimdi oluştur.
-```
-
----
diff --git a/docs/tr/playback-history.md b/docs/tr/playback-history.md
deleted file mode 100644
index bdaf215..0000000
--- a/docs/tr/playback-history.md
+++ /dev/null
@@ -1,17 +0,0 @@
-
-FlowMind, yaptığınız her değişikliği otomatik olarak izler. **Oynatma** özelliği, karar sürecinizi gözden geçirmek için zamanda geriye gitmenizi sağlar.
-
-## Geçmiş Zaman Çizelgesi
-
-Geçmiş Zaman Çizelgesini açmak için üst gezinme çubuğundaki **Saat İkonuna** tıklayın.
-
-### Sürüm Kontrol Noktaları
-Önemli bir eylem gerçekleştirdiğinizde (düğüm ekleme, renk değiştirme, otomatik düzen) her seferinde bir "anlık görüntü" kaydedilir.
-*   **Geri Al/Yeniden Yap**: Aynı sistemi kullanarak ileri geri atlar (`Cmd+Z`).
-
-## Oynatma Modu
-
-Diyagramınızın baştan sona inşa edildiğini izlemek için Geçmiş panelindeki **Oynat** düğmesine basın.
-*   **Hız Kontrolü**: Oynatma hızını ayarlayın (1x, 2x, 4x).
-*   **Kaydırma**: Sürgüyü belirli noktalara sürükleyin.
-*   **Geri Yükle**: Daha eski bir sürümü beğendiniz mi? Tuvali o duruma mükemmel biçimde geri döndürmek için "Geri Yükle"ye tıklayın.
diff --git a/docs/tr/properties-panel.md b/docs/tr/properties-panel.md
deleted file mode 100644
index 623dabe..0000000
--- a/docs/tr/properties-panel.md
+++ /dev/null
@@ -1,24 +0,0 @@
-
-Özellikler Paneli, bireysel düğümleri özelleştirmek için kontrol merkezinizdir. Bir düğüm seçtiğinizde ekranın sağ tarafında görünür.
-
-## Düğüm Özelleştirme
-
-### Etiket Düzenleme
-Herhangi bir düğümü doğrudan panelden yeniden adlandırabilirsiniz. Etiket, tuval üzerinde gerçek zamanlı olarak güncellenir.
-
-### Görsel Stil
-Diyagramlarınızı özel stillerle öne çıkarın:
-*   **Renkler**: Anlamlı renk paletinden seçim yapın (Tehlike için Kırmızı, Başarı için Yeşil vb.).
-*   **İkonlar**: Anında tanınabilir hale getirmek için herhangi bir düğüme ikon ekleyin. Tam Lucide React ikon kütüphanesini destekliyoruz.
-*   **Çizgi Stili**: `Düz` ve `Kesik` kenarlıklar arasında geçiş yapın (geçici veya gelecekteki durumları temsil etmek için harikadır).
-
-### Düzen ve Boyutlandırma
-*   **Genişlik/Yükseklik**: Piksel mükemmeliyetinde hizalama için boyutları manuel olarak ayarlayın.
-*   **Konum**: Tam X/Y koordinatlarını görüntüleyin ve düzenleyin.
-
-## Toplu Düzenleme
-
-> [!TIP]
-> Hepsini aynı anda düzenlemek için birden fazla düğümü seçebilirsiniz (`Shift + Tıklama`)!
-
-Birden fazla düğüm seçildiğinde, Özellikler Paneli değişiklikleri (renk veya ikon gibi) **tüm** seçili düğümlere uygular.
diff --git a/docs/tr/quick-start.md b/docs/tr/quick-start.md
deleted file mode 100644
index af8ff48..0000000
--- a/docs/tr/quick-start.md
+++ /dev/null
@@ -1,38 +0,0 @@
-Bu kılavuz, OpenFlowKit'te 2 dakikadan kısa sürede ilk diyagramınızı oluşturmanıza yardımcı olacaktır.
-
-## 1. Yeni Bir Akış Oluşturun
-
-Kontrol Panelinden **"Yeni Oluştur"** düğmesine tıklayın (veya \`Cmd+N\` tuşuna basın). Temiz bir tuvale yönlendirileceksiniz.
-
-## 2. Yapay Zeka Üretimini Kullanma
-
-Başlamanın en hızlı yolu bir istemle başlamaktır.
-
-1.  Ekranın alt kısmındaki komut çubuğunu bulun.
-2.  Akışınızın bir açıklamasını yazın.
-    *   *Örnek:* "E-posta doğrulama ve veritabanı kontrolleri içeren bir kullanıcı kayıt akışı oluştur."
-3.  \`Enter\` tuşuna basın.
-
-OpenFlowKit sizin için eksiksiz bir diyagram yapısı oluşturacaktır.
-
-## 3. Düğümleri Düzenleme
-
-Oluşturulduktan sonra diyagramı iyileştirebilirsiniz:
-
-*   **Taşı**: Herhangi bir düğümü yeniden konumlandırmak için tıklayın ve sürükleyin.
-*   **Metni Düzenle**: Etiketini değiştirmek için bir düğüme çift tıklayın.
-*   **Bağla**: Bir düğümü başka bir düğüme bağlamak için düğüm kenarındaki tutamaclardan (noktalar) sürükleyin.
-
-## 4. Akıllı Düzen Kullanma
-
-Diyagramınız karmaşıklaşırsa, üst araç çubuğundaki **"Otomatik Düzen"** düğmesine tıklayın. OpenFlowKit, düğümlerinizi temiz bir hiyerarşi içinde otomatik olarak düzenlemek için ELK düzen motorunu kullanır.
-
-## 5. Dışa Aktarma
-
-Akışınızdan memnun kaldığınızda:
-
-1.  Sağ üstteki **Dışa Aktar** düğmesine tıklayın.
-2.  Formatınızı seçin (PNG, SVG veya JSON).
-3.  Dosyanızı indirin.
-
-[YER TUTUCU: Oluşturma sürecini gösteren GIF]
diff --git a/docs/tr/roadmap.md b/docs/tr/roadmap.md
deleted file mode 100644
index 26c4df6..0000000
--- a/docs/tr/roadmap.md
+++ /dev/null
@@ -1,69 +0,0 @@
-# 🗺️ OpenFlowKit Ürün Yol Haritası
-
-Açık kaynaklı, beyaz etiketli diyagramlama için standartı oluşturuyoruz. Bu yol haritası **OpenFlowKit**'in geleceğine yönelik vizyonumuzu özetlemektedir.
-
-> **Not**: Bu yaşayan bir belgedir. Öncelikler topluluk geri bildirimlerine göre değişebilir.
-
----
-
-## 🚀 Ç3 2026: Yapay Zeka Genişlemesi (v1.2)
-*Odak: Diyagram oluşturmayı daha akıllı, daha hızlı ve daha çok yönlü hale getirmek.*
-
-### 🧠 Çok Modelli Yapay Zeka Desteği
-Tek bir sağlayıcıyla sınırlı kalmayın. Tüm büyük LLM'ler için "Kendi Anahtarını Getir" modelini destekleyeceğiz:
-- **Anthropic Claude 3.5 Sonnet**: Karmaşık sistem mimarisi diyagramları için optimize edilmiş.
-- **OpenAI GPT-4o**: İş mantığı akışları için hızlı, muhakeme ağırlıklı üretim.
-- **Yerel LLM'ler (Ollama)**: %100 çevrimdışı, hava boşluklu diyagram oluşturma için Llama 3 veya Mistral'ı yerel olarak çalıştırın.
-
-### ⚡ Gerçek Zamanlı "Copilot" Modu
-- **Akışlar için Otomatik Tamamlama**: Bir düğümü sürüklerken yapay zeka, mevcut grafik bağlamınıza dayanarak en mantıklı 3 sonraki adımı önerir.
-- **Akıllı Yeniden Düzenleme**: Karmaşık düğümleri seçin ve yapay zekadan "Düzeni Optimize Et" veya "Alt Gruba Grupla" isteyin.
-
----
-
-## 🤝 Ç4 2026: İş Birliği ve Ekipler (v2.0)
-*Odak: Bireysel bir geliştirici aracını ekip gücü merkezine dönüştürmek.*
-
-### 👥 Gerçek Zamanlı Çok Oyunculu
-- **Canlı İmleçler**: Takım arkadaşlarınızın nereye baktığını görün.
-- **Çakışmasız Düzenleme**: Sorunsuz iş birlikçi oturumlar için **Yjs** ve CRDT'lerle desteklenir.
-- **Varlık**: "Bu akışta kim var?" göstergeleri.
-
-### 💬 Bağlamsal Yorumlar
-- Yorumları doğrudan düğümlere veya kenarlara sabitleyin.
-- Diyagram içindeki görevlere takım üyelerini @etiketle.
-- Uygulamayı tamamladıkça konuları çözüme kavuşturun.
-
-### 💾 Bulut Kalıcılık Adaptörü
-- PostgreSQL/Supabase'e akış kaydetmek için isteğe bağlı referans uygulaması.
-- Yüzlerce diyagramı düzenlemek için "Proje" görünümü.
-
----
-
-## 🛠️ 2027: Platform Dönemi (v3.0)
-*Odak: Geliştirici ekosistemine derin entegrasyon.*
-
-### 🔌 IDE Uzantıları
-- **VS Code Uzantısı**: Premium GUI'mizle `.flow` veya `.mermaid` dosyalarını doğrudan VS Code içinde düzenleyin.
-- **IntelliJ / JetBrains Eklentisi**: Java/Kotlin ekosistemi diyagramları için yerel destek.
-
-### 🎨 Gelişmiş Tasarım Sistemi
-- **Figma Senkronizasyonu**: İki yönlü senkronizasyon. Değişiklikleri Figma'dan OpenFlowKit'e ve tersine aktarın.
-- **Özel React Düğümleri**: Geliştiricilerin bir düğüm içinde *herhangi bir* React bileşenini (Grafikler, Veri Tabloları, Videolar) oluşturmasına olanak tanıyan eklenti API'si.
-
-### 📊 Veri Odaklı Diyagramlar
-- **Canlı Metrikler**: Düğüm renklerini/boyutlarını gerçek zamanlı API verilerine bağlayın (örn. Sunucu Sağlığı görselleştirmesi).
-- **SQL'den ERD'ye**: Veritabanınıza bağlanın ve Varlık İlişki Diyagramını otomatik olarak oluşturun.
-
----
-
-## 💡 Topluluk İstek Listesi
-Kullanıcı isteklerine göre incelediğimiz özellikler:
-- [ ] **Sunum Modu**: Karmaşık akışların slayt slayt anlatımı.
-- [ ] **Erişilebilirlik (A11y)**: Ekran okuyucu desteği ve klavye navigasyonu iyileştirmeleri.
-- [ ] **Uluslararasılaştırma (i18n)**: Arayüzü 10'dan fazla dile çevirme.
-
----
-
-*Mevcut Sürüm: v1.0.0-beta*  
-*Son Güncelleme: Şubat 2026*
diff --git a/docs/tr/smart-layout.md b/docs/tr/smart-layout.md
deleted file mode 100644
index 806abeb..0000000
--- a/docs/tr/smart-layout.md
+++ /dev/null
@@ -1,20 +0,0 @@
-
-FlowMind, **ELK (Eclipse Layout Kernel)** tarafından desteklenen güçlü bir "Akıllı Düzen" motoru içerir.
-
-## Nasıl Çalışır?
-
-Karmaşık diyagramları elle çizmek sıkıcıdır. Mantığı düşünmek yerine kutucukları HIZALAMAKLA zaman harcarsınız.
-Akıllı Düzen, düğümleri otomatik olarak düzenlemek için kuvvet yönlü bir algoritma çalıştırarak bu sorunu çözer.
-
-### Kullanım
-1.  Komut Merkezindeki (veya üst araç çubuğundaki) **Düzen** düğmesine tıklayın.
-2.  Motor, her düğüm ve kenar için en uygun konumu hesaplar.
-3.  Diyagram, yeni yapısına akıcı biçimde animasyonla geçer.
-
-### Özellikler
-*   **Hiyerarşik Katmanlama**: Akış şemaları ve organizasyon ağaçları için mükemmeldir.
-*   **Çakışma Algılama**: Düğümlerin asla üst üste gelmemesini sağlar.
-*   **Kenar Yönlendirme**: Daha temiz bir okunabilirlik için çizgi kesişimlerini en aza indirir.
-
-> [!TIP]
-> Ham Mermaid metni içe aktardıktan veya yapay zeka ile büyük bir akış oluşturduktan sonra sonucu anında düzenlemek için Akıllı Düzen'i kullanın.
diff --git a/docs/tr/theming.md b/docs/tr/theming.md
deleted file mode 100644
index 9c1005e..0000000
--- a/docs/tr/theming.md
+++ /dev/null
@@ -1,21 +0,0 @@
-
-
-FlowMind'ı kişisel tercihlerinize veya marka kimliğinize göre özelleştirin.
-
-## Marka Ayarları
-
-**Ayarlar > Marka Kiti** bölümüne giderek aşağıdakileri yapılandırın:
-
-*   **Ana Renk**: Düğmeler, etkin durumlar ve odaklanmış düğümler için ana vurgu rengi.
-*   **Arka Plan**: Tuval arka plan rengi.
-*   **Yüzey**: Panellerin ve kenar çubuklarının rengi.
-*   **Logo**: Kenar çubuğundaki FlowMind simgesini değiştirmek için kendi logonuzu yükleyin.
-
-
-
-## Dışa Aktarma Ayarları
-
-Görüntüleri dışa aktarırken (PNG/SVG):
-*   **Şeffaf Arka Plan**: Diyagramı slaytların üzerine yerleştirmek istiyorsanız bu seçeneği etkinleştirin.
-*   **Ölçek**: Yüksek çözünürlüklü baskı için ölçeği artırın (ör. 2x, 3x).
-*   **Filigran Ekle**: Dışa aktarma ayarlarında marka filigranını devre dışı bırakabilirsiniz.
diff --git a/docs/tr/v1-beta-launch.md b/docs/tr/v1-beta-launch.md
deleted file mode 100644
index 0fec9c9..0000000
--- a/docs/tr/v1-beta-launch.md
+++ /dev/null
@@ -1,63 +0,0 @@
-# 🚀 OpenFlowKit V1 Beta: Kod Olarak Diyagramın Geleceği Burada
-
-**OpenFlowKit V1 Beta**'yı resmi olarak duyurmaktan son derece heyecan duyuyoruz. Basit bir akış şeması aracı olarak başlayan bu proje; premium estetik ve yerel öncelikli güvenilirlik talep eden geliştiriciler için kapsamlı, beyaz etiketli bir diyagram ekosistemine dönüştü.
-
-Bu sürüm misyonumuzda köklü bir değişimi simgeliyor: **OpenFlowKit artık sadece bir uygulama değil; bir sonraki projenizin temeli.**
-
----
-
-## 🏗️ V1 Beta'daki Yenilikler
-
-### 🎨 Marka Motoru (Gerçek Beyaz Etiketleme)
-Çoğu diyagram aracı sizi kendi ürünlerine benzer görünmeye zorlar. OpenFlowKit, **sizin** gibi görünmek için tasarlanmış ilk açık kaynaklı araçtır.
-- **Dinamik Palet Oluşturma**: Tek bir ana renk girin; motorumuz yüzey, arka plan ve vurgu renklerini içeren uyumlu bir tasarım sistemi oluşturur.
-- **Tipografi Entegrasyonu**: Yerel Google Fonts desteği, uygulamanızın tipografisini doğrudan tuval ile senkronize etmenizi sağlar.
-- **UI Fiziği**: Glassmorphism'i açıp kapatın ve markanızın estetik yoğunluğuna uygun kenarlık yarıçaplarını ayarlayın.
-
-### 📜 Eşsiz Kod Olarak Diyagram (DaC)
-Diyagramlara veri olarak bakıyoruz. İster Mermaid.js uzmanı olun ister özel DSL tercih edin, sizi destekliyoruz.
-- **Genişletilmiş Mermaid Desteği**: Akış Şemaları, Durum Diyagramları ve Alt Grafikler için tam uyum.
-- **FlowMind DSL**: Fare kullanmadan hızlı prototipleme için tasarlanmış insan tarafından okunabilir bir gösterim.
-- **Canlı Senkronizasyon**: Görsel değişiklikler ve kod değişiklikleri mükemmel biçimde senkronize kalır; her iki dünyanın da en iyisini sunar.
-
-### 💎 Figma Kalitesinde Dışa Aktarma
-Ekran görüntüsü almayı bırakın! "Figma Öncelikli" dışa aktarma stratejimiz, diyagramlarınızın tasarım dosyalarınıza ait olmasını sağlar.
-- **Vektör Mükemmeliyeti**: Çizgi hassasiyetini ve yuvarlak köşeleri koruyan temiz SVG'ler dışa aktarın.
-- **Düzenlenebilir Metin**: Etiketler yerel SVG metin blokları olarak dışa aktarılır; yani Figma'da yeniden çizmeden doğrudan yazım hatalarını düzeltebilirsiniz.
-
-### 🔑 Gizlilik Öncelikli Yapay Zeka (BYOK)
-Yapay zeka güçlüdür, ancak verileriniz gizlidir. **Kendi Anahtarını Getir** modelimiz kontrolü size verir.
-- **Gemini ile Güçlendirilmiş**: Akıllı diyagram oluşturma için kendi Gemini API anahtarınızı kullanın.
-- **Yerel Depolama**: API anahtarlarınız tarayıcınızda yerel olarak depolanır ve sunucularımıza hiçbir zaman ulaşmaz.
-
-### 🖼️ Görselden Akış Şemasına (Görsel Yapay Zeka)
-Çizin, tarayın, gönderin.
-- **Görsel Tanıma**: Beyaz tahta oturumunuzun veya peçete üzerindeki taslağınızın fotoğrafını yükleyin.
-- **Anında Dönüşüm**: Yapay zekamız görsel yapıyı analiz eder ve saniyeler içinde tam düzenlenebilir, anlamlı bir akış şemasına dönüştürür.
-
-### 📦 Kütüphane Ekosistemi
-Bağımsız düzenleyiciye ek olarak OpenFlowKit'in çekirdeğini `@openflowkit/core` olarak ayıkladık. Bu sayede geliştiriciler son teknoloji ayrıştırıcılarımızı ve tema mantığımızı kendi uygulamalarına gömebilir.
-
----
-
-## 🌟 Felsefe: Premium ve Açık
-Açık kaynaklı araçların açık kaynak "görünmesi" gerektiğine inanmıyoruz. OpenFlowKit V1 Beta, milyar dolarlık SaaS ürünlerin kalitesini açık kaynak topluluğuna %100 ücretsiz olarak MIT lisansı altında sunuyor.
-
----
-
-## 🛣️ Sırada Ne Var?
-V1 Beta yalnızca bir başlangıç. Üzerinde çalıştıklarımız:
-- **İş Birlikçi Gerçek Zamanlı Düzenleme** (Yjs/WebRTC).
-- **Tel çerçeveleme için Genişletilmiş Bileşen Kütüphaneleri**.
-- **Doğrudan Figma Eklentisi** entegrasyonu.
-
----
-
-## ❤️ Dahil Olun
-OpenFlowKit, geliştiriciler tarafından geliştiriciler için inşa edilmektedir.
-- ⭐️ **GitHub'da Yıldız Verin**: Daha fazla geliştiriciye ulaşmamıza yardım edin!
-- 💬 **Tartışmaya Katılın**: Marka kitlerini ve geri bildirimlerinizi paylaşın.
-- 🛠️ **Katkıda Bulunun**: Diyagramlamanın geleceğini inşa etmeye yardımcı olmak için `CONTRIBUTING.md`'ye göz atın.
-
-**İyi Diyagramlamalar!**  
-*OpenFlowKit Ekibi*
diff --git a/e2e/smoke.spec.ts b/e2e/smoke.spec.ts
index 8ab2ded..9eef486 100644
--- a/e2e/smoke.spec.ts
+++ b/e2e/smoke.spec.ts
@@ -14,9 +14,10 @@ test('creates a new flow and adds an extra tab', async ({ page }) => {
   await page.getByTestId('home-create-new').click();
 
   await expect(page).toHaveURL(/#\/flow\/[^?]+(?:\?.*)?$/);
-  await expect(page.getByTestId('topnav-play')).toBeVisible();
+  await expect(page.getByTestId('toolbar-add-toggle')).toBeVisible({ timeout: 15000 });
 
   const tabs = page.getByTestId('flow-tab');
+  await expect(tabs.first()).toBeVisible();
   const tabCountBefore = await tabs.count();
 
   await page.getByTestId('flow-tab-add').click();
@@ -28,7 +29,8 @@ test('creates a new flow and adds an extra tab', async ({ page }) => {
 test('saves and restores snapshot state', async ({ page }) => {
   await page.goto('/#/home');
   await page.getByTestId('home-create-new').click();
-  await expect(page.getByTestId('topnav-menu-toggle')).toBeVisible();
+  await expect(page.getByTestId('toolbar-add-toggle')).toBeVisible({ timeout: 15000 });
+  await expect(page.getByTestId('topnav-menu-toggle')).toBeVisible({ timeout: 15000 });
 
   const canvasNodes = page.locator('.react-flow__node');
 
diff --git a/e2e/workflows.spec.ts b/e2e/workflows.spec.ts
index 0cdda90..eda2b5b 100644
--- a/e2e/workflows.spec.ts
+++ b/e2e/workflows.spec.ts
@@ -15,7 +15,8 @@ async function createNewFlow(page: import('@playwright/test').Page) {
   await page.goto('/#/home');
   await page.getByTestId('home-create-new').click();
   await expect(page).toHaveURL(/#\/flow\/[^?]+(?:\?.*)?$/);
-  await expect(page.getByTestId('topnav-play')).toBeVisible();
+  await expect(page.getByTestId('toolbar-add-toggle')).toBeVisible({ timeout: 15000 });
+  await expect(page.getByTestId('flow-tab').first()).toBeVisible();
 }
 
 async function addRectangleNode(page: import('@playwright/test').Page) {
@@ -74,12 +75,12 @@ test('exports the diagram as JSON and download starts', async ({ page }) => {
   await createNewFlow(page);
   await addRectangleNode(page);
 
-  // Open export menu first, then listen for download
   await page.getByTestId('topnav-export').click();
-  await expect(page.getByTestId('export-json')).toBeVisible();
+  await page.getByTestId('export-section-code').click();
+  await expect(page.getByTestId('export-action-json-download')).toBeVisible();
 
   const downloadPromise = page.waitForEvent('download');
-  await page.getByTestId('export-json').click();
+  await page.getByTestId('export-action-json-download').click();
 
   const download = await downloadPromise;
   expect(download.suggestedFilename()).toMatch(/\.json$/);
@@ -94,10 +95,10 @@ test('exports the diagram as PNG and download starts', async ({ page }) => {
   await addRectangleNode(page);
 
   await page.getByTestId('topnav-export').click();
-  await expect(page.getByTestId('export-png')).toBeVisible();
+  await expect(page.getByTestId('export-action-png-download')).toBeVisible();
 
   const downloadPromise = page.waitForEvent('download');
-  await page.getByTestId('export-png').click();
+  await page.getByTestId('export-action-png-download').click();
 
   const download = await downloadPromise;
   expect(download.suggestedFilename()).toMatch(/\.png$/);
diff --git a/index.html b/index.html
index 70b23d9..e4cb6be 100644
--- a/index.html
+++ b/index.html
@@ -4,6 +4,7 @@
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta name="theme-color" content="#2563eb" />
   <title>OpenFlowKit — Free Open-Source Diagram Tool for Developers</title>
   <meta name="description"
     content="Create beautiful diagrams for free. Open-source tool with AI, Mermaid.js support, Figma export, and one-click auto-layout. No signup required." />
@@ -11,6 +12,7 @@
     content="free diagram tool, open source diagram maker, mermaid.js editor, flowchart tool, architecture diagrams, developer tools, react flow" />
   <link rel="canonical" href="https://openflowkit.com/" />
   <link rel="icon" type="image/svg+xml" href="/Logo_openflowkit.svg" />
+  <link rel="manifest" href="/manifest.webmanifest" />
 
   <!-- Open Graph / Facebook -->
   <meta property="og:type" content="website" />
@@ -28,14 +30,6 @@
     content="Create beautiful diagrams for free. AI-powered, Mermaid.js support, Figma export, and auto-layout. No signup required." />
   <meta property="twitter:image" content="https://openflowkit.com/og-image.png" />
 
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link
-    href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@300;400;500;600;700&family=Outfit:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400;1,600&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500&display=swap"
-    rel="stylesheet">
-
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reactflow/dist/style.min.css" crossorigin="anonymous" />
-
   <link rel="stylesheet" href="/src/index.css" />
 </head>
 
@@ -44,4 +38,4 @@
   <script type="module" src="/src/index.tsx"></script>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/package.json b/package.json
index 4b8a4ee..0002adf 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,7 @@
     "test:s4-handle-safety": "npx tsc -b --pretty false && npm run test -- --run src/components/handleInteraction.test.ts src/components/handleInteractionUsage.test.ts src/components/CustomNode.handleInteraction.test.tsx src/components/custom-nodes/ArchitectureNode.handleInteraction.test.tsx src/components/custom-nodes/ClassEntityNode.handleInteraction.test.tsx src/components/lightweight-nodes.handleInteraction.test.tsx src/components/custom-nodes/VisualNodes.handleInteraction.test.tsx src/components/container-nodes.handleInteraction.test.tsx src/components/flow-canvas/flowCanvasTypes.test.ts src/components/DesignSystem.integration.test.tsx src/components/HomePage.integration.test.tsx",
     "e2e": "playwright test",
     "e2e:headed": "playwright test --headed",
-    "e2e:ci": "playwright test --project=chromium",
+    "e2e:ci": "CI=1 playwright test --project=chromium",
     "predeploy": "npm run build",
     "deploy": "gh-pages -d dist",
     "preview": "vite preview",
diff --git a/playwright.config.ts b/playwright.config.ts
index 982df57..7e91207 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -3,10 +3,10 @@ import { defineConfig, devices } from '@playwright/test';
 export default defineConfig({
   testDir: './e2e',
   timeout: 30_000,
-  fullyParallel: true,
+  fullyParallel: false,
   forbidOnly: !!process.env.CI,
   retries: process.env.CI ? 2 : 0,
-  workers: process.env.CI ? 1 : undefined,
+  workers: process.env.CI ? 1 : 2,
   reporter: 'html',
   use: {
     baseURL: 'http://127.0.0.1:4173',
diff --git a/public/fonts/google-sans/google-sans-400-latin.woff2 b/public/fonts/google-sans/google-sans-400-latin.woff2
new file mode 100644
index 0000000..04af48e
Binary files /dev/null and b/public/fonts/google-sans/google-sans-400-latin.woff2 differ
diff --git a/public/fonts/google-sans/google-sans-500-latin.woff2 b/public/fonts/google-sans/google-sans-500-latin.woff2
new file mode 100644
index 0000000..04af48e
Binary files /dev/null and b/public/fonts/google-sans/google-sans-500-latin.woff2 differ
diff --git a/public/fonts/google-sans/google-sans-600-latin.woff2 b/public/fonts/google-sans/google-sans-600-latin.woff2
new file mode 100644
index 0000000..04af48e
Binary files /dev/null and b/public/fonts/google-sans/google-sans-600-latin.woff2 differ
diff --git a/public/fonts/google-sans/google-sans-700-latin.woff2 b/public/fonts/google-sans/google-sans-700-latin.woff2
new file mode 100644
index 0000000..04af48e
Binary files /dev/null and b/public/fonts/google-sans/google-sans-700-latin.woff2 differ
diff --git a/public/fonts/google-sans/google-sans-code-400-latin.woff2 b/public/fonts/google-sans/google-sans-code-400-latin.woff2
new file mode 100644
index 0000000..8541b5d
Binary files /dev/null and b/public/fonts/google-sans/google-sans-code-400-latin.woff2 differ
diff --git a/public/fonts/google-sans/google-sans-code-500-latin.woff2 b/public/fonts/google-sans/google-sans-code-500-latin.woff2
new file mode 100644
index 0000000..8541b5d
Binary files /dev/null and b/public/fonts/google-sans/google-sans-code-500-latin.woff2 differ
diff --git a/public/fonts/google-sans/google-sans-flex-400-700-latin.woff2 b/public/fonts/google-sans/google-sans-flex-400-700-latin.woff2
new file mode 100644
index 0000000..e1b69fe
Binary files /dev/null and b/public/fonts/google-sans/google-sans-flex-400-700-latin.woff2 differ
diff --git a/public/fonts/google-sans/google-sans-text-400-latin.woff2 b/public/fonts/google-sans/google-sans-text-400-latin.woff2
new file mode 100644
index 0000000..0bbc94a
Binary files /dev/null and b/public/fonts/google-sans/google-sans-text-400-latin.woff2 differ
diff --git a/public/fonts/google-sans/google-sans-text-500-latin.woff2 b/public/fonts/google-sans/google-sans-text-500-latin.woff2
new file mode 100644
index 0000000..2bb7525
Binary files /dev/null and b/public/fonts/google-sans/google-sans-text-500-latin.woff2 differ
diff --git a/public/fonts/google-sans/google-sans-text-700-latin.woff2 b/public/fonts/google-sans/google-sans-text-700-latin.woff2
new file mode 100644
index 0000000..3e7893b
Binary files /dev/null and b/public/fonts/google-sans/google-sans-text-700-latin.woff2 differ
diff --git a/public/fonts/inter/inter-400-700-latin.woff2 b/public/fonts/inter/inter-400-700-latin.woff2
new file mode 100644
index 0000000..91dc3e8
Binary files /dev/null and b/public/fonts/inter/inter-400-700-latin.woff2 differ
diff --git a/public/locales/de/translation.json b/public/locales/de/translation.json
index c8d748e..948f14a 100644
--- a/public/locales/de/translation.json
+++ b/public/locales/de/translation.json
@@ -19,6 +19,8 @@
     "selectAll": "Alles auswählen",
     "duplicate": "Duplizieren",
     "duplicateDrag": "Duplizieren und ziehen",
+    "multiSelect": "Mehrfachauswahl",
+    "selectionBox": "Auswahlrahmen",
     "copy": "Kopieren",
     "paste": "Einfügen",
     "zoomIn": "Vergrößern",
@@ -35,6 +37,8 @@
     "error": "Fehler",
     "success": "Erfolg",
     "help": "Hilfe",
+    "selectTool": "Auswahlwerkzeug",
+    "handTool": "Handwerkzeug",
     "getStarted": "Loslegen",
     "bringToFront": "In den Vordergrund",
     "sendToBack": "In den Hintergrund",
@@ -52,7 +56,8 @@
     "distributeHorizontally": "Horizontal verteilen",
     "distributeVertically": "Vertikal verteilen",
     "group": "Gruppe",
-    "upload": "Upload"
+    "upload": "Upload",
+    "rename": "Umbenennen"
   },
   "nav": {
     "home": "Startseite",
@@ -72,7 +77,8 @@
     "beta": "BETA",
     "versionHistory": "Versionsverlauf",
     "loadJSON": "JSON laden",
-    "playbackMode": "Wiedergabemodus"
+    "playbackMode": "Wiedergabemodus",
+    "privacyMessage": "Ihre Diagramme bleiben bei Ihnen und erreichen unsere Server nicht."
   },
   "menu": {
     "file": "Datei",
@@ -110,7 +116,31 @@
     "hintClipboard": "Copy to clipboard",
     "figmaEditable": "Figma Editable",
     "exportDiagram": "Export Diagram",
-    "exportAs": "Export As"
+    "exportAs": "Export As",
+    "exportOrShare": "Dieses Canvas exportieren oder teilen",
+    "svg": "Als SVG exportieren",
+    "hintSvgScalable": "Skalierbare Vektordatei",
+    "video": "Wiedergabevideo",
+    "hintPlaybackWebM": "Wiedergabe-Zeitleiste (WebM/MP4)",
+    "gif": "Wiedergabe-GIF",
+    "hintPlaybackGif": "Kurze Schleife für Doku/Social",
+    "share": "Live-Canvas teilen",
+    "hintShareViewer": "Einladungslink für diesen Raum",
+    "readmeEmbed": "README Embed",
+    "hintReadmeEmbed": "Copy Markdown snippet",
+    "sectionImage": "Image",
+    "sectionVideo": "Video & Animation",
+    "sectionCode": "Code & Data",
+    "shareSection": "Canvas teilen",
+    "revealVideo": "Reveal Video",
+    "hintRevealVideo": "Nodes fade in sequentially (WebM/MP4)",
+    "revealGif": "Reveal GIF",
+    "hintRevealGif": "Animated reveal for docs/social",
+    "cinematicVideo": "Cinematic Build Video",
+    "hintCinematicVideo": "Dark launch-style build",
+    "cinematicGif": "Cinematic Build GIF",
+    "hintCinematicGif": "Dark social-ready loop",
+    "actionDownload": "Download"
   },
   "import": {
     "title": "Importieren",
@@ -122,7 +152,7 @@
     "newTab": "Neuer Tab",
     "renameTab": "Tab umbenennen",
     "closeTab": "Tab schließen",
-    "addNode": "Knoten hinzufügen",
+    "addNode": "Form hinzufügen",
     "deleteNode": "Knoten löschen",
     "duplicateNode": "Knoten duplizieren"
   },
@@ -193,7 +223,25 @@
     "recentFiles": "Letzte Dateien",
     "files": "Dateien",
     "createFirstFlow": "Ersten Fluss erstellen",
-    "startFromScratch": "Von Grund auf beginnen oder ein vorhandenes Diagramm importieren."
+    "startFromScratch": "Von Grund auf beginnen oder ein vorhandenes Diagramm importieren.",
+    "currentFlow": "Aktueller Flow",
+    "autosaved": "Automatisch gespeichert",
+    "localStorageHint": "Automatisch auf diesem Gerät gespeichert. Wir laden Ihre Diagrammdaten nicht auf unsere Server hoch.",
+    "renameFlow": {
+      "title": "Flow umbenennen",
+      "description": "Aktualisieren Sie den Namen, der im Dashboard und in den Tabs angezeigt wird.",
+      "label": "Flow-Name",
+      "placeholder": "Flow-Namen eingeben",
+      "hint": "Namen sind auf dieses Browserprofil beschränkt, sofern Sie sie nicht exportieren oder anderweitig synchronisieren.",
+      "closeDialog": "Dialog zum Umbenennen des Flows schließen"
+    },
+    "deleteFlow": {
+      "title": "Flow löschen",
+      "description": "Dadurch wird der lokal automatisch gespeicherte Flow von diesem Gerät entfernt.",
+      "confirmation": "\"{{name}}\" löschen?",
+      "hint": "Dies kann nicht rückgängig gemacht werden, es sei denn, Sie haben ein exportiertes Backup oder eine weitere Kopie.",
+      "closeDialog": "Dialog zum Löschen des Flows schließen"
+    }
   },
   "settings": {
     "title": "Einstellungen",
@@ -226,7 +274,18 @@
     "description": "Beschreibung",
     "color": "Farbe",
     "icon": "Symbol",
-    "size": "Größe"
+    "size": "Größe",
+    "shape": "Form",
+    "bulkShape": "Mehrere Formen",
+    "bulkColor": "Mehrere Farben",
+    "bulkIcon": "Mehrere Symbole",
+    "labelTransform": "Text-Transformation",
+    "prefixOptional": "Präfix (optional)",
+    "suffixOptional": "Suffix (optional)",
+    "previewSummary": "Vorschau",
+    "bulkApplySummary": "{{count}} ausgewählte Elemente werden aktualisiert",
+    "selectFieldToApply": "Wählen Sie mindestens ein Feld zum Anwenden aus.",
+    "applyToSelectedNodes": "Auf ausgewählte Elemente anwenden"
   },
   "ai": {
     "generate": "Mit KI generieren",
@@ -234,7 +293,8 @@
     "model": "Modell",
     "apiKey": "API-Schlüssel",
     "placeholder": "Flussdiagramm beschreiben...",
-    "settingsSubtitle": "Configure your preferred AI provider, model, and API key below."
+    "settingsSubtitle": "Configure your preferred AI provider, model, and API key below.",
+    "generateWithFlowpilot": "Mit Flowpilot generieren"
   },
   "playback": {
     "title": "Wiedergabe",
@@ -327,9 +387,9 @@
     "description": "Das ultimative White-Label-Canvas.",
     "diagramAsCode": "Diagramm als Code",
     "diagramAsCodeDesc": "Erstklassige Unterstützung für Mermaid.js und DSL.",
-    "flowpilotAI": "Flowpilot KI",
+    "flowpilotAI": "Flowpilot",
     "aiAssistant": "KI-Assistent",
-    "flowpilotAIDesc": "Mit Ihrem Diagramm chatten.",
+    "flowpilotAIDesc": "Mit geführten KI-Bearbeitungen an Ihrem Diagramm arbeiten.",
     "addRedisCache": "Redis-Cache vor der DB hinzufügen.",
     "localPrivate": "Lokal & Privat",
     "localPrivateDesc": "Alles bleibt auf Ihrem Rechner.",
@@ -356,7 +416,7 @@
     "designDesc": "Vom Canvas kopieren und in Figma einfügen.",
     "exportShare": "Exportieren & Teilen",
     "pixelPerfectOutput": "PIXELGENAUE AUSGABE",
-    "exportShareDesc": "Als SVG, PNG oder PDF exportieren.",
+    "exportShareDesc": "Als SVG oder PNG exportieren.",
     "vectorEditable": "Vektor • In Figma bearbeitbar",
     "rasterHighRes": "Raster • Hochauflösend",
     "dataSaveRestore": "Daten • Flows speichern & wiederherstellen"
@@ -385,8 +445,7 @@
     "communityDesc": "Entwickler treffen, die auf OpenFlowKit aufbauen.",
     "roadmap": "Roadmap",
     "coreRenderer": "Core-Renderer",
-    "flowpilotAI": "Flowpilot KI",
-    "pdfExport": "PDF-Export"
+    "flowpilotAI": "Flowpilot"
   },
   "demo": {
     "livePreview": "Live-Vorschau",
@@ -459,7 +518,9 @@
       "placeholder": "Nach Bezeichnung oder ID suchen...",
       "noResults": "Keine Knoten gefunden",
       "untitled": "Unbenannter Knoten",
-      "type": "Typ"
+      "type": "Typ",
+      "showingCount": "Showing: {{count}}",
+      "totalCount": "Total on canvas: {{count}}"
     },
     "templates": {
       "title": "Vorlagen",
@@ -473,7 +534,17 @@
       "dslPlaceholder": "{appName} DSL-Code hier einfügen...",
       "applyShortcut": "⌘+Enter zum Anwenden",
       "syntaxGuide": "Syntaxleitfaden",
-      "apply": "Anwenden"
+      "apply": "Anwenden",
+      "quickFixes": "Schnelle Korrekturen",
+      "linePrefix": "Zeile {{line}}: ",
+      "hintPrefix": "Hinweis:",
+      "strictModeGuidance": {
+        "defineEndpoints": "Definieren Sie jeden Kantenendpunkt als expliziten Architekturknoten, bevor Sie Kanten verbinden.",
+        "uniqueIds": "Verwenden Sie eindeutige IDs für jeden Service-/Gruppen-/Junction-Knoten (keine doppelten Architektur-IDs).",
+        "edgeSyntax": "Verwenden Sie Architektur-Kantenpfeile `-->`, `<--` oder `<-->` sowie Seitenqualifikatoren wie `api:R --> L:db`.",
+        "nodeSyntax": "Verwenden Sie gültige Knotendeklarationen: `service id(icon)[Label]`, `group id[Label]`, `junction id[Label]`.",
+        "fallback": "Deaktivieren Sie den Architektur-Strict-Mode, um automatische Wiederherstellung zuzulassen, oder beheben Sie die Diagnosen und versuchen Sie es erneut."
+      }
     },
     "layout": {
       "title": "Layout-Studio",
@@ -495,7 +566,8 @@
       "compact": "Kompakt",
       "normal": "Normal",
       "loose": "Locker",
-      "applyLayout": "Layout anwenden"
+      "applyLayout": "Layout anwenden",
+      "layoutStyle": "Layout-Stil"
     },
     "designSystem": {
       "title": "Design-Systeme",
@@ -520,17 +592,24 @@
       "intelligentRoutingDesc": "Verbindungen beim Ziehen einrasten",
       "animatedEdges": "Animierte Kanten",
       "animatedEdgesDesc": "Fließende Partikel",
-      "strokeWidth": "Strichbreite"
+      "strokeWidth": "Strichbreite",
+      "largeGraphSafety": "Große-Graph-Schutz",
+      "largeGraphSafetyAuto": "Automatisch",
+      "largeGraphSafetyOn": "Ein",
+      "largeGraphSafetyOff": "Aus",
+      "exportModeDeterministic": "Deterministisch",
+      "exportModeLegacy": "Legacy",
+      "exportMode": "Exportmodus"
     }
   },
   "settingsModal": {
     "title": "Einstellungen",
     "general": "Allgemein",
-    "flowpilotAI": "Flowpilot KI",
+    "flowpilotAI": "Flowpilot",
     "shortcuts": "Kürzel",
     "running": "{appName} wird ausgeführt",
     "generalSettings": "Allgemeine Einstellungen",
-    "flowpilotConfigurations": "Flowpilot-Konfigurationen",
+    "flowpilotConfigurations": "Flowpilot-Konfiguration",
     "keyboardShortcuts": "Tastaturkürzel",
     "canvas": {
       "title": "Canvas",
@@ -539,7 +618,17 @@
       "snapToGrid": "Am Raster ausrichten",
       "snapToGridDesc": "Knoten beim Bewegen einrasten",
       "miniMap": "Minimap",
-      "miniMapDesc": "Minimap unten rechts"
+      "miniMapDesc": "Minimap unten rechts",
+      "architectureStrictMode": "Architektur-Strict-Mode",
+      "architectureStrictModeDesc": "Blockiert den Mermaid-Import, wenn Architekturdiagnosen Wiederherstellungs-/Validierungsprobleme enthalten",
+      "alignmentGuides": "Alignment Guides",
+      "alignmentGuidesDesc": "Show smart guide lines while dragging nodes",
+      "routingProfile": "Routing-Profil",
+      "routingProfileStandard": "Standard",
+      "routingProfileInfrastructure": "Infrastruktur",
+      "routingProfileHint": "Der Infrastrukturmodus bevorzugt orthogonale Routen für Servicediagramme.",
+      "edgeBundling": "Parallele Kanten bündeln",
+      "edgeBundlingDesc": "Parallele Verbindungen auf gemeinsamen Spuren halten"
     },
     "ai": {
       "provider": "Anbieter",
@@ -596,7 +685,21 @@
       "customEndpointTitle": "What is a custom endpoint?",
       "privacyTitle": "Privacy & Encryption",
       "customEndpointText": "Any <1>OpenAI-compatible</1> API endpoint — local or remote. Great for:",
-      "customEndpointMustSupport": "Must support <1>POST /chat/completions</1> (OpenAI format)"
+      "customEndpointMustSupport": "Must support <1>POST /chat/completions</1> (OpenAI format)",
+      "advancedEndpointOverride": "Erweiterte Basis-URL-Überschreibung",
+      "baseUrlHint": "Leer lassen, um den Standard-Endpunkt des Anbieters zu verwenden. Nutzen Sie dies für Ihre eigene Proxy-/Worker-URL.",
+      "resetEndpoint": "Auf Standard zurücksetzen",
+      "customHeadersTitle": "Benutzerdefinierte Header",
+      "customHeadersSubtitle": "Zusätzliche Header für Auth-Proxys wie Cloudflare Access senden.",
+      "addHeader": "Header hinzufügen",
+      "cloudflarePreset": "Cloudflare-Voreinstellung verwenden",
+      "customHeadersEmpty": "Keine benutzerdefinierten Header konfiguriert.",
+      "customHeadersSecurity": "Header-Werte werden lokal in Ihrem Browserprofil gespeichert.",
+      "risk": {
+        "browserFriendly": "Browser-tauglich",
+        "proxyLikely": "Proxy wahrscheinlich",
+        "mixed": "Abhängig vom Endpunkt"
+      }
     },
     "brand": {
       "title": "Marken-Kits",
@@ -643,7 +746,11 @@
       "shareFeedback": "Feedback teilen",
       "shareFeedbackDesc": "Feedback geben, Fehler melden, Funktionen anfragen"
     },
-    "settings": "Einstellungen"
+    "settings": "Einstellungen",
+    "canvasSettings": "Canvas-Einstellungen",
+    "description": "Canvas-Einstellungen und Tastaturkürzel konfigurieren.",
+    "close": "Einstellungen schließen",
+    "closeDialog": "Einstellungsdialog schließen"
   },
   "customNodes": {
     "browserContent": "Browser-Inhalt",
@@ -653,16 +760,18 @@
     "title": "Tastaturkürzel",
     "subtitle": "Meistern Sie Ihren Arbeitsablauf mit Geschwindigkeit.",
     "closeAriaLabel": "Kürzel-Modal schließen",
-    "proTip": "Profi-Tipp: Halten Sie <key>?</key> gedrückt, um das Auswahlfeld zu aktivieren."
+    "proTip": "Profi-Tipp: Halten Sie <key>Shift</key> gedrückt, um zur Auswahl hinzuzufügen oder einen Auswahlrahmen zu ziehen."
   },
   "toolbar": {
     "selectMode": "Auswahlmodus (V)",
     "panMode": "Verschiebemodus (H)",
-    "flowpilot": "Flowpilot (Cmd+K)",
+    "flowpilot": "Flowpilot",
     "templates": "Vorlagen",
     "addItem": "Element hinzufügen",
     "addToCanvas": "Zum Canvas hinzufügen",
-    "node": "Knoten",
+    "shapes": "Formen",
+    "assets": "Assets",
+    "node": "Form",
     "stickyNote": "Haftnotiz",
     "section": "Abschnitt",
     "text": "Text",
@@ -671,7 +780,8 @@
     "autoLayout": "Auto-Layout",
     "clearCanvas": "Canvas löschen",
     "undo": "Rückgängig (Ctrl+Z)",
-    "redo": "Wiederholen (Ctrl+Y)"
+    "redo": "Wiederholen (Ctrl+Y)",
+    "commandCenter": "Command Center öffnen"
   },
   "flowEditor": {
     "cannotCloseLastTab": "Der letzte Tab kann nicht geschlossen werden.",
@@ -687,25 +797,27 @@
       "description": "Ihr Canvas ist leer. Generieren Sie einen Fluss mit Flowpilot oder starten Sie von Grund auf.",
       "generateWithFlowpilot": "Mit Flowpilot generieren",
       "browseTemplates": "Vorlagen durchsuchen",
-      "addBlankNode": "Leeren Knoten hinzufügen"
-    }
+      "addBlankNode": "Leere Form hinzufügen"
+    },
+    "dslExportSkippedEdges": "{{count}} ungültige Kante(n) wurden beim DSL-Export übersprungen."
   },
   "annotationNode": {
     "placeholder": "*Doppelklicken zum Bearbeiten der Notiz*"
   },
   "connectMenu": {
-    "createNewNode": "Neuen Knoten erstellen",
-    "process": "Prozess",
-    "processDesc": "Standardaktion",
-    "decision": "Entscheidung",
-    "decisionDesc": "Verzweigungslogik",
+    "createNewNode": "Neue Form erstellen",
+    "process": "Abgerundete Form",
+    "processDesc": "Allgemeiner Block",
+    "decision": "Diamantform",
+    "decisionDesc": "Verzweigungsblock",
     "database": "Datenbank",
-    "databaseDesc": "Datenspeicherung",
+    "databaseDesc": "Zylinderform",
     "inputOutput": "Eingabe / Ausgabe",
-    "inputOutputDesc": "Datenfluss",
-    "note": "Notiz",
+    "inputOutputDesc": "Parallelogrammform",
+    "note": "Haftnotiz",
     "noteDesc": "Dokumentation",
-    "releaseToConnect": "Loslassen zum Verbinden"
+    "releaseToConnect": "Loslassen zum Verbinden",
+    "close": "Verbindungsmenü schließen"
   },
   "errorBoundary": {
     "title": "Etwas ist schiefgelaufen",
@@ -729,7 +841,12 @@
     "restoreVersion": "Version wiederherstellen",
     "deleteVersion": "Version löschen",
     "nodes": "{{count}} Knoten",
-    "edges": "{{count}} Kanten"
+    "edges": "{{count}} Kanten",
+    "close": "Versionsverlaufsleiste schließen",
+    "namedVersions": "Named Versions",
+    "noNamedSnapshots": "No named versions yet.",
+    "autosavedVersions": "Autosaved Checkpoints",
+    "noAutoSnapshots": "No autosaved checkpoints yet."
   },
   "templatesPanel": {
     "title": "Flow-Vorlagen",
@@ -738,9 +855,12 @@
   },
   "propertiesPanel": {
     "stickyNote": "Haftnotiz",
-    "nodeSettings": "Knoteneinstellungen",
+    "nodeSettings": "Formeinstellungen",
     "connection": "Verbindung"
   },
+  "flowCanvas": {
+    "strictModePasteBlocked": "Der Architektur-Strict-Mode hat das Mermaid-Einfügen blockiert. Öffnen Sie die Code-Ansicht, beheben Sie die Diagnosen und versuchen Sie es erneut."
+  },
   "flowTabs": {
     "closeTab": "Tab schließen",
     "newFlowTab": "Neuer Flow-Tab"
@@ -752,14 +872,55 @@
     "newNode": "New Node",
     "branch": "Branch",
     "processStep": "Process Step",
+    "addText": "Text eingeben",
     "group": "Group",
     "items": "items",
     "addCommentsHere": "Add your comments here.",
     "newSection": "New Section",
     "text": "Text",
-    "image": "Image"
+    "image": "Image",
+    "mindmap": "Thema"
   },
   "actions": {
     "clearCanvasConfirm": "Are you sure you want to clear the canvas?"
+  },
+  "share": {
+    "close": "Close",
+    "title": "Share Design",
+    "betaBadge": "Beta",
+    "description": "Invite collaborators to view and edit this flow with you in real-time.",
+    "roomId": "Raum-ID",
+    "link": "Freigabelink",
+    "copied": "Copied Link!",
+    "copyLink": "Copy Link",
+    "footerNote": "Your diagram stays local unless you share this room. If copy is blocked, copy the link above manually.",
+    "closeDialog": "Close share dialog",
+    "status": {
+      "cache": {
+        "syncing": " local cache syncing",
+        "ready": " local cache ready",
+        "hydrated": " restored from local cache"
+      },
+      "realtime": "Realtime peer sync",
+      "waiting": "Connecting to realtime sync",
+      "fallback": "Local-only mode"
+    },
+    "openDialog": "Share dialog",
+    "toast": {
+      "fallbackMode": "Echtzeit-Synchronisierung ist nicht verfügbar. Es wird im Nur-lokal-Modus fortgefahren.",
+      "reconnected": "Echtzeit-Zusammenarbeit wiederhergestellt.",
+      "copyFailed": "Unable to copy share link.",
+      "linkCopied": "Collaboration link copied.",
+      "copyManual": "Der Zugriff auf die Zwischenablage ist blockiert. Kopieren Sie den Link manuell aus dem Freigabedialog."
+    }
+  },
+  "connectionPanel": {
+    "architecture": "Architecture",
+    "label": "Label",
+    "messagePlaceholder": "Nachricht",
+    "route": "Route",
+    "appearance": "Darstellung",
+    "condition": "Condition",
+    "deleteConnection": "Delete Connection"
   }
-}
\ No newline at end of file
+}
diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json
index 5bdf684..e86239e 100644
--- a/public/locales/en/translation.json
+++ b/public/locales/en/translation.json
@@ -30,12 +30,19 @@
     "fitView": "Fit View",
     "nudgeNode": "Nudge Node",
     "groupSelection": "Group Selection",
+    "mindmapAddChild": "Mindmap: Add Child Topic",
+    "mindmapAddSibling": "Mindmap: Add Sibling Topic",
+    "renameSelection": "Rename Selection",
     "keyboardShortcuts": "Keyboard Shortcuts",
     "commandBar": "Command Bar",
+    "multiSelect": "Multi-select",
+    "selectionBox": "Selection Box",
     "loading": "Loading...",
     "error": "Error",
     "success": "Success",
     "help": "Help",
+    "selectTool": "Select Tool",
+    "handTool": "Hand Tool",
     "getStarted": "Get Started",
     "bringToFront": "Bring to Front",
     "sendToBack": "Send to Back",
@@ -55,7 +62,8 @@
     "group": "Group",
     "export": "Export",
     "exportDiagram": "Export Diagram",
-    "exportAs": "Export As"
+    "exportAs": "Export As",
+    "rename": "Rename"
   },
   "nav": {
     "home": "Home",
@@ -75,7 +83,8 @@
     "beta": "BETA",
     "versionHistory": "Version History",
     "loadJSON": "Load JSON",
-    "playbackMode": "Playback Mode"
+    "playbackMode": "Playback Mode",
+    "privacyMessage": "Your diagrams stay with you and do not reach our servers."
   },
   "menu": {
     "file": "File",
@@ -100,20 +109,46 @@
     "title": "Export",
     "png": "Export as PNG",
     "jpeg": "Export as JPEG",
+    "svg": "Export as SVG",
+    "video": "Playback Video",
+    "gif": "Playback GIF",
+    "revealVideo": "Reveal Video",
+    "revealGif": "Reveal GIF",
+    "cinematicVideo": "Cinematic Build Video",
+    "cinematicGif": "Cinematic Build GIF",
     "json": "Export as JSON",
     "mermaid": "Export as Mermaid",
     "plantuml": "Export as PlantUML",
     "openflowdsl": "Export as {{appName}} DSL",
     "figma": "Export to Figma",
+    "share": "Share live canvas",
     "exportDiagram": "Export Diagram",
     "exportAs": "Export As",
+    "headingFormat": "Export Format",
+    "actionCopy": "Copy to Clipboard",
+    "actionDownload": "Download",
+    "exportOrShare": "Export or share this canvas",
+    "shareSection": "Share canvas",
     "jsonLabel": "JSON File",
     "openflowdslLabel": "{{appName}} DSL",
     "figmaEditable": "Figma Editable",
     "hintTransparent4K": "Transparent (4K)",
     "hintWhiteBg4K": "White Background (4K)",
     "hintDownload": "Download",
-    "hintClipboard": "Copy to clipboard"
+    "hintClipboard": "Copy to clipboard",
+    "hintSvgScalable": "Scalable vector file",
+    "hintPlaybackWebM": "Playback timeline (WebM/MP4)",
+    "hintPlaybackGif": "Short loop for docs/social",
+    "hintRevealVideo": "Nodes fade in sequentially (WebM/MP4)",
+    "hintRevealGif": "Animated reveal for docs/social",
+    "hintCinematicVideo": "Dark launch-style build",
+    "hintCinematicGif": "Dark social-ready loop",
+    "hintShareViewer": "Invite link for this room",
+    "readmeEmbed": "README Embed",
+    "hintReadmeEmbed": "Copy Markdown snippet",
+    "sectionImage": "Image",
+    "sectionVideo": "Video & Animation",
+    "sectionCode": "Code & Data"
   },
   "import": {
     "title": "Import",
@@ -125,7 +160,7 @@
     "newTab": "New Tab",
     "renameTab": "Rename Tab",
     "closeTab": "Close Tab",
-    "addNode": "Add Node",
+    "addNode": "Add Shape",
     "deleteNode": "Delete Node",
     "duplicateNode": "Duplicate Node"
   },
@@ -133,6 +168,7 @@
     "newNode": "New Node",
     "processStep": "Process Step",
     "note": "Note",
+    "addText": "Add text",
     "addCommentsHere": "Add your comments here.",
     "newSection": "New Section",
     "text": "Text",
@@ -141,7 +177,8 @@
     "items": "items",
     "database": "Database",
     "inputOutput": "Input / Output",
-    "branch": "Branch"
+    "branch": "Branch",
+    "mindmap": "Topic"
   },
   "actions": {
     "clearCanvasConfirm": "Are you sure you want to clear the canvas?"
@@ -213,7 +250,25 @@
     "recentFiles": "Recent Files",
     "files": "files",
     "createFirstFlow": "Create your first flow",
-    "startFromScratch": "Start from scratch or import an existing diagram."
+    "startFromScratch": "Start from scratch or import an existing diagram.",
+    "autosaved": "Autosaved",
+    "currentFlow": "Current flow",
+    "localStorageHint": "Autosaved on this device. We do not upload your diagram data to our servers.",
+    "renameFlow": {
+      "title": "Rename flow",
+      "description": "Update the name shown on your dashboard and tabs.",
+      "label": "Flow name",
+      "placeholder": "Enter a flow name",
+      "hint": "Names are local to this browser profile unless you export or sync them elsewhere.",
+      "closeDialog": "Close rename flow dialog"
+    },
+    "deleteFlow": {
+      "title": "Delete flow",
+      "description": "This removes the local autosaved flow from this device.",
+      "confirmation": "Delete \"{{name}}\"?",
+      "hint": "This cannot be undone unless you have an exported backup or another copy.",
+      "closeDialog": "Close delete flow dialog"
+    }
   },
   "settings": {
     "title": "Settings",
@@ -246,10 +301,22 @@
     "description": "Description",
     "color": "Color",
     "icon": "Icon",
-    "size": "Size"
+    "size": "Size",
+    "shape": "Shape",
+    "bulkShape": "Bulk Shape",
+    "bulkColor": "Bulk Color",
+    "bulkIcon": "Bulk Icon",
+    "labelTransform": "Label Transform",
+    "prefixOptional": "Prefix (optional)",
+    "suffixOptional": "Suffix (optional)",
+    "previewSummary": "Preview summary",
+    "bulkApplySummary": "Will update {{count}} selected nodes",
+    "selectFieldToApply": "Select at least one field to apply.",
+    "applyToSelectedNodes": "Apply to selected nodes"
   },
   "ai": {
     "generate": "Generate with AI",
+    "generateWithFlowpilot": "Generate with Flowpilot",
     "provider": "AI Provider",
     "model": "Model",
     "apiKey": "API Key",
@@ -336,6 +403,75 @@
     "github": "GitHub",
     "roadmap": "Roadmap"
   },
+  "share": {
+    "title": "Share Design",
+    "betaBadge": "Beta",
+    "description": "Invite collaborators to view and edit this flow with you in real-time.",
+    "roomId": "Room ID",
+    "link": "Share link",
+    "roomLink": "Collaboration Link",
+    "copyLink": "Copy Link",
+    "copied": "Copied Link!",
+    "footerNote": "Your diagram stays local unless you share this room. If copy is blocked, copy the link above manually.",
+    "permissionsNote": "Anyone with the link can join.",
+    "permissionsNoteSecondary": "Permission controls and durable backend sync are not configured yet.",
+    "close": "Close",
+    "closeDialog": "Close share dialog",
+    "openDialog": "Share dialog",
+    "viewerCount": {
+      "one": "1 viewer in this session.",
+      "many": "{{count}} viewers in this session."
+    },
+    "toast": {
+      "linkCopied": "Collaboration link copied.",
+      "copyFailed": "Unable to copy share link.",
+      "copyManual": "Clipboard access is blocked. Copy the link manually from the share dialog.",
+      "fallbackMode": "Realtime sync is unavailable. Continuing in local-only mode.",
+      "reconnected": "Realtime collaboration restored."
+    },
+    "status": {
+      "realtime": "Realtime peer sync",
+      "waiting": "Connecting to realtime sync",
+      "fallback": "Local-only mode",
+      "cache": {
+        "syncing": " local cache syncing",
+        "ready": " local cache ready",
+        "hydrated": " restored from local cache"
+      }
+    },
+    "mode": {
+      "realtime": {
+        "title": "Realtime sync active",
+        "body": "Peers who open this link can see live updates and cursors over the current peer transport."
+      },
+      "waiting": {
+        "title": "Connecting to realtime sync",
+        "body": "This canvas is still trying to establish live peer sync. If it cannot, the session will stay local-only in this browser."
+      },
+      "fallback": {
+        "title": "Local-only collaboration",
+        "body": "Without a backend relay or supported peer transport, this session does not provide durable multi-user live sync outside the current browser runtime."
+      }
+    },
+    "cache": {
+      "syncing": {
+        "title": "Local room cache syncing",
+        "body": "This browser is still restoring any IndexedDB-cached room state before peer sync fully settles."
+      },
+      "hydrated": {
+        "title": "Recovered from local cache",
+        "body": "This room already had locally cached state in this browser, so the canvas could restore before peers reconnected."
+      },
+      "ready": {
+        "title": "Local cache ready",
+        "body": "This browser can keep a local IndexedDB copy of the room for reload and offline recovery in this device."
+      },
+      "unavailable": {
+        "title": "No local room cache",
+        "body": "This collaboration session is not using browser IndexedDB room persistence right now."
+      }
+    }
+  },
   "problem": {
     "badge": "The Problem",
     "title": "Why do diagrams",
@@ -384,7 +520,7 @@
     "designDesc": "Stop rebuilding screens. Copy from the canvas and paste into Figma as editable SVG and text layers.",
     "exportShare": "Export & Share",
     "pixelPerfectOutput": "PIXEL-PERFECT OUTPUT",
-    "exportShareDesc": "Export diagrams as SVG, PNG, or PDF. Copy to clipboard and paste into Figma with editable layers. Save as JSON to share or version control.",
+    "exportShareDesc": "Export diagrams as SVG or PNG. Copy to clipboard and paste into Figma with editable layers. Save as JSON to share or version control.",
     "vectorEditable": "Vector • Editable in Figma",
     "rasterHighRes": "Raster • High-res export",
     "dataSaveRestore": "Data • Save & restore flows"
@@ -413,8 +549,7 @@
     "communityDesc": "Join developers building on OpenFlowKit.",
     "roadmap": "Roadmap",
     "coreRenderer": "Core Renderer",
-    "flowpilotAI": "Flowpilot AI",
-    "pdfExport": "PDF Export"
+    "flowpilotAI": "Flowpilot AI"
   },
   "demo": {
     "livePreview": "Live Preview",
@@ -485,6 +620,8 @@
     "search": {
       "title": "Search Nodes",
       "placeholder": "Search by label or ID...",
+      "showingCount": "Showing: {{count}}",
+      "totalCount": "Total on canvas: {{count}}",
       "noResults": "No nodes found",
       "untitled": "Untitled Node",
       "type": "Type"
@@ -501,10 +638,28 @@
       "dslPlaceholder": "Paste {appName} DSL code here...",
       "applyShortcut": "⌘+Enter to apply",
       "syntaxGuide": "Syntax Guide",
-      "apply": "Apply"
+      "apply": "Apply",
+      "quickFixes": "Quick fixes",
+      "linePrefix": "Line {{line}}: ",
+      "hintPrefix": "Hint:",
+      "jumpToLine": "Jump to line {{line}}",
+      "diagnosticsGroup": {
+        "syntax": "Syntax issues",
+        "identity": "Identifier issues",
+        "recovery": "Recovery warnings",
+        "general": "Diagnostics"
+      },
+      "strictModeGuidance": {
+        "defineEndpoints": "Define every edge endpoint as an explicit architecture node before connecting edges.",
+        "uniqueIds": "Use unique ids for each service/group/junction node (no duplicate architecture ids).",
+        "edgeSyntax": "Use architecture edge arrows `-->`, `<--`, or `<-->` and side qualifiers like `api:R --> L:db`.",
+        "nodeSyntax": "Use valid node declarations: `service id(icon)[Label]`, `group id[Label]`, `junction id[Label]`.",
+        "fallback": "Switch off Architecture Strict Mode to allow auto-recovery, or fix diagnostics and retry."
+      }
     },
     "layout": {
       "title": "Layout Studio",
+      "layoutStyle": "Layout Style",
       "algorithm": "Algorithm",
       "layered": "Layered",
       "layeredDesc": "Hierarchical, good for flows",
@@ -548,11 +703,22 @@
       "intelligentRoutingDesc": "Auto-snap connections on drag",
       "animatedEdges": "Animated Edges",
       "animatedEdgesDesc": "Flowing particles",
-      "strokeWidth": "Stroke Width"
+      "strokeWidth": "Stroke Width",
+      "largeGraphSafety": "Large Graph Safety",
+      "largeGraphSafetyAuto": "Auto",
+      "largeGraphSafetyOn": "On",
+      "largeGraphSafetyOff": "Off",
+      "exportMode": "Export Mode",
+      "exportModeDeterministic": "Deterministic",
+      "exportModeLegacy": "Legacy"
     }
   },
   "settingsModal": {
     "title": "Settings",
+    "settings": "Settings",
+    "description": "Configure canvas preferences and keyboard shortcuts.",
+    "close": "Close settings",
+    "closeDialog": "Close settings dialog",
     "general": "General",
     "flowpilotAI": "Flowpilot AI",
     "shortcuts": "Shortcuts",
@@ -566,14 +732,27 @@
       "showGridDesc": "Display a dot grid on the canvas",
       "snapToGrid": "Snap to Grid",
       "snapToGridDesc": "Snap nodes to the grid when moving",
+      "alignmentGuides": "Alignment Guides",
+      "alignmentGuidesDesc": "Show smart guide lines while dragging nodes",
       "miniMap": "Mini Map",
-      "miniMapDesc": "Show mini-map in bottom right"
+      "miniMapDesc": "Show mini-map in bottom right",
+      "architectureStrictMode": "Architecture Strict Mode",
+      "architectureStrictModeDesc": "Block Mermaid import when architecture diagnostics include recovery/validation issues",
+      "routingProfile": "Routing Profile",
+      "routingProfileStandard": "Standard",
+      "routingProfileInfrastructure": "Infrastructure",
+      "routingProfileHint": "Infrastructure mode biases orthogonal routes for service maps.",
+      "edgeBundling": "Bundle Sibling Edges",
+      "edgeBundlingDesc": "Keep parallel connections on shared lanes"
     },
     "ai": {
       "provider": "Provider",
       "model": "Model",
       "apiKey": "API Key",
       "customBaseUrl": "Custom Base URL",
+      "advancedEndpointOverride": "Advanced Base URL Override",
+      "baseUrlHint": "Leave empty to use provider default endpoint. Use this for your own proxy/worker URL.",
+      "resetEndpoint": "Reset to default",
       "optional": "Optional",
       "testConnection": "Test Connection",
       "testing": "Testing...",
@@ -830,6 +1009,12 @@
       },
       "customEndpointText": "Any <1>OpenAI-compatible</1> API endpoint — local or remote. Great for:",
       "customEndpointMustSupport": "Must support <1>POST /chat/completions</1> (OpenAI format)",
+      "customHeadersTitle": "Custom Headers",
+      "customHeadersSubtitle": "Send extra headers for auth proxies like Cloudflare Access.",
+      "customHeadersEmpty": "No custom headers configured.",
+      "customHeadersSecurity": "Header values are stored locally in your browser profile.",
+      "addHeader": "Add Header",
+      "cloudflarePreset": "Use Cloudflare Preset",
       "customEndpoints": {
         "ollama": {
           "name": "Ollama",
@@ -848,7 +1033,12 @@
       "pasteKeyStep": "Paste it in the field above — never shared with us",
       "customEndpointTitle": "What is a custom endpoint?",
       "customModelHint": "Enter the exact model ID for your endpoint",
-      "privacyTitle": "Privacy & Encryption"
+      "privacyTitle": "Privacy & Encryption",
+      "risk": {
+        "browserFriendly": "Browser-ready",
+        "proxyLikely": "Proxy likely",
+        "mixed": "Depends on endpoint"
+      }
     },
     "brand": {
       "title": "Brand Kits",
@@ -880,6 +1070,7 @@
       "showBetaBadgeHint": "Display the BETA chip next to logo"
     },
     "shortcutsHint": "You can also press ? to view these anytime.",
+    "canvasSettings": "Canvas Settings",
     "privacy": {
       "manifesto": "Our Privacy Manifesto",
       "manifestoText": "We believe in privacy by design and user autonomy. We don't collect your email, we don't have a login system, and we don't store your data on our servers.",
@@ -904,16 +1095,18 @@
     "title": "Keyboard Shortcuts",
     "subtitle": "Master your workflow with speed.",
     "closeAriaLabel": "Close shortcuts modal",
-    "proTip": "Pro tip: Hold <key>?</key> to enable selection box while dragging."
+    "proTip": "Pro tip: Hold <key>Shift</key> to add to selection or drag a selection box."
   },
   "toolbar": {
     "selectMode": "Select Mode (V)",
     "panMode": "Pan Mode (H)",
-    "flowpilot": "Flowpilot (Cmd+K)",
+    "flowpilot": "Flowpilot",
     "templates": "Templates",
     "addItem": "Add Item",
     "addToCanvas": "Add to Canvas",
-    "node": "Node",
+    "shapes": "Shapes",
+    "assets": "Assets",
+    "node": "Shape",
     "stickyNote": "Sticky Note",
     "section": "Section",
     "text": "Text",
@@ -922,7 +1115,8 @@
     "autoLayout": "Auto Layout",
     "clearCanvas": "Clear Canvas",
     "undo": "Undo (Ctrl+Z)",
-    "redo": "Redo (Ctrl+Y)"
+    "redo": "Redo (Ctrl+Y)",
+    "commandCenter": "Open Command Center"
   },
   "flowEditor": {
     "cannotCloseLastTab": "Cannot close the last tab.",
@@ -930,33 +1124,35 @@
     "plantUMLCopied": "PlantUML diagram copied to clipboard!",
     "dslCopied": "OpenFlow DSL copied to clipboard!",
     "dslCopyFailed": "Failed to copy DSL",
+    "dslExportSkippedEdges": "{{count}} invalid edge(s) were skipped in DSL export.",
     "figmaCopied": "Diagram copied for Figma! You can now paste (Cmd+V) in Figma.",
     "figmaExportFailed": "Figma Export Failed: {{message}}",
     "applyingLayout": "Applying layout…",
     "emptyState": {
       "title": "Start Building",
-      "description": "Your canvas is empty. Generate a flow with Flowpilot, use a template, or start from scratch.",
+      "description": "Your canvas is empty. Get started and create a flow. Saved locally on this device. Save named versions regularly for backup.",
       "generateWithFlowpilot": "Generate with Flowpilot",
       "browseTemplates": "Browse Templates",
-      "addBlankNode": "Add Blank Node"
+      "addBlankNode": "Add Blank Shape"
     }
   },
   "annotationNode": {
     "placeholder": "*Double click to edit note*"
   },
   "connectMenu": {
-    "createNewNode": "Create New Node",
-    "process": "Process",
-    "processDesc": "Standard action",
-    "decision": "Decision",
-    "decisionDesc": "Branching logic",
+    "createNewNode": "Create New Shape",
+    "process": "Rounded Shape",
+    "processDesc": "General-purpose block",
+    "decision": "Diamond Shape",
+    "decisionDesc": "Branching block",
     "database": "Database",
-    "databaseDesc": "Data storage",
+    "databaseDesc": "Cylinder shape",
     "inputOutput": "Input / Output",
-    "inputOutputDesc": "Data flow",
-    "note": "Note",
+    "inputOutputDesc": "Parallelogram shape",
+    "note": "Sticky Note",
     "noteDesc": "Documentation",
-    "releaseToConnect": "Release to connect"
+    "releaseToConnect": "Release to connect",
+    "close": "Close connect menu"
   },
   "errorBoundary": {
     "title": "Something went wrong",
@@ -974,9 +1170,14 @@
   },
   "snapshotsPanel": {
     "title": "Version History",
+    "close": "Close snapshots panel",
     "saveCurrentVersion": "Save Current Version",
     "versionName": "Version Name (e.g. 'Before Refactor')",
     "noSnapshots": "No snapshots saved yet.",
+    "namedVersions": "Named Versions",
+    "noNamedSnapshots": "No named versions yet.",
+    "autosavedVersions": "Autosaved Checkpoints",
+    "noAutoSnapshots": "No autosaved checkpoints yet.",
     "restoreVersion": "Restore version",
     "deleteVersion": "Delete version",
     "nodes": "{{count}} nodes",
@@ -989,11 +1190,25 @@
   },
   "propertiesPanel": {
     "stickyNote": "Sticky Note",
-    "nodeSettings": "Node Settings",
+    "nodeSettings": "Shape Settings",
     "connection": "Connection"
   },
+  "connectionPanel": {
+    "architecture": "Architecture",
+    "condition": "Condition",
+    "label": "Label",
+    "messagePlaceholder": "Message",
+    "route": "Route",
+    "style": "Style",
+    "appearance": "Appearance",
+    "actions": "Actions",
+    "deleteConnection": "Delete Connection"
+  },
+  "flowCanvas": {
+    "strictModePasteBlocked": "Architecture strict mode blocked Mermaid paste. Open Code view, fix diagnostics, then retry."
+  },
   "flowTabs": {
     "closeTab": "Close Tab",
     "newFlowTab": "New Flow Tab"
   }
-}
\ No newline at end of file
+}
diff --git a/public/locales/es/translation.json b/public/locales/es/translation.json
index 8498201..2d2378b 100644
--- a/public/locales/es/translation.json
+++ b/public/locales/es/translation.json
@@ -19,6 +19,8 @@
     "selectAll": "Seleccionar todo",
     "duplicate": "Duplicar",
     "duplicateDrag": "Duplicar y arrastrar",
+    "multiSelect": "Selección múltiple",
+    "selectionBox": "Caja de selección",
     "copy": "Copiar",
     "paste": "Pegar",
     "zoomIn": "Acercar",
@@ -35,6 +37,8 @@
     "error": "Error",
     "success": "Éxito",
     "help": "Ayuda",
+    "selectTool": "Herramienta de selección",
+    "handTool": "Herramienta mano",
     "getStarted": "Comenzar",
     "bringToFront": "Traer al frente",
     "sendToBack": "Enviar atrás",
@@ -52,7 +56,8 @@
     "distributeHorizontally": "Distribuir horizontalmente",
     "distributeVertically": "Distribuir verticalmente",
     "group": "Grupo",
-    "upload": "Upload"
+    "upload": "Upload",
+    "rename": "Renombrar"
   },
   "nav": {
     "home": "Inicio",
@@ -72,7 +77,8 @@
     "beta": "BETA",
     "versionHistory": "Historial de versiones",
     "loadJSON": "Cargar JSON",
-    "playbackMode": "Modo reproducción"
+    "playbackMode": "Modo reproducción",
+    "privacyMessage": "Sus diagramas permanecen con usted y no llegan a nuestros servidores."
   },
   "menu": {
     "file": "Archivo",
@@ -110,7 +116,31 @@
     "hintClipboard": "Copy to clipboard",
     "figmaEditable": "Figma Editable",
     "exportDiagram": "Export Diagram",
-    "exportAs": "Export As"
+    "exportAs": "Export As",
+    "exportOrShare": "Exportar o compartir este lienzo",
+    "svg": "Exportar como SVG",
+    "hintSvgScalable": "Archivo vectorial escalable",
+    "video": "Video de reproducción",
+    "hintPlaybackWebM": "Línea de tiempo de reproducción (WebM/MP4)",
+    "gif": "GIF de reproducción",
+    "hintPlaybackGif": "Bucle corto para docs/redes",
+    "share": "Compartir lienzo en vivo",
+    "hintShareViewer": "Enlace de invitación para esta sala",
+    "readmeEmbed": "README Embed",
+    "hintReadmeEmbed": "Copy Markdown snippet",
+    "sectionImage": "Image",
+    "sectionVideo": "Video & Animation",
+    "sectionCode": "Code & Data",
+    "shareSection": "Compartir lienzo",
+    "revealVideo": "Reveal Video",
+    "hintRevealVideo": "Nodes fade in sequentially (WebM/MP4)",
+    "revealGif": "Reveal GIF",
+    "hintRevealGif": "Animated reveal for docs/social",
+    "cinematicVideo": "Cinematic Build Video",
+    "hintCinematicVideo": "Dark launch-style build",
+    "cinematicGif": "Cinematic Build GIF",
+    "hintCinematicGif": "Dark social-ready loop",
+    "actionDownload": "Download"
   },
   "import": {
     "title": "Importar",
@@ -122,7 +152,7 @@
     "newTab": "Nueva pestaña",
     "renameTab": "Renombrar pestaña",
     "closeTab": "Cerrar pestaña",
-    "addNode": "Agregar nodo",
+    "addNode": "Agregar forma",
     "deleteNode": "Eliminar nodo",
     "duplicateNode": "Duplicar nodo"
   },
@@ -193,7 +223,25 @@
     "recentFiles": "Archivos recientes",
     "files": "archivos",
     "createFirstFlow": "Crear su primer flujo",
-    "startFromScratch": "Comenzar desde cero o importar un diagrama existente."
+    "startFromScratch": "Comenzar desde cero o importar un diagrama existente.",
+    "currentFlow": "Flujo actual",
+    "autosaved": "Guardado automáticamente",
+    "localStorageHint": "Guardado automáticamente en este dispositivo. No subimos los datos de tus diagramas a nuestros servidores.",
+    "renameFlow": {
+      "title": "Renombrar flujo",
+      "description": "Actualiza el nombre que se muestra en tu panel y en las pestañas.",
+      "label": "Nombre del flujo",
+      "placeholder": "Introduce un nombre para el flujo",
+      "hint": "Los nombres son locales a este perfil del navegador, a menos que los exportes o los sincronices en otro lugar.",
+      "closeDialog": "Cerrar el diálogo de renombrar flujo"
+    },
+    "deleteFlow": {
+      "title": "Eliminar flujo",
+      "description": "Esto elimina de este dispositivo el flujo guardado automáticamente de forma local.",
+      "confirmation": "¿Eliminar \"{{name}}\"?",
+      "hint": "Esto no se puede deshacer a menos que tengas una copia exportada u otra copia.",
+      "closeDialog": "Cerrar el diálogo de eliminar flujo"
+    }
   },
   "settings": {
     "title": "Configuración",
@@ -226,7 +274,18 @@
     "description": "Descripción",
     "color": "Color",
     "icon": "Ícono",
-    "size": "Tamaño"
+    "size": "Tamaño",
+    "shape": "Forma",
+    "bulkShape": "Forma múltiple",
+    "bulkColor": "Color múltiple",
+    "bulkIcon": "Ícono múltiple",
+    "labelTransform": "Transformación de etiqueta",
+    "prefixOptional": "Prefijo (opcional)",
+    "suffixOptional": "Sufijo (opcional)",
+    "previewSummary": "Resumen previo",
+    "bulkApplySummary": "Se actualizarán {{count}} elementos seleccionados",
+    "selectFieldToApply": "Seleccione al menos un campo para aplicar.",
+    "applyToSelectedNodes": "Aplicar a los elementos seleccionados"
   },
   "ai": {
     "generate": "Generar con IA",
@@ -234,7 +293,8 @@
     "model": "Modelo",
     "apiKey": "Clave API",
     "placeholder": "Describe tu diagrama...",
-    "settingsSubtitle": "Configure your preferred AI provider, model, and API key below."
+    "settingsSubtitle": "Configure your preferred AI provider, model, and API key below.",
+    "generateWithFlowpilot": "Generar con Flowpilot"
   },
   "playback": {
     "title": "Reproducción",
@@ -327,9 +387,9 @@
     "description": "El canvas white-label definitivo.",
     "diagramAsCode": "Diagrama como código",
     "diagramAsCodeDesc": "Soporte de Mermaid.js y DSL tipado.",
-    "flowpilotAI": "Flowpilot IA",
+    "flowpilotAI": "Flowpilot",
     "aiAssistant": "Asistente IA",
-    "flowpilotAIDesc": "Chatea con tu diagrama.",
+    "flowpilotAIDesc": "Trabaja en tu diagrama con ediciones guiadas por IA.",
     "addRedisCache": "Agregar caché Redis frente a la BD.",
     "localPrivate": "Local & Privado",
     "localPrivateDesc": "Todo queda en tu máquina.",
@@ -356,7 +416,7 @@
     "designDesc": "Copiar del canvas y pegar en Figma.",
     "exportShare": "Exportar & Compartir",
     "pixelPerfectOutput": "SALIDA PIXEL PERFECT",
-    "exportShareDesc": "Exportar como SVG, PNG o PDF.",
+    "exportShareDesc": "Exportar como SVG o PNG.",
     "vectorEditable": "Vector • Editable en Figma",
     "rasterHighRes": "Raster • Alta resolución",
     "dataSaveRestore": "Datos • Guardar & restaurar"
@@ -385,8 +445,7 @@
     "communityDesc": "Únete a desarrolladores que construyen con OpenFlowKit.",
     "roadmap": "Hoja de ruta",
     "coreRenderer": "Motor principal",
-    "flowpilotAI": "Flowpilot IA",
-    "pdfExport": "Exportar PDF"
+    "flowpilotAI": "Flowpilot"
   },
   "demo": {
     "livePreview": "Vista previa en vivo",
@@ -459,7 +518,9 @@
       "placeholder": "Buscar por etiqueta o ID...",
       "noResults": "No se encontraron nodos",
       "untitled": "Nodo sin título",
-      "type": "Tipo"
+      "type": "Tipo",
+      "showingCount": "Showing: {{count}}",
+      "totalCount": "Total on canvas: {{count}}"
     },
     "templates": {
       "title": "Plantillas",
@@ -473,7 +534,17 @@
       "dslPlaceholder": "Pega código DSL aquí...",
       "applyShortcut": "⌘+Enter para aplicar",
       "syntaxGuide": "Guía de sintaxis",
-      "apply": "Aplicar"
+      "apply": "Aplicar",
+      "quickFixes": "Correcciones rápidas",
+      "linePrefix": "Línea {{line}}: ",
+      "hintPrefix": "Pista:",
+      "strictModeGuidance": {
+        "defineEndpoints": "Define cada extremo de conexión como un nodo de arquitectura explícito antes de conectar aristas.",
+        "uniqueIds": "Usa IDs únicos para cada nodo de servicio/grupo/junción (sin IDs de arquitectura duplicados).",
+        "edgeSyntax": "Usa flechas de arista de arquitectura `-->`, `<--` o `<-->` y calificadores de lado como `api:R --> L:db`.",
+        "nodeSyntax": "Usa declaraciones de nodo válidas: `service id(icon)[Label]`, `group id[Label]`, `junction id[Label]`.",
+        "fallback": "Desactiva el modo estricto de arquitectura para permitir la recuperación automática, o corrige los diagnósticos y vuelve a intentarlo."
+      }
     },
     "layout": {
       "title": "Estudio de diseño",
@@ -495,7 +566,8 @@
       "compact": "Compacto",
       "normal": "Normal",
       "loose": "Espaciado",
-      "applyLayout": "Aplicar diseño"
+      "applyLayout": "Aplicar diseño",
+      "layoutStyle": "Estilo de diseño"
     },
     "designSystem": {
       "title": "Sistemas de diseño",
@@ -520,17 +592,24 @@
       "intelligentRoutingDesc": "Conexiones auto al arrastrar",
       "animatedEdges": "Bordes animados",
       "animatedEdgesDesc": "Partículas fluidas",
-      "strokeWidth": "Ancho de trazo"
+      "strokeWidth": "Ancho de trazo",
+      "largeGraphSafety": "Protección para grafos grandes",
+      "largeGraphSafetyAuto": "Auto",
+      "largeGraphSafetyOn": "Activado",
+      "largeGraphSafetyOff": "Desactivado",
+      "exportModeDeterministic": "Determinista",
+      "exportModeLegacy": "Heredado",
+      "exportMode": "Modo de exportación"
     }
   },
   "settingsModal": {
     "title": "Configuración",
     "general": "General",
-    "flowpilotAI": "Flowpilot IA",
+    "flowpilotAI": "Flowpilot",
     "shortcuts": "Atajos",
     "running": "{appName} en ejecución",
     "generalSettings": "Configuración general",
-    "flowpilotConfigurations": "Configuraciones de Flowpilot",
+    "flowpilotConfigurations": "Configuración de Flowpilot",
     "keyboardShortcuts": "Atajos de teclado",
     "canvas": {
       "title": "Lienzo",
@@ -539,7 +618,17 @@
       "snapToGrid": "Ajustar a cuadrícula",
       "snapToGridDesc": "Alinear nodos al mover",
       "miniMap": "Mini mapa",
-      "miniMapDesc": "Mostrar mini mapa abajo a la derecha"
+      "miniMapDesc": "Mostrar mini mapa abajo a la derecha",
+      "architectureStrictMode": "Modo estricto de arquitectura",
+      "architectureStrictModeDesc": "Bloquea la importación Mermaid cuando los diagnósticos de arquitectura incluyen problemas de recuperación/validación",
+      "alignmentGuides": "Alignment Guides",
+      "alignmentGuidesDesc": "Show smart guide lines while dragging nodes",
+      "routingProfile": "Perfil de enrutamiento",
+      "routingProfileStandard": "Estándar",
+      "routingProfileInfrastructure": "Infraestructura",
+      "routingProfileHint": "El modo infraestructura favorece rutas ortogonales para mapas de servicios.",
+      "edgeBundling": "Agrupar aristas paralelas",
+      "edgeBundlingDesc": "Mantener conexiones paralelas en carriles compartidos"
     },
     "ai": {
       "provider": "Proveedor",
@@ -596,7 +685,21 @@
       "customEndpointTitle": "What is a custom endpoint?",
       "privacyTitle": "Privacy & Encryption",
       "customEndpointText": "Any <1>OpenAI-compatible</1> API endpoint — local or remote. Great for:",
-      "customEndpointMustSupport": "Must support <1>POST /chat/completions</1> (OpenAI format)"
+      "customEndpointMustSupport": "Must support <1>POST /chat/completions</1> (OpenAI format)",
+      "advancedEndpointOverride": "Anulación avanzada de URL base",
+      "baseUrlHint": "Déjalo vacío para usar el endpoint predeterminado del proveedor. Úsalo para la URL de tu propio proxy/worker.",
+      "resetEndpoint": "Restablecer al valor predeterminado",
+      "customHeadersTitle": "Encabezados personalizados",
+      "customHeadersSubtitle": "Envía encabezados extra para proxies de autenticación como Cloudflare Access.",
+      "addHeader": "Agregar encabezado",
+      "cloudflarePreset": "Usar preajuste de Cloudflare",
+      "customHeadersEmpty": "No hay encabezados personalizados configurados.",
+      "customHeadersSecurity": "Los valores de los encabezados se almacenan localmente en tu perfil del navegador.",
+      "risk": {
+        "browserFriendly": "Listo para navegador",
+        "proxyLikely": "Probablemente requiere proxy",
+        "mixed": "Depende del endpoint"
+      }
     },
     "brand": {
       "title": "Kits de marca",
@@ -643,7 +746,11 @@
       "shareFeedback": "Compartir comentarios",
       "shareFeedbackDesc": "Dar comentarios, reportar errores, pedir características"
     },
-    "settings": "Configuración"
+    "settings": "Configuración",
+    "canvasSettings": "Configuración del lienzo",
+    "description": "Configura las preferencias del lienzo y los atajos de teclado.",
+    "close": "Cerrar configuración",
+    "closeDialog": "Cerrar diálogo de configuración"
   },
   "customNodes": {
     "browserContent": "Contenido del navegador",
@@ -653,16 +760,18 @@
     "title": "Atajos de teclado",
     "subtitle": "Domine su flujo de trabajo con velocidad.",
     "closeAriaLabel": "Cerrar ventana de atajos",
-    "proTip": "Consejo pro: Mantenga <key>?</key> para activar el cuadro de selección al arrastrar."
+    "proTip": "Consejo pro: Mantenga <key>Shift</key> para agregar a la selección o dibujar un cuadro de selección."
   },
   "toolbar": {
     "selectMode": "Modo selección (V)",
     "panMode": "Modo mover (H)",
-    "flowpilot": "Flowpilot (Cmd+K)",
+    "flowpilot": "Flowpilot",
     "templates": "Plantillas",
     "addItem": "Agregar elemento",
     "addToCanvas": "Agregar al lienzo",
-    "node": "Nodo",
+    "shapes": "Formas",
+    "assets": "Recursos",
+    "node": "Forma",
     "stickyNote": "Nota adhesiva",
     "section": "Sección",
     "text": "Texto",
@@ -671,7 +780,8 @@
     "autoLayout": "Diseño automático",
     "clearCanvas": "Limpiar lienzo",
     "undo": "Deshacer (Ctrl+Z)",
-    "redo": "Rehacer (Ctrl+Y)"
+    "redo": "Rehacer (Ctrl+Y)",
+    "commandCenter": "Abrir centro de comandos"
   },
   "flowEditor": {
     "cannotCloseLastTab": "No se puede cerrar la última pestaña.",
@@ -687,25 +797,27 @@
       "description": "Su lienzo está vacío. Genere un flujo con Flowpilot o comience desde cero.",
       "generateWithFlowpilot": "Generar con Flowpilot",
       "browseTemplates": "Explorar plantillas",
-      "addBlankNode": "Agregar nodo en blanco"
-    }
+      "addBlankNode": "Agregar forma en blanco"
+    },
+    "dslExportSkippedEdges": "Se omitieron {{count}} arista(s) no válidas en la exportación DSL."
   },
   "annotationNode": {
     "placeholder": "*Doble clic para editar la nota*"
   },
   "connectMenu": {
-    "createNewNode": "Crear nuevo nodo",
-    "process": "Proceso",
-    "processDesc": "Acción estándar",
-    "decision": "Decisión",
-    "decisionDesc": "Lógica de bifurcación",
+    "createNewNode": "Crear nueva forma",
+    "process": "Forma redondeada",
+    "processDesc": "Bloque de uso general",
+    "decision": "Forma de diamante",
+    "decisionDesc": "Bloque de bifurcación",
     "database": "Base de datos",
-    "databaseDesc": "Almacenamiento de datos",
+    "databaseDesc": "Forma de cilindro",
     "inputOutput": "Entrada / Salida",
-    "inputOutputDesc": "Flujo de datos",
-    "note": "Nota",
+    "inputOutputDesc": "Forma de paralelogramo",
+    "note": "Nota adhesiva",
     "noteDesc": "Documentación",
-    "releaseToConnect": "Soltar para conectar"
+    "releaseToConnect": "Soltar para conectar",
+    "close": "Cerrar menú de conexión"
   },
   "errorBoundary": {
     "title": "Algo salió mal",
@@ -729,7 +841,12 @@
     "restoreVersion": "Restaurar versión",
     "deleteVersion": "Eliminar versión",
     "nodes": "{{count}} nodos",
-    "edges": "{{count}} conexiones"
+    "edges": "{{count}} conexiones",
+    "close": "Cerrar panel de instantáneas",
+    "namedVersions": "Named Versions",
+    "noNamedSnapshots": "No named versions yet.",
+    "autosavedVersions": "Autosaved Checkpoints",
+    "noAutoSnapshots": "No autosaved checkpoints yet."
   },
   "templatesPanel": {
     "title": "Plantillas de flujo",
@@ -738,9 +855,12 @@
   },
   "propertiesPanel": {
     "stickyNote": "Nota adhesiva",
-    "nodeSettings": "Configuración del nodo",
+    "nodeSettings": "Configuración de forma",
     "connection": "Conexión"
   },
+  "flowCanvas": {
+    "strictModePasteBlocked": "El modo estricto de arquitectura bloqueó el pegado de Mermaid. Abre la vista de código, corrige los diagnósticos y vuelve a intentarlo."
+  },
   "flowTabs": {
     "closeTab": "Cerrar pestaña",
     "newFlowTab": "Nueva pestaña de flujo"
@@ -752,14 +872,55 @@
     "newNode": "New Node",
     "branch": "Branch",
     "processStep": "Process Step",
+    "addText": "Agregar texto",
     "group": "Group",
     "items": "items",
     "addCommentsHere": "Add your comments here.",
     "newSection": "New Section",
     "text": "Text",
-    "image": "Image"
+    "image": "Image",
+    "mindmap": "Tema"
   },
   "actions": {
     "clearCanvasConfirm": "Are you sure you want to clear the canvas?"
+  },
+  "share": {
+    "close": "Close",
+    "title": "Share Design",
+    "betaBadge": "Beta",
+    "description": "Invite collaborators to view and edit this flow with you in real-time.",
+    "roomId": "ID de la sala",
+    "link": "Enlace para compartir",
+    "copied": "Copied Link!",
+    "copyLink": "Copy Link",
+    "footerNote": "Your diagram stays local unless you share this room. If copy is blocked, copy the link above manually.",
+    "closeDialog": "Close share dialog",
+    "status": {
+      "cache": {
+        "syncing": " local cache syncing",
+        "ready": " local cache ready",
+        "hydrated": " restored from local cache"
+      },
+      "realtime": "Realtime peer sync",
+      "waiting": "Connecting to realtime sync",
+      "fallback": "Local-only mode"
+    },
+    "openDialog": "Share dialog",
+    "toast": {
+      "fallbackMode": "La sincronización en tiempo real no está disponible. Se continuará en modo solo local.",
+      "reconnected": "La colaboración en tiempo real se ha restablecido.",
+      "copyFailed": "Unable to copy share link.",
+      "linkCopied": "Collaboration link copied.",
+      "copyManual": "El acceso al portapapeles está bloqueado. Copia el enlace manualmente desde el diálogo de compartir."
+    }
+  },
+  "connectionPanel": {
+    "architecture": "Architecture",
+    "label": "Label",
+    "messagePlaceholder": "Mensaje",
+    "route": "Ruta",
+    "appearance": "Apariencia",
+    "condition": "Condition",
+    "deleteConnection": "Delete Connection"
   }
-}
\ No newline at end of file
+}
diff --git a/public/locales/fr/translation.json b/public/locales/fr/translation.json
index 0894592..d80f9c2 100644
--- a/public/locales/fr/translation.json
+++ b/public/locales/fr/translation.json
@@ -19,6 +19,8 @@
     "selectAll": "Tout sélectionner",
     "duplicate": "Dupliquer",
     "duplicateDrag": "Dupliquer et glisser",
+    "multiSelect": "Sélection multiple",
+    "selectionBox": "Boîte de sélection",
     "copy": "Copier",
     "paste": "Coller",
     "zoomIn": "Zoom avant",
@@ -35,6 +37,8 @@
     "error": "Erreur",
     "success": "Succès",
     "help": "Aide",
+    "selectTool": "Outil de sélection",
+    "handTool": "Outil main",
     "getStarted": "Commencer",
     "bringToFront": "Mettre au premier plan",
     "sendToBack": "Mettre en arrière-plan",
@@ -52,7 +56,8 @@
     "distributeHorizontally": "Distribuer horizontalement",
     "distributeVertically": "Distribuer verticalement",
     "group": "Groupe",
-    "upload": "Upload"
+    "upload": "Upload",
+    "rename": "Renommer"
   },
   "nav": {
     "home": "Accueil",
@@ -72,7 +77,8 @@
     "beta": "BÊTA",
     "versionHistory": "Historique des versions",
     "loadJSON": "Charger JSON",
-    "playbackMode": "Mode lecture"
+    "playbackMode": "Mode lecture",
+    "privacyMessage": "Vos diagrammes restent avec vous et n’atteignent pas nos serveurs."
   },
   "menu": {
     "file": "Fichier",
@@ -110,7 +116,31 @@
     "hintClipboard": "Copy to clipboard",
     "figmaEditable": "Figma Editable",
     "exportDiagram": "Export Diagram",
-    "exportAs": "Export As"
+    "exportAs": "Export As",
+    "exportOrShare": "Exporter ou partager ce canevas",
+    "svg": "Exporter en SVG",
+    "hintSvgScalable": "Fichier vectoriel redimensionnable",
+    "video": "Vidéo de lecture",
+    "hintPlaybackWebM": "Chronologie de lecture (WebM/MP4)",
+    "gif": "GIF de lecture",
+    "hintPlaybackGif": "Boucle courte pour docs/réseaux sociaux",
+    "share": "Partager le canevas en direct",
+    "hintShareViewer": "Lien d’invitation pour cette salle",
+    "readmeEmbed": "README Embed",
+    "hintReadmeEmbed": "Copy Markdown snippet",
+    "sectionImage": "Image",
+    "sectionVideo": "Video & Animation",
+    "sectionCode": "Code & Data",
+    "shareSection": "Partager le canevas",
+    "revealVideo": "Reveal Video",
+    "hintRevealVideo": "Nodes fade in sequentially (WebM/MP4)",
+    "revealGif": "Reveal GIF",
+    "hintRevealGif": "Animated reveal for docs/social",
+    "cinematicVideo": "Cinematic Build Video",
+    "hintCinematicVideo": "Dark launch-style build",
+    "cinematicGif": "Cinematic Build GIF",
+    "hintCinematicGif": "Dark social-ready loop",
+    "actionDownload": "Download"
   },
   "import": {
     "title": "Importer",
@@ -122,7 +152,7 @@
     "newTab": "Nouvel onglet",
     "renameTab": "Renommer l'onglet",
     "closeTab": "Fermer l'onglet",
-    "addNode": "Ajouter un nœud",
+    "addNode": "Ajouter une forme",
     "deleteNode": "Supprimer le nœud",
     "duplicateNode": "Dupliquer le nœud"
   },
@@ -193,7 +223,25 @@
     "recentFiles": "Fichiers récents",
     "files": "fichiers",
     "createFirstFlow": "Créer votre premier flux",
-    "startFromScratch": "Commencer de zéro ou importer un diagramme existant."
+    "startFromScratch": "Commencer de zéro ou importer un diagramme existant.",
+    "currentFlow": "Flux actuel",
+    "autosaved": "Enregistré automatiquement",
+    "localStorageHint": "Enregistré automatiquement sur cet appareil. Nous n’envoyons pas les données de vos diagrammes sur nos serveurs.",
+    "renameFlow": {
+      "title": "Renommer le flux",
+      "description": "Mettez à jour le nom affiché sur votre tableau de bord et vos onglets.",
+      "label": "Nom du flux",
+      "placeholder": "Saisir un nom de flux",
+      "hint": "Les noms restent locaux à ce profil de navigateur, sauf si vous les exportez ou les synchronisez ailleurs.",
+      "closeDialog": "Fermer la boîte de dialogue de renommage du flux"
+    },
+    "deleteFlow": {
+      "title": "Supprimer le flux",
+      "description": "Cela supprime de cet appareil le flux local enregistré automatiquement.",
+      "confirmation": "Supprimer \"{{name}}\" ?",
+      "hint": "Cette action est irréversible sauf si vous avez un export de sauvegarde ou une autre copie.",
+      "closeDialog": "Fermer la boîte de dialogue de suppression du flux"
+    }
   },
   "settings": {
     "title": "Paramètres",
@@ -226,7 +274,18 @@
     "description": "Description",
     "color": "Couleur",
     "icon": "Icône",
-    "size": "Taille"
+    "size": "Taille",
+    "shape": "Forme",
+    "bulkShape": "Forme groupée",
+    "bulkColor": "Couleur groupée",
+    "bulkIcon": "Icône groupée",
+    "labelTransform": "Transformation d'étiquette",
+    "prefixOptional": "Préfixe (optionnel)",
+    "suffixOptional": "Suffixe (optionnel)",
+    "previewSummary": "Aperçu",
+    "bulkApplySummary": "{{count}} éléments sélectionnés seront mis à jour",
+    "selectFieldToApply": "Sélectionnez au moins un champ à appliquer.",
+    "applyToSelectedNodes": "Appliquer aux éléments sélectionnés"
   },
   "ai": {
     "generate": "Générer avec l'IA",
@@ -234,7 +293,8 @@
     "model": "Modèle",
     "apiKey": "Clé API",
     "placeholder": "Décrivez votre diagramme...",
-    "settingsSubtitle": "Configure your preferred AI provider, model, and API key below."
+    "settingsSubtitle": "Configure your preferred AI provider, model, and API key below.",
+    "generateWithFlowpilot": "Générer avec Flowpilot"
   },
   "playback": {
     "title": "Lecture",
@@ -327,9 +387,9 @@
     "description": "Le canvas white-label ultime.",
     "diagramAsCode": "Diagramme en code",
     "diagramAsCodeDesc": "Support de Mermaid.js et DSL typé.",
-    "flowpilotAI": "Flowpilot IA",
+    "flowpilotAI": "Flowpilot",
     "aiAssistant": "Assistant IA",
-    "flowpilotAIDesc": "Discutez avec votre diagramme.",
+    "flowpilotAIDesc": "Travaillez sur votre diagramme avec des modifications IA guidées.",
     "addRedisCache": "Ajouter un cache Redis devant la DB.",
     "localPrivate": "Local & Privé",
     "localPrivateDesc": "Tout reste sur votre machine.",
@@ -356,7 +416,7 @@
     "designDesc": "Copier depuis le canvas et coller dans Figma.",
     "exportShare": "Exporter & Partager",
     "pixelPerfectOutput": "SORTIE PIXEL PERFECT",
-    "exportShareDesc": "Exporter en SVG, PNG ou PDF.",
+    "exportShareDesc": "Exporter en SVG ou PNG.",
     "vectorEditable": "Vecteur • Éditable dans Figma",
     "rasterHighRes": "Raster • Haute résolution",
     "dataSaveRestore": "Données • Sauvegarder & restaurer"
@@ -385,8 +445,7 @@
     "communityDesc": "Rejoindre les développeurs qui construisent avec OpenFlowKit.",
     "roadmap": "Feuille de route",
     "coreRenderer": "Moteur principal",
-    "flowpilotAI": "Flowpilot IA",
-    "pdfExport": "Export PDF"
+    "flowpilotAI": "Flowpilot"
   },
   "demo": {
     "livePreview": "Aperçu en direct",
@@ -459,7 +518,9 @@
       "placeholder": "Rechercher par étiquette ou ID...",
       "noResults": "Aucun nœud trouvé",
       "untitled": "Nœud sans titre",
-      "type": "Type"
+      "type": "Type",
+      "showingCount": "Showing: {{count}}",
+      "totalCount": "Total on canvas: {{count}}"
     },
     "templates": {
       "title": "Modèles",
@@ -473,7 +534,17 @@
       "dslPlaceholder": "Collez le code DSL ici...",
       "applyShortcut": "⌘+Entrée pour appliquer",
       "syntaxGuide": "Guide de syntaxe",
-      "apply": "Appliquer"
+      "apply": "Appliquer",
+      "quickFixes": "Correctifs rapides",
+      "linePrefix": "Ligne {{line}}: ",
+      "hintPrefix": "Astuce:",
+      "strictModeGuidance": {
+        "defineEndpoints": "Définissez chaque extrémité de lien comme un nœud d’architecture explicite avant de connecter les arêtes.",
+        "uniqueIds": "Utilisez des identifiants uniques pour chaque nœud service/groupe/jonction (aucun identifiant d’architecture en double).",
+        "edgeSyntax": "Utilisez les flèches d’arête d’architecture `-->`, `<--` ou `<-->` et des qualificateurs de côté comme `api:R --> L:db`.",
+        "nodeSyntax": "Utilisez des déclarations de nœud valides : `service id(icon)[Label]`, `group id[Label]`, `junction id[Label]`.",
+        "fallback": "Désactivez le mode strict d’architecture pour autoriser la récupération automatique, ou corrigez les diagnostics puis réessayez."
+      }
     },
     "layout": {
       "title": "Studio de mise en page",
@@ -495,7 +566,8 @@
       "compact": "Compact",
       "normal": "Normal",
       "loose": "Espacé",
-      "applyLayout": "Appliquer la mise en page"
+      "applyLayout": "Appliquer la mise en page",
+      "layoutStyle": "Style de disposition"
     },
     "designSystem": {
       "title": "Systèmes de design",
@@ -520,17 +592,24 @@
       "intelligentRoutingDesc": "Connexions auto au glisser",
       "animatedEdges": "Liaisons animées",
       "animatedEdgesDesc": "Particules fluides",
-      "strokeWidth": "Épaisseur du trait"
+      "strokeWidth": "Épaisseur du trait",
+      "largeGraphSafety": "Protection grands graphes",
+      "largeGraphSafetyAuto": "Auto",
+      "largeGraphSafetyOn": "Activé",
+      "largeGraphSafetyOff": "Désactivé",
+      "exportModeDeterministic": "Déterministe",
+      "exportModeLegacy": "Hérité",
+      "exportMode": "Mode d’export"
     }
   },
   "settingsModal": {
     "title": "Paramètres",
     "general": "Général",
-    "flowpilotAI": "Flowpilot IA",
+    "flowpilotAI": "Flowpilot",
     "shortcuts": "Raccourcis",
     "running": "{appName} en cours",
     "generalSettings": "Paramètres généraux",
-    "flowpilotConfigurations": "Configurations Flowpilot",
+    "flowpilotConfigurations": "Configuration Flowpilot",
     "keyboardShortcuts": "Raccourcis clavier",
     "canvas": {
       "title": "Canevas",
@@ -539,7 +618,17 @@
       "snapToGrid": "Aligner sur la grille",
       "snapToGridDesc": "Aligner les nœuds sur la grille",
       "miniMap": "Mini carte",
-      "miniMapDesc": "Afficher la mini carte en bas à droite"
+      "miniMapDesc": "Afficher la mini carte en bas à droite",
+      "architectureStrictMode": "Mode strict d’architecture",
+      "architectureStrictModeDesc": "Bloque l’import Mermaid lorsque les diagnostics d’architecture incluent des problèmes de récupération/validation",
+      "alignmentGuides": "Alignment Guides",
+      "alignmentGuidesDesc": "Show smart guide lines while dragging nodes",
+      "routingProfile": "Profil de routage",
+      "routingProfileStandard": "Standard",
+      "routingProfileInfrastructure": "Infrastructure",
+      "routingProfileHint": "Le mode infrastructure privilégie les routes orthogonales pour les cartes de services.",
+      "edgeBundling": "Regrouper les arêtes parallèles",
+      "edgeBundlingDesc": "Conserver les connexions parallèles sur des voies partagées"
     },
     "ai": {
       "provider": "Fournisseur",
@@ -596,7 +685,21 @@
       "customEndpointTitle": "What is a custom endpoint?",
       "privacyTitle": "Privacy & Encryption",
       "customEndpointText": "Any <1>OpenAI-compatible</1> API endpoint — local or remote. Great for:",
-      "customEndpointMustSupport": "Must support <1>POST /chat/completions</1> (OpenAI format)"
+      "customEndpointMustSupport": "Must support <1>POST /chat/completions</1> (OpenAI format)",
+      "advancedEndpointOverride": "Surcharge avancée de l’URL de base",
+      "baseUrlHint": "Laissez vide pour utiliser le point de terminaison par défaut du fournisseur. Utilisez ceci pour l’URL de votre proxy/worker.",
+      "resetEndpoint": "Réinitialiser par défaut",
+      "customHeadersTitle": "En-têtes personnalisés",
+      "customHeadersSubtitle": "Envoyez des en-têtes supplémentaires pour les proxys d’authentification comme Cloudflare Access.",
+      "addHeader": "Ajouter un en-tête",
+      "cloudflarePreset": "Utiliser le préréglage Cloudflare",
+      "customHeadersEmpty": "Aucun en-tête personnalisé configuré.",
+      "customHeadersSecurity": "Les valeurs d’en-tête sont stockées localement dans votre profil de navigateur.",
+      "risk": {
+        "browserFriendly": "Compatible navigateur",
+        "proxyLikely": "Proxy probable",
+        "mixed": "Dépend du point de terminaison"
+      }
     },
     "brand": {
       "title": "Kits de marque",
@@ -643,7 +746,11 @@
       "shareFeedback": "Partager des retours",
       "shareFeedbackDesc": "Donner des retours, signaler des bugs, demander des fonctionnalités"
     },
-    "settings": "Paramètres"
+    "settings": "Paramètres",
+    "canvasSettings": "Paramètres du canevas",
+    "description": "Configurer les préférences du canevas et les raccourcis clavier.",
+    "close": "Fermer les paramètres",
+    "closeDialog": "Fermer la boîte de dialogue des paramètres"
   },
   "customNodes": {
     "browserContent": "Contenu du navigateur",
@@ -653,16 +760,18 @@
     "title": "Raccourcis clavier",
     "subtitle": "Maîtrisez votre flux de travail avec rapidité.",
     "closeAriaLabel": "Fermer la fenêtre des raccourcis",
-    "proTip": "Conseil pro: Maintenez <key>?</key> pour activer la boîte de sélection lors du glisser."
+    "proTip": "Conseil pro : maintenez <key>Shift</key> pour ajouter à la sélection ou dessiner une boîte de sélection."
   },
   "toolbar": {
     "selectMode": "Mode sélection (V)",
     "panMode": "Mode déplacement (H)",
-    "flowpilot": "Flowpilot (Cmd+K)",
+    "flowpilot": "Flowpilot",
     "templates": "Modèles",
     "addItem": "Ajouter un élément",
     "addToCanvas": "Ajouter au canevas",
-    "node": "Nœud",
+    "shapes": "Formes",
+    "assets": "Ressources",
+    "node": "Forme",
     "stickyNote": "Note adhésive",
     "section": "Section",
     "text": "Texte",
@@ -671,7 +780,8 @@
     "autoLayout": "Mise en page auto",
     "clearCanvas": "Effacer le canevas",
     "undo": "Annuler (Ctrl+Z)",
-    "redo": "Rétablir (Ctrl+Y)"
+    "redo": "Rétablir (Ctrl+Y)",
+    "commandCenter": "Ouvrir le centre de commandes"
   },
   "flowEditor": {
     "cannotCloseLastTab": "Impossible de fermer le dernier onglet.",
@@ -687,25 +797,27 @@
       "description": "Votre canevas est vide. Générez un flux avec Flowpilot ou commencez de zéro.",
       "generateWithFlowpilot": "Générer avec Flowpilot",
       "browseTemplates": "Parcourir les modèles",
-      "addBlankNode": "Ajouter un nœud vide"
-    }
+      "addBlankNode": "Ajouter une forme vide"
+    },
+    "dslExportSkippedEdges": "{{count}} arête(s) invalide(s) ont été ignorée(s) lors de l’export DSL."
   },
   "annotationNode": {
     "placeholder": "*Double-cliquez pour modifier la note*"
   },
   "connectMenu": {
-    "createNewNode": "Créer un nouveau nœud",
-    "process": "Processus",
-    "processDesc": "Action standard",
-    "decision": "Décision",
-    "decisionDesc": "Logique de branchement",
+    "createNewNode": "Créer une nouvelle forme",
+    "process": "Forme arrondie",
+    "processDesc": "Bloc polyvalent",
+    "decision": "Forme losange",
+    "decisionDesc": "Bloc de branchement",
     "database": "Base de données",
-    "databaseDesc": "Stockage de données",
+    "databaseDesc": "Forme cylindre",
     "inputOutput": "Entrée / Sortie",
-    "inputOutputDesc": "Flux de données",
-    "note": "Note",
+    "inputOutputDesc": "Forme parallélogramme",
+    "note": "Note adhésive",
     "noteDesc": "Documentation",
-    "releaseToConnect": "Relâcher pour connecter"
+    "releaseToConnect": "Relâcher pour connecter",
+    "close": "Fermer le menu de connexion"
   },
   "errorBoundary": {
     "title": "Quelque chose s'est mal passé",
@@ -729,7 +841,12 @@
     "restoreVersion": "Restaurer la version",
     "deleteVersion": "Supprimer la version",
     "nodes": "{{count}} nœuds",
-    "edges": "{{count}} connexions"
+    "edges": "{{count}} connexions",
+    "close": "Fermer le panneau des versions",
+    "namedVersions": "Named Versions",
+    "noNamedSnapshots": "No named versions yet.",
+    "autosavedVersions": "Autosaved Checkpoints",
+    "noAutoSnapshots": "No autosaved checkpoints yet."
   },
   "templatesPanel": {
     "title": "Modèles de flux",
@@ -738,9 +855,12 @@
   },
   "propertiesPanel": {
     "stickyNote": "Note adhésive",
-    "nodeSettings": "Paramètres du nœud",
+    "nodeSettings": "Paramètres de forme",
     "connection": "Connexion"
   },
+  "flowCanvas": {
+    "strictModePasteBlocked": "Le mode strict d’architecture a bloqué le collage Mermaid. Ouvrez la vue Code, corrigez les diagnostics, puis réessayez."
+  },
   "flowTabs": {
     "closeTab": "Fermer l'onglet",
     "newFlowTab": "Nouvel onglet de flux"
@@ -752,14 +872,55 @@
     "newNode": "New Node",
     "branch": "Branch",
     "processStep": "Process Step",
+    "addText": "Ajouter du texte",
     "group": "Group",
     "items": "items",
     "addCommentsHere": "Add your comments here.",
     "newSection": "New Section",
     "text": "Text",
-    "image": "Image"
+    "image": "Image",
+    "mindmap": "Sujet"
   },
   "actions": {
     "clearCanvasConfirm": "Are you sure you want to clear the canvas?"
+  },
+  "share": {
+    "close": "Close",
+    "title": "Share Design",
+    "betaBadge": "Bêta",
+    "description": "Invite collaborators to view and edit this flow with you in real-time.",
+    "roomId": "ID de salle",
+    "link": "Lien de partage",
+    "copied": "Copied Link!",
+    "copyLink": "Copy Link",
+    "footerNote": "Your diagram stays local unless you share this room. If copy is blocked, copy the link above manually.",
+    "closeDialog": "Close share dialog",
+    "status": {
+      "cache": {
+        "syncing": " local cache syncing",
+        "ready": " local cache ready",
+        "hydrated": " restored from local cache"
+      },
+      "realtime": "Realtime peer sync",
+      "waiting": "Connecting to realtime sync",
+      "fallback": "Local-only mode"
+    },
+    "openDialog": "Share dialog",
+    "toast": {
+      "fallbackMode": "La synchronisation en temps réel est indisponible. Poursuite en mode local uniquement.",
+      "reconnected": "La collaboration en temps réel a été rétablie.",
+      "copyFailed": "Unable to copy share link.",
+      "linkCopied": "Collaboration link copied.",
+      "copyManual": "L’accès au presse-papiers est bloqué. Copiez le lien manuellement depuis la boîte de dialogue de partage."
+    }
+  },
+  "connectionPanel": {
+    "architecture": "Architecture",
+    "label": "Label",
+    "messagePlaceholder": "Message",
+    "route": "Trajet",
+    "appearance": "Apparence",
+    "condition": "Condition",
+    "deleteConnection": "Delete Connection"
   }
-}
\ No newline at end of file
+}
diff --git a/public/locales/ja/translation.json b/public/locales/ja/translation.json
index 598119b..52e30a4 100644
--- a/public/locales/ja/translation.json
+++ b/public/locales/ja/translation.json
@@ -19,6 +19,8 @@
     "selectAll": "すべて選択",
     "duplicate": "複製",
     "duplicateDrag": "複製してドラッグ",
+    "multiSelect": "複数選択",
+    "selectionBox": "選択ボックス",
     "copy": "コピー",
     "paste": "貼り付け",
     "zoomIn": "ズームイン",
@@ -35,6 +37,8 @@
     "error": "エラー",
     "success": "成功",
     "help": "ヘルプ",
+    "selectTool": "選択ツール",
+    "handTool": "手のひらツール",
     "getStarted": "始める",
     "bringToFront": "最前面へ",
     "sendToBack": "最背面へ",
@@ -52,7 +56,8 @@
     "distributeHorizontally": "水平方向に分布",
     "distributeVertically": "垂直方向に分布",
     "group": "グループ",
-    "upload": "Upload"
+    "upload": "Upload",
+    "rename": "名前を変更"
   },
   "nav": {
     "home": "ホーム",
@@ -72,7 +77,8 @@
     "beta": "ベータ",
     "versionHistory": "バージョン履歴",
     "loadJSON": "JSONを読む",
-    "playbackMode": "再生モード"
+    "playbackMode": "再生モード",
+    "privacyMessage": "図はあなたの手元に残り、当社のサーバーには届きません。"
   },
   "menu": {
     "file": "ファイル",
@@ -110,7 +116,31 @@
     "hintClipboard": "Copy to clipboard",
     "figmaEditable": "Figma Editable",
     "exportDiagram": "Export Diagram",
-    "exportAs": "Export As"
+    "exportAs": "Export As",
+    "exportOrShare": "このキャンバスをエクスポートまたは共有",
+    "svg": "SVGとしてエクスポート",
+    "hintSvgScalable": "拡大縮小可能なベクターファイル",
+    "video": "再生動画",
+    "hintPlaybackWebM": "再生タイムライン (WebM/MP4)",
+    "gif": "再生GIF",
+    "hintPlaybackGif": "ドキュメントやSNS向けの短いループ",
+    "share": "ライブキャンバスを共有",
+    "hintShareViewer": "このルームへの招待リンク",
+    "readmeEmbed": "README Embed",
+    "hintReadmeEmbed": "Copy Markdown snippet",
+    "sectionImage": "Image",
+    "sectionVideo": "Video & Animation",
+    "sectionCode": "Code & Data",
+    "shareSection": "キャンバスを共有",
+    "revealVideo": "Reveal Video",
+    "hintRevealVideo": "Nodes fade in sequentially (WebM/MP4)",
+    "revealGif": "Reveal GIF",
+    "hintRevealGif": "Animated reveal for docs/social",
+    "cinematicVideo": "Cinematic Build Video",
+    "hintCinematicVideo": "Dark launch-style build",
+    "cinematicGif": "Cinematic Build GIF",
+    "hintCinematicGif": "Dark social-ready loop",
+    "actionDownload": "Download"
   },
   "import": {
     "title": "インポート",
@@ -122,7 +152,7 @@
     "newTab": "新しいタブ",
     "renameTab": "タブの名前を変更",
     "closeTab": "タブを閉じる",
-    "addNode": "ノードを追加",
+    "addNode": "図形を追加",
     "deleteNode": "ノードを削除",
     "duplicateNode": "ノードを複製"
   },
@@ -193,7 +223,25 @@
     "recentFiles": "最近のファイル",
     "files": "ファイル",
     "createFirstFlow": "最初のフローを作成",
-    "startFromScratch": "一から始めるか、既存の図をインポートします。"
+    "startFromScratch": "一から始めるか、既存の図をインポートします。",
+    "currentFlow": "現在のフロー",
+    "autosaved": "自動保存済み",
+    "localStorageHint": "このデバイスに自動保存されます。図のデータを当社のサーバーにアップロードすることはありません。",
+    "renameFlow": {
+      "title": "フロー名を変更",
+      "description": "ダッシュボードとタブに表示される名前を更新します。",
+      "label": "フロー名",
+      "placeholder": "フロー名を入力",
+      "hint": "名前は、このブラウザープロファイル内でのみ保持されます。エクスポートまたは別の場所に同期した場合を除きます。",
+      "closeDialog": "フロー名変更ダイアログを閉じる"
+    },
+    "deleteFlow": {
+      "title": "フローを削除",
+      "description": "このデバイスからローカルに自動保存されたフローを削除します。",
+      "confirmation": "「{{name}}」を削除しますか？",
+      "hint": "エクスポートしたバックアップまたは別のコピーがない限り、この操作は元に戻せません。",
+      "closeDialog": "フロー削除ダイアログを閉じる"
+    }
   },
   "settings": {
     "title": "設定",
@@ -226,7 +274,18 @@
     "description": "説明",
     "color": "色",
     "icon": "アイコン",
-    "size": "サイズ"
+    "size": "サイズ",
+    "shape": "図形",
+    "bulkShape": "複数図形",
+    "bulkColor": "一括カラー",
+    "bulkIcon": "一括アイコン",
+    "labelTransform": "ラベル変換",
+    "prefixOptional": "接頭辞（任意）",
+    "suffixOptional": "接尾辞（任意）",
+    "previewSummary": "プレビュー",
+    "bulkApplySummary": "選択中の {{count}} 項目を更新します",
+    "selectFieldToApply": "適用する項目を少なくとも 1 つ選択してください。",
+    "applyToSelectedNodes": "選択した項目に適用"
   },
   "ai": {
     "generate": "AIで生成",
@@ -234,7 +293,8 @@
     "model": "モデル",
     "apiKey": "APIキー",
     "placeholder": "フローチャートを説明してください...",
-    "settingsSubtitle": "Configure your preferred AI provider, model, and API key below."
+    "settingsSubtitle": "Configure your preferred AI provider, model, and API key below.",
+    "generateWithFlowpilot": "Flowpilotで生成"
   },
   "playback": {
     "title": "再生",
@@ -327,9 +387,9 @@
     "description": "究極のホワイトラベルキャンバス。",
     "diagramAsCode": "コードとしての図",
     "diagramAsCodeDesc": "Mermaid.jsとDSLをサポート。",
-    "flowpilotAI": "Flowpilot AI",
+    "flowpilotAI": "Flowpilot",
     "aiAssistant": "AIアシスタント",
-    "flowpilotAIDesc": "図と対話する。",
+    "flowpilotAIDesc": "ガイド付きAI編集で図を調整します。",
     "addRedisCache": "DBの前にRedisキャッシュを追加する。",
     "localPrivate": "ローカル＆プライベート",
     "localPrivateDesc": "すべてはあなたのマシンに残ります。",
@@ -356,7 +416,7 @@
     "designDesc": "キャンバスからコピーしてFigmaに貼り付けます。",
     "exportShare": "出力と共有",
     "pixelPerfectOutput": "ピクセルパーフェクトな出力",
-    "exportShareDesc": "SVG、PNGまたはPDFとして出力します。",
+    "exportShareDesc": "SVGまたはPNGとして出力します。",
     "vectorEditable": "ベクター • Figmaで編集可能",
     "rasterHighRes": "ラスター • 高解像度出力",
     "dataSaveRestore": "データ • 保存と復元"
@@ -385,8 +445,7 @@
     "communityDesc": "OpenFlowKitを活用している開発者に参加しましょう。",
     "roadmap": "ロードマップ",
     "coreRenderer": "コアレンダラー",
-    "flowpilotAI": "Flowpilot AI",
-    "pdfExport": "PDFエクスポート"
+    "flowpilotAI": "Flowpilot"
   },
   "demo": {
     "livePreview": "ライブプレビュー",
@@ -459,7 +518,9 @@
       "placeholder": "ラベルまたはIDで検索...",
       "noResults": "ノードが見つかりません",
       "untitled": "無題のノード",
-      "type": "タイプ"
+      "type": "タイプ",
+      "showingCount": "Showing: {{count}}",
+      "totalCount": "Total on canvas: {{count}}"
     },
     "templates": {
       "title": "テンプレート",
@@ -473,7 +534,17 @@
       "dslPlaceholder": "ここにDSLコードを貼り付け...",
       "applyShortcut": "⌘+Enterで適用",
       "syntaxGuide": "構文ガイド",
-      "apply": "適用"
+      "apply": "適用",
+      "quickFixes": "クイック修正",
+      "linePrefix": "{{line}}行: ",
+      "hintPrefix": "ヒント:",
+      "strictModeGuidance": {
+        "defineEndpoints": "エッジを接続する前に、すべてのエッジ終端を明示的なアーキテクチャノードとして定義してください。",
+        "uniqueIds": "各 service/group/junction ノードには一意の ID を使用してください（重複するアーキテクチャ ID は不可）。",
+        "edgeSyntax": "アーキテクチャのエッジ矢印 `-->`、`<--`、`<-->` と、`api:R --> L:db` のような側面修飾子を使用してください。",
+        "nodeSyntax": "有効なノード宣言を使用してください: `service id(icon)[Label]`、`group id[Label]`、`junction id[Label]`。",
+        "fallback": "自動回復を許可するにはアーキテクチャ厳格モードをオフにするか、診断を修正して再試行してください。"
+      }
     },
     "layout": {
       "title": "レイアウトスタジオ",
@@ -495,7 +566,8 @@
       "compact": "コンパクト",
       "normal": "標準",
       "loose": "ゆったり",
-      "applyLayout": "レイアウトを適用"
+      "applyLayout": "レイアウトを適用",
+      "layoutStyle": "レイアウトスタイル"
     },
     "designSystem": {
       "title": "デザインシステム",
@@ -520,13 +592,20 @@
       "intelligentRoutingDesc": "ドラッグ時に自動スナップ",
       "animatedEdges": "アニメーションエッジ",
       "animatedEdgesDesc": "流れるパーティクル",
-      "strokeWidth": "線の太さ"
+      "strokeWidth": "線の太さ",
+      "largeGraphSafety": "大規模グラフ保護",
+      "largeGraphSafetyAuto": "自動",
+      "largeGraphSafetyOn": "オン",
+      "largeGraphSafetyOff": "オフ",
+      "exportModeDeterministic": "決定的",
+      "exportModeLegacy": "従来方式",
+      "exportMode": "エクスポートモード"
     }
   },
   "settingsModal": {
     "title": "設定",
     "general": "一般",
-    "flowpilotAI": "Flowpilot AI",
+    "flowpilotAI": "Flowpilot",
     "shortcuts": "ショートカット",
     "running": "{appName} 実行中",
     "generalSettings": "一般設定",
@@ -539,7 +618,17 @@
       "snapToGrid": "グリッドにスナップ",
       "snapToGridDesc": "ノードを自動でスナップ",
       "miniMap": "ミニマップ",
-      "miniMapDesc": "右下にミニマップを表示"
+      "miniMapDesc": "右下にミニマップを表示",
+      "architectureStrictMode": "アーキテクチャ厳格モード",
+      "architectureStrictModeDesc": "アーキテクチャ診断に回復/検証の問題が含まれる場合、Mermaid のインポートをブロックします",
+      "alignmentGuides": "Alignment Guides",
+      "alignmentGuidesDesc": "Show smart guide lines while dragging nodes",
+      "routingProfile": "ルーティングプロファイル",
+      "routingProfileStandard": "標準",
+      "routingProfileInfrastructure": "インフラストラクチャ",
+      "routingProfileHint": "インフラストラクチャモードでは、サービスマップ向けに直交ルートを優先します。",
+      "edgeBundling": "平行エッジを束ねる",
+      "edgeBundlingDesc": "平行接続を共通レーン上に維持する"
     },
     "ai": {
       "provider": "プロバイダー",
@@ -596,7 +685,21 @@
       "customEndpointTitle": "What is a custom endpoint?",
       "privacyTitle": "Privacy & Encryption",
       "customEndpointText": "Any <1>OpenAI-compatible</1> API endpoint — local or remote. Great for:",
-      "customEndpointMustSupport": "Must support <1>POST /chat/completions</1> (OpenAI format)"
+      "customEndpointMustSupport": "Must support <1>POST /chat/completions</1> (OpenAI format)",
+      "advancedEndpointOverride": "詳細なベースURL上書き",
+      "baseUrlHint": "空欄のままにすると、プロバイダー既定のエンドポイントを使用します。独自のプロキシ/ワーカーURLに使用してください。",
+      "resetEndpoint": "既定に戻す",
+      "customHeadersTitle": "カスタムヘッダー",
+      "customHeadersSubtitle": "Cloudflare Access のような認証プロキシ向けに追加ヘッダーを送信します。",
+      "addHeader": "ヘッダーを追加",
+      "cloudflarePreset": "Cloudflareプリセットを使用",
+      "customHeadersEmpty": "カスタムヘッダーは設定されていません。",
+      "customHeadersSecurity": "ヘッダー値はブラウザープロファイル内にローカル保存されます。",
+      "risk": {
+        "browserFriendly": "ブラウザ向け",
+        "proxyLikely": "プロキシが必要な可能性",
+        "mixed": "エンドポイント次第"
+      }
     },
     "brand": {
       "title": "ブランドキット",
@@ -643,7 +746,11 @@
       "shareFeedback": "フィードバックを共有",
       "shareFeedbackDesc": "フィードバック、バグ報告、機能リクエストの送信"
     },
-    "settings": "設定"
+    "settings": "設定",
+    "canvasSettings": "キャンバス設定",
+    "description": "キャンバス設定とキーボードショートカットを構成します。",
+    "close": "設定を閉じる",
+    "closeDialog": "設定ダイアログを閉じる"
   },
   "customNodes": {
     "browserContent": "ブラウザコンテンツ",
@@ -653,16 +760,18 @@
     "title": "キーボードショートカット",
     "subtitle": "スピードでワークフローをマスターしましょう。",
     "closeAriaLabel": "ショートカットモーダルを閉じる",
-    "proTip": "プロのヒント：ドラッグ中に <key>?</key> を押し続けると選択ボックスが有効になります。"
+    "proTip": "ヒント: <key>Shift</key> を押し続けると選択に追加したり、選択ボックスを描けます。"
   },
   "toolbar": {
     "selectMode": "選択モード (V)",
     "panMode": "パンモード (H)",
-    "flowpilot": "Flowpilot (Cmd+K)",
+    "flowpilot": "Flowpilot",
     "templates": "テンプレート",
     "addItem": "アイテムを追加",
     "addToCanvas": "キャンバスに追加",
-    "node": "ノード",
+    "shapes": "図形",
+    "assets": "アセット",
+    "node": "図形",
     "stickyNote": "付箋",
     "section": "セクション",
     "text": "テキスト",
@@ -671,7 +780,8 @@
     "autoLayout": "自動レイアウト",
     "clearCanvas": "キャンバスをクリア",
     "undo": "元に戻す (Ctrl+Z)",
-    "redo": "やり直す (Ctrl+Y)"
+    "redo": "やり直す (Ctrl+Y)",
+    "commandCenter": "コマンドセンターを開く"
   },
   "flowEditor": {
     "cannotCloseLastTab": "最後のタブは閉じられません。",
@@ -687,25 +797,27 @@
       "description": "キャンバスが空です。Flowpilotでフローを生成するか、一から始めてください。",
       "generateWithFlowpilot": "Flowpilotで生成",
       "browseTemplates": "テンプレートを閲覧",
-      "addBlankNode": "空のノードを追加"
-    }
+      "addBlankNode": "空の図形を追加"
+    },
+    "dslExportSkippedEdges": "DSL エクスポートで {{count}} 件の無効なエッジをスキップしました。"
   },
   "annotationNode": {
     "placeholder": "*ダブルクリックしてメモを編集*"
   },
   "connectMenu": {
-    "createNewNode": "新しいノードを作成",
-    "process": "プロセス",
-    "processDesc": "標準アクション",
-    "decision": "決定",
-    "decisionDesc": "分岐ロジック",
+    "createNewNode": "新しい図形を作成",
+    "process": "角丸図形",
+    "processDesc": "汎用ブロック",
+    "decision": "ひし形",
+    "decisionDesc": "分岐ブロック",
     "database": "データベース",
-    "databaseDesc": "データ保存",
+    "databaseDesc": "円柱図形",
     "inputOutput": "入力 / 出力",
-    "inputOutputDesc": "データフロー",
-    "note": "メモ",
+    "inputOutputDesc": "平行四辺形",
+    "note": "付箋",
     "noteDesc": "ドキュメント",
-    "releaseToConnect": "接続するには離す"
+    "releaseToConnect": "接続するには離す",
+    "close": "接続メニューを閉じる"
   },
   "errorBoundary": {
     "title": "問題が発生しました",
@@ -729,7 +841,12 @@
     "restoreVersion": "バージョンを復元",
     "deleteVersion": "バージョンを削除",
     "nodes": "{{count}} ノード",
-    "edges": "{{count}} エッジ"
+    "edges": "{{count}} エッジ",
+    "close": "スナップショットパネルを閉じる",
+    "namedVersions": "Named Versions",
+    "noNamedSnapshots": "No named versions yet.",
+    "autosavedVersions": "Autosaved Checkpoints",
+    "noAutoSnapshots": "No autosaved checkpoints yet."
   },
   "templatesPanel": {
     "title": "フローテンプレート",
@@ -738,9 +855,12 @@
   },
   "propertiesPanel": {
     "stickyNote": "付箋",
-    "nodeSettings": "ノード設定",
+    "nodeSettings": "図形設定",
     "connection": "接続"
   },
+  "flowCanvas": {
+    "strictModePasteBlocked": "アーキテクチャ厳格モードにより Mermaid の貼り付けがブロックされました。コードビューを開き、診断を修正してから再試行してください。"
+  },
   "flowTabs": {
     "closeTab": "タブを閉じる",
     "newFlowTab": "新しいフロータブ"
@@ -752,14 +872,55 @@
     "newNode": "New Node",
     "branch": "Branch",
     "processStep": "Process Step",
+    "addText": "テキストを追加",
     "group": "Group",
     "items": "items",
     "addCommentsHere": "Add your comments here.",
     "newSection": "New Section",
     "text": "Text",
-    "image": "Image"
+    "image": "Image",
+    "mindmap": "トピック"
   },
   "actions": {
     "clearCanvasConfirm": "Are you sure you want to clear the canvas?"
+  },
+  "share": {
+    "close": "Close",
+    "title": "Share Design",
+    "betaBadge": "ベータ",
+    "description": "Invite collaborators to view and edit this flow with you in real-time.",
+    "roomId": "ルームID",
+    "link": "共有リンク",
+    "copied": "Copied Link!",
+    "copyLink": "Copy Link",
+    "footerNote": "Your diagram stays local unless you share this room. If copy is blocked, copy the link above manually.",
+    "closeDialog": "Close share dialog",
+    "status": {
+      "cache": {
+        "syncing": " local cache syncing",
+        "ready": " local cache ready",
+        "hydrated": " restored from local cache"
+      },
+      "realtime": "Realtime peer sync",
+      "waiting": "Connecting to realtime sync",
+      "fallback": "Local-only mode"
+    },
+    "openDialog": "Share dialog",
+    "toast": {
+      "fallbackMode": "リアルタイム同期は利用できません。ローカル専用モードで続行します。",
+      "reconnected": "リアルタイム共同編集が復旧しました。",
+      "copyFailed": "Unable to copy share link.",
+      "linkCopied": "Collaboration link copied.",
+      "copyManual": "クリップボードへのアクセスがブロックされています。共有ダイアログからリンクを手動でコピーしてください。"
+    }
+  },
+  "connectionPanel": {
+    "architecture": "Architecture",
+    "label": "Label",
+    "messagePlaceholder": "メッセージ",
+    "route": "ルート",
+    "appearance": "外観",
+    "condition": "Condition",
+    "deleteConnection": "Delete Connection"
   }
 }
diff --git a/public/locales/tr/translation.json b/public/locales/tr/translation.json
index 2ee8bc9..c1a0828 100644
--- a/public/locales/tr/translation.json
+++ b/public/locales/tr/translation.json
@@ -20,6 +20,8 @@
     "selectAll": "Tümünü Seç",
     "duplicate": "Çoğalt",
     "duplicateDrag": "Çoğalt ve Sürükle",
+    "multiSelect": "Çoklu seçim",
+    "selectionBox": "Seçim kutusu",
     "upload": "Yükle",
     "copy": "Kopyala",
     "paste": "Yapıştır",
@@ -38,6 +40,8 @@
     "success": "Başarılı",
     "settings": "Ayarlar",
     "help": "Yardım",
+    "selectTool": "Seçim Aracı",
+    "handTool": "El Aracı",
     "docs": "Dokümantasyon",
     "getStarted": "Hemen Başla",
     "publicBeta": "v1.0 Public Beta",
@@ -59,7 +63,8 @@
     "group": "Grupla",
     "export": "Dışa Aktar",
     "exportDiagram": "Diyagramı Dışa Aktar",
-    "exportAs": "Farklı Dışa Aktar"
+    "exportAs": "Farklı Dışa Aktar",
+    "rename": "Rename"
   },
   "nav": {
     "home": "Ana Sayfa",
@@ -79,7 +84,8 @@
     "beta": "BETA",
     "versionHistory": "Sürüm Geçmişi",
     "loadJSON": "JSON Yükle",
-    "playbackMode": "Oynatma Modu"
+    "playbackMode": "Oynatma Modu",
+    "privacyMessage": "Your diagrams stay with you and do not reach our servers."
   },
   "menu": {
     "file": "Dosya",
@@ -117,7 +123,31 @@
     "hintTransparent4K": "Şeffaf (4K)",
     "hintWhiteBg4K": "Beyaz Arka Plan (4K)",
     "hintDownload": "İndir",
-    "hintClipboard": "Panoya kopyala"
+    "hintClipboard": "Panoya kopyala",
+    "exportOrShare": "Export or share this canvas",
+    "svg": "Export as SVG",
+    "hintSvgScalable": "Scalable vector file",
+    "video": "Playback Video",
+    "hintPlaybackWebM": "Playback timeline (WebM/MP4)",
+    "gif": "Playback GIF",
+    "hintPlaybackGif": "Short loop for docs/social",
+    "share": "Share live canvas",
+    "hintShareViewer": "Invite link for this room",
+    "readmeEmbed": "README Embed",
+    "hintReadmeEmbed": "Copy Markdown snippet",
+    "sectionImage": "Image",
+    "sectionVideo": "Video & Animation",
+    "sectionCode": "Code & Data",
+    "shareSection": "Share canvas",
+    "revealVideo": "Reveal Video",
+    "hintRevealVideo": "Nodes fade in sequentially (WebM/MP4)",
+    "revealGif": "Reveal GIF",
+    "hintRevealGif": "Animated reveal for docs/social",
+    "cinematicVideo": "Cinematic Build Video",
+    "hintCinematicVideo": "Dark launch-style build",
+    "cinematicGif": "Cinematic Build GIF",
+    "hintCinematicGif": "Dark social-ready loop",
+    "actionDownload": "Download"
   },
   "import": {
     "title": "İçe Aktar",
@@ -129,7 +159,7 @@
     "newTab": "Yeni Sekme",
     "renameTab": "Sekmeyi Yeniden Adlandır",
     "closeTab": "Sekmeyi Kapat",
-    "addNode": "Düğüm Ekle",
+    "addNode": "Şekil Ekle",
     "deleteNode": "Düğümü Sil",
     "duplicateNode": "Düğümü Çoğalt"
   },
@@ -137,6 +167,7 @@
     "newNode": "Yeni Düğüm",
     "processStep": "İşlem Adımı",
     "note": "Not",
+    "addText": "Metin ekle",
     "addCommentsHere": "Yorumlarınızı buraya ekleyin.",
     "newSection": "Yeni Bölüm",
     "text": "Metin",
@@ -145,7 +176,8 @@
     "items": "öğe",
     "database": "Veritabanı",
     "inputOutput": "Giriş / Çıkış",
-    "branch": "Dal"
+    "branch": "Dal",
+    "mindmap": "Topic"
   },
   "actions": {
     "clearCanvasConfirm": "Tuvali temizlemek istediğinizden emin misiniz?"
@@ -217,7 +249,25 @@
     "recentFiles": "Son Dosyalar",
     "files": "dosyalar",
     "createFirstFlow": "İlk akışınızı oluşturun",
-    "startFromScratch": "Sıfırdan başlayın veya mevcut bir diyagramı içe aktarın."
+    "startFromScratch": "Sıfırdan başlayın veya mevcut bir diyagramı içe aktarın.",
+    "currentFlow": "Current flow",
+    "autosaved": "Autosaved",
+    "localStorageHint": "Autosaved on this device. We do not upload your diagram data to our servers.",
+    "renameFlow": {
+      "title": "Rename flow",
+      "description": "Update the name shown on your dashboard and tabs.",
+      "label": "Flow name",
+      "placeholder": "Enter a flow name",
+      "hint": "Names are local to this browser profile unless you export or sync them elsewhere.",
+      "closeDialog": "Close rename flow dialog"
+    },
+    "deleteFlow": {
+      "title": "Delete flow",
+      "description": "This removes the local autosaved flow from this device.",
+      "confirmation": "Delete \"{{name}}\"?",
+      "hint": "This cannot be undone unless you have an exported backup or another copy.",
+      "closeDialog": "Close delete flow dialog"
+    }
   },
   "settings": {
     "title": "Ayarlar",
@@ -250,7 +300,18 @@
     "description": "Açıklama",
     "color": "Renk",
     "icon": "İkon",
-    "size": "Boyut"
+    "size": "Boyut",
+    "shape": "Şekil",
+    "bulkShape": "Toplu Şekil",
+    "bulkColor": "Toplu Renk",
+    "bulkIcon": "Toplu İkon",
+    "labelTransform": "Etiket Dönüşümü",
+    "prefixOptional": "Önek (isteğe bağlı)",
+    "suffixOptional": "Sonek (isteğe bağlı)",
+    "previewSummary": "Önizleme özeti",
+    "bulkApplySummary": "Seçili {{count}} öğe güncellenecek",
+    "selectFieldToApply": "Uygulamak için en az bir alan seçin.",
+    "applyToSelectedNodes": "Seçili öğelere uygula"
   },
   "ai": {
     "generate": "Yapay Zeka ile Oluştur",
@@ -264,7 +325,8 @@
     "pasteKeyStep": "Yukarıdaki alana yapıştırın — asla bizimle paylaşılmaz",
     "customEndpointTitle": "Özel endpoint nedir?",
     "customModelHint": "Endpoint'iniz için tam model kimliğini girin",
-    "privacyTitle": "Gizlilik ve Şifreleme"
+    "privacyTitle": "Gizlilik ve Şifreleme",
+    "generateWithFlowpilot": "Generate with Flowpilot"
   },
   "playback": {
     "title": "Oynatma",
@@ -358,9 +420,9 @@
     "description": "Nihai beyaz etiketli tuval. Tamamen özelleştirilebilir düğümler, kenarlar ve temalar — React Flow ile güçlendirilmiş. Bu sizin markanız, nefes almak için sonsuz alan verilmiş.",
     "diagramAsCode": "Kod Olarak Diyagram",
     "diagramAsCodeDesc": "Mermaid.js ve tip güvenli DSL'imiz için birinci sınıf destek. Mimarinizi kodla tanımlayın, JSON olarak dışa aktarın ve motorun düzeni halletmesine izin verin.",
-    "flowpilotAI": "Flowpilot AI",
+    "flowpilotAI": "Flowpilot",
     "aiAssistant": "Yapay Zeka Asistanı",
-    "flowpilotAIDesc": "Diyagramınızla sohbet edin. \"Köşeleri daha yuvarlak yap\", \"Yük dengeleyici ekle\".",
+    "flowpilotAIDesc": "Yönlendirilmiş AI düzenlemeleriyle diyagramınız üzerinde çalışın. \"Köşeleri daha yuvarlak yap\", \"Yük dengeleyici ekle\".",
     "addRedisCache": "Veritabanının önüne Redis önbelleği ekle.",
     "localPrivate": "Yerel ve Özel",
     "localPrivateDesc": "Verilerinizi istemiyoruz. Her şey makinenizde kalır. Bulut kaydetme yok, izleme yok, sunucularımıza \"senkronizasyon\" yok. Tam özgürlüğe sahipsiniz.",
@@ -387,7 +449,7 @@
     "designDesc": "Ekranları yeniden oluşturmayı bırakın. Tuvalden kopyalayın ve düzenlenebilir SVG ve metin katmanları olarak Figma'ya yapıştırın.",
     "exportShare": "Dışa Aktar ve Paylaş",
     "pixelPerfectOutput": "PİKSEL MÜKEMMELİ ÇIKTI",
-    "exportShareDesc": "Diyagramları SVG, PNG veya PDF olarak dışa aktarın. Panoya kopyalayın ve düzenlenebilir katmanlarla Figma'ya yapıştırın. Paylaşmak veya sürüm kontrolü için JSON olarak kaydedin.",
+    "exportShareDesc": "Diyagramları SVG veya PNG olarak dışa aktarın. Panoya kopyalayın ve düzenlenebilir katmanlarla Figma'ya yapıştırın. Paylaşmak veya sürüm kontrolü için JSON olarak kaydedin.",
     "vectorEditable": "Vektör • Figma'da Düzenlenebilir",
     "rasterHighRes": "Raster • Yüksek çözünürlüklü dışa aktarma",
     "dataSaveRestore": "Veri • Akışları kaydet ve geri yükle"
@@ -416,8 +478,7 @@
     "communityDesc": "OpenFlowKit üzerinde çalışan geliştiricilere katılın.",
     "roadmap": "Yol Haritası",
     "coreRenderer": "Çekirdek Render",
-    "flowpilotAI": "Flowpilot AI",
-    "pdfExport": "PDF Dışa Aktarma"
+    "flowpilotAI": "Flowpilot"
   },
   "demo": {
     "livePreview": "Canlı Önizleme",
@@ -490,7 +551,9 @@
       "placeholder": "Etiket veya ID ile ara...",
       "noResults": "Düğüm bulunamadı",
       "untitled": "İsimsiz Düğüm",
-      "type": "Tür"
+      "type": "Tür",
+      "showingCount": "Showing: {{count}}",
+      "totalCount": "Total on canvas: {{count}}"
     },
     "templates": {
       "title": "Şablonlar",
@@ -504,7 +567,17 @@
       "dslPlaceholder": "{appName} DSL kodunu buraya yapıştırın...",
       "applyShortcut": "⌘+Enter ile uygula",
       "syntaxGuide": "Sözdizimi Kılavuzu",
-      "apply": "Uygula"
+      "apply": "Uygula",
+      "quickFixes": "Hızlı düzeltmeler",
+      "linePrefix": "Satır {{line}}: ",
+      "hintPrefix": "İpucu:",
+      "strictModeGuidance": {
+        "defineEndpoints": "Kenarları bağlamadan önce her bağlantı ucunu açık bir mimari düğümü olarak tanımlayın.",
+        "uniqueIds": "Her service/group/junction düğümü için benzersiz kimlikler kullanın (yinelenen mimari kimliği olmasın).",
+        "edgeSyntax": "`-->`, `<--` veya `<-->` mimari kenar oklarını ve `api:R --> L:db` gibi yan niteleyicileri kullanın.",
+        "nodeSyntax": "Geçerli düğüm tanımlarını kullanın: `service id(icon)[Label]`, `group id[Label]`, `junction id[Label]`.",
+        "fallback": "Otomatik toparlamaya izin vermek için Mimari Katı Modu kapatın veya tanıları düzeltip yeniden deneyin."
+      }
     },
     "layout": {
       "title": "Düzen Stüdyosu",
@@ -526,7 +599,8 @@
       "compact": "Sıkışık",
       "normal": "Normal",
       "loose": "Geniş",
-      "applyLayout": "Düzeni Uygula"
+      "applyLayout": "Düzeni Uygula",
+      "layoutStyle": "Layout Style"
     },
     "designSystem": {
       "title": "Tasarım Sistemleri",
@@ -551,17 +625,24 @@
       "intelligentRoutingDesc": "Sürüklerken bağlantıları otomatik hizala",
       "animatedEdges": "Animasyonlu Kenarlar",
       "animatedEdgesDesc": "Akan parçacıklar",
-      "strokeWidth": "Çizgi Kalınlığı"
+      "strokeWidth": "Çizgi Kalınlığı",
+      "largeGraphSafety": "Large Graph Safety",
+      "largeGraphSafetyAuto": "Auto",
+      "largeGraphSafetyOn": "On",
+      "largeGraphSafetyOff": "Off",
+      "exportModeDeterministic": "Deterministic",
+      "exportModeLegacy": "Legacy",
+      "exportMode": "Export Mode"
     }
   },
   "settingsModal": {
     "title": "Ayarlar",
     "general": "Genel",
-    "flowpilotAI": "Flowpilot AI",
+    "flowpilotAI": "Flowpilot",
     "shortcuts": "Kısayollar",
     "running": "{appName} Çalışıyor",
     "generalSettings": "Genel Ayarlar",
-    "flowpilotConfigurations": "Flowpilot Yapılandırmaları",
+    "flowpilotConfigurations": "Flowpilot Yapılandırması",
     "keyboardShortcuts": "Klavye Kısayolları",
     "canvas": {
       "title": "Tuval",
@@ -570,7 +651,17 @@
       "snapToGrid": "Izgaraya Yapış",
       "snapToGridDesc": "Düğümleri taşırken ızgaraya hizala",
       "miniMap": "Mini Harita",
-      "miniMapDesc": "Sağ altta mini harita göster"
+      "miniMapDesc": "Sağ altta mini harita göster",
+      "architectureStrictMode": "Mimari Katı Mod",
+      "architectureStrictModeDesc": "Mimari tanıları toparlama/doğrulama sorunları içerdiğinde Mermaid içe aktarmayı engeller",
+      "alignmentGuides": "Alignment Guides",
+      "alignmentGuidesDesc": "Show smart guide lines while dragging nodes",
+      "routingProfile": "Routing Profile",
+      "routingProfileStandard": "Standard",
+      "routingProfileInfrastructure": "Infrastructure",
+      "routingProfileHint": "Infrastructure mode biases orthogonal routes for service maps.",
+      "edgeBundling": "Bundle Sibling Edges",
+      "edgeBundlingDesc": "Keep parallel connections on shared lanes"
     },
     "ai": {
       "provider": "Sağlayıcı",
@@ -851,7 +942,21 @@
       "pasteKeyStep": "Yukarıdaki alana yapıştırın — asla bizimle paylaşılmaz",
       "customEndpointTitle": "Özel endpoint nedir?",
       "customModelHint": "Endpoint'iniz için tam model kimliğini girin",
-      "privacyTitle": "Gizlilik ve Şifreleme"
+      "privacyTitle": "Gizlilik ve Şifreleme",
+      "advancedEndpointOverride": "Advanced Base URL Override",
+      "baseUrlHint": "Leave empty to use provider default endpoint. Use this for your own proxy/worker URL.",
+      "resetEndpoint": "Reset to default",
+      "customHeadersTitle": "Custom Headers",
+      "customHeadersSubtitle": "Send extra headers for auth proxies like Cloudflare Access.",
+      "addHeader": "Add Header",
+      "cloudflarePreset": "Use Cloudflare Preset",
+      "customHeadersEmpty": "No custom headers configured.",
+      "customHeadersSecurity": "Header values are stored locally in your browser profile.",
+      "risk": {
+        "browserFriendly": "Browser-ready",
+        "proxyLikely": "Proxy likely",
+        "mixed": "Depends on endpoint"
+      }
     },
     "brand": {
       "title": "Marka Kitleri",
@@ -897,7 +1002,12 @@
       "helpImprove": "Geliştirmemize Yardımcı Olun",
       "shareFeedback": "Geri Bildirim Paylaş",
       "shareFeedbackDesc": "Geri bildirim verin, hataları bildirin ve özellik isteyin"
-    }
+    },
+    "settings": "Settings",
+    "canvasSettings": "Canvas Settings",
+    "description": "Configure canvas preferences and keyboard shortcuts.",
+    "close": "Close settings",
+    "closeDialog": "Close settings dialog"
   },
   "customNodes": {
     "browserContent": "Tarayıcı İçeriği",
@@ -907,16 +1017,18 @@
     "title": "Klavye Kısayolları",
     "subtitle": "İş akışınıza hızla hakim olun.",
     "closeAriaLabel": "Kısayol modalını kapat",
-    "proTip": "İpucu: Sürüklerken seçim kutusu etkinleştirmek için <key>?</key> tuşunu basılı tutun."
+    "proTip": "İpucu: Seçime eklemek veya seçim kutusu çizmek için <key>Shift</key> tuşunu basılı tutun."
   },
   "toolbar": {
     "selectMode": "Seçim Modu (V)",
     "panMode": "Kaydırma Modu (H)",
-    "flowpilot": "Flowpilot (Cmd+K)",
+    "flowpilot": "Flowpilot",
     "templates": "Şablonlar",
     "addItem": "Öğe Ekle",
     "addToCanvas": "Tuvale Ekle",
-    "node": "Düğüm",
+    "shapes": "Şekiller",
+    "assets": "Varlıklar",
+    "node": "Şekil",
     "stickyNote": "Yapışkan Not",
     "section": "Bölüm",
     "text": "Metin",
@@ -925,7 +1037,8 @@
     "autoLayout": "Otomatik Düzen",
     "clearCanvas": "Tuvali Temizle",
     "undo": "Geri Al (Ctrl+Z)",
-    "redo": "Yinele (Ctrl+Y)"
+    "redo": "Yinele (Ctrl+Y)",
+    "commandCenter": "Open Command Center"
   },
   "flowEditor": {
     "cannotCloseLastTab": "Son sekmeyi kapatamazsınız.",
@@ -941,25 +1054,27 @@
       "description": "Tuvaliniz boş. Flowpilot ile bir akış oluşturun, bir şablon kullanın veya sıfırdan başlayın.",
       "generateWithFlowpilot": "Flowpilot ile Oluştur",
       "browseTemplates": "Şablonlara Gözat",
-      "addBlankNode": "Boş Düğüm Ekle"
-    }
+      "addBlankNode": "Boş Şekil Ekle"
+    },
+    "dslExportSkippedEdges": "{{count}} invalid edge(s) were skipped in DSL export."
   },
   "annotationNode": {
     "placeholder": "*Düzenlemek için çift tıklayın*"
   },
   "connectMenu": {
-    "createNewNode": "Yeni Düğüm Oluştur",
-    "process": "İşlem",
-    "processDesc": "Standart eylem",
-    "decision": "Karar",
-    "decisionDesc": "Dallanma mantığı",
+    "createNewNode": "Yeni Şekil Oluştur",
+    "process": "Yuvarlatılmış Şekil",
+    "processDesc": "Genel amaçlı blok",
+    "decision": "Elmas Şekil",
+    "decisionDesc": "Dallanma bloğu",
     "database": "Veritabanı",
-    "databaseDesc": "Veri depolama",
+    "databaseDesc": "Silindir şekli",
     "inputOutput": "Giriş / Çıkış",
-    "inputOutputDesc": "Veri akışı",
-    "note": "Not",
+    "inputOutputDesc": "Paralelkenar şekli",
+    "note": "Yapışkan Not",
     "noteDesc": "Dokümantasyon",
-    "releaseToConnect": "Bağlamak için bırak"
+    "releaseToConnect": "Bağlamak için bırak",
+    "close": "Close connect menu"
   },
   "errorBoundary": {
     "title": "Bir şeyler yanlış gitti",
@@ -983,7 +1098,12 @@
     "restoreVersion": "Sürümü geri yükle",
     "deleteVersion": "Sürümü sil",
     "nodes": "{{count}} düğüm",
-    "edges": "{{count}} bağlantı"
+    "edges": "{{count}} bağlantı",
+    "close": "Close snapshots panel",
+    "namedVersions": "Named Versions",
+    "noNamedSnapshots": "No named versions yet.",
+    "autosavedVersions": "Autosaved Checkpoints",
+    "noAutoSnapshots": "No autosaved checkpoints yet."
   },
   "templatesPanel": {
     "title": "Akış Şablonları",
@@ -992,11 +1112,53 @@
   },
   "propertiesPanel": {
     "stickyNote": "Yapışkan Not",
-    "nodeSettings": "Düğüm Ayarları",
+    "nodeSettings": "Şekil Ayarları",
     "connection": "Bağlantı"
   },
+  "flowCanvas": {
+    "strictModePasteBlocked": "Mimari Katı Mod, Mermaid yapıştırmayı engelledi. Kod görünümünü açın, tanıları düzeltin ve tekrar deneyin."
+  },
   "flowTabs": {
     "closeTab": "Sekmeyi Kapat",
     "newFlowTab": "Yeni Akış Sekmesi"
+  },
+  "share": {
+    "close": "Close",
+    "title": "Share Design",
+    "betaBadge": "Beta",
+    "description": "Invite collaborators to view and edit this flow with you in real-time.",
+    "roomId": "Room ID",
+    "link": "Share link",
+    "copied": "Copied Link!",
+    "copyLink": "Copy Link",
+    "footerNote": "Your diagram stays local unless you share this room. If copy is blocked, copy the link above manually.",
+    "closeDialog": "Close share dialog",
+    "status": {
+      "cache": {
+        "syncing": " local cache syncing",
+        "ready": " local cache ready",
+        "hydrated": " restored from local cache"
+      },
+      "realtime": "Realtime peer sync",
+      "waiting": "Connecting to realtime sync",
+      "fallback": "Local-only mode"
+    },
+    "openDialog": "Share dialog",
+    "toast": {
+      "fallbackMode": "Realtime sync is unavailable. Continuing in local-only mode.",
+      "reconnected": "Realtime collaboration restored.",
+      "copyFailed": "Unable to copy share link.",
+      "linkCopied": "Collaboration link copied.",
+      "copyManual": "Clipboard access is blocked. Copy the link manually from the share dialog."
+    }
+  },
+  "connectionPanel": {
+    "architecture": "Architecture",
+    "label": "Label",
+    "messagePlaceholder": "Mesaj",
+    "route": "Route",
+    "appearance": "Appearance",
+    "condition": "Condition",
+    "deleteConnection": "Delete Connection"
   }
-}
\ No newline at end of file
+}
diff --git a/public/locales/zh/translation.json b/public/locales/zh/translation.json
index ae08ecf..dc3498d 100644
--- a/public/locales/zh/translation.json
+++ b/public/locales/zh/translation.json
@@ -19,6 +19,8 @@
     "selectAll": "全选",
     "duplicate": "复制",
     "duplicateDrag": "复制并拖拽",
+    "multiSelect": "多选",
+    "selectionBox": "选择框",
     "copy": "复制",
     "paste": "粘贴",
     "zoomIn": "放大",
@@ -35,6 +37,8 @@
     "error": "错误",
     "success": "成功",
     "help": "帮助",
+    "selectTool": "选择工具",
+    "handTool": "抓手工具",
     "getStarted": "开始使用",
     "bringToFront": "移至顶层",
     "sendToBack": "移至底层",
@@ -52,7 +56,8 @@
     "distributeHorizontally": "水平分布",
     "distributeVertically": "垂直分布",
     "group": "分组",
-    "upload": "Upload"
+    "upload": "Upload",
+    "rename": "重命名"
   },
   "nav": {
     "home": "首页",
@@ -72,7 +77,8 @@
     "beta": "测试版",
     "versionHistory": "版本历史",
     "loadJSON": "加载 JSON",
-    "playbackMode": "回放模式"
+    "playbackMode": "回放模式",
+    "privacyMessage": "您的图表只留在您这里，不会发送到我们的服务器。"
   },
   "menu": {
     "file": "文件",
@@ -110,7 +116,31 @@
     "hintClipboard": "Copy to clipboard",
     "figmaEditable": "Figma Editable",
     "exportDiagram": "Export Diagram",
-    "exportAs": "Export As"
+    "exportAs": "Export As",
+    "exportOrShare": "导出或分享此画布",
+    "svg": "导出为 SVG",
+    "hintSvgScalable": "可缩放矢量文件",
+    "video": "回放视频",
+    "hintPlaybackWebM": "回放时间线（WebM/MP4）",
+    "gif": "回放 GIF",
+    "hintPlaybackGif": "适用于文档/社交媒体的短循环",
+    "share": "分享实时画布",
+    "hintShareViewer": "此房间的邀请链接",
+    "readmeEmbed": "README Embed",
+    "hintReadmeEmbed": "Copy Markdown snippet",
+    "sectionImage": "Image",
+    "sectionVideo": "Video & Animation",
+    "sectionCode": "Code & Data",
+    "shareSection": "分享画布",
+    "revealVideo": "Reveal Video",
+    "hintRevealVideo": "Nodes fade in sequentially (WebM/MP4)",
+    "revealGif": "Reveal GIF",
+    "hintRevealGif": "Animated reveal for docs/social",
+    "cinematicVideo": "Cinematic Build Video",
+    "hintCinematicVideo": "Dark launch-style build",
+    "cinematicGif": "Cinematic Build GIF",
+    "hintCinematicGif": "Dark social-ready loop",
+    "actionDownload": "Download"
   },
   "import": {
     "title": "导入",
@@ -122,7 +152,7 @@
     "newTab": "新建标签页",
     "renameTab": "重命名标签页",
     "closeTab": "关闭标签页",
-    "addNode": "添加节点",
+    "addNode": "添加形状",
     "deleteNode": "删除节点",
     "duplicateNode": "复制节点"
   },
@@ -193,7 +223,25 @@
     "recentFiles": "最近文件",
     "files": "个文件",
     "createFirstFlow": "创建您的第一个流程",
-    "startFromScratch": "从零开始或导入现有图表。"
+    "startFromScratch": "从零开始或导入现有图表。",
+    "currentFlow": "当前流程",
+    "autosaved": "已自动保存",
+    "localStorageHint": "已自动保存在此设备上。我们不会将您的图表数据上传到我们的服务器。",
+    "renameFlow": {
+      "title": "重命名流程",
+      "description": "更新仪表板和标签页中显示的名称。",
+      "label": "流程名称",
+      "placeholder": "输入流程名称",
+      "hint": "除非您将其导出或同步到其他地方，否则名称仅保存在当前浏览器配置中。",
+      "closeDialog": "关闭重命名流程对话框"
+    },
+    "deleteFlow": {
+      "title": "删除流程",
+      "description": "这会从此设备中移除本地自动保存的流程。",
+      "confirmation": "删除“{{name}}”？",
+      "hint": "除非您有导出的备份或另一份副本，否则此操作无法撤销。",
+      "closeDialog": "关闭删除流程对话框"
+    }
   },
   "settings": {
     "title": "设置",
@@ -226,7 +274,18 @@
     "description": "描述",
     "color": "颜色",
     "icon": "图标",
-    "size": "大小"
+    "size": "大小",
+    "shape": "形状",
+    "bulkShape": "批量形状",
+    "bulkColor": "批量颜色",
+    "bulkIcon": "批量图标",
+    "labelTransform": "标签变换",
+    "prefixOptional": "前缀（可选）",
+    "suffixOptional": "后缀（可选）",
+    "previewSummary": "预览摘要",
+    "bulkApplySummary": "将更新已选择的 {{count}} 个项目",
+    "selectFieldToApply": "请至少选择一个要应用的字段。",
+    "applyToSelectedNodes": "应用到所选项目"
   },
   "ai": {
     "generate": "使用 AI 生成",
@@ -234,7 +293,8 @@
     "model": "模型",
     "apiKey": "API 密钥",
     "placeholder": "描述你的流程图...",
-    "settingsSubtitle": "Configure your preferred AI provider, model, and API key below."
+    "settingsSubtitle": "Configure your preferred AI provider, model, and API key below.",
+    "generateWithFlowpilot": "使用 Flowpilot 生成"
   },
   "playback": {
     "title": "回放",
@@ -327,9 +387,9 @@
     "description": "终极白标画布。",
     "diagramAsCode": "代码即图表",
     "diagramAsCodeDesc": "支持 Mermaid.js 和 DSL。",
-    "flowpilotAI": "Flowpilot AI",
+    "flowpilotAI": "Flowpilot",
     "aiAssistant": "AI 助手",
-    "flowpilotAIDesc": "与你的图表对话。",
+    "flowpilotAIDesc": "通过引导式 AI 编辑来完善你的图表。",
     "addRedisCache": "在数据库前添加一个 Redis 缓存。",
     "localPrivate": "本地且私密",
     "localPrivateDesc": "一切都留在你的机器上。",
@@ -356,7 +416,7 @@
     "designDesc": "从画布复制并作为可编辑的 SVG 粘贴到 Figma 中。",
     "exportShare": "导出与分享",
     "pixelPerfectOutput": "像素级完美输出",
-    "exportShareDesc": "将图表导出为 SVG、PNG 或 PDF。",
+    "exportShareDesc": "将图表导出为 SVG 或 PNG。",
     "vectorEditable": "矢量 • 在 Figma 中可编辑",
     "rasterHighRes": "光栅 • 高分辨率导出",
     "dataSaveRestore": "数据 • 保存与恢复流程"
@@ -385,8 +445,7 @@
     "communityDesc": "加入构建者行列。",
     "roadmap": "路线图",
     "coreRenderer": "核心渲染器",
-    "flowpilotAI": "Flowpilot AI",
-    "pdfExport": "PDF 导出"
+    "flowpilotAI": "Flowpilot"
   },
   "demo": {
     "livePreview": "实时预览",
@@ -459,7 +518,9 @@
       "placeholder": "通过标签或 ID 搜索...",
       "noResults": "未找到节点",
       "untitled": "未命名节点",
-      "type": "类型"
+      "type": "类型",
+      "showingCount": "Showing: {{count}}",
+      "totalCount": "Total on canvas: {{count}}"
     },
     "templates": {
       "title": "模板",
@@ -473,7 +534,17 @@
       "dslPlaceholder": "粘贴 DSL 代码...",
       "applyShortcut": "按 ⌘+Enter 应用",
       "syntaxGuide": "语法指南",
-      "apply": "应用"
+      "apply": "应用",
+      "quickFixes": "快速修复",
+      "linePrefix": "第 {{line}} 行：",
+      "hintPrefix": "提示：",
+      "strictModeGuidance": {
+        "defineEndpoints": "在连接边之前，将每个边端点都定义为显式的架构节点。",
+        "uniqueIds": "为每个 service/group/junction 节点使用唯一 ID（不要出现重复的架构 ID）。",
+        "edgeSyntax": "使用架构边箭头 `-->`、`<--` 或 `<-->`，以及类似 `api:R --> L:db` 的侧向限定符。",
+        "nodeSyntax": "使用有效的节点声明：`service id(icon)[Label]`、`group id[Label]`、`junction id[Label]`。",
+        "fallback": "关闭架构严格模式以允许自动恢复，或修复诊断后重试。"
+      }
     },
     "layout": {
       "title": "布局工作室",
@@ -495,7 +566,8 @@
       "compact": "紧凑",
       "normal": "正常",
       "loose": "宽松",
-      "applyLayout": "应用布局"
+      "applyLayout": "应用布局",
+      "layoutStyle": "布局样式"
     },
     "designSystem": {
       "title": "设计系统",
@@ -520,13 +592,20 @@
       "intelligentRoutingDesc": "拖动时自动吸附",
       "animatedEdges": "动画连线",
       "animatedEdgesDesc": "流动的粒子",
-      "strokeWidth": "线宽"
+      "strokeWidth": "线宽",
+      "largeGraphSafety": "大图保护",
+      "largeGraphSafetyAuto": "自动",
+      "largeGraphSafetyOn": "开启",
+      "largeGraphSafetyOff": "关闭",
+      "exportModeDeterministic": "确定性",
+      "exportModeLegacy": "旧版",
+      "exportMode": "导出模式"
     }
   },
   "settingsModal": {
     "title": "设置",
     "general": "通用",
-    "flowpilotAI": "Flowpilot AI",
+    "flowpilotAI": "Flowpilot",
     "shortcuts": "快捷键",
     "running": "正在运行 {appName}",
     "generalSettings": "通用设置",
@@ -539,7 +618,17 @@
       "snapToGrid": "对齐网格",
       "snapToGridDesc": "移动时自动对齐",
       "miniMap": "小地图",
-      "miniMapDesc": "右下角显示小地图"
+      "miniMapDesc": "右下角显示小地图",
+      "architectureStrictMode": "架构严格模式",
+      "architectureStrictModeDesc": "当架构诊断包含恢复/校验问题时，阻止 Mermaid 导入",
+      "alignmentGuides": "Alignment Guides",
+      "alignmentGuidesDesc": "Show smart guide lines while dragging nodes",
+      "routingProfile": "路由配置",
+      "routingProfileStandard": "标准",
+      "routingProfileInfrastructure": "基础设施",
+      "routingProfileHint": "基础设施模式会优先为服务图使用正交线路。",
+      "edgeBundling": "捆绑平行边",
+      "edgeBundlingDesc": "让平行连接保持在共享通道上"
     },
     "ai": {
       "provider": "提供商",
@@ -596,7 +685,21 @@
       "customEndpointTitle": "What is a custom endpoint?",
       "privacyTitle": "Privacy & Encryption",
       "customEndpointText": "Any <1>OpenAI-compatible</1> API endpoint — local or remote. Great for:",
-      "customEndpointMustSupport": "Must support <1>POST /chat/completions</1> (OpenAI format)"
+      "customEndpointMustSupport": "Must support <1>POST /chat/completions</1> (OpenAI format)",
+      "advancedEndpointOverride": "高级基础 URL 覆盖",
+      "baseUrlHint": "留空以使用提供商默认端点。可用于您自己的代理/worker URL。",
+      "resetEndpoint": "重置为默认值",
+      "customHeadersTitle": "自定义请求头",
+      "customHeadersSubtitle": "为 Cloudflare Access 之类的认证代理发送额外请求头。",
+      "addHeader": "添加请求头",
+      "cloudflarePreset": "使用 Cloudflare 预设",
+      "customHeadersEmpty": "尚未配置自定义请求头。",
+      "customHeadersSecurity": "请求头的值会本地存储在您的浏览器配置中。",
+      "risk": {
+        "browserFriendly": "浏览器友好",
+        "proxyLikely": "可能需要代理",
+        "mixed": "取决于端点"
+      }
     },
     "brand": {
       "title": "品牌套件",
@@ -643,7 +746,11 @@
       "shareFeedback": "分享反馈",
       "shareFeedbackDesc": "提供反馈、报告错误"
     },
-    "settings": "设置"
+    "settings": "设置",
+    "canvasSettings": "画布设置",
+    "description": "配置画布偏好设置和键盘快捷键。",
+    "close": "关闭设置",
+    "closeDialog": "关闭设置对话框"
   },
   "customNodes": {
     "browserContent": "浏览器内容",
@@ -653,16 +760,18 @@
     "title": "键盘快捷键",
     "subtitle": "用速度掌控您的工作流程。",
     "closeAriaLabel": "关闭快捷键窗口",
-    "proTip": "专业技巧：拖动时按住 <key>?</key> 以启用选择框。"
+    "proTip": "提示：按住 <key>Shift</key> 可加入选择或拖出选择框。"
   },
   "toolbar": {
     "selectMode": "选择模式 (V)",
     "panMode": "平移模式 (H)",
-    "flowpilot": "Flowpilot (Cmd+K)",
+    "flowpilot": "Flowpilot",
     "templates": "模板",
     "addItem": "添加元素",
     "addToCanvas": "添加到画布",
-    "node": "节点",
+    "shapes": "形状",
+    "assets": "资源",
+    "node": "形状",
     "stickyNote": "便利贴",
     "section": "分区",
     "text": "文本",
@@ -671,7 +780,8 @@
     "autoLayout": "自动布局",
     "clearCanvas": "清除画布",
     "undo": "撤销 (Ctrl+Z)",
-    "redo": "重做 (Ctrl+Y)"
+    "redo": "重做 (Ctrl+Y)",
+    "commandCenter": "打开命令中心"
   },
   "flowEditor": {
     "cannotCloseLastTab": "无法关闭最后一个标签页。",
@@ -687,25 +797,27 @@
       "description": "您的画布是空的。使用 Flowpilot 生成流程，或从空白开始。",
       "generateWithFlowpilot": "使用 Flowpilot 生成",
       "browseTemplates": "浏览模板",
-      "addBlankNode": "添加空白节点"
-    }
+      "addBlankNode": "添加空白形状"
+    },
+    "dslExportSkippedEdges": "DSL 导出时跳过了 {{count}} 条无效边。"
   },
   "annotationNode": {
     "placeholder": "*双击编辑注释*"
   },
   "connectMenu": {
-    "createNewNode": "创建新节点",
-    "process": "流程",
-    "processDesc": "标准操作",
-    "decision": "决策",
-    "decisionDesc": "分支逻辑",
+    "createNewNode": "创建新形状",
+    "process": "圆角形状",
+    "processDesc": "通用块",
+    "decision": "菱形形状",
+    "decisionDesc": "分支块",
     "database": "数据库",
-    "databaseDesc": "数据存储",
+    "databaseDesc": "圆柱形状",
     "inputOutput": "输入 / 输出",
-    "inputOutputDesc": "数据流",
-    "note": "注释",
+    "inputOutputDesc": "平行四边形",
+    "note": "便利贴",
     "noteDesc": "文档说明",
-    "releaseToConnect": "松开以连接"
+    "releaseToConnect": "松开以连接",
+    "close": "关闭连接菜单"
   },
   "errorBoundary": {
     "title": "出现了错误",
@@ -729,7 +841,12 @@
     "restoreVersion": "恢复版本",
     "deleteVersion": "删除版本",
     "nodes": "{{count}} 个节点",
-    "edges": "{{count}} 条边"
+    "edges": "{{count}} 条边",
+    "close": "关闭快照面板",
+    "namedVersions": "Named Versions",
+    "noNamedSnapshots": "No named versions yet.",
+    "autosavedVersions": "Autosaved Checkpoints",
+    "noAutoSnapshots": "No autosaved checkpoints yet."
   },
   "templatesPanel": {
     "title": "流程模板",
@@ -738,9 +855,12 @@
   },
   "propertiesPanel": {
     "stickyNote": "便利贴",
-    "nodeSettings": "节点设置",
+    "nodeSettings": "形状设置",
     "connection": "连接"
   },
+  "flowCanvas": {
+    "strictModePasteBlocked": "架构严格模式已阻止 Mermaid 粘贴。请打开代码视图，修复诊断后重试。"
+  },
   "flowTabs": {
     "closeTab": "关闭标签页",
     "newFlowTab": "新建流程标签页"
@@ -752,14 +872,55 @@
     "newNode": "New Node",
     "branch": "Branch",
     "processStep": "Process Step",
+    "addText": "添加文本",
     "group": "Group",
     "items": "items",
     "addCommentsHere": "Add your comments here.",
     "newSection": "New Section",
     "text": "Text",
-    "image": "Image"
+    "image": "Image",
+    "mindmap": "主题"
   },
   "actions": {
     "clearCanvasConfirm": "Are you sure you want to clear the canvas?"
+  },
+  "share": {
+    "close": "Close",
+    "title": "Share Design",
+    "betaBadge": "测试版",
+    "description": "Invite collaborators to view and edit this flow with you in real-time.",
+    "roomId": "房间 ID",
+    "link": "分享链接",
+    "copied": "Copied Link!",
+    "copyLink": "Copy Link",
+    "footerNote": "Your diagram stays local unless you share this room. If copy is blocked, copy the link above manually.",
+    "closeDialog": "Close share dialog",
+    "status": {
+      "cache": {
+        "syncing": " local cache syncing",
+        "ready": " local cache ready",
+        "hydrated": " restored from local cache"
+      },
+      "realtime": "Realtime peer sync",
+      "waiting": "Connecting to realtime sync",
+      "fallback": "Local-only mode"
+    },
+    "openDialog": "Share dialog",
+    "toast": {
+      "fallbackMode": "实时同步不可用。将继续以仅本地模式运行。",
+      "reconnected": "实时协作已恢复。",
+      "copyFailed": "Unable to copy share link.",
+      "linkCopied": "Collaboration link copied.",
+      "copyManual": "剪贴板访问被阻止。请从分享对话框中手动复制链接。"
+    }
+  },
+  "connectionPanel": {
+    "architecture": "Architecture",
+    "label": "Label",
+    "messagePlaceholder": "消息",
+    "route": "路由",
+    "appearance": "外观",
+    "condition": "Condition",
+    "deleteConnection": "Delete Connection"
   }
 }
diff --git a/public/manifest.webmanifest b/public/manifest.webmanifest
new file mode 100644
index 0000000..f01a24e
--- /dev/null
+++ b/public/manifest.webmanifest
@@ -0,0 +1,23 @@
+{
+  "name": "OpenFlowKit",
+  "short_name": "OpenFlowKit",
+  "description": "Local-first diagramming for developers and technical builders.",
+  "start_url": "/index.html#/home",
+  "display": "standalone",
+  "background_color": "#f8fafc",
+  "theme_color": "#2563eb",
+  "icons": [
+    {
+      "src": "/Logo_openflowkit.svg",
+      "sizes": "any",
+      "type": "image/svg+xml",
+      "purpose": "any"
+    },
+    {
+      "src": "/favicon.svg",
+      "sizes": "any",
+      "type": "image/svg+xml",
+      "purpose": "any"
+    }
+  ]
+}
diff --git a/public/sitemap.xml b/public/sitemap.xml
index c2a9625..e9cefd6 100644
--- a/public/sitemap.xml
+++ b/public/sitemap.xml
@@ -6,118 +6,13 @@
     <priority>1.0</priority>
   </url>
   <url>
-    <loc>https://openflowkit.com/#/home</loc>
-    <changefreq>monthly</changefreq>
-    <priority>0.8</priority>
-  </url>
-  <url>
-    <loc>https://openflowkit.com/#/canvas</loc>
-    <changefreq>monthly</changefreq>
-    <priority>0.8</priority>
-  </url>
-  <url>
-    <loc>https://openflowkit.com/docs/en/ai-generation</loc>
-    <changefreq>weekly</changefreq>
-    <priority>0.8</priority>
-  </url>
-  <url>
-    <loc>https://openflowkit.com/docs/en/ask-flowpilot</loc>
-    <changefreq>weekly</changefreq>
-    <priority>0.8</priority>
-  </url>
-  <url>
-    <loc>https://openflowkit.com/docs/en/aws-architecture</loc>
-    <changefreq>weekly</changefreq>
-    <priority>0.8</priority>
-  </url>
-  <url>
-    <loc>https://openflowkit.com/docs/en/canvas-basics</loc>
-    <changefreq>weekly</changefreq>
-    <priority>0.8</priority>
-  </url>
-  <url>
-    <loc>https://openflowkit.com/docs/en/command-center</loc>
-    <changefreq>weekly</changefreq>
-    <priority>0.8</priority>
-  </url>
-  <url>
-    <loc>https://openflowkit.com/docs/en/exporting</loc>
-    <changefreq>weekly</changefreq>
-    <priority>0.8</priority>
-  </url>
-  <url>
-    <loc>https://openflowkit.com/docs/en/introduction</loc>
-    <changefreq>weekly</changefreq>
-    <priority>1.0</priority>
-  </url>
-  <url>
-    <loc>https://openflowkit.com/docs/en/keyboard-shortcuts</loc>
-    <changefreq>weekly</changefreq>
-    <priority>0.8</priority>
-  </url>
-  <url>
-    <loc>https://openflowkit.com/docs/en/mermaid-integration</loc>
-    <changefreq>weekly</changefreq>
-    <priority>0.8</priority>
-  </url>
-  <url>
-    <loc>https://openflowkit.com/docs/en/mermaid-vs-openflow</loc>
-    <changefreq>weekly</changefreq>
-    <priority>0.8</priority>
-  </url>
-  <url>
-    <loc>https://openflowkit.com/docs/en/node-types</loc>
-    <changefreq>weekly</changefreq>
-    <priority>0.8</priority>
-  </url>
-  <url>
-    <loc>https://openflowkit.com/docs/en/openflow-dsl</loc>
-    <changefreq>weekly</changefreq>
-    <priority>0.8</priority>
-  </url>
-  <url>
-    <loc>https://openflowkit.com/docs/en/payment-flow</loc>
-    <changefreq>weekly</changefreq>
-    <priority>0.8</priority>
-  </url>
-  <url>
-    <loc>https://openflowkit.com/docs/en/playback-history</loc>
-    <changefreq>weekly</changefreq>
-    <priority>0.8</priority>
-  </url>
-  <url>
-    <loc>https://openflowkit.com/docs/en/prompting-agents</loc>
-    <changefreq>weekly</changefreq>
-    <priority>0.8</priority>
-  </url>
-  <url>
-    <loc>https://openflowkit.com/docs/en/properties-panel</loc>
-    <changefreq>weekly</changefreq>
-    <priority>0.8</priority>
-  </url>
-  <url>
-    <loc>https://openflowkit.com/docs/en/quick-start</loc>
-    <changefreq>weekly</changefreq>
-    <priority>0.8</priority>
-  </url>
-  <url>
-    <loc>https://openflowkit.com/docs/en/roadmap</loc>
-    <changefreq>weekly</changefreq>
-    <priority>0.8</priority>
-  </url>
-  <url>
-    <loc>https://openflowkit.com/docs/en/smart-layout</loc>
-    <changefreq>weekly</changefreq>
-    <priority>0.8</priority>
-  </url>
-  <url>
-    <loc>https://openflowkit.com/docs/en/theming</loc>
-    <changefreq>weekly</changefreq>
-    <priority>0.8</priority>
+    <loc>https://app.openflowkit.com/</loc>
+    <changefreq>daily</changefreq>
+    <priority>0.9</priority>
   </url>
   <url>
-    <loc>https://openflowkit.com/docs/en/v1-beta-launch</loc>
+    <loc>https://docs.openflowkit.com/</loc>
     <changefreq>weekly</changefreq>
     <priority>0.8</priority>
   </url>
-</urlset>
\ No newline at end of file
+</urlset>
diff --git a/public/sw.js b/public/sw.js
new file mode 100644
index 0000000..0b3bdc8
--- /dev/null
+++ b/public/sw.js
@@ -0,0 +1,73 @@
+const APP_SHELL_CACHE = 'openflowkit-app-shell-v1';
+const APP_SHELL_ASSETS = [
+  '/',
+  '/index.html',
+  '/manifest.webmanifest',
+  '/Logo_openflowkit.svg',
+  '/favicon.svg',
+];
+
+self.addEventListener('install', (event) => {
+  event.waitUntil((async () => {
+    const cache = await caches.open(APP_SHELL_CACHE);
+    await Promise.allSettled(APP_SHELL_ASSETS.map((asset) => cache.add(asset)));
+    await self.skipWaiting();
+  })());
+});
+
+self.addEventListener('activate', (event) => {
+  event.waitUntil((async () => {
+    const cacheKeys = await caches.keys();
+    await Promise.all(
+      cacheKeys
+        .filter((key) => key !== APP_SHELL_CACHE)
+        .map((key) => caches.delete(key))
+    );
+    await self.clients.claim();
+  })());
+});
+
+self.addEventListener('fetch', (event) => {
+  const { request } = event;
+  if (request.method !== 'GET') {
+    return;
+  }
+
+  const requestUrl = new URL(request.url);
+  if (request.mode === 'navigate') {
+    event.respondWith((async () => {
+      try {
+        const networkResponse = await fetch(request);
+        const cache = await caches.open(APP_SHELL_CACHE);
+        cache.put('/index.html', networkResponse.clone());
+        return networkResponse;
+      } catch {
+        const cachedResponse = await caches.match('/index.html');
+        if (cachedResponse) {
+          return cachedResponse;
+        }
+
+        throw new Error('Offline app shell unavailable.');
+      }
+    })());
+    return;
+  }
+
+  if (requestUrl.origin !== self.location.origin) {
+    return;
+  }
+
+  event.respondWith((async () => {
+    const cache = await caches.open(APP_SHELL_CACHE);
+    const cachedResponse = await cache.match(request);
+
+    const networkPromise = fetch(request)
+      .then((response) => {
+        cache.put(request, response.clone());
+        return response;
+      })
+      .catch(() => cachedResponse);
+
+    return cachedResponse ?? networkPromise;
+  })());
+});
diff --git a/scripts/check-bundle-budget.mjs b/scripts/check-bundle-budget.mjs
index 1c6eb86..f60d3d6 100644
--- a/scripts/check-bundle-budget.mjs
+++ b/scripts/check-bundle-budget.mjs
@@ -7,6 +7,8 @@ const INDEX_HTML_PATH = path.join(DIST_DIR, 'index.html');
 const MAIN_JS_MAX_KB = Number(process.env.ENTRY_MAIN_JS_BUDGET_KB ?? 1400);
 const TOTAL_ENTRY_JS_MAX_KB = Number(process.env.ENTRY_TOTAL_JS_BUDGET_KB ?? 2800);
 const ENTRY_CSS_MAX_KB = Number(process.env.ENTRY_CSS_BUDGET_KB ?? 220);
+const LAZY_CHUNK_MAX_KB = Number(process.env.LAZY_CHUNK_MAX_KB ?? 1500);
+const LAZY_TOTAL_MAX_KB = Number(process.env.LAZY_TOTAL_MAX_KB ?? 8000);
 
 function toKb(bytes) {
   return Number((bytes / 1024).toFixed(1));
@@ -21,6 +23,20 @@ function parseEntryAssets(html) {
   return Array.from(files);
 }
 
+function readAllChunkSizes() {
+  const assetsDir = path.join(DIST_DIR, 'assets');
+  if (!fs.existsSync(assetsDir)) {
+    return new Map();
+  }
+  const sizes = new Map();
+  for (const filename of fs.readdirSync(assetsDir)) {
+    if (!filename.endsWith('.js')) continue;
+    const filePath = path.join(assetsDir, filename);
+    sizes.set(`assets/${filename}`, fs.statSync(filePath).size);
+  }
+  return sizes;
+}
+
 function readEntryAssetSizes() {
   if (!fs.existsSync(INDEX_HTML_PATH)) {
     throw new Error('Missing dist/index.html. Run "npm run build" before "npm run bundle:check".');
@@ -88,6 +104,44 @@ function main() {
     console.error('\nBundle budget violations detected.');
     process.exit(1);
   }
+
+  // Lazy chunk checks
+  const allChunkSizes = readAllChunkSizes();
+  const entryJsSet = new Set(jsEntries.map(([file]) => file));
+  const lazyChunks = Array.from(allChunkSizes.entries()).filter(([file]) => !entryJsSet.has(file));
+  const totalLazyBytes = lazyChunks.reduce((sum, [, size]) => sum + size, 0);
+
+  const top5 = [...lazyChunks].sort(([, a], [, b]) => b - a).slice(0, 5);
+  console.log('\nBundle budget check (lazy chunks):');
+  console.log('Top 5 largest lazy chunks:');
+  for (const [file, bytes] of top5) {
+    console.log(`  ${toKb(bytes)} KB  ${file}`);
+  }
+
+  const lazyChecks = [];
+  let lazyChunkFail = false;
+  for (const [file, bytes] of lazyChunks) {
+    const kb = toKb(bytes);
+    if (kb > LAZY_CHUNK_MAX_KB) {
+      lazyChecks.push({ label: `lazy chunk ${file}`, actualKb: kb, maxKb: LAZY_CHUNK_MAX_KB });
+      lazyChunkFail = true;
+    }
+  }
+
+  const totalLazyKb = toKb(totalLazyBytes);
+  const totalLazyStatus = totalLazyKb <= LAZY_TOTAL_MAX_KB ? 'PASS' : 'FAIL';
+  console.log(`- ${totalLazyStatus} total lazy JS: ${totalLazyKb} KB / ${LAZY_TOTAL_MAX_KB} KB (${lazyChunks.length} chunks)`);
+
+  if (lazyChunkFail) {
+    for (const c of lazyChecks) {
+      console.log(`- FAIL ${c.label}: ${c.actualKb} KB / ${c.maxKb} KB`);
+    }
+  }
+
+  if (lazyChunkFail || totalLazyKb > LAZY_TOTAL_MAX_KB) {
+    console.error('\nLazy bundle budget violations detected.');
+    process.exit(1);
+  }
 }
 
 main();
diff --git a/scripts/generate-sitemap.js b/scripts/generate-sitemap.js
index dd3696a..8c98dc5 100644
--- a/scripts/generate-sitemap.js
+++ b/scripts/generate-sitemap.js
@@ -1,34 +1,39 @@
-import fs from 'fs';
-import path from 'path';
-import { fileURLToPath } from 'url';
+import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
-const DOCS_DIR = path.resolve(__dirname, '../docs/en');
-const BASE_URL = 'https://openflowkit.com/docs'; // Update with actual domain later if needed
-
-const generateSitemap = () => {
-    const files = fs.readdirSync(DOCS_DIR);
-
-    const urls = files
-        .filter(file => file.endsWith('.md'))
-        .map(file => {
-            const slug = file.replace('.md', '');
-            return `  <url>\n    <loc>${BASE_URL}/en/${slug}</loc>\n    <changefreq>weekly</changefreq>\n    <priority>${slug === 'introduction' ? '1.0' : '0.8'}</priority>\n  </url>`;
-        });
-
-    // Add main landing page and app routes
-    const coreRoutes = [
-        `  <url>\n    <loc>https://openflowkit.com/</loc>\n    <changefreq>weekly</changefreq>\n    <priority>1.0</priority>\n  </url>`,
-        `  <url>\n    <loc>https://openflowkit.com/#/home</loc>\n    <changefreq>monthly</changefreq>\n    <priority>0.8</priority>\n  </url>`,
-        `  <url>\n    <loc>https://openflowkit.com/#/canvas</loc>\n    <changefreq>monthly</changefreq>\n    <priority>0.8</priority>\n  </url>`,
-    ];
-
-    const sitemap = `<?xml version="1.0" encoding="UTF-8"?>\n<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">\n${coreRoutes.join('\n')}\n${urls.join('\n')}\n</urlset>`;
-
-    fs.writeFileSync(path.resolve(__dirname, '../public/sitemap.xml'), sitemap);
-    console.log('Sitemap generated at public/sitemap.xml');
-};
+const OUTPUT_FILE = path.resolve(__dirname, '../public/sitemap.xml');
+
+const ROUTES = [
+  { loc: 'https://openflowkit.com/', changefreq: 'weekly', priority: '1.0' },
+  { loc: 'https://app.openflowkit.com/', changefreq: 'daily', priority: '0.9' },
+  { loc: 'https://docs.openflowkit.com/', changefreq: 'weekly', priority: '0.8' },
+];
+
+function renderUrl({ loc, changefreq, priority }) {
+  return [
+    '  <url>',
+    `    <loc>${loc}</loc>`,
+    `    <changefreq>${changefreq}</changefreq>`,
+    `    <priority>${priority}</priority>`,
+    '  </url>',
+  ].join('\n');
+}
+
+function generateSitemap() {
+  const sitemap = [
+    '<?xml version="1.0" encoding="UTF-8"?>',
+    '<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">',
+    ...ROUTES.map(renderUrl),
+    '</urlset>',
+    '',
+  ].join('\n');
+
+  fs.writeFileSync(OUTPUT_FILE, sitemap, 'utf8');
+  console.log(`Sitemap generated at ${OUTPUT_FILE}`);
+}
 
 generateSitemap();
diff --git a/signaling-server/package.json b/signaling-server/package.json
new file mode 100644
index 0000000..96408c6
--- /dev/null
+++ b/signaling-server/package.json
@@ -0,0 +1,13 @@
+{
+  "name": "openflowkit-signaling",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "start": "node server.js"
+  },
+  "dependencies": {
+    "ws": "^8.18.0",
+    "y-websocket": "^2.0.4",
+    "yjs": "^13.6.20"
+  }
+}
diff --git a/signaling-server/render.yaml b/signaling-server/render.yaml
new file mode 100644
index 0000000..2aaf48d
--- /dev/null
+++ b/signaling-server/render.yaml
@@ -0,0 +1,8 @@
+services:
+  - type: web
+    name: openflowkit-collab
+    runtime: node
+    plan: free
+    buildCommand: npm install
+    startCommand: node server.js
+    healthCheckPath: /
diff --git a/signaling-server/server.js b/signaling-server/server.js
new file mode 100644
index 0000000..2126f22
--- /dev/null
+++ b/signaling-server/server.js
@@ -0,0 +1,18 @@
+const http = require('http');
+const { WebSocketServer } = require('ws');
+const { setupWSConnection } = require('y-websocket/bin/utils');
+
+const port = process.env.PORT || 1234;
+
+const server = http.createServer((_req, res) => {
+  res.writeHead(200, { 'Content-Type': 'text/plain' });
+  res.end('ok');
+});
+
+const wss = new WebSocketServer({ server });
+
+wss.on('connection', (ws, req) => {
+  setupWSConnection(ws, req);
+});
+
+server.listen(port);
diff --git a/src/App.tsx b/src/App.tsx
index d3f49bf..078d519 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,50 +1,37 @@
 import React, { lazy, Suspense, useEffect } from 'react';
-import { HashRouter as Router, Routes, Route, Navigate, useNavigate, useParams, useLocation } from 'react-router-dom';
+import { HashRouter as Router, Routes, Route, Navigate, useNavigate, useLocation, useParams } from 'react-router-dom';
 import { ReactFlowProvider } from '@/lib/reactflowCompat';
-import { Monitor, ArrowLeft } from 'lucide-react';
-import { createFlowEditorImportRouteState } from '@/app/routeState';
+import { createFlowEditorAIRouteState, createFlowEditorImportRouteState, createFlowEditorTemplatesRouteState } from '@/app/routeState';
+import { DocsSiteRedirect } from '@/components/app/DocsSiteRedirect';
 import { RouteLoadingFallback } from '@/components/app/RouteLoadingFallback';
-import { OpenFlowLogo } from './components/icons/OpenFlowLogo';
+import { MobileWorkspaceGate } from '@/components/app/MobileWorkspaceGate';
+import { CinematicExportProvider } from '@/context/CinematicExportContext';
+import { HomePage } from '@/components/HomePage';
 
 import { useFlowStore } from './store';
-import { useActiveTabId, useTabActions } from '@/store/tabHooks';
-import { FlowSnapshot } from './lib/types';
+import { useTabActions } from '@/store/tabHooks';
 import { useShortcutHelpOpen } from '@/store/viewHooks';
 
 // Import i18n configuration
 import './i18n/config';
 
 
-const FlowEditor = lazy(async () => {
+async function loadFlowEditorModule() {
   const module = await import('./components/FlowEditor');
   return { default: module.FlowEditor };
-});
-
-const HomePage = lazy(async () => {
-  const module = await import('./components/HomePage');
-  return { default: module.HomePage };
-});
-
-const DocsLayout = lazy(async () => {
-  const module = await import('./components/docs/DocsLayout');
-  return { default: module.DocsLayout };
-});
+}
 
-const DocsPage = lazy(async () => {
-  const module = await import('./components/docs/DocsPage');
-  return { default: module.DocsPage };
-});
+const FlowEditor = lazy(loadFlowEditorModule);
 
 const LazyKeyboardShortcutsModal = lazy(async () => {
   const module = await import('./components/KeyboardShortcutsModal');
   return { default: module.KeyboardShortcutsModal };
 });
 
-// Backwards-compatibility redirect: /docs/:slug → /docs/en/:slug
-function DocsSlugRedirect(): React.JSX.Element {
-  const { slug } = useParams<{ slug: string }>();
-  return <Navigate to={`/docs/en/${slug}`} replace />;
-}
+const LazyDiagramViewer = lazy(async () => {
+  const module = await import('./components/DiagramViewer');
+  return { default: module.DiagramViewer };
+});
 
 function FlowCanvasRoute(): React.JSX.Element {
   const { flowId } = useParams();
@@ -60,7 +47,9 @@ function FlowCanvasRoute(): React.JSX.Element {
   return (
     <Suspense fallback={<RouteLoadingFallback />}>
       <ReactFlowProvider>
-        <FlowEditor onGoHome={() => navigate('/home')} />
+        <CinematicExportProvider>
+          <FlowEditor onGoHome={() => navigate('/home')} />
+        </CinematicExportProvider>
       </ReactFlowProvider>
     </Suspense>
   );
@@ -69,110 +58,62 @@ function FlowCanvasRoute(): React.JSX.Element {
 function HomePageRoute(): React.JSX.Element {
   const navigate = useNavigate();
   const location = useLocation();
-  const activeTabId = useActiveTabId();
   const { addTab } = useTabActions();
 
   const activeTab = location.pathname === '/settings' ? 'settings' : 'home';
 
+  useEffect(() => {
+    void loadFlowEditorModule();
+  }, []);
+
   const handleLaunch = () => {
     const newTabId = addTab();
     navigate(`/flow/${newTabId}`);
   };
 
-  const handleRestore = (snapshot: FlowSnapshot) => {
-    const { setNodes, setEdges, updateTab } = useFlowStore.getState();
-    // Deep copy to prevent state mutation issues if snapshot is just a ref
-    const nodesCopy = JSON.parse(JSON.stringify(snapshot.nodes));
-    const edgesCopy = JSON.parse(JSON.stringify(snapshot.edges));
-    setNodes(nodesCopy);
-    setEdges(edgesCopy);
-    updateTab(activeTabId, { name: snapshot.name });
-    navigate(`/flow/${activeTabId}`);
+  const handleLaunchWithTemplates = () => {
+    const newTabId = addTab();
+    navigate(`/flow/${newTabId}`, { state: createFlowEditorTemplatesRouteState() });
+  };
+
+  const handleLaunchWithAI = () => {
+    const newTabId = addTab();
+    navigate(`/flow/${newTabId}`, { state: createFlowEditorAIRouteState() });
   };
 
   return (
-    <Suspense fallback={<RouteLoadingFallback />}>
-                    <HomePage
-                        onLaunch={handleLaunch}
-                        onImportJSON={() => {
-                            navigate('/canvas', {
-                              state: createFlowEditorImportRouteState(),
-                            });
-                        }}
-                        onRestoreSnapshot={handleRestore}
-                        onOpenFlow={(flowId) => navigate(`/flow/${flowId}`)}
-                        activeTab={activeTab}
-                        onSwitchTab={(tab) => navigate(tab === 'settings' ? '/settings' : '/home')}
-                    />
-    </Suspense>
+    <HomePage
+      onLaunch={handleLaunch}
+      onLaunchWithTemplates={handleLaunchWithTemplates}
+      onLaunchWithAI={handleLaunchWithAI}
+      onImportJSON={() => {
+        navigate('/canvas', {
+          state: createFlowEditorImportRouteState(),
+        });
+      }}
+      onOpenFlow={(flowId) => navigate(`/flow/${flowId}`)}
+      activeTab={activeTab}
+      onSwitchTab={(tab) => navigate(tab === 'settings' ? '/settings' : '/home')}
+    />
   );
 }
 
-// Mobile gate — shows a friendly message on screens < md (768px)
-function MobileGate({ children }: { children: React.ReactNode }): React.JSX.Element {
+function EditorRouteGate({ children }: { children: React.ReactNode }): React.JSX.Element {
   const navigate = useNavigate();
 
   return (
-    <>
-      {/* Mobile: Friendly message */}
-      <div className="md:hidden fixed inset-0 z-[100] flex items-center justify-center bg-[radial-gradient(circle_at_top,_rgba(59,130,246,0.12),_transparent_45%),linear-gradient(180deg,_white,_#f8fafc)] px-6 text-center">
-        <div className="w-full max-w-sm rounded-[28px] border border-slate-200/80 bg-white/90 px-6 py-8 shadow-2xl shadow-slate-200/70 backdrop-blur-md">
-          <div className="mx-auto mb-8 flex h-14 w-14 items-center justify-center rounded-2xl bg-brand-primary text-white shadow-xl shadow-brand-primary/20 ring-1 ring-white/20">
-            <OpenFlowLogo className="h-8 w-8 text-white" />
-          </div>
-
-          <div className="mx-auto mb-6 flex h-12 w-12 items-center justify-center rounded-full bg-brand-primary/5">
-            <Monitor className="h-6 w-6 text-brand-primary" />
-          </div>
-
-          <h2 className="text-2xl font-bold tracking-tight text-brand-dark">
-            Editing works best on larger screens
-          </h2>
-
-          <p className="mx-auto mt-3 max-w-sm text-sm leading-6 text-brand-secondary">
-            The canvas editor is tuned for desktop and large-tablet layouts. On this device, docs and product overview pages will work better than the full editing workspace.
-          </p>
-
-          <div className="mt-6 rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3 text-left">
-            <p className="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-400">
-              Recommended
-            </p>
-            <p className="mt-1 text-sm text-slate-600">
-              Open the editor on a laptop or larger tablet for canvas controls, panels, and collaboration tools.
-            </p>
-          </div>
-
-          <div className="mt-8 flex flex-col gap-3">
-            <button
-              onClick={() => navigate('/docs')}
-              className="inline-flex items-center justify-center rounded-full bg-brand-primary px-5 py-3 text-sm font-semibold text-white shadow-lg shadow-brand-primary/15 transition-colors hover:brightness-110"
-            >
-              Open Docs Instead
-            </button>
-
-            <button
-              onClick={() => navigate('/')}
-              className="inline-flex items-center justify-center gap-2 rounded-full border border-brand-primary/20 px-5 py-2.5 text-sm font-medium text-brand-primary transition-colors hover:bg-brand-primary/5"
-            >
-              <ArrowLeft className="h-4 w-4" />
-              Back to Home
-            </button>
-          </div>
-        </div>
-      </div>
-
-      {/* Desktop: Normal content */}
-      <div className="hidden md:contents">
-        {children}
-      </div>
-    </>
+    <MobileWorkspaceGate
+      onOpenDocs={() => navigate('/docs')}
+      onGoHome={() => navigate('/home')}
+    >
+      {children}
+    </MobileWorkspaceGate>
   );
 }
 
 function App(): React.JSX.Element {
   const { setShortcutsHelpOpen } = useFlowStore();
   const isShortcutsHelpOpen = useShortcutHelpOpen();
-
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
       // Don't trigger if user is typing in an input
@@ -201,29 +142,21 @@ function App(): React.JSX.Element {
     <Router>
       <Routes>
         <Route path="/" element={<Navigate to="/home" replace />} />
-        <Route path="/home" element={<MobileGate><HomePageRoute /></MobileGate>} />
-        <Route path="/settings" element={<MobileGate><HomePageRoute /></MobileGate>} />
-        <Route path="/canvas" element={<MobileGate><FlowCanvasRoute /></MobileGate>} />
-        <Route path="/flow/:flowId" element={<MobileGate><FlowCanvasRoute /></MobileGate>} />
         <Route
-          path="/docs"
+          path="/view"
           element={(
             <Suspense fallback={<RouteLoadingFallback />}>
-              <DocsLayout />
+              <LazyDiagramViewer />
             </Suspense>
           )}
-        >
-          <Route index element={<Navigate to="en/introduction" replace />} />
-          <Route path=":slug" element={<DocsSlugRedirect />} />
-          <Route
-            path=":lang/:slug"
-            element={(
-              <Suspense fallback={<RouteLoadingFallback />}>
-                <DocsPage />
-              </Suspense>
-            )}
-          />
-        </Route>
+        />
+        <Route path="/home" element={<HomePageRoute />} />
+        <Route path="/settings" element={<HomePageRoute />} />
+        <Route path="/canvas" element={<EditorRouteGate><FlowCanvasRoute /></EditorRouteGate>} />
+        <Route path="/flow/:flowId" element={<EditorRouteGate><FlowCanvasRoute /></EditorRouteGate>} />
+        <Route path="/docs" element={<DocsSiteRedirect />} />
+        <Route path="/docs/:slug" element={<DocsSiteRedirect />} />
+        <Route path="/docs/:lang/:slug" element={<DocsSiteRedirect />} />
       </Routes>
 
       {isShortcutsHelpOpen ? (
diff --git a/src/app/routeState.test.ts b/src/app/routeState.test.ts
index 6fb4806..ce049b6 100644
--- a/src/app/routeState.test.ts
+++ b/src/app/routeState.test.ts
@@ -1,15 +1,34 @@
 import { describe, expect, it } from 'vitest';
-import { createFlowEditorImportRouteState, shouldOpenFlowEditorImportDialog } from './routeState';
+import {
+  createFlowEditorAIRouteState,
+  createFlowEditorImportRouteState,
+  createFlowEditorTemplatesRouteState,
+  shouldOpenFlowEditorAI,
+  shouldOpenFlowEditorImportDialog,
+  shouldOpenFlowEditorTemplates,
+} from './routeState';
 
 describe('routeState', () => {
   it('creates route state that requests the flow editor import dialog', () => {
     expect(createFlowEditorImportRouteState()).toEqual({ openImportDialog: true });
   });
 
+  it('creates route state that requests templates and studio ai entry points', () => {
+    expect(createFlowEditorTemplatesRouteState()).toEqual({ openTemplates: true });
+    expect(createFlowEditorAIRouteState()).toEqual({ openStudioAI: true });
+  });
+
   it('detects only valid import-dialog route state payloads', () => {
     expect(shouldOpenFlowEditorImportDialog({ openImportDialog: true })).toBe(true);
     expect(shouldOpenFlowEditorImportDialog({ openImportDialog: false })).toBe(false);
     expect(shouldOpenFlowEditorImportDialog(null)).toBe(false);
     expect(shouldOpenFlowEditorImportDialog('import')).toBe(false);
   });
+
+  it('detects template and studio-ai route state payloads', () => {
+    expect(shouldOpenFlowEditorTemplates({ openTemplates: true })).toBe(true);
+    expect(shouldOpenFlowEditorTemplates({ openTemplates: false })).toBe(false);
+    expect(shouldOpenFlowEditorAI({ openStudioAI: true })).toBe(true);
+    expect(shouldOpenFlowEditorAI({ openStudioAI: false })).toBe(false);
+  });
 });
diff --git a/src/app/routeState.ts b/src/app/routeState.ts
index 69198f6..4e1fe9a 100644
--- a/src/app/routeState.ts
+++ b/src/app/routeState.ts
@@ -1,15 +1,32 @@
 export interface FlowEditorRouteState {
   openImportDialog?: boolean;
+  openTemplates?: boolean;
+  openStudioAI?: boolean;
 }
 
 export function createFlowEditorImportRouteState(): FlowEditorRouteState {
   return { openImportDialog: true };
 }
 
-export function shouldOpenFlowEditorImportDialog(state: unknown): boolean {
-  if (!state || typeof state !== 'object') {
-    return false;
-  }
+export function createFlowEditorTemplatesRouteState(): FlowEditorRouteState {
+  return { openTemplates: true };
+}
 
+export function createFlowEditorAIRouteState(): FlowEditorRouteState {
+  return { openStudioAI: true };
+}
+
+export function shouldOpenFlowEditorImportDialog(state: unknown): boolean {
+  if (!state || typeof state !== 'object') return false;
   return (state as FlowEditorRouteState).openImportDialog === true;
 }
+
+export function shouldOpenFlowEditorTemplates(state: unknown): boolean {
+  if (!state || typeof state !== 'object') return false;
+  return (state as FlowEditorRouteState).openTemplates === true;
+}
+
+export function shouldOpenFlowEditorAI(state: unknown): boolean {
+  if (!state || typeof state !== 'object') return false;
+  return (state as FlowEditorRouteState).openStudioAI === true;
+}
diff --git a/src/components/AnnotationNode.tsx b/src/components/AnnotationNode.tsx
index 90aa2ee..020a3ba 100644
--- a/src/components/AnnotationNode.tsx
+++ b/src/components/AnnotationNode.tsx
@@ -6,6 +6,8 @@ import { useInlineNodeTextEdit } from '@/hooks/useInlineNodeTextEdit';
 import { InlineTextEditSurface } from './InlineTextEditSurface';
 import { NodeChrome } from './NodeChrome';
 import { hasMarkdownSyntax } from './markdownSyntax';
+import { useFlowStore } from '@/store';
+import { ANNOTATION_COLOR_OPTIONS, resolveAnnotationTheme } from './annotationTheme';
 
 const LazyMarkdownRenderer = lazy(async () => {
   const module = await import('./MarkdownRenderer');
@@ -14,11 +16,15 @@ const LazyMarkdownRenderer = lazy(async () => {
 
 function AnnotationNode({ id, data, selected }: LegacyNodeProps<NodeData>): React.ReactElement {
   const { t } = useTranslation();
+  const { setNodes } = useFlowStore();
   const labelEdit = useInlineNodeTextEdit(id, 'label', data.label || '');
   const subLabelEdit = useInlineNodeTextEdit(id, 'subLabel', data.subLabel || '', {
     multiline: true,
     allowTabCreateSibling: false,
   });
+  const annotationTheme = resolveAnnotationTheme(data.color);
+  const lineCount = (data.subLabel || '').split('\n').length;
+  const contentMinHeight = Math.max(100, 84 + lineCount * 18);
   const subLabelContent = data.subLabel || t('annotationNode.placeholder');
   const renderedSubLabel = hasMarkdownSyntax(subLabelContent)
     ? (
@@ -29,6 +35,7 @@ function AnnotationNode({ id, data, selected }: LegacyNodeProps<NodeData>): Reac
     : <span className="whitespace-pre-wrap break-words">{subLabelContent}</span>;
   return (
     <NodeChrome
+      nodeId={id}
       selected={Boolean(selected)}
       minWidth={150}
       minHeight={100}
@@ -37,13 +44,31 @@ function AnnotationNode({ id, data, selected }: LegacyNodeProps<NodeData>): Reac
     >
       <div
         className={`
-          relative group flex flex-col h-full shadow-md flow-lod-shadow rounded-br-3xl rounded-tl-sm rounded-tr-sm rounded-bl-sm border border-yellow-300 transition-all duration-200
-          bg-yellow-100/90
+          relative group flex flex-col shadow-md flow-lod-shadow rounded-br-3xl rounded-tl-sm rounded-tr-sm rounded-bl-sm border transition-all duration-200
+          ${annotationTheme.container}
           ${selected ? 'z-10' : 'hover:shadow-lg'}
         `}
-        style={{ minWidth: 200, width: '100%', height: '100%' }}
+        style={{ minWidth: 200, width: '100%', minHeight: contentMinHeight }}
       >
-        <div className="p-4 flex flex-col h-full">
+        {selected ? (
+          <div className="absolute -top-4 left-1/2 z-20 flex -translate-x-1/2 items-center gap-1 rounded-full border border-slate-200 bg-white px-2 py-1 shadow-sm">
+            {ANNOTATION_COLOR_OPTIONS.map((option) => (
+              <button
+                key={option.id}
+                type="button"
+                aria-label={`Set annotation color ${option.label}`}
+                className={`h-3.5 w-3.5 rounded-full border transition-transform hover:scale-110 ${option.dot} ${data.color === option.id ? 'ring-2 ring-slate-400/70' : 'border-white/70'}`}
+                onClick={(event) => {
+                  event.stopPropagation();
+                  setNodes((nodes) => nodes.map((node) => (
+                    node.id === id ? { ...node, data: { ...node.data, color: option.id } } : node
+                  )));
+                }}
+              />
+            ))}
+          </div>
+        ) : null}
+        <div className="p-4 flex flex-col">
             {data.label && (
                 <InlineTextEditSurface
                     isEditing={labelEdit.isEditing}
@@ -53,8 +78,8 @@ function AnnotationNode({ id, data, selected }: LegacyNodeProps<NodeData>): Reac
                     onDraftChange={labelEdit.setDraft}
                     onCommit={labelEdit.commit}
                     onKeyDown={labelEdit.handleKeyDown}
-                    className="text-sm font-bold text-yellow-900 border-b border-yellow-200 pb-2 mb-2"
-                    inputClassName="text-yellow-900"
+                    className={`mb-2 border-b pb-2 text-sm font-bold ${annotationTheme.title}`}
+                    inputClassName={annotationTheme.title.split(' ')[0]}
                     isSelected={Boolean(selected)}
                 />
             )}
@@ -66,15 +91,15 @@ function AnnotationNode({ id, data, selected }: LegacyNodeProps<NodeData>): Reac
                 onDraftChange={subLabelEdit.setDraft}
                 onCommit={subLabelEdit.commit}
                 onKeyDown={subLabelEdit.handleKeyDown}
-                className="text-xs text-yellow-800 font-medium leading-relaxed markdown-content flex-1 overflow-hidden flow-lod-secondary"
-                inputClassName="text-yellow-800"
+                className={`text-xs font-medium leading-relaxed markdown-content flow-lod-secondary ${annotationTheme.body}`}
+                inputClassName={annotationTheme.body}
                 inputMode="multiline"
                 isSelected={Boolean(selected)}
             />
         </div>
 
         {/* Decorative corner fold */}
-        <div className="absolute bottom-0 right-0 w-8 h-8 bg-yellow-200/50 rounded-tl-xl border-t border-l border-yellow-300/30"></div>
+        <div className={`absolute bottom-0 right-0 h-8 w-8 rounded-tl-xl border-l border-t ${annotationTheme.fold}`}></div>
       </div>
     </NodeChrome>
   );
diff --git a/src/components/CommandBar.tsx b/src/components/CommandBar.tsx
index bfc091b..83e0662 100644
--- a/src/components/CommandBar.tsx
+++ b/src/components/CommandBar.tsx
@@ -4,6 +4,11 @@ import { CommandBarProps, CommandView } from './command-bar/types';
 import { RootView } from './command-bar/RootView';
 import { useCommandBarCommands } from './command-bar/useCommandBarCommands';
 
+const LazyImportView = lazy(async () => {
+    const module = await import('./command-bar/ImportView');
+    return { default: module.ImportView };
+});
+
 const LazyTemplatesView = lazy(async () => {
     const module = await import('./command-bar/TemplatesView');
     return { default: module.TemplatesView };
@@ -49,7 +54,7 @@ function OpenCommandBarContent({
     onLayout,
     onSelectTemplate,
     onOpenStudioAI,
-    onOpenStudioFlowMind,
+    onOpenStudioOpenFlow,
     onOpenStudioMermaid,
     initialView = 'root',
     onAddAnnotation,
@@ -58,10 +63,17 @@ function OpenCommandBarContent({
     onAddJourney,
     onAddMindmap,
     onAddArchitecture,
+    onAddSequence,
+    onAddClassNode,
+    onAddEntityNode,
     onAddImage,
     onAddBrowserWireframe,
     onAddMobileWireframe,
     onAddDomainLibraryItem,
+    onCodeAnalysis,
+    onSqlAnalysis,
+    onTerraformAnalysis,
+    onOpenApiAnalysis,
     settings,
 }: OpenCommandBarContentProps): React.ReactElement {
     const [view, setView] = useState<CommandView>(initialView);
@@ -108,13 +120,16 @@ function OpenCommandBarContent({
         }
     }, [view, onClose]);
 
+    const hasImport = Boolean(onCodeAnalysis ?? onSqlAnalysis ?? onTerraformAnalysis ?? onOpenApiAnalysis);
+
     const commands = useCommandBarCommands({
         settings,
         onUndo,
         onRedo,
         onOpenStudioAI,
-        onOpenStudioFlowMind,
+        onOpenStudioOpenFlow,
         onOpenStudioMermaid,
+        hasImport,
     });
 
     return (
@@ -130,9 +145,13 @@ function OpenCommandBarContent({
                 role="dialog"
                 aria-modal="true"
                 aria-label="Command bar"
-                className="pointer-events-auto flex h-[500px] w-[640px] flex-col overflow-hidden rounded-[var(--radius-lg)] border border-white/50 bg-white/96 shadow-[0_28px_80px_rgba(15,23,42,0.16)] ring-1 ring-black/5 backdrop-blur-2xl animate-in slide-in-from-bottom-4 duration-200"
+                aria-describedby="command-bar-description"
+                className="pointer-events-auto flex h-[500px] w-[640px] flex-col overflow-hidden rounded-[var(--radius-md)] border border-white/50 bg-white/96 shadow-[var(--shadow-overlay)] ring-1 ring-black/5 backdrop-blur-2xl animate-in slide-in-from-bottom-4 duration-200"
                 onClick={(e) => e.stopPropagation()}
             >
+                <p id="command-bar-description" className="sr-only">
+                    Search quick actions, templates, layout tools, and editor commands.
+                </p>
                 {view === 'root' && (
                     <RootView
                         commands={commands}
@@ -191,6 +210,9 @@ function OpenCommandBarContent({
                             onAddJourney={() => onAddJourney?.()}
                             onAddMindmap={() => onAddMindmap?.()}
                             onAddArchitecture={() => onAddArchitecture?.()}
+                            onAddSequence={() => onAddSequence?.()}
+                            onAddClassNode={() => onAddClassNode?.()}
+                            onAddEntityNode={() => onAddEntityNode?.()}
                             onAddImage={(imageUrl) => onAddImage?.(imageUrl)}
                             onAddBrowserWireframe={() => onAddBrowserWireframe?.()}
                             onAddMobileWireframe={() => onAddMobileWireframe?.()}
@@ -214,6 +236,18 @@ function OpenCommandBarContent({
                         />
                     </Suspense>
                 )}
+                {view === 'import' && (
+                    <Suspense fallback={null}>
+                        <LazyImportView
+                            onClose={onClose}
+                            handleBack={handleBack}
+                            onCodeAnalysis={onCodeAnalysis}
+                            onSqlAnalysis={onSqlAnalysis}
+                            onTerraformAnalysis={onTerraformAnalysis}
+                            onOpenApiAnalysis={onOpenApiAnalysis}
+                        />
+                    </Suspense>
+                )}
                 {/* Footer (only show on root?) */}
                 {view === 'root' && (
                     <div className="flex items-center justify-between border-t border-slate-200/60 bg-slate-50/70 px-4 py-2.5 text-[11px] font-medium text-slate-500">
diff --git a/src/components/ConnectMenu.test.tsx b/src/components/ConnectMenu.test.tsx
index 239337b..4f3dcc9 100644
--- a/src/components/ConnectMenu.test.tsx
+++ b/src/components/ConnectMenu.test.tsx
@@ -78,7 +78,7 @@ describe('ConnectMenu', () => {
 
     fireEvent.click(screen.getByText('Topic'));
 
-    expect(onSelect).toHaveBeenCalledWith('mindmap', undefined);
+    expect(onSelect).toHaveBeenCalledWith('mindmap', undefined, undefined);
   });
 
   it('shows provider suggestions for asset nodes instead of generic shapes', async () => {
@@ -96,4 +96,43 @@ describe('ConnectMenu', () => {
     expect(await screen.findByRole('button', { name: /Analytics Glue/i })).toBeTruthy();
     expect(screen.queryByText('connectMenu.process')).toBeNull();
   });
+
+  it('surfaces contextual class creation first for class connectors', () => {
+    const onSelect = vi.fn();
+    render(
+      <ConnectMenu
+        position={{ x: 100, y: 100 }}
+        sourceId="class-1"
+        sourceType="class"
+        onSelect={onSelect}
+        onSelectAsset={vi.fn()}
+        onClose={vi.fn()}
+      />
+    );
+
+    fireEvent.click(screen.getByText('Class Node'));
+
+    expect(onSelect).toHaveBeenCalledWith('class', undefined, undefined);
+  });
+
+  it('passes yes-branch edge metadata for decision sources', () => {
+    const onSelect = vi.fn();
+    render(
+      <ConnectMenu
+        position={{ x: 100, y: 100 }}
+        sourceId="decision-1"
+        sourceType="decision"
+        onSelect={onSelect}
+        onSelectAsset={vi.fn()}
+        onClose={vi.fn()}
+      />
+    );
+
+    fireEvent.click(screen.getByText('Yes Branch'));
+
+    expect(onSelect).toHaveBeenCalledWith('process', undefined, {
+      label: 'Yes',
+      data: { condition: 'yes' },
+    });
+  });
 });
diff --git a/src/components/ConnectMenu.tsx b/src/components/ConnectMenu.tsx
index c4c0832..76ac8ba 100644
--- a/src/components/ConnectMenu.tsx
+++ b/src/components/ConnectMenu.tsx
@@ -8,16 +8,93 @@ import { loadProviderCatalogSuggestions, loadProviderShapePreview } from '@/serv
 import { Tooltip } from './Tooltip';
 import { loadIconAssetSuggestions } from '@/services/iconAssetCatalog';
 import { NamedIcon } from './IconMap';
+import type { ConnectedEdgePreset } from '@/hooks/edge-operations/utils';
 
 interface ConnectMenuProps {
     position: { x: number; y: number };
     sourceId: string;
     sourceType?: string | null;
-    onSelect: (type: string, shape?: string) => void;
+    onSelect: (type: string, shape?: string, edgePreset?: ConnectedEdgePreset) => void;
     onSelectAsset: (item: DomainLibraryItem) => void;
     onClose: () => void;
 }
 
+interface ConnectMenuOption {
+    type: string;
+    shape?: string;
+    edgePreset?: ConnectedEdgePreset;
+    title: string;
+    description: string;
+    toneClassName: string;
+    icon: React.ReactNode;
+}
+
+function getContextualOptions(sourceType?: string | null): ConnectMenuOption[] {
+    switch (sourceType) {
+        case 'class':
+            return [{
+                type: 'class',
+                title: 'Class Node',
+                description: 'Create a connected class',
+                toneClassName: 'bg-sky-50 text-sky-600 border-sky-100',
+                icon: <Settings className="w-4.5 h-4.5" />,
+            }];
+        case 'er_entity':
+            return [{
+                type: 'er_entity',
+                title: 'Entity',
+                description: 'Create a connected entity',
+                toneClassName: 'bg-emerald-50 text-emerald-600 border-emerald-100',
+                icon: <Database className="w-4.5 h-4.5" />,
+            }];
+        case 'architecture':
+            return [{
+                type: 'architecture',
+                title: 'Architecture Node',
+                description: 'Create another architecture service',
+                toneClassName: 'bg-cyan-50 text-cyan-700 border-cyan-100',
+                icon: <Settings className="w-4.5 h-4.5" />,
+            }];
+        case 'journey':
+            return [{
+                type: 'journey',
+                title: 'Journey Step',
+                description: 'Create the next journey step',
+                toneClassName: 'bg-violet-50 text-violet-600 border-violet-100',
+                icon: <WandSparkles className="w-4.5 h-4.5" />,
+            }];
+        case 'annotation':
+            return [{
+                type: 'annotation',
+                title: 'Note',
+                description: 'Create another sticky note',
+                toneClassName: 'bg-yellow-50 text-yellow-600 border-yellow-100',
+                icon: <StickyNote className="w-4.5 h-4.5" />,
+            }];
+        case 'decision':
+            return [
+                {
+                    type: 'process',
+                    edgePreset: { label: 'Yes', data: { condition: 'yes' } },
+                    title: 'Yes Branch',
+                    description: 'Add the success path',
+                    toneClassName: 'bg-emerald-50 text-emerald-600 border-emerald-100',
+                    icon: <Settings className="w-4.5 h-4.5" />,
+                },
+                {
+                    type: 'process',
+                    edgePreset: { label: 'No', data: { condition: 'no' } },
+                    title: 'No Branch',
+                    description: 'Add the alternative path',
+                    toneClassName: 'bg-rose-50 text-rose-600 border-rose-100',
+                    icon: <Settings className="w-4.5 h-4.5" />,
+                },
+            ];
+        default:
+            return [];
+    }
+}
+
 export const ConnectMenu = ({ position, sourceId, sourceType, onSelect, onSelectAsset, onClose }: ConnectMenuProps): React.ReactElement => {
     const { t } = useTranslation();
     const sourceNode = useFlowStore((state) => state.nodes.find((node) => node.id === sourceId));
@@ -113,9 +190,58 @@ export const ConnectMenu = ({ position, sourceId, sourceType, onSelect, onSelect
         }
         return assetProvider.toUpperCase();
     }, [assetProvider]);
+    const contextualOptions = useMemo(() => getContextualOptions(sourceType), [sourceType]);
+    const genericOptions = useMemo<ConnectMenuOption[]>(() => [
+        {
+            type: 'process',
+            title: t('connectMenu.process'),
+            description: t('connectMenu.processDesc'),
+            toneClassName: 'bg-blue-50 text-blue-600 border-blue-100',
+            icon: <Settings className="w-4.5 h-4.5" />,
+        },
+        {
+            type: 'decision',
+            title: t('connectMenu.decision'),
+            description: t('connectMenu.decisionDesc'),
+            toneClassName: 'bg-amber-50 text-amber-600 border-amber-100',
+            icon: <WandSparkles className="w-4.5 h-4.5" />,
+        },
+        {
+            type: 'process',
+            shape: 'cylinder',
+            title: t('connectMenu.database'),
+            description: t('connectMenu.databaseDesc'),
+            toneClassName: 'bg-emerald-50 text-emerald-600 border-emerald-100',
+            icon: <Database className="w-4.5 h-4.5" />,
+        },
+        {
+            type: 'process',
+            shape: 'parallelogram',
+            title: t('connectMenu.inputOutput'),
+            description: t('connectMenu.inputOutputDesc'),
+            toneClassName: 'bg-violet-50 text-violet-600 border-violet-100',
+            icon: <ArrowRightLeft className="w-4.5 h-4.5" />,
+        },
+        {
+            type: 'annotation',
+            title: t('connectMenu.note'),
+            description: t('connectMenu.noteDesc'),
+            toneClassName: 'bg-yellow-50 text-yellow-600 border-yellow-100',
+            icon: <StickyNote className="w-4.5 h-4.5" />,
+        },
+    ], [t]);
+    const menuOptions = useMemo(() => {
+        const contextualKeys = new Set(
+            contextualOptions.map((option) => `${option.type}:${option.shape ?? 'default'}`)
+        );
+        return [
+            ...contextualOptions,
+            ...genericOptions.filter((option) => !contextualKeys.has(`${option.type}:${option.shape ?? 'default'}`)),
+        ];
+    }, [contextualOptions, genericOptions]);
 
-    function handleSelect(type: string, shape?: string): void {
-        onSelect(type, shape);
+    function handleSelect(type: string, shape?: string, edgePreset?: ConnectedEdgePreset): void {
+        onSelect(type, shape, edgePreset);
         onClose();
     }
 
@@ -136,7 +262,7 @@ export const ConnectMenu = ({ position, sourceId, sourceType, onSelect, onSelect
                 aria-label="Close connect menu"
             />
             <div
-                className="fixed z-[70] bg-white/95 backdrop-blur-xl rounded-2xl shadow-2xl border border-slate-200/50 overflow-hidden min-w-[180px] animate-in zoom-in-95 fade-in duration-150 ring-1 ring-black/5"
+                className="fixed z-[70] min-w-[180px] overflow-hidden rounded-2xl border border-slate-200/50 bg-white/95 shadow-[var(--shadow-lg)] ring-1 ring-black/5 backdrop-blur-xl animate-in zoom-in-95 fade-in duration-150"
                 style={{ top: position.y, left: position.x }}
             >
                 <div className="p-1.5 space-y-0.5">
@@ -174,7 +300,7 @@ export const ConnectMenu = ({ position, sourceId, sourceType, onSelect, onSelect
                                             className="flex aspect-square items-center justify-center rounded-xl border border-slate-200 bg-white p-2 transition-all hover:border-slate-300 hover:bg-slate-50"
                                         >
                                             {previewUrls[item.id] ? (
-                                                <img src={previewUrls[item.id]} alt="" className="h-10 w-10 object-contain" />
+                                                <img src={previewUrls[item.id]} alt={`${item.label} icon`} className="h-10 w-10 object-contain" />
                                             ) : item.category === 'icons' ? (
                                                 <NamedIcon name={item.icon} fallbackName="Box" className="w-5 h-5 text-slate-500" />
                                             ) : (
@@ -188,77 +314,28 @@ export const ConnectMenu = ({ position, sourceId, sourceType, onSelect, onSelect
                         </>
                     ) : (
                         <>
-                            <button
-                                onClick={() => handleSelect('process')}
-                                className="flex items-center gap-3 w-full px-3 py-2.5 text-sm text-slate-700 hover:bg-slate-50 active:bg-slate-100 rounded-xl transition-all group"
-                            >
-                                <div className="w-9 h-9 bg-blue-50 text-blue-600 rounded-lg flex items-center justify-center border border-blue-100 group-hover:scale-110 transition-transform">
-                                    <Settings className="w-4.5 h-4.5" />
-                                </div>
-                                <div className="flex flex-col items-start translate-y-[1px]">
-                                    <span className="font-bold text-slate-700 leading-none mb-1">{t('connectMenu.process')}</span>
-                                    <span className="text-[10px] text-slate-400 font-medium">{t('connectMenu.processDesc')}</span>
-                                </div>
-                            </button>
-
-                            <button
-                                onClick={() => handleSelect('decision')}
-                                className="flex items-center gap-3 w-full px-3 py-2.5 text-sm text-slate-700 hover:bg-slate-50 active:bg-slate-100 rounded-xl transition-all group"
-                            >
-                                <div className="w-9 h-9 bg-amber-50 text-amber-600 rounded-lg flex items-center justify-center border border-amber-100 group-hover:scale-110 transition-transform">
-                                    <WandSparkles className="w-4.5 h-4.5" />
-                                </div>
-                                <div className="flex flex-col items-start translate-y-[1px]">
-                                    <span className="font-bold text-slate-700 leading-none mb-1">{t('connectMenu.decision')}</span>
-                                    <span className="text-[10px] text-slate-400 font-medium">{t('connectMenu.decisionDesc')}</span>
-                                </div>
-                            </button>
-
-                            <button
-                                onClick={() => handleSelect('process', 'cylinder')}
-                                className="flex items-center gap-3 w-full px-3 py-2.5 text-sm text-slate-700 hover:bg-slate-50 active:bg-slate-100 rounded-xl transition-all group"
-                            >
-                                <div className="w-9 h-9 bg-emerald-50 text-emerald-600 rounded-lg flex items-center justify-center border border-emerald-100 group-hover:scale-110 transition-transform">
-                                    <Database className="w-4.5 h-4.5" />
-                                </div>
-                                <div className="flex flex-col items-start translate-y-[1px]">
-                                    <span className="font-bold text-slate-700 leading-none mb-1">{t('connectMenu.database')}</span>
-                                    <span className="text-[10px] text-slate-400 font-medium">{t('connectMenu.databaseDesc')}</span>
-                                </div>
-                            </button>
-
-                            <button
-                                onClick={() => handleSelect('process', 'parallelogram')}
-                                className="flex items-center gap-3 w-full px-3 py-2.5 text-sm text-slate-700 hover:bg-slate-50 active:bg-slate-100 rounded-xl transition-all group"
-                            >
-                                <div className="w-9 h-9 bg-violet-50 text-violet-600 rounded-lg flex items-center justify-center border border-violet-100 group-hover:scale-110 transition-transform">
-                                    <ArrowRightLeft className="w-4.5 h-4.5" />
-                                </div>
-                                <div className="flex flex-col items-start translate-y-[1px]">
-                                    <span className="font-bold text-slate-700 leading-none mb-1">{t('connectMenu.inputOutput')}</span>
-                                    <span className="text-[10px] text-slate-400 font-medium">{t('connectMenu.inputOutputDesc')}</span>
-                                </div>
-                            </button>
-
-                            <button
-                                onClick={() => handleSelect('annotation')}
-                                className="flex items-center gap-3 w-full px-3 py-2.5 text-sm text-slate-700 hover:bg-slate-50 active:bg-slate-100 rounded-xl transition-all group"
-                            >
-                                <div className="w-9 h-9 bg-yellow-50 text-yellow-600 rounded-lg flex items-center justify-center border border-yellow-100 group-hover:scale-110 transition-transform">
-                                    <StickyNote className="w-4.5 h-4.5" />
-                                </div>
-                                <div className="flex flex-col items-start translate-y-[1px]">
-                                    <span className="font-bold text-slate-700 leading-none mb-1">{t('connectMenu.note')}</span>
-                                    <span className="text-[10px] text-slate-400 font-medium">{t('connectMenu.noteDesc')}</span>
-                                </div>
-                            </button>
+                            {menuOptions.map((option) => (
+                                <button
+                                    key={`${option.type}:${option.shape ?? 'default'}:${option.title}`}
+                                    onClick={() => handleSelect(option.type, option.shape, option.edgePreset)}
+                                    className="flex items-center gap-3 w-full px-3 py-2.5 text-sm text-slate-700 hover:bg-slate-50 active:bg-slate-100 rounded-xl transition-all group"
+                                >
+                                    <div className={`w-9 h-9 rounded-lg flex items-center justify-center border group-hover:scale-110 transition-transform ${option.toneClassName}`}>
+                                        {option.icon}
+                                    </div>
+                                    <div className="flex flex-col items-start translate-y-[1px]">
+                                        <span className="font-bold text-slate-700 leading-none mb-1">{option.title}</span>
+                                        <span className="text-[10px] text-slate-400 font-medium">{option.description}</span>
+                                    </div>
+                                </button>
+                            ))}
                         </>
                     )}
                 </div>
 
                 <div className="bg-slate-50/80 px-4 py-2 flex items-center justify-between border-t border-slate-100">
                     <span className="text-[9px] text-slate-400 font-bold uppercase tracking-wider">{t('connectMenu.releaseToConnect')}</span>
-                    <button onClick={onClose} className="p-1 hover:bg-slate-200 rounded-full text-slate-400 transition-colors">
+                    <button type="button" onClick={onClose} className="p-1 hover:bg-slate-200 rounded-full text-slate-400 transition-colors" aria-label={t('connectMenu.close', 'Close connect menu')}>
                         <X className="w-3 h-3" />
                     </button>
                 </div>
diff --git a/src/components/ContextMenu.tsx b/src/components/ContextMenu.tsx
index 30592f0..7c7b569 100644
--- a/src/components/ContextMenu.tsx
+++ b/src/components/ContextMenu.tsx
@@ -7,7 +7,6 @@ import {
     SendToBack,
     CopyPlus,
     Replace,
-    X,
     AlignStartVertical,
     AlignCenterVertical,
     AlignEndVertical,
@@ -23,6 +22,7 @@ import { useTranslation } from 'react-i18next';
 export interface ContextMenuProps {
     id: string | null;
     type: 'node' | 'pane' | 'edge' | 'multi';
+    currentNodeType?: string | null;
     position: { x: number; y: number };
     onClose: () => void;
     onCopy?: () => void;
@@ -31,6 +31,7 @@ export interface ContextMenuProps {
     onDelete?: () => void;
     onBringToFront?: () => void;
     onSendToBack?: () => void;
+    onChangeNodeType?: (type: string) => void;
     canPaste?: boolean;
     // Multi-select
     selectedCount?: number;
@@ -40,8 +41,8 @@ export interface ContextMenuProps {
 }
 
 export const ContextMenu: React.FC<ContextMenuProps> = ({
-    id,
     type,
+    currentNodeType,
     position,
     onClose,
     onCopy,
@@ -50,6 +51,7 @@ export const ContextMenu: React.FC<ContextMenuProps> = ({
     onDelete,
     onBringToFront,
     onSendToBack,
+    onChangeNodeType,
     canPaste,
     selectedCount = 0,
     onAlignNodes,
@@ -58,6 +60,15 @@ export const ContextMenu: React.FC<ContextMenuProps> = ({
 }) => {
     const { t } = useTranslation();
     const menuRef = useRef<HTMLDivElement>(null);
+    const nodeTypeOptions = [
+        { id: 'process', label: 'Process' },
+        { id: 'decision', label: 'Decision' },
+        { id: 'annotation', label: 'Note' },
+        { id: 'journey', label: 'Journey' },
+        { id: 'architecture', label: 'Architecture' },
+        { id: 'class', label: 'Class' },
+        { id: 'er_entity', label: 'Entity' },
+    ];
 
     useEffect(() => {
         const handleClickOutside = (event: MouseEvent) => {
@@ -73,29 +84,52 @@ export const ContextMenu: React.FC<ContextMenuProps> = ({
         <div
             ref={menuRef}
             style={{ top: position.y, left: position.x }}
-            className="absolute z-50 bg-white rounded-lg shadow-xl border border-slate-100 p-1.5 min-w-[200px] flex flex-col gap-0.5 animate-in fade-in zoom-in-95 duration-100"
+            className="absolute z-50 flex min-w-[200px] flex-col gap-0.5 rounded-[var(--radius-lg)] border border-slate-100 bg-white p-1.5 shadow-[var(--shadow-md)] animate-in fade-in zoom-in-95 duration-100"
         >
             {type === 'node' && (
                 <>
-                    <button onClick={onCopy} className="flex items-center gap-2 px-3 py-2 text-sm text-slate-600 hover:bg-slate-50 hover:text-slate-900 rounded-md transition-colors w-full text-left">
+                    <button onClick={onCopy} className="flex w-full items-center gap-2 rounded-[var(--radius-sm)] px-3 py-2 text-left text-sm text-slate-600 transition-colors hover:bg-slate-50 hover:text-slate-900">
                         <Copy className="w-4 h-4" /> {t('common.copy')}
                     </button>
-                    <button onClick={onDuplicate} className="flex items-center gap-2 px-3 py-2 text-sm text-slate-600 hover:bg-slate-50 hover:text-slate-900 rounded-md transition-colors w-full text-left">
+                    <button onClick={onDuplicate} className="flex w-full items-center gap-2 rounded-[var(--radius-sm)] px-3 py-2 text-left text-sm text-slate-600 transition-colors hover:bg-slate-50 hover:text-slate-900">
                         <CopyPlus className="w-4 h-4" /> {t('common.duplicate')}
                     </button>
 
+                    {onChangeNodeType ? (
+                        <>
+                            <div className="h-px bg-slate-100 my-1" />
+                            <div className="px-3 py-1 text-[10px] font-semibold text-slate-400 uppercase">Switch type</div>
+                            <div className="grid grid-cols-2 gap-1 px-2 pb-1">
+                                {nodeTypeOptions.map((option) => (
+                                    <button
+                                        key={option.id}
+                                        type="button"
+                                        onClick={() => onChangeNodeType(option.id)}
+                                        className={`rounded-[var(--radius-xs)] px-2 py-1.5 text-xs font-medium transition-colors ${
+                                            currentNodeType === option.id
+                                                ? 'bg-sky-50 text-sky-700'
+                                                : 'bg-slate-50 text-slate-600 hover:bg-slate-100 hover:text-slate-800'
+                                        }`}
+                                    >
+                                        {option.label}
+                                    </button>
+                                ))}
+                            </div>
+                        </>
+                    ) : null}
+
                     <div className="h-px bg-slate-100 my-1" />
 
-                    <button onClick={onBringToFront} className="flex items-center gap-2 px-3 py-2 text-sm text-slate-600 hover:bg-slate-50 hover:text-slate-900 rounded-md transition-colors w-full text-left">
+                    <button onClick={onBringToFront} className="flex w-full items-center gap-2 rounded-[var(--radius-sm)] px-3 py-2 text-left text-sm text-slate-600 transition-colors hover:bg-slate-50 hover:text-slate-900">
                         <BringToFront className="w-4 h-4" /> {t('common.bringToFront')}
                     </button>
-                    <button onClick={onSendToBack} className="flex items-center gap-2 px-3 py-2 text-sm text-slate-600 hover:bg-slate-50 hover:text-slate-900 rounded-md transition-colors w-full text-left">
+                    <button onClick={onSendToBack} className="flex w-full items-center gap-2 rounded-[var(--radius-sm)] px-3 py-2 text-left text-sm text-slate-600 transition-colors hover:bg-slate-50 hover:text-slate-900">
                         <SendToBack className="w-4 h-4" /> {t('common.sendToBack')}
                     </button>
 
                     <div className="h-px bg-slate-100 my-1" />
 
-                    <button onClick={onDelete} className="flex items-center gap-2 px-3 py-2 text-sm text-red-600 hover:bg-red-50 rounded-md transition-colors w-full text-left">
+                    <button onClick={onDelete} className="flex w-full items-center gap-2 rounded-[var(--radius-sm)] px-3 py-2 text-left text-sm text-red-600 transition-colors hover:bg-red-50">
                         <Trash2 className="w-4 h-4" /> {t('common.delete')}
                     </button>
                 </>
@@ -106,7 +140,7 @@ export const ContextMenu: React.FC<ContextMenuProps> = ({
                     <button
                         onClick={onPaste}
                         disabled={!canPaste}
-                        className={`flex items-center gap-2 px-3 py-2 text-sm rounded-md transition-colors w-full text-left ${!canPaste ? 'text-slate-300 cursor-not-allowed' : 'text-slate-600 hover:bg-slate-50 hover:text-slate-900'}`}
+                        className={`flex w-full items-center gap-2 rounded-[var(--radius-sm)] px-3 py-2 text-left text-sm transition-colors ${!canPaste ? 'cursor-not-allowed text-slate-300' : 'text-slate-600 hover:bg-slate-50 hover:text-slate-900'}`}
                     >
                         <ClipboardPaste className="w-4 h-4" /> {t('common.paste')}
                     </button>
@@ -115,11 +149,11 @@ export const ContextMenu: React.FC<ContextMenuProps> = ({
 
             {type === 'edge' && (
                 <>
-                    <button onClick={onDuplicate} className="flex items-center gap-2 px-3 py-2 text-sm text-slate-600 hover:bg-slate-50 hover:text-slate-900 rounded-md transition-colors w-full text-left">
+                    <button onClick={onDuplicate} className="flex w-full items-center gap-2 rounded-[var(--radius-sm)] px-3 py-2 text-left text-sm text-slate-600 transition-colors hover:bg-slate-50 hover:text-slate-900">
                         <Replace className="w-4 h-4" /> {t('common.reverseDirection')}
                     </button>
                     <div className="h-px bg-slate-100 my-1" />
-                    <button onClick={onDelete} className="flex items-center gap-2 px-3 py-2 text-sm text-red-600 hover:bg-red-50 rounded-md transition-colors w-full text-left">
+                    <button onClick={onDelete} className="flex w-full items-center gap-2 rounded-[var(--radius-sm)] px-3 py-2 text-left text-sm text-red-600 transition-colors hover:bg-red-50">
                         <Trash2 className="w-4 h-4" /> {t('common.deleteConnection')}
                     </button>
                 </>
@@ -136,22 +170,22 @@ export const ContextMenu: React.FC<ContextMenuProps> = ({
                         <>
                             <div className="px-3 py-1 text-[10px] font-semibold text-slate-400 uppercase">{t('common.align')}</div>
                             <div className="grid grid-cols-3 gap-0.5 px-2 pb-1">
-                                <button onClick={() => onAlignNodes('left')} className="flex items-center justify-center p-1.5 hover:bg-slate-50 rounded text-slate-500 hover:text-slate-700" title={t('common.alignLeft')}>
+                                <button onClick={() => onAlignNodes('left')} className="flex items-center justify-center rounded-[var(--radius-xs)] p-1.5 text-slate-500 hover:bg-slate-50 hover:text-slate-700" title={t('common.alignLeft')}>
                                     <AlignStartVertical className="w-3.5 h-3.5" />
                                 </button>
-                                <button onClick={() => onAlignNodes('center')} className="flex items-center justify-center p-1.5 hover:bg-slate-50 rounded text-slate-500 hover:text-slate-700" title={t('common.alignCenter')}>
+                                <button onClick={() => onAlignNodes('center')} className="flex items-center justify-center rounded-[var(--radius-xs)] p-1.5 text-slate-500 hover:bg-slate-50 hover:text-slate-700" title={t('common.alignCenter')}>
                                     <AlignCenterVertical className="w-3.5 h-3.5" />
                                 </button>
-                                <button onClick={() => onAlignNodes('right')} className="flex items-center justify-center p-1.5 hover:bg-slate-50 rounded text-slate-500 hover:text-slate-700" title={t('common.alignRight')}>
+                                <button onClick={() => onAlignNodes('right')} className="flex items-center justify-center rounded-[var(--radius-xs)] p-1.5 text-slate-500 hover:bg-slate-50 hover:text-slate-700" title={t('common.alignRight')}>
                                     <AlignEndVertical className="w-3.5 h-3.5" />
                                 </button>
-                                <button onClick={() => onAlignNodes('top')} className="flex items-center justify-center p-1.5 hover:bg-slate-50 rounded text-slate-500 hover:text-slate-700" title={t('common.alignTop')}>
+                                <button onClick={() => onAlignNodes('top')} className="flex items-center justify-center rounded-[var(--radius-xs)] p-1.5 text-slate-500 hover:bg-slate-50 hover:text-slate-700" title={t('common.alignTop')}>
                                     <AlignStartHorizontal className="w-3.5 h-3.5" />
                                 </button>
-                                <button onClick={() => onAlignNodes('middle')} className="flex items-center justify-center p-1.5 hover:bg-slate-50 rounded text-slate-500 hover:text-slate-700" title={t('common.alignMiddle')}>
+                                <button onClick={() => onAlignNodes('middle')} className="flex items-center justify-center rounded-[var(--radius-xs)] p-1.5 text-slate-500 hover:bg-slate-50 hover:text-slate-700" title={t('common.alignMiddle')}>
                                     <AlignCenterHorizontal className="w-3.5 h-3.5" />
                                 </button>
-                                <button onClick={() => onAlignNodes('bottom')} className="flex items-center justify-center p-1.5 hover:bg-slate-50 rounded text-slate-500 hover:text-slate-700" title={t('common.alignBottom')}>
+                                <button onClick={() => onAlignNodes('bottom')} className="flex items-center justify-center rounded-[var(--radius-xs)] p-1.5 text-slate-500 hover:bg-slate-50 hover:text-slate-700" title={t('common.alignBottom')}>
                                     <AlignEndHorizontal className="w-3.5 h-3.5" />
                                 </button>
                             </div>
@@ -163,10 +197,10 @@ export const ContextMenu: React.FC<ContextMenuProps> = ({
                         <>
                             <div className="h-px bg-slate-100 my-0.5" />
                             <div className="px-3 py-1 text-[10px] font-semibold text-slate-400 uppercase">{t('common.distribute')}</div>
-                            <button onClick={() => onDistributeNodes('horizontal')} className="flex items-center gap-2 px-3 py-1.5 text-sm text-slate-600 hover:bg-slate-50 hover:text-slate-900 rounded-md transition-colors w-full text-left">
+                            <button onClick={() => onDistributeNodes('horizontal')} className="flex w-full items-center gap-2 rounded-[var(--radius-sm)] px-3 py-1.5 text-left text-sm text-slate-600 transition-colors hover:bg-slate-50 hover:text-slate-900">
                                 <ArrowRightFromLine className="w-4 h-4" /> {t('common.distributeHorizontally')}
                             </button>
-                            <button onClick={() => onDistributeNodes('vertical')} className="flex items-center gap-2 px-3 py-1.5 text-sm text-slate-600 hover:bg-slate-50 hover:text-slate-900 rounded-md transition-colors w-full text-left">
+                            <button onClick={() => onDistributeNodes('vertical')} className="flex w-full items-center gap-2 rounded-[var(--radius-sm)] px-3 py-1.5 text-left text-sm text-slate-600 transition-colors hover:bg-slate-50 hover:text-slate-900">
                                 <ArrowDownFromLine className="w-4 h-4" /> {t('common.distributeVertically')}
                             </button>
                         </>
@@ -176,14 +210,14 @@ export const ContextMenu: React.FC<ContextMenuProps> = ({
                     {onGroupSelected && (
                         <>
                             <div className="h-px bg-slate-100 my-0.5" />
-                            <button onClick={onGroupSelected} className="flex items-center gap-2 px-3 py-2 text-sm text-indigo-600 hover:bg-indigo-50 rounded-md transition-colors w-full text-left">
+                            <button onClick={onGroupSelected} className="flex w-full items-center gap-2 rounded-[var(--radius-sm)] px-3 py-2 text-left text-sm text-indigo-600 transition-colors hover:bg-indigo-50">
                                 <Group className="w-4 h-4" /> {t('common.group')}
                             </button>
                         </>
                     )}
 
                     <div className="h-px bg-slate-100 my-0.5" />
-                    <button onClick={onDelete} className="flex items-center gap-2 px-3 py-2 text-sm text-red-600 hover:bg-red-50 rounded-md transition-colors w-full text-left">
+                    <button onClick={onDelete} className="flex w-full items-center gap-2 rounded-[var(--radius-sm)] px-3 py-2 text-left text-sm text-red-600 transition-colors hover:bg-red-50">
                         <Trash2 className="w-4 h-4" /> {t('common.delete')} ({selectedCount})
                     </button>
                 </>
diff --git a/src/components/CustomConnectionLine.tsx b/src/components/CustomConnectionLine.tsx
index ddda96d..38ae2e1 100644
--- a/src/components/CustomConnectionLine.tsx
+++ b/src/components/CustomConnectionLine.tsx
@@ -1,10 +1,10 @@
-import React, { useMemo } from 'react';
+import React from 'react';
 import { ConnectionLineComponentProps, getBezierPath, useNodes } from '@/lib/reactflowCompat';
-import { Settings } from 'lucide-react';
-import { ROLLOUT_FLAGS } from '@/config/rolloutFlags';
 import { NODE_WIDTH, NODE_HEIGHT } from '../constants';
 import type { FlowNode } from '@/lib/types';
 
+const SNAP_PADDING = 56;
+
 const CustomConnectionLine = ({
     fromX,
     fromY,
@@ -14,28 +14,20 @@ const CustomConnectionLine = ({
     toPosition,
 }: ConnectionLineComponentProps) => {
     const nodes = useNodes<FlowNode>();
-    const visualQualityV2Enabled = ROLLOUT_FLAGS.visualQualityV2;
-
-    const isNearNode = useMemo(() => {
-        return nodes.some(node => {
-            const nX = node.position.x;
-            const nY = node.position.y;
-            const w = node.width || node.data?.width || NODE_WIDTH;
-            const h = node.height || node.data?.height || NODE_HEIGHT;
-
-            const hPoints = [
-                { x: nX + w / 2, y: nY }, // Top
-                { x: nX + w / 2, y: nY + h }, // Bottom
-                { x: nX, y: nY + h / 2 }, // Left
-                { x: nX + w, y: nY + h / 2 }, // Right
-            ];
 
-            return hPoints.some(hp => {
-                const dist = Math.sqrt((hp.x - toX) ** 2 + (hp.y - toY) ** 2);
-                return dist < 45; // Slightly larger for better feel
-            });
-        });
-    }, [nodes, toX, toY]);
+    let snapTarget: { nX: number; nY: number; w: number; h: number } | null = null;
+    for (const node of nodes) {
+        const nX = node.position.x;
+        const nY = node.position.y;
+        const w = node.width || node.data?.width || NODE_WIDTH;
+        const h = node.height || node.data?.height || NODE_HEIGHT;
+        const inside =
+            toX >= nX - SNAP_PADDING &&
+            toX <= nX + w + SNAP_PADDING &&
+            toY >= nY - SNAP_PADDING &&
+            toY <= nY + h + SNAP_PADDING;
+        if (inside) { snapTarget = { nX, nY, w, h }; break; }
+    }
 
     const [edgePath] = getBezierPath({
         sourceX: fromX,
@@ -50,45 +42,36 @@ const CustomConnectionLine = ({
         <g>
             <path
                 fill="none"
-                stroke="#6366f1"
-                strokeWidth={visualQualityV2Enabled ? 2.25 : 2}
-                strokeDasharray={visualQualityV2Enabled ? undefined : '5,5'}
-                className={visualQualityV2Enabled ? '' : 'animate-pulse'}
-                style={visualQualityV2Enabled ? { filter: 'drop-shadow(0 1px 2px rgba(0,0,0,0.15))' } : undefined}
+                stroke="var(--brand-primary, #6366f1)"
+                strokeWidth={2}
+                style={{ filter: 'drop-shadow(0 1px 3px rgba(99,102,241,0.25))' }}
                 d={edgePath}
             />
 
-            {/* Ghost Node Preview - Hide when near existing node */}
-            {!isNearNode && (
-                <foreignObject
-                    x={toX - NODE_WIDTH / 2}
-                    y={toY - NODE_HEIGHT / 2}
-                    width={NODE_WIDTH}
-                    height={NODE_HEIGHT}
-                    className="pointer-events-none"
-                >
-                    <div className="w-full h-full bg-indigo-50/20 backdrop-blur-[1px] border-2 border-indigo-200/40 border-dashed rounded-xl flex flex-col justify-center p-4 ring-2 ring-indigo-500/10 transition-all">
-                        <div className="flex items-center gap-3 opacity-40">
-                            <div className="shrink-0 w-10 h-10 rounded-lg flex items-center justify-center bg-indigo-100/50 border border-indigo-200/50">
-                                <Settings className="w-5 h-5 text-indigo-400" />
-                            </div>
-                            <div className="flex flex-col gap-1.5 flex-1">
-                                <div className="h-3 w-2/3 bg-indigo-200/50 rounded-full" />
-                                <div className="h-2 w-1/2 bg-indigo-100/50 rounded-full" />
-                            </div>
-                        </div>
-                        <div className="mt-4 h-16 w-full bg-slate-50/20 rounded-lg border border-slate-200/20 border-dashed" />
-                    </div>
-                </foreignObject>
+            {/* Snap ring — lights up the target node on approach */}
+            {snapTarget && (
+                <rect
+                    x={snapTarget.nX - 3}
+                    y={snapTarget.nY - 3}
+                    width={snapTarget.w + 6}
+                    height={snapTarget.h + 6}
+                    rx={9}
+                    ry={9}
+                    fill="none"
+                    stroke="var(--brand-primary, #6366f1)"
+                    strokeWidth={2.5}
+                    opacity={0.65}
+                    pointerEvents="none"
+                />
             )}
 
+            {/* Endpoint dot — grows on snap */}
             <circle
                 cx={toX}
                 cy={toY}
-                fill="#fff"
-                r={visualQualityV2Enabled ? 5 : 4}
-                stroke="#6366f1"
-                strokeWidth={2}
+                r={snapTarget ? 6 : 4}
+                fill="var(--brand-primary, #6366f1)"
+                opacity={snapTarget ? 1 : 0.6}
             />
         </g>
     );
diff --git a/src/components/CustomEdge.tsx b/src/components/CustomEdge.tsx
index 50b1435..b2744ec 100644
--- a/src/components/CustomEdge.tsx
+++ b/src/components/CustomEdge.tsx
@@ -4,12 +4,14 @@ import { ROLLOUT_FLAGS } from '@/config/rolloutFlags';
 import type { LegacyEdgeProps } from '@/lib/reactflowCompat';
 import type { EdgeData } from '@/lib/types';
 import type { FlowEdge } from '@/lib/types';
+import { useCinematicExportState } from '@/context/CinematicExportContext';
 import { CustomEdgeWrapper } from './custom-edge/CustomEdgeWrapper';
 import { buildEdgePath } from './custom-edge/pathUtils';
 import { shouldUseOrthogonalRelationRouting } from './custom-edge/relationRoutingSemantics';
 
 function createEdgeRenderer(variant: 'bezier' | 'smoothstep' | 'step' | 'straight') {
     return function RenderEdge(props: LegacyEdgeProps<EdgeData>): React.ReactElement {
+        const cinematicExportState = useCinematicExportState();
         const { getEdges, getNodes } = useReactFlow();
         const allEdges = getEdges() as FlowEdge[];
         const allNodes = getNodes();
@@ -69,6 +71,7 @@ function createEdgeRenderer(variant: 'bezier' | 'smoothstep' | 'step' | 'straigh
                 markerStartConfig={currentEdge?.markerStart as FlowEdge['markerStart']}
                 selected={props.selected}
                 edgeAnimated={Boolean(currentEdge?.animated)}
+                cinematicExportState={cinematicExportState}
             />
         );
     };
diff --git a/src/components/CustomNode.tsx b/src/components/CustomNode.tsx
index 5297da1..4822995 100644
--- a/src/components/CustomNode.tsx
+++ b/src/components/CustomNode.tsx
@@ -1,13 +1,14 @@
 import React, { memo, useEffect, useState } from 'react';
 import type { LegacyNodeProps } from '@/lib/reactflowCompat';
 import type { NodeData } from '@/lib/types';
+import { useArchitectureLint } from '@/context/ArchitectureLintContext';
+import { useDiagramDiff } from '@/context/DiagramDiffContext';
 
 import { NamedIcon } from './IconMap';
 import MemoizedMarkdown from './MemoizedMarkdown';
 import { resolveNodeVisualStyle } from '../theme';
 import { useDesignSystem } from '../hooks/useDesignSystem';
 import { useInlineNodeTextEdit } from '@/hooks/useInlineNodeTextEdit';
-import { ROLLOUT_FLAGS } from '@/config/rolloutFlags';
 import { getTransformDiagnosticsAttrs } from './transformDiagnostics';
 import { InlineTextEditSurface } from './InlineTextEditSurface';
 import { NodeChrome } from './NodeChrome';
@@ -51,18 +52,23 @@ function toCssSize(value: number | string | undefined): string | undefined {
 }
 
 /** Lightweight Shift-key watcher — mounts only while a node is selected. */
-function ShiftKeyResizeWatcher({ onShiftChange }: { onShiftChange: (held: boolean) => void }): null {
+function useShiftHeld(selected: boolean): boolean {
+  const [shiftHeld, setShiftHeld] = useState(false);
+
   useEffect(() => {
-    const down = (e: KeyboardEvent) => { if (e.key === 'Shift') onShiftChange(true); };
-    const up = (e: KeyboardEvent) => { if (e.key === 'Shift') onShiftChange(false); };
+    if (!selected) return;
+
+    const down = (e: KeyboardEvent) => { if (e.key === 'Shift') setShiftHeld(true); };
+    const up = (e: KeyboardEvent) => { if (e.key === 'Shift') setShiftHeld(false); };
     window.addEventListener('keydown', down);
     window.addEventListener('keyup', up);
     return () => {
       window.removeEventListener('keydown', down);
       window.removeEventListener('keyup', up);
     };
-  }, [onShiftChange]);
-  return null;
+  }, [selected]);
+
+  return selected ? shiftHeld : false;
 }
 
 interface NodeShapeSVGProps {
@@ -99,8 +105,8 @@ function NodeShapeSVG({ shape, fill, stroke, strokeWidth }: NodeShapeSVGProps):
 }
 
 interface IconAssetNodeBodyProps {
+  nodeId: string;
   selected: boolean;
-  setShiftHeld: (held: boolean) => void;
   connectionHandleClass: string;
   explicitWidth: number | string | undefined;
   nodeHeightPx: number | undefined;
@@ -121,8 +127,8 @@ interface IconAssetNodeBodyProps {
 
 /** Renders the compact icon-first presentation used for architecture asset nodes. */
 function IconAssetNodeBody({
+  nodeId,
   selected,
-  setShiftHeld,
   connectionHandleClass,
   explicitWidth,
   nodeHeightPx,
@@ -139,9 +145,9 @@ function IconAssetNodeBody({
 
   return (
     <>
-      {selected && <ShiftKeyResizeWatcher onShiftChange={setShiftHeld} />}
       <NodeTransformControls isVisible={selected} minWidth={96} minHeight={96} keepAspectRatio={false} />
       <NodeChrome
+        nodeId={nodeId}
         selected={selected}
         minWidth={96}
         minHeight={hasLabel ? 108 : 88}
@@ -198,13 +204,47 @@ function IconAssetNodeBody({
   );
 }
 
+function DiffBadge({ nodeId }: { nodeId: string }): React.ReactElement | null {
+  const { isActive, addedNodeIds, changedNodeIds } = useDiagramDiff();
+  if (!isActive) return null;
+  const isAdded = addedNodeIds.has(nodeId);
+  const isChanged = !isAdded && changedNodeIds.has(nodeId);
+  if (!isAdded && !isChanged) return null;
+  return (
+    <div
+      className="absolute -top-2 -left-2 z-20 h-4 w-4 rounded-full shadow-md pointer-events-none"
+      style={{ backgroundColor: isAdded ? '#22c55e' : '#f59e0b' }}
+      title={isAdded ? 'Added in current version' : 'Changed since snapshot'}
+    />
+  );
+}
+
+function LintViolationBadge({ nodeId }: { nodeId: string }): React.ReactElement | null {
+  const { violations, violatingNodeIds } = useArchitectureLint();
+  if (!violatingNodeIds.has(nodeId)) return null;
+
+  const nodeViolations = violations.filter((v) => v.nodeIds.includes(nodeId));
+  const hasError = nodeViolations.some((v) => v.severity === 'error');
+  const title = nodeViolations.map((v) => v.message).join('\n');
+
+  return (
+    <div
+      className="absolute -top-2 -right-2 z-20 flex h-5 min-w-5 items-center justify-center rounded-full px-1 text-[10px] font-bold text-white shadow-md pointer-events-auto select-none"
+      style={{ backgroundColor: hasError ? '#ef4444' : '#f59e0b' }}
+      title={title}
+    >
+      {nodeViolations.length > 1 ? nodeViolations.length : '!'}
+    </div>
+  );
+}
+
 function CustomNode(props: LegacyNodeProps<NodeData>): React.ReactElement {
   const { id, data, type, selected } = props;
   const explicitNodeStyle = (props as { style?: React.CSSProperties }).style;
   const explicitWidth = data.width ?? explicitNodeStyle?.width;
   const explicitHeight = data.height ?? explicitNodeStyle?.height;
   const measuredHeight = (props as { height?: number }).height;
-  const [shiftHeld, setShiftHeld] = useState(false);
+  const shiftHeld = useShiftHeld(Boolean(selected));
   const providerAssetKey = data.archIconPackId && data.archIconShapeId
     ? `${data.archIconPackId}:${data.archIconShapeId}`
     : null;
@@ -218,7 +258,7 @@ function CustomNode(props: LegacyNodeProps<NodeData>): React.ReactElement {
   const activeColorMode = data.colorMode || 'subtle';
   const activeIconKey = data.icon === 'none' ? null : (data.icon || defaults.icon);
   const activeShape = data.shape || defaults.shape || 'rounded';
-  const visualQualityV2Enabled = ROLLOUT_FLAGS.visualQualityV2;
+  const visualQualityV2Enabled = true;
   const visualStyle = resolveNodeVisualStyle(activeColor, activeColorMode, data.customColor);
 
   // Resolve icons
@@ -323,7 +363,12 @@ function CustomNode(props: LegacyNodeProps<NodeData>): React.ReactElement {
   // Square-aspect shapes enforce aspect-ratio so the geometry stays correct on resize.
   const needsSquareAspect = activeShape === 'circle' || activeShape === 'ellipse' || activeShape === 'diamond' || activeShape === 'hexagon';
 
+  const selectionRing = isActiveSelected && !isComplexShape
+    ? `, 0 0 0 2px var(--brand-primary, #e95420)`
+    : '';
+
   // Container style
+  const animateIn = data.freshlyAdded === true;
   const containerStyle: React.CSSProperties = {
     minWidth,
     minHeight: effectiveMinHeight,
@@ -333,20 +378,23 @@ function CustomNode(props: LegacyNodeProps<NodeData>): React.ReactElement {
     ...fontFamilyStyle,
 
     // Apply Design System Styles for Box Shadow and Border
-    boxShadow: !isComplexShape ? designSystem.components.node.boxShadow : 'none',
+    boxShadow: !isComplexShape ? `${designSystem.components.node.boxShadow}${selectionRing}` : 'none',
     borderWidth: !isComplexShape ? designSystem.components.node.borderWidth : 0,
     padding: 0, // Padding handled by inner content wrapper.
     borderRadius: getBorderRadius(),
     backgroundColor: !isComplexShape ? visualStyle.bg : undefined,
     borderColor: !isComplexShape ? visualStyle.border : undefined,
+    ...(animateIn ? {
+      animation: `nodeAnimateIn 180ms ease-out ${data.animateDelay ?? 0}ms both`,
+    } : {}),
   };
 
   if (isIconAssetNode) {
     return (
       <>
         <IconAssetNodeBody
+          nodeId={id}
           selected={Boolean(selected)}
-          setShiftHeld={setShiftHeld}
           connectionHandleClass={connectionHandleClass}
           explicitWidth={explicitWidth}
           nodeHeightPx={nodeHeightPx}
@@ -363,8 +411,6 @@ function CustomNode(props: LegacyNodeProps<NodeData>): React.ReactElement {
 
   return (
     <>
-      {/* Shift key state for proportional resize */}
-      {selected && <ShiftKeyResizeWatcher onShiftChange={setShiftHeld} />}
       <NodeTransformControls
         isVisible={Boolean(selected)}
         minWidth={minWidth}
@@ -373,6 +419,7 @@ function CustomNode(props: LegacyNodeProps<NodeData>): React.ReactElement {
       />
 
       <NodeChrome
+        nodeId={id}
         selected={Boolean(selected)}
         minWidth={minWidth}
         minHeight={effectiveMinHeight}
@@ -393,6 +440,9 @@ function CustomNode(props: LegacyNodeProps<NodeData>): React.ReactElement {
           hasSubLabel,
         })}
       >
+        <DiffBadge nodeId={id} />
+        <LintViolationBadge nodeId={id} />
+
         {/* SVG Background Layer for Complex Shapes */}
         {isComplexShape && (
           <div className="absolute inset-0 w-full h-full z-0 flex items-center justify-center">
@@ -417,30 +467,31 @@ function CustomNode(props: LegacyNodeProps<NodeData>): React.ReactElement {
         >
 
           {/* Icon Area */}
-          <div className={`flex items-center gap-1.5 shrink-0 flow-lod-far-target flow-lod-far-flex-target ${lodPreserveClass} ${hasIcon ? 'mb-0' : 'mb-2'}`}>
-            {resolvedAssetIconUrl && (
-              <div
-                className={`shrink-0 ${isCompactNode ? 'w-7 h-7' : 'w-8 h-8'} rounded-lg flex items-center justify-center border border-black/5 shadow-sm overflow-hidden flow-lod-shadow`}
-                style={{ backgroundColor: visualStyle.iconBg }}
-              >
-                <img src={resolvedAssetIconUrl} alt="icon" className={`${isCompactNode ? 'w-4 h-4' : 'w-5 h-5'} object-contain`} />
-              </div>
-            )}
-
-            {iconName && (
-              <div
-                className={`shrink-0 ${isCompactNode ? 'w-7 h-7' : 'w-8 h-8'} rounded-lg flex items-center justify-center border border-black/5 shadow-sm flow-lod-shadow`}
-                style={{ backgroundColor: visualStyle.iconBg }}
-              >
-                <NamedIcon
-                  name={iconName}
-                  fallbackName="Settings"
-                  className={`${isCompactNode ? 'w-3.5 h-3.5' : 'w-4 h-4'}`}
-                  style={{ color: visualStyle.iconColor }}
-                />
-              </div>
-            )}
-          </div>
+          {hasIcon && (
+            <div className={`flex items-center gap-1.5 shrink-0 flow-lod-far-target flow-lod-far-flex-target ${lodPreserveClass}`}>
+              {resolvedAssetIconUrl && (
+                <div
+                  className={`shrink-0 ${isCompactNode ? 'w-7 h-7' : 'w-8 h-8'} rounded-lg flex items-center justify-center border border-black/5 shadow-sm overflow-hidden flow-lod-shadow`}
+                  style={{ backgroundColor: visualStyle.iconBg }}
+                >
+                  <img src={resolvedAssetIconUrl} alt="icon" className={`${isCompactNode ? 'w-4 h-4' : 'w-5 h-5'} object-contain`} />
+                </div>
+              )}
+              {iconName && (
+                <div
+                  className={`shrink-0 ${isCompactNode ? 'w-7 h-7' : 'w-8 h-8'} rounded-lg flex items-center justify-center border border-black/5 shadow-sm flow-lod-shadow`}
+                  style={{ backgroundColor: visualStyle.iconBg }}
+                >
+                  <NamedIcon
+                    name={iconName}
+                    fallbackName="Settings"
+                    className={`${isCompactNode ? 'w-3.5 h-3.5' : 'w-4 h-4'}`}
+                    style={{ color: visualStyle.iconColor }}
+                  />
+                </div>
+              )}
+            </div>
+          )}
 
           {/* Text Content */}
           <div className={`flex flex-col min-w-0 max-w-full w-full overflow-hidden ${fontFamilyClass}`} style={{ textAlign: data.align || 'center', ...fontFamilyStyle }}>
diff --git a/src/components/DiagramViewer.tsx b/src/components/DiagramViewer.tsx
new file mode 100644
index 0000000..eda4a5e
--- /dev/null
+++ b/src/components/DiagramViewer.tsx
@@ -0,0 +1,160 @@
+import React, { useEffect, useState } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
+import { ReactFlow, Background, Controls, BackgroundVariant, ReactFlowProvider } from '@/lib/reactflowCompat';
+import { ExternalLink, AlertTriangle, Loader2 } from 'lucide-react';
+import { parseDslOrThrow } from '@/hooks/ai-generation/graphComposer';
+import { getElkLayout } from '@/services/elkLayout';
+import { flowCanvasNodeTypes, flowCanvasEdgeTypes } from './flow-canvas/flowCanvasTypes';
+import { OpenFlowLogo } from './icons/OpenFlowLogo';
+import type { FlowNode, FlowEdge } from '@/lib/types';
+
+type ParsedGraph = ReturnType<typeof parseDslOrThrow>;
+type ViewerSize = 'badge' | 'card' | 'full';
+type LayoutState =
+    | { status: 'loading' }
+    | { status: 'error'; error: string }
+    | { status: 'ready'; nodes: FlowNode[]; edges: FlowEdge[] };
+
+function decodeDsl(encoded: string): string {
+    return decodeURIComponent(atob(encoded));
+}
+
+function parseGraphFromSearch(search: string): ParsedGraph | { parseError: string } {
+    const encoded = new URLSearchParams(search).get('flow');
+    if (!encoded) return { parseError: 'No diagram data in URL. Add ?flow=BASE64_DSL to the URL.' };
+    let dsl: string;
+    try {
+        dsl = decodeDsl(encoded);
+    } catch {
+        return { parseError: 'Could not decode diagram data. The URL may be malformed.' };
+    }
+    try {
+        return parseDslOrThrow(dsl);
+    } catch (err) {
+        return { parseError: `DSL parse error: ${err instanceof Error ? err.message : String(err)}` };
+    }
+}
+
+function parseViewerSize(search: string): ViewerSize {
+    const size = new URLSearchParams(search).get('size');
+    if (size === 'badge' || size === 'card') return size;
+    return 'full';
+}
+
+function ViewerCanvas({
+    nodes,
+    edges,
+    size,
+}: {
+    nodes: FlowNode[];
+    edges: FlowEdge[];
+    size: ViewerSize;
+}): React.ReactElement {
+    return (
+        <ReactFlow
+            nodes={nodes}
+            edges={edges}
+            nodeTypes={flowCanvasNodeTypes}
+            edgeTypes={flowCanvasEdgeTypes}
+            nodesDraggable={false}
+            nodesConnectable={false}
+            elementsSelectable={false}
+            panOnScroll
+            zoomOnScroll={false}
+            zoomOnPinch
+            fitView
+            fitViewOptions={{ padding: size === 'badge' ? 0.08 : size === 'card' ? 0.12 : 0.15 }}
+            className="bg-[var(--brand-background,#f8fafc)]"
+        >
+            <Background variant={BackgroundVariant.Dots} gap={24} size={size === 'badge' ? 1.3 : 1.9} color="rgba(148,163,184,0.6)" />
+            {size === 'full' ? <Controls showInteractive={false} /> : null}
+        </ReactFlow>
+    );
+}
+
+function DiagramViewerInner(): React.ReactElement {
+    const location = useLocation();
+    const navigate = useNavigate();
+    const viewerSize = parseViewerSize(location.search);
+
+    // Parse synchronously once on mount via lazy initializer — no effect needed.
+    const [parsed] = useState<ParsedGraph | { parseError: string }>(() =>
+        parseGraphFromSearch(location.search)
+    );
+
+    const [layoutState, setLayoutState] = useState<LayoutState>(() =>
+        'parseError' in parsed
+            ? { status: 'error', error: parsed.parseError }
+            : { status: 'loading' }
+    );
+
+    // Run layout asynchronously — only when parse succeeded.
+    useEffect(() => {
+        if ('parseError' in parsed) return;
+        getElkLayout(parsed.nodes, parsed.edges)
+            .then(({ nodes, edges }) => {
+                setLayoutState({ status: 'ready', nodes, edges });
+            })
+            .catch((err: unknown) => {
+                setLayoutState({ status: 'error', error: `Layout failed: ${err instanceof Error ? err.message : String(err)}` });
+            });
+    }, [parsed]);
+
+    return (
+        <div className="flex h-screen w-screen flex-col overflow-hidden bg-slate-50">
+            {viewerSize !== 'badge' ? (
+            <div className={`flex shrink-0 items-center justify-between border-b border-slate-200 bg-white/90 px-4 backdrop-blur ${viewerSize === 'card' ? 'h-9' : 'h-10'}`}>
+                <div className="flex items-center gap-2">
+                    <OpenFlowLogo className="h-5 w-5 text-[var(--brand-primary,#e95420)]" />
+                    <span className="text-xs font-semibold text-slate-600">{viewerSize === 'card' ? 'OpenFlowKit Viewer' : 'OpenFlowKit'}</span>
+                </div>
+                <button
+                    onClick={() => navigate('/home')}
+                    className="flex items-center gap-1.5 rounded-full border border-slate-200 bg-white px-3 py-1 text-[11px] font-medium text-slate-600 shadow-sm transition-all hover:border-[var(--brand-primary,#e95420)] hover:text-[var(--brand-primary,#e95420)] active:scale-95"
+                >
+                    <ExternalLink className="h-3 w-3" />
+                    Open in Editor
+                </button>
+            </div>
+            ) : (
+            <div className="flex h-7 shrink-0 items-center justify-between border-b border-slate-200 bg-white/90 px-3 text-[10px] font-semibold uppercase tracking-widest text-slate-400">
+                <span>OpenFlowKit</span>
+                <span>Badge Viewer</span>
+            </div>
+            )}
+
+            <div className="relative min-h-0 flex-1">
+                {layoutState.status === 'loading' && (
+                    <div className="absolute inset-0 flex items-center justify-center">
+                        <Loader2 className="h-6 w-6 animate-spin text-slate-400" />
+                    </div>
+                )}
+                {layoutState.status === 'error' && (
+                    <div className="absolute inset-0 flex items-center justify-center p-8">
+                        <div className="flex max-w-sm flex-col items-center gap-3 rounded-xl border border-amber-200 bg-amber-50 p-6 text-center">
+                            <AlertTriangle className="h-6 w-6 text-amber-500" />
+                            <p className="text-sm font-medium text-amber-800">Could not render diagram</p>
+                            <p className="text-xs text-amber-600">{layoutState.error}</p>
+                        </div>
+                    </div>
+                )}
+                {layoutState.status === 'ready' && (
+                    <ViewerCanvas nodes={layoutState.nodes} edges={layoutState.edges} size={viewerSize} />
+                )}
+            </div>
+        </div>
+    );
+}
+
+export function DiagramViewer(): React.ReactElement {
+    return (
+        <ReactFlowProvider>
+            <DiagramViewerInner />
+        </ReactFlowProvider>
+    );
+}
+
+/** Encode a DSL string to a viewer URL param. */
+export function encodeDslForViewer(dsl: string): string {
+    return btoa(encodeURIComponent(dsl));
+}
diff --git a/src/components/ErrorBoundary.tsx b/src/components/ErrorBoundary.tsx
index 6acdf92..50f0ec2 100644
--- a/src/components/ErrorBoundary.tsx
+++ b/src/components/ErrorBoundary.tsx
@@ -1,6 +1,9 @@
 import React, { Component, ErrorInfo, ReactNode } from 'react';
 import { AlertTriangle, RefreshCcw } from 'lucide-react';
 import { withTranslation, WithTranslation } from 'react-i18next';
+import { createLogger } from '@/lib/logger';
+
+const logger = createLogger({ scope: 'ErrorBoundary' });
 
 interface Props extends WithTranslation {
     children?: ReactNode;
@@ -23,7 +26,7 @@ class ErrorBoundaryComponent extends Component<Props, State> {
     }
 
     public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
-        console.error('Uncaught error:', error, errorInfo);
+        logger.error('Uncaught error.', { error, componentStack: errorInfo.componentStack });
     }
 
     public render() {
@@ -35,7 +38,7 @@ class ErrorBoundaryComponent extends Component<Props, State> {
 
             return (
                 <div className={`flex items-center justify-center bg-slate-50 dark:bg-slate-900 p-4 ${this.props.className || 'min-h-screen'}`}>
-                    <div className="max-w-md w-full bg-white dark:bg-slate-800 rounded-xl shadow-xl overflow-hidden border border-slate-200 dark:border-slate-700 p-8 text-center">
+                    <div className="max-w-md w-full overflow-hidden rounded-xl border border-slate-200 bg-white p-8 text-center shadow-[var(--shadow-lg)] dark:border-slate-700 dark:bg-slate-800">
                         <div className="w-16 h-16 bg-red-100 dark:bg-red-900/30 rounded-full flex items-center justify-center mx-auto mb-6">
                             <AlertTriangle className="w-8 h-8 text-red-600 dark:text-red-400" />
                         </div>
diff --git a/src/components/ExportMenu.tsx b/src/components/ExportMenu.tsx
index e86dc54..300b059 100644
--- a/src/components/ExportMenu.tsx
+++ b/src/components/ExportMenu.tsx
@@ -12,47 +12,77 @@ const LazyExportMenuPanel = lazy(async () => {
 
 interface ExportMenuProps {
     onExportPNG: (format: 'png' | 'jpeg') => void;
+    onCopyImage: (format: 'png' | 'jpeg') => void;
     onExportSVG: () => void;
-    onExportAnimated: (format: 'video' | 'gif') => void;
+    onCopySVG: () => void;
+    onExportPDF: () => void;
+    onExportCinematic: (format: 'cinematic-video' | 'cinematic-gif') => void;
     onExportJSON: () => void;
+    onCopyJSON: () => void;
     onExportMermaid: () => void;
+    onDownloadMermaid: () => void;
     onExportPlantUML: () => void;
+    onDownloadPlantUML: () => void;
     onExportOpenFlowDSL: () => void;
+    onDownloadOpenFlowDSL: () => void;
     onExportFigma: () => void;
+    onDownloadFigma: () => void;
+    onShare: () => void;
 }
 
 export const ExportMenu: React.FC<ExportMenuProps> = ({
     onExportPNG,
+    onCopyImage,
     onExportSVG,
-    onExportAnimated,
+    onCopySVG,
+    onExportPDF,
+    onExportCinematic,
     onExportJSON,
+    onCopyJSON,
     onExportMermaid,
+    onDownloadMermaid,
     onExportPlantUML,
+    onDownloadPlantUML,
     onExportOpenFlowDSL,
+    onDownloadOpenFlowDSL,
     onExportFigma,
+    onDownloadFigma,
+    onShare,
 }) => {
     const { t } = useTranslation();
+    const exportLabel = t('export.title', 'Export');
     const { isOpen, menuRef, toggleMenu, handleSelect } = useExportMenu({
         onExportPNG,
+        onCopyImage,
         onExportSVG,
-        onExportAnimated,
+        onCopySVG,
+        onExportPDF,
+        onExportCinematic,
         onExportJSON,
+        onCopyJSON,
         onExportMermaid,
+        onDownloadMermaid,
         onExportPlantUML,
+        onDownloadPlantUML,
         onExportOpenFlowDSL,
+        onDownloadOpenFlowDSL,
         onExportFigma,
+        onDownloadFigma,
+        onShare,
     });
 
     return (
         <div className="relative" ref={menuRef}>
-            <Tooltip text={t('export.exportDiagram', 'Export Diagram')} side="bottom">
+            <Tooltip text={t('export.exportOrShare', 'Export or share this canvas')} side="bottom">
                 <Button
                     onClick={toggleMenu}
                     data-testid="topnav-export"
-                    className="h-9 px-4 text-sm"
+                    size="sm"
+                    aria-label={exportLabel}
+                    className="h-10 w-10 px-0 sm:h-9 sm:w-auto sm:px-3"
                 >
-                    <Download className="w-4 h-4 mr-2" />
-                    {t('export.title', 'Export')}
+                    <Download className="h-4 w-4 sm:mr-2" />
+                    <span className="hidden sm:inline">{exportLabel}</span>
                 </Button>
             </Tooltip>
 
diff --git a/src/components/ExportMenuPanel.test.tsx b/src/components/ExportMenuPanel.test.tsx
new file mode 100644
index 0000000..6e1fafc
--- /dev/null
+++ b/src/components/ExportMenuPanel.test.tsx
@@ -0,0 +1,71 @@
+import React from 'react';
+import { fireEvent, render, screen, within } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { ExportMenuPanel } from './ExportMenuPanel';
+
+vi.mock('react-i18next', async (importOriginal) => {
+    const actual = await importOriginal<typeof import('react-i18next')>();
+    return {
+        ...actual,
+        useTranslation: () => ({
+            t: (
+                key: string,
+                options?: string | { defaultValue?: string; appName?: string }
+            ) => {
+                if (typeof options === 'string') {
+                    return options;
+                }
+
+                if (key === 'export.openflowdslLabel') {
+                    return `${options?.appName ?? 'OpenFlowKit'} DSL`;
+                }
+
+                return options?.defaultValue ?? key;
+            },
+        }),
+    };
+});
+
+describe('ExportMenuPanel', () => {
+    it('switches categories and updates the format selector content', () => {
+        render(<ExportMenuPanel onSelect={vi.fn()} />);
+
+        expect(screen.getByRole('button', { name: /PNG/i })).toBeTruthy();
+
+        fireEvent.click(screen.getByRole('button', { name: /Code/i }));
+
+        expect(screen.getByRole('button', { name: /JSON File/i })).toBeTruthy();
+
+        fireEvent.click(within(screen.getByTestId('export-format-select')).getByRole('button', { name: /JSON File/i }));
+        fireEvent.click(within(screen.getByRole('listbox')).getByRole('button', { name: /Mermaid/i }));
+
+        expect(screen.getByRole('button', { name: /Mermaid/i })).toBeTruthy();
+        expect(screen.getByTestId('export-action-mermaid-download')).toBeTruthy();
+        expect(screen.getByTestId('export-action-mermaid-copy')).toBeTruthy();
+    });
+
+    it('fires the selected export key from the primary action button', () => {
+        const onSelect = vi.fn();
+
+        render(<ExportMenuPanel onSelect={onSelect} />);
+
+        fireEvent.click(screen.getByRole('button', { name: /Code/i }));
+        fireEvent.click(within(screen.getByTestId('export-format-select')).getByRole('button', { name: /JSON File/i }));
+        fireEvent.click(within(screen.getByRole('listbox')).getByRole('button', { name: /Figma Editable/i }));
+        fireEvent.click(screen.getByTestId('export-action-figma-copy'));
+
+        expect(onSelect).toHaveBeenCalledWith('figma', 'copy');
+    });
+
+    it('shows cinematic build options in the video section', () => {
+        render(<ExportMenuPanel onSelect={vi.fn()} />);
+
+        fireEvent.click(screen.getByRole('button', { name: /Video/i }));
+        fireEvent.click(within(screen.getByTestId('export-format-select')).getByRole('button', { name: /Cinematic Build Video/i }));
+
+        expect(within(screen.getByTestId('export-format-select')).getByRole('button', { name: /Cinematic Build Video/i })).toBeTruthy();
+        expect(within(screen.getByRole('listbox')).getByRole('button', { name: /Cinematic Build Video/i })).toBeTruthy();
+        expect(within(screen.getByRole('listbox')).getByRole('button', { name: /Cinematic Build GIF/i })).toBeTruthy();
+        expect(within(screen.getByRole('listbox')).queryByRole('button', { name: /Playback Video/i })).toBeNull();
+    });
+});
diff --git a/src/components/ExportMenuPanel.tsx b/src/components/ExportMenuPanel.tsx
index a1a0f61..df58c1c 100644
--- a/src/components/ExportMenuPanel.tsx
+++ b/src/components/ExportMenuPanel.tsx
@@ -1,64 +1,271 @@
-import React from 'react';
+import React, { useMemo, useState } from 'react';
 import type { ComponentType } from 'react';
-import { Figma, FileCode, FileJson, Film, GitBranch, Image, Wand2 } from 'lucide-react';
+import {
+    Copy,
+    Download,
+    Figma,
+    FileCode,
+    FileJson,
+    FileText,
+    Film,
+    GitBranch,
+    Image,
+    Wand2,
+} from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { APP_NAME } from '@/lib/brand';
-import { ROLLOUT_FLAGS } from '@/config/rolloutFlags';
+import { SidebarSegmentedTabs } from './SidebarShell';
+import { Button } from './ui/Button';
+import { Select, type SelectOption } from './ui/Select';
 
 interface ExportMenuPanelProps {
-    onSelect: (key: string) => void;
+    onSelect: (key: string, action: ExportActionKey) => void;
 }
 
+type ExportCategoryKey = 'image' | 'video' | 'code';
+type ExportActionKey = 'download' | 'copy';
+
 interface ExportOption {
     key: string;
     label: string;
     hint: string;
-    Icon: ComponentType<MenuIconComponentProps>;
+    Icon: ComponentType<{ className?: string }>;
+    actions: ExportActionKey[];
+}
+
+interface ExportSection {
+    key: ExportCategoryKey;
+    title: string;
+    items: ExportOption[];
+}
+
+function getSectionIcon(sectionKey: ExportCategoryKey): React.ReactElement {
+    if (sectionKey === 'image') {
+        return <Image className="h-3.5 w-3.5" />;
+    }
+
+    if (sectionKey === 'video') {
+        return <Film className="h-3.5 w-3.5" />;
+    }
+
+    if (sectionKey === 'code') {
+        return <FileCode className="h-3.5 w-3.5" />;
+    }
+
+    return <Image className="h-3.5 w-3.5" />;
+}
+
+function getDefaultOptionKey(section: ExportSection): string {
+    return section.items[0]?.key ?? '';
 }
 
-type MenuIconComponentProps = {
-    className?: string;
-};
+function getInitialSelectedKeys(sections: ExportSection[]): Record<ExportCategoryKey, string> {
+    return {
+        image: getDefaultOptionKey(sections.find((section) => section.key === 'image') ?? sections[0]),
+        video: getDefaultOptionKey(sections.find((section) => section.key === 'video') ?? sections[0]),
+        code: getDefaultOptionKey(sections.find((section) => section.key === 'code') ?? sections[0]),
+    };
+}
+
+function getActionIcon(actionKey: ExportActionKey): React.ReactElement {
+    if (actionKey === 'download') {
+        return <Download className="h-4 w-4" />;
+    }
+
+    return <Copy className="h-4 w-4" />;
+}
 
 export function ExportMenuPanel({ onSelect }: ExportMenuPanelProps): React.ReactElement {
     const { t } = useTranslation();
-    const exportOptions: ExportOption[] = [
-        { key: 'png', label: t('export.png', 'Export PNG'), hint: t('export.hintTransparent4K', 'Transparent (4K)'), Icon: Image },
-        { key: 'jpeg', label: t('export.jpeg', 'Export JPG'), hint: t('export.hintWhiteBg4K', 'White Background (4K)'), Icon: Image },
-        { key: 'svg', label: t('export.svg', 'Export SVG'), hint: t('export.hintSvgScalable', 'Vector, scales to any size'), Icon: Image },
-        ...(ROLLOUT_FLAGS.animatedExportV1
-            ? [
-                { key: 'video', label: t('export.video', 'Playback Video'), hint: t('export.hintPlaybackWebM', 'Playback timeline (WebM/MP4)'), Icon: Film },
-                { key: 'gif', label: t('export.gif', 'Playback GIF'), hint: t('export.hintPlaybackGif', 'Short loop for docs/social'), Icon: Film },
-            ]
-            : []),
-        { key: 'json', label: t('export.jsonLabel', 'JSON File'), hint: t('export.hintDownload', 'Download'), Icon: FileJson },
-        { key: 'openflow', label: t('export.openflowdslLabel', { appName: APP_NAME, defaultValue: `${APP_NAME} DSL` }), hint: t('export.hintClipboard', 'Copy to clipboard'), Icon: Wand2 },
-        { key: 'mermaid', label: t('export.mermaid', 'Mermaid'), hint: t('export.hintClipboard', 'Copy to clipboard'), Icon: GitBranch },
-        { key: 'plantuml', label: t('export.plantuml', 'PlantUML'), hint: t('export.hintClipboard', 'Copy to clipboard'), Icon: FileCode },
-        { key: 'figma', label: t('export.figmaEditable', 'Figma Editable'), hint: t('export.hintClipboard', 'Copy to clipboard'), Icon: Figma },
-    ];
+
+    const sections = useMemo<ExportSection[]>(() => [
+        {
+            key: 'image',
+            title: t('export.sectionImage', 'Image'),
+            items: [
+                {
+                    key: 'png',
+                    label: 'PNG',
+                    hint: t('export.hintTransparent4K', 'Transparent (4K)'),
+                    Icon: Image,
+                    actions: ['download', 'copy'],
+                },
+                {
+                    key: 'jpeg',
+                    label: 'JPG',
+                    hint: t('export.hintWhiteBg4K', 'White Background (4K)'),
+                    Icon: Image,
+                    actions: ['download', 'copy'],
+                },
+                {
+                    key: 'svg',
+                    label: 'SVG',
+                    hint: t('export.hintSvgScalable', 'Scalable vector file'),
+                    Icon: Image,
+                    actions: ['download', 'copy'],
+                },
+                {
+                    key: 'pdf',
+                    label: 'PDF',
+                    hint: 'Document',
+                    Icon: FileText,
+                    actions: ['download'],
+                },
+            ],
+        },
+        {
+            key: 'video',
+            title: 'Video',
+            items: [
+                {
+                    key: 'cinematic-video',
+                    label: t('export.cinematicVideo', 'Cinematic Build Video'),
+                    hint: t('export.hintCinematicVideo', 'Polished animated build'),
+                    Icon: Film,
+                    actions: ['download'],
+                },
+                {
+                    key: 'cinematic-gif',
+                    label: t('export.cinematicGif', 'Cinematic Build GIF'),
+                    hint: t('export.hintCinematicGif', 'Animated loop for sharing'),
+                    Icon: Film,
+                    actions: ['download'],
+                },
+            ],
+        },
+        {
+            key: 'code',
+            title: 'Code',
+            items: [
+                {
+                    key: 'json',
+                    label: t('export.jsonLabel', 'JSON File'),
+                    hint: t('export.hintDownload', 'Download'),
+                    Icon: FileJson,
+                    actions: ['download', 'copy'],
+                },
+                {
+                    key: 'openflow',
+                    label: t('export.openflowdslLabel', { appName: APP_NAME, defaultValue: `${APP_NAME} DSL` }),
+                    hint: t('export.hintClipboard', 'Copy to clipboard'),
+                    Icon: Wand2,
+                    actions: ['download', 'copy'],
+                },
+                {
+                    key: 'mermaid',
+                    label: t('export.mermaid', 'Mermaid'),
+                    hint: t('export.hintClipboard', 'Copy to clipboard'),
+                    Icon: GitBranch,
+                    actions: ['download', 'copy'],
+                },
+                {
+                    key: 'plantuml',
+                    label: t('export.plantuml', 'PlantUML'),
+                    hint: t('export.hintClipboard', 'Copy to clipboard'),
+                    Icon: FileCode,
+                    actions: ['download', 'copy'],
+                },
+                {
+                    key: 'figma',
+                    label: t('export.figmaEditable', 'Figma Editable'),
+                    hint: 'Editable SVG',
+                    Icon: Figma,
+                    actions: ['download', 'copy'],
+                },
+            ],
+        },
+    ], [t]);
+
+    const tabs = useMemo(() => sections.map((section) => ({
+        id: section.key,
+        label: section.title,
+        icon: <span className="hidden sm:inline-flex">{getSectionIcon(section.key)}</span>,
+    })), [sections]);
+
+    const [activeSectionKey, setActiveSectionKey] = useState<ExportCategoryKey>('image');
+    const [selectedKeys, setSelectedKeys] = useState<Record<ExportCategoryKey, string>>(() => getInitialSelectedKeys(sections));
+
+    const activeSection = sections.find((section) => section.key === activeSectionKey) ?? sections[0];
+    const selectedItem =
+        activeSection.items.find((item) => item.key === selectedKeys[activeSectionKey]) ?? activeSection.items[0];
+    const selectOptions: SelectOption[] = activeSection.items.map((item) => ({
+        value: item.key,
+        label: item.label,
+        hint: item.hint,
+    }));
+
+    function handleSectionChange(nextTab: string): void {
+        setActiveSectionKey(nextTab as ExportCategoryKey);
+    }
+
+    function handleOptionChange(nextKey: string): void {
+        setSelectedKeys((current) => ({
+            ...current,
+            [activeSectionKey]: nextKey,
+        }));
+    }
+
+    function getActionLabel(action: ExportActionKey): string {
+        if (action === 'download') {
+            return t('export.actionDownload', 'Download');
+        }
+
+        return 'Copy';
+    }
 
     return (
-        <div className="absolute top-full right-0 mt-2 w-52 bg-white/95 backdrop-blur-xl rounded-[var(--radius-lg)] shadow-xl border border-white/20 ring-1 ring-black/5 p-1.5 flex flex-col gap-0.5 animate-in fade-in zoom-in-95 duration-100 origin-top-right z-50">
-            <div className="px-2 py-1.5 text-xs font-semibold text-slate-400 uppercase tracking-wider">
-                {t('export.exportAs', 'Export As')}
+        <div className="absolute right-0 top-full z-50 mt-2 w-[24rem] origin-top-right rounded-[var(--radius-xl)] border border-slate-200/80 bg-white/95 p-3 shadow-[var(--shadow-overlay)] ring-1 ring-black/5 backdrop-blur-xl animate-in fade-in zoom-in-95 duration-100">
+            <div className="rounded-[var(--radius-lg)] border border-slate-200/70 bg-[linear-gradient(180deg,rgba(248,250,252,0.98),rgba(255,255,255,0.92))] p-3">
+                <h3 className="text-sm font-semibold text-slate-900">
+                    {t('export.title', 'Export')}
+                </h3>
+                <p className="mt-1 text-xs leading-5 text-slate-500">
+                    Choose a format and action.
+                </p>
+            </div>
+
+            <div className="mt-3">
+                <SidebarSegmentedTabs
+                    tabs={tabs}
+                    activeTab={activeSectionKey}
+                    onTabChange={handleSectionChange}
+                    getTabTestId={(tab) => `export-section-${tab.id}`}
+                />
+            </div>
+
+            <div className="mt-3 rounded-[var(--radius-lg)] border border-slate-200/70 bg-slate-50/60 p-3">
+                <div className="mb-2 flex items-center gap-2">
+                    <selectedItem.Icon className="h-4 w-4 text-[var(--brand-primary)]" />
+                    <p className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-400">
+                        {activeSection.title}
+                    </p>
+                </div>
+
+                <div data-testid="export-format-select">
+                    <Select
+                        value={selectedItem.key}
+                        onChange={handleOptionChange}
+                        options={selectOptions}
+                        placeholder="Choose format"
+                    />
+                </div>
+
+                <div className={`mt-3 grid gap-2 ${selectedItem.actions.length > 1 ? 'grid-cols-2' : 'grid-cols-1'}`}>
+                    {selectedItem.actions.map((action) => (
+                        <Button
+                            key={`${selectedItem.key}-${action}`}
+                            type="button"
+                            variant={action === 'download' ? 'primary' : 'secondary'}
+                            onClick={() => onSelect(selectedItem.key, action)}
+                            data-testid={`export-action-${selectedItem.key}-${action}`}
+                            className="h-11 w-full"
+                        >
+                            {getActionIcon(action)}
+                            {getActionLabel(action)}
+                        </Button>
+                    ))}
+                </div>
             </div>
-            {exportOptions.map(({ key, label, hint, Icon }) => (
-                <button
-                    key={key}
-                    onClick={() => onSelect(key)}
-                    data-testid={`export-${key}`}
-                    title={`${label} - ${hint}`}
-                    className="flex items-center gap-3 px-3 py-2 text-sm text-slate-600 hover:bg-[var(--brand-primary-50)] hover:text-[var(--brand-primary)] rounded-[var(--radius-sm)] transition-colors w-full text-left"
-                >
-                    <Icon className="w-4 h-4 text-slate-400" />
-                    <div className="flex flex-col">
-                        <span className="font-medium">{label}</span>
-                        <span className="text-[10px] text-slate-400">{hint}</span>
-                    </div>
-                </button>
-            ))}
         </div>
     );
 }
diff --git a/src/components/FlowCanvas.tsx b/src/components/FlowCanvas.tsx
index 3162f43..e63dc6f 100644
--- a/src/components/FlowCanvas.tsx
+++ b/src/components/FlowCanvas.tsx
@@ -1,9 +1,8 @@
-import React, { useCallback, useRef } from 'react';
+import React, { useCallback, useEffect, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useShallow } from 'zustand/react/shallow';
 import ReactFlow, {
     Background,
-    Controls,
     useReactFlow,
     useViewport,
     toFlowNode,
@@ -17,8 +16,7 @@ import CustomConnectionLine from './CustomConnectionLine';
 import { NavigationControls } from './NavigationControls';
 import { FlowCanvasOverlays } from './flow-canvas/FlowCanvasOverlays';
 import { flowCanvasEdgeTypes, flowCanvasNodeTypes } from './flow-canvas/flowCanvasTypes';
-import { useFlowCanvasMenus } from './flow-canvas/useFlowCanvasMenus';
-import { useFlowCanvasContextActions } from './flow-canvas/useFlowCanvasContextActions';
+import { useFlowCanvasMenusAndActions } from './flow-canvas/useFlowCanvasMenusAndActions';
 import { useFlowCanvasDragDrop } from './flow-canvas/useFlowCanvasDragDrop';
 import { useFlowCanvasConnectionState } from './flow-canvas/useFlowCanvasConnectionState';
 import { useFlowCanvasPaste } from './flow-canvas/useFlowCanvasPaste';
@@ -27,14 +25,14 @@ import { useFlowCanvasZoomLod } from './flow-canvas/useFlowCanvasZoomLod';
 import { useFlowCanvasViewState } from './flow-canvas/useFlowCanvasViewState';
 import { useFlowCanvasReactFlowConfig } from './flow-canvas/useFlowCanvasReactFlowConfig';
 import { useFlowCanvasSelectionTools } from './flow-canvas/useFlowCanvasSelectionTools';
+import type { ConnectMenuState } from './flow-canvas/useFlowCanvasMenus';
 import { useToast } from './ui/ToastContext';
-import { ROLLOUT_FLAGS } from '@/config/rolloutFlags';
 import { isCanvasBackgroundTarget } from '@/hooks/edgeConnectInteractions';
 import { setEdgeInteractionLowDetailMode } from './custom-edge/edgeRenderMode';
 import { useCanvasActions, useCanvasState } from '@/store/canvasHooks';
 import { useSelectionActions } from '@/store/selectionHooks';
 import { useTabActions, useActiveTabId } from '@/store/tabHooks';
-import { useViewSettings, useCanvasViewSettings } from '@/store/viewHooks';
+import { useCanvasViewSettings } from '@/store/viewHooks';
 import { useMermaidDiagnosticsActions } from '@/store/selectionHooks';
 
 interface FlowCanvasProps {
@@ -49,8 +47,7 @@ export const FlowCanvas: React.FC<FlowCanvasProps> = ({
     onCanvasEntityIntent,
 }) => {
     const { t } = useTranslation();
-    const visualQualityV2Enabled = ROLLOUT_FLAGS.visualQualityV2;
-    const canvasInteractionsV1Enabled = ROLLOUT_FLAGS.canvasInteractionsV1;
+    const visualQualityV2Enabled = true;
     const { nodes, edges } = useCanvasState();
     const { onNodesChange, onEdgesChange, setNodes, setEdges } = useCanvasActions();
     const activeTabId = useActiveTabId();
@@ -77,6 +74,7 @@ export const FlowCanvas: React.FC<FlowCanvasProps> = ({
         largeGraphSafetyProfile,
     });
     const reactFlowWrapper = useRef<HTMLDivElement>(null);
+    const connectMenuSetterRef = useRef<((value: ConnectMenuState | null) => void) | null>(null);
 
     const { screenToFlowPosition, fitView } = useReactFlow();
     const { zoom, x: viewportX, y: viewportY } = useViewport();
@@ -84,19 +82,6 @@ export const FlowCanvas: React.FC<FlowCanvasProps> = ({
         setSelectedNodeId(null);
         setSelectedEdgeId(null);
     }, [setSelectedEdgeId, setSelectedNodeId]);
-    const {
-        connectMenu,
-        setConnectMenu,
-        contextMenu,
-        onNodeContextMenu,
-        onPaneContextMenu,
-        onEdgeContextMenu,
-        onPaneClick,
-        onCloseContextMenu,
-    } = useFlowCanvasMenus({
-        onPaneSelectionClear: clearPaneSelection,
-    });
-
     // --- Operations ---
     const {
         onConnect, onSelectionChange, onNodeDoubleClick,
@@ -106,7 +91,7 @@ export const FlowCanvas: React.FC<FlowCanvasProps> = ({
         handleAddDomainLibraryItemAndConnect,
         handleAddNode,
         deleteNode, deleteEdge, duplicateNode,
-        updateNodeZIndex,
+        updateNodeType, updateNodeZIndex,
         pasteSelection, copySelection,
         handleAlignNodes, handleDistributeNodes, handleGroupNodes,
         onReconnect,
@@ -114,11 +99,22 @@ export const FlowCanvas: React.FC<FlowCanvasProps> = ({
         handleAddImage
     } = useFlowOperations(
         recordHistory,
-        (position, sourceId, sourceHandle, sourceType) => setConnectMenu({ position, sourceId, sourceHandle, sourceType })
+        (position, sourceId, sourceHandle, sourceType) => {
+            connectMenuSetterRef.current?.({ position, sourceId, sourceHandle, sourceType });
+        }
     );
-    const contextActions = useFlowCanvasContextActions({
+    const {
+        connectMenu,
+        setConnectMenu,
         contextMenu,
+        onNodeContextMenu,
+        onPaneContextMenu,
+        onEdgeContextMenu,
+        onPaneClick,
         onCloseContextMenu,
+        contextActions,
+    } = useFlowCanvasMenusAndActions({
+        onPaneSelectionClear: clearPaneSelection,
         screenToFlowPosition,
         copySelection,
         pasteSelection,
@@ -126,11 +122,15 @@ export const FlowCanvas: React.FC<FlowCanvasProps> = ({
         deleteNode,
         deleteEdge,
         updateNodeZIndex,
+        updateNodeType,
         handleAlignNodes,
         handleDistributeNodes,
         handleGroupNodes,
         nodes,
     });
+    useEffect(() => {
+        connectMenuSetterRef.current = setConnectMenu;
+    }, [setConnectMenu]);
 
     const { onDragOver, onDrop } = useFlowCanvasDragDrop({
         screenToFlowPosition,
@@ -199,7 +199,6 @@ export const FlowCanvas: React.FC<FlowCanvasProps> = ({
     });
 
     const onCanvasDoubleClickCapture = (event: React.MouseEvent<HTMLDivElement>): void => {
-        if (!canvasInteractionsV1Enabled) return;
         if (!isCanvasBackgroundTarget(event.target)) return;
         const position = screenToFlowPosition({ x: event.clientX, y: event.clientY });
         handleAddNode(position);
@@ -277,6 +276,7 @@ export const FlowCanvas: React.FC<FlowCanvasProps> = ({
                 connectionMode={reactFlowConfig.connectionMode}
                 isValidConnection={reactFlowConfig.isValidConnection}
                 selectionOnDrag={reactFlowConfig.selectionOnDrag}
+                selectNodesOnDrag={reactFlowConfig.selectNodesOnDrag}
                 selectionKeyCode={reactFlowConfig.selectionKeyCode}
                 panOnDrag={reactFlowConfig.panOnDrag}
                 panActivationKeyCode={reactFlowConfig.panActivationKeyCode}
diff --git a/src/components/FlowEditor.tsx b/src/components/FlowEditor.tsx
index 68b1207..827bfad 100644
--- a/src/components/FlowEditor.tsx
+++ b/src/components/FlowEditor.tsx
@@ -1,607 +1,100 @@
-import React, { Suspense, lazy, useCallback, useEffect, useMemo, useRef } from 'react';
-import { useLocation, useNavigate } from 'react-router-dom';
-import { useTranslation } from 'react-i18next';
-import { useShallow } from 'zustand/react/shallow';
-import { useReactFlow } from '@/lib/reactflowCompat';
+import React from 'react';
 import '@xyflow/react/dist/style.css';
-import { ROLLOUT_FLAGS } from '@/config/rolloutFlags';
-import { useFlowStore } from '../store';
 import { FlowCanvas } from './FlowCanvas';
-import { ErrorBoundary } from './ErrorBoundary';
-import { useSnapshots } from '../hooks/useSnapshots';
-import { useFlowHistory } from '../hooks/useFlowHistory';
-import { useFlowOperations } from '../hooks/useFlowOperations';
-import { useKeyboardShortcuts } from '../hooks/useKeyboardShortcuts';
-import { useAIGeneration } from '../hooks/useAIGeneration';
-import { useFlowExport } from '../hooks/useFlowExport';
-import { useToast } from './ui/ToastContext';
-import { usePlayback } from '../hooks/usePlayback';
-import { useFlowEditorUIState } from '@/hooks/useFlowEditorUIState';
-import { useFlowEditorActions } from '@/hooks/useFlowEditorActions';
-import { useFlowEditorCallbacks } from '@/hooks/useFlowEditorCallbacks';
-import { buildFlowEditorPanelsProps } from './flow-editor/panelProps';
-import { useFlowEditorShellController } from './flow-editor/useFlowEditorShellController';
-import { useFlowEditorStudioController } from './flow-editor/useFlowEditorStudioController';
-import { useFlowEditorCollaboration } from '@/hooks/useFlowEditorCollaboration';
-import { useMindmapTopicActionRequest } from '@/hooks/mindmapTopicActionRequest';
-import { useShortcutHelpActions, useViewSettings } from '@/store/viewHooks';
-import { useSelectionActions, useSelectionState } from '@/store/selectionHooks';
+import { FlowEditorChrome } from './flow-editor/FlowEditorChrome';
+import { useFlowEditorScreenModel } from './flow-editor/useFlowEditorScreenModel';
+import { ArchitectureLintProvider } from '@/context/ArchitectureLintContext';
+import { useCinematicExportState } from '@/context/CinematicExportContext';
+import { DiagramDiffProvider } from '@/context/DiagramDiffContext';
+import { ShareEmbedModal } from '@/components/ShareEmbedModal';
+import { CinematicExportSurface } from '@/components/export/CinematicExportSurface';
 
-const LazyFlowEditorPanels = lazy(async () => {
-    const module = await import('./FlowEditorPanels');
-    return { default: module.FlowEditorPanels };
-});
-
-const LazyTopNav = lazy(async () => {
-    const module = await import('./TopNav');
-    return { default: module.TopNav };
-});
-
-const LazyToolbar = lazy(async () => {
-    const module = await import('./Toolbar');
-    return { default: module.Toolbar };
-});
-
-const LazyPlaybackControls = lazy(async () => {
-    const module = await import('./PlaybackControls');
-    return { default: module.PlaybackControls };
-});
-
-const LazyFlowEditorLayoutOverlay = lazy(async () => {
-    const module = await import('./FlowEditorLayoutOverlay');
-    return { default: module.FlowEditorLayoutOverlay };
-});
-
-const LazyFlowEditorEmptyState = lazy(async () => {
-    const module = await import('./FlowEditorEmptyState');
-    return { default: module.FlowEditorEmptyState };
-});
-
-const LazyCollaborationPresenceOverlay = lazy(async () => {
-    const module = await import('./flow-editor/CollaborationPresenceOverlay');
-    return { default: module.CollaborationPresenceOverlay };
-});
+const CINEMATIC_EXPORT_BACKGROUND =
+    'radial-gradient(circle at top, rgba(59,130,246,0.14), transparent 42%), linear-gradient(180deg, #f8fbff 0%, #eef5ff 52%, #f8fafc 100%)';
 
 interface FlowEditorProps {
     onGoHome: () => void;
 }
 
-function TopNavFallback(): React.ReactElement {
-    return (
-        <div className="absolute top-0 left-0 right-0 z-50 h-16 border-b border-white/20 bg-white/70 shadow-sm backdrop-blur-md" />
-    );
-}
-
 export function FlowEditor({ onGoHome }: FlowEditorProps) {
-    const { t } = useTranslation();
-    const { addToast } = useToast();
-    const location = useLocation();
-    const navigate = useNavigate();
-    const collaborationV1Enabled = ROLLOUT_FLAGS.collaborationV1;
-
-    // --- Global Store ---
+    const cinematicExportState = useCinematicExportState();
     const {
         nodes,
         edges,
-        setNodes,
-        setEdges,
         tabs,
         activeTabId,
-        addTab,
-        closeTab,
-        updateTab,
-        toggleGrid,
-        toggleSnap,
-    } = useFlowStore(useShallow((state) => ({
-        nodes: state.nodes,
-        edges: state.edges,
-        setNodes: state.setNodes,
-        setEdges: state.setEdges,
-        tabs: state.tabs,
-        activeTabId: state.activeTabId,
-        addTab: state.addTab,
-        closeTab: state.closeTab,
-        updateTab: state.updateTab,
-        toggleGrid: state.toggleGrid,
-        toggleSnap: state.toggleSnap,
-    })));
-    const viewSettings = useViewSettings();
-    const { setShortcutsHelpOpen } = useShortcutHelpActions();
-    const { selectedNodeId, selectedEdgeId } = useSelectionState();
-    const { setSelectedNodeId, setSelectedEdgeId } = useSelectionActions();
-    const { showGrid, snapToGrid } = viewSettings;
-
-    const {
-        snapshots,
-        manualSnapshots,
-        autoSnapshots,
-        saveSnapshot,
-        deleteSnapshot,
-        queueAutoSnapshot,
-        restoreSnapshot,
-    } = useSnapshots();
-    const {
-        isHistoryOpen,
-        isCommandBarOpen,
-        commandBarView,
-        editorMode,
-        studioTab,
-        studioCodeMode,
-        isSelectMode,
-        openHistory,
-        closeHistory,
-        openCommandBar,
-        closeCommandBar,
-        setCanvasMode,
-        setStudioMode,
-        setStudioTab,
-        setStudioCodeMode,
-        enableSelectMode,
-        enablePanMode,
-    } = useFlowEditorUIState();
-
-    const reactFlowWrapper = useRef<HTMLDivElement>(null);
-    const { fitView, screenToFlowPosition, zoomIn, zoomOut } = useReactFlow();
-
-    // --- History ---
-    const { recordHistory, undo, redo, canUndo, canRedo } = useFlowHistory();
-
-    // --- Core Operations ---
-    const {
-        updateNodeData, applyBulkNodeData, updateNodeType, updateNodeZIndex, updateEdge,
-        deleteNode, deleteEdge, duplicateNode,
-        handleAddNode, handleAddShape, handleAddJourneyNode, handleAddMindmapNode, handleAddArchitectureNode, handleAddAnnotation, handleAddSection, handleAddTextNode, handleAddImage, handleAddWireframe, handleAddDomainLibraryItem, handleAddMindmapChild, handleAddMindmapSibling, handleAddArchitectureService, handleCreateArchitectureBoundary
-    } = useFlowOperations(recordHistory);
-
-    const selectedNodeType = useMemo(
-        () => nodes.find((node) => node.id === selectedNodeId)?.type ?? null,
-        [nodes, selectedNodeId]
-    );
-
-    const {
-        getCenter,
-        handleSwitchTab,
-        handleAddTab,
-        handleCloseTab,
-        handleRenameTab,
-        selectAll,
-        handleRestoreSnapshot,
-        handleCommandBarApply,
-    } = useFlowEditorCallbacks({
-        addTab,
-        closeTab,
-        updateTab,
-        navigate,
-        tabsLength: tabs.length,
-        cannotCloseLastTabMessage: t('flowEditor.cannotCloseLastTab'),
-        setNodes,
-        setEdges,
-        restoreSnapshot,
-        recordHistory,
-        fitView,
-        screenToFlowPosition,
-    });
-
-    useKeyboardShortcuts({
-        selectedNodeId, selectedEdgeId,
-        deleteNode, deleteEdge, undo, redo, duplicateNode, selectAll,
-        selectedNodeType,
-        onAddMindmapChildShortcut: () => {
-            if (selectedNodeId) {
-                handleAddMindmapChild(selectedNodeId);
-            }
-        },
-        onAddMindmapSiblingShortcut: () => {
-            if (selectedNodeId) {
-                handleAddMindmapSibling(selectedNodeId);
-            }
-        },
-        onCommandBar: () => openCommandBar('root'),
-        onSearch: () => openCommandBar('search'),
-        onShortcutsHelp: () => setShortcutsHelpOpen(true),
-        onSelectMode: enableSelectMode,
-        onPanMode: enablePanMode,
-        onFitView: () => fitView({ duration: 600, padding: 0.2 }),
-        onZoomIn: () => zoomIn({ duration: 300 }),
-        onZoomOut: () => zoomOut({ duration: 300 }),
-    });
-
-    // --- AI ---
-    const { isGenerating, handleAIRequest, chatMessages, clearChat } = useAIGeneration(
-        recordHistory,
-        handleCommandBarApply
-    );
-
-    // --- Playback ---
-    const {
-        isPlaying,
-        currentStepIndex,
-        totalSteps,
-        startPlayback,
-        stopPlayback,
-        togglePlay,
-        nextStep,
-        prevStep,
-        setPlaybackSpeed,
-        playbackSpeed,
-        jumpToStep,
-    } = usePlayback();
-
-    // --- Export ---
-    const { fileInputRef, handleExport, handleSvgExport, handleAnimatedExport, handleExportJSON, handleImportJSON, onFileImport } = useFlowExport(
+        viewSettings,
+        diffBaseline,
+        setDiffBaseline,
         recordHistory,
+        isSelectMode,
         reactFlowWrapper,
-        {
-            jumpToStep,
-            stopPlayback,
-            playbackSpeed,
-        }
-    );
-
-    useEffect(() => {
-        queueAutoSnapshot(nodes, edges);
-    }, [edges, nodes, queueAutoSnapshot]);
-
-    const {
-        collaborationTopNavState,
+        cinematicExportSurfaceRef,
+        fileInputRef,
+        onFileImport,
+        shareViewerUrl,
+        clearShareViewerUrl,
+        collaborationEnabled,
         remotePresence,
-    } = useFlowEditorCollaboration({
-        collaborationEnabled: collaborationV1Enabled,
-        activeTabId,
-        nodes,
-        edges,
-        editorSurfaceRef: reactFlowWrapper,
-        setNodes,
-        setEdges,
-        addToast,
-    });
-
-    useMindmapTopicActionRequest(
-        useCallback(({ nodeId, action, side }) => {
-            if (action === 'child') {
-                handleAddMindmapChild(nodeId, side ?? null);
-                return;
-            }
-            if (action === 'sibling') {
-                handleAddMindmapSibling(nodeId);
-            }
-        }, [handleAddMindmapChild, handleAddMindmapSibling])
-    );
-
-    const {
+        collaborationNodePositions,
         isLayouting,
-        onLayout,
-        handleInsertTemplate,
-        handleExportMermaid,
-        handleExportPlantUML,
-        handleExportOpenFlowDSL,
-        handleExportFigma,
-    } = useFlowEditorActions({
-        nodes,
-        edges,
-        recordHistory,
-        setNodes,
-        setEdges,
-        fitView,
+        flowEditorController,
         t,
-        addToast,
-        exportSerializationMode: viewSettings.exportSerializationMode,
-    });
-    const {
-        handleLayoutWithContext,
-        selectedNode,
-        selectedNodes,
-        selectedEdge,
-        shouldRenderPanels,
-    } = useFlowEditorShellController({
-        location,
-        navigate,
-        fileInputRef,
-        tabs,
-        activeTabId,
-        snapshots,
-        nodes,
-        edges,
-        selectedNodeId,
-        selectedEdgeId,
-        isCommandBarOpen,
-        isHistoryOpen,
-        editorMode,
-        handleExportJSON,
-        onLayout,
-    });
-    const {
-        openStudioPanel,
-        openStudioAI,
-        openStudioCode,
-        openStudioPlayback,
-        toggleStudioPanel,
-        closeStudioPanel,
-        handleCanvasEntityIntent,
-    } = useFlowEditorStudioController({
-        editorMode,
-        studioTab,
-        selectedNodeId,
-        selectedEdgeId,
-        setStudioTab,
-        setStudioCodeMode,
-        setStudioMode,
-        closeCommandBar,
-        setCanvasMode,
-        setSelectedNodeId,
-        setSelectedEdgeId,
-    });
-    const clearSelection = useCallback(() => {
-        setSelectedNodeId(null);
-        setSelectedEdgeId(null);
-    }, [setSelectedEdgeId, setSelectedNodeId]);
-    const flowEditorPanelsProps = useMemo(() => buildFlowEditorPanelsProps({
-        isCommandBarOpen,
-        closeCommandBar,
-        nodes,
-        edges,
-        undo,
-        redo,
-        onLayout,
-        handleInsertTemplate,
-        openStudioAI,
-        openStudioCode,
-        openStudioPlayback,
-        commandBarView,
-        handleAddAnnotation,
-        handleAddSection,
-        handleAddTextNode,
-        handleAddJourneyNode,
-        handleAddMindmapNode,
-        handleAddArchitectureNode,
-        handleAddImage,
-        handleAddWireframe,
-        handleAddDomainLibraryItem,
-        showGrid,
-        toggleGrid,
-        snapToGrid,
-        toggleSnap,
-        isHistoryOpen,
-        closeHistory,
-        snapshots,
-        manualSnapshots,
-        autoSnapshots,
-        saveSnapshot,
-        handleRestoreSnapshot,
-        deleteSnapshot,
-        selectedNode,
-        selectedNodes,
-        selectedEdge,
-        updateNodeData,
-        applyBulkNodeData,
-        updateNodeType,
-        updateEdge,
-        deleteNode,
-        duplicateNode,
-        deleteEdge,
-        updateNodeZIndex,
-        handleAddMindmapChild,
-        handleAddMindmapSibling,
-        handleAddArchitectureService,
-        handleCreateArchitectureBoundary,
-        clearSelection,
-        closeStudioPanel,
-        handleCommandBarApply,
-        handleAIRequest,
-        isGenerating,
-        chatMessages,
-        clearChat,
-        studioTab,
-        setStudioTab,
-        studioCodeMode,
-        setStudioCodeMode,
-        playback: {
-            currentStepIndex,
-            totalSteps,
-            isPlaying,
-            onStartPlayback: startPlayback,
-            onPlayPause: togglePlay,
-            onStop: stopPlayback,
-            onScrubToStep: jumpToStep,
-            onNext: nextStep,
-            onPrev: prevStep,
-            playbackSpeed,
-            onPlaybackSpeedChange: setPlaybackSpeed,
-        },
-        editorMode,
-    }), [
-        isCommandBarOpen,
-        closeCommandBar,
-        nodes,
-        edges,
-        undo,
-        redo,
-        onLayout,
-        handleInsertTemplate,
-        openStudioAI,
-        openStudioCode,
-        openStudioPlayback,
-        commandBarView,
-        handleAddAnnotation,
-        handleAddSection,
-        handleAddTextNode,
-        handleAddJourneyNode,
-        handleAddMindmapNode,
-        handleAddArchitectureNode,
-        handleAddImage,
-        handleAddWireframe,
-        handleAddDomainLibraryItem,
-        showGrid,
-        toggleGrid,
-        snapToGrid,
-        toggleSnap,
-        isHistoryOpen,
-        closeHistory,
-        snapshots,
-        manualSnapshots,
-        autoSnapshots,
-        saveSnapshot,
-        handleRestoreSnapshot,
-        deleteSnapshot,
-        selectedNode,
-        selectedNodes,
-        selectedEdge,
-        updateNodeData,
-        applyBulkNodeData,
-        updateNodeType,
-        updateEdge,
-        deleteNode,
-        duplicateNode,
-        deleteEdge,
-        updateNodeZIndex,
-        handleAddMindmapChild,
-        handleAddMindmapSibling,
-        handleAddArchitectureService,
-        handleCreateArchitectureBoundary,
-        clearSelection,
-        closeStudioPanel,
-        handleCommandBarApply,
-        handleAIRequest,
-        isGenerating,
-        chatMessages,
-        clearChat,
-        studioTab,
-        setStudioTab,
-        studioCodeMode,
-        setStudioCodeMode,
-        currentStepIndex,
-        totalSteps,
-        isPlaying,
-        startPlayback,
-        togglePlay,
-        stopPlayback,
-        jumpToStep,
-        nextStep,
-        prevStep,
-        playbackSpeed,
-        setPlaybackSpeed,
-        editorMode,
-    ]);
+    } = useFlowEditorScreenModel({ onGoHome });
 
     return (
-        <div className="w-full h-screen bg-[var(--brand-background)] flex flex-col relative" ref={reactFlowWrapper}>
-            {/* Header */}
-            <Suspense fallback={<TopNavFallback />}>
-                <LazyTopNav
-                    tabs={tabs}
-                    activeTabId={activeTabId}
-                    onSwitchTab={handleSwitchTab}
-                    onAddTab={handleAddTab}
-                    onCloseTab={handleCloseTab}
-                    onRenameTab={handleRenameTab}
-                    onExportPNG={handleExport}
-                    onExportSVG={handleSvgExport}
-                    onExportAnimated={handleAnimatedExport}
-                    onExportJSON={handleExportJSON}
-                    onExportMermaid={handleExportMermaid}
-                    onExportPlantUML={handleExportPlantUML}
-                    onExportOpenFlowDSL={handleExportOpenFlowDSL}
-                    onExportFigma={handleExportFigma}
-                    onImportJSON={handleImportJSON}
-                    onHistory={openHistory}
-                    onGoHome={onGoHome}
-                    onPlay={startPlayback}
-                    collaboration={collaborationTopNavState}
-                />
-            </Suspense>
-
-            <div className="flex min-h-0 flex-1 min-w-0 pt-16">
-                <div className="relative min-w-0 flex-1">
-                    <ErrorBoundary className="h-full">
-                        <FlowCanvas
-                            recordHistory={recordHistory}
-                            isSelectMode={isSelectMode}
-                            onCanvasEntityIntent={handleCanvasEntityIntent}
-                        />
-                    </ErrorBoundary>
-                </div>
-                {shouldRenderPanels ? (
-                    <Suspense fallback={null}>
-                        <LazyFlowEditorPanels {...flowEditorPanelsProps} />
-                    </Suspense>
-                ) : null}
-            </div>
-            {collaborationV1Enabled ? (
-                <Suspense fallback={null}>
-                    <LazyCollaborationPresenceOverlay remotePresence={remotePresence} />
-                </Suspense>
-            ) : null}
-
-            {/* Layout loading overlay */}
-            {isLayouting ? (
-                <Suspense fallback={null}>
-                    <LazyFlowEditorLayoutOverlay message={t('flowEditor.applyingLayout')} />
-                </Suspense>
-            ) : null}
-
-            {/* Toolbar (Hidden during playback) */}
-            {currentStepIndex === -1 && (
-                <Suspense fallback={null}>
-                    <LazyToolbar
-                        onCommandBar={() => openCommandBar('root')}
-                        onToggleStudio={toggleStudioPanel}
-                        isStudioOpen={editorMode === 'studio'}
-                        onOpenAssets={() => openCommandBar('assets')}
-                        onAddShape={handleAddShape}
-                        onUndo={undo}
-                        onRedo={redo}
-                        onLayout={handleLayoutWithContext}
-                        canUndo={canUndo}
-                        canRedo={canRedo}
-                        isSelectMode={isSelectMode}
-                        onToggleSelectMode={enableSelectMode}
-                        isCommandBarOpen={isCommandBarOpen}
-                        onTogglePanMode={enablePanMode}
-                        getCenter={getCenter}
+        <DiagramDiffProvider nodes={nodes} edges={edges} baselineSnapshot={diffBaseline} onStopCompare={() => setDiffBaseline(null)}>
+            <ArchitectureLintProvider nodes={nodes} edges={edges} rulesJson={viewSettings.lintRules}>
+                <div
+                    className="w-full h-screen flex flex-col relative transition-colors duration-150"
+                    ref={reactFlowWrapper}
+                    style={{
+                        background: cinematicExportState.active
+                            ? CINEMATIC_EXPORT_BACKGROUND
+                            : 'var(--brand-background)',
+                    }}
+                >
+                    <FlowEditorChrome
+                        tabs={tabs}
+                        activeTabId={activeTabId}
+                        topNav={flowEditorController.chrome.topNav}
+                        canvas={(
+                            <FlowCanvas
+                                recordHistory={recordHistory}
+                                isSelectMode={isSelectMode}
+                                onCanvasEntityIntent={flowEditorController.handleCanvasEntityIntent}
+                            />
+                        )}
+                        shouldRenderPanels={flowEditorController.shouldRenderPanels}
+                        panels={flowEditorController.panels}
+                        collaborationEnabled={collaborationEnabled}
+                        remotePresence={remotePresence}
+                        collaborationNodePositions={collaborationNodePositions}
+                        layoutMessage={t('flowEditor.applyingLayout')}
+                        isLayouting={isLayouting}
+                        playback={flowEditorController.chrome.playback}
+                        toolbar={flowEditorController.chrome.toolbar}
+                        emptyState={flowEditorController.chrome.emptyState}
                     />
-                </Suspense>
-            )}
 
-            {/* Playback Controls Overlay - Force Rebuild */}
-            {currentStepIndex >= 0 && (
-                <Suspense fallback={null}>
-                    <LazyPlaybackControls
-                        isPlaying={isPlaying}
-                        currentStepIndex={currentStepIndex}
-                        totalSteps={totalSteps}
-                        onPlayPause={togglePlay}
-                        onNext={nextStep}
-                        onPrev={prevStep}
-                        onStop={stopPlayback}
+                    <input
+                        ref={fileInputRef}
+                        type="file"
+                        accept=".json"
+                        onChange={onFileImport}
+                        className="hidden"
+                        id="json-import-input"
                     />
-                </Suspense>
-            )}
-
-            {/* Empty State */}
-            {nodes.length === 0 ? (
-                <Suspense fallback={null}>
-                    <LazyFlowEditorEmptyState
-                        title={t('flowEditor.emptyState.title')}
-                        description={t('flowEditor.emptyState.description')}
-                        generateLabel={t('flowEditor.emptyState.generateWithFlowpilot')}
-                        templatesLabel={t('flowEditor.emptyState.browseTemplates')}
-                        addNodeLabel={t('flowEditor.emptyState.addBlankNode')}
-                        onGenerate={() => openStudioPanel('ai')}
-                        onTemplates={() => openCommandBar('templates')}
-                        onAddNode={() => handleAddNode()}
+                    {shareViewerUrl && (
+                        <ShareEmbedModal viewerUrl={shareViewerUrl} onClose={clearShareViewerUrl} />
+                    )}
+                    <CinematicExportSurface
+                        ref={cinematicExportSurfaceRef}
+                        nodes={nodes}
+                        edges={edges}
                     />
-                </Suspense>
-            ) : null}
-
-            {/* Hidden file input for JSON import */}
-            <input
-                ref={fileInputRef}
-                type="file"
-                accept=".json"
-                onChange={onFileImport}
-                className="hidden"
-                id="json-import-input"
-            />
-        </div>
+                </div>
+            </ArchitectureLintProvider>
+        </DiagramDiffProvider>
     );
-};
+}
diff --git a/src/components/FlowEditorEmptyState.tsx b/src/components/FlowEditorEmptyState.tsx
index b8a5116..6bdd531 100644
--- a/src/components/FlowEditorEmptyState.tsx
+++ b/src/components/FlowEditorEmptyState.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { Layout, Plus, Sparkles } from 'lucide-react';
 import { Button } from './ui/Button';
 
 interface FlowEditorEmptyStateProps {
@@ -11,6 +10,7 @@ interface FlowEditorEmptyStateProps {
     onGenerate: () => void;
     onTemplates: () => void;
     onAddNode: () => void;
+    onSuggestionClick?: (prompt: string) => void;
 }
 
 export function FlowEditorEmptyState({
@@ -24,56 +24,59 @@ export function FlowEditorEmptyState({
     onAddNode,
 }: FlowEditorEmptyStateProps): React.ReactElement {
     return (
-        <div className="absolute inset-0 flex items-center justify-center z-0 pointer-events-none">
-            <div className="text-center space-y-6 pointer-events-auto bg-[var(--brand-surface)]/80 backdrop-blur-md p-8 rounded-[var(--radius-xl)] ring-1 ring-black/5 shadow-2xl">
-                <div className="w-20 h-20 bg-[var(--brand-primary-50)] rounded-[var(--radius-lg)] mx-auto flex items-center justify-center mb-4 ring-1 ring-black/5">
-                    <div className="w-12 h-12 bg-[var(--brand-primary-100)] rounded-[var(--radius-md)] flex items-center justify-center">
-                        <svg className="w-6 h-6 text-[var(--brand-primary)]" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+        <div className="absolute inset-0 flex items-center justify-center z-0 pointer-events-none animate-[fadeIn_200ms_ease-out]">
+            <div className="pointer-events-auto w-full max-w-[400px] px-6">
+                <div className="rounded-[var(--radius-md)] border border-slate-200/60 bg-[var(--brand-surface)] p-8 text-center shadow-[var(--shadow-md)] ring-1 ring-black/5">
+                    
+                    <div className="mx-auto mb-6 flex h-14 w-14 items-center justify-center rounded-[var(--radius-md)] bg-[var(--brand-primary-50)] text-[var(--brand-primary)]">
+                        <svg className="h-7 w-7" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2">
                             <path d="M12 4.5v15m7.5-7.5h-15" strokeLinecap="round" strokeLinejoin="round" />
                         </svg>
                     </div>
-                </div>
 
-                <div className="space-y-2">
-                    <h3 className="text-xl font-bold text-[var(--brand-text)]">{title}</h3>
-                    <p className="text-[var(--brand-text-secondary)] text-sm max-w-xs mx-auto">
+                    <h3 className="mb-2 text-xl font-semibold tracking-tight text-[var(--brand-text)]">
+                        {title}
+                    </h3>
+                    
+                    <p className="mb-8 text-[13px] leading-relaxed text-[var(--brand-secondary)]">
                         {description}
                     </p>
-                </div>
 
-                <div className="flex flex-col gap-3 w-full max-w-xs mx-auto pointer-events-auto">
-                    <Button
-                        onClick={onGenerate}
-                        variant="primary"
-                        size="lg"
-                        data-testid="empty-generate-ai"
-                        className="w-full shadow-lg"
-                        icon={<Sparkles className="w-4 h-4" />}
-                    >
-                        {generateLabel}
-                    </Button>
+                    <div className="flex flex-col gap-3">
+                        <Button
+                            onClick={onGenerate}
+                            variant="primary"
+                            size="lg"
+                            className="w-full"
+                            data-testid="empty-generate-ai"
+                        >
+                            {generateLabel}
+                        </Button>
 
-                    <Button
-                        onClick={onTemplates}
-                        variant="secondary"
-                        size="lg"
-                        data-testid="empty-browse-templates"
-                        className="w-full"
-                        icon={<Layout className="w-4 h-4" />}
-                    >
-                        {templatesLabel}
-                    </Button>
+                        <Button
+                            onClick={onTemplates}
+                            variant="secondary"
+                            size="lg"
+                            className="w-full"
+                            data-testid="empty-browse-templates"
+                        >
+                            {templatesLabel}
+                        </Button>
 
-                    <Button
-                        onClick={onAddNode}
-                        variant="secondary"
-                        size="lg"
-                        data-testid="empty-add-node"
-                        className="w-full"
-                        icon={<Plus className="w-4 h-4" />}
-                    >
-                        {addNodeLabel}
-                    </Button>
+                        <Button
+                            onClick={onAddNode}
+                            variant="secondary"
+                            size="lg"
+                            className="w-full"
+                            data-testid="empty-add-node"
+                        >
+                            {addNodeLabel}
+                        </Button>
+                    </div>
+
+                    <div className="mt-8 flex items-center justify-center text-xs text-[var(--brand-secondary)] opacity-80">
+                        Press <kbd className="mx-1.5 rounded border border-slate-200 bg-slate-50 px-1.5 py-0.5 font-sans font-medium text-slate-500">&#8984;K</kbd> for command center
+                    </div>
                 </div>
             </div>
         </div>
diff --git a/src/components/FlowEditorLayoutOverlay.tsx b/src/components/FlowEditorLayoutOverlay.tsx
index 6d288e6..e0b905f 100644
--- a/src/components/FlowEditorLayoutOverlay.tsx
+++ b/src/components/FlowEditorLayoutOverlay.tsx
@@ -7,7 +7,7 @@ interface FlowEditorLayoutOverlayProps {
 export function FlowEditorLayoutOverlay({ message }: FlowEditorLayoutOverlayProps): React.ReactElement {
     return (
         <div className="absolute inset-0 z-40 flex items-center justify-center bg-white/60 backdrop-blur-sm pointer-events-none" aria-live="polite">
-            <div className="flex items-center gap-3 px-6 py-3 bg-white rounded-2xl shadow-xl border border-slate-200">
+            <div className="flex items-center gap-3 rounded-2xl border border-slate-200 bg-white px-6 py-3 shadow-[var(--shadow-md)]">
                 <svg className="w-5 h-5 animate-spin text-[var(--brand-primary)]" viewBox="0 0 24 24" fill="none">
                     <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
                     <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
diff --git a/src/components/FlowEditorPanels.test.tsx b/src/components/FlowEditorPanels.test.tsx
index 7ba12e1..db2b9bb 100644
--- a/src/components/FlowEditorPanels.test.tsx
+++ b/src/components/FlowEditorPanels.test.tsx
@@ -36,7 +36,7 @@ const baseProps = {
     onLayout: vi.fn(async () => undefined),
     onSelectTemplate: vi.fn(),
     onOpenStudioAI: vi.fn(),
-    onOpenStudioFlowMind: vi.fn(),
+    onOpenStudioOpenFlow: vi.fn(),
     onOpenStudioMermaid: vi.fn(),
     onOpenStudioPlayback: vi.fn(),
     initialView: 'root' as const,
@@ -77,19 +77,40 @@ const baseProps = {
     onAddMindmapSibling: vi.fn(),
     onAddArchitectureService: vi.fn(),
     onCreateArchitectureBoundary: vi.fn(),
+    onApplyArchitectureTemplate: vi.fn(),
+    onGenerateEntityFields: vi.fn(),
+    onSuggestArchitectureNode: vi.fn(),
+    onConvertEntitySelectionToClassDiagram: vi.fn(),
+    onOpenMermaidCodeEditor: vi.fn(),
     onClose: vi.fn(),
   },
   studio: {
     onClose: vi.fn(),
     onApply: vi.fn(),
-    onAIGenerate: vi.fn(),
+    onAIGenerate: vi.fn(async () => true),
     isGenerating: false,
+    streamingText: null,
+    retryCount: 0,
+    cancelGeneration: vi.fn(),
+    pendingDiff: null,
+    onConfirmDiff: vi.fn(),
+    onDiscardDiff: vi.fn(),
+    aiReadiness: {
+      canGenerate: true,
+      blockingIssue: null,
+      advisory: null,
+    },
+    lastAIError: null,
+    onClearAIError: vi.fn(),
     chatMessages: [],
     onClearChat: vi.fn(),
     activeTab: 'ai' as const,
     onTabChange: vi.fn(),
     codeMode: 'openflow' as const,
     onCodeModeChange: vi.fn(),
+    selectedNode: null,
+    selectedNodeCount: 0,
+    onViewProperties: vi.fn(),
     playback: {
       currentStepIndex: -1,
       totalSteps: 0,
@@ -134,4 +155,16 @@ describe('FlowEditorPanels', () => {
     expect(await screen.findByTestId('studio-panel')).not.toBeNull();
     expect(screen.queryByTestId('properties-panel')).toBeNull();
   });
+
+  it('shows the properties panel for bulk selection even without a focused primary node', async () => {
+    render(
+      <FlowEditorPanels
+        {...baseProps}
+        editorMode="canvas"
+        properties={{ ...baseProps.properties, selectedNodes: [selectedNode as never, { ...selectedNode, id: 'node-2' } as never] }}
+      />
+    );
+
+    expect(await screen.findByTestId('properties-panel')).not.toBeNull();
+  });
 });
diff --git a/src/components/FlowEditorPanels.tsx b/src/components/FlowEditorPanels.tsx
index 6e6f329..2efdd53 100644
--- a/src/components/FlowEditorPanels.tsx
+++ b/src/components/FlowEditorPanels.tsx
@@ -8,6 +8,10 @@ import type { LayoutAlgorithm } from '@/services/elkLayout';
 import type { FlowTemplate } from '@/services/templates';
 import type { EdgeData, NodeData } from '@/lib/types';
 import type { DomainLibraryItem } from '@/services/domainLibrary';
+import type { SupportedLanguage } from '@/hooks/ai-generation/codeToArchitecture';
+import type { TerraformInputFormat } from '@/hooks/ai-generation/terraformToCloud';
+import type { AIReadinessState } from '@/hooks/ai-generation/readiness';
+
 import type { PropertiesPanel as PropertiesPanelComponent } from './PropertiesPanel';
 
 const LazyCommandBar = lazy(async () => {
@@ -44,7 +48,7 @@ export interface CommandBarPanelProps {
     ) => Promise<void>;
     onSelectTemplate: (template: FlowTemplate) => void;
     onOpenStudioAI: () => void;
-    onOpenStudioFlowMind: () => void;
+    onOpenStudioOpenFlow: () => void;
     onOpenStudioMermaid: () => void;
     onOpenStudioPlayback: () => void;
     initialView: CommandBarView;
@@ -54,10 +58,17 @@ export interface CommandBarPanelProps {
     onAddJourney?: () => void;
     onAddMindmap?: () => void;
     onAddArchitecture?: () => void;
+    onAddSequence?: () => void;
+    onAddClassNode?: () => void;
+    onAddEntityNode?: () => void;
     onAddImage: (imageUrl: string) => void;
     onAddBrowserWireframe: () => void;
     onAddMobileWireframe: () => void;
     onAddDomainLibraryItem?: (item: DomainLibraryItem) => void;
+    onCodeAnalysis?: (code: string, language: SupportedLanguage) => Promise<void>;
+    onSqlAnalysis?: (sql: string) => Promise<void>;
+    onTerraformAnalysis?: (input: string, format: TerraformInputFormat) => Promise<void>;
+    onOpenApiAnalysis?: (spec: string) => Promise<void>;
     showGrid: boolean;
     onToggleGrid: () => void;
     snapToGrid: boolean;
@@ -73,6 +84,7 @@ export interface SnapshotsPanelProps {
     onSaveSnapshot: (name: string) => void;
     onRestoreSnapshot: (snapshot: FlowSnapshot) => void;
     onDeleteSnapshot: (id: string) => void;
+    onCompareSnapshot?: (snapshot: FlowSnapshot) => void;
 }
 
 export interface PropertiesRailProps {
@@ -91,14 +103,31 @@ export interface PropertiesRailProps {
     onAddMindmapSibling: React.ComponentProps<typeof PropertiesPanelComponent>['onAddMindmapSibling'];
     onAddArchitectureService: React.ComponentProps<typeof PropertiesPanelComponent>['onAddArchitectureService'];
     onCreateArchitectureBoundary: React.ComponentProps<typeof PropertiesPanelComponent>['onCreateArchitectureBoundary'];
+    onApplyArchitectureTemplate: React.ComponentProps<typeof PropertiesPanelComponent>['onApplyArchitectureTemplate'];
+    onGenerateEntityFields: React.ComponentProps<typeof PropertiesPanelComponent>['onGenerateEntityFields'];
+    onSuggestArchitectureNode: React.ComponentProps<typeof PropertiesPanelComponent>['onSuggestArchitectureNode'];
+    onConvertEntitySelectionToClassDiagram: React.ComponentProps<typeof PropertiesPanelComponent>['onConvertEntitySelectionToClassDiagram'];
+    onOpenMermaidCodeEditor: React.ComponentProps<typeof PropertiesPanelComponent>['onOpenMermaidCodeEditor'];
     onClose: () => void;
 }
 
 export interface StudioRailProps {
     onClose: () => void;
     onApply: (nodes: FlowNode[], edges: FlowEdge[]) => void;
-    onAIGenerate: (prompt: string, imageBase64?: string) => Promise<void>;
+    onAIGenerate: (prompt: string, imageBase64?: string) => Promise<boolean>;
     isGenerating: boolean;
+    streamingText: string | null;
+    retryCount: number;
+    cancelGeneration: () => void;
+    pendingDiff: import('@/hooks/useAIGeneration').ImportDiff | null;
+    onConfirmDiff: () => void;
+    onDiscardDiff: () => void;
+    aiReadiness: AIReadinessState;
+    lastAIError: string | null;
+    onClearAIError: () => void;
+    selectedNode: FlowNode | null;
+    selectedNodeCount: number;
+    onViewProperties: () => void;
     chatMessages: ChatMessage[];
     onClearChat: () => void;
     activeTab: StudioTab;
@@ -118,6 +147,8 @@ export interface StudioRailProps {
         playbackSpeed: number;
         onPlaybackSpeedChange: (durationMs: number) => void;
     };
+    initialPrompt?: string;
+    onInitialPromptConsumed?: () => void;
 }
 
 export interface FlowEditorPanelsProps {
@@ -137,7 +168,7 @@ export function FlowEditorPanels({
     isHistoryOpen,
     editorMode,
 }: FlowEditorPanelsProps): React.ReactElement {
-    const showPropertiesRail = editorMode === 'canvas' && Boolean(properties.selectedNode || properties.selectedEdge);
+    const showPropertiesRail = editorMode === 'canvas' && Boolean(properties.selectedNode || properties.selectedEdge || properties.selectedNodes.length > 1);
     const showStudioRail = editorMode === 'studio';
     const railContent = showStudioRail ? (
         <Suspense fallback={null}>
@@ -148,6 +179,18 @@ export function FlowEditorPanels({
                 onApply={studio.onApply}
                 onAIGenerate={studio.onAIGenerate}
                 isGenerating={studio.isGenerating}
+                streamingText={studio.streamingText}
+                retryCount={studio.retryCount}
+                cancelGeneration={studio.cancelGeneration}
+                pendingDiff={studio.pendingDiff}
+                onConfirmDiff={studio.onConfirmDiff}
+                onDiscardDiff={studio.onDiscardDiff}
+                aiReadiness={studio.aiReadiness}
+                lastAIError={studio.lastAIError}
+                onClearAIError={studio.onClearAIError}
+                selectedNode={studio.selectedNode}
+                selectedNodeCount={studio.selectedNodeCount}
+                onViewProperties={studio.onViewProperties}
                 chatMessages={studio.chatMessages}
                 onClearChat={studio.onClearChat}
                 activeTab={studio.activeTab}
@@ -155,6 +198,8 @@ export function FlowEditorPanels({
                 codeMode={studio.codeMode}
                 onCodeModeChange={studio.onCodeModeChange}
                 playback={studio.playback}
+                initialPrompt={studio.initialPrompt}
+                onInitialPromptConsumed={studio.onInitialPromptConsumed}
             />
         </Suspense>
     ) : showPropertiesRail ? (
@@ -175,6 +220,11 @@ export function FlowEditorPanels({
                 onAddMindmapSibling={properties.onAddMindmapSibling}
                 onAddArchitectureService={properties.onAddArchitectureService}
                 onCreateArchitectureBoundary={properties.onCreateArchitectureBoundary}
+                onApplyArchitectureTemplate={properties.onApplyArchitectureTemplate}
+                onGenerateEntityFields={properties.onGenerateEntityFields}
+                onSuggestArchitectureNode={properties.onSuggestArchitectureNode}
+                onConvertEntitySelectionToClassDiagram={properties.onConvertEntitySelectionToClassDiagram}
+                onOpenMermaidCodeEditor={properties.onOpenMermaidCodeEditor}
                 onClose={properties.onClose}
             />
         </Suspense>
@@ -195,7 +245,7 @@ export function FlowEditorPanels({
                             onLayout={commandBar.onLayout}
                             onSelectTemplate={commandBar.onSelectTemplate}
                             onOpenStudioAI={commandBar.onOpenStudioAI}
-                            onOpenStudioFlowMind={commandBar.onOpenStudioFlowMind}
+                            onOpenStudioOpenFlow={commandBar.onOpenStudioOpenFlow}
                             onOpenStudioMermaid={commandBar.onOpenStudioMermaid}
                             onOpenStudioPlayback={commandBar.onOpenStudioPlayback}
                             initialView={commandBar.initialView}
@@ -205,10 +255,17 @@ export function FlowEditorPanels({
                             onAddJourney={commandBar.onAddJourney}
                             onAddMindmap={commandBar.onAddMindmap}
                             onAddArchitecture={commandBar.onAddArchitecture}
+                            onAddSequence={commandBar.onAddSequence}
+                            onAddClassNode={commandBar.onAddClassNode}
+                            onAddEntityNode={commandBar.onAddEntityNode}
                             onAddImage={commandBar.onAddImage}
                             onAddBrowserWireframe={commandBar.onAddBrowserWireframe}
                             onAddMobileWireframe={commandBar.onAddMobileWireframe}
                             onAddDomainLibraryItem={commandBar.onAddDomainLibraryItem}
+                            onCodeAnalysis={commandBar.onCodeAnalysis}
+                            onSqlAnalysis={commandBar.onSqlAnalysis}
+                            onTerraformAnalysis={commandBar.onTerraformAnalysis}
+                            onOpenApiAnalysis={commandBar.onOpenApiAnalysis}
                             settings={{
                                 showGrid: commandBar.showGrid,
                                 onToggleGrid: commandBar.onToggleGrid,
@@ -231,6 +288,7 @@ export function FlowEditorPanels({
                         onSaveSnapshot={snapshots.onSaveSnapshot}
                         onRestoreSnapshot={snapshots.onRestoreSnapshot}
                         onDeleteSnapshot={snapshots.onDeleteSnapshot}
+                        onCompareSnapshot={snapshots.onCompareSnapshot}
                     />
                 </Suspense>
             ) : null}
diff --git a/src/components/FlowTabs.tsx b/src/components/FlowTabs.tsx
index 44018bb..55e2860 100644
--- a/src/components/FlowTabs.tsx
+++ b/src/components/FlowTabs.tsx
@@ -3,6 +3,7 @@ import { Plus, X } from 'lucide-react';
 import { FlowTab } from '@/lib/types';
 import { IS_BEVELED } from '@/lib/brand';
 import { useTranslation } from 'react-i18next';
+import { getSegmentedTabButtonClass } from './ui/SegmentedTabs';
 
 interface FlowTabsProps {
   tabs: FlowTab[];
@@ -25,6 +26,8 @@ export const FlowTabs: React.FC<FlowTabsProps> = ({
   const isBeveled = IS_BEVELED;
   const [editingTabId, setEditingTabId] = useState<string | null>(null);
   const [editName, setEditName] = useState('');
+  const activeTabClassName = `${getSegmentedTabButtonClass(true, 'sm')} h-10 sm:h-9 border-[var(--brand-primary-200)] bg-[var(--brand-primary-50)] text-[var(--brand-primary-700)]`;
+  const inactiveTabClassName = `${getSegmentedTabButtonClass(false, 'sm')} h-10 sm:h-9 border-slate-200 bg-white text-slate-600 hover:border-slate-300 hover:bg-slate-50 hover:text-slate-700`;
 
   const handleStartEdit = (tab: FlowTab) => {
     setEditingTabId(tab.id);
@@ -49,17 +52,17 @@ export const FlowTabs: React.FC<FlowTabsProps> = ({
   };
 
   return (
-    <div className="flex items-center justify-center px-4 pointer-events-auto">
-      <div className="flex items-center gap-1 overflow-x-auto no-scrollbar max-w-xl">
+    <div className="pointer-events-auto flex min-w-0 items-center justify-center px-2 sm:px-4">
+      <div className="flex max-w-full min-w-0 items-center gap-1 overflow-x-auto no-scrollbar">
         {tabs.map((tab) => (
           <div
             key={tab.id}
             data-testid="flow-tab"
             className={`
-              group relative flex items-center gap-2 px-3 py-1.5 rounded-[var(--brand-radius)] cursor-pointer select-none transition-all border
+              group relative flex items-center gap-2 cursor-pointer select-none transition-all
               ${activeTabId === tab.id
-                ? 'bg-[var(--brand-primary-50)] border-[var(--brand-primary-200)] text-[var(--brand-primary-700)] font-medium shadow-sm'
-                : 'border-transparent text-slate-600 hover:bg-slate-100 hover:text-slate-900'
+                ? activeTabClassName
+                : inactiveTabClassName
               }
             `}
             onClick={() => onSwitchTab(tab.id)}
@@ -73,12 +76,12 @@ export const FlowTabs: React.FC<FlowTabsProps> = ({
                 onChange={(e) => setEditName(e.target.value)}
                 onBlur={handleFinishEdit}
                 onKeyDown={handleKeyDown}
-                className="bg-white border border-[var(--brand-primary-300)] rounded-[calc(var(--brand-radius)-4px)] px-1 py-0 text-xs font-medium w-24 outline-none focus:ring-1 focus:ring-[var(--brand-primary)]"
+                className="bg-white border border-[var(--brand-primary-300)] rounded-[var(--radius-xs)] px-1 py-0 text-xs font-medium w-24 outline-none focus:ring-1 focus:ring-[var(--brand-primary)]"
                 autoFocus
                 onClick={(e) => e.stopPropagation()}
               />
             ) : (
-              <span className="text-xs max-w-[120px] truncate">{tab.name}</span>
+              <span className="max-w-[96px] truncate text-xs sm:max-w-[120px]">{tab.name}</span>
             )}
 
             <button
@@ -88,7 +91,7 @@ export const FlowTabs: React.FC<FlowTabsProps> = ({
               }}
               title={t('flowTabs.closeTab')}
               className={`
-                p-0.5 rounded-full hover:bg-slate-200 transition-colors opacity-0 group-hover:opacity-100
+                rounded-full p-1 transition-colors opacity-0 group-hover:opacity-100 hover:bg-slate-200
                 ${activeTabId === tab.id ? 'text-[var(--brand-primary-400)] hover:text-[var(--brand-primary)]' : 'text-slate-400 hover:text-slate-600'}
               `}
             >
@@ -100,7 +103,7 @@ export const FlowTabs: React.FC<FlowTabsProps> = ({
         <button
           onClick={onAddTab}
           data-testid="flow-tab-add"
-          className={`p-1.5 ml-1 rounded-full text-slate-400 hover:text-[var(--brand-primary)] hover:bg-[var(--brand-primary-50)] transition-colors ${isBeveled ? 'btn-beveled bg-white' : ''}`}
+          className={`ml-1 flex h-10 w-10 items-center justify-center rounded-full text-slate-400 transition-colors hover:bg-[var(--brand-primary-50)] hover:text-[var(--brand-primary)] sm:h-9 sm:w-9 ${isBeveled ? 'btn-beveled bg-white' : ''}`}
           title={t('flowTabs.newFlowTab')}
         >
           <Plus className="w-4 h-4" />
diff --git a/src/components/GroupNode.tsx b/src/components/GroupNode.tsx
index 8ff162d..d37ce84 100644
--- a/src/components/GroupNode.tsx
+++ b/src/components/GroupNode.tsx
@@ -4,7 +4,6 @@ import type { LegacyNodeProps } from '@/lib/reactflowCompat';
 import type { NodeData } from '@/lib/types';
 import { getNodeParentId } from '@/lib/nodeParent';
 import { ChevronDown, ChevronRight, FolderOpen, FolderClosed } from 'lucide-react';
-import { ROLLOUT_FLAGS } from '@/config/rolloutFlags';
 import { getConnectorHandleStyle, getHandlePointerEvents, getV2HandleVisibilityClass } from './handleInteraction';
 import { NodeTransformControls } from './NodeTransformControls';
 import { useActiveNodeSelection } from './useActiveNodeSelection';
@@ -24,7 +23,7 @@ function GroupNode({ id, data, selected }: LegacyNodeProps<NodeData>): React.Rea
     const [collapsed, setCollapsed] = useState(false);
     const { setNodes } = useReactFlow();
     const allNodes = useNodes();
-    const visualQualityV2Enabled = ROLLOUT_FLAGS.visualQualityV2;
+    const visualQualityV2Enabled = true;
     const isActiveSelected = useActiveNodeSelection(Boolean(selected));
     const handlePointerEvents = getHandlePointerEvents(visualQualityV2Enabled, isActiveSelected);
     const handleVisibilityClass = visualQualityV2Enabled
diff --git a/src/components/HomePage.integration.test.tsx b/src/components/HomePage.integration.test.tsx
index 3dc9070..88b4311 100644
--- a/src/components/HomePage.integration.test.tsx
+++ b/src/components/HomePage.integration.test.tsx
@@ -30,8 +30,9 @@ describe('HomePage integration flows', () => {
                 <MemoryRouter>
                     <HomePage
                         onLaunch={vi.fn()}
+                        onLaunchWithTemplates={vi.fn()}
+                        onLaunchWithAI={vi.fn()}
                         onImportJSON={vi.fn()}
-                        onRestoreSnapshot={vi.fn()}
                         onOpenFlow={vi.fn()}
                         {...props}
                     />
@@ -45,7 +46,26 @@ describe('HomePage integration flows', () => {
 
         fireEvent.click(screen.getByText('Settings'));
         expect(screen.getByRole('heading', { name: 'Settings' })).toBeTruthy();
-        expect(screen.getByText('Flowpilot AI')).toBeTruthy();
+        expect(screen.getByText('Flowpilot')).toBeTruthy();
+    });
+
+    it('exposes template and flowpilot entry points in the empty dashboard state', async () => {
+        const onLaunchWithTemplates = vi.fn();
+        const onLaunchWithAI = vi.fn();
+        useFlowStore.setState({
+            tabs: [],
+            activeTabId: null,
+            nodes: [],
+            edges: [],
+        });
+
+        await renderHomePage({ onLaunchWithTemplates, onLaunchWithAI });
+
+        fireEvent.click(screen.getByTestId('home-open-templates'));
+        fireEvent.click(screen.getByRole('button', { name: 'Generate with Flowpilot' }));
+
+        expect(onLaunchWithTemplates).toHaveBeenCalledTimes(1);
+        expect(onLaunchWithAI).toHaveBeenCalledTimes(1);
     });
 
     it('opens persisted flows from the dashboard list', async () => {
diff --git a/src/components/HomePage.tsx b/src/components/HomePage.tsx
index fc55cec..6d1dfd6 100644
--- a/src/components/HomePage.tsx
+++ b/src/components/HomePage.tsx
@@ -1,7 +1,6 @@
 import React, { Suspense, lazy, useState } from 'react';
 import { useFlowStore } from '../store';
 import { useTabActions, useTabsState } from '@/store/tabHooks';
-import { FlowSnapshot } from '@/lib/types';
 import { HomeDashboard, type HomeFlowCard } from './home/HomeDashboard';
 import { HomeFlowDeleteDialog, HomeFlowRenameDialog } from './home/HomeFlowDialogs';
 import { HomeSettingsView } from './home/HomeSettingsView';
@@ -15,8 +14,9 @@ const LazyWelcomeModal = lazy(async () => {
 
 interface HomePageProps {
     onLaunch: () => void;
+    onLaunchWithTemplates: () => void;
+    onLaunchWithAI: () => void;
     onImportJSON: () => void;
-    onRestoreSnapshot: (snapshot: FlowSnapshot) => void;
     onOpenFlow: (flowId: string) => void;
     activeTab?: 'home' | 'settings';
     onSwitchTab?: (tab: 'home' | 'settings') => void;
@@ -24,8 +24,9 @@ interface HomePageProps {
 
 export const HomePage: React.FC<HomePageProps> = ({
     onLaunch,
+    onLaunchWithTemplates,
+    onLaunchWithAI,
     onImportJSON,
-    onRestoreSnapshot: _onRestoreSnapshot,
     onOpenFlow,
     activeTab: propActiveTab,
     onSwitchTab
@@ -112,27 +113,23 @@ export const HomePage: React.FC<HomePageProps> = ({
     };
 
     return (
-        <div className="min-h-screen bg-[var(--brand-background)] flex text-[var(--brand-text)]">
+        <div className="min-h-screen bg-[var(--brand-background)] flex flex-col text-[var(--brand-text)] md:flex-row">
             <HomeSidebar
                 activeTab={activeTab}
                 onTabChange={handleTabChange}
             />
 
             {/* Main Content */}
-            <main className="ml-64 flex-1 flex flex-col min-w-0 bg-[var(--brand-surface)]">
+            <main className="flex-1 flex min-w-0 flex-col bg-[var(--brand-surface)] md:ml-64">
 
                 {activeTab === 'home' && (
                     <HomeDashboard
                         flows={flows}
-                        onCreateNew={() => {
-                            onLaunch();
-                        }}
-                        onImportJSON={() => {
-                            onImportJSON();
-                        }}
-                        onOpenFlow={(flowId) => {
-                            onOpenFlow(flowId);
-                        }}
+                        onCreateNew={onLaunch}
+                        onOpenTemplates={onLaunchWithTemplates}
+                        onPromptWithAI={onLaunchWithAI}
+                        onImportJSON={onImportJSON}
+                        onOpenFlow={onOpenFlow}
                         onRenameFlow={handleRenameFlow}
                         onDuplicateFlow={(flowId) => {
                             const newFlowId = duplicateTab(flowId);
@@ -167,7 +164,12 @@ export const HomePage: React.FC<HomePageProps> = ({
             />
             {showWelcomeModal ? (
                 <Suspense fallback={null}>
-                    <LazyWelcomeModal />
+                    <LazyWelcomeModal
+                        onOpenTemplates={onLaunchWithTemplates}
+                        onPromptWithAI={onLaunchWithAI}
+                        onImport={onImportJSON}
+                        onBlankCanvas={onLaunch}
+                    />
                 </Suspense>
             ) : null}
         </div>
diff --git a/src/components/ImageNode.tsx b/src/components/ImageNode.tsx
index 0372ffa..d9b766f 100644
--- a/src/components/ImageNode.tsx
+++ b/src/components/ImageNode.tsx
@@ -3,9 +3,10 @@ import type { LegacyNodeProps } from '@/lib/reactflowCompat';
 import type { NodeData } from '@/lib/types';
 import { NodeChrome } from './NodeChrome';
 
-function ImageNode({ data, selected }: LegacyNodeProps<NodeData>): React.ReactElement {
+function ImageNode({ id, data, selected }: LegacyNodeProps<NodeData>): React.ReactElement {
     return (
         <NodeChrome
+            nodeId={id}
             selected={Boolean(selected)}
             minWidth={50}
             minHeight={50}
diff --git a/src/components/KeyboardShortcutsModal.tsx b/src/components/KeyboardShortcutsModal.tsx
index 49ba463..6e92ada 100644
--- a/src/components/KeyboardShortcutsModal.tsx
+++ b/src/components/KeyboardShortcutsModal.tsx
@@ -39,8 +39,9 @@ export function KeyboardShortcutsModal(): React.JSX.Element | null {
                 role="dialog"
                 aria-modal="true"
                 aria-labelledby="keyboard-shortcuts-title"
-                className="bg-white shadow-2xl max-w-2xl w-full border border-slate-200/60 flex flex-col overflow-hidden animate-in zoom-in duration-200"
-                style={{ borderRadius: 'var(--brand-radius, 20px)' }}
+                aria-describedby="keyboard-shortcuts-description"
+                className="max-w-2xl w-full overflow-hidden border border-slate-200/60 bg-white shadow-[var(--shadow-overlay)] flex flex-col animate-in zoom-in duration-200"
+                style={{ borderRadius: 'var(--radius-xl)' }}
             >
                 {/* Header */}
                 <div className="flex items-center justify-between p-6 border-b border-slate-100">
@@ -50,14 +51,14 @@ export function KeyboardShortcutsModal(): React.JSX.Element | null {
                             style={{
                                 background: 'var(--brand-primary-50, #eef2ff)',
                                 color: 'var(--brand-primary, #6366f1)',
-                                borderRadius: 'calc(var(--brand-radius, 24px) * 0.4)'
+                                borderRadius: 'var(--radius-md)'
                             }}
                         >
                             <Keyboard className="w-5 h-5" />
                         </div>
                         <div>
                             <h2 id="keyboard-shortcuts-title" className="text-lg font-bold leading-none">{t('keyboardShortcutsModal.title')}</h2>
-                            <p className="text-xs text-slate-500 mt-1">{t('keyboardShortcutsModal.subtitle')}</p>
+                            <p id="keyboard-shortcuts-description" className="text-xs text-slate-500 mt-1">{t('keyboardShortcutsModal.subtitle')}</p>
                         </div>
                     </div>
                     <button
diff --git a/src/components/LandingPage.tsx b/src/components/LandingPage.tsx
deleted file mode 100644
index 075ee7b..0000000
--- a/src/components/LandingPage.tsx
+++ /dev/null
@@ -1,110 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Navbar } from './landing/Navbar';
-import { HeroSection } from './landing/HeroSection';
-import { CodeDemo } from './landing/CodeDemo';
-import { ProblemSection } from './landing/ProblemSection';
-import { SolutionSection } from './landing/SolutionSection';
-import { FigmaSection } from './landing/FigmaSection';
-import { UseCases } from './landing/UseCases';
-import { PricingSection } from './landing/PricingSection';
-import { Testimonials } from './landing/Testimonials';
-import { FinalCTASection } from './landing/FinalCTASection';
-import { Footer } from './landing/Footer';
-import { RefreshCw } from 'lucide-react';
-
-interface LandingPageProps {
-    onLaunch: () => void;
-}
-
-export const LandingPage: React.FC<LandingPageProps> = ({ onLaunch }) => {
-    const { t } = useTranslation();
-    const [isScrolled, setIsScrolled] = useState(false);
-
-    useEffect(() => {
-        const handleScroll = () => setIsScrolled(window.scrollY > 20);
-        window.addEventListener('scroll', handleScroll, { passive: true });
-        return () => window.removeEventListener('scroll', handleScroll);
-    }, []);
-
-    return (
-        <div className="min-h-screen bg-white text-[#111111] font-sans selection:bg-indigo-100 selection:text-indigo-900 relative">
-            <Navbar isScrolled={isScrolled} onLaunch={onLaunch} />
-            <main className="relative z-10">
-                <HeroSection onLaunch={onLaunch} />
-
-                <ProblemSection />
-
-                <SolutionSection />
-
-                {/* DEMO SECTION - Immersive Billboard Aesthetic */}
-                <section className="py-32 md:py-48 relative overflow-hidden bg-white">
-                    {/* CAD Texture - Technical "Blueprint" Contrast */}
-                    <div className="absolute inset-0 bg-[linear-gradient(45deg,#80808003_1px,transparent_1px),linear-gradient(-45deg,#80808003_1px,transparent_1px)] bg-[size:32px_32px] [mask-image:radial-gradient(ellipse_60%_60%_at_50%_50%,#000_20%,transparent_100%)]"></div>
-
-                    {/* Atmospheric Studio Glows */}
-                    <div className="absolute top-[10%] left-1/2 -translate-x-1/2 w-[80vw] h-[60vw] bg-brand-blue/[0.02] rounded-full blur-[120px] pointer-events-none"></div>
-                    <div className="absolute bottom-[-10%] right-[-10%] w-[40vw] h-[40vw] bg-purple-500/[0.015] rounded-full blur-[100px] pointer-events-none animate-pulse-slow"></div>
-
-                    <div className="container mx-auto px-6 relative z-10">
-                        {/* Central Epic Header */}
-                        <div className="flex flex-col items-center text-center mb-24 max-w-5xl mx-auto">
-                            {/* Badge with Heartbeat */}
-                            <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-brand-primary/5 border border-brand-primary/10 text-brand-primary/60 mb-10 font-mono text-[10px] uppercase tracking-[0.2em] font-bold relative overflow-hidden ring-1 ring-brand-primary/5">
-                                <div className="absolute inset-0 bg-brand-primary/5 animate-pulse"></div>
-                                <RefreshCw className="w-3 h-3 text-brand-blue relative z-10 animate-spin-slow" />
-                                <span className="relative z-10">{t('demo.livePreview')}</span>
-                            </div>
-
-                            <h2 className="text-6xl md:text-[100px] font-bold text-brand-dark mb-10 tracking-[-0.05em] leading-[1.1] text-balance">
-                                {t('demo.title')} <br className="hidden md:block" />
-                                <span className="font-serif italic font-normal text-brand-primary">{t('demo.subtitle')}</span>
-                            </h2>
-
-                            <p className="text-xl md:text-2xl text-brand-secondary leading-relaxed font-medium max-w-3xl text-balance opacity-80">
-                                {t('demo.description1')} <br className="hidden md:block" />
-                                {t('demo.description2')}
-                            </p>
-                        </div>
-
-                        {/* Immersive Stage for Demo */}
-                        <div className="relative max-w-6xl mx-auto">
-                            {/* Deep Floor Shadow */}
-                            <div className="absolute -bottom-16 left-1/2 -translate-x-1/2 w-[90%] h-32 bg-brand-dark/[0.04] blur-[80px] rounded-[100%]"></div>
-
-                            {/* The Elevated Platform */}
-                            <div className="relative rounded-3xl p-1.5 bg-gradient-to-b from-white via-white to-gray-50/50 border border-brand-border/40 shadow-[0_32px_64px_-16px_rgba(0,0,0,0.08)] ring-1 ring-black/5">
-                                <CodeDemo />
-                            </div>
-
-                            {/* Floating Capabilities Badge - Right */}
-                            <div className="absolute -right-8 top-1/4 hidden lg:block animate-float">
-                                <div className="bg-white/90 backdrop-blur-md border border-brand-border/60 p-4 rounded-2xl shadow-xl ring-1 ring-black/5 flex items-center gap-4">
-                                    <div className="w-10 h-10 rounded-xl bg-brand-blue/10 flex items-center justify-center">
-                                        <RefreshCw className="w-5 h-5 text-brand-blue" />
-                                    </div>
-                                    <div>
-                                        <div className="text-xs font-bold text-brand-dark">{t('demo.liveSync')}</div>
-                                        <div className="text-[10px] text-brand-secondary">{t('demo.liveSyncDesc')}</div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </section>
-
-                <FigmaSection />
-                <UseCases />
-                <PricingSection onLaunch={onLaunch} />
-                <Testimonials />
-                <FinalCTASection onLaunch={onLaunch} />
-
-                {/* Footer Banner */}
-                <div className="bg-brand-primary text-white py-2.5 text-center font-medium text-xs tracking-wide">
-                    🚀 {t('footerBanner.shipping')} <a href="#/docs/v1-beta-launch" className="underline cursor-pointer opacity-90 hover:opacity-100 ml-1">{t('footerBanner.checkChangelog')}</a>
-                </div>
-            </main>
-            <Footer onLaunch={onLaunch} />
-        </div>
-    );
-};
diff --git a/src/components/LanguageSelector.tsx b/src/components/LanguageSelector.tsx
index 68e1d68..8cf2a8b 100644
--- a/src/components/LanguageSelector.tsx
+++ b/src/components/LanguageSelector.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Globe, Check, ChevronDown } from 'lucide-react';
-import { useNavigate, useLocation, useParams } from 'react-router-dom';
 import { useVisualSettingsActions } from '@/store/viewHooks';
 
 interface Language {
@@ -45,7 +44,6 @@ function LanguageDropdown({
   onClose,
   width = 'w-60', // Widened to accommodate badges
 }: LanguageDropdownProps): React.JSX.Element | null {
-  const { t } = useTranslation();
   if (!isOpen) return null;
 
   const positionClass = placement === 'top' ? 'bottom-full mb-2' : 'top-full mt-2';
@@ -60,13 +58,13 @@ function LanguageDropdown({
         aria-label="Close language selector"
       />
       <div
-        className={`absolute right-0 ${positionClass} ${width} bg-white/95 backdrop-blur-xl rounded-lg shadow-xl border border-slate-200 ring-1 ring-black/5 p-1 z-50 animate-in fade-in zoom-in-95 duration-200 ${originClass}`}
+        className={`absolute right-0 ${positionClass} ${width} rounded-[var(--radius-lg)] border border-slate-200 bg-white/95 p-1 shadow-[var(--shadow-md)] ring-1 ring-black/5 backdrop-blur-xl z-50 animate-in fade-in zoom-in-95 duration-200 ${originClass}`}
       >
         {LANGUAGES.map((lang) => (
           <button
             key={lang.code}
             onClick={() => onSelect(lang.code)}
-            className={`flex items-center justify-between w-full px-3 py-2.5 rounded-md text-sm font-medium transition-all ${currentCode === lang.code
+            className={`flex items-center justify-between w-full px-3 py-2.5 rounded-[var(--radius-sm)] text-sm font-medium transition-all ${currentCode === lang.code
               ? 'bg-[var(--brand-primary-50)] text-[var(--brand-primary)]'
               : 'text-slate-600 hover:bg-slate-50'
               }`}
@@ -76,7 +74,7 @@ function LanguageDropdown({
               <span className="flex items-center gap-2">
                 {lang.nativeName}
                 {lang.scope === 'ui' && (
-                  <span className="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-semibold bg-slate-100 text-slate-500 uppercase tracking-wider">
+                  <span className="inline-flex items-center px-1.5 py-0.5 rounded-[var(--radius-xs)] text-[10px] font-semibold bg-slate-100 text-slate-500 uppercase tracking-wider">
                     UI Only
                   </span>
                 )}
@@ -98,9 +96,6 @@ export const LanguageSelector: React.FC<LanguageSelectorProps> = ({
   const { i18n } = useTranslation();
   const [isOpen, setIsOpen] = React.useState(false);
   const { setViewSettings } = useVisualSettingsActions();
-  const navigate = useNavigate();
-  const location = useLocation();
-  const { slug } = useParams();
 
   const currentLanguage = LANGUAGES.find((l) => l.code === i18n.language) ?? LANGUAGES[0];
 
@@ -108,10 +103,6 @@ export const LanguageSelector: React.FC<LanguageSelectorProps> = ({
     await i18n.changeLanguage(code);
     setViewSettings({ language: code });
 
-    if (location.pathname.startsWith('/docs') && slug) {
-      navigate(`/docs/${code}/${slug}`, { replace: true });
-    }
-
     setIsOpen(false);
   }
 
@@ -125,7 +116,7 @@ export const LanguageSelector: React.FC<LanguageSelectorProps> = ({
       <div className="relative w-full">
         <button
           onClick={() => setIsOpen(!isOpen)}
-          className="flex items-center justify-between w-full px-3 py-2 rounded-lg border border-slate-200 transition-all text-sm font-medium bg-white text-slate-700 hover:bg-slate-50 hover:border-slate-300"
+          className="flex items-center justify-between w-full px-3 py-2 rounded-[var(--radius-md)] border border-slate-200 transition-all text-sm font-medium bg-white text-slate-700 hover:bg-slate-50 hover:border-slate-300"
         >
           <div className="flex items-center gap-2">
             <img src={currentLanguage.flag} alt={currentLanguage.name} className="w-5 h-3.5 object-cover rounded-[2px] border border-slate-200 shadow-sm" />
@@ -150,7 +141,7 @@ export const LanguageSelector: React.FC<LanguageSelectorProps> = ({
       <div className="relative">
         <button
           onClick={() => setIsOpen(!isOpen)}
-          className="flex items-center gap-1.5 px-2 py-1.5 rounded-md transition-all text-sm font-medium bg-transparent text-slate-600 hover:bg-slate-100"
+          className="flex items-center gap-1.5 px-2 py-1.5 rounded-[var(--radius-sm)] transition-all text-sm font-medium bg-transparent text-slate-600 hover:bg-slate-100"
           title="Change Language"
         >
           <img src={currentLanguage.flag} alt={currentLanguage.name} className="w-5 h-3.5 object-cover rounded-[2px] border border-slate-200 shadow-sm" />
diff --git a/src/components/NavigationControls.tsx b/src/components/NavigationControls.tsx
index 2dcee2f..5d9547a 100644
--- a/src/components/NavigationControls.tsx
+++ b/src/components/NavigationControls.tsx
@@ -6,7 +6,7 @@ import { useTranslation } from 'react-i18next';
 import { useShortcutHelpActions } from '@/store/viewHooks';
 
 const controlButtonClassName =
-    'p-2 text-slate-500 hover:text-slate-900 hover:bg-slate-100 rounded-[var(--radius-sm)] transition-all active:scale-95';
+    'flex min-h-10 min-w-10 items-center justify-center rounded-[var(--radius-sm)] p-2 text-slate-500 transition-all hover:bg-slate-100 hover:text-slate-900 active:scale-95 sm:min-h-9 sm:min-w-9';
 
 export function NavigationControls(): React.ReactElement {
     const { t } = useTranslation();
@@ -15,8 +15,8 @@ export function NavigationControls(): React.ReactElement {
     const { setShortcutsHelpOpen } = useShortcutHelpActions();
 
     return (
-        <div className="absolute bottom-8 left-8 flex flex-col gap-2 z-50">
-            <div className="flex flex-col p-1 bg-white shadow-2xl rounded-[var(--radius-lg)] border border-slate-100 ring-1 ring-slate-900/5">
+        <div className="absolute bottom-8 left-4 flex flex-col gap-2 z-50">
+            <div className="flex flex-col p-1 bg-white shadow-[var(--shadow-md)] rounded-[var(--radius-lg)] border border-slate-100 ring-1 ring-slate-900/5">
                 <Tooltip text={t('navigationControls.zoomIn')} side="right">
                     <button
                         onClick={() => zoomIn({ duration: 300 })}
diff --git a/src/components/NodeChrome.tsx b/src/components/NodeChrome.tsx
index f1f9152..c6d298b 100644
--- a/src/components/NodeChrome.tsx
+++ b/src/components/NodeChrome.tsx
@@ -1,9 +1,10 @@
 import React from 'react';
 import { Handle, Position } from '@/lib/reactflowCompat';
-import { ROLLOUT_FLAGS } from '@/config/rolloutFlags';
 import { getConnectorHandleStyle, getHandlePointerEvents, getV2HandleVisibilityClass } from './handleInteraction';
+import { useCinematicExportState } from '@/context/CinematicExportContext';
 import { NodeTransformControls } from './NodeTransformControls';
 import { useActiveNodeSelection } from './useActiveNodeSelection';
+import { NodeQuickCreateButtons } from './NodeQuickCreateButtons';
 
 type HandleSide = 'top' | 'right' | 'bottom' | 'left';
 
@@ -14,6 +15,7 @@ type HandleConfig = {
 };
 
 type NodeChromeProps = {
+  nodeId?: string;
   selected: boolean;
   minWidth: number;
   minHeight: number;
@@ -35,7 +37,44 @@ const DEFAULT_HANDLES: HandleConfig[] = [
   { id: 'left', position: Position.Left, side: 'left' },
 ];
 
+function getCinematicNodePresentation(params: {
+  active: boolean;
+  isVisible: boolean;
+  isActive: boolean;
+  progress: number;
+}): Pick<React.CSSProperties, 'opacity' | 'transform' | 'filter'> {
+  const { active, isVisible, isActive, progress } = params;
+
+  if (!active) {
+    return {
+      opacity: 1,
+      transform: 'translateY(0px) scale(1)',
+      filter: undefined,
+    };
+  }
+
+  if (!isActive) {
+    return {
+      opacity: isVisible ? 1 : 0,
+      transform: 'translateY(0px) scale(1)',
+      filter: undefined,
+    };
+  }
+
+  const translateY = 8 * (1 - progress);
+  const scale = 0.985 + (0.015 * progress);
+  const glowRadius = 14 + Math.round(progress * 12);
+  const bloomRadius = 5 + Math.round(progress * 7);
+
+  return {
+    opacity: Math.max(0, progress),
+    transform: `translateY(${translateY}px) scale(${scale})`,
+    filter: `drop-shadow(0 10px ${glowRadius}px rgba(59,130,246,0.18)) drop-shadow(0 0 ${bloomRadius}px rgba(96,165,250,0.24))`,
+  };
+}
+
 export function NodeChrome({
+  nodeId,
   selected,
   minWidth,
   minHeight,
@@ -46,7 +85,8 @@ export function NodeChrome({
   handles = DEFAULT_HANDLES,
   children,
 }: NodeChromeProps): React.ReactElement {
-  const visualQualityV2Enabled = ROLLOUT_FLAGS.visualQualityV2;
+  const cinematicExportState = useCinematicExportState();
+  const visualQualityV2Enabled = true;
   const isActiveSelected = useActiveNodeSelection(selected);
   const handlePointerEvents = getHandlePointerEvents(visualQualityV2Enabled, isActiveSelected);
   const handleVisibilityClass = visualQualityV2Enabled
@@ -55,14 +95,33 @@ export function NodeChrome({
       ? 'opacity-100'
       : 'opacity-0 group-hover:opacity-100 [.is-connecting_&]:opacity-100';
 
+  const isCinematicNodeVisible = !nodeId || !cinematicExportState.active || cinematicExportState.visibleNodeIds.has(nodeId);
+  const isActiveCinematicNode = Boolean(nodeId) && cinematicExportState.active && cinematicExportState.activeNodeId === nodeId;
+  const activeNodeProgress = isActiveCinematicNode ? cinematicExportState.activeNodeProgress : 0;
+  const cinematicPresentation = getCinematicNodePresentation({
+    active: cinematicExportState.active,
+    isVisible: isCinematicNodeVisible,
+    isActive: isActiveCinematicNode,
+    progress: activeNodeProgress,
+  });
+
   return (
-    <div className="group relative h-full w-full">
+    <div
+      className="group relative h-full w-full"
+      style={{
+        opacity: cinematicPresentation.opacity,
+        transform: cinematicPresentation.transform,
+        transformOrigin: 'center center',
+        filter: cinematicPresentation.filter,
+      }}
+    >
       <NodeTransformControls
         isVisible={selected}
         minWidth={minWidth}
         minHeight={minHeight}
         keepAspectRatio={keepAspectRatio}
       />
+      {nodeId ? <NodeQuickCreateButtons nodeId={nodeId} visible={selected} /> : null}
       {children}
       {handles.map(({ id, position, side }) => (
         <Handle
diff --git a/src/components/NodeQuickCreateButtons.tsx b/src/components/NodeQuickCreateButtons.tsx
new file mode 100644
index 0000000..62be1d8
--- /dev/null
+++ b/src/components/NodeQuickCreateButtons.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import { Plus } from 'lucide-react';
+import { requestNodeQuickCreate, type QuickCreateDirection } from '@/hooks/nodeQuickCreateRequest';
+
+interface NodeQuickCreateButtonsProps {
+  nodeId: string;
+  visible: boolean;
+}
+
+const BUTTON_POSITIONS: Record<QuickCreateDirection, string> = {
+  up: 'left-1/2 top-0 -translate-x-1/2 -translate-y-1/2',
+  right: 'right-0 top-1/2 translate-x-1/2 -translate-y-1/2',
+  down: 'bottom-0 left-1/2 -translate-x-1/2 translate-y-1/2',
+  left: 'left-0 top-1/2 -translate-x-1/2 -translate-y-1/2',
+};
+
+export function NodeQuickCreateButtons({
+  nodeId,
+  visible,
+}: NodeQuickCreateButtonsProps): React.ReactElement | null {
+  if (!visible) {
+    return null;
+  }
+
+  return (
+    <>
+      {(Object.keys(BUTTON_POSITIONS) as QuickCreateDirection[]).map((direction) => (
+        <button
+          key={direction}
+          type="button"
+          aria-label={`Quick create ${direction}`}
+          onClick={(event) => {
+            event.stopPropagation();
+            requestNodeQuickCreate(nodeId, direction);
+          }}
+          className={`absolute z-20 flex h-7 w-7 items-center justify-center rounded-full border border-slate-200 bg-white text-slate-500 shadow-md transition-colors hover:border-sky-300 hover:text-sky-700 ${BUTTON_POSITIONS[direction]}`}
+        >
+          <Plus className="h-3.5 w-3.5" />
+        </button>
+      ))}
+    </>
+  );
+}
diff --git a/src/components/PlaybackControls.tsx b/src/components/PlaybackControls.tsx
index d8c0758..3b08cc2 100644
--- a/src/components/PlaybackControls.tsx
+++ b/src/components/PlaybackControls.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Play, Pause, SkipBack, SkipForward, X, Square } from 'lucide-react';
+import { Play, Pause, SkipBack, SkipForward } from 'lucide-react';
 import { Button } from './ui/Button';
 import { useTranslation } from 'react-i18next';
 
@@ -24,7 +24,7 @@ export function PlaybackControls({
 }: PlaybackControlsProps) {
     const { t } = useTranslation();
     return (
-        <div className="absolute bottom-8 left-1/2 -translate-x-1/2 flex items-center p-1.5 bg-white/90 backdrop-blur-xl shadow-2xl rounded-[var(--radius-lg)] border border-white/20 ring-1 ring-black/5 transition-all duration-300 z-50 gap-1">
+        <div className="absolute bottom-8 left-1/2 z-50 flex items-center gap-1 rounded-[var(--radius-lg)] border border-white/20 bg-white/90 p-1.5 shadow-[var(--shadow-md)] ring-1 ring-black/5 backdrop-blur-xl transition-all duration-300 -translate-x-1/2">
 
             {/* Group 1: Step Counter */}
             <div className="flex items-center justify-center bg-slate-100/50 px-3 py-1.5 rounded-[var(--radius-md)] border border-slate-200/60 min-w-[80px]">
@@ -42,7 +42,7 @@ export function PlaybackControls({
                     size="icon"
                     onClick={onPrev}
                     disabled={currentStepIndex <= 0}
-                    className="h-9 w-9 text-slate-500 hover:text-slate-900 rounded-[var(--radius-sm)]"
+                    className="text-slate-500 hover:text-slate-900 rounded-[var(--radius-sm)]"
                 >
                     <SkipBack className="w-4 h-4" />
                 </Button>
@@ -51,7 +51,7 @@ export function PlaybackControls({
                     variant="primary"
                     size="icon"
                     onClick={onPlayPause}
-                    className="h-10 w-10 shadow-md bg-[var(--brand-primary)] hover:brightness-110 rounded-[var(--radius-sm)]"
+                    className="rounded-[var(--radius-sm)] bg-[var(--brand-primary)] shadow-[var(--shadow-sm)] hover:brightness-110"
                 >
                     {isPlaying ? (
                         <Pause className="w-5 h-5 text-white" />
@@ -65,7 +65,7 @@ export function PlaybackControls({
                     size="icon"
                     onClick={onNext}
                     disabled={currentStepIndex >= totalSteps - 1}
-                    className="h-9 w-9 text-slate-500 hover:text-slate-900 rounded-[var(--radius-sm)]"
+                    className="text-slate-500 hover:text-slate-900 rounded-[var(--radius-sm)]"
                 >
                     <SkipForward className="w-4 h-4" />
                 </Button>
@@ -76,9 +76,9 @@ export function PlaybackControls({
             {/* Group 3: Exit */}
             <Button
                 variant="ghost"
-                size="sm"
+                size="md"
                 onClick={onStop}
-                className="h-10 px-3 text-sm font-medium text-slate-500 hover:text-red-600 hover:bg-red-50 rounded-[var(--radius-sm)]"
+                className="px-3 font-medium text-slate-500 hover:text-red-600 hover:bg-red-50 rounded-[var(--radius-sm)]"
             >
                 {t('playbackControls.stop')}
             </Button>
diff --git a/src/components/PropertiesPanel.tsx b/src/components/PropertiesPanel.tsx
index 8f2da9d..88c497f 100644
--- a/src/components/PropertiesPanel.tsx
+++ b/src/components/PropertiesPanel.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { Node, Edge } from '@/lib/reactflowCompat';
 import { NodeData } from '@/lib/types';
+import type { ArchitectureTemplateId } from '@/lib/architectureTemplates';
 import { EdgeProperties } from './properties/EdgeProperties';
 import { BulkNodeProperties } from './properties/BulkNodeProperties';
 import { useTranslation } from 'react-i18next';
@@ -23,6 +24,11 @@ interface PropertiesPanelProps {
     onAddMindmapSibling: (nodeId: string) => void;
     onAddArchitectureService: (sourceId: string) => void;
     onCreateArchitectureBoundary: (sourceId: string) => void;
+    onApplyArchitectureTemplate: (sourceId: string, templateId: ArchitectureTemplateId) => void;
+    onGenerateEntityFields: (nodeId: string) => Promise<void> | void;
+    onSuggestArchitectureNode: (nodeId: string) => Promise<void> | void;
+    onConvertEntitySelectionToClassDiagram: () => void;
+    onOpenMermaidCodeEditor: () => void;
     onClose: () => void;
 }
 
@@ -40,11 +46,16 @@ export const PropertiesPanel: React.FC<PropertiesPanelProps> = ({
     onAddMindmapSibling,
     onAddArchitectureService,
     onCreateArchitectureBoundary,
+    onApplyArchitectureTemplate,
+    onGenerateEntityFields,
+    onSuggestArchitectureNode,
+    onConvertEntitySelectionToClassDiagram,
+    onOpenMermaidCodeEditor,
     onClose
 }) => {
     const { t } = useTranslation();
 
-    if (!selectedNode && !selectedEdge) return null;
+    if (!selectedNode && !selectedEdge && selectedNodes.length < 2) return null;
 
     const isBulkEdit = selectedNodes.length > 1;
     const panelTitle = isBulkEdit
@@ -78,6 +89,11 @@ export const PropertiesPanel: React.FC<PropertiesPanelProps> = ({
                         onAddMindmapSibling={onAddMindmapSibling}
                         onAddArchitectureService={onAddArchitectureService}
                         onCreateArchitectureBoundary={onCreateArchitectureBoundary}
+                        onApplyArchitectureTemplate={onApplyArchitectureTemplate}
+                        onGenerateEntityFields={onGenerateEntityFields}
+                        onSuggestArchitectureNode={onSuggestArchitectureNode}
+                        onConvertEntitySelectionToClassDiagram={onConvertEntitySelectionToClassDiagram}
+                        onOpenMermaidCodeEditor={onOpenMermaidCodeEditor}
                     />
                 )}
 
diff --git a/src/components/RightRail.tsx b/src/components/RightRail.tsx
index cee2484..e2205fe 100644
--- a/src/components/RightRail.tsx
+++ b/src/components/RightRail.tsx
@@ -9,7 +9,7 @@ export function RightRail({ children }: RightRailProps): React.ReactElement {
         <aside
             className="h-full min-h-0 w-88 shrink-0 border-l border-slate-200/80 bg-[var(--brand-surface)]/88 backdrop-blur-xl"
         >
-            <div className="h-full overflow-hidden">{children}</div>
+            <div className="flex h-full min-h-0 flex-col overflow-hidden">{children}</div>
         </aside>
     );
 }
diff --git a/src/components/SectionNode.tsx b/src/components/SectionNode.tsx
index 78dae56..c1868e0 100644
--- a/src/components/SectionNode.tsx
+++ b/src/components/SectionNode.tsx
@@ -17,6 +17,7 @@ function SectionNode({ id, data, selected }: LegacyNodeProps<NodeData>): React.R
 
   return (
     <NodeChrome
+      nodeId={id}
       selected={Boolean(selected)}
       minWidth={350}
       minHeight={250}
@@ -25,19 +26,28 @@ function SectionNode({ id, data, selected }: LegacyNodeProps<NodeData>): React.R
     >
       <div
         className={`
-          group w-full h-full rounded-2xl border-2 border-dashed transition-all duration-200
+          group relative w-full h-full rounded-2xl transition-all duration-200 pointer-events-none
           ${selected ? 'z-10' : ''}
         `}
         style={{
-          backgroundColor: theme.bg,
-          borderColor: theme.border,
           minWidth: 350,
           minHeight: 250,
         }}
       >
+        <div
+          className="absolute inset-0 rounded-2xl border-2 border-dashed"
+          style={{
+            backgroundColor: theme.bg,
+            borderColor: theme.border,
+          }}
+        />
+        <div className="pointer-events-auto absolute inset-x-0 top-0 h-3 rounded-t-2xl" />
+        <div className="pointer-events-auto absolute inset-x-0 bottom-0 h-3 rounded-b-2xl" />
+        <div className="pointer-events-auto absolute inset-y-0 left-0 w-3 rounded-l-2xl" />
+        <div className="pointer-events-auto absolute inset-y-0 right-0 w-3 rounded-r-2xl" />
         {/* Title Bar */}
         <div
-          className="flex items-center gap-2 px-4 py-3 rounded-t-2xl cursor-grab active:cursor-grabbing"
+          className="pointer-events-auto relative flex items-center gap-2 rounded-t-2xl px-4 py-3 cursor-grab active:cursor-grabbing"
           style={{ borderBottom: `1px dashed ${theme.border}` }}
         >
           {iconName ? (
diff --git a/src/components/SettingsModal/AISettings.tsx b/src/components/SettingsModal/AISettings.tsx
index 79803e9..0686cae 100644
--- a/src/components/SettingsModal/AISettings.tsx
+++ b/src/components/SettingsModal/AISettings.tsx
@@ -1,18 +1,19 @@
 import React, { useState } from 'react';
-import { useFlowStore, AIProvider } from '../../store';
+import { useFlowStore, AIProvider, AISettingsStorageMode } from '../../store';
 import { Input } from '../ui/Input';
 import { Label } from '../ui/Label';
 import { Select } from '../ui/Select';
-import { ExternalLink, Check, Shield, Lock } from 'lucide-react';
+import { ExternalLink, Check, Shield, Lock, AlertCircle, Info } from 'lucide-react';
 import { useTranslation, Trans } from 'react-i18next';
 import {
     BYOK_KEYS,
     PROVIDER_MODELS,
     PROVIDERS,
+    PROVIDER_RISK,
     ProviderMeta,
 } from '@/config/aiProviders';
-
-
+import { getAIReadinessState } from '@/hooks/ai-generation/readiness';
+import { buildDocsSiteUrl } from '@/docs/docsRoutes';
 
 // Helper for logo with fallback
 function ProviderIcon({ p, isSelected }: { p: ProviderMeta; isSelected: boolean }): React.ReactElement {
@@ -62,6 +63,44 @@ function Step({ n, text }: { n: number; text: string }): React.ReactElement {
     );
 }
 
+function getProviderRiskPresentation(provider: AIProvider): {
+    tone: 'info' | 'warning';
+    label: string;
+    title: string;
+    detail: string;
+} {
+    const risk = PROVIDER_RISK[provider];
+
+    if (provider === 'custom') {
+        return {
+            tone: 'info',
+            label: 'Custom setup',
+            title: 'You control the gateway behavior',
+            detail: 'Use the exact model ID and base URL exposed by your endpoint. Local tools often work without an API key, but hosted gateways may still require one.',
+        };
+    }
+
+    if (risk === 'browser_friendly') {
+        return {
+            tone: 'info',
+            label: 'Browser-friendly',
+            title: 'Usually works well from a local browser session',
+            detail: 'Good default for a local-first app. You still need a valid key and should expect the model to work best on targeted changes, not magic rewrites.',
+        };
+    }
+
+    return {
+        tone: 'warning',
+        label: risk === 'proxy_likely' ? 'Proxy likely' : 'Setup varies',
+        title: risk === 'proxy_likely'
+            ? 'Often needs a server-side proxy'
+            : 'May require a proxy or account-specific setup',
+        detail: risk === 'proxy_likely'
+            ? 'Browser-originated requests are commonly blocked or rate-limited. Plan to route this provider through your own backend if requests fail immediately.'
+            : 'Some accounts work directly in the browser, while others need a proxy, allowlist, or custom gateway.',
+    };
+}
+
 export function AISettings(): React.ReactElement {
     const { aiSettings, setAISettings } = useFlowStore();
     const { t } = useTranslation();
@@ -70,6 +109,26 @@ export function AISettings(): React.ReactElement {
     const providerMeta = PROVIDERS.find(p => p.id === currentProvider) ?? PROVIDERS[0];
     const models = PROVIDER_MODELS[currentProvider] ?? [];
     const currentModel = aiSettings.model ?? providerMeta.defaultModel;
+    const readiness = getAIReadinessState(aiSettings);
+    const providerRisk = getProviderRiskPresentation(currentProvider);
+    const providerRiskIcon = providerRisk.tone === 'warning' ? AlertCircle : Info;
+    const providerRiskClassName = providerRisk.tone === 'warning'
+        ? 'border-amber-200 bg-amber-50 text-amber-900'
+        : 'border-slate-200 bg-slate-50 text-slate-800';
+    const providerRiskIconClassName = providerRisk.tone === 'warning'
+        ? 'text-amber-500'
+        : 'text-[var(--brand-primary)]';
+    const customBaseUrlError = currentProvider === 'custom' && readiness.blockingIssue?.detail.includes('base URL')
+        ? readiness.blockingIssue.detail
+        : undefined;
+    const customModelError = currentProvider === 'custom' && readiness.blockingIssue?.detail.includes('model ID')
+        ? readiness.blockingIssue.detail
+        : undefined;
+    const storageMode = aiSettings.storageMode ?? 'local';
+
+    function updateStorageMode(nextMode: AISettingsStorageMode): void {
+        setAISettings({ storageMode: nextMode });
+    }
 
     function selectProvider(id: AIProvider): void {
         const meta = PROVIDERS.find(p => p.id === id)!;
@@ -81,8 +140,8 @@ export function AISettings(): React.ReactElement {
             {/* Header Text */}
             <div className="space-y-1">
                 <div className="flex items-center justify-between">
-                    <h3 className="text-base font-semibold text-slate-800">{t('settingsModal.flowpilotConfigurations')}</h3>
-                    <a href="/docs/en/prompting-agents" target="_blank" rel="noopener noreferrer" className="text-[10px] font-semibold text-[var(--brand-primary)] hover:underline flex items-center gap-1">
+                    <h3 className="text-base font-semibold text-slate-800">{t('settingsModal.flowpilotConfigurations', { defaultValue: 'Flowpilot Configuration' })}</h3>
+                    <a href={buildDocsSiteUrl('prompting-agents')} target="_blank" rel="noopener noreferrer" className="text-[10px] font-semibold text-[var(--brand-primary)] hover:underline flex items-center gap-1">
                         Prompting Guide <ExternalLink className="w-3 h-3" />
                     </a>
                 </div>
@@ -115,7 +174,7 @@ export function AISettings(): React.ReactElement {
                                 onClick={() => selectProvider(p.id)}
                                 title={p.name}
                                 aria-label={`Select ${p.name} as AI provider`}
-                                className={`group relative flex flex-col items-center justify-center shrink-0 w-[72px] h-[72px] rounded-2xl border transition-all duration-200 ${buttonClass}`}
+                                className={`group relative flex h-[72px] w-[72px] shrink-0 flex-col items-center justify-center rounded-[var(--radius-xl)] border transition-all duration-200 ${buttonClass}`}
                             >
                                 <div className={`pointer-events-none transition-transform duration-200 ${iconWrapperClass}`}>
                                     <ProviderIcon p={p} isSelected={isSelected} />
@@ -127,13 +186,28 @@ export function AISettings(): React.ReactElement {
                         );
                     })}
                 </div>
-                <div className="flex items-center gap-2.5 px-3 py-2.5 bg-white rounded-xl border border-slate-200">
+                <div className="flex items-center gap-2.5 rounded-[var(--radius-lg)] border border-slate-200 bg-white px-3 py-2.5">
                     <img src={providerMeta.logoPath} alt={providerMeta.name} className="w-6 h-6 object-contain shrink-0" />
                     <div className="flex-1 min-w-0">
                         <p className="text-xs font-semibold text-slate-800">{providerMeta.name}</p>
                         <p className="text-[10px] text-slate-400 truncate">{t(`settingsModal.ai.providers.${currentProvider}.hint`)}</p>
                     </div>
-                    {providerMeta.id === 'custom' && <span className="text-[9px] bg-slate-100 border border-slate-200 px-1.5 py-0.5 rounded font-medium text-slate-500">BYOK</span>}
+                    {providerMeta.id === 'custom' && <span className="rounded-[var(--radius-xs)] border border-slate-200 bg-slate-100 px-1.5 py-0.5 text-[9px] font-medium text-slate-500">BYOK</span>}
+                </div>
+                <div className={`rounded-[var(--radius-lg)] border px-3 py-3 ${providerRiskClassName}`}>
+                    <div className="flex items-start gap-2">
+                        {React.createElement(providerRiskIcon, { className: `mt-0.5 h-4 w-4 shrink-0 ${providerRiskIconClassName}` })}
+                        <div className="min-w-0">
+                            <div className="flex items-center gap-2">
+                                <p className="text-[11px] font-semibold uppercase tracking-wider">{providerRisk.label}</p>
+                                <span className="rounded-full border border-current/15 px-1.5 py-0.5 text-[9px] font-semibold uppercase tracking-wider text-current/80">
+                                    {providerMeta.name}
+                                </span>
+                            </div>
+                            <p className="mt-1 text-xs font-medium">{providerRisk.title}</p>
+                            <p className="mt-1 text-[11px] leading-5 text-current/80">{providerRisk.detail}</p>
+                        </div>
+                    </div>
                 </div>
             </div>
 
@@ -150,8 +224,9 @@ export function AISettings(): React.ReactElement {
                                 value={currentModel === 'custom' ? '' : currentModel}
                                 onChange={e => setAISettings({ model: e.target.value })}
                                 placeholder="e.g. llama3-70b-8192 or gpt-4o"
+                                error={customModelError}
+                                helperText={t('settingsModal.ai.customModelHint')}
                             />
-                            <p className="text-[10px] text-slate-400">{t('settingsModal.ai.customModelHint')}</p>
                         </div>
                     ) : (
                         <Select
@@ -184,10 +259,62 @@ export function AISettings(): React.ReactElement {
                             className="pl-9 font-mono text-xs"
                         />
                     </div>
+                    <div className="space-y-2">
+                        <Label>Key storage</Label>
+                        <div className="grid grid-cols-1 gap-2 sm:grid-cols-2">
+                            <button
+                                type="button"
+                                onClick={() => updateStorageMode('local')}
+                                className={`rounded-[var(--radius-lg)] border px-3 py-3 text-left transition-colors ${
+                                    storageMode === 'local'
+                                        ? 'border-[var(--brand-primary)] bg-[var(--brand-primary)]/6'
+                                        : 'border-slate-200 bg-white hover:border-slate-300'
+                                }`}
+                            >
+                                <p className="text-xs font-semibold text-slate-800">Persistent</p>
+                                <p className="mt-1 text-[11px] leading-5 text-slate-500">
+                                    Keep this key on this browser until you clear it manually.
+                                </p>
+                            </button>
+                            <button
+                                type="button"
+                                onClick={() => updateStorageMode('session')}
+                                className={`rounded-[var(--radius-lg)] border px-3 py-3 text-left transition-colors ${
+                                    storageMode === 'session'
+                                        ? 'border-[var(--brand-primary)] bg-[var(--brand-primary)]/6'
+                                        : 'border-slate-200 bg-white hover:border-slate-300'
+                                }`}
+                            >
+                                <p className="text-xs font-semibold text-slate-800">Session only</p>
+                                <p className="mt-1 text-[11px] leading-5 text-slate-500">
+                                    Forget this key when the browser session closes. Better for shared or temporary machines.
+                                </p>
+                            </button>
+                        </div>
+                        <p className="text-[11px] leading-5 text-slate-500">
+                            {storageMode === 'session'
+                                ? 'Session-only mode stores AI settings in session storage and clears them when the browser session ends.'
+                                : 'Persistent mode stores AI settings in local browser storage until you remove them or clear site data.'}
+                        </p>
+                    </div>
+                    {aiSettings.apiKey && (
+                        <div className="flex items-center justify-between rounded-[var(--radius-lg)] border border-slate-200 bg-slate-50 px-3 py-2.5">
+                            <p className="text-[11px] leading-5 text-slate-500">
+                                Clear the saved API key from this browser without resetting the selected provider or model.
+                            </p>
+                            <button
+                                type="button"
+                                onClick={() => setAISettings({ apiKey: undefined })}
+                                className="shrink-0 rounded-[var(--radius-sm)] border border-slate-200 bg-white px-2.5 py-1.5 text-[11px] font-semibold text-slate-700 transition-colors hover:border-slate-300 hover:bg-slate-50"
+                            >
+                                Forget key
+                            </button>
+                        </div>
+                    )}
 
                     {/* Show setup guide only when the key is empty */}
                     {!aiSettings.apiKey && providerMeta.keyLink && (
-                        <div className="rounded-xl border border-slate-200 bg-slate-50 overflow-hidden">
+                        <div className="overflow-hidden rounded-[var(--radius-lg)] border border-slate-200 bg-slate-50">
                             <div className="px-3 py-2 border-b border-slate-200 flex items-center justify-between">
                                 <span className="text-[10px] font-semibold text-slate-600 uppercase tracking-wider">{t('settingsModal.ai.howToGetKey')}</span>
                                 <a
@@ -211,7 +338,7 @@ export function AISettings(): React.ReactElement {
                 {/* Custom Base URL */}
                 {currentProvider === 'custom' && (
                     <div className="space-y-3">
-                        <div className="rounded-xl border border-slate-200 bg-slate-50 overflow-hidden">
+                        <div className="overflow-hidden rounded-[var(--radius-lg)] border border-slate-200 bg-slate-50">
                             <div className="px-3 py-2 border-b border-slate-200">
                                 <span className="text-[10px] font-semibold text-slate-600 uppercase tracking-wider">{t('settingsModal.ai.customEndpointTitle')}</span>
                             </div>
@@ -223,7 +350,7 @@ export function AISettings(): React.ReactElement {
                                 </p>
                                 <div className="grid grid-cols-1 sm:grid-cols-3 gap-1.5 mt-2">
                                     {['ollama', 'lmStudio', 'together'].map(id => (
-                                        <div key={id} className="flex flex-col items-center px-2 py-1.5 bg-white rounded-lg border border-slate-200 text-center">
+                                        <div key={id} className="flex flex-col items-center rounded-[var(--radius-sm)] border border-slate-200 bg-white px-2 py-1.5 text-center">
                                             <span className="text-[10px] font-semibold text-slate-700">{t(`settingsModal.ai.customEndpoints.${id}.name`)}</span>
                                             <span className="text-[9px] text-slate-400">{t(`settingsModal.ai.customEndpoints.${id}.hint`)}</span>
                                         </div>
@@ -237,10 +364,12 @@ export function AISettings(): React.ReactElement {
                             value={aiSettings.customBaseUrl ?? ''}
                             onChange={e => setAISettings({ customBaseUrl: e.target.value })}
                             placeholder="https://localhost:11434/v1"
+                            error={customBaseUrlError}
+                            helperText="Use a full http:// or https:// base URL."
                         />
                         <p className="text-[11px] text-slate-500">
                             <Trans i18nKey="settingsModal.ai.customEndpointMustSupport">
-                                Must support <code className="bg-slate-100 px-1 rounded text-[10px]">POST /chat/completions</code> (OpenAI format)
+                                Must support <code className="rounded-[var(--radius-xs)] bg-slate-100 px-1 text-[10px]">POST /chat/completions</code> (OpenAI format)
                             </Trans>
                         </p>
                     </div>
@@ -249,7 +378,7 @@ export function AISettings(): React.ReactElement {
 
             {/* Privacy Section - Improved Visibility */}
             <div className="pt-2">
-                <div className="p-4 bg-slate-50 rounded-xl border border-slate-200 shadow-sm">
+                <div className="rounded-[var(--radius-lg)] border border-slate-200 bg-slate-50 p-4 shadow-sm">
                     <div className="flex items-center gap-2 mb-3 text-slate-800">
                         <Shield className="w-4 h-4 text-[var(--brand-primary)]" />
                         <span className="text-xs font-semibold uppercase tracking-wider">{t('settingsModal.ai.privacyTitle')}</span>
@@ -262,6 +391,11 @@ export function AISettings(): React.ReactElement {
                             </li>
                         ))}
                     </ul>
+                    <p className="mt-3 text-[11px] leading-5 text-slate-500">
+                        {storageMode === 'session'
+                            ? 'AI settings stay only for this browser session. Close the browser to clear them, or clear the key manually if you are handing the machine to someone else.'
+                            : 'AI settings stay on this browser and device until you remove them. Treat shared browsers as untrusted and clear or rotate keys when needed.'}
+                    </p>
                 </div>
             </div>
         </div>
diff --git a/src/components/SettingsModal/GeneralSettings.tsx b/src/components/SettingsModal/GeneralSettings.tsx
index eed878e..f4ef5b3 100644
--- a/src/components/SettingsModal/GeneralSettings.tsx
+++ b/src/components/SettingsModal/GeneralSettings.tsx
@@ -57,7 +57,7 @@ export const GeneralSettings = () => {
                     {t('commandBar.visuals.title', 'Connection Styles')}
                 </h3>
                 <div className="space-y-3">
-                    <div className="rounded-xl border border-[var(--color-brand-border)] bg-[var(--brand-surface)] p-3">
+                    <div className="rounded-[var(--radius-lg)] border border-[var(--color-brand-border)] bg-[var(--brand-surface)] p-3">
                         <label className="mb-2 block text-[11px] font-semibold uppercase tracking-wider text-[var(--brand-secondary)]">
                             {t('commandBar.visuals.edgeStyle')}
                         </label>
@@ -71,7 +71,7 @@ export const GeneralSettings = () => {
                                 <button
                                     key={style.type}
                                     onClick={() => setGlobalEdgeOptions({ type: style.type as GlobalEdgeOptions['type'] })}
-                                    className={`h-9 rounded-lg border text-xs font-semibold transition-colors ${
+                                    className={`h-9 rounded-[var(--radius-sm)] border text-xs font-semibold transition-colors ${
                                         globalEdgeOptions.type === style.type
                                             || (style.type === 'default' && globalEdgeOptions.type === 'bezier')
                                             ? 'border-[var(--brand-primary)] bg-[var(--brand-primary-50)] text-[var(--brand-primary-700)]'
@@ -91,7 +91,7 @@ export const GeneralSettings = () => {
                         checked={viewSettings.smartRoutingEnabled}
                         onChange={(checked) => setSmartRoutingEnabled(checked)}
                     />
-                    <div className="rounded-xl border border-[var(--color-brand-border)] bg-[var(--brand-surface)] p-3">
+                    <div className="rounded-[var(--radius-lg)] border border-[var(--color-brand-border)] bg-[var(--brand-surface)] p-3">
                         <label className="mb-2 block text-[11px] font-semibold uppercase tracking-wider text-[var(--brand-secondary)]">
                             {t('settingsModal.canvas.routingProfile', 'Routing Profile')}
                         </label>
@@ -103,7 +103,7 @@ export const GeneralSettings = () => {
                                 <button
                                     key={option.profile}
                                     onClick={() => setSmartRoutingProfile(option.profile as 'standard' | 'infrastructure')}
-                                    className={`h-9 rounded-lg border text-xs font-semibold transition-colors ${
+                                    className={`h-9 rounded-[var(--radius-sm)] border text-xs font-semibold transition-colors ${
                                         viewSettings.smartRoutingProfile === option.profile
                                             ? 'border-[var(--brand-primary)] bg-[var(--brand-primary-50)] text-[var(--brand-primary-700)]'
                                             : 'border-[var(--color-brand-border)] text-[var(--brand-text)] hover:border-[var(--brand-primary)]'
@@ -146,7 +146,7 @@ export const GeneralSettings = () => {
                         onChange={(checked) => setViewSettings({ architectureStrictMode: checked })}
                     />
 
-                    <div className="rounded-xl border border-[var(--color-brand-border)] bg-[var(--brand-surface)] p-3">
+                    <div className="rounded-[var(--radius-lg)] border border-[var(--color-brand-border)] bg-[var(--brand-surface)] p-3">
                         <label className="mb-2 block text-[11px] font-semibold uppercase tracking-wider text-[var(--brand-secondary)]">
                             {t('commandBar.visuals.strokeWidth')}
                         </label>
@@ -155,7 +155,7 @@ export const GeneralSettings = () => {
                                 <button
                                     key={width}
                                     onClick={() => setGlobalEdgeOptions({ strokeWidth: width })}
-                                    className={`h-9 rounded-lg border text-xs font-semibold transition-colors ${
+                                    className={`h-9 rounded-[var(--radius-sm)] border text-xs font-semibold transition-colors ${
                                         globalEdgeOptions.strokeWidth === width
                                             ? 'border-[var(--brand-primary)] bg-[var(--brand-primary-50)] text-[var(--brand-primary-700)]'
                                             : 'border-[var(--color-brand-border)] text-[var(--brand-text)] hover:border-[var(--brand-primary)]'
@@ -167,7 +167,7 @@ export const GeneralSettings = () => {
                         </div>
                     </div>
 
-                    <div className="rounded-xl border border-[var(--color-brand-border)] bg-[var(--brand-surface)] p-3">
+                    <div className="rounded-[var(--radius-lg)] border border-[var(--color-brand-border)] bg-[var(--brand-surface)] p-3">
                         <label className="mb-2 block text-[11px] font-semibold uppercase tracking-wider text-[var(--brand-secondary)]">
                             {t('commandBar.visuals.largeGraphSafety', 'Large Graph Safety')}
                         </label>
@@ -180,7 +180,7 @@ export const GeneralSettings = () => {
                                 <button
                                     key={option.mode}
                                     onClick={() => setLargeGraphSafetyMode(option.mode as 'auto' | 'on' | 'off')}
-                                    className={`h-9 rounded-lg border text-xs font-semibold transition-colors ${
+                                    className={`h-9 rounded-[var(--radius-sm)] border text-xs font-semibold transition-colors ${
                                         viewSettings.largeGraphSafetyMode === option.mode
                                             ? 'border-[var(--brand-primary)] bg-[var(--brand-primary-50)] text-[var(--brand-primary-700)]'
                                             : 'border-[var(--color-brand-border)] text-[var(--brand-text)] hover:border-[var(--brand-primary)]'
@@ -202,7 +202,7 @@ export const GeneralSettings = () => {
                                 <button
                                     key={option.profile}
                                     onClick={() => setLargeGraphSafetyProfile(option.profile as 'performance' | 'balanced' | 'quality')}
-                                    className={`h-9 rounded-lg border text-xs font-semibold transition-colors ${
+                                    className={`h-9 rounded-[var(--radius-sm)] border text-xs font-semibold transition-colors ${
                                         viewSettings.largeGraphSafetyProfile === option.profile
                                             ? 'border-[var(--brand-primary)] bg-[var(--brand-primary-50)] text-[var(--brand-primary-700)]'
                                             : 'border-[var(--color-brand-border)] text-[var(--brand-text)] hover:border-[var(--brand-primary)]'
@@ -231,9 +231,9 @@ const SettingRow = ({
     checked: boolean;
     onChange: (v: boolean) => void;
 }) => (
-    <div className="flex items-center justify-between p-3 bg-[var(--brand-surface)] rounded-xl border border-[var(--color-brand-border)] hover:border-[var(--brand-primary)] transition-colors">
+    <div className="flex items-center justify-between rounded-[var(--radius-lg)] border border-[var(--color-brand-border)] bg-[var(--brand-surface)] p-3 transition-colors hover:border-[var(--brand-primary)]">
         <div className="flex items-center gap-3">
-            <div className="w-8 h-8 rounded-lg bg-[var(--brand-background)] flex items-center justify-center text-[var(--brand-secondary)] border border-[var(--color-brand-border)]">
+            <div className="flex h-8 w-8 items-center justify-center rounded-[var(--radius-sm)] border border-[var(--color-brand-border)] bg-[var(--brand-background)] text-[var(--brand-secondary)]">
                 {icon}
             </div>
             <div>
diff --git a/src/components/SettingsModal/PrivacySettings.tsx b/src/components/SettingsModal/PrivacySettings.tsx
index 9450cf9..19808d6 100644
--- a/src/components/SettingsModal/PrivacySettings.tsx
+++ b/src/components/SettingsModal/PrivacySettings.tsx
@@ -9,7 +9,7 @@ export const PrivacySettings = () => {
         <div className="space-y-8 animate-in fade-in duration-500">
             {/* Mission Statement */}
             <div className="space-y-4">
-                <div className="p-4 bg-[var(--brand-primary)]/5 border border-[var(--brand-primary)]/10 rounded-2xl">
+                <div className="rounded-[var(--radius-xl)] border border-[var(--brand-primary)]/10 bg-[var(--brand-primary)]/5 p-4">
                     <h3 className="flex items-center gap-2 font-bold text-[var(--brand-primary)] mb-3 text-sm uppercase tracking-wider">
                         <Shield className="w-4 h-4" />
                         {t('settingsModal.privacy.manifesto')}
@@ -36,7 +36,7 @@ export const PrivacySettings = () => {
                         href="https://forms.gle/hhS4FErGANEZm6oz8"
                         target="_blank"
                         rel="noopener noreferrer"
-                        className="flex flex-col items-center justify-center p-6 bg-white border border-slate-200 hover:border-[var(--brand-primary)] hover:bg-[var(--brand-primary)]/5 rounded-xl transition-all group cursor-pointer text-center"
+                        className="group flex flex-col items-center justify-center rounded-[var(--radius-lg)] border border-slate-200 bg-white p-6 text-center transition-all hover:border-[var(--brand-primary)] hover:bg-[var(--brand-primary)]/5"
                     >
                         <div className="w-10 h-10 bg-slate-100 group-hover:bg-white rounded-full flex items-center justify-center mb-3 text-slate-500 group-hover:text-[var(--brand-primary)] transition-colors">
                             <MessageSquare className="w-5 h-5" />
@@ -51,7 +51,7 @@ export const PrivacySettings = () => {
 };
 
 const Feature = ({ icon, text }: { icon: React.ReactNode, text: string }) => (
-    <div className="flex items-center gap-2 text-xs font-medium text-slate-600 bg-white/50 p-2 rounded-lg border border-[var(--brand-primary)]/5">
+    <div className="flex items-center gap-2 rounded-[var(--radius-sm)] border border-[var(--brand-primary)]/5 bg-white/50 p-2 text-xs font-medium text-slate-600">
         <div className="text-[var(--brand-primary)]">{icon}</div>
         {text}
     </div>
diff --git a/src/components/SettingsModal/SettingsModal.test.tsx b/src/components/SettingsModal/SettingsModal.test.tsx
index b1b6a4b..46c5eba 100644
--- a/src/components/SettingsModal/SettingsModal.test.tsx
+++ b/src/components/SettingsModal/SettingsModal.test.tsx
@@ -12,6 +12,10 @@ vi.mock('./GeneralSettings', () => ({
   GeneralSettings: () => <div>General content</div>,
 }));
 
+vi.mock('./AISettings', () => ({
+  AISettings: () => <div>AI settings content</div>,
+}));
+
 vi.mock('./ShortcutsSettings', () => ({
   ShortcutsSettings: () => <div>Shortcuts content</div>,
 }));
@@ -28,7 +32,7 @@ describe('SettingsModal', () => {
   it('renders with dialog semantics and initial focus on the close button', () => {
     render(<SettingsModal isOpen onClose={vi.fn()} />);
 
-    expect(screen.getByRole('dialog')).toBeTruthy();
+    expect(screen.getByRole('dialog').getAttribute('aria-describedby')).toBe('settings-modal-description');
     expect(document.activeElement).toBe(screen.getByRole('button', { name: 'Close settings' }));
   });
 
@@ -40,4 +44,11 @@ describe('SettingsModal', () => {
 
     expect(onClose).toHaveBeenCalledTimes(1);
   });
+
+  it('renders the AI settings tab when opened with the ai tab selected', () => {
+    render(<SettingsModal isOpen onClose={vi.fn()} initialTab="ai" />);
+
+    expect(screen.getByText('AI settings content')).toBeInTheDocument();
+    expect(screen.getByRole('heading', { name: 'AI' })).toBeInTheDocument();
+  });
 });
diff --git a/src/components/SettingsModal/SettingsModal.tsx b/src/components/SettingsModal/SettingsModal.tsx
index 5e5ef32..10d1e8f 100644
--- a/src/components/SettingsModal/SettingsModal.tsx
+++ b/src/components/SettingsModal/SettingsModal.tsx
@@ -1,7 +1,8 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { X, Settings, Keyboard } from 'lucide-react';
+import { X, Settings, Keyboard, WandSparkles } from 'lucide-react';
 import { createPortal } from 'react-dom';
 import { useTranslation } from 'react-i18next';
+import { AISettings } from './AISettings';
 import { GeneralSettings } from './GeneralSettings';
 import { ShortcutsSettings } from './ShortcutsSettings';
 import { SidebarItem } from '../ui/SidebarItem';
@@ -9,17 +10,17 @@ import { SidebarItem } from '../ui/SidebarItem';
 interface SettingsModalProps {
     isOpen: boolean;
     onClose: () => void;
-    initialTab?: 'general' | 'shortcuts';
+    initialTab?: 'general' | 'shortcuts' | 'ai';
 }
 
 interface OpenSettingsModalContentProps {
     onClose: () => void;
-    initialTab: 'general' | 'shortcuts';
+    initialTab: 'general' | 'shortcuts' | 'ai';
 }
 
 function OpenSettingsModalContent({ onClose, initialTab }: OpenSettingsModalContentProps): React.ReactElement {
     const { t } = useTranslation();
-    const [activeTab, setActiveTab] = useState<'general' | 'shortcuts'>(initialTab);
+    const [activeTab, setActiveTab] = useState<'general' | 'shortcuts' | 'ai'>(initialTab);
     const closeButtonRef = useRef<HTMLButtonElement>(null);
 
     useEffect(() => {
@@ -41,7 +42,8 @@ function OpenSettingsModalContent({ onClose, initialTab }: OpenSettingsModalCont
                 role="dialog"
                 aria-modal="true"
                 aria-labelledby="settings-modal-title"
-                className="bg-white/95 backdrop-blur-xl w-full max-w-3xl max-h-full md:h-[80vh] rounded-[calc(var(--brand-radius)*1.5)] shadow-2xl border border-white/20 ring-1 ring-black/5 flex flex-col md:flex-row overflow-hidden animate-in zoom-in-95 duration-200"
+                aria-describedby="settings-modal-description"
+                className="bg-white/95 backdrop-blur-xl w-full max-w-3xl max-h-full md:h-[80vh] rounded-[var(--radius-xl)] shadow-[var(--shadow-overlay)] border border-white/20 ring-1 ring-black/5 flex flex-col md:flex-row overflow-hidden animate-in zoom-in-95 duration-200"
                 onClick={(e) => e.stopPropagation()}
             >
                 {/* Sidebar */}
@@ -59,6 +61,15 @@ function OpenSettingsModalContent({ onClose, initialTab }: OpenSettingsModalCont
                         {t('settingsModal.general', 'General')}
                     </SidebarItem>
 
+                    <SidebarItem
+                        icon={<WandSparkles className="w-4 h-4" />}
+                        isActive={activeTab === 'ai'}
+                        onClick={() => setActiveTab('ai')}
+                        className="whitespace-nowrap w-auto md:w-full px-4 md:px-3 py-2 md:py-2.5 flex-none"
+                    >
+                        {t('settings.ai', 'AI')}
+                    </SidebarItem>
+
                     <SidebarItem
                         icon={<Keyboard className="w-4 h-4" />}
                         isActive={activeTab === 'shortcuts'}
@@ -75,10 +86,15 @@ function OpenSettingsModalContent({ onClose, initialTab }: OpenSettingsModalCont
                         <h2 id="settings-modal-title" className="text-lg font-semibold text-slate-800">
                             {{
                                 general: t('settingsModal.canvasSettings', 'Canvas Settings'),
+                                ai: t('settings.ai', 'AI'),
                                 shortcuts: t('settingsModal.keyboardShortcuts', 'Keyboard Shortcuts'),
                             }[activeTab]}
                         </h2>
+                        <p id="settings-modal-description" className="sr-only">
+                            {t('settingsModal.description', 'Configure canvas preferences and keyboard shortcuts.')}
+                        </p>
                         <button
+                            type="button"
                             ref={closeButtonRef}
                             onClick={onClose}
                             className="p-2 text-slate-400 hover:text-slate-600 hover:bg-slate-100 rounded-full transition-colors"
@@ -91,6 +107,7 @@ function OpenSettingsModalContent({ onClose, initialTab }: OpenSettingsModalCont
                     <div className="flex-1 overflow-y-auto custom-scrollbar">
                         <div className="p-6">
                             {activeTab === 'general' && <GeneralSettings />}
+                            {activeTab === 'ai' && <AISettings />}
                             {activeTab === 'shortcuts' && <ShortcutsSettings />}
                         </div>
                     </div>
@@ -98,7 +115,12 @@ function OpenSettingsModalContent({ onClose, initialTab }: OpenSettingsModalCont
             </div>
 
             {/* Backdrop click to close */}
-            <div className="absolute inset-0 -z-10" onClick={onClose} />
+            <button
+                type="button"
+                className="absolute inset-0 -z-10"
+                onClick={onClose}
+                aria-label={t('settingsModal.closeDialog', 'Close settings dialog')}
+            />
         </div>
     );
 }
diff --git a/src/components/SettingsModal/ShortcutsSettings.tsx b/src/components/SettingsModal/ShortcutsSettings.tsx
index c485e16..91fe9c8 100644
--- a/src/components/SettingsModal/ShortcutsSettings.tsx
+++ b/src/components/SettingsModal/ShortcutsSettings.tsx
@@ -17,11 +17,11 @@ export const ShortcutsSettings = () => {
                     </div>
                     <div className="grid grid-cols-1 gap-3">
                         {section.items.map((item) => (
-                            <div key={item.label} className="flex items-center justify-between group p-2 hover:bg-slate-50/50 rounded-lg transition-colors">
+                            <div key={item.label} className="group flex items-center justify-between rounded-[var(--radius-sm)] p-2 transition-colors hover:bg-slate-50/50">
                                 <span className="text-slate-600 text-sm font-medium">{t(item.label)}</span>
                                 <div className="flex gap-1">
                                     {item.keys.map((key, i) => (
-                                        <kbd key={i} className="px-2 py-1 bg-white border border-slate-200 rounded-md text-xs font-semibold text-slate-500 min-w-[24px] text-center shadow-sm">
+                                        <kbd key={i} className="min-w-[24px] rounded-[var(--radius-xs)] border border-slate-200 bg-white px-2 py-1 text-center text-xs font-semibold text-slate-500 shadow-sm">
                                             {key}
                                         </kbd>
                                     ))}
diff --git a/src/components/SettingsModal/ai/AdvancedEndpointSection.tsx b/src/components/SettingsModal/ai/AdvancedEndpointSection.tsx
index fcf16b8..611e83f 100644
--- a/src/components/SettingsModal/ai/AdvancedEndpointSection.tsx
+++ b/src/components/SettingsModal/ai/AdvancedEndpointSection.tsx
@@ -27,7 +27,7 @@ export function AdvancedEndpointSection({
     const { t } = useTranslation();
 
     return (
-        <div className="rounded-xl border border-slate-200 overflow-hidden">
+        <div className="overflow-hidden rounded-[var(--radius-lg)] border border-slate-200">
             <button
                 type="button"
                 onClick={onToggleAdvancedEndpoint}
@@ -64,7 +64,7 @@ export function AdvancedEndpointSection({
                     {(currentProvider === 'custom' || currentProvider === 'openrouter' || !!customBaseUrl) && (
                         <p className="text-[11px] text-slate-500">
                             <Trans i18nKey="settingsModal.ai.customEndpointMustSupport">
-                                Must support <code className="bg-slate-100 px-1 rounded text-[10px]">POST /chat/completions</code> (OpenAI format)
+                                Must support <code className="rounded-[var(--radius-xs)] bg-slate-100 px-1 text-[10px]">POST /chat/completions</code> (OpenAI format)
                             </Trans>
                         </p>
                     )}
diff --git a/src/components/SettingsModal/ai/CustomHeadersEditor.tsx b/src/components/SettingsModal/ai/CustomHeadersEditor.tsx
index b0a503e..7592f48 100644
--- a/src/components/SettingsModal/ai/CustomHeadersEditor.tsx
+++ b/src/components/SettingsModal/ai/CustomHeadersEditor.tsx
@@ -22,7 +22,7 @@ export function CustomHeadersEditor({
     const { t } = useTranslation();
 
     return (
-        <div className="rounded-xl border border-slate-200 bg-white p-3 space-y-2">
+        <div className="space-y-2 rounded-[var(--radius-lg)] border border-slate-200 bg-white p-3">
             <div className="flex items-center justify-between">
                 <div>
                     <p className="text-[11px] font-semibold uppercase tracking-wider text-slate-600">
@@ -36,7 +36,7 @@ export function CustomHeadersEditor({
                     <button
                         type="button"
                         onClick={onAddHeader}
-                        className="inline-flex items-center gap-1 px-2 py-1 rounded-md bg-slate-100 hover:bg-slate-200 text-[10px] font-semibold text-slate-700"
+                        className="inline-flex items-center gap-1 rounded-[var(--radius-sm)] bg-slate-100 px-2 py-1 text-[10px] font-semibold text-slate-700 hover:bg-slate-200"
                     >
                         <Plus className="w-3.5 h-3.5" />
                         {t('settingsModal.ai.addHeader', { defaultValue: 'Add Header' })}
@@ -44,7 +44,7 @@ export function CustomHeadersEditor({
                     <button
                         type="button"
                         onClick={onApplyCloudflarePreset}
-                        className="inline-flex items-center gap-1 px-2 py-1 rounded-md bg-blue-50 border border-blue-200 hover:bg-blue-100 text-[10px] font-semibold text-blue-700"
+                        className="inline-flex items-center gap-1 rounded-[var(--radius-sm)] border border-blue-200 bg-blue-50 px-2 py-1 text-[10px] font-semibold text-blue-700 hover:bg-blue-100"
                     >
                         {t('settingsModal.ai.cloudflarePreset', { defaultValue: 'Use Cloudflare Preset' })}
                     </button>
diff --git a/src/components/SettingsModal/ai/PrivacySection.tsx b/src/components/SettingsModal/ai/PrivacySection.tsx
index 5b4be81..7e58c73 100644
--- a/src/components/SettingsModal/ai/PrivacySection.tsx
+++ b/src/components/SettingsModal/ai/PrivacySection.tsx
@@ -8,7 +8,7 @@ export function PrivacySection(): React.ReactElement {
 
     return (
         <div className="pt-2">
-            <div className="p-4 bg-slate-50 rounded-xl border border-slate-200 shadow-sm">
+            <div className="rounded-[var(--radius-lg)] border border-slate-200 bg-slate-50 p-4 shadow-sm">
                 <div className="flex items-center gap-2 mb-3 text-slate-800">
                     <Shield className="w-4 h-4 text-[var(--brand-primary)]" />
                     <span className="text-xs font-semibold uppercase tracking-wider">{t('settingsModal.ai.privacyTitle')}</span>
diff --git a/src/components/SettingsModal/ai/ProviderSection.tsx b/src/components/SettingsModal/ai/ProviderSection.tsx
index 54eb76e..440b74b 100644
--- a/src/components/SettingsModal/ai/ProviderSection.tsx
+++ b/src/components/SettingsModal/ai/ProviderSection.tsx
@@ -61,7 +61,7 @@ export function ProviderSection({
                             onClick={() => onSelectProvider(provider.id)}
                             title={provider.name}
                             aria-label={`Select ${provider.name} as AI provider`}
-                            className={`group relative flex flex-col items-center justify-center shrink-0 w-[72px] h-[72px] rounded-2xl border transition-all duration-200 ${buttonClass}`}
+                            className={`group relative flex h-[72px] w-[72px] shrink-0 flex-col items-center justify-center rounded-[var(--radius-xl)] border transition-all duration-200 ${buttonClass}`}
                         >
                             <div className={`pointer-events-none transition-transform duration-200 ${iconWrapperClass}`}>
                                 <ProviderIcon provider={provider} isSelected={isSelected} />
@@ -73,7 +73,7 @@ export function ProviderSection({
                     );
                 })}
             </div>
-            <div className="flex items-center gap-2.5 px-3 py-2.5 bg-white rounded-xl border border-slate-200">
+            <div className="flex items-center gap-2.5 rounded-[var(--radius-lg)] border border-slate-200 bg-white px-3 py-2.5">
                 <img src={providerMeta.logoPath} alt={providerMeta.name} className="w-6 h-6 object-contain shrink-0" />
                 <div className="flex-1 min-w-0">
                     <p className="text-xs font-semibold text-slate-800">{providerMeta.name}</p>
@@ -86,11 +86,11 @@ export function ProviderSection({
                     </p>
                 </div>
                 <span
-                    className={`text-[9px] border px-1.5 py-0.5 rounded font-medium ${getRiskStyles(providerRisk)}`}
+                    className={`rounded-[var(--radius-xs)] border px-1.5 py-0.5 text-[9px] font-medium ${getRiskStyles(providerRisk)}`}
                 >
                     {getRiskLabel(t, providerRisk)}
                 </span>
-                {providerMeta.id === 'custom' && <span className="text-[9px] bg-slate-100 border border-slate-200 px-1.5 py-0.5 rounded font-medium text-slate-500">BYOK</span>}
+                {providerMeta.id === 'custom' && <span className="rounded-[var(--radius-xs)] border border-slate-200 bg-slate-100 px-1.5 py-0.5 text-[9px] font-medium text-slate-500">BYOK</span>}
             </div>
         </div>
     );
diff --git a/src/components/ShareEmbedModal.tsx b/src/components/ShareEmbedModal.tsx
new file mode 100644
index 0000000..15e853b
--- /dev/null
+++ b/src/components/ShareEmbedModal.tsx
@@ -0,0 +1,104 @@
+import React, { useCallback, useState } from 'react';
+import { Check, Code2, Copy, ExternalLink, FileCode2, Link, X } from 'lucide-react';
+
+interface ShareEmbedModalProps {
+    viewerUrl: string;
+    onClose: () => void;
+}
+
+function CopyRow({ label, value, icon: Icon }: { label: string; value: string; icon: React.ComponentType<{ className?: string }> }): React.ReactElement {
+    const [copied, setCopied] = useState(false);
+
+    const handleCopy = useCallback(async () => {
+        await navigator.clipboard.writeText(value);
+        setCopied(true);
+        setTimeout(() => setCopied(false), 2000);
+    }, [value]);
+
+    return (
+        <div className="rounded-[var(--radius-sm)] border border-slate-200 bg-slate-50 p-3">
+            <div className="mb-1.5 flex items-center justify-between">
+                <div className="flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wider text-slate-400">
+                    <Icon className="h-3 w-3" />
+                    {label}
+                </div>
+                <button
+                    type="button"
+                    onClick={() => void handleCopy()}
+                    className="flex items-center gap-1 rounded-[var(--radius-xs)] px-2 py-0.5 text-[11px] font-medium text-slate-500 hover:bg-slate-200 hover:text-slate-700 transition-colors"
+                    aria-label={`Copy ${label.toLowerCase()}`}
+                >
+                    {copied ? (
+                        <><Check className="h-3 w-3 text-emerald-500" /><span className="text-emerald-600">Copied</span></>
+                    ) : (
+                        <><Copy className="h-3 w-3" />Copy</>
+                    )}
+                </button>
+            </div>
+            <p className="select-all break-all font-mono text-[11px] text-slate-600 leading-relaxed">{value}</p>
+        </div>
+    );
+}
+
+export function ShareEmbedModal({ viewerUrl, onClose }: ShareEmbedModalProps): React.ReactElement {
+    const viewer = new URL(viewerUrl);
+    const cardViewerUrl = (() => {
+        const next = new URL(viewer.toString());
+        next.searchParams.set('size', 'card');
+        return next.toString();
+    })();
+    const badgeViewerUrl = (() => {
+        const next = new URL(viewer.toString());
+        next.searchParams.set('size', 'badge');
+        return next.toString();
+    })();
+    const markdownLink = `[Open interactive diagram on OpenFlowKit](${viewerUrl})`;
+    const readmeLink = `[View architecture diagram](${badgeViewerUrl})`;
+    const iframeSnippet = `<iframe src="${cardViewerUrl}" width="720" height="420" style="border:0;border-radius:16px;overflow:hidden;" loading="lazy" title="OpenFlowKit diagram"></iframe>`;
+
+    return (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/30 backdrop-blur-sm" onClick={onClose}>
+            <div
+                role="dialog"
+                aria-modal="true"
+                aria-labelledby="share-embed-title"
+                aria-describedby="share-embed-description"
+                className="relative mx-4 w-full max-w-md rounded-[var(--radius-xl)] border border-white/20 bg-white shadow-[var(--shadow-overlay)] ring-1 ring-black/5 animate-in fade-in zoom-in-95 duration-150"
+                onClick={(e) => e.stopPropagation()}
+            >
+                <div className="flex items-center justify-between border-b border-slate-100 px-5 py-4">
+                    <div>
+                        <h2 id="share-embed-title" className="text-sm font-semibold text-slate-800">Share and embed diagram</h2>
+                        <p id="share-embed-description" className="mt-0.5 text-[11px] text-slate-400">Viewer links are read-only and encode the diagram directly in the URL.</p>
+                    </div>
+                    <button type="button" onClick={onClose} className="rounded-full p-1 text-slate-400 hover:bg-slate-100 hover:text-slate-600 transition-colors" aria-label="Close share dialog">
+                        <X className="h-4 w-4" />
+                    </button>
+                </div>
+
+                <div className="space-y-3 p-5">
+                    <CopyRow label="Viewer link" value={viewerUrl} icon={Link} />
+                    <CopyRow label="Markdown link" value={markdownLink} icon={Code2} />
+                    <CopyRow label="README link" value={readmeLink} icon={Code2} />
+                    <CopyRow label="Embed iframe" value={iframeSnippet} icon={FileCode2} />
+
+                    <a
+                        href={cardViewerUrl}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="flex items-center justify-center gap-2 rounded-[var(--radius-sm)] border border-slate-200 py-2 text-xs font-medium text-slate-600 hover:bg-slate-50 hover:text-[var(--brand-primary)] transition-colors"
+                    >
+                        <ExternalLink className="h-3.5 w-3.5" />
+                        Open card viewer
+                    </a>
+                </div>
+
+                <div className="border-t border-slate-100 px-5 py-3">
+                    <p className="text-[10px] text-slate-400 leading-relaxed">
+                        GitHub README usage should prefer the Markdown link. Blog posts and docs can use the iframe snippet with `size=card` or `size=badge`.
+                    </p>
+                </div>
+            </div>
+        </div>
+    );
+}
diff --git a/src/components/ShareModal.test.tsx b/src/components/ShareModal.test.tsx
index abfe671..6e3622e 100644
--- a/src/components/ShareModal.test.tsx
+++ b/src/components/ShareModal.test.tsx
@@ -1,53 +1,69 @@
-import { fireEvent, render, screen } from '@testing-library/react';
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
 import { describe, expect, it, vi } from 'vitest';
 import { ShareModal } from './ShareModal';
+import { getShareStatusDefaultMessage, SHARE_MODAL_COPY } from './shareModalContent';
 
-vi.mock('react-i18next', () => ({
-  useTranslation: () => ({
-    t: (_key: string, fallback?: string | { defaultValue?: string; count?: number }) => {
-      if (typeof fallback === 'string') return fallback;
-      if (fallback?.defaultValue) return fallback.defaultValue.replace('{{count}}', String(fallback.count ?? ''));
-      return _key;
-    },
-  }),
-}));
+vi.mock('react-i18next', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('react-i18next')>();
+  return {
+    ...actual,
+    useTranslation: () => ({
+      t: (key: string, options?: string | { defaultValue?: string }) => {
+        if (typeof options === 'string') {
+          return options;
+        }
+        return options?.defaultValue ?? key;
+      },
+    }),
+  };
+});
 
 describe('ShareModal', () => {
-  it('shows the room id with a simplified privacy note', () => {
+  it('renders the invite URL and fallback guidance for local-only mode', () => {
     render(
       <ShareModal
         isOpen
         onClose={vi.fn()}
         onCopyInvite={vi.fn()}
-        roomId="abc-room"
+        roomId="room-123"
+        inviteUrl="https://example.com/flow?room=room-123"
         status="fallback"
-        viewerCount={1}
+        viewerCount={2}
+        participants={[
+          { clientId: 'local', name: 'You', color: '#000', isLocal: true },
+          { clientId: 'peer', name: 'Peer', color: '#fff', isLocal: false },
+        ]}
       />
     );
 
-    expect(screen.getByText('Share design')).toBeTruthy();
-    expect(screen.getByText('abc-room')).toBeTruthy();
-    expect(screen.getByText('All your diagram data stays local in the browser unless you export it.')).toBeTruthy();
-    expect(screen.getByText('Copy Link')).toBeTruthy();
+    expect(screen.getByTestId('share-panel')).toBeTruthy();
+    expect(screen.getByRole('dialog', { name: new RegExp(SHARE_MODAL_COPY.title) }).getAttribute('aria-describedby')).toBe('share-modal-description');
+    expect(screen.getByText('https://example.com/flow?room=room-123')).toBeTruthy();
+    expect(screen.getByText(getShareStatusDefaultMessage('fallback'))).toBeTruthy();
+    expect(screen.getByText(SHARE_MODAL_COPY.footerNote)).toBeTruthy();
   });
 
-  it('copies the collaboration link', () => {
+  it('invokes copy and close actions', () => {
+    const onClose = vi.fn();
     const onCopyInvite = vi.fn();
 
     render(
       <ShareModal
         isOpen
-        onClose={vi.fn()}
+        onClose={onClose}
         onCopyInvite={onCopyInvite}
-        roomId="abc-room"
+        roomId="room-123"
+        inviteUrl="https://example.com/flow?room=room-123"
         status="realtime"
-        viewerCount={2}
+        viewerCount={1}
       />
     );
 
-    fireEvent.click(screen.getByRole('button', { name: /Copy Link/i }));
+    fireEvent.click(screen.getByRole('button', { name: SHARE_MODAL_COPY.copyLink }));
+    fireEvent.click(screen.getByLabelText(SHARE_MODAL_COPY.close));
 
     expect(onCopyInvite).toHaveBeenCalledTimes(1);
-    expect(screen.getByText('Live sync')).toBeTruthy();
+    expect(onClose).toHaveBeenCalledTimes(1);
   });
 });
diff --git a/src/components/ShareModal.tsx b/src/components/ShareModal.tsx
index d74cc1a..0c27274 100644
--- a/src/components/ShareModal.tsx
+++ b/src/components/ShareModal.tsx
@@ -1,27 +1,33 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
-import { Share2, X, Copy, Check, Link2, Users } from 'lucide-react';
+import { Share2, X, Copy, Check } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { Button } from './ui/Button';
+import { getShareStatusDefaultMessage, SHARE_MODAL_COPY, type ShareModalStatus } from './shareModalContent';
 
 interface ShareModalProps {
     isOpen: boolean;
     onClose: () => void;
     onCopyInvite: () => void;
     roomId: string;
+    inviteUrl: string;
     status: 'realtime' | 'waiting' | 'fallback';
     viewerCount: number;
+    participants?: Array<{
+        clientId: string;
+        name: string;
+        color: string;
+        isLocal: boolean;
+    }>;
 }
 
-function getStatusLabel(status: ShareModalProps['status'], t: ReturnType<typeof useTranslation>['t']): string {
-    switch (status) {
-        case 'realtime':
-            return t('share.status.realtime', { defaultValue: 'Live sync' });
-        case 'waiting':
-            return t('share.status.waiting', { defaultValue: 'Connecting' });
-        default:
-            return t('share.status.fallback', { defaultValue: 'Local room' });
-    }
+function getShareStatusMessage(
+    status: ShareModalStatus,
+    t: ReturnType<typeof useTranslation>['t']
+): string {
+    return t(`share.statusMessage.${status}`, {
+        defaultValue: getShareStatusDefaultMessage(status),
+    });
 }
 
 export function ShareModal({
@@ -29,15 +35,20 @@ export function ShareModal({
     onClose,
     onCopyInvite,
     roomId,
+    inviteUrl,
     status,
-    viewerCount,
+    viewerCount: _viewerCount,
+    participants: _participants = [],
 }: ShareModalProps): React.JSX.Element | null {
     const { t } = useTranslation();
     const [copied, setCopied] = useState(false);
     const closeButtonRef = useRef<HTMLButtonElement>(null);
-    const brandRadius = 'var(--brand-radius, 24px)';
+    const modalRadius = 'var(--radius-xl)';
+    const sectionRadius = 'var(--radius-md)';
+    const fieldRadius = 'var(--radius-sm)';
     const primaryColor = 'var(--brand-primary, #6366f1)';
     const primary50Color = 'var(--brand-primary-50, #eef2ff)';
+    const statusMessage = getShareStatusMessage(status, t);
 
     useEffect(() => {
         if (!isOpen) {
@@ -70,9 +81,10 @@ export function ShareModal({
                 role="dialog"
                 aria-modal="true"
                 aria-labelledby="share-modal-title"
+                aria-describedby="share-modal-description"
                 data-testid="share-panel"
-                className="w-full max-w-md overflow-hidden border border-slate-200/70 bg-white shadow-2xl animate-in zoom-in-95 duration-200"
-                style={{ borderRadius: brandRadius }}
+                className="w-full max-w-md overflow-hidden border border-slate-200/70 bg-white shadow-[var(--shadow-overlay)] animate-in zoom-in-95 duration-200"
+                style={{ borderRadius: modalRadius }}
                 onClick={(event) => event.stopPropagation()}
             >
                 <div className="relative p-6">
@@ -80,7 +92,7 @@ export function ShareModal({
                         ref={closeButtonRef}
                         onClick={onClose}
                         className="absolute right-5 top-5 rounded-full p-2 text-slate-400 transition-all hover:bg-slate-100 hover:text-slate-600 active:scale-95"
-                        aria-label={t('share.close', { defaultValue: 'Close' })}
+                        aria-label={t('share.close', { defaultValue: SHARE_MODAL_COPY.close })}
                     >
                         <X size={18} />
                     </button>
@@ -91,7 +103,7 @@ export function ShareModal({
                             style={{
                                 background: primary50Color,
                                 color: primaryColor,
-                                borderRadius: `calc(${brandRadius} * 0.75)`,
+                                borderRadius: sectionRadius,
                                 '--tw-ring-color': primary50Color,
                             } as React.CSSProperties}
                         >
@@ -99,32 +111,32 @@ export function ShareModal({
                         </div>
 
                         <h2 id="share-modal-title" className="text-xl font-bold tracking-tight text-slate-900">
-                            {t('share.title', { defaultValue: 'Share design' })}
+                            {t('share.title', { defaultValue: SHARE_MODAL_COPY.title })}
+                            <span className="ml-2 inline-block rounded-full bg-amber-100 px-2 py-0.5 align-middle text-[10px] font-semibold uppercase tracking-wide text-amber-700">
+                                {t('share.betaBadge', { defaultValue: SHARE_MODAL_COPY.betaBadge })}
+                            </span>
                         </h2>
-                        <p className="mt-2 max-w-[300px] text-sm leading-relaxed text-slate-500">
-                            {t('share.description', { defaultValue: 'Copy a lightweight room link to collaborate on this canvas in real time.' })}
+                        <p id="share-modal-description" className="mt-2 max-w-[300px] text-sm leading-relaxed text-slate-500">
+                            {t('share.description', { defaultValue: SHARE_MODAL_COPY.description })}
                         </p>
                     </div>
 
                     <div className="space-y-4">
-                        <div className="flex flex-wrap gap-2">
-                            <div className="inline-flex items-center gap-2 rounded-full border border-slate-200 bg-slate-50 px-3 py-1.5 text-xs font-medium text-slate-600">
-                                <Users className="h-3.5 w-3.5" />
-                                {viewerCount === 1
-                                    ? t('share.viewerCount.one', { defaultValue: '1 viewer in this room' })
-                                    : t('share.viewerCount.many', { defaultValue: '{{count}} viewers in this room', count: viewerCount })}
-                            </div>
-                            <div className="inline-flex items-center gap-2 rounded-full border border-slate-200 bg-slate-50 px-3 py-1.5 text-xs font-medium text-slate-600">
-                                <Link2 className="h-3.5 w-3.5" />
-                                {getStatusLabel(status, t)}
+                        <div className="rounded-[var(--radius-lg)] border border-slate-200 bg-slate-50 px-4 py-3">
+                            <div className="text-[11px] font-semibold uppercase tracking-[0.12em] text-slate-400">
+                                {t('share.roomId', { defaultValue: SHARE_MODAL_COPY.roomLabel })}
                             </div>
+                            <div className="mt-2 break-all font-mono text-sm text-slate-700">{roomId}</div>
                         </div>
 
-                        <div className="rounded-[calc(var(--brand-radius,24px)*0.5)] border border-slate-200 bg-slate-50 px-4 py-3">
+                        <div className="rounded-[var(--radius-lg)] border border-slate-200 bg-white px-4 py-3">
                             <div className="text-[11px] font-semibold uppercase tracking-[0.12em] text-slate-400">
-                                {t('share.roomId', { defaultValue: 'Room ID' })}
+                                {t('share.link', { defaultValue: SHARE_MODAL_COPY.linkLabel })}
                             </div>
-                            <div className="mt-2 break-all font-mono text-sm text-slate-700">{roomId}</div>
+                            <div className="mt-2 rounded-[var(--radius-md)] border border-slate-200 bg-slate-50 px-3 py-2">
+                                <p className="break-all font-mono text-xs leading-5 text-slate-700">{inviteUrl}</p>
+                            </div>
+                            <p className="mt-2 text-xs leading-5 text-slate-500">{statusMessage}</p>
                         </div>
 
                         <Button
@@ -132,13 +144,15 @@ export function ShareModal({
                             onClick={handleCopyLink}
                             className={`w-full py-2.5 text-sm font-semibold transition-all ${copied ? 'bg-emerald-500 hover:bg-emerald-600' : ''}`}
                             icon={copied ? <Check className="mr-2 h-4 w-4" /> : <Copy className="mr-2 h-4 w-4" />}
-                            style={copied ? {} : { background: primaryColor, borderRadius: `calc(${brandRadius} * 0.6)` }}
+                            style={copied ? {} : { background: primaryColor, borderRadius: fieldRadius }}
                         >
-                            {copied ? t('share.copied', { defaultValue: 'Copied link' }) : t('share.copyLink', { defaultValue: 'Copy Link' })}
+                            {copied
+                                ? t('share.copied', { defaultValue: SHARE_MODAL_COPY.copiedLink })
+                                : t('share.copyLink', { defaultValue: SHARE_MODAL_COPY.copyLink })}
                         </Button>
 
                         <p className="text-center text-xs text-slate-400">
-                            {t('share.localOnlyNote', { defaultValue: 'All your diagram data stays local in the browser unless you export it.' })}
+                            {t('share.footerNote', { defaultValue: SHARE_MODAL_COPY.footerNote })}
                         </p>
                     </div>
                 </div>
@@ -148,7 +162,7 @@ export function ShareModal({
                 type="button"
                 className="absolute inset-0 -z-10"
                 onClick={onClose}
-                aria-label={t('share.closeDialog', { defaultValue: 'Close share dialog' })}
+                aria-label={t('share.closeDialog', { defaultValue: SHARE_MODAL_COPY.closeDialog })}
             />
         </div>,
         document.body
diff --git a/src/components/SidebarShell.tsx b/src/components/SidebarShell.tsx
index 34541f8..8ff2462 100644
--- a/src/components/SidebarShell.tsx
+++ b/src/components/SidebarShell.tsx
@@ -21,12 +21,14 @@ interface SidebarHeaderProps {
 interface SidebarBodyProps {
     children: React.ReactNode;
     className?: string;
+    scrollable?: boolean;
 }
 
 interface SidebarSegmentedTabsProps {
     tabs: SidebarTabItem[];
     activeTab: string;
     onTabChange: (tab: string) => void;
+    getTabTestId?: (tab: SidebarTabItem) => string | undefined;
 }
 
 function getSidebarTabButtonClass(isActive: boolean): string {
@@ -79,9 +81,15 @@ export function SidebarHeader({
     );
 }
 
-export function SidebarBody({ children, className = '' }: SidebarBodyProps): React.ReactElement {
+export function SidebarBody({
+    children,
+    className = '',
+    scrollable = true,
+}: SidebarBodyProps): React.ReactElement {
+    const overflowClassName = scrollable ? 'overflow-y-auto' : 'overflow-hidden';
+
     return (
-        <div className={`min-h-0 flex-1 overflow-y-auto px-4 py-3 custom-scrollbar ${className}`.trim()}>
+        <div className={`min-h-0 flex-1 ${overflowClassName} px-4 py-3 custom-scrollbar ${className}`.trim()}>
             {children}
         </div>
     );
@@ -91,6 +99,7 @@ export function SidebarSegmentedTabs({
     tabs,
     activeTab,
     onTabChange,
+    getTabTestId,
 }: SidebarSegmentedTabsProps): React.ReactElement {
     return (
         <div className="flex rounded-[var(--brand-radius)] border border-slate-200/60 bg-slate-50/70 p-1">
@@ -99,7 +108,8 @@ export function SidebarSegmentedTabs({
                     type="button"
                     key={id}
                     onClick={() => onTabChange(id)}
-                    className={`flex flex-1 items-center justify-center gap-1.5 rounded-[calc(var(--brand-radius)-4px)] px-3 py-1.5 text-xs font-semibold transition-colors ${getSidebarTabButtonClass(activeTab === id)}`}
+                    data-testid={getTabTestId?.({ id, label, icon })}
+                    className={`flex flex-1 items-center justify-center gap-1.5 rounded-[var(--radius-xs)] px-3 py-1.5 text-xs font-semibold transition-colors ${getSidebarTabButtonClass(activeTab === id)}`}
                 >
                     {icon}
                     {label}
diff --git a/src/components/SnapshotsPanel.tsx b/src/components/SnapshotsPanel.tsx
index ad77f1f..7690a15 100644
--- a/src/components/SnapshotsPanel.tsx
+++ b/src/components/SnapshotsPanel.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { X, Save, Clock, Trash2, RotateCcw } from 'lucide-react';
+import { X, Save, Clock, Trash2, RotateCcw, GitCompare } from 'lucide-react';
 import { FlowSnapshot } from '@/lib/types';
 import { useTranslation } from 'react-i18next';
 
@@ -12,12 +12,14 @@ interface SnapshotsPanelProps {
     onSaveSnapshot: (name: string) => void;
     onRestoreSnapshot: (snapshot: FlowSnapshot) => void;
     onDeleteSnapshot: (id: string) => void;
+    onCompareSnapshot?: (snapshot: FlowSnapshot) => void;
 }
 
 interface SnapshotCardListProps {
     snapshots: FlowSnapshot[];
     onRestoreSnapshot: (snapshot: FlowSnapshot) => void;
     onDeleteSnapshot: (id: string) => void;
+    onCompareSnapshot?: (snapshot: FlowSnapshot) => void;
     restoreVersionTitle: string;
     deleteVersionTitle: string;
     nodesLabel: (count: number) => string;
@@ -30,6 +32,7 @@ function SnapshotCardList({
     snapshots,
     onRestoreSnapshot,
     onDeleteSnapshot,
+    onCompareSnapshot,
     restoreVersionTitle,
     deleteVersionTitle,
     nodesLabel,
@@ -47,16 +50,31 @@ function SnapshotCardList({
                             <p className="text-xs text-slate-500">{new Date(snapshot.timestamp).toLocaleString()}</p>
                         </div>
                         <div className="flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
+                            {onCompareSnapshot && (
+                                <button
+                                    type="button"
+                                    onClick={() => onCompareSnapshot(snapshot)}
+                                    aria-label="Compare snapshot with current diagram"
+                                    title="Compare with current"
+                                    className="p-1.5 text-slate-500 hover:bg-slate-100 hover:text-[var(--brand-primary)] rounded-[var(--radius-sm)] transition-colors"
+                                >
+                                    <GitCompare className="w-3.5 h-3.5" />
+                                </button>
+                            )}
                             <button
+                                type="button"
                                 onClick={() => onRestoreSnapshot(snapshot)}
                                 data-testid={`snapshot-restore-${snapshot.id}`}
+                                aria-label={`${restoreVersionTitle}: ${snapshot.name}`}
                                 title={restoreVersionTitle}
                                 className="p-1.5 text-[var(--brand-primary)] hover:bg-[var(--brand-primary-50)] rounded-[var(--radius-sm)] transition-colors"
                             >
                                 <RotateCcw className="w-3.5 h-3.5" />
                             </button>
                             <button
+                                type="button"
                                 onClick={() => onDeleteSnapshot(snapshot.id)}
+                                aria-label={`${deleteVersionTitle}: ${snapshot.name}`}
                                 title={deleteVersionTitle}
                                 className="p-1.5 text-red-600 hover:bg-red-50 rounded-[var(--radius-sm)] transition-colors"
                             >
@@ -83,6 +101,7 @@ export const SnapshotsPanel: React.FC<SnapshotsPanelProps> = ({
     onSaveSnapshot,
     onRestoreSnapshot,
     onDeleteSnapshot,
+    onCompareSnapshot,
 }) => {
     const { t } = useTranslation();
     const [newSnapshotName, setNewSnapshotName] = useState('');
@@ -101,13 +120,13 @@ export const SnapshotsPanel: React.FC<SnapshotsPanelProps> = ({
     };
 
     return (
-        <div className="absolute top-20 right-6 w-80 bg-white/95 backdrop-blur-md rounded-[var(--radius-lg)] shadow-2xl border border-white/20 ring-1 ring-black/5 flex flex-col overflow-hidden max-h-[calc(100vh-140px)] z-40 animate-in slide-in-from-right-10 duration-200">
+        <div className="absolute top-20 right-6 z-40 flex max-h-[calc(100vh-140px)] w-80 flex-col overflow-hidden rounded-[var(--radius-lg)] border border-white/20 bg-white/95 shadow-[var(--shadow-lg)] ring-1 ring-black/5 backdrop-blur-md animate-in slide-in-from-right-10 duration-200">
             <div className="flex items-center justify-between p-4 border-b border-slate-100 bg-slate-50/80">
                 <h3 className="font-semibold text-slate-800 flex items-center gap-2">
                     <Clock className="w-4 h-4 text-[var(--brand-primary)]" />
                     <span>{t('snapshotsPanel.title')}</span>
                 </h3>
-                <button onClick={onClose} className="p-1 hover:bg-slate-200 rounded-[var(--radius-sm)] text-slate-400 transition-colors">
+                <button type="button" onClick={onClose} className="p-1 hover:bg-slate-200 rounded-[var(--radius-sm)] text-slate-400 transition-colors" aria-label={t('snapshotsPanel.close', 'Close snapshots panel')}>
                     <X className="w-4 h-4" />
                 </button>
             </div>
@@ -125,8 +144,10 @@ export const SnapshotsPanel: React.FC<SnapshotsPanelProps> = ({
                         onKeyDown={(e) => e.key === 'Enter' && handleSave()}
                     />
                     <button
+                        type="button"
                         onClick={handleSave}
                         disabled={!newSnapshotName.trim()}
+                        aria-label={t('snapshotsPanel.saveCurrentVersion', 'Save current version')}
                         className="p-2 bg-[var(--brand-primary)] text-white rounded-[var(--radius-md)] hover:brightness-110 disabled:opacity-50 disabled:cursor-not-allowed transition-all shadow-sm active:scale-95"
                     >
                         <Save className="w-4 h-4" />
@@ -152,6 +173,7 @@ export const SnapshotsPanel: React.FC<SnapshotsPanelProps> = ({
                                     snapshots={manualSnapshots}
                                     onRestoreSnapshot={onRestoreSnapshot}
                                     onDeleteSnapshot={onDeleteSnapshot}
+                                    onCompareSnapshot={onCompareSnapshot}
                                     restoreVersionTitle={restoreVersionTitle}
                                     deleteVersionTitle={deleteVersionTitle}
                                     nodesLabel={nodesLabel}
@@ -173,6 +195,7 @@ export const SnapshotsPanel: React.FC<SnapshotsPanelProps> = ({
                                     snapshots={autoSnapshots}
                                     onRestoreSnapshot={onRestoreSnapshot}
                                     onDeleteSnapshot={onDeleteSnapshot}
+                                    onCompareSnapshot={onCompareSnapshot}
                                     restoreVersionTitle={restoreVersionTitle}
                                     deleteVersionTitle={deleteVersionTitle}
                                     nodesLabel={nodesLabel}
diff --git a/src/components/StudioAIPanel.test.tsx b/src/components/StudioAIPanel.test.tsx
new file mode 100644
index 0000000..2496e0e
--- /dev/null
+++ b/src/components/StudioAIPanel.test.tsx
@@ -0,0 +1,195 @@
+import '@testing-library/jest-dom/vitest';
+import { createRef } from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { StudioAIPanel } from './StudioAIPanel';
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (_key: string, options?: { defaultValue?: string }) => options?.defaultValue ?? _key,
+  }),
+}));
+
+vi.mock('./command-bar/useAIViewState', () => ({
+  useAIViewState: () => ({
+    prompt: 'Add Redis between API and DB',
+    setPrompt: vi.fn(),
+    selectedImage: null,
+    setSelectedImage: vi.fn(),
+    fileInputRef: createRef<HTMLInputElement>(),
+    scrollRef: createRef<HTMLDivElement>(),
+    handleGenerate: vi.fn(),
+    handleKeyDown: vi.fn(),
+    handleImageSelect: vi.fn(),
+  }),
+}));
+
+describe('StudioAIPanel', () => {
+  it('shows the settings CTA when ai is unavailable', () => {
+    render(
+      <StudioAIPanel
+        onAIGenerate={vi.fn().mockResolvedValue(false)}
+        isGenerating={false}
+        streamingText={null}
+        retryCount={0}
+        onCancelGeneration={vi.fn()}
+        pendingDiff={null}
+        onConfirmDiff={vi.fn()}
+        onDiscardDiff={vi.fn()}
+        aiReadiness={{
+          canGenerate: false,
+          blockingIssue: null,
+          advisory: null,
+        }}
+        lastError={null}
+        onClearError={vi.fn()}
+        chatMessages={[]}
+        onClearChat={vi.fn()}
+        nodeCount={0}
+        selectedNodeCount={0}
+      />
+    );
+
+    expect(screen.getByRole('button', { name: 'Add AI key to start generating' })).toBeInTheDocument();
+  });
+
+  it('opens settings instead of generating when AI is not configured', () => {
+    const dispatchEventSpy = vi.spyOn(window, 'dispatchEvent');
+
+    render(
+      <StudioAIPanel
+        onAIGenerate={vi.fn().mockResolvedValue(false)}
+        isGenerating={false}
+        streamingText={null}
+        retryCount={0}
+        onCancelGeneration={vi.fn()}
+        pendingDiff={null}
+        onConfirmDiff={vi.fn()}
+        onDiscardDiff={vi.fn()}
+        aiReadiness={{
+          canGenerate: false,
+          blockingIssue: {
+            tone: 'error',
+            title: 'OpenAI is not ready yet',
+            detail: 'Add your OpenAI API key in Settings before generating.',
+          },
+          advisory: null,
+        }}
+        lastError={null}
+        onClearError={vi.fn()}
+        chatMessages={[]}
+        onClearChat={vi.fn()}
+        nodeCount={3}
+        selectedNodeCount={0}
+      />
+    );
+
+    expect(screen.queryByText('OpenAI is not ready yet')).not.toBeInTheDocument();
+    expect(screen.queryByText('Add your OpenAI API key in Settings before generating.')).not.toBeInTheDocument();
+    fireEvent.click(screen.getByRole('button', { name: 'Generate with Flowpilot' }));
+
+    expect(dispatchEventSpy).toHaveBeenCalledTimes(1);
+    expect(dispatchEventSpy.mock.calls[0]?.[0]).toBeInstanceOf(CustomEvent);
+    expect((dispatchEventSpy.mock.calls[0]?.[0] as CustomEvent).type).toBe('open-ai-settings');
+
+    dispatchEventSpy.mockRestore();
+  });
+
+  it('removes the inline create/edit explainer copy', () => {
+    const onClearError = vi.fn();
+
+    render(
+      <StudioAIPanel
+        onAIGenerate={vi.fn().mockResolvedValue(false)}
+        isGenerating={false}
+        streamingText={null}
+        retryCount={0}
+        onCancelGeneration={vi.fn()}
+        pendingDiff={null}
+        onConfirmDiff={vi.fn()}
+        onDiscardDiff={vi.fn()}
+        aiReadiness={{
+          canGenerate: true,
+          blockingIssue: null,
+          advisory: null,
+        }}
+        lastError="The provider rejected this request."
+        onClearError={onClearError}
+        chatMessages={[]}
+        onClearChat={vi.fn()}
+        nodeCount={1}
+        selectedNodeCount={0}
+      />
+    );
+
+    expect(screen.queryByText(/Create mode replaces the canvas/i)).not.toBeInTheDocument();
+    expect(screen.queryByText(/Describe one concrete change at a time/i)).not.toBeInTheDocument();
+    fireEvent.change(screen.getByRole('textbox'), { target: { value: 'Update auth service' } });
+    expect(onClearError).toHaveBeenCalledTimes(1);
+  });
+
+  it('opens settings from the empty-state CTA', () => {
+    const dispatchEventSpy = vi.spyOn(window, 'dispatchEvent');
+
+    render(
+      <StudioAIPanel
+        onAIGenerate={vi.fn().mockResolvedValue(false)}
+        isGenerating={false}
+        streamingText={null}
+        retryCount={0}
+        onCancelGeneration={vi.fn()}
+        pendingDiff={null}
+        onConfirmDiff={vi.fn()}
+        onDiscardDiff={vi.fn()}
+        aiReadiness={{
+          canGenerate: false,
+          blockingIssue: null,
+          advisory: null,
+        }}
+        lastError={null}
+        onClearError={vi.fn()}
+        chatMessages={[]}
+        onClearChat={vi.fn()}
+        nodeCount={0}
+        selectedNodeCount={0}
+      />
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: 'Add AI key to start generating' }));
+
+    expect(dispatchEventSpy).toHaveBeenCalledTimes(1);
+    expect(dispatchEventSpy.mock.calls[0]?.[0]).toBeInstanceOf(CustomEvent);
+    expect((dispatchEventSpy.mock.calls[0]?.[0] as CustomEvent).type).toBe('open-ai-settings');
+
+    dispatchEventSpy.mockRestore();
+  });
+
+  it('renders the active generation mode with selected segmented styling', () => {
+    render(
+      <StudioAIPanel
+        onAIGenerate={vi.fn().mockResolvedValue(false)}
+        isGenerating={false}
+        streamingText={null}
+        retryCount={0}
+        onCancelGeneration={vi.fn()}
+        pendingDiff={null}
+        onConfirmDiff={vi.fn()}
+        onDiscardDiff={vi.fn()}
+        aiReadiness={{
+          canGenerate: true,
+          blockingIssue: null,
+          advisory: null,
+        }}
+        lastError={null}
+        onClearError={vi.fn()}
+        chatMessages={[]}
+        onClearChat={vi.fn()}
+        nodeCount={3}
+        selectedNodeCount={0}
+      />
+    );
+
+    expect(screen.getByRole('button', { name: 'Edit current' })).toHaveAttribute('aria-pressed', 'true');
+    expect(screen.getByRole('button', { name: 'Create new' })).toHaveAttribute('aria-pressed', 'false');
+  });
+});
diff --git a/src/components/StudioAIPanel.tsx b/src/components/StudioAIPanel.tsx
index c3bdcfc..59a0d1c 100644
--- a/src/components/StudioAIPanel.tsx
+++ b/src/components/StudioAIPanel.tsx
@@ -1,20 +1,31 @@
-import type { ReactElement } from 'react';
+import { useEffect, useState, type ReactElement } from 'react';
 import {
-    ArrowUp, Database, Server, Cloud, Network, Shield, Workflow,
-    Loader2, Paperclip, Trash2, WandSparkles, X,
+    ArrowUp, Database, Server, Cloud, Network,
+    Loader2, Paperclip, Square, Trash2, WandSparkles, X, Crosshair, Edit3,
+    CheckCircle2, Plus, Minus, RefreshCw, Key, Info,
 } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
+import { FLOWPILOT_NAME, IS_BEVELED } from '@/lib/brand';
 import type { ChatMessage } from '@/services/aiService';
-import { IS_BEVELED } from '@/lib/brand';
+import type { ImportDiff } from '@/hooks/useAIGeneration';
+import type { AIReadinessState } from '@/hooks/ai-generation/readiness';
 import { useAIViewState } from './command-bar/useAIViewState';
+import { Tooltip } from './Tooltip';
 
-interface FlowPilotExample {
+interface AIStudioExample {
     label: string;
     icon: typeof Database;
     prompt: string;
 }
 
-const FLOWPILOT_EXAMPLES: FlowPilotExample[] = [
+const EMPTY_CANVAS_EXAMPLES: AIStudioExample[] = [
+    { label: 'Microservices architecture', icon: Server, prompt: 'Generate a microservices architecture with API gateway, auth service, user service, order service, and a shared PostgreSQL database' },
+    { label: 'AWS 3-tier webapp', icon: Cloud, prompt: 'Generate a 3-tier AWS architecture with CloudFront, ALB, ECS Fargate, RDS PostgreSQL, and ElastiCache Redis' },
+    { label: 'User auth flow', icon: Network, prompt: 'Generate a user authentication flow showing login, registration, password reset, OAuth, and session management' },
+    { label: 'CI/CD pipeline', icon: Database, prompt: 'Generate a CI/CD pipeline with GitHub, build, test, staging deploy, approval gate, and production deploy stages' },
+];
+
+const ITERATION_EXAMPLES: AIStudioExample[] = [
     { label: 'Add Database', icon: Database, prompt: 'Add a PostgreSQL database to the architecture' },
     { label: 'Add Server', icon: Server, prompt: 'Add a backend Node.js server service' },
     { label: 'Add Cloud Infrastructure', icon: Cloud, prompt: 'Deploy the main application to AWS' },
@@ -35,20 +46,112 @@ function getExampleIconColor(index: number): string {
 }
 
 interface StudioAIPanelProps {
-    onAIGenerate: (prompt: string, imageBase64?: string) => Promise<void>;
+    onAIGenerate: (prompt: string, imageBase64?: string) => Promise<boolean>;
     isGenerating: boolean;
+    streamingText: string | null;
+    retryCount: number;
+    onCancelGeneration: () => void;
+    pendingDiff: ImportDiff | null;
+    onConfirmDiff: () => void;
+    onDiscardDiff: () => void;
+    aiReadiness: AIReadinessState;
+    lastError: string | null;
+    onClearError: () => void;
     chatMessages: ChatMessage[];
     onClearChat: () => void;
+    nodeCount?: number;
+    selectedNodeCount?: number;
+    initialPrompt?: string;
+    onInitialPromptConsumed?: () => void;
+}
+
+type AIGenerationMode = 'edit' | 'create';
+type ChatBubbleTone = ChatMessage['role'];
+
+function buildGenerationPrompt(prompt: string, mode: AIGenerationMode, nodeCount: number): string {
+    if (nodeCount === 0 || mode === 'edit') {
+        return prompt;
+    }
+
+    return [
+        'Create a brand new diagram from scratch.',
+        'Ignore the existing canvas and replace it with a new diagram that matches the request.',
+        '',
+        prompt,
+    ].join('\n');
+}
+
+function getPromptPlaceholder(
+    generationMode: AIGenerationMode,
+    nodeCount: number,
+    selectedNodeCount: number,
+): string {
+    if (generationMode === 'create') {
+        return 'Describe the diagram you want to create from scratch...';
+    }
+
+    if (selectedNodeCount > 0) {
+        return `Describe what to change about the ${selectedNodeCount} selected node${selectedNodeCount > 1 ? 's' : ''}...`;
+    }
+
+    if (nodeCount > 0) {
+        return "Describe a change, for example 'add Redis between API and DB'";
+    }
+
+    return 'Describe a diagram to generate from scratch...';
+}
+
+function getPrimaryComposerClassName(isInputEmpty: boolean, isBeveled: boolean): string {
+    if (isInputEmpty) {
+        return 'cursor-not-allowed border-slate-200 bg-slate-100 text-slate-400 shadow-none';
+    }
+
+    return `border-[color-mix(in_srgb,var(--brand-primary),black_18%)] bg-[var(--brand-primary)] text-white shadow-sm hover:-translate-y-px hover:bg-[var(--brand-primary-600)] hover:shadow-md ${isBeveled ? 'btn-beveled' : ''}`;
+}
+
+function getGenerationModeButtonClassName(isActive: boolean): string {
+    if (isActive) {
+        return 'bg-white text-orange-600 border border-orange-200 shadow-sm';
+    }
+
+    return 'text-slate-500 hover:bg-white/50 hover:text-slate-700 border border-transparent';
+}
+
+function getInfoIconClassName(isActive: boolean): string {
+    return `h-3.5 w-3.5 focus:outline-none ${isActive ? 'text-orange-400' : 'text-slate-400'}`;
+}
+
+function getChatBubbleClassName(role: ChatBubbleTone): string {
+    if (role === 'user') {
+        return 'rounded-br-sm bg-[var(--brand-primary)] text-white shadow-sm';
+    }
+
+    return 'rounded-bl-sm border border-slate-200/70 bg-white text-[var(--brand-text)] shadow-sm';
 }
 
 export function StudioAIPanel({
     onAIGenerate,
     isGenerating,
+    streamingText,
+    retryCount,
+    onCancelGeneration,
+    pendingDiff,
+    onConfirmDiff,
+    onDiscardDiff,
+    aiReadiness,
+    lastError,
+    onClearError,
     chatMessages,
     onClearChat,
+    nodeCount = 0,
+    selectedNodeCount = 0,
+    initialPrompt,
+    onInitialPromptConsumed,
 }: StudioAIPanelProps): ReactElement {
     const { t } = useTranslation();
     const isBeveled = IS_BEVELED;
+    const [generationMode, setGenerationMode] = useState<AIGenerationMode>(nodeCount === 0 ? 'create' : 'edit');
+
     const {
         prompt,
         setPrompt,
@@ -67,10 +170,83 @@ export function StudioAIPanel({
         chatMessageCount: chatMessages.length,
     });
 
+    useEffect(() => {
+        if (initialPrompt) {
+            setPrompt(initialPrompt);
+            onInitialPromptConsumed?.();
+        }
+    }, [initialPrompt, onInitialPromptConsumed, setPrompt]);
+
     const hasHistory = chatMessages.length > 0;
+    const effectiveGenerationMode: AIGenerationMode = nodeCount === 0 ? 'create' : generationMode;
+    const examplePrompts = nodeCount === 0 ? EMPTY_CANVAS_EXAMPLES : ITERATION_EXAMPLES;
+    const sendButtonLabel = effectiveGenerationMode === 'edit' && nodeCount > 0
+        ? 'Apply AI edit'
+        : 'Generate diagram';
+    const sendButtonIcon = generationMode === 'edit' && nodeCount > 0 ? <Edit3 className="h-4 w-4" /> : <ArrowUp className="h-4 w-4" />;
+
+    async function submitPrompt(promptText?: string): Promise<void> {
+        const resolvedPrompt = promptText ?? prompt;
+        const finalPrompt = buildGenerationPrompt(resolvedPrompt, effectiveGenerationMode, nodeCount);
+        await handleGenerate(finalPrompt);
+    }
+
+    function openAISettings(): void {
+        window.dispatchEvent(new CustomEvent('open-ai-settings'));
+    }
+
+    function handleSubmit(): void {
+        if (!aiReadiness.canGenerate) {
+            openAISettings();
+            return;
+        }
+
+        void submitPrompt();
+    }
+
+    const isInputEmpty = (!prompt.trim() && !selectedImage);
 
     return (
         <div className="flex h-full min-h-0 flex-col overflow-hidden">
+            {pendingDiff && (
+                <div className="mx-1 mb-2 rounded-[var(--radius-md)] border border-emerald-200 bg-emerald-50 p-3">
+                    <div className="flex items-center gap-2 mb-2">
+                        <CheckCircle2 className="h-4 w-4 shrink-0 text-emerald-500" />
+                        <p className="text-xs font-semibold text-slate-700">Import ready — review changes</p>
+                    </div>
+                    <div className="flex items-center gap-3 mb-3 text-[11px]">
+                        {pendingDiff.addedCount > 0 && (
+                            <span className="flex items-center gap-1 text-emerald-700 font-medium">
+                                <Plus className="h-3 w-3" />{pendingDiff.addedCount} added
+                            </span>
+                        )}
+                        {pendingDiff.updatedCount > 0 && (
+                            <span className="flex items-center gap-1 text-amber-700 font-medium">
+                                <RefreshCw className="h-3 w-3" />{pendingDiff.updatedCount} updated
+                            </span>
+                        )}
+                        {pendingDiff.removedCount > 0 && (
+                            <span className="flex items-center gap-1 text-red-700 font-medium">
+                                <Minus className="h-3 w-3" />{pendingDiff.removedCount} removed
+                            </span>
+                        )}
+                    </div>
+                    <div className="flex gap-2">
+                        <button
+                            onClick={onDiscardDiff}
+                            className="flex h-7 flex-1 items-center justify-center rounded border border-slate-200 bg-white text-[11px] font-medium text-slate-600 hover:bg-slate-50"
+                        >
+                            Discard
+                        </button>
+                        <button
+                            onClick={onConfirmDiff}
+                            className="flex h-7 flex-1 items-center justify-center rounded bg-emerald-600 text-[11px] font-medium text-white hover:bg-emerald-700"
+                        >
+                            Apply to canvas
+                        </button>
+                    </div>
+                </div>
+            )}
             {hasHistory && (
                 <div className="flex items-center justify-end px-1 pb-2">
                     <button
@@ -85,53 +261,113 @@ export function StudioAIPanel({
 
             <div ref={scrollRef} className="min-h-0 flex-1 space-y-4 overflow-y-auto px-1 py-4 custom-scrollbar">
                 {!hasHistory ? (
-                    <div className="flex h-full flex-col items-center justify-center py-12 text-center">
-                        <div className="mb-4 flex h-14 w-14 items-center justify-center rounded-[var(--radius-md)] border border-[var(--brand-primary-100)] bg-[var(--brand-primary-50)] text-[var(--brand-primary)] shadow-sm">
+                    <div className="flex h-full flex-col items-center justify-center py-8 text-center px-4">
+                        <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-2xl bg-orange-50 text-orange-600 shadow-sm ring-1 ring-orange-100">
                             <WandSparkles className="h-6 w-6" />
                         </div>
-                        <h3 className="text-xl font-semibold tracking-tight text-slate-900">FlowPilot</h3>
-                        <p className="mt-2 mb-6 max-w-[280px] text-sm leading-6 text-slate-500">
-                            Describe the changes you want and FlowPilot will update the graph for you.
+                        <h3 className="text-xl font-bold tracking-tight text-slate-900">{FLOWPILOT_NAME}</h3>
+                        <p className="mt-2.5 mb-8 max-w-[280px] text-[13px] leading-relaxed text-slate-600">
+                            {nodeCount === 0
+                                ? `Describe the diagram you want and ${FLOWPILOT_NAME} will draft the first graph for you.`
+                                : `Describe the changes you want and ${FLOWPILOT_NAME} will update the graph for you.`}
                         </p>
-                        <div className="flex flex-wrap items-center justify-center gap-2.5 max-w-[320px] mx-auto">
-                            {FLOWPILOT_EXAMPLES.map((skill, index) => {
-                                const Icon = skill.icon;
-
-                                return (
-                                    <button
-                                        key={skill.label}
-                                        onClick={() => {
-                                            setPrompt(skill.prompt);
-                                            void handleGenerate(skill.prompt);
-                                        }}
-                                        className="flex items-center gap-2 rounded-full border border-slate-200 bg-white px-3.5 py-1.5 text-[13px] font-medium text-slate-700 shadow-sm transition-all hover:border-[var(--brand-primary-200)] hover:text-[var(--brand-primary)] active:scale-95"
-                                    >
-                                        <Icon className={`h-3.5 w-3.5 ${getExampleIconColor(index)}`} />
-                                        {skill.label}
-                                    </button>
-                                );
-                            })}
-                        </div>
+
+                        {aiReadiness.canGenerate && (
+                            <div className="flex max-w-[520px] flex-wrap items-center justify-center gap-3">
+                                {examplePrompts.map((skill, index) => {
+                                    const Icon = skill.icon;
+                                    return (
+                                        <button
+                                            key={skill.label}
+                                            onClick={() => {
+                                                setPrompt(skill.prompt);
+                                                void submitPrompt(skill.prompt);
+                                            }}
+                                            className="flex items-center gap-2 rounded-full border border-slate-200 bg-white px-5 py-2.5 text-[13px] font-medium text-slate-700 shadow-sm transition-all duration-200 hover:border-[var(--brand-primary-200)] hover:text-[var(--brand-primary)] hover:shadow-md active:scale-95"
+                                        >
+                                            <Icon className={`h-3.5 w-3.5 ${getExampleIconColor(index)}`} />
+                                            {skill.label}
+                                        </button>
+                                    );
+                                })}
+                            </div>
+                        )}
+                        {!aiReadiness.canGenerate && (
+                            <div className="mt-8 flex justify-center">
+                                <button
+                                    onClick={openAISettings}
+                                    className="flex items-center gap-2 rounded-full border border-slate-200 bg-white px-4 py-2 text-xs font-semibold text-slate-600 shadow-sm transition-all hover:bg-slate-50 hover:text-slate-900 active:scale-95"
+                                >
+                                    <Key className="h-3.5 w-3.5" />
+                                    Add AI key to start generating
+                                </button>
+                            </div>
+                        )}
                     </div>
                 ) : (
-                    chatMessages.map((msg, idx) => (
-                        <div key={idx} className={`flex ${msg.role === 'user' ? 'justify-end' : 'justify-start'}`}>
-                            <div
-                                className={`max-w-[88%] rounded-[var(--radius-lg)] px-3.5 py-2.5 text-sm whitespace-pre-wrap ${msg.role === 'user'
-                                    ? 'rounded-br-sm bg-[var(--brand-primary)] text-white shadow-sm'
-                                    : 'rounded-bl-sm border border-slate-200/70 bg-white text-[var(--brand-text)] shadow-sm'
-                                    }`}
-                            >
-                                {msg.parts.map((part, index) => (
-                                    <div key={index} className="leading-relaxed">{part.text}</div>
-                                ))}
+                    <>
+                        {chatMessages.map((msg, idx) => (
+                            <div key={idx} className={`flex ${msg.role === 'user' ? 'justify-end' : 'justify-start'}`}>
+                                <div
+                                    className={`max-w-[88%] rounded-[var(--radius-md)] px-3.5 py-2.5 text-sm whitespace-pre-wrap ${getChatBubbleClassName(msg.role)}`}
+                                >
+                                    {msg.parts.map((part, index) => (
+                                        <div key={index} className="leading-relaxed">{part.text}</div>
+                                    ))}
+                                </div>
                             </div>
-                        </div>
-                    ))
+                        ))}
+                        {isGenerating && (
+                            <div className="flex justify-start">
+                                <div className="max-w-[88%] rounded-[var(--radius-md)] rounded-bl-sm border border-slate-200/70 bg-white px-3.5 py-2.5 text-sm text-[var(--brand-text)] shadow-sm">
+                                    {streamingText
+                                        ? <span className="whitespace-pre-wrap leading-relaxed">{streamingText}</span>
+                                        : <span className="flex items-center gap-1.5 text-slate-400">
+                                            <Loader2 className="h-3.5 w-3.5 animate-spin" />
+                                            {retryCount > 0 ? `Retrying (${retryCount} of 3)…` : 'Generating…'}
+                                        </span>
+                                    }
+                                </div>
+                            </div>
+                        )}
+                    </>
                 )}
             </div>
+            <div className="shrink-0 border-t border-slate-100 px-1 pt-3">
+                {nodeCount > 0 ? (
+                    <div className="mb-3 flex rounded-[var(--radius-md)] border border-slate-200/80 bg-slate-50/80 p-1">
+                        <button
+                            onClick={() => setGenerationMode('edit')}
+                            className={`flex flex-1 items-center justify-center gap-1.5 rounded-[var(--radius-sm)] py-1.5 text-[13px] font-semibold transition-all ${getGenerationModeButtonClassName(effectiveGenerationMode === 'edit')}`}
+                            aria-pressed={effectiveGenerationMode === 'edit'}
+                        >
+                            Edit current
+                            <Tooltip text="Modify your existing canvas" side="top" className="flex items-center">
+                                <Info className={getInfoIconClassName(effectiveGenerationMode === 'edit')} />
+                            </Tooltip>
+                        </button>
+                        <button
+                            onClick={() => setGenerationMode('create')}
+                            className={`flex flex-1 items-center justify-center gap-1.5 rounded-[var(--radius-sm)] py-1.5 text-[13px] font-semibold transition-all ${getGenerationModeButtonClassName(effectiveGenerationMode === 'create')}`}
+                            aria-pressed={effectiveGenerationMode === 'create'}
+                        >
+                            Create new
+                            <Tooltip text="Start fresh with a new diagram" side="top" className="flex items-center">
+                                <Info className={getInfoIconClassName(effectiveGenerationMode === 'create')} />
+                            </Tooltip>
+                        </button>
+                    </div>
+                ) : null}
+
+                {selectedNodeCount > 0 && effectiveGenerationMode === 'edit' ? (
+                    <div className="mb-3 flex items-center gap-1.5 rounded-[var(--radius-xs)] border border-[var(--brand-primary-100)] bg-[var(--brand-primary-50)] px-2.5 py-1.5">
+                        <Crosshair className="h-3 w-3 shrink-0 text-[var(--brand-primary)]" />
+                        <span className="text-[11px] font-medium text-[var(--brand-primary)]">
+                            Editing {selectedNodeCount} selected {selectedNodeCount === 1 ? 'node' : 'nodes'}
+                        </span>
+                    </div>
+                ) : null}
 
-            <div className="border-t border-slate-100 px-1 pt-3">
                 {selectedImage && (
                     <div className="group relative mb-3 h-16 w-16 overflow-hidden rounded-[var(--radius-md)] border border-slate-200 bg-slate-100 shadow-sm">
                         <img src={selectedImage} alt="Upload preview" className="h-full w-full object-cover" />
@@ -144,44 +380,60 @@ export function StudioAIPanel({
                     </div>
                 )}
 
-                <div className="relative flex w-full flex-col rounded-[var(--brand-radius)] border border-slate-200 bg-white shadow-sm transition-all focus-within:border-[var(--brand-primary)] focus-within:ring-2 focus-within:ring-[var(--brand-primary-100)]">
+                <div className="relative flex w-full flex-col rounded-[var(--brand-radius)] border border-slate-200 bg-white shadow-sm transition-all focus-within:border-[var(--brand-primary)] focus-within:ring-[3px] focus-within:ring-[var(--brand-primary-100)]">
                     <textarea
                         value={prompt}
-                        onChange={(event) => setPrompt(event.target.value)}
+                        onChange={(event) => {
+                            if (lastError) {
+                                onClearError();
+                            }
+                            setPrompt(event.target.value);
+                        }}
                         onKeyDown={handleKeyDown}
-                        placeholder="Describe your edits..."
-                        className="w-full resize-none rounded-t-[var(--brand-radius)] bg-transparent p-4 text-sm text-[var(--brand-text)] placeholder-[var(--brand-secondary-light)] outline-none custom-scrollbar"
-                        style={{ minHeight: '60px', maxHeight: '160px' }}
-                        rows={2}
+                        placeholder={getPromptPlaceholder(effectiveGenerationMode, nodeCount, selectedNodeCount)}
+                        className="w-full resize-none rounded-[var(--brand-radius)] bg-transparent px-4 pb-12 pt-4 text-sm text-[var(--brand-text)] placeholder-slate-400 outline-none custom-scrollbar"
+                        style={{ minHeight: '100px', maxHeight: '180px' }}
+                        rows={3}
                     />
-                    <div className="flex items-center justify-between rounded-b-[var(--brand-radius)] px-3 pb-3 pt-1">
-                        <div className="flex items-center gap-2">
-                            <input
-                                type="file"
-                                accept="image/*"
-                                className="hidden"
-                                ref={fileInputRef}
-                                onChange={handleImageSelect}
-                            />
+                    <div className="absolute bottom-2 left-2 flex items-center gap-1">
+                        <input
+                            type="file"
+                            accept="image/*"
+                            className="hidden"
+                            ref={fileInputRef}
+                            onChange={handleImageSelect}
+                        />
+                        <button
+                            onClick={() => fileInputRef.current?.click()}
+                            className="flex h-8 w-8 items-center justify-center rounded-full text-slate-400 transition-colors hover:bg-slate-100 hover:text-slate-600"
+                            title="Attach Image"
+                            type="button"
+                        >
+                            <Paperclip className="h-4 w-4" />
+                        </button>
+                    </div>
+                    <div className="absolute bottom-2 right-2 flex items-center gap-1.5">
+                        {isGenerating ? (
                             <button
-                                onClick={() => fileInputRef.current?.click()}
-                                className="flex h-8 w-8 items-center justify-center rounded-full text-slate-400 hover:bg-slate-100 hover:text-slate-600 transition-colors"
-                                title="Attach Image"
+                                onClick={onCancelGeneration}
+                                className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-red-500 text-white shadow-sm transition-all hover:bg-red-600 active:scale-95"
+                                aria-label="Cancel generation"
+                                type="button"
                             >
-                                <Paperclip className="h-4 w-4" />
+                                <Square className="h-3.5 w-3.5 fill-current" />
                             </button>
-                        </div>
-                        <div className="flex items-center gap-1.5">
+                        ) : (
                             <button
-                                onClick={() => {
-                                    void handleGenerate();
-                                }}
-                                disabled={(!prompt.trim() && !selectedImage) || isGenerating}
-                                className={`flex h-8 w-8 items-center justify-center rounded-full bg-[var(--brand-primary)] text-white hover:bg-[var(--brand-primary-600)] disabled:bg-slate-300 disabled:opacity-50 disabled:cursor-not-allowed transition-all active:scale-95 flex-shrink-0 ${isBeveled ? 'btn-beveled' : ''}`}
+                                onClick={handleSubmit}
+                                disabled={isInputEmpty}
+                                className={`flex h-8 w-8 items-center justify-center rounded-full border transition-all flex-shrink-0 ${getPrimaryComposerClassName(isInputEmpty, isBeveled)} ${!isInputEmpty ? 'active:scale-95' : ''}`}
+                                aria-label={t('ai.generateWithFlowpilot', { defaultValue: 'Generate with Flowpilot' })}
+                                title={sendButtonLabel}
+                                type="button"
                             >
-                                {isGenerating ? <Loader2 className="h-4 w-4 animate-spin" /> : <ArrowUp className="h-4 w-4" />}
+                                {sendButtonIcon}
                             </button>
-                        </div>
+                        )}
                     </div>
                 </div>
             </div>
diff --git a/src/components/StudioCodePanel.test.tsx b/src/components/StudioCodePanel.test.tsx
index c99b43d..513d50d 100644
--- a/src/components/StudioCodePanel.test.tsx
+++ b/src/components/StudioCodePanel.test.tsx
@@ -93,7 +93,7 @@ describe('StudioCodePanel', () => {
     fireEvent.change(textbox, { target: { value: 'broken dsl' } });
 
     expect(screen.getByText('Needs fixes')).not.toBeNull();
-    expect(screen.getByRole('button', { name: 'Apply Changes' }).hasAttribute('disabled')).toBe(true);
+    expect(screen.getByRole('button', { name: 'Apply to canvas' }).hasAttribute('disabled')).toBe(true);
   });
 
   it('applies valid changed drafts and marks them applied', async () => {
@@ -102,7 +102,7 @@ describe('StudioCodePanel', () => {
     const textbox = screen.getByRole('textbox');
     fireEvent.change(textbox, { target: { value: 'flow: "Updated"\ndirection: TB' } });
 
-    const applyButton = screen.getByRole('button', { name: 'Apply Changes' });
+    const applyButton = screen.getByRole('button', { name: 'Apply to canvas' });
     expect(applyButton.hasAttribute('disabled')).toBe(false);
 
     fireEvent.click(applyButton);
diff --git a/src/components/StudioCodePanel.tsx b/src/components/StudioCodePanel.tsx
index f899c80..8d6724e 100644
--- a/src/components/StudioCodePanel.tsx
+++ b/src/components/StudioCodePanel.tsx
@@ -1,5 +1,5 @@
 import React, { useRef } from 'react';
-import { AlertCircle, BookOpen, CheckCircle2, Play, RotateCcw } from 'lucide-react';
+import { AlertCircle, BookOpen, CheckCircle2, CircleHelp, Play, RotateCcw, Zap } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { Button } from './ui/Button';
 import { Textarea } from './ui/Textarea';
@@ -10,12 +10,37 @@ import { useToast } from './ui/ToastContext';
 import type { FlowEdge, FlowNode } from '@/lib/types';
 import type { StudioCodeMode } from '@/hooks/useFlowEditorUIState';
 import { useStudioCodePanelController, type DraftPreviewState } from './studio-code-panel/useStudioCodePanelController';
+import { Tooltip } from './Tooltip';
 
 interface CodeModeOption {
     id: StudioCodeMode;
     label: string;
 }
 
+const MODE_OPTIONS: CodeModeOption[] = [
+    { id: 'openflow', label: `${APP_NAME} DSL` },
+    { id: 'mermaid', label: 'Mermaid' },
+];
+
+function friendlyDslError(raw: string): string {
+    if (/unexpected token/i.test(raw)) return 'Syntax error, check for missing colons or brackets';
+    if (/duplicate|already defined/i.test(raw)) return 'Duplicate node ID, each node must have a unique name';
+    if (/spaces?\b.*id|id.*\bspaces?/i.test(raw) || /node id.*space/i.test(raw)) return 'Node IDs cannot contain spaces, use underscores (for example my_node)';
+    return raw;
+}
+
+function getDraftPreviewToneClass(state: DraftPreviewState): string {
+    if (state === 'ready') {
+        return 'text-emerald-700';
+    }
+
+    if (state === 'error') {
+        return 'text-amber-700';
+    }
+
+    return 'text-slate-600';
+}
+
 function getDraftPreviewBadgeClass(state: DraftPreviewState): string {
     if (state === 'ready') {
         return 'bg-emerald-50 text-emerald-700';
@@ -28,6 +53,22 @@ function getDraftPreviewBadgeClass(state: DraftPreviewState): string {
     return 'bg-slate-100 text-slate-600';
 }
 
+function getModeButtonClassName(isActive: boolean): string {
+    if (isActive) {
+        return 'border-[var(--brand-primary)] text-[var(--brand-primary)]';
+    }
+
+    return 'border-transparent text-slate-500 hover:text-[var(--brand-text)]';
+}
+
+function getLivePreviewButtonClassName(isActive: boolean): string {
+    if (isActive) {
+        return 'border-[var(--brand-primary-200)] bg-[var(--brand-primary-50)] text-[var(--brand-primary)]';
+    }
+
+    return 'border-slate-200 text-slate-500 hover:border-slate-300 hover:text-slate-700';
+}
+
 interface StudioCodePanelProps {
     nodes: FlowNode[];
     edges: FlowEdge[];
@@ -48,10 +89,6 @@ export function StudioCodePanel({
     const { setMermaidDiagnostics, clearMermaidDiagnostics } = useMermaidDiagnosticsActions();
     const { addToast } = useToast();
     const textareaRef = useRef<HTMLTextAreaElement | null>(null);
-    const modeOptions: CodeModeOption[] = [
-        { id: 'openflow', label: `${APP_NAME} DSL` },
-        { id: 'mermaid', label: 'Mermaid' },
-    ];
     const {
         code,
         error,
@@ -59,6 +96,8 @@ export function StudioCodePanel({
         isApplying,
         draftPreview,
         hasDraftChanges,
+        liveSync,
+        setLiveSync,
         handleCodeChange,
         handleApply,
         handleReset,
@@ -87,27 +126,55 @@ export function StudioCodePanel({
         }
     };
 
+    const canApplyChanges = draftPreview.state === 'ready' && hasDraftChanges && !isApplying;
+    const applyButtonClassName = `h-8 ${mode === 'mermaid' ? 'flex-1' : 'min-w-[148px]'} justify-center px-3 py-1.5 text-xs ${canApplyChanges ? `border-transparent bg-[var(--brand-primary)] text-white hover:bg-[var(--brand-primary-600)] ${IS_BEVELED ? 'btn-beveled' : ''}` : ''}`;
+    const livePreviewTitle = liveSync
+        ? 'Live preview is on and auto-applies valid Mermaid changes.'
+        : 'Enable live preview for Mermaid changes.';
+    const draftPreviewDetail = draftPreview.state === 'error'
+        ? friendlyDslError(draftPreview.detail)
+        : draftPreview.detail;
+
     return (
         <div className="flex h-full min-h-0 flex-col">
-            <div className="mb-3 border-b border-slate-200/80">
-                <div className="flex items-center gap-5">
-                    {modeOptions.map(({ id, label }) => (
+            <div className="mb-3 border-b border-slate-200/80 pb-0.5">
+                <div className="flex items-center justify-between">
+                    <div className="flex items-center gap-5">
+                        {MODE_OPTIONS.map(({ id, label }) => (
+                            <button
+                                key={id}
+                                type="button"
+                                onClick={() => handleModeSelect(id)}
+                                className={`relative -mb-px border-b-2 px-0 pb-2 pt-1 text-sm font-semibold transition-colors ${getModeButtonClassName(mode === id)}`}
+                            >
+                                {label}
+                            </button>
+                        ))}
+                    </div>
+                    {mode === 'mermaid' ? (
                         <button
-                            key={id}
-                            type="button"
-                            onClick={() => handleModeSelect(id)}
-                            className={`relative -mb-px border-b-2 px-0 pb-2 pt-1 text-sm font-semibold transition-colors ${mode === id
-                                ? 'border-[var(--brand-primary)] text-[var(--brand-primary)]'
-                                : 'border-transparent text-slate-500 hover:text-[var(--brand-text)]'
-                                }`}
+                            onClick={() => setLiveSync(!liveSync)}
+                            title={livePreviewTitle}
+                            className={`flex h-6 items-center gap-1.5 rounded-full border px-2.5 text-[10px] font-medium transition-all ${getLivePreviewButtonClassName(liveSync)}`}
                         >
-                            {label}
+                            <Zap className="h-3 w-3" />
+                            Live preview
                         </button>
-                    ))}
+                    ) : (
+                        <Tooltip text="Edit the full diagram source, validate the draft, then apply the changes back to the canvas.">
+                            <button
+                                type="button"
+                                className="flex h-5 w-5 items-center justify-center rounded-full text-slate-400 transition-colors hover:bg-slate-100 hover:text-slate-600"
+                                aria-label="Diagram as code help"
+                            >
+                                <CircleHelp className="h-3.5 w-3.5" />
+                            </button>
+                        </Tooltip>
+                    )}
                 </div>
             </div>
 
-            <div className="flex min-h-0 flex-1 flex-col overflow-hidden rounded-[var(--brand-radius)] border border-slate-200 bg-slate-50/55 shadow-[0_1px_2px_rgba(15,23,42,0.06)] transition-colors focus-within:border-[var(--brand-primary-300)] focus-within:ring-1 focus-within:ring-[var(--brand-primary-100)]">
+            <div className="flex min-h-0 flex-1 flex-col overflow-hidden rounded-[var(--radius-md)] border border-slate-200 bg-slate-50/55 shadow-[0_1px_2px_rgba(15,23,42,0.06)] transition-colors focus-within:border-[var(--brand-primary-300)] focus-within:ring-1 focus-within:ring-[var(--brand-primary-100)]">
                 <div className="min-h-0 flex-1 overflow-hidden bg-white">
                     <Textarea
                         ref={textareaRef}
@@ -122,76 +189,97 @@ export function StudioCodePanel({
                 </div>
 
                 {error ? (
-                    <div className="mx-3 mt-3 rounded-[calc(var(--brand-radius)-4px)] border border-amber-200 bg-amber-50 px-3 py-2 text-xs text-amber-700">
-                        <div className="flex items-center gap-2">
-                            <AlertCircle className="h-3.5 w-3.5 shrink-0" />
-                            <span className="font-medium">{error}</span>
-                        </div>
+                    <div className="mx-3 mt-3 rounded-[var(--radius-xs)] border border-amber-200 bg-amber-50 px-3 py-2 text-xs text-amber-700">
                         {diagnostics.length > 0 ? (
-                            <div className="mt-2 space-y-1">
+                            <div className="space-y-2">
                                 {diagnostics.slice(0, 3).map((diagnostic, index) => (
-                                    <div key={`${diagnostic.message}-${index}`} className="text-[11px] leading-relaxed whitespace-pre-wrap">
-                                        {typeof diagnostic.line === 'number'
-                                            ? t('commandBar.code.linePrefix', { line: diagnostic.line, defaultValue: 'Line {{line}}: ' })
-                                            : ''}
-                                        {diagnostic.message}
+                                    <div key={`${diagnostic.message}-${index}`}>
+                                        <div className="flex items-center gap-2 font-medium">
+                                            <AlertCircle className="h-3.5 w-3.5 shrink-0" />
+                                            <span>
+                                                {typeof diagnostic.line === 'number' ? `Line ${diagnostic.line} · ` : ''}
+                                                {diagnostic.message}
+                                            </span>
+                                        </div>
+                                        {diagnostic.snippet && (
+                                            <div className="ml-5.5 mt-1 rounded bg-amber-100/60 px-2 py-1 font-mono text-[11px] text-amber-800">
+                                                {diagnostic.snippet}
+                                            </div>
+                                        )}
+                                        {diagnostic.hint && (
+                                            <div className="ml-5.5 mt-1 text-[11px] text-amber-600">
+                                                {diagnostic.hint}
+                                            </div>
+                                        )}
                                     </div>
                                 ))}
                             </div>
-                        ) : null}
+                        ) : (
+                            <div className="flex items-center gap-2">
+                                <AlertCircle className="h-3.5 w-3.5 shrink-0" />
+                                <span className="font-medium">{friendlyDslError(error)}</span>
+                            </div>
+                        )}
                     </div>
                 ) : null}
 
-                <div className="border-t border-slate-200/80 bg-slate-50/80 px-3 py-3">
-                    <div className="mb-3 flex items-center justify-between gap-3 text-[11px]">
-                        <div className="flex min-w-0 items-center gap-2">
-                            <span className={`inline-flex items-center gap-1 rounded-full px-2.5 py-1 font-semibold ${getDraftPreviewBadgeClass(draftPreview.state)}`}>
-                                {draftPreview.state === 'ready' ? <CheckCircle2 className="h-3 w-3" /> : null}
-                                {draftPreview.label}
+                <div className="border-t border-slate-200/80 bg-slate-50/80 px-4 py-3">
+                    <div className="space-y-3">
+                        <div className="flex items-center justify-between gap-3 text-[11px]">
+                            <div className="flex min-w-0 items-center gap-2">
+                                <div className={`inline-flex items-center gap-1 rounded-full px-2.5 py-1 font-semibold ${getDraftPreviewBadgeClass(draftPreview.state)}`}>
+                                    {draftPreview.label}
+                                </div>
+                                {hasDraftChanges ? (
+                                    <span className="inline-flex items-center gap-1 text-[var(--brand-primary)]">
+                                        <span className="h-1.5 w-1.5 rounded-full bg-[var(--brand-primary)]" />
+                                        <span className="font-medium">Unsaved</span>
+                                    </span>
+                                ) : null}
+                            </div>
+                            {mode === 'openflow' ? (
+                                <a
+                                    href="https://docs.openflowkit.com"
+                                    target="_blank"
+                                    rel="noopener noreferrer"
+                                    className="inline-flex items-center justify-self-end gap-1 font-medium text-[var(--brand-primary)] transition-colors hover:text-[var(--brand-primary-700)]"
+                                >
+                                    <BookOpen className="h-3.5 w-3.5" />
+                                    {t('commandBar.code.syntaxGuide')}
+                                </a>
+                            ) : (
+                                <div className="shrink-0" />
+                            )}
+                        </div>
+
+                        <div className={`flex min-w-0 items-center gap-1.5 text-[11px] ${getDraftPreviewToneClass(draftPreview.state)}`} aria-live="polite">
+                            {draftPreview.state === 'ready' && <CheckCircle2 className="h-3.5 w-3.5 shrink-0" />}
+                            <span className="truncate font-medium">
+                                {draftPreviewDetail}
                             </span>
-                            {hasDraftChanges ? (
-                                <span className="inline-flex items-center gap-1 text-[var(--brand-primary)]">
-                                    <span className="h-1.5 w-1.5 rounded-full bg-[var(--brand-primary)]" />
-                                    <span className="font-medium">Unsaved</span>
-                                </span>
-                            ) : null}
                         </div>
 
-                        {mode === 'openflow' ? (
-                            <a
-                                href="#/docs/openflow-dsl"
-                                target="_blank"
-                                rel="noopener noreferrer"
-                                className="inline-flex items-center justify-self-end gap-1 font-medium text-[var(--brand-primary)] transition-colors hover:text-[var(--brand-primary-700)]"
+                        <div className="flex items-center gap-2">
+                            <Button
+                                onClick={handleReset}
+                                disabled={!hasDraftChanges && !error}
+                                variant="ghost"
+                                className="h-8 px-3 py-1.5 text-xs text-slate-600 hover:text-slate-900"
+                                icon={<RotateCcw className="w-3.5 h-3.5" />}
                             >
-                                <BookOpen className="h-3.5 w-3.5" />
-                                {t('commandBar.code.syntaxGuide')}
-                            </a>
-                        ) : (
-                            <div className="shrink-0" />
-                        )}
-                    </div>
-
-                    <div className="flex items-center gap-2">
-                        <Button
-                            onClick={handleReset}
-                            disabled={!hasDraftChanges && !error}
-                            variant="ghost"
-                            className="h-8 px-3 py-1.5 text-xs text-slate-600 hover:text-slate-900"
-                            icon={<RotateCcw className="w-3.5 h-3.5" />}
-                        >
-                            Reset
-                        </Button>
-                        <Button
-                            onClick={() => void handleApply()}
-                            disabled={isApplying || draftPreview.state !== 'ready' || !hasDraftChanges}
-                            variant="primary"
-                            className={`h-8 flex-1 justify-center border-transparent bg-[var(--brand-primary)] px-3 py-1.5 text-xs text-white hover:bg-[var(--brand-primary-600)] transition-all active:scale-95 ${IS_BEVELED ? 'btn-beveled' : ''}`}
-                            isLoading={isApplying}
-                            icon={!isApplying && <Play className="w-3.5 h-3.5" />}
-                        >
-                            Apply Changes
-                        </Button>
+                                Reset
+                            </Button>
+                            <Button
+                                onClick={() => void handleApply()}
+                                disabled={!canApplyChanges}
+                                variant={canApplyChanges ? 'primary' : 'secondary'}
+                                className={applyButtonClassName}
+                                isLoading={isApplying}
+                                icon={!isApplying && <Play className="w-3.5 h-3.5" />}
+                            >
+                                Apply to canvas
+                            </Button>
+                        </div>
                     </div>
                 </div>
             </div>
diff --git a/src/components/StudioPanel.test.tsx b/src/components/StudioPanel.test.tsx
new file mode 100644
index 0000000..2aec086
--- /dev/null
+++ b/src/components/StudioPanel.test.tsx
@@ -0,0 +1,73 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { StudioPanel } from './StudioPanel';
+
+vi.mock('./StudioAIPanel', () => ({
+  StudioAIPanel: () => <div data-testid="studio-ai-panel" />,
+}));
+
+vi.mock('./StudioCodePanel', () => ({
+  StudioCodePanel: () => <div data-testid="studio-code-panel" />,
+}));
+
+vi.mock('./architecture-lint/LintRulesPanel', () => ({
+  LintRulesPanel: () => <div data-testid="studio-lint-panel" />,
+}));
+
+function createProps(): React.ComponentProps<typeof StudioPanel> {
+  return {
+    onClose: vi.fn(),
+    nodes: [],
+    edges: [],
+    onApply: vi.fn(),
+    onAIGenerate: vi.fn(async () => true),
+    isGenerating: false,
+    streamingText: null,
+    retryCount: 0,
+    cancelGeneration: vi.fn(),
+    pendingDiff: null,
+    onConfirmDiff: vi.fn(),
+    onDiscardDiff: vi.fn(),
+    aiReadiness: {
+      canGenerate: true,
+      blockingIssue: null,
+      advisory: null,
+    },
+    lastAIError: null,
+    onClearAIError: vi.fn(),
+    chatMessages: [],
+    onClearChat: vi.fn(),
+    activeTab: 'ai',
+    onTabChange: vi.fn(),
+    codeMode: 'openflow',
+    onCodeModeChange: vi.fn(),
+    selectedNode: null,
+    selectedNodeCount: 0,
+    onViewProperties: vi.fn(),
+    playback: {
+      currentStepIndex: -1,
+      totalSteps: 0,
+      isPlaying: false,
+      onStartPlayback: vi.fn(),
+      onPlayPause: vi.fn(),
+      onStop: vi.fn(),
+      onScrubToStep: vi.fn(),
+      onNext: vi.fn(),
+      onPrev: vi.fn(),
+      playbackSpeed: 2000,
+      onPlaybackSpeedChange: vi.fn(),
+    },
+  };
+}
+
+describe('StudioPanel', () => {
+  it('shows the studio tabs in the shared segmented control and keeps AI as the primary workspace', async () => {
+    render(<StudioPanel {...createProps()} />);
+
+    expect(screen.getByText('Flowpilot')).toBeTruthy();
+    expect(screen.getByText('Code')).toBeTruthy();
+    expect(screen.getByText('Lint Rules')).toBeTruthy();
+    expect(await screen.findByTestId('studio-ai-panel')).toBeTruthy();
+  });
+});
diff --git a/src/components/StudioPanel.tsx b/src/components/StudioPanel.tsx
index e4907cd..76bebdc 100644
--- a/src/components/StudioPanel.tsx
+++ b/src/components/StudioPanel.tsx
@@ -1,9 +1,11 @@
 import React, { lazy, Suspense } from 'react';
-import { Code2, ListVideo, WandSparkles } from 'lucide-react';
-import { ROLLOUT_FLAGS } from '@/config/rolloutFlags';
+import { ArrowRight, Code2, Shield, WandSparkles } from 'lucide-react';
+import { FLOWPILOT_NAME } from '@/lib/brand';
 import type { FlowEdge, FlowNode } from '@/lib/types';
 import type { ChatMessage } from '@/services/aiService';
 import type { StudioCodeMode, StudioTab } from '@/hooks/useFlowEditorUIState';
+import type { AIReadinessState } from '@/hooks/ai-generation/readiness';
+import type { ImportDiff } from '@/hooks/useAIGeneration';
 import { SidebarBody, SidebarHeader, SidebarSegmentedTabs, SidebarShell } from './SidebarShell';
 
 const LazyStudioAIPanel = lazy(async () => {
@@ -15,24 +17,55 @@ const LazyStudioCodePanel = lazy(async () => {
     const module = await import('./StudioCodePanel');
     return { default: module.StudioCodePanel };
 });
-const LazyStudioPlaybackPanel = lazy(async () => {
-    const module = await import('./StudioPlaybackPanel');
-    return { default: module.StudioPlaybackPanel };
+
+const LazyLintRulesPanel = lazy(async () => {
+    const module = await import('./architecture-lint/LintRulesPanel');
+    return { default: module.LintRulesPanel };
 });
 
+const STUDIO_TABS: Array<{
+    id: StudioTab;
+    icon: typeof WandSparkles;
+    label: string;
+}> = [
+    { id: 'ai', icon: WandSparkles, label: FLOWPILOT_NAME },
+    { id: 'code', icon: Code2, label: 'Code' },
+    { id: 'lint', icon: Shield, label: 'Lint Rules' },
+];
+
+function getEffectiveStudioTab(activeTab: StudioTab): 'ai' | 'code' | 'lint' {
+    if (activeTab === 'infra' || activeTab === 'playback') {
+        return 'ai';
+    }
+
+    return activeTab;
+}
+
 interface StudioPanelProps {
     onClose: () => void;
     nodes: FlowNode[];
     edges: FlowEdge[];
     onApply: (nodes: FlowNode[], edges: FlowEdge[]) => void;
-    onAIGenerate: (prompt: string, imageBase64?: string) => Promise<void>;
+    onAIGenerate: (prompt: string, imageBase64?: string) => Promise<boolean>;
     isGenerating: boolean;
+    streamingText: string | null;
+    retryCount: number;
+    cancelGeneration: () => void;
+    pendingDiff: ImportDiff | null;
+    onConfirmDiff: () => void;
+    onDiscardDiff: () => void;
+    aiReadiness: AIReadinessState;
+    lastAIError: string | null;
+    onClearAIError: () => void;
     chatMessages: ChatMessage[];
     onClearChat: () => void;
     activeTab: StudioTab;
     onTabChange: (tab: StudioTab) => void;
     codeMode: StudioCodeMode;
     onCodeModeChange: (mode: StudioCodeMode) => void;
+    selectedNode: FlowNode | null;
+    selectedNodeCount: number;
+    onViewProperties: () => void;
     playback: {
         currentStepIndex: number;
         totalSteps: number;
@@ -46,8 +79,11 @@ interface StudioPanelProps {
         playbackSpeed: number;
         onPlaybackSpeedChange: (durationMs: number) => void;
     };
+    initialPrompt?: string;
+    onInitialPromptConsumed?: () => void;
 }
 
+
 export function StudioPanel({
     onClose,
     nodes,
@@ -55,50 +91,84 @@ export function StudioPanel({
     onApply,
     onAIGenerate,
     isGenerating,
+    streamingText,
+    retryCount,
+    cancelGeneration,
+    pendingDiff,
+    onConfirmDiff,
+    onDiscardDiff,
+    aiReadiness,
+    lastAIError,
+    onClearAIError,
     chatMessages,
     onClearChat,
     activeTab,
     onTabChange,
     codeMode,
     onCodeModeChange,
-    playback,
+    selectedNode,
+    selectedNodeCount,
+    onViewProperties,
+    playback: _playback,
+    initialPrompt,
+    onInitialPromptConsumed,
 }: StudioPanelProps): React.ReactElement {
-    const studioTabs = [
-        { id: 'ai', label: 'FlowPilot', icon: WandSparkles },
-        { id: 'code', label: 'Code', icon: Code2 },
-        ...(ROLLOUT_FLAGS.playbackStudioV1 ? [{ id: 'playback', label: 'Playback', icon: ListVideo }] : []),
-    ] as const;
+    const effectiveTab = getEffectiveStudioTab(activeTab);
 
     return (
         <SidebarShell>
-            <SidebarHeader
-                title="Studio"
-                onClose={onClose}
-            />
+            <SidebarHeader title="Studio" onClose={onClose} />
 
             <div className="border-b border-slate-100 bg-[var(--brand-surface)] px-4 py-2.5">
                 <SidebarSegmentedTabs
-                    tabs={studioTabs.map(({ id, label, icon: Icon }) => ({
+                    tabs={STUDIO_TABS.map(({ id, icon: Icon, label }) => ({
                         id,
                         label,
                         icon: <Icon className="h-3.5 w-3.5" />,
                     }))}
-                    activeTab={activeTab}
+                    activeTab={effectiveTab}
                     onTabChange={(tab) => onTabChange(tab as StudioTab)}
                 />
             </div>
 
-            <SidebarBody>
-                {activeTab === 'ai' ? (
+            {selectedNode && (
+                <button
+                    onClick={onViewProperties}
+                    className="flex w-full items-center justify-between border-b border-slate-100 bg-slate-50 px-4 py-2 text-left transition-colors hover:bg-[var(--brand-primary-50)]"
+                >
+                    <span className="truncate text-xs font-medium text-slate-600">
+                        {(selectedNode.data as { label?: string }).label?.trim() || 'Selected node'}
+                    </span>
+                    <span className="ml-2 flex shrink-0 items-center gap-1 text-[11px] font-medium text-[var(--brand-primary)]">
+                        Properties <ArrowRight className="h-3 w-3" />
+                    </span>
+                </button>
+            )}
+
+            <SidebarBody scrollable={false} className="px-4 py-3">
+                {effectiveTab === 'ai' ? (
                     <Suspense fallback={null}>
                         <LazyStudioAIPanel
                             onAIGenerate={onAIGenerate}
                             isGenerating={isGenerating}
+                            streamingText={streamingText}
+                            retryCount={retryCount}
+                            onCancelGeneration={cancelGeneration}
+                            pendingDiff={pendingDiff}
+                            onConfirmDiff={onConfirmDiff}
+                            onDiscardDiff={onDiscardDiff}
+                            aiReadiness={aiReadiness}
+                            lastError={lastAIError}
+                            onClearError={onClearAIError}
                             chatMessages={chatMessages}
                             onClearChat={onClearChat}
+                            nodeCount={nodes.length}
+                            selectedNodeCount={selectedNodeCount}
+                            initialPrompt={initialPrompt}
+                            onInitialPromptConsumed={onInitialPromptConsumed}
                         />
                     </Suspense>
-                ) : activeTab === 'code' ? (
+                ) : effectiveTab === 'code' ? (
                     <Suspense fallback={null}>
                         <LazyStudioCodePanel
                             nodes={nodes}
@@ -108,25 +178,11 @@ export function StudioPanel({
                             onModeChange={onCodeModeChange}
                         />
                     </Suspense>
-                ) : (
+                ) : effectiveTab === 'lint' ? (
                     <Suspense fallback={null}>
-                        <LazyStudioPlaybackPanel
-                            nodes={nodes}
-                            edges={edges}
-                            currentStepIndex={playback.currentStepIndex}
-                            totalSteps={playback.totalSteps}
-                            isPlaying={playback.isPlaying}
-                            onStartPlayback={playback.onStartPlayback}
-                            onPlayPause={playback.onPlayPause}
-                            onStop={playback.onStop}
-                            onScrubToStep={playback.onScrubToStep}
-                            onNext={playback.onNext}
-                            onPrev={playback.onPrev}
-                            playbackSpeed={playback.playbackSpeed}
-                            onPlaybackSpeedChange={playback.onPlaybackSpeedChange}
-                        />
+                        <LazyLintRulesPanel />
                     </Suspense>
-                )}
+                ) : null}
             </SidebarBody>
         </SidebarShell>
     );
diff --git a/src/components/StudioPlaybackPanel.tsx b/src/components/StudioPlaybackPanel.tsx
index 874e834..9235a0a 100644
--- a/src/components/StudioPlaybackPanel.tsx
+++ b/src/components/StudioPlaybackPanel.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import { CheckCircle2, Eye, Film, ListOrdered, MoveDown, MoveUp, Plus, RefreshCw, Trash2 } from 'lucide-react';
-import { ROLLOUT_FLAGS } from '@/config/rolloutFlags';
 import { useTabActions, useTabsState } from '@/store/tabHooks';
 import type { FlowEdge, FlowNode, PlaybackState } from '@/lib/types';
 import { createEmptyPlaybackState } from '@/services/playback/model';
@@ -117,18 +116,13 @@ export function StudioPlaybackPanel({
                             key={preset}
                             type="button"
                             onClick={() => applyPreset(preset)}
-                            className="rounded-[calc(var(--brand-radius)-4px)] border border-slate-200 bg-slate-50 px-3 py-2 text-left transition-colors hover:border-[var(--brand-primary-200)] hover:bg-[var(--brand-primary-50)]"
+                            className="rounded-[var(--radius-xs)] border border-slate-200 bg-slate-50 px-3 py-2 text-left transition-colors hover:border-[var(--brand-primary-200)] hover:bg-[var(--brand-primary-50)]"
                         >
                             <div className="text-sm font-semibold text-[var(--brand-text)]">{PRESET_LABELS[preset].label}</div>
                             <div className="mt-1 text-[11px] leading-5 text-[var(--brand-secondary)]">{PRESET_LABELS[preset].description}</div>
                         </button>
                     ))}
                 </div>
-                {!ROLLOUT_FLAGS.playbackStudioV1 ? (
-                    <div className="mt-3 rounded-[calc(var(--brand-radius)-4px)] border border-amber-200 bg-amber-50 px-3 py-2 text-xs text-amber-700">
-                        Playback Studio is behind a rollout flag and should stay disabled by default outside controlled testing.
-                    </div>
-                ) : null}
             </PlaybackPanelSection>
 
             <PlaybackPanelSection
@@ -141,7 +135,7 @@ export function StudioPlaybackPanel({
                         return (
                             <div
                                 key={scene.id}
-                                className={`rounded-[calc(var(--brand-radius)-4px)] border px-3 py-2 ${isSelected ? 'border-[var(--brand-primary-300)] bg-[var(--brand-primary-50)]' : 'border-slate-200 bg-slate-50'}`}
+                                className={`rounded-[var(--radius-xs)] border px-3 py-2 ${isSelected ? 'border-[var(--brand-primary-300)] bg-[var(--brand-primary-50)]' : 'border-slate-200 bg-slate-50'}`}
                             >
                                 <div className="flex items-center gap-2">
                                     <button
@@ -178,7 +172,7 @@ export function StudioPlaybackPanel({
                 <button
                     type="button"
                     onClick={() => commitPlayback(addPlaybackScene(playback))}
-                    className="mt-3 inline-flex items-center gap-2 rounded-[calc(var(--brand-radius)-4px)] border border-slate-200 bg-white px-3 py-2 text-xs font-semibold text-slate-700 transition-colors hover:border-[var(--brand-primary-200)] hover:text-[var(--brand-primary)]"
+                    className="mt-3 inline-flex items-center gap-2 rounded-[var(--radius-xs)] border border-slate-200 bg-white px-3 py-2 text-xs font-semibold text-slate-700 transition-colors hover:border-[var(--brand-primary-200)] hover:text-[var(--brand-primary)]"
                 >
                     <Plus className="h-3.5 w-3.5" />
                     Add scene
@@ -191,7 +185,7 @@ export function StudioPlaybackPanel({
             >
                 {hasPlayback ? (
                     <div className="space-y-4">
-                        <div className="rounded-[calc(var(--brand-radius)-4px)] border border-slate-200 bg-slate-50 px-3 py-3">
+                        <div className="rounded-[var(--radius-xs)] border border-slate-200 bg-slate-50 px-3 py-3">
                             <div className="flex items-center justify-between gap-3">
                                 <div>
                                     <div className="text-xs font-semibold uppercase tracking-wide text-slate-500">Preview</div>
@@ -247,7 +241,7 @@ export function StudioPlaybackPanel({
                             />
                         </div>
 
-                        <div className="flex items-center justify-between gap-3 rounded-[calc(var(--brand-radius)-4px)] border border-slate-200 bg-slate-50 px-3 py-2">
+                        <div className="flex items-center justify-between gap-3 rounded-[var(--radius-xs)] border border-slate-200 bg-slate-50 px-3 py-2">
                             <div>
                                 <div className="text-xs font-semibold uppercase tracking-wide text-slate-500">Default step duration</div>
                                 <div className="mt-1 text-[11px] text-slate-500">Used for new presets and fallback timing</div>
@@ -262,7 +256,7 @@ export function StudioPlaybackPanel({
                                     onPlaybackSpeedChange(next);
                                     commitPlayback(setPlaybackDefaultDuration(playback, next));
                                 }}
-                                className="w-24 rounded-[calc(var(--brand-radius)-4px)] border border-slate-200 bg-white px-2 py-1.5 text-sm"
+                                className="w-24 rounded-[var(--radius-xs)] border border-slate-200 bg-white px-2 py-1.5 text-sm"
                             />
                         </div>
 
@@ -273,7 +267,7 @@ export function StudioPlaybackPanel({
                                 return (
                                     <div
                                         key={step.id}
-                                        className={`rounded-[calc(var(--brand-radius)-4px)] border px-3 py-2 ${includedInSelectedScene ? 'border-slate-200 bg-white' : 'border-slate-100 bg-slate-50/60 opacity-70'}`}
+                                        className={`rounded-[var(--radius-xs)] border px-3 py-2 ${includedInSelectedScene ? 'border-slate-200 bg-white' : 'border-slate-100 bg-slate-50/60 opacity-70'}`}
                                     >
                                         <div className="flex items-center gap-2">
                                             {selectedScene ? (
@@ -319,7 +313,7 @@ export function StudioPlaybackPanel({
                                                     const nextDuration = Math.max(200, Number(event.target.value) || playback.defaultStepDurationMs);
                                                     commitPlayback(setPlaybackStepDuration(playback, step.id, nextDuration));
                                                 }}
-                                                className="w-20 rounded-[calc(var(--brand-radius)-4px)] border border-slate-200 bg-white px-2 py-1.5 text-sm"
+                                                className="w-20 rounded-[var(--radius-xs)] border border-slate-200 bg-white px-2 py-1.5 text-sm"
                                                 aria-label={`Duration for ${step.nodeId}`}
                                             />
                                         </div>
@@ -329,7 +323,7 @@ export function StudioPlaybackPanel({
                         </div>
                     </div>
                 ) : (
-                    <div className="rounded-[calc(var(--brand-radius)-4px)] border border-dashed border-slate-200 bg-slate-50 px-4 py-8 text-center">
+                    <div className="rounded-[var(--radius-xs)] border border-dashed border-slate-200 bg-slate-50 px-4 py-8 text-center">
                         <ListOrdered className="mx-auto h-6 w-6 text-slate-400" />
                         <div className="mt-3 text-sm font-medium text-[var(--brand-text)]">No playback timeline yet</div>
                         <div className="mt-1 text-xs text-[var(--brand-secondary)]">Generate a preset to create scenes and stable step order from the current graph.</div>
diff --git a/src/components/SwimlaneNode.tsx b/src/components/SwimlaneNode.tsx
index d456d8e..5e576b8 100644
--- a/src/components/SwimlaneNode.tsx
+++ b/src/components/SwimlaneNode.tsx
@@ -4,7 +4,6 @@ import type { LegacyNodeProps } from '@/lib/reactflowCompat';
 import { NodeData } from '@/lib/types';
 import { Rows3 } from 'lucide-react';
 import { NamedIcon } from './IconMap';
-import { ROLLOUT_FLAGS } from '@/config/rolloutFlags';
 import { getConnectorHandleStyle, getHandlePointerEvents, getV2HandleVisibilityClass } from './handleInteraction';
 import { NodeTransformControls } from './NodeTransformControls';
 import { useActiveNodeSelection } from './useActiveNodeSelection';
@@ -18,7 +17,7 @@ const LANE_COLORS = [
 ];
 
 const SwimlaneNode = ({ id, data, selected }: LegacyNodeProps<NodeData>) => {
-    const visualQualityV2Enabled = ROLLOUT_FLAGS.visualQualityV2;
+    const visualQualityV2Enabled = true;
     const isActiveSelected = useActiveNodeSelection(Boolean(selected));
     const handlePointerEvents = getHandlePointerEvents(visualQualityV2Enabled, isActiveSelected);
     const handleVisibilityClass = visualQualityV2Enabled
diff --git a/src/components/TextNode.tsx b/src/components/TextNode.tsx
index 0375011..88f9bed 100644
--- a/src/components/TextNode.tsx
+++ b/src/components/TextNode.tsx
@@ -103,6 +103,7 @@ function TextNode(props: LegacyNodeProps<NodeData>): React.ReactElement {
 
     return (
         <NodeChrome
+            nodeId={id}
             selected={Boolean(selected)}
             minWidth={50}
             minHeight={30}
diff --git a/src/components/Toolbar.tsx b/src/components/Toolbar.tsx
index e49322d..f2d624d 100644
--- a/src/components/Toolbar.tsx
+++ b/src/components/Toolbar.tsx
@@ -68,7 +68,7 @@ export const Toolbar: React.FC<ToolbarProps> = ({
   // Interaction guard: If command bar is open, disable all toolbar interactions
   const isInteractive = !isCommandBarOpen;
 
-  const containerClasses = `flex items-center p-1.5 bg-white/90 backdrop-blur-xl shadow-2xl rounded-[var(--radius-lg)] border border-white/20 ring-1 ring-black/5 transition-all duration-300 ${!isInteractive ? 'opacity-50 pointer-events-none grayscale' : ''}`;
+  const containerClasses = `flex items-center p-1.5 bg-white/90 backdrop-blur-xl shadow-[var(--shadow-md)] rounded-[var(--radius-lg)] border border-white/20 ring-1 ring-black/5 transition-all duration-300 ${!isInteractive ? 'opacity-50 pointer-events-none grayscale' : ''}`;
 
   return (
     <div className={`absolute bottom-8 left-1/2 -translate-x-1/2 z-40 ${containerClasses}`}>
@@ -106,13 +106,13 @@ export const Toolbar: React.FC<ToolbarProps> = ({
           />
         </Tooltip>
 
-        <Tooltip text={t('toolbar.commandBar', 'Open command bar')}>
+        <Tooltip text={t('toolbar.commandCenter', 'Open Command Center')}>
           <Button
             onClick={onCommandBar}
             disabled={!isInteractive}
             variant="primary"
             size="icon"
-            className={`group h-10 w-10 rounded-[var(--radius-md)] shadow-lg shadow-[var(--brand-primary)]/20 transition-all hover:scale-105 active:scale-95 ${isCommandBarOpen ? 'bg-slate-800 hover:bg-slate-900' : 'bg-[var(--brand-primary)] hover:brightness-110'}`}
+            className={`group rounded-[var(--radius-md)] shadow-[var(--shadow-sm)] transition-all hover:scale-105 active:scale-95 ${isCommandBarOpen ? 'bg-slate-800 hover:bg-slate-900' : 'bg-[var(--brand-primary)] hover:brightness-110'}`}
             icon={<Plus className={`w-5 h-5 text-white transition-transform duration-200 ${isCommandBarOpen ? 'rotate-45' : 'group-hover:rotate-90'}`} />}
           />
         </Tooltip>
@@ -128,7 +128,7 @@ export const Toolbar: React.FC<ToolbarProps> = ({
           />
         </Tooltip>
 
-        <Tooltip text={t('toolbar.flowpilotAI', 'Open FlowPilot')}>
+        <Tooltip text={t('toolbar.flowpilot', 'Flowpilot (Cmd+K)')}>
           <Button
             onClick={onToggleStudio}
             disabled={!isInteractive}
diff --git a/src/components/Tooltip.tsx b/src/components/Tooltip.tsx
index 97dbfc3..cc7530d 100644
--- a/src/components/Tooltip.tsx
+++ b/src/components/Tooltip.tsx
@@ -6,26 +6,29 @@ interface TooltipProps {
     children: React.ReactNode;
     side?: 'top' | 'bottom' | 'left' | 'right';
     sideOffset?: number;
+    className?: string;
 }
 
-export const Tooltip: React.FC<TooltipProps> = ({
+const ARROW_CLASSES = {
+    top: '-bottom-1 left-1/2 -translate-x-1/2 border-t-slate-900 border-x-transparent border-b-transparent',
+    bottom: '-top-1 left-1/2 -translate-x-1/2 border-b-slate-900 border-x-transparent border-t-transparent',
+    left: '-right-1 top-1/2 -translate-y-1/2 border-l-slate-900 border-y-transparent border-r-transparent',
+    right: '-left-1 top-1/2 -translate-y-1/2 border-r-slate-900 border-y-transparent border-l-transparent',
+} as const;
+
+export function Tooltip({
     children,
     text,
     side = 'top',
-    sideOffset = 12
-}) => {
+    sideOffset = 12,
+    className = ''
+}: TooltipProps): React.ReactElement {
     const triggerRef = useRef<HTMLDivElement | null>(null);
     const tooltipRef = useRef<HTMLDivElement | null>(null);
     const [isOpen, setIsOpen] = useState(false);
     const [resolvedSide, setResolvedSide] = useState(side);
     const [position, setPosition] = useState<{ top: number; left: number }>({ top: 0, left: 0 });
-
-    const arrowClasses = {
-        top: '-bottom-1 left-1/2 -translate-x-1/2 border-t-slate-900 border-x-transparent border-b-transparent',
-        bottom: '-top-1 left-1/2 -translate-x-1/2 border-b-slate-900 border-x-transparent border-t-transparent',
-        left: '-right-1 top-1/2 -translate-y-1/2 border-l-slate-900 border-y-transparent border-r-transparent',
-        right: '-left-1 top-1/2 -translate-y-1/2 border-r-slate-900 border-y-transparent border-l-transparent',
-    };
+    const triggerClassName = className.trim();
 
     const updatePosition = useCallback((): void => {
         if (!triggerRef.current || !tooltipRef.current) {
@@ -110,7 +113,7 @@ export const Tooltip: React.FC<TooltipProps> = ({
     return (
         <div
             ref={triggerRef}
-            className="flex items-center justify-center"
+            className={triggerClassName}
             onMouseEnter={() => setIsOpen(true)}
             onMouseLeave={() => setIsOpen(false)}
             onFocus={() => setIsOpen(true)}
@@ -128,11 +131,11 @@ export const Tooltip: React.FC<TooltipProps> = ({
                         }}
                     >
                         {text}
-                        <span className={`absolute border-4 border-transparent ${arrowClasses[resolvedSide]}`}></span>
+                        <span className={`absolute border-4 border-transparent ${ARROW_CLASSES[resolvedSide]}`}></span>
                     </div>,
                     document.body
                 )
                 : null}
         </div>
     );
-};
+}
diff --git a/src/components/TopNav.tsx b/src/components/TopNav.tsx
index 96aaf29..ab1035c 100644
--- a/src/components/TopNav.tsx
+++ b/src/components/TopNav.tsx
@@ -1,4 +1,4 @@
-import React, { Suspense, lazy } from 'react';
+import React, { Suspense, lazy, useCallback, useEffect } from 'react';
 import type { FlowTab } from '@/lib/types';
 import { FlowTabs } from './FlowTabs';
 import { TopNavMenu } from './top-nav/TopNavMenu';
@@ -7,6 +7,8 @@ import { TopNavActions } from './top-nav/TopNavActions';
 import { useTopNavState } from './top-nav/useTopNavState';
 import { APP_NAME, IS_BEVELED } from '@/lib/brand';
 
+const OPEN_AI_SETTINGS_EVENT = 'open-ai-settings';
+
 const LazySettingsModal = lazy(async () => {
     const module = await import('./SettingsModal/SettingsModal');
     return { default: module.SettingsModal };
@@ -22,19 +24,29 @@ interface TopNavProps {
 
     // Actions
     onExportPNG: (format?: 'png' | 'jpeg') => void;
+    onCopyImage: (format?: 'png' | 'jpeg') => void;
     onExportSVG: () => void;
-    onExportAnimated: (format: 'video' | 'gif') => void;
+    onCopySVG: () => void;
+    onExportPDF: () => void;
+    onExportCinematic: (format: 'cinematic-video' | 'cinematic-gif') => void;
     onExportJSON: () => void;
+    onCopyJSON: () => void;
     onExportMermaid: () => void;
+    onDownloadMermaid: () => void;
     onExportPlantUML: () => void;
+    onDownloadPlantUML: () => void;
     onExportOpenFlowDSL: () => void;
+    onDownloadOpenFlowDSL: () => void;
     onExportFigma: () => void;
+    onDownloadFigma: () => void;
+    onShare: () => void;
     onImportJSON: () => void;
     onHistory: () => void;
     onGoHome: () => void;
     onPlay: () => void;
     collaboration?: {
         roomId: string;
+        inviteUrl: string;
         viewerCount: number;
         status: 'realtime' | 'waiting' | 'fallback';
         cacheState: 'unavailable' | 'syncing' | 'ready' | 'hydrated';
@@ -48,7 +60,6 @@ interface TopNavProps {
     };
 }
 
-
 export function TopNav({
     tabs,
     activeTabId,
@@ -57,13 +68,22 @@ export function TopNav({
     onCloseTab,
     onRenameTab,
     onExportPNG,
+    onCopyImage,
     onExportSVG,
-    onExportAnimated,
+    onCopySVG,
+    onExportPDF,
+    onExportCinematic,
     onExportJSON,
+    onCopyJSON,
     onExportMermaid,
+    onDownloadMermaid,
     onExportPlantUML,
+    onDownloadPlantUML,
     onExportOpenFlowDSL,
+    onDownloadOpenFlowDSL,
     onExportFigma,
+    onDownloadFigma,
+    onShare,
     onImportJSON,
     onHistory,
     onGoHome,
@@ -71,14 +91,6 @@ export function TopNav({
     collaboration,
 }: TopNavProps): React.ReactElement {
     const isBeveled = IS_BEVELED;
-    const handleExportPNG = onExportPNG;
-    const handleExportSVG = onExportSVG;
-    const handleExportAnimated = onExportAnimated;
-    const handleExportJSON = onExportJSON;
-    const handleExportMermaid = onExportMermaid;
-    const handleExportPlantUML = onExportPlantUML;
-    const handleExportOpenFlowDSL = onExportOpenFlowDSL;
-    const handleExportFigma = onExportFigma;
     const {
         isMenuOpen,
         isSettingsOpen,
@@ -88,56 +100,76 @@ export function TopNav({
         openSettings,
         closeSettings,
     } = useTopNavState();
+    const openGeneralSettings = useCallback(() => {
+        openSettings('general');
+    }, [openSettings]);
+    const openAISettings = useCallback(() => {
+        openSettings('ai');
+    }, [openSettings]);
+
+    useEffect(() => {
+        window.addEventListener(OPEN_AI_SETTINGS_EVENT, openAISettings);
+        return () => window.removeEventListener(OPEN_AI_SETTINGS_EVENT, openAISettings);
+    }, [openAISettings]);
 
     return (
-        <div className="absolute top-0 left-0 right-0 z-50 h-16 bg-white/70 backdrop-blur-md border-b border-white/20 shadow-sm px-6 flex items-center justify-between transition-all">
+        <div className="absolute top-0 left-0 right-0 z-50 flex h-14 items-center justify-between border-b border-white/20 bg-white/70 px-3 shadow-sm backdrop-blur-md transition-all sm:px-4">
             {/* Left: Menu & Brand */}
-            <div className="flex items-center gap-4 min-w-[240px]">
+            <div className="flex min-w-0 flex-1 items-center gap-2 sm:gap-3">
                 <TopNavMenu
                     isOpen={isMenuOpen}
                     isBeveled={isBeveled}
                     onToggle={toggleMenu}
                     onClose={closeMenu}
                     onGoHome={onGoHome}
-                    onOpenSettings={() => openSettings('general')}
+                    onOpenSettings={openGeneralSettings}
                     onHistory={onHistory}
                     onImportJSON={onImportJSON}
                 />
                 <TopNavBrand
                     appName={APP_NAME}
                     logoUrl={null}
-                    logoStyle={'text'}
+                    logoStyle="text"
                     ui={{ showBeta: true }}
                 />
             </div>
 
             {/* Center: Tabs */}
-            <div className="flex-1 flex justify-center max-w-2xl">
-                <div className="bg-slate-100/50 p-1 rounded-[var(--radius-lg)] border border-slate-200/60 backdrop-blur-sm">
-                    <FlowTabs
-                        tabs={tabs}
-                        activeTabId={activeTabId}
-                        onSwitchTab={onSwitchTab}
-                        onAddTab={onAddTab}
-                        onCloseTab={onCloseTab}
-                        onRenameTab={onRenameTab}
-                    />
-                </div>
+            <div className="flex min-w-0 flex-[1.2] justify-center px-2 sm:px-3">
+                <FlowTabs
+                    tabs={tabs}
+                    activeTabId={activeTabId}
+                    onSwitchTab={onSwitchTab}
+                    onAddTab={onAddTab}
+                    onCloseTab={onCloseTab}
+                    onRenameTab={onRenameTab}
+                />
             </div>
 
-            <TopNavActions
-                onPlay={onPlay}
-                onExportPNG={handleExportPNG}
-                onExportSVG={handleExportSVG}
-                onExportAnimated={handleExportAnimated}
-                onExportJSON={handleExportJSON}
-                onExportMermaid={handleExportMermaid}
-                onExportPlantUML={handleExportPlantUML}
-                onExportOpenFlowDSL={handleExportOpenFlowDSL}
-                onExportFigma={handleExportFigma}
-                collaboration={collaboration}
-                isBeveled={isBeveled}
-            />
+            <div className="flex min-w-0 flex-1 justify-end">
+                <TopNavActions
+                    onPlay={onPlay}
+                    onExportPNG={onExportPNG}
+                    onCopyImage={onCopyImage}
+                    onExportSVG={onExportSVG}
+                    onCopySVG={onCopySVG}
+                    onExportPDF={onExportPDF}
+                    onExportCinematic={onExportCinematic}
+                    onExportJSON={onExportJSON}
+                    onCopyJSON={onCopyJSON}
+                    onExportMermaid={onExportMermaid}
+                    onDownloadMermaid={onDownloadMermaid}
+                    onExportPlantUML={onExportPlantUML}
+                    onDownloadPlantUML={onDownloadPlantUML}
+                    onExportOpenFlowDSL={onExportOpenFlowDSL}
+                    onDownloadOpenFlowDSL={onDownloadOpenFlowDSL}
+                    onExportFigma={onExportFigma}
+                    onDownloadFigma={onDownloadFigma}
+                    onShare={onShare}
+                    collaboration={collaboration}
+                    isBeveled={isBeveled}
+                />
+            </div>
 
             {isSettingsOpen ? (
                 <Suspense fallback={null}>
diff --git a/src/components/WelcomeModal.tsx b/src/components/WelcomeModal.tsx
index 0c2e2e6..bb88a56 100644
--- a/src/components/WelcomeModal.tsx
+++ b/src/components/WelcomeModal.tsx
@@ -1,147 +1,151 @@
 import React, { useState } from 'react';
-import { X, Layout, Shield } from 'lucide-react';
+import { ArrowRight, FileInput, LayoutTemplate, PenSquare, WandSparkles } from 'lucide-react';
 import { OpenFlowLogo } from './icons/OpenFlowLogo';
-import { IS_BEVELED } from '@/lib/brand';
-import { useTranslation } from 'react-i18next';
 import { writeLocalStorageString } from '@/services/storage/uiLocalStorage';
 import { shouldShowWelcomeModal, WELCOME_SEEN_STORAGE_KEY } from './home/welcomeModalState';
+import { RECOMMENDED_BUILDER_PROMPTS, RECOMMENDED_IMPORT_OPTIONS, RECOMMENDED_STARTER_TEMPLATE_LABELS } from '@/services/onboarding/config';
+import { recordOnboardingEvent } from '@/services/onboarding/events';
 
-export function WelcomeModal(): React.JSX.Element | null {
-    const { t } = useTranslation();
-    const isBeveled = IS_BEVELED;
+export interface WelcomeModalProps {
+    onOpenTemplates: () => void;
+    onPromptWithAI: () => void;
+    onImport: () => void;
+    onBlankCanvas: () => void;
+}
+
+interface PathOption {
+    icon: React.ReactNode;
+    title: string;
+    description: string;
+    onClick: () => void;
+    primary?: boolean;
+}
+
+function PathCard({ icon, title, description, onClick, primary }: PathOption): React.JSX.Element {
+    return (
+        <button
+            onClick={onClick}
+            className={`group flex w-full items-center gap-4 rounded-[var(--radius-md)] border p-4 text-left transition-all hover:-translate-y-0.5 active:scale-[0.98] ${
+                primary
+                    ? 'border-[var(--brand-primary)] bg-[var(--brand-primary-50)] hover:bg-[var(--brand-primary)]'
+                    : 'border-slate-200 bg-white hover:border-[var(--brand-primary)] hover:bg-[var(--brand-primary-50)]'
+            }`}
+        >
+            <div className={`flex h-10 w-10 shrink-0 items-center justify-center rounded-[var(--radius-sm)] transition-colors ${
+                primary
+                    ? 'bg-[var(--brand-primary)] text-white group-hover:bg-white group-hover:text-[var(--brand-primary)]'
+                    : 'bg-[var(--brand-primary-50)] text-[var(--brand-primary)]'
+            }`}>
+                {icon}
+            </div>
+            <div className="min-w-0 flex-1">
+                <p className={`text-sm font-semibold ${primary ? 'text-[var(--brand-primary)] group-hover:text-white' : 'text-slate-900'}`}>{title}</p>
+                <p className={`text-xs ${primary ? 'text-[var(--brand-primary)]/70 group-hover:text-white/80' : 'text-slate-500'}`}>{description}</p>
+            </div>
+            <ArrowRight className="h-4 w-4 shrink-0 opacity-40 transition-opacity group-hover:opacity-100" />
+        </button>
+    );
+}
+
+export function WelcomeModal({ onOpenTemplates, onPromptWithAI, onImport, onBlankCanvas }: WelcomeModalProps): React.JSX.Element | null {
     const [isOpen, setIsOpen] = useState(() => shouldShowWelcomeModal());
 
-    const handleClose = () => {
+    const dismiss = () => {
         setIsOpen(false);
         writeLocalStorageString(WELCOME_SEEN_STORAGE_KEY, 'true');
     };
 
+    const handle = (action: () => void) => () => { dismiss(); action(); };
+
     if (!isOpen) return null;
 
-    return (
-        <div className="fixed inset-0 z-[100] flex items-center justify-center bg-slate-900/10 backdrop-blur-sm p-4 animate-in fade-in duration-300">
-            <div
-                className="bg-white shadow-2xl max-w-md w-full overflow-hidden border border-slate-200/50 animate-in zoom-in duration-300"
-                style={{ borderRadius: 'var(--brand-radius, 24px)' }}
-            >
-                <div className="p-8 relative">
-                    <button
-                        onClick={handleClose}
-                        className="absolute top-6 right-6 p-2 rounded-full text-slate-400 hover:text-slate-600 hover:bg-slate-100 transition-all active:scale-95"
-                        aria-label="Close"
-                    >
-                        <X size={18} />
-                    </button>
+    const paths: PathOption[] = [
+        {
+            icon: <LayoutTemplate className="h-5 w-5" />,
+            title: 'Start from a template',
+            description: `Jump into ${RECOMMENDED_STARTER_TEMPLATE_LABELS.slice(0, 3).join(', ')}.`,
+            onClick: handle(() => {
+                recordOnboardingEvent('welcome_template_selected', { surface: 'welcome-modal' });
+                onOpenTemplates();
+            }),
+            primary: true,
+        },
+        {
+            icon: <WandSparkles className="h-5 w-5" />,
+            title: 'Prompt with Flowpilot',
+            description: `Start from a builder prompt like "${RECOMMENDED_BUILDER_PROMPTS[0]}"`,
+            onClick: handle(() => {
+                recordOnboardingEvent('welcome_prompt_selected', { surface: 'welcome-modal' });
+                onPromptWithAI();
+            }),
+        },
+        {
+            icon: <FileInput className="h-5 w-5" />,
+            title: 'Import a diagram',
+            description: `Bring in ${RECOMMENDED_IMPORT_OPTIONS.map((option) => option.label).join(', ')} sources.`,
+            onClick: handle(() => {
+                recordOnboardingEvent('welcome_import_selected', { surface: 'welcome-modal' });
+                onImport();
+            }),
+        },
+        {
+            icon: <PenSquare className="h-5 w-5" />,
+            title: 'Blank canvas',
+            description: 'Start clean, then branch into templates, imports, or guided AI edits.',
+            onClick: handle(() => {
+                recordOnboardingEvent('welcome_blank_selected', { surface: 'welcome-modal' });
+                onBlankCanvas();
+            }),
+        },
+    ];
 
-                    <div className="flex flex-col items-center text-center mt-4">
+    return (
+        <div className="fixed inset-0 z-[100] flex items-center justify-center bg-slate-900/10 p-4 backdrop-blur-sm animate-in fade-in duration-300">
+            <div className="w-full max-w-xl overflow-hidden rounded-[var(--radius-xl)] border border-slate-200/50 bg-white shadow-[var(--shadow-overlay)] animate-in zoom-in-95 duration-300">
+                <div className="p-8">
+                    <div className="mb-6 flex flex-col items-center text-center">
                         <div
-                            className="w-14 h-14 flex items-center justify-center mb-6 ring-8"
+                            className="mb-4 flex h-12 w-12 items-center justify-center rounded-[var(--radius-md)] ring-8"
                             style={{
                                 background: 'var(--brand-primary-50, #eef2ff)',
                                 color: 'var(--brand-primary, #6366f1)',
-                                borderRadius: 'calc(var(--brand-radius, 24px) * 0.75)',
-                                '--tw-ring-color': 'var(--brand-primary-50, #eef2ff)'
+                                '--tw-ring-color': 'var(--brand-primary-50, #eef2ff)',
                             } as React.CSSProperties}
                         >
-                            <OpenFlowLogo className="w-7 h-7" />
+                            <OpenFlowLogo className="h-6 w-6" />
                         </div>
-
-                        <h2
-                            className="text-2xl font-bold text-slate-900 mb-2 tracking-tight"
-                            style={{ fontFamily: 'var(--brand-font-family, inherit)' }}
-                        >
-                            {t('welcome.title', 'OpenFlowKit')}
-                        </h2>
-                        <p className="text-slate-500 text-sm leading-relaxed mb-8 max-w-[280px]">
-                            {t('welcome.description', 'Design beautiful, structured diagrams with a developer-first canvas.')}
+                        <h2 className="text-xl font-bold tracking-tight text-slate-900">Welcome to OpenFlowKit</h2>
+                        <p className="mt-1 max-w-md text-sm text-slate-500">
+                            Pick the fastest way to get to a real developer diagram: template, import, prompt, or blank canvas.
                         </p>
                     </div>
 
-                    <div className="space-y-5 mb-8">
-                        <FeatureItem
-                            icon={<Layout className="w-5 h-5" />}
-                            title={t('welcome.features.beautifulByDefault', 'Beautiful by Default')}
-                            desc={t('welcome.features.automatedLayouts', 'Automated layouts and professional themes.')}
-                        />
-                        <FeatureItem
-                            icon={<Shield className="w-5 h-5" />}
-                            title={t('welcome.features.privateSecure', 'Private & Secure')}
-                            desc={t('welcome.features.localFirst', 'Local-first architecture keeps your data safe.')}
-                        />
+                    <div className="grid gap-3 md:grid-cols-2">
+                        {paths.map((path) => (
+                            <PathCard key={path.title} {...path} />
+                        ))}
                     </div>
 
-                    <WelcomeFooter
-                        isBeveled={isBeveled}
-                        onGetStarted={handleClose}
-                    />
+                    <div className="mt-6 grid gap-3 rounded-[var(--radius-lg)] border border-slate-200 bg-slate-50/80 p-4 text-left md:grid-cols-2">
+                        <div>
+                            <p className="text-[11px] font-semibold uppercase tracking-widest text-slate-400">Best First Templates</p>
+                            <p className="mt-2 text-xs leading-5 text-slate-600">
+                                {RECOMMENDED_STARTER_TEMPLATE_LABELS.join(' • ')}
+                            </p>
+                        </div>
+                        <div>
+                            <p className="text-[11px] font-semibold uppercase tracking-widest text-slate-400">Supported Imports</p>
+                            <p className="mt-2 text-xs leading-5 text-slate-600">
+                                {RECOMMENDED_IMPORT_OPTIONS.map((option) => option.label).join(' • ')}
+                            </p>
+                        </div>
+                    </div>
 
-                    <p className="text-center text-slate-400 text-[10px] mt-6 uppercase tracking-widest font-semibold">
-                        {t('welcome.press', 'Press')} <kbd className="font-sans px-1.5 py-0.5 rounded border border-slate-200 bg-slate-50 text-slate-500">?</kbd> {t('welcome.shortcuts', 'for shortcuts')}
+                    <p className="mt-6 text-center text-[10px] font-semibold uppercase tracking-widest text-slate-400">
+                        Press <kbd className="rounded border border-slate-200 bg-slate-50 px-1.5 py-0.5 font-sans text-slate-500">?</kbd> for keyboard shortcuts
                     </p>
                 </div>
             </div>
         </div>
     );
 }
-
-interface FeatureItemProps {
-    icon: React.ReactNode;
-    title: string;
-    desc: string;
-}
-
-function FeatureItem({ icon, title, desc }: FeatureItemProps): React.JSX.Element {
-    return (
-        <div
-            className="flex gap-4 items-center p-3 transition-colors group"
-            style={{ borderRadius: 'calc(var(--brand-radius, 24px) * 0.5)' }}
-        >
-            <div
-                className="w-10 h-10 flex items-center justify-center shrink-0"
-                style={{
-                    background: 'var(--brand-primary-50, #f8fafc)',
-                    color: 'var(--brand-primary, #6366f1)',
-                    borderRadius: 'calc(var(--brand-radius, 24px) * 0.4)'
-                }}
-            >
-                {icon}
-            </div>
-            <div className="text-left">
-                <h3 className="text-sm font-bold text-slate-900">{title}</h3>
-                <p className="text-xs text-slate-500">{desc}</p>
-            </div>
-        </div>
-    );
-}
-
-interface WelcomeFooterProps {
-    isBeveled: boolean;
-    onGetStarted: () => void;
-}
-
-function WelcomeFooter({ isBeveled, onGetStarted }: WelcomeFooterProps): React.JSX.Element {
-    const { t } = useTranslation();
-    return (
-        <div className="mt-4 flex flex-col gap-3">
-            <button
-                onClick={onGetStarted}
-                className={`w-full py-3.5 text-white font-bold transition-all active:scale-[0.98] hover:-translate-y-0.5 ${isBeveled ? 'shadow-[inset_0px_1px_0px_0px_rgba(255,255,255,0.4),inset_0px_-2px_0px_0px_rgba(0,0,0,0.2),0px_10px_15px_-3px_rgba(0,0,0,0.1)] border border-white/20' : 'shadow-lg hover:shadow-xl'}`}
-                style={{
-                    background: 'var(--brand-primary, #6366f1)',
-                    borderRadius: 'calc(var(--brand-radius, 24px) * 0.6)'
-                }}
-            >
-                {t('common.getStarted', 'Get Started')}
-            </button>
-
-            <a
-                href="/docs/en/quick-start"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="text-[11px] font-semibold text-slate-500 hover:text-[var(--brand-primary)] text-center w-full transition-colors"
-            >
-                Read the Quick Start Guide →
-            </a>
-        </div>
-    );
-}
diff --git a/src/components/annotationTheme.ts b/src/components/annotationTheme.ts
new file mode 100644
index 0000000..31c5863
--- /dev/null
+++ b/src/components/annotationTheme.ts
@@ -0,0 +1,14 @@
+export const ANNOTATION_COLOR_OPTIONS = [
+  { id: 'yellow', label: 'Yellow', container: 'bg-amber-50 border-amber-200', title: 'text-amber-900 border-amber-200', body: 'text-amber-800', fold: 'bg-amber-100/70 border-amber-300/40', dot: 'bg-amber-300' },
+  { id: 'green', label: 'Green', container: 'bg-emerald-50 border-emerald-200', title: 'text-emerald-900 border-emerald-200', body: 'text-emerald-800', fold: 'bg-emerald-100/70 border-emerald-300/40', dot: 'bg-emerald-300' },
+  { id: 'blue', label: 'Blue', container: 'bg-blue-50 border-blue-200', title: 'text-blue-900 border-blue-200', body: 'text-blue-800', fold: 'bg-blue-100/70 border-blue-300/40', dot: 'bg-blue-300' },
+  { id: 'pink', label: 'Pink', container: 'bg-pink-50 border-pink-200', title: 'text-pink-900 border-pink-200', body: 'text-pink-800', fold: 'bg-pink-100/70 border-pink-300/40', dot: 'bg-pink-300' },
+  { id: 'violet', label: 'Purple', container: 'bg-violet-50 border-violet-200', title: 'text-violet-900 border-violet-200', body: 'text-violet-800', fold: 'bg-violet-100/70 border-violet-300/40', dot: 'bg-violet-300' },
+  { id: 'orange', label: 'Orange', container: 'bg-orange-50 border-orange-200', title: 'text-orange-900 border-orange-200', body: 'text-orange-800', fold: 'bg-orange-100/70 border-orange-300/40', dot: 'bg-orange-300' },
+] as const;
+
+export type AnnotationColorId = (typeof ANNOTATION_COLOR_OPTIONS)[number]['id'];
+
+export function resolveAnnotationTheme(color?: string) {
+  return ANNOTATION_COLOR_OPTIONS.find((option) => option.id === color) ?? ANNOTATION_COLOR_OPTIONS[0];
+}
diff --git a/src/components/app/DocsSiteRedirect.test.tsx b/src/components/app/DocsSiteRedirect.test.tsx
new file mode 100644
index 0000000..07412b2
--- /dev/null
+++ b/src/components/app/DocsSiteRedirect.test.tsx
@@ -0,0 +1,47 @@
+import { render, screen } from '@testing-library/react';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { DocsSiteRedirect } from './DocsSiteRedirect';
+
+const replaceSpy = vi.fn();
+
+describe('DocsSiteRedirect', () => {
+    beforeEach(() => {
+        Object.defineProperty(window, 'location', {
+            configurable: true,
+            value: {
+                ...window.location,
+                replace: replaceSpy,
+            },
+        });
+    });
+
+    afterEach(() => {
+        replaceSpy.mockClear();
+    });
+
+    it('redirects the base docs route to the introduction page', () => {
+        render(
+            <MemoryRouter initialEntries={['/docs']}>
+                <Routes>
+                    <Route path="/docs" element={<DocsSiteRedirect />} />
+                </Routes>
+            </MemoryRouter>
+        );
+
+        expect(screen.getByText('Opening docs')).toBeTruthy();
+        expect(replaceSpy).toHaveBeenCalledWith('https://docs.openflowkit.com/');
+    });
+
+    it('redirects language-specific docs routes to the docs site', () => {
+        render(
+            <MemoryRouter initialEntries={['/docs/tr/quick-start']}>
+                <Routes>
+                    <Route path="/docs/:lang/:slug" element={<DocsSiteRedirect />} />
+                </Routes>
+            </MemoryRouter>
+        );
+
+        expect(replaceSpy).toHaveBeenCalledWith('https://docs.openflowkit.com/tr/quick-start/');
+    });
+});
diff --git a/src/components/app/DocsSiteRedirect.tsx b/src/components/app/DocsSiteRedirect.tsx
new file mode 100644
index 0000000..8fc3599
--- /dev/null
+++ b/src/components/app/DocsSiteRedirect.tsx
@@ -0,0 +1,23 @@
+import React, { useEffect } from 'react';
+import { useParams } from 'react-router-dom';
+import { RouteLoadingFallback } from './RouteLoadingFallback';
+import { buildDocsSiteHomeUrl, buildDocsSiteUrl, resolveDocsLanguage } from '@/docs/docsRoutes';
+
+export function DocsSiteRedirect(): React.ReactElement {
+    const { slug, lang } = useParams<{ slug?: string; lang?: string }>();
+
+    useEffect(() => {
+        const targetLanguage = resolveDocsLanguage(lang);
+        const targetUrl = slug
+            ? buildDocsSiteUrl(slug, targetLanguage)
+            : buildDocsSiteHomeUrl(targetLanguage);
+        window.location.replace(targetUrl);
+    }, [lang, slug]);
+
+    return (
+        <RouteLoadingFallback
+            title="Opening docs"
+            description="Redirecting to the OpenFlowKit docs site."
+        />
+    );
+}
diff --git a/src/components/app/MobileWorkspaceGate.test.tsx b/src/components/app/MobileWorkspaceGate.test.tsx
new file mode 100644
index 0000000..af6c804
--- /dev/null
+++ b/src/components/app/MobileWorkspaceGate.test.tsx
@@ -0,0 +1,36 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { MobileWorkspaceGate } from './MobileWorkspaceGate';
+import { MOBILE_WORKSPACE_GATE_COPY } from './mobileWorkspaceGateCopy';
+
+describe('MobileWorkspaceGate', () => {
+    it('renders the mobile workspace message and actions', () => {
+        render(
+            <MobileWorkspaceGate onOpenDocs={vi.fn()} onGoHome={vi.fn()}>
+                <div>Desktop workspace</div>
+            </MobileWorkspaceGate>
+        );
+
+        expect(screen.getByText(MOBILE_WORKSPACE_GATE_COPY.title)).toBeTruthy();
+        expect(screen.getByText(MOBILE_WORKSPACE_GATE_COPY.description)).toBeTruthy();
+        expect(screen.getByRole('button', { name: MOBILE_WORKSPACE_GATE_COPY.openDocs })).toBeTruthy();
+        expect(screen.getByRole('button', { name: MOBILE_WORKSPACE_GATE_COPY.goHome })).toBeTruthy();
+    });
+
+    it('invokes navigation actions from the mobile prompt', () => {
+        const onOpenDocs = vi.fn();
+        const onGoHome = vi.fn();
+
+        render(
+            <MobileWorkspaceGate onOpenDocs={onOpenDocs} onGoHome={onGoHome}>
+                <div>Desktop workspace</div>
+            </MobileWorkspaceGate>
+        );
+
+        fireEvent.click(screen.getByRole('button', { name: MOBILE_WORKSPACE_GATE_COPY.openDocs }));
+        fireEvent.click(screen.getByRole('button', { name: MOBILE_WORKSPACE_GATE_COPY.goHome }));
+
+        expect(onOpenDocs).toHaveBeenCalledTimes(1);
+        expect(onGoHome).toHaveBeenCalledTimes(1);
+    });
+});
diff --git a/src/components/app/MobileWorkspaceGate.tsx b/src/components/app/MobileWorkspaceGate.tsx
new file mode 100644
index 0000000..59dc60e
--- /dev/null
+++ b/src/components/app/MobileWorkspaceGate.tsx
@@ -0,0 +1,68 @@
+import React from 'react';
+import { ArrowLeft, Monitor } from 'lucide-react';
+import { OpenFlowLogo } from '@/components/icons/OpenFlowLogo';
+import { MOBILE_WORKSPACE_GATE_COPY } from './mobileWorkspaceGateCopy';
+
+interface MobileWorkspaceGateProps {
+    children: React.ReactNode;
+    onOpenDocs: () => void;
+    onGoHome: () => void;
+}
+
+export function MobileWorkspaceGate({
+    children,
+    onOpenDocs,
+    onGoHome,
+}: MobileWorkspaceGateProps): React.ReactElement {
+    return (
+        <>
+            <div className="fixed inset-0 z-[100] flex items-center justify-center bg-[radial-gradient(circle_at_top,_rgba(59,130,246,0.12),_transparent_45%),linear-gradient(180deg,_white,_#f8fafc)] px-6 text-center md:hidden">
+                <div className="w-full max-w-sm rounded-[28px] border border-slate-200/80 bg-white/90 px-6 py-8 shadow-2xl shadow-slate-200/70 backdrop-blur-md">
+                    <div className="mx-auto mb-8 flex h-14 w-14 items-center justify-center rounded-2xl bg-brand-primary text-white shadow-xl shadow-brand-primary/20 ring-1 ring-white/20">
+                        <OpenFlowLogo className="h-8 w-8 text-white" />
+                    </div>
+
+                    <div className="mx-auto mb-6 flex h-12 w-12 items-center justify-center rounded-full bg-brand-primary/5">
+                        <Monitor className="h-6 w-6 text-brand-primary" />
+                    </div>
+
+                    <h2 className="text-2xl font-bold tracking-tight text-brand-dark">
+                        {MOBILE_WORKSPACE_GATE_COPY.title}
+                    </h2>
+
+                    <p className="mx-auto mt-3 max-w-sm text-sm leading-6 text-brand-secondary">
+                        {MOBILE_WORKSPACE_GATE_COPY.description}
+                    </p>
+
+                    <div className="mt-6 rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3 text-left">
+                        <p className="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-400">
+                            {MOBILE_WORKSPACE_GATE_COPY.recommendedLabel}
+                        </p>
+                        <p className="mt-1 text-sm text-slate-600">
+                            {MOBILE_WORKSPACE_GATE_COPY.recommendedBody}
+                        </p>
+                    </div>
+
+                    <div className="mt-8 flex flex-col gap-3">
+                        <button
+                            onClick={onOpenDocs}
+                            className="inline-flex items-center justify-center rounded-full bg-brand-primary px-5 py-3 text-sm font-semibold text-white shadow-lg shadow-brand-primary/15 transition-colors hover:brightness-110"
+                        >
+                            {MOBILE_WORKSPACE_GATE_COPY.openDocs}
+                        </button>
+
+                        <button
+                            onClick={onGoHome}
+                            className="inline-flex items-center justify-center gap-2 rounded-full border border-brand-primary/20 px-5 py-2.5 text-sm font-medium text-brand-primary transition-colors hover:bg-brand-primary/5"
+                        >
+                            <ArrowLeft className="h-4 w-4" />
+                            {MOBILE_WORKSPACE_GATE_COPY.goHome}
+                        </button>
+                    </div>
+                </div>
+            </div>
+
+            <div className="hidden md:contents">{children}</div>
+        </>
+    );
+}
diff --git a/src/components/app/RouteLoadingFallback.test.tsx b/src/components/app/RouteLoadingFallback.test.tsx
index d6d20f5..01d548d 100644
--- a/src/components/app/RouteLoadingFallback.test.tsx
+++ b/src/components/app/RouteLoadingFallback.test.tsx
@@ -1,14 +1,15 @@
 import { render, screen } from '@testing-library/react';
 import { describe, expect, it } from 'vitest';
 import { RouteLoadingFallback } from './RouteLoadingFallback';
+import { DEFAULT_ROUTE_LOADING_COPY } from './routeLoadingCopy';
 
 describe('RouteLoadingFallback', () => {
   it('renders branded route-loading copy', () => {
     render(<RouteLoadingFallback />);
 
     expect(screen.getByRole('status')).toBeTruthy();
-    expect(screen.getByText('Opening workspace')).toBeTruthy();
-    expect(screen.getByText('Loading the next screen and restoring the current workspace context.')).toBeTruthy();
+    expect(screen.getByText(DEFAULT_ROUTE_LOADING_COPY.title)).toBeTruthy();
+    expect(screen.getByText(DEFAULT_ROUTE_LOADING_COPY.description)).toBeTruthy();
   });
 
   it('renders custom loading copy when provided', () => {
diff --git a/src/components/app/RouteLoadingFallback.tsx b/src/components/app/RouteLoadingFallback.tsx
index 2f01da2..bdf8bd0 100644
--- a/src/components/app/RouteLoadingFallback.tsx
+++ b/src/components/app/RouteLoadingFallback.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { Loader2 } from 'lucide-react';
+import { DEFAULT_ROUTE_LOADING_COPY } from './routeLoadingCopy';
 
 interface RouteLoadingFallbackProps {
   title?: string;
@@ -7,8 +8,8 @@ interface RouteLoadingFallbackProps {
 }
 
 export function RouteLoadingFallback({
-  title = 'Opening workspace',
-  description = 'Loading the next screen and restoring the current workspace context.',
+  title = DEFAULT_ROUTE_LOADING_COPY.title,
+  description = DEFAULT_ROUTE_LOADING_COPY.description,
 }: RouteLoadingFallbackProps): React.ReactElement {
   return (
     <div
diff --git a/src/components/app/mobileWorkspaceGateCopy.ts b/src/components/app/mobileWorkspaceGateCopy.ts
new file mode 100644
index 0000000..90d7bea
--- /dev/null
+++ b/src/components/app/mobileWorkspaceGateCopy.ts
@@ -0,0 +1,10 @@
+export const MOBILE_WORKSPACE_GATE_COPY = {
+    title: 'Made for big screens',
+    description:
+        'OpenFlowKit\'s canvas needs room to breathe — drag-and-drop, multi-select, and panels shine on a laptop or tablet. We\'d love to have you there!',
+    recommendedLabel: 'Quick tip',
+    recommendedBody:
+        'Open this link on a laptop or desktop and you\'ll land right in the editor with all tools ready.',
+    openDocs: 'Browse the Docs',
+    goHome: 'Go Home',
+} as const;
diff --git a/src/components/app/routeLoadingCopy.ts b/src/components/app/routeLoadingCopy.ts
new file mode 100644
index 0000000..be1e179
--- /dev/null
+++ b/src/components/app/routeLoadingCopy.ts
@@ -0,0 +1,4 @@
+export const DEFAULT_ROUTE_LOADING_COPY = {
+    title: 'Opening workspace',
+    description: 'Loading the next screen and restoring the current workspace context.',
+} as const;
diff --git a/src/components/architecture-lint/LintRulesPanel.tsx b/src/components/architecture-lint/LintRulesPanel.tsx
new file mode 100644
index 0000000..9d87dc3
--- /dev/null
+++ b/src/components/architecture-lint/LintRulesPanel.tsx
@@ -0,0 +1,735 @@
+import React, { useCallback, useState } from 'react';
+import {
+    AlertCircle,
+    AlertTriangle,
+    BookOpen,
+    CheckCircle2,
+    ChevronDown,
+    ChevronRight,
+    Download,
+    Info,
+    Plus,
+    Shield,
+    ShieldCheck,
+    Trash2,
+    Globe,
+} from 'lucide-react';
+import { SegmentedChoice } from '@/components/properties/SegmentedChoice';
+import { useFlowStore } from '@/store';
+import { useCanvasState } from '@/store/canvasHooks';
+import { Button } from '@/components/ui/Button';
+import { Input } from '@/components/ui/Input';
+import { Select, type SelectOption } from '@/components/ui/Select';
+import { Textarea } from '@/components/ui/Textarea';
+import { useArchitectureLint } from '@/context/ArchitectureLintContext';
+import { EXAMPLE_LINT_RULES } from '@/services/architectureLint/defaultRules';
+import { RULE_LIBRARY } from '@/services/architectureLint/ruleLibrary';
+import { loadWorkspaceRules, saveWorkspaceRules } from '@/services/architectureLint/workspaceRules';
+import { parseRulesJson } from '@/services/architectureLint/ruleEngine';
+import type { LintRule, LintSeverity, LintRuleType, NodeMatcher } from '@/services/architectureLint/types';
+
+// ─── helpers ────────────────────────────────────────────────────────────────
+
+function SeverityIcon({ severity }: { severity: LintSeverity }): React.ReactElement {
+    switch (severity) {
+        case 'error':
+            return <AlertCircle className="h-3.5 w-3.5 shrink-0 text-red-500" />;
+        case 'warning':
+            return <AlertTriangle className="h-3.5 w-3.5 shrink-0 text-amber-500" />;
+        case 'info':
+            return <Info className="h-3.5 w-3.5 shrink-0 text-blue-500" />;
+    }
+}
+
+function mergeRulesJson(existing: string, newRules: LintRule[]): string {
+    const { rules } = parseRulesJson(existing);
+    const merged = [...rules, ...newRules];
+    return JSON.stringify({ rules: merged }, null, 2);
+}
+
+// ─── NodeMatcher form ────────────────────────────────────────────────────────
+
+type MatcherField = 'labelContains' | 'labelEquals' | 'nodeType' | 'id' | 'none';
+
+const MATCHER_FIELD_OPTIONS: SelectOption[] = [
+    { value: 'none', label: 'Any node' },
+    { value: 'labelContains', label: 'Label contains' },
+    { value: 'labelEquals', label: 'Label equals' },
+    { value: 'nodeType', label: 'Node type' },
+    { value: 'id', label: 'Node ID' },
+];
+
+const RULE_TYPE_OPTIONS: SelectOption[] = [
+    { value: 'cannot-connect', label: 'Cannot connect' },
+    { value: 'must-connect', label: 'Must connect' },
+    { value: 'forbidden-cycle', label: 'Forbidden cycle' },
+    { value: 'must-have-node', label: 'Must have node' },
+    { value: 'node-count', label: 'Node count' },
+];
+
+const SEVERITY_OPTIONS: SelectOption[] = [
+    { value: 'error', label: 'Error' },
+    { value: 'warning', label: 'Warning' },
+    { value: 'info', label: 'Info' },
+];
+
+const EDITOR_MODE_ITEMS = [
+    { id: 'visual', label: 'Visual' },
+    { id: 'json', label: 'JSON' },
+] as const;
+
+function matcherToField(m: NodeMatcher | undefined): { field: MatcherField; value: string } {
+    if (!m) return { field: 'none', value: '' };
+    if (m.labelContains) return { field: 'labelContains', value: m.labelContains };
+    if (m.labelEquals) return { field: 'labelEquals', value: m.labelEquals };
+    if (m.nodeType) return { field: 'nodeType', value: m.nodeType };
+    if (m.id) return { field: 'id', value: m.id };
+    return { field: 'none', value: '' };
+}
+
+function fieldToMatcher(field: MatcherField, value: string): NodeMatcher | undefined {
+    if (field === 'none' || !value.trim()) return undefined;
+    return { [field]: value.trim() };
+}
+
+interface NodeMatcherFormProps {
+    label: string;
+    value: NodeMatcher | undefined;
+    onChange: (m: NodeMatcher | undefined) => void;
+}
+
+function NodeMatcherForm({ label, value, onChange }: NodeMatcherFormProps): React.ReactElement {
+    const { field, value: val } = matcherToField(value);
+
+    function onFieldChange(f: MatcherField): void {
+        onChange(fieldToMatcher(f, val));
+    }
+
+    function onValueChange(v: string): void {
+        onChange(fieldToMatcher(field, v));
+    }
+
+    return (
+        <div className="space-y-1">
+            <label className="text-[10px] font-medium uppercase tracking-wide text-slate-400">{label}</label>
+            <div className="flex gap-1.5">
+                <Select
+                    value={field}
+                    onChange={(nextValue) => onFieldChange(nextValue as MatcherField)}
+                    options={MATCHER_FIELD_OPTIONS}
+                    className="min-w-[11rem]"
+                />
+                {field !== 'none' && (
+                    <Input
+                        type="text"
+                        value={val}
+                        onChange={(event) => onValueChange(event.target.value)}
+                        placeholder="value"
+                        className="h-9 min-w-0 flex-1 text-[11px]"
+                    />
+                )}
+            </div>
+        </div>
+    );
+}
+
+// ─── Rule builder form ───────────────────────────────────────────────────────
+
+function emptyRule(): LintRule {
+    return { id: `rule-${Date.now()}`, severity: 'error', type: 'cannot-connect', description: '' };
+}
+
+interface RuleFormProps {
+    initial?: LintRule;
+    onSave: (r: LintRule) => void;
+    onCancel: () => void;
+}
+
+function RuleForm({ initial, onSave, onCancel }: RuleFormProps): React.ReactElement {
+    const [rule, setRule] = useState<LintRule>(initial ?? emptyRule());
+
+    function set<K extends keyof LintRule>(key: K, val: LintRule[K]): void {
+        setRule((r) => ({ ...r, [key]: val }));
+    }
+
+    const showTo = ['cannot-connect', 'must-connect'].includes(rule.type);
+    const showCount = rule.type === 'node-count';
+
+    return (
+        <div className="space-y-3 rounded-[var(--radius-md)] border border-slate-200 bg-slate-50 p-3">
+            <div className="grid grid-cols-2 gap-2">
+                <Input
+                    label="Rule ID"
+                    type="text"
+                    value={rule.id}
+                    onChange={(event) => set('id', event.target.value)}
+                    className="h-9 text-[11px]"
+                />
+                <div className="space-y-1">
+                    <label className="text-[10px] font-medium uppercase tracking-wide text-slate-400">Type</label>
+                    <Select
+                        value={rule.type}
+                        onChange={(nextValue) => set('type', nextValue as LintRuleType)}
+                        options={RULE_TYPE_OPTIONS}
+                    />
+                </div>
+            </div>
+
+            <Input
+                label="Description (shown in violations)"
+                type="text"
+                value={rule.description ?? ''}
+                onChange={(event) => set('description', event.target.value)}
+                placeholder="e.g. Services must not call databases directly"
+                className="h-9 text-[11px]"
+            />
+
+            <div className="space-y-1">
+                <label className="text-[10px] font-medium uppercase tracking-wide text-slate-400">Severity</label>
+                <Select
+                    value={rule.severity}
+                    onChange={(nextValue) => set('severity', nextValue as LintSeverity)}
+                    options={SEVERITY_OPTIONS}
+                />
+            </div>
+
+            <NodeMatcherForm
+                label={showTo ? 'From node' : 'Node matcher'}
+                value={rule.from}
+                onChange={(m) => set('from', m)}
+            />
+            {showTo && (
+                <NodeMatcherForm
+                    label="To node"
+                    value={rule.to}
+                    onChange={(m) => set('to', m)}
+                />
+            )}
+            {showCount && (
+                <div className="grid grid-cols-2 gap-2">
+                    <Input
+                        label="Min count"
+                        type="number"
+                        min={0}
+                        value={rule.min ?? ''}
+                        onChange={(event) => set('min', event.target.value ? Number(event.target.value) : undefined)}
+                        className="h-9 text-[11px]"
+                    />
+                    <Input
+                        label="Max count"
+                        type="number"
+                        min={0}
+                        value={rule.max ?? ''}
+                        onChange={(event) => set('max', event.target.value ? Number(event.target.value) : undefined)}
+                        className="h-9 text-[11px]"
+                    />
+                </div>
+            )}
+
+            <div className="flex gap-2">
+                <Button
+                    type="button"
+                    onClick={onCancel}
+                    variant="secondary"
+                    size="sm"
+                    className="h-8 flex-1"
+                >
+                    Cancel
+                </Button>
+                <Button
+                    type="button"
+                    onClick={() => onSave(rule)}
+                    size="sm"
+                    className="h-8 flex-1"
+                >
+                    {initial ? 'Update rule' : 'Add rule'}
+                </Button>
+            </div>
+        </div>
+    );
+}
+
+// ─── Rule list row ───────────────────────────────────────────────────────────
+
+interface RuleRowProps {
+    rule: LintRule;
+    onEdit: () => void;
+    onDelete: () => void;
+}
+
+function RuleRow({ rule, onEdit, onDelete }: RuleRowProps): React.ReactElement {
+    return (
+        <div className="flex items-center gap-2 rounded border border-slate-100 bg-white px-2.5 py-2">
+            <SeverityIcon severity={rule.severity} />
+            <div className="min-w-0 flex-1">
+                <p className="truncate text-[11px] font-medium text-slate-700">{rule.description || rule.id}</p>
+                <p className="text-[10px] font-mono text-slate-400">{rule.type}</p>
+            </div>
+            <Button type="button" variant="ghost" size="sm" onClick={onEdit} className="h-7 shrink-0 px-2 text-[10px]">
+                Edit
+            </Button>
+            <Button type="button" variant="icon" size="icon" onClick={onDelete} className="h-7 w-7 shrink-0 text-slate-300 hover:text-red-400">
+                <Trash2 className="h-3.5 w-3.5" />
+            </Button>
+        </div>
+    );
+}
+
+interface RulesSectionProps {
+    title: string;
+    icon: React.ReactNode;
+    hasRules: boolean;
+    rules: LintRule[];
+    emptyMessage: string;
+    onOpenEditor: () => void;
+}
+
+function RulesSection({
+    title,
+    icon,
+    hasRules,
+    rules,
+    emptyMessage,
+    onOpenEditor,
+}: RulesSectionProps): React.ReactElement {
+    return (
+        <div className="rounded border border-slate-200 bg-white">
+            <div className="flex items-center justify-between border-b border-slate-100 px-3 py-2">
+                <div className="flex items-center gap-1.5">
+                    {icon}
+                    <p className="text-[11px] font-medium text-slate-700">{title}</p>
+                    {hasRules ? (
+                        <span className="rounded-full bg-slate-100 px-1.5 py-0 text-[10px] text-slate-500">
+                            {rules.length}
+                        </span>
+                    ) : null}
+                </div>
+                <Button
+                    type="button"
+                    onClick={onOpenEditor}
+                    variant="secondary"
+                    size="sm"
+                    className="h-7 px-2 text-[10px]"
+                    icon={!hasRules ? <Plus className="h-3 w-3" /> : undefined}
+                >
+                    {hasRules ? 'Edit' : 'Add'}
+                </Button>
+            </div>
+            {!hasRules ? (
+                <p className="px-3 py-2 text-[11px] text-slate-400">{emptyMessage}</p>
+            ) : (
+                <div className="divide-y divide-slate-50 px-3">
+                    {rules.map((rule) => (
+                        <div key={rule.id} className="flex items-center gap-2 py-2">
+                            <SeverityIcon severity={rule.severity} />
+                            <p className="min-w-0 flex-1 truncate text-[11px] text-slate-600">{rule.description || rule.id}</p>
+                        </div>
+                    ))}
+                </div>
+            )}
+        </div>
+    );
+}
+
+// ─── Template library picker ─────────────────────────────────────────────────
+
+interface LibraryPickerProps {
+    onApply: (rulesJson: string) => void;
+    existingJson: string;
+    onClose: () => void;
+}
+
+function LibraryPicker({ onApply, existingJson, onClose }: LibraryPickerProps): React.ReactElement {
+    const [expanded, setExpanded] = useState<string | null>(null);
+
+    return (
+        <div className="space-y-2">
+            <div className="flex items-center justify-between">
+                <p className="text-xs font-medium text-slate-700">Rule Templates</p>
+                <Button type="button" variant="ghost" size="sm" onClick={onClose} className="h-7 px-2 text-[11px]">
+                    Back
+                </Button>
+            </div>
+            <p className="text-[11px] text-slate-400">Pick a template to add to this diagram&apos;s rules.</p>
+            {RULE_LIBRARY.map((tpl) => (
+                <div key={tpl.id} className="rounded border border-slate-200 bg-white">
+                    <button
+                        onClick={() => setExpanded(expanded === tpl.id ? null : tpl.id)}
+                        className="flex w-full items-center gap-2 px-3 py-2 text-left"
+                    >
+                        {expanded === tpl.id
+                            ? <ChevronDown className="h-3.5 w-3.5 shrink-0 text-slate-400" />
+                            : <ChevronRight className="h-3.5 w-3.5 shrink-0 text-slate-400" />
+                        }
+                        <div className="min-w-0 flex-1">
+                            <p className="text-[11px] font-medium text-slate-700">{tpl.name}</p>
+                            <p className="text-[10px] text-slate-400">{tpl.description}</p>
+                        </div>
+                        <Button
+                            type="button"
+                            onClick={(e) => {
+                                e.stopPropagation();
+                                onApply(mergeRulesJson(existingJson, tpl.rules));
+                                onClose();
+                            }}
+                            size="sm"
+                            className="h-7 shrink-0 px-2 text-[10px]"
+                        >
+                            Add
+                        </Button>
+                    </button>
+                    {expanded === tpl.id && (
+                        <div className="border-t border-slate-100 px-3 py-2 space-y-1">
+                            {tpl.rules.map((r) => (
+                                <div key={r.id} className="flex items-center gap-1.5">
+                                    <SeverityIcon severity={r.severity} />
+                                    <p className="text-[10px] text-slate-600">{r.description}</p>
+                                </div>
+                            ))}
+                        </div>
+                    )}
+                </div>
+            ))}
+        </div>
+    );
+}
+
+// ─── Visual rule editor ──────────────────────────────────────────────────────
+
+type EditorMode = 'visual' | 'json';
+
+interface VisualEditorProps {
+    rulesJson: string;
+    onSave: (json: string) => void;
+    onCancel: () => void;
+    showLibrary: boolean;
+    onToggleLibrary: () => void;
+}
+
+function VisualEditor({ rulesJson, onSave, onCancel, showLibrary, onToggleLibrary }: VisualEditorProps): React.ReactElement {
+    const [mode, setMode] = useState<EditorMode>('visual');
+    const [draft, setDraft] = useState(rulesJson || JSON.stringify({ rules: [] }, null, 2));
+    const [editingIndex, setEditingIndex] = useState<number | null>(null);
+    const [addingNew, setAddingNew] = useState(false);
+
+    const { rules, error } = parseRulesJson(draft);
+
+    function updateRules(newRules: LintRule[]): void {
+        setDraft(JSON.stringify({ rules: newRules }, null, 2));
+    }
+
+    function saveRule(r: LintRule, index: number | null): void {
+        if (index === null) {
+            updateRules([...rules, r]);
+            setAddingNew(false);
+        } else {
+            const updated = rules.map((existing, i) => (i === index ? r : existing));
+            updateRules(updated);
+            setEditingIndex(null);
+        }
+    }
+
+    function deleteRule(index: number): void {
+        updateRules(rules.filter((_, i) => i !== index));
+    }
+
+    if (showLibrary) {
+        return (
+            <div className="flex h-full min-h-0 flex-col gap-3 p-3">
+                <LibraryPicker
+                    existingJson={draft}
+                    onApply={(json) => { setDraft(json); onToggleLibrary(); }}
+                    onClose={onToggleLibrary}
+                />
+            </div>
+        );
+    }
+
+    return (
+        <div className="flex h-full min-h-0 flex-col gap-3 p-3">
+            <div className="flex items-center gap-2">
+                <p className="flex-1 text-xs font-medium text-slate-700">Edit Rules</p>
+                <div className="min-w-[10rem]">
+                    <SegmentedChoice
+                        items={[...EDITOR_MODE_ITEMS]}
+                        selectedId={mode}
+                        onSelect={(nextMode) => setMode(nextMode as EditorMode)}
+                        columns={2}
+                        size="sm"
+                    />
+                </div>
+                <Button
+                    type="button"
+                    onClick={onToggleLibrary}
+                    variant="secondary"
+                    size="sm"
+                    className="h-8 px-2 text-[10px]"
+                    icon={<BookOpen className="h-3 w-3" />}
+                >
+                    Templates
+                </Button>
+            </div>
+
+            {mode === 'json' ? (
+                <Textarea
+                    value={draft}
+                    onChange={(event) => setDraft(event.target.value)}
+                    spellCheck={false}
+                    className="min-h-[200px] flex-1 resize-none font-mono text-xs text-slate-700 custom-scrollbar"
+                    placeholder={EXAMPLE_LINT_RULES}
+                />
+            ) : (
+                <div className="flex-1 space-y-2 overflow-y-auto custom-scrollbar">
+                    {error && (
+                        <div className="rounded border border-red-200 bg-red-50 p-2">
+                            <p className="text-[10px] font-mono text-red-600">{error}</p>
+                        </div>
+                    )}
+                    {rules.map((rule, i) => (
+                        editingIndex === i ? (
+                            <RuleForm
+                                key={rule.id}
+                                initial={rule}
+                                onSave={(r) => saveRule(r, i)}
+                                onCancel={() => setEditingIndex(null)}
+                            />
+                        ) : (
+                            <RuleRow
+                                key={rule.id}
+                                rule={rule}
+                                onEdit={() => setEditingIndex(i)}
+                                onDelete={() => deleteRule(i)}
+                            />
+                        )
+                    ))}
+                    {addingNew ? (
+                        <RuleForm
+                            onSave={(r) => saveRule(r, null)}
+                            onCancel={() => setAddingNew(false)}
+                        />
+                    ) : (
+                        <Button
+                            type="button"
+                            onClick={() => setAddingNew(true)}
+                            variant="secondary"
+                            size="sm"
+                            className="h-9 w-full border-dashed text-[11px] text-slate-400 hover:text-[var(--brand-primary)]"
+                            icon={<Plus className="h-3.5 w-3.5" />}
+                        >
+                            Add rule
+                        </Button>
+                    )}
+                </div>
+            )}
+
+            <div className="flex gap-2">
+                <Button
+                    type="button"
+                    onClick={onCancel}
+                    variant="secondary"
+                    size="sm"
+                    className="h-8 flex-1"
+                >
+                    Cancel
+                </Button>
+                <Button
+                    type="button"
+                    onClick={() => onSave(draft)}
+                    size="sm"
+                    className="h-8 flex-1"
+                >
+                    Save rules
+                </Button>
+            </div>
+        </div>
+    );
+}
+
+// ─── Main panel ──────────────────────────────────────────────────────────────
+
+type PanelView = 'overview' | 'diagram-rules' | 'workspace-rules';
+
+export function LintRulesPanel(): React.ReactElement {
+    const { viewSettings, setViewSettings } = useFlowStore();
+    const { nodes } = useCanvasState();
+    const { violations, parseError } = useArchitectureLint();
+    const [view, setView] = useState<PanelView>('overview');
+    const [showLibrary, setShowLibrary] = useState(false);
+
+    const lintRules = viewSettings.lintRules;
+    const hasRules = lintRules.trim().length > 0;
+    const { rules: diagramRules } = parseRulesJson(lintRules);
+    const workspaceRulesJson = loadWorkspaceRules();
+    const hasWorkspaceRules = workspaceRulesJson.trim().length > 0;
+    const { rules: workspaceRules } = parseRulesJson(workspaceRulesJson);
+
+    const errorCount = violations.filter((v) => v.severity === 'error').length;
+    const warningCount = violations.filter((v) => v.severity === 'warning').length;
+    const handleDiagramRulesOpen = () => {
+        setShowLibrary(false);
+        setView('diagram-rules');
+    };
+    const handleWorkspaceRulesOpen = () => {
+        setShowLibrary(false);
+        setView('workspace-rules');
+    };
+    const handleBrowseTemplates = () => {
+        setShowLibrary(true);
+        setView('diagram-rules');
+    };
+
+    const exportViolations = useCallback(() => {
+        const data = JSON.stringify({ violations, exportedAt: new Date().toISOString() }, null, 2);
+        const blob = new Blob([data], { type: 'application/json' });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = 'lint-violations.json';
+        a.click();
+        URL.revokeObjectURL(url);
+    }, [violations]);
+
+    if (view === 'diagram-rules') {
+        return (
+            <VisualEditor
+                rulesJson={lintRules}
+                onSave={(json) => { setViewSettings({ lintRules: json }); setView('overview'); }}
+                onCancel={() => setView('overview')}
+                showLibrary={showLibrary}
+                onToggleLibrary={() => setShowLibrary((s) => !s)}
+            />
+        );
+    }
+
+    if (view === 'workspace-rules') {
+        return (
+            <VisualEditor
+                rulesJson={workspaceRulesJson}
+                onSave={(json) => { saveWorkspaceRules(json); setView('overview'); }}
+                onCancel={() => setView('overview')}
+                showLibrary={showLibrary}
+                onToggleLibrary={() => setShowLibrary((s) => !s)}
+            />
+        );
+    }
+
+    return (
+        <div className="flex h-full min-h-0 flex-col gap-3 overflow-y-auto p-3 custom-scrollbar">
+            <div className="rounded-[var(--radius-md)] border border-slate-200 bg-[var(--brand-primary-50)] p-3">
+                <div className="flex items-center gap-2">
+                    <Shield className="h-4 w-4 text-[var(--brand-primary)]" />
+                    <p className="text-xs font-medium text-[var(--brand-primary)]">Architecture Linting</p>
+                </div>
+                <p className="mt-1 text-[11px] leading-5 text-slate-500">
+                    Enforce architecture constraints in real time — like ESLint for diagrams.
+                </p>
+            </div>
+
+            {/* Violation summary */}
+            {(hasRules || hasWorkspaceRules) && (
+                <>
+                    {parseError ? (
+                        <div className="flex items-start gap-2 rounded border border-red-200 bg-red-50 p-3">
+                            <AlertCircle className="h-4 w-4 shrink-0 text-red-500 mt-0.5" />
+                            <div>
+                                <p className="text-[11px] font-medium text-red-700">Rule file error</p>
+                                <p className="text-[11px] text-red-600 mt-0.5 font-mono">{parseError}</p>
+                            </div>
+                        </div>
+                    ) : violations.length === 0 ? (
+                        <div className="flex items-center gap-2.5 rounded border border-emerald-200 bg-emerald-50/50 p-3">
+                            <CheckCircle2 className="h-4 w-4 shrink-0 text-emerald-500" />
+                            <div>
+                                <p className="text-xs font-medium text-slate-700">All rules pass</p>
+                                <p className="text-[11px] text-slate-400">
+                                    {nodes.length} node{nodes.length !== 1 ? 's' : ''} checked, no violations found.
+                                </p>
+                            </div>
+                        </div>
+                    ) : (
+                        <div className="rounded border border-red-100 bg-red-50/30">
+                            <div className="flex items-center justify-between border-b border-red-100 px-3 py-2">
+                                <span className="text-xs font-medium text-slate-700">
+                                    {violations.length} violation{violations.length !== 1 ? 's' : ''}
+                                </span>
+                                <div className="flex items-center gap-2 text-[11px]">
+                                    {errorCount > 0 && (
+                                        <span className="flex items-center gap-1 text-red-600 font-medium">
+                                            <AlertCircle className="h-3 w-3" /> {errorCount}
+                                        </span>
+                                    )}
+                                    {warningCount > 0 && (
+                                        <span className="flex items-center gap-1 text-amber-600 font-medium">
+                                            <AlertTriangle className="h-3 w-3" /> {warningCount}
+                                        </span>
+                                    )}
+                                    <Button
+                                        type="button"
+                                        onClick={exportViolations}
+                                        variant="secondary"
+                                        size="sm"
+                                        className="h-7 px-2 text-[10px]"
+                                        icon={<Download className="h-2.5 w-2.5" />}
+                                    >
+                                        Export
+                                    </Button>
+                                </div>
+                            </div>
+                            <div className="divide-y divide-red-100/60">
+                                {violations.map((v, i) => (
+                                    <div key={`${v.ruleId}-${i}`} className="flex items-start gap-2 px-3 py-2.5">
+                                        <SeverityIcon severity={v.severity} />
+                                        <div className="min-w-0">
+                                            <p className="text-[11px] font-medium text-slate-700 leading-snug">{v.message}</p>
+                                            <p className="text-[10px] text-slate-400 mt-0.5 font-mono">{v.ruleId}</p>
+                                        </div>
+                                    </div>
+                                ))}
+                            </div>
+                        </div>
+                    )}
+                </>
+            )}
+
+            <RulesSection
+                title="Diagram rules"
+                icon={<Shield className="h-3.5 w-3.5 text-slate-400" />}
+                hasRules={hasRules}
+                rules={diagramRules}
+                emptyMessage="No diagram-level rules yet."
+                onOpenEditor={handleDiagramRulesOpen}
+            />
+
+            <RulesSection
+                title="Workspace rules"
+                icon={<Globe className="h-3.5 w-3.5 text-slate-400" />}
+                hasRules={hasWorkspaceRules}
+                rules={workspaceRules}
+                emptyMessage="Workspace rules apply to all diagrams. Good for org-wide standards."
+                onOpenEditor={handleWorkspaceRulesOpen}
+            />
+
+            {/* Empty state */}
+            {!hasRules && !hasWorkspaceRules && (
+                <div className="flex flex-col items-center gap-4 py-4 text-center">
+                    <ShieldCheck className="h-10 w-10 text-slate-200" />
+                    <div>
+                        <p className="text-sm font-medium text-slate-700">No rules defined yet</p>
+                        <p className="mt-1 text-[11px] text-slate-400">
+                            Add rules to automatically detect architecture violations as you draw.
+                        </p>
+                    </div>
+                    <Button
+                        type="button"
+                        onClick={handleBrowseTemplates}
+                        variant="secondary"
+                        className="h-9 border-[var(--brand-primary)] text-sm font-medium text-[var(--brand-primary)] hover:bg-[var(--brand-primary-50)]"
+                        icon={<BookOpen className="h-4 w-4" />}
+                    >
+                        Browse templates
+                    </Button>
+                </div>
+            )}
+        </div>
+    );
+}
diff --git a/src/components/command-bar/AssetsView.test.tsx b/src/components/command-bar/AssetsView.test.tsx
index dc91605..fe88a76 100644
--- a/src/components/command-bar/AssetsView.test.tsx
+++ b/src/components/command-bar/AssetsView.test.tsx
@@ -59,6 +59,9 @@ describe('AssetsView', () => {
                 onAddJourney={vi.fn()}
                 onAddMindmap={vi.fn()}
                 onAddArchitecture={vi.fn()}
+                onAddSequence={vi.fn()}
+                onAddClassNode={vi.fn()}
+                onAddEntityNode={vi.fn()}
                 onAddImage={vi.fn()}
                 onAddBrowserWireframe={vi.fn()}
                 onAddMobileWireframe={vi.fn()}
@@ -87,6 +90,9 @@ describe('AssetsView', () => {
                 onAddJourney={vi.fn()}
                 onAddMindmap={vi.fn()}
                 onAddArchitecture={vi.fn()}
+                onAddSequence={vi.fn()}
+                onAddClassNode={vi.fn()}
+                onAddEntityNode={vi.fn()}
                 onAddImage={vi.fn()}
                 onAddBrowserWireframe={vi.fn()}
                 onAddMobileWireframe={vi.fn()}
@@ -118,6 +124,9 @@ describe('AssetsView', () => {
                 onAddJourney={vi.fn()}
                 onAddMindmap={vi.fn()}
                 onAddArchitecture={vi.fn()}
+                onAddSequence={vi.fn()}
+                onAddClassNode={vi.fn()}
+                onAddEntityNode={vi.fn()}
                 onAddImage={vi.fn()}
                 onAddBrowserWireframe={vi.fn()}
                 onAddMobileWireframe={vi.fn()}
diff --git a/src/components/command-bar/AssetsView.tsx b/src/components/command-bar/AssetsView.tsx
index 8b204d4..6b00195 100644
--- a/src/components/command-bar/AssetsView.tsx
+++ b/src/components/command-bar/AssetsView.tsx
@@ -1,18 +1,22 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import {
     AppWindow,
+    ArrowRightLeft,
     Boxes,
     Component,
     GitBranch,
     Group,
     Image as ImageIcon,
+    LayoutList,
     Search,
     Smartphone,
     StickyNote,
+    Table2,
     Type,
 } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
-import { Input } from '../ui/Input';
+import { SearchField } from '../ui/SearchField';
+import { SegmentedTabs } from '../ui/SegmentedTabs';
 import { ViewHeader } from './ViewHeader';
 import { AssetsIcon } from '../icons/AssetsIcon';
 import { NamedIcon } from '../IconMap';
@@ -20,16 +24,21 @@ import { Tooltip } from '../Tooltip';
 import { Select } from '../ui/Select';
 import {
     DOMAIN_LIBRARY_ITEMS,
-    type DomainLibraryCategory,
     type DomainLibraryItem,
 } from '@/services/domainLibrary';
-import { ROLLOUT_FLAGS } from '@/config/rolloutFlags';
-import {
-    getProviderCatalogCount,
-    loadProviderCatalog,
-    loadProviderShapePreview,
-} from '@/services/shapeLibrary/providerCatalog';
+import { getProviderCatalogCount, loadProviderShapePreview } from '@/services/shapeLibrary/providerCatalog';
 import { loadIconAssetCatalog } from '@/services/iconAssetCatalog';
+import {
+    type AssetTab,
+    CLOUD_TABS,
+    type GeneralAssetItem,
+    IMAGE_UPLOAD_INPUT_ID,
+    MAX_CLOUD_RESULTS,
+    PROVIDER_BACKED_TABS,
+    TAB_ORDER,
+    getTileClass,
+} from './assetsViewConstants';
+import { useCloudAssetCatalog } from './useCloudAssetCatalog';
 
 interface AssetsViewProps {
     onClose: () => void;
@@ -40,55 +49,15 @@ interface AssetsViewProps {
     onAddJourney: () => void;
     onAddMindmap: () => void;
     onAddArchitecture: () => void;
+    onAddSequence: () => void;
     onAddImage: (imageUrl: string) => void;
     onAddBrowserWireframe: () => void;
     onAddMobileWireframe: () => void;
+    onAddClassNode: () => void;
+    onAddEntityNode: () => void;
     onAddDomainLibraryItem: (item: DomainLibraryItem) => void;
 }
 
-type AssetTab = 'general' | 'icons' | 'aws' | 'azure' | 'gcp' | 'cncf';
-
-interface GeneralAssetItem {
-    id: string;
-    label: string;
-    icon: React.ReactNode;
-    keywords: string[];
-    action: () => void;
-}
-
-interface CloudTabDefinition {
-    id: Extract<AssetTab, 'icons' | 'aws' | 'azure' | 'gcp' | 'cncf'>;
-    label: string;
-    category: DomainLibraryCategory;
-}
-
-const TAB_ORDER: AssetTab[] = ['general', 'icons', 'aws', 'azure', 'gcp', 'cncf'];
-
-const CLOUD_TABS: CloudTabDefinition[] = [
-    { id: 'icons', label: 'Icons', category: 'icons' },
-    { id: 'aws', label: 'AWS', category: 'aws' },
-    { id: 'azure', label: 'Azure', category: 'azure' },
-    { id: 'gcp', label: 'GCP', category: 'gcp' },
-    { id: 'cncf', label: 'CNCF', category: 'cncf' },
-];
-const IMAGE_UPLOAD_INPUT_ID = 'assets-image-upload-input';
-const MAX_CLOUD_RESULTS = 240;
-const PROVIDER_BACKED_TABS = new Set<AssetTab>(['aws', 'azure', 'gcp', 'cncf']);
-
-type CloudAssetState = 'idle' | 'loading' | 'ready' | 'error';
-
-function getTileClass(): string {
-    return 'group flex aspect-square flex-col items-center justify-center gap-3 rounded-[var(--radius-lg)] border border-slate-200 bg-white px-3 py-4 text-center shadow-sm transition-all hover:-translate-y-0.5 hover:border-[var(--brand-primary-200)] hover:bg-[var(--brand-primary-50)] hover:shadow-md';
-}
-
-function getTabButtonClass(isActive: boolean): string {
-    return `h-9 rounded-[var(--radius-md)] border px-3 text-xs font-semibold transition-colors ${
-        isActive
-            ? 'border-[var(--brand-primary)] bg-[var(--brand-primary)] text-white shadow-sm'
-            : 'border-slate-200 bg-white text-slate-600 hover:border-slate-300 hover:text-slate-800'
-    }`;
-}
-
 export function AssetsView({
     onClose,
     handleBack,
@@ -98,39 +67,22 @@ export function AssetsView({
     onAddJourney,
     onAddMindmap,
     onAddArchitecture,
+    onAddSequence,
     onAddImage,
     onAddBrowserWireframe,
     onAddMobileWireframe,
+    onAddClassNode,
+    onAddEntityNode,
     onAddDomainLibraryItem,
 }: AssetsViewProps): React.ReactElement {
     const { t } = useTranslation();
     const [query, setQuery] = useState('');
     const [activeTab, setActiveTab] = useState<AssetTab>('general');
-    const [providerItems, setProviderItems] = useState<Partial<Record<CloudTabDefinition['id'], DomainLibraryItem[]>>>({});
-    const [providerLoadState, setProviderLoadState] = useState<Partial<Record<CloudTabDefinition['id'], CloudAssetState>>>({});
-    const [providerPreviewUrls, setProviderPreviewUrls] = useState<Record<string, string>>({});
-    const [categoryFilters, setCategoryFilters] = useState<Partial<Record<CloudTabDefinition['id'], string>>>({});
+    const [categoryFilters, setCategoryFilters] = useState<Partial<Record<(typeof CLOUD_TABS)[number]['id'], string>>>({});
     const [pendingSelectionState, setPendingSelectionState] = useState<{ scope: string; ids: string[] }>({ scope: '', ids: [] });
     const iconItems = useMemo(() => loadIconAssetCatalog(), []);
 
-    const loadProviderTab = useCallback((tabId: CloudTabDefinition['id']): void => {
-        if (!ROLLOUT_FLAGS.shapeLibraryV1 || tabId === 'icons') {
-            return;
-        }
-        if (providerLoadState[tabId] === 'loading' || providerLoadState[tabId] === 'ready') {
-            return;
-        }
-
-        setProviderLoadState((current) => ({ ...current, [tabId]: 'loading' }));
-        loadProviderCatalog(tabId)
-            .then((items) => {
-                setProviderItems((current) => ({ ...current, [tabId]: items }));
-                setProviderLoadState((current) => ({ ...current, [tabId]: 'ready' }));
-            })
-            .catch(() => {
-                setProviderLoadState((current) => ({ ...current, [tabId]: 'error' }));
-            });
-    }, [providerLoadState]);
+    const { providerItems, providerLoadState, providerPreviewUrls, setProviderPreviewUrls, insertProviderItem } = useCloudAssetCatalog(onAddDomainLibraryItem);
 
     function requestImageUpload(): void {
         document.getElementById(IMAGE_UPLOAD_INPUT_ID)?.click();
@@ -210,12 +162,22 @@ export function AssetsView({
             id: 'architecture',
             label: 'Architecture',
             icon: <Boxes className="h-5 w-5" />,
-            keywords: ['architecture', 'service', 'system'],
+            keywords: ['architecture', 'service', 'system', 'cloud', 'c4'],
             action: () => {
                 onAddArchitecture();
                 onClose();
             },
         },
+        {
+            id: 'sequence',
+            label: 'Sequence',
+            icon: <ArrowRightLeft className="h-5 w-5" />,
+            keywords: ['sequence', 'diagram', 'participant', 'message', 'uml', 'flow'],
+            action: () => {
+                onAddSequence();
+                onClose();
+            },
+        },
         {
             id: 'image',
             label: t('toolbar.image', 'Image'),
@@ -223,6 +185,26 @@ export function AssetsView({
             keywords: ['image', 'media', 'upload', 'screenshot'],
             action: requestImageUpload,
         },
+        {
+            id: 'class',
+            label: 'Class',
+            icon: <LayoutList className="h-5 w-5" />,
+            keywords: ['class', 'uml', 'object', 'oop'],
+            action: () => {
+                onAddClassNode();
+                onClose();
+            },
+        },
+        {
+            id: 'entity',
+            label: 'Entity',
+            icon: <Table2 className="h-5 w-5" />,
+            keywords: ['entity', 'er', 'erd', 'table', 'database', 'schema'],
+            action: () => {
+                onAddEntityNode();
+                onClose();
+            },
+        },
         {
             id: 'browser',
             label: 'Browser',
@@ -247,9 +229,6 @@ export function AssetsView({
 
     const normalizedQuery = query.trim().toLowerCase();
 
-    useEffect(() => {
-        CLOUD_TABS.forEach((tab) => loadProviderTab(tab.id));
-    }, [loadProviderTab]);
     const filteredGeneralItems = generalItems.filter((item) => (
         normalizedQuery.length === 0
         || item.label.toLowerCase().includes(normalizedQuery)
@@ -257,7 +236,7 @@ export function AssetsView({
     ));
 
     const filteredCloudItems = useMemo(() => {
-        return CLOUD_TABS.reduce<Record<CloudTabDefinition['id'], DomainLibraryItem[]>>((accumulator, tab) => {
+        return CLOUD_TABS.reduce<Record<(typeof CLOUD_TABS)[number]['id'], DomainLibraryItem[]>>((accumulator, tab) => {
             const availableItems = DOMAIN_LIBRARY_ITEMS
                 .filter((item) => item.category === tab.category && !PROVIDER_BACKED_TABS.has(tab.id))
                 .concat(providerItems[tab.id] || []);
@@ -280,19 +259,12 @@ export function AssetsView({
             azure: [],
             gcp: [],
             cncf: [],
+            network: [],
+            c4: [],
             icons: [],
         });
     }, [categoryFilters, normalizedQuery, providerItems]);
 
-    const baseTabCounts: Record<AssetTab, number> = {
-        general: generalItems.length,
-        icons: iconItems.length,
-        aws: getProviderCatalogCount('aws'),
-        azure: getProviderCatalogCount('azure'),
-        gcp: getProviderCatalogCount('gcp'),
-        cncf: getProviderCatalogCount('cncf'),
-    };
-
     const filteredIconItems = useMemo(() => {
         const selectedCategory = categoryFilters.icons;
         return iconItems.filter((item) => {
@@ -307,16 +279,34 @@ export function AssetsView({
     }, [categoryFilters.icons, iconItems, normalizedQuery]);
 
     const hasActiveFilters = normalizedQuery.length > 0 || Object.values(categoryFilters).some((value) => Boolean(value && value !== 'all'));
-    const tabCounts: Record<AssetTab, number> = hasActiveFilters
-        ? {
-            general: filteredGeneralItems.length,
-            icons: filteredIconItems.length,
-            aws: filteredCloudItems.aws.length,
-            azure: filteredCloudItems.azure.length,
-            gcp: filteredCloudItems.gcp.length,
-            cncf: filteredCloudItems.cncf.length,
-        }
-        : baseTabCounts;
+    const tabCounts = useMemo<Record<AssetTab, number>>(() => (
+        hasActiveFilters
+            ? {
+                general: filteredGeneralItems.length,
+                icons: filteredIconItems.length,
+                network: filteredCloudItems.network.length,
+                c4: filteredCloudItems.c4.length,
+                aws: filteredCloudItems.aws.length,
+                azure: filteredCloudItems.azure.length,
+                gcp: filteredCloudItems.gcp.length,
+                cncf: filteredCloudItems.cncf.length,
+            }
+            : {
+                general: generalItems.length,
+                icons: iconItems.length,
+                network: DOMAIN_LIBRARY_ITEMS.filter((item) => item.category === 'network').length,
+                c4: DOMAIN_LIBRARY_ITEMS.filter((item) => item.category === 'c4').length,
+                aws: getProviderCatalogCount('aws'),
+                azure: getProviderCatalogCount('azure'),
+                gcp: getProviderCatalogCount('gcp'),
+                cncf: getProviderCatalogCount('cncf'),
+            }
+    ), [filteredCloudItems, filteredGeneralItems.length, filteredIconItems.length, generalItems.length, hasActiveFilters, iconItems.length]);
+    const tabItems = useMemo(() => TAB_ORDER.map((tab) => ({
+        id: tab,
+        label: tab.toUpperCase(),
+        count: tabCounts[tab],
+    })), [tabCounts]);
 
     const activeCloudTab = CLOUD_TABS.find((tab) => tab.id === activeTab);
     const activeTabItems = useMemo(() => (
@@ -343,25 +333,13 @@ export function AssetsView({
     const pendingSelectionIds = pendingSelectionState.scope === selectionScope ? pendingSelectionState.ids : [];
     const pendingSelectedItems = visibleCloudItems.filter((item) => pendingSelectionIds.includes(item.id));
 
-    async function insertProviderItem(item: DomainLibraryItem): Promise<void> {
-        const preview = item.archIconPackId && item.archIconShapeId
-            ? await loadProviderShapePreview(item.archIconPackId, item.archIconShapeId)
-            : null;
-        onAddDomainLibraryItem({
-            ...item,
-            ...(preview ? { previewUrl: preview.previewUrl } : {}),
-        });
-    }
-
     useEffect(() => {
-        if (!ROLLOUT_FLAGS.shapeLibraryV1 || !activeCloudTab || activeCloudTab.id === 'icons') {
+        if (!activeCloudTab || activeCloudTab.id === 'icons') {
             return;
         }
 
         const previewCandidates = visibleCloudItems.filter((item) => (
-            item.archIconPackId
-            && item.archIconShapeId
-            && !providerPreviewUrls[item.id]
+            item.archIconPackId && item.archIconShapeId && !providerPreviewUrls[item.id]
         ));
 
         if (previewCandidates.length === 0) {
@@ -369,35 +347,24 @@ export function AssetsView({
         }
 
         let cancelled = false;
-
         Promise.all(previewCandidates.map(async (item) => {
             const preview = await loadProviderShapePreview(item.archIconPackId as string, item.archIconShapeId as string);
             return preview ? [item.id, preview.previewUrl] as const : null;
         }))
             .then((entries) => {
-                if (cancelled) {
-                    return;
-                }
-                const loadedEntries = entries.filter((entry): entry is readonly [string, string] => entry !== null);
-                if (loadedEntries.length === 0) {
-                    return;
-                }
+                if (cancelled) return;
+                const loaded = entries.filter((e): e is readonly [string, string] => e !== null);
+                if (loaded.length === 0) return;
                 setProviderPreviewUrls((current) => {
                     const next = { ...current };
-                    loadedEntries.forEach(([itemId, previewUrl]) => {
-                        next[itemId] = previewUrl;
-                    });
+                    loaded.forEach(([id, url]) => { next[id] = url; });
                     return next;
                 });
             })
-            .catch(() => {
-                // Ignore per-tile preview failures and keep fallback icons.
-            });
+            .catch(() => { /* ignore per-tile preview failures */ });
 
-        return () => {
-            cancelled = true;
-        };
-    }, [activeCloudTab, providerPreviewUrls, visibleCloudItems]);
+        return () => { cancelled = true; };
+    }, [activeCloudTab, providerPreviewUrls, setProviderPreviewUrls, visibleCloudItems]);
 
     return (
         <div className="flex h-full flex-col bg-[radial-gradient(circle_at_top,_rgba(59,130,246,0.06),_transparent_45%)]">
@@ -412,37 +379,26 @@ export function AssetsView({
             <ViewHeader
                 title={t('toolbar.assets', 'Assets')}
                 icon={<AssetsIcon className="h-4 w-4 text-[var(--brand-primary)]" />}
+                description="Insert supporting building blocks and reusable visual elements."
                 onBack={handleBack}
+                onClose={onClose}
             />
 
             <div className="border-b border-slate-200/70 bg-white/85 px-4 py-3 backdrop-blur-sm">
-                <div className="relative">
-                    <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" />
-                    <Input
-                        value={query}
-                        onChange={(event) => setQuery(event.target.value)}
-                        onKeyDown={(event) => event.stopPropagation()}
-                        placeholder="Search assets, icons, AWS services, Azure diagrams..."
-                        className="w-full pl-10 focus:border-[var(--brand-primary-400)]"
-                    />
-                </div>
-
-                <div className="mt-3 overflow-x-auto pb-1 no-scrollbar">
-                    <div className="flex min-w-max flex-nowrap gap-1.5">
-                        {TAB_ORDER.map((tab) => (
-                            <button
-                                key={tab}
-                                onClick={() => setActiveTab(tab)}
-                                className={`${getTabButtonClass(activeTab === tab)} shrink-0 whitespace-nowrap px-3`}
-                            >
-                                {tab.toUpperCase()}
-                                <span className={`ml-2 text-[10px] ${activeTab === tab ? 'text-white/75' : 'text-slate-400'}`}>
-                                    {tabCounts[tab]}
-                                </span>
-                            </button>
-                        ))}
-                    </div>
-                </div>
+                <SearchField
+                    value={query}
+                    onChange={(event) => setQuery(event.target.value)}
+                    onKeyDown={(event) => event.stopPropagation()}
+                    placeholder="Search assets, icons, AWS services, Azure diagrams..."
+                />
+
+                <SegmentedTabs
+                    items={tabItems}
+                    value={activeTab}
+                    onChange={(value) => setActiveTab(value as AssetTab)}
+                    className="mt-3"
+                    listClassName="flex-nowrap"
+                />
             </div>
 
             <div className="flex-1 overflow-y-auto px-4 py-4 custom-scrollbar">
@@ -546,15 +502,15 @@ export function AssetsView({
                                                 onClose();
                                             }
                                         }}
-                                        className={`group flex aspect-square items-center justify-center rounded-[var(--radius-lg)] border bg-white p-3 shadow-sm transition-all hover:-translate-y-0.5 hover:border-[var(--brand-primary-200)] hover:bg-[var(--brand-primary-50)] hover:shadow-md ${
+                                        className={`group flex aspect-square items-center justify-center rounded-[var(--radius-lg)] border bg-white p-3 transition-colors hover:border-[var(--brand-primary-200)] hover:bg-[var(--brand-primary-50)] ${
                                             pendingSelectionIds.includes(item.id)
-                                                ? 'border-[var(--brand-primary)] bg-[var(--brand-primary-50)] shadow-md'
+                                                ? 'border-[var(--brand-primary)] bg-[var(--brand-primary-50)]'
                                                 : 'border-slate-200'
                                         }`}
                                     >
                                         <div className="flex h-14 w-14 items-center justify-center rounded-[var(--radius-md)] border border-slate-200 bg-slate-50 text-slate-600 transition-colors group-hover:border-[var(--brand-primary-200)] group-hover:bg-white group-hover:text-[var(--brand-primary)]">
                                             {providerPreviewUrls[item.id] ? (
-                                                <img src={providerPreviewUrls[item.id]} alt="" className="h-10 w-10 object-contain" loading="lazy" />
+                                                <img src={providerPreviewUrls[item.id]} alt={`${item.label} icon`} className="h-10 w-10 object-contain" loading="lazy" />
                                             ) : (
                                                 <NamedIcon
                                                     name={item.icon}
diff --git a/src/components/command-bar/DesignSystemEditor.tsx b/src/components/command-bar/DesignSystemEditor.tsx
index 64da9f8..36607b8 100644
--- a/src/components/command-bar/DesignSystemEditor.tsx
+++ b/src/components/command-bar/DesignSystemEditor.tsx
@@ -1,16 +1,18 @@
-import { useState, type ReactElement, type ReactNode } from 'react';
-import { IS_BEVELED } from '@/lib/brand';
+import { useState, type ReactElement } from 'react';
 import { useDesignSystemActions, useDesignSystemById } from '@/store/designSystemHooks';
-import { ArrowLeft, Palette, Type, Box, Activity } from 'lucide-react';
+import { ArrowLeft, Palette, Type, Figma } from 'lucide-react';
 import { Button } from '../ui/Button';
 import { DesignSystem } from '@/lib/types';
+import { FigmaImportPanel } from './FigmaImportPanel';
+import type { FigmaImportResult } from '@/services/figmaImport/figmaApiClient';
+import { SegmentedTabs } from '../ui/SegmentedTabs';
 
 interface DesignSystemEditorProps {
     systemId: string;
     onBack: () => void;
 }
 
-type EditorTab = 'colors' | 'typography' | 'nodes' | 'edges';
+type EditorTab = 'colors' | 'typography';
 type UpdateDesignSystem = (id: string, updates: Partial<DesignSystem>) => void;
 
 export function DesignSystemEditor({ systemId, onBack }: DesignSystemEditorProps): ReactElement {
@@ -32,7 +34,7 @@ export function DesignSystemEditor({ systemId, onBack }: DesignSystemEditorProps
         <div className="flex flex-col h-full animate-in slide-in-from-right-4 duration-200">
             {/* Header */}
             <div className="flex items-center gap-2 p-4 border-b border-slate-100 bg-slate-50/50">
-                <Button variant="ghost" size="icon" onClick={onBack} className="h-8 w-8 rounded-full">
+                <Button variant="ghost" size="icon" onClick={onBack} className="h-8 w-8 rounded-[var(--radius-sm)]">
                     <ArrowLeft className="w-4 h-4 text-slate-500" />
                 </Button>
                 <div className="flex-1">
@@ -46,30 +48,14 @@ export function DesignSystemEditor({ systemId, onBack }: DesignSystemEditorProps
             </div>
 
             {/* Editor Tabs/Nav */}
-            <div className="flex p-2 gap-1 bg-white border-b border-slate-100 overflow-x-auto">
-                <TabButton
-                    active={activeTab === 'colors'}
-                    onClick={() => setActiveTab('colors')}
-                    icon={<Palette className="w-3.5 h-3.5" />}
-                    label="Colors"
-                />
-                <TabButton
-                    active={activeTab === 'typography'}
-                    onClick={() => setActiveTab('typography')}
-                    icon={<Type className="w-3.5 h-3.5" />}
-                    label="Type"
-                />
-                <TabButton
-                    active={activeTab === 'nodes'}
-                    onClick={() => setActiveTab('nodes')}
-                    icon={<Box className="w-3.5 h-3.5" />}
-                    label="Nodes"
-                />
-                <TabButton
-                    active={activeTab === 'edges'}
-                    onClick={() => setActiveTab('edges')}
-                    icon={<Activity className="w-3.5 h-3.5" />}
-                    label="Edges"
+            <div className="border-b border-slate-100 bg-white p-2">
+                <SegmentedTabs
+                    items={[
+                        { id: 'colors', label: 'Colors', icon: <Palette className="w-3.5 h-3.5" /> },
+                        { id: 'typography', label: 'Type', icon: <Type className="w-3.5 h-3.5" /> },
+                    ]}
+                    value={activeTab}
+                    onChange={(value) => setActiveTab(value as EditorTab)}
                 />
             </div>
 
@@ -77,51 +63,58 @@ export function DesignSystemEditor({ systemId, onBack }: DesignSystemEditorProps
             <div className="flex-1 overflow-y-auto custom-scrollbar p-4 bg-slate-50/30">
                 {activeTab === 'colors' && <ColorEditor system={system} update={updateDesignSystem} />}
                 {activeTab === 'typography' && <TypographyEditor system={system} update={updateDesignSystem} />}
-                {/* Placeholders for now */}
-                {activeTab === 'nodes' && <div className="text-center text-slate-400 mt-10">Node styling coming in next step</div>}
-                {activeTab === 'edges' && <div className="text-center text-slate-400 mt-10">Edge styling coming in next step</div>}
             </div>
         </div>
     );
 }
 
 // UI Helpers
-interface TabButtonProps {
-    active: boolean;
-    onClick: () => void;
-    icon: ReactNode;
-    label: string;
-}
+// Sub-Editors (Basic Stub)
+const ColorEditor = ({ system, update }: { system: DesignSystem; update: UpdateDesignSystem }) => {
+    const [showFigmaPanel, setShowFigmaPanel] = useState(false);
+
+    const handleFigmaImport = (result: FigmaImportResult) => {
+        const firstColor = result.colors[0]?.hex;
+        const secondColor = result.colors[1]?.hex;
+        const thirdColor = result.colors[2]?.hex;
+        const updates: Partial<DesignSystem['colors']> = {};
+        if (firstColor) updates.primary = firstColor;
+        if (secondColor) updates.secondary = secondColor;
+        if (thirdColor) updates.accent = thirdColor;
+
+        const firstFont = result.fonts[0]?.fontFamily;
+        if (firstFont || Object.keys(updates).length > 0) {
+            update(system.id, {
+                ...(Object.keys(updates).length > 0 ? { colors: { ...system.colors, ...updates } } : {}),
+                ...(firstFont ? { typography: { ...system.typography, fontFamily: `${firstFont}, sans-serif` } } : {}),
+            });
+        }
+        setShowFigmaPanel(false);
+    };
 
-const TabButton = ({ active, onClick, icon, label }: TabButtonProps) => {
-    const isBeveled = IS_BEVELED;
     return (
-        <button
-            onClick={onClick}
-            className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-all active:scale-95
-                ${active
-                    ? `bg-[var(--brand-primary-50)] text-[var(--brand-primary)] ring-1 ring-[var(--brand-primary)]/20 ${isBeveled ? 'btn-beveled shadow-sm' : ''}`
-                    : 'text-slate-600 hover:bg-slate-50 hover:text-slate-900'
-                }`}
-        >
-            {icon}
-            {label}
-        </button>
+        <div className="space-y-4">
+            {showFigmaPanel ? (
+                <FigmaImportPanel onImport={handleFigmaImport} onClose={() => setShowFigmaPanel(false)} />
+            ) : (
+                <button
+                    onClick={() => setShowFigmaPanel(true)}
+                    className="w-full flex items-center gap-2 px-3 py-2 rounded-lg border border-dashed border-slate-300 text-slate-500 hover:border-[#F24E1E]/50 hover:text-[#F24E1E] hover:bg-[#F24E1E]/5 transition-all text-xs font-medium"
+                >
+                    <Figma className="w-3.5 h-3.5" />
+                    Import from Figma
+                </button>
+            )}
+            <h3 className="text-xs font-semibold text-slate-400 uppercase tracking-wider">Semantic Colors</h3>
+            <div className="grid grid-cols-1 gap-3">
+                <ColorInput label="Primary" value={system.colors.primary} onChange={(v) => update(system.id, { colors: { ...system.colors, primary: v } })} />
+                <ColorInput label="Background" value={system.colors.background} onChange={(v) => update(system.id, { colors: { ...system.colors, background: v } })} />
+                <ColorInput label="Surface" value={system.colors.surface} onChange={(v) => update(system.id, { colors: { ...system.colors, surface: v } })} />
+            </div>
+        </div>
     );
 };
 
-// Sub-Editors (Basic Stub)
-const ColorEditor = ({ system, update }: { system: DesignSystem; update: UpdateDesignSystem }) => (
-    <div className="space-y-4">
-        <h3 className="text-xs font-semibold text-slate-400 uppercase tracking-wider">Semantic Colors</h3>
-        <div className="grid grid-cols-1 gap-3">
-            <ColorInput label="Primary" value={system.colors.primary} onChange={(v) => update(system.id, { colors: { ...system.colors, primary: v } })} />
-            <ColorInput label="Background" value={system.colors.background} onChange={(v) => update(system.id, { colors: { ...system.colors, background: v } })} />
-            <ColorInput label="Surface" value={system.colors.surface} onChange={(v) => update(system.id, { colors: { ...system.colors, surface: v } })} />
-        </div>
-    </div>
-);
-
 const TypographyEditor = ({ system, update }: { system: DesignSystem; update: UpdateDesignSystem }) => (
     <div className="space-y-4">
         <h3 className="text-xs font-semibold text-slate-400 uppercase tracking-wider">Typography</h3>
diff --git a/src/components/command-bar/DesignSystemView.tsx b/src/components/command-bar/DesignSystemView.tsx
index c846ae8..08836a8 100644
--- a/src/components/command-bar/DesignSystemView.tsx
+++ b/src/components/command-bar/DesignSystemView.tsx
@@ -1,18 +1,21 @@
-import React, { useMemo, useState } from 'react';
-import { Palette, Check, Plus, ArrowLeft, MoreHorizontal, Copy, Trash2, Edit2, Download } from 'lucide-react';
+import React, { useState } from 'react';
+import { Palette, Check, Plus, ArrowLeft, Copy, Trash2, Edit2, Download } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
+import { createLogger } from '@/lib/logger';
 import { Button } from '../ui/Button';
 import { DesignSystemEditor } from './DesignSystemEditor';
 import { createId } from '@/lib/id';
 import { IS_BEVELED } from '@/lib/brand';
 import { useDesignSystemActions, useDesignSystemsCatalog } from '@/store/designSystemHooks';
 
+const logger = createLogger({ scope: 'DesignSystemView' });
+
 interface DesignSystemViewProps {
     onClose: () => void;
     handleBack: () => void;
 }
 
-export const DesignSystemView: React.FC<DesignSystemViewProps> = ({ onClose, handleBack }) => {
+export const DesignSystemView: React.FC<DesignSystemViewProps> = ({ onClose: _onClose, handleBack }) => {
     const { t } = useTranslation();
     const { designSystems, activeDesignSystemId } = useDesignSystemsCatalog();
     const { setActiveDesignSystem, addDesignSystem, duplicateDesignSystem, deleteDesignSystem } = useDesignSystemActions();
@@ -47,7 +50,7 @@ export const DesignSystemView: React.FC<DesignSystemViewProps> = ({ onClose, han
     return (
         <div className="flex flex-col h-full animate-in slide-in-from-right-4 duration-200">
             <div className="flex items-center gap-2 p-4 border-b border-slate-100 bg-slate-50/50">
-                <Button variant="ghost" size="icon" onClick={handleBack} className="h-8 w-8 rounded-full">
+                <Button variant="ghost" size="icon" onClick={handleBack} className="h-8 w-8 rounded-[var(--radius-sm)]">
                     <ArrowLeft className="w-4 h-4 text-slate-500" />
                 </Button>
                 <div className="flex items-center gap-2 text-sm font-semibold text-slate-700">
@@ -149,8 +152,8 @@ export const DesignSystemView: React.FC<DesignSystemViewProps> = ({ onClose, han
                                                 if (ds.id && ds.colors && ds.components) {
                                                     addDesignSystem({ ...ds, id: createId('imported'), name: `${ds.name} (Imported)`, isDefault: false });
                                                 }
-                                            } catch (err) {
-                                                console.error('Invalid Design System JSON');
+                                            } catch {
+                                                logger.error('Invalid design system JSON.');
                                             }
                                         };
                                         reader.readAsText(file);
diff --git a/src/components/command-bar/FigmaImportPanel.tsx b/src/components/command-bar/FigmaImportPanel.tsx
new file mode 100644
index 0000000..1b16803
--- /dev/null
+++ b/src/components/command-bar/FigmaImportPanel.tsx
@@ -0,0 +1,182 @@
+import { useState, type ReactElement } from 'react';
+import { Figma, X, Check, AlertCircle, Loader2 } from 'lucide-react';
+import { Button } from '../ui/Button';
+import { parseFigmaFileKey, fetchFigmaStyles, type FigmaImportResult } from '@/services/figmaImport/figmaApiClient';
+
+interface FigmaImportPanelProps {
+    onImport: (result: FigmaImportResult) => void;
+    onClose: () => void;
+}
+
+type ImportState = 'idle' | 'loading' | 'success' | 'error';
+
+export function FigmaImportPanel({ onImport, onClose }: FigmaImportPanelProps): ReactElement {
+    const [url, setUrl] = useState('');
+    const [token, setToken] = useState('');
+    const [state, setState] = useState<ImportState>('idle');
+    const [error, setError] = useState('');
+    const [preview, setPreview] = useState<FigmaImportResult | null>(null);
+
+    const handleFetch = async () => {
+        const fileKey = parseFigmaFileKey(url);
+        if (!fileKey) {
+            setError('Invalid Figma URL. Use a figma.com/file/… or figma.com/design/… link.');
+            setState('error');
+            return;
+        }
+        if (!token.trim()) {
+            setError('Personal access token is required.');
+            setState('error');
+            return;
+        }
+        setState('loading');
+        setError('');
+        try {
+            const result = await fetchFigmaStyles(fileKey, token.trim());
+            setPreview(result);
+            setState('success');
+        } catch (err) {
+            setError(err instanceof Error ? err.message : 'Unknown error');
+            setState('error');
+        }
+    };
+
+    const handleApply = () => {
+        if (preview) onImport(preview);
+    };
+
+    return (
+        <div className="flex flex-col gap-4 p-4 bg-white rounded-xl border border-slate-200 shadow-sm">
+            <div className="flex items-center justify-between">
+                <div className="flex items-center gap-2">
+                    <Figma className="w-4 h-4 text-[#F24E1E]" />
+                    <span className="text-sm font-semibold text-slate-700">Import from Figma</span>
+                </div>
+                <button onClick={onClose} className="text-slate-400 hover:text-slate-600 transition-colors">
+                    <X className="w-4 h-4" />
+                </button>
+            </div>
+
+            <div className="space-y-2">
+                <label className="text-xs font-medium text-slate-600">Figma file URL</label>
+                <input
+                    type="text"
+                    placeholder="https://www.figma.com/design/…"
+                    value={url}
+                    onChange={(e) => setUrl(e.target.value)}
+                    className="w-full text-sm border border-slate-200 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500/30 focus:border-indigo-400 placeholder-slate-300"
+                />
+            </div>
+
+            <div className="space-y-2">
+                <label className="text-xs font-medium text-slate-600">
+                    Personal access token{' '}
+                    <a
+                        href="https://www.figma.com/developers/api#access-tokens"
+                        target="_blank"
+                        rel="noreferrer"
+                        className="text-indigo-500 hover:underline"
+                    >
+                        (how to get one)
+                    </a>
+                </label>
+                <input
+                    type="password"
+                    placeholder="figd_…"
+                    value={token}
+                    onChange={(e) => setToken(e.target.value)}
+                    className="w-full text-sm border border-slate-200 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500/30 focus:border-indigo-400 placeholder-slate-300"
+                />
+                <p className="text-xs text-slate-400">Token is used only in your browser — never sent to our servers.</p>
+            </div>
+
+            {state === 'error' && (
+                <div className="flex items-start gap-2 bg-red-50 border border-red-200 rounded-lg px-3 py-2">
+                    <AlertCircle className="w-4 h-4 text-red-500 mt-0.5 shrink-0" />
+                    <p className="text-xs text-red-700">{error}</p>
+                </div>
+            )}
+
+            {state === 'success' && preview && (
+                <div className="space-y-3">
+                    <div className="flex items-center gap-1.5 text-xs text-emerald-600 font-medium">
+                        <Check className="w-3.5 h-3.5" />
+                        Found {preview.colors.length} colors and {preview.fonts.length} text styles from &quot;{preview.name}&quot;
+                    </div>
+
+                    {preview.colors.length > 0 && (
+                        <div>
+                            <p className="text-xs font-medium text-slate-500 mb-1.5">Colors</p>
+                            <div className="flex flex-wrap gap-1.5">
+                                {preview.colors.slice(0, 12).map((c) => (
+                                    <div
+                                        key={c.name}
+                                        className="flex items-center gap-1.5 bg-slate-50 border border-slate-100 rounded-md px-2 py-1"
+                                        title={c.name}
+                                    >
+                                        <div
+                                            className="w-3 h-3 rounded-full border border-slate-200 shrink-0"
+                                            style={{ background: c.hex }}
+                                        />
+                                        <span className="text-xs text-slate-600 font-mono">{c.hex}</span>
+                                    </div>
+                                ))}
+                                {preview.colors.length > 12 && (
+                                    <span className="text-xs text-slate-400 self-center">+{preview.colors.length - 12} more</span>
+                                )}
+                            </div>
+                        </div>
+                    )}
+
+                    {preview.fonts.length > 0 && (
+                        <div>
+                            <p className="text-xs font-medium text-slate-500 mb-1.5">Fonts</p>
+                            <div className="flex flex-wrap gap-1.5">
+                                {[...new Set(preview.fonts.map((f) => f.fontFamily))].slice(0, 4).map((family) => (
+                                    <span
+                                        key={family}
+                                        className="text-xs bg-slate-50 border border-slate-100 rounded-md px-2 py-1 text-slate-600"
+                                    >
+                                        {family}
+                                    </span>
+                                ))}
+                            </div>
+                        </div>
+                    )}
+                </div>
+            )}
+
+            <div className="flex gap-2">
+                {state !== 'success' ? (
+                    <Button
+                        onClick={handleFetch}
+                        disabled={state === 'loading' || !url.trim() || !token.trim()}
+                        className="flex-1 text-sm"
+                    >
+                        {state === 'loading' ? (
+                            <span className="flex items-center gap-1.5">
+                                <Loader2 className="w-3.5 h-3.5 animate-spin" />
+                                Fetching styles…
+                            </span>
+                        ) : (
+                            'Fetch styles'
+                        )}
+                    </Button>
+                ) : (
+                    <>
+                        <Button
+                            variant="ghost"
+                            onClick={() => { setState('idle'); setPreview(null); }}
+                            className="text-sm"
+                        >
+                            Back
+                        </Button>
+                        <Button onClick={handleApply} className="flex-1 text-sm">
+                            Apply to design system
+                        </Button>
+                    </>
+                )}
+            </div>
+        </div>
+    );
+}
diff --git a/src/components/command-bar/ImportView.tsx b/src/components/command-bar/ImportView.tsx
new file mode 100644
index 0000000..443642b
--- /dev/null
+++ b/src/components/command-bar/ImportView.tsx
@@ -0,0 +1,198 @@
+import React, { useRef, useState } from 'react';
+import { Cloud, Code2, Database, FileCode, Loader2, Network, WandSparkles } from 'lucide-react';
+import { Button } from '@/components/ui/Button';
+import { Select, type SelectOption } from '@/components/ui/Select';
+import {
+    LANGUAGE_LABELS,
+    FILE_EXTENSION_TO_LANGUAGE,
+    type SupportedLanguage,
+} from '@/hooks/ai-generation/codeToArchitecture';
+import { TERRAFORM_FORMAT_LABELS, type TerraformInputFormat } from '@/hooks/ai-generation/terraformToCloud';
+import type { CommandBarProps } from './types';
+import { ViewHeader } from './ViewHeader';
+
+type ImportType = 'code' | 'sql' | 'terraform' | 'openapi';
+
+interface ImportOption {
+    id: ImportType;
+    label: string;
+    description: string;
+    icon: typeof Code2;
+    iconColor: string;
+    available: boolean;
+}
+
+const IMPORT_PLACEHOLDERS: Record<ImportType, string> = {
+    code: 'Paste your source code here...',
+    sql: 'Paste CREATE TABLE statements here...',
+    terraform: 'Paste Terraform HCL, Kubernetes YAML, or Docker Compose here...',
+    openapi: 'Paste your OpenAPI / Swagger YAML or JSON here...',
+};
+
+const IMPORT_GENERATE_LABELS: Record<ImportType, string> = {
+    code: 'Generate architecture diagram',
+    sql: 'Generate ERD',
+    terraform: 'Generate cloud diagram',
+    openapi: 'Generate sequence diagram',
+};
+
+interface ImportViewProps {
+    onClose: () => void;
+    handleBack: () => void;
+    onCodeAnalysis?: CommandBarProps['onCodeAnalysis'];
+    onSqlAnalysis?: CommandBarProps['onSqlAnalysis'];
+    onTerraformAnalysis?: CommandBarProps['onTerraformAnalysis'];
+    onOpenApiAnalysis?: CommandBarProps['onOpenApiAnalysis'];
+}
+
+const LANGUAGE_OPTIONS: SelectOption[] = Object.entries(LANGUAGE_LABELS).map(([value, label]) => ({ value, label }));
+const TERRAFORM_FORMAT_OPTIONS: SelectOption[] = Object.entries(TERRAFORM_FORMAT_LABELS).map(([value, label]) => ({ value, label }));
+
+export function ImportView({ onClose, handleBack, onCodeAnalysis, onSqlAnalysis, onTerraformAnalysis, onOpenApiAnalysis }: ImportViewProps): React.ReactElement {
+    const [importType, setImportType] = useState<ImportType>('sql');
+    const [input, setInput] = useState('');
+    const [language, setLanguage] = useState<SupportedLanguage>('typescript');
+    const [terraformFormat, setTerraformFormat] = useState<TerraformInputFormat>('terraform');
+    const [isGenerating, setIsGenerating] = useState(false);
+    const codeFileInputRef = useRef<HTMLInputElement | null>(null);
+
+    const importOptions: ImportOption[] = ([
+        { id: 'sql' as const, label: 'SQL DDL → ERD', description: 'Turn CREATE TABLE statements into an entity-relationship diagram', icon: Database, iconColor: 'text-amber-500', available: Boolean(onSqlAnalysis) },
+        { id: 'terraform' as const, label: 'Terraform / K8s → Cloud', description: 'Visualize infrastructure from HCL, YAML, or Compose files', icon: Cloud, iconColor: 'text-sky-500', available: Boolean(onTerraformAnalysis) },
+        { id: 'openapi' as const, label: 'OpenAPI → Sequence', description: 'Generate a sequence diagram from an OpenAPI / Swagger spec', icon: Network, iconColor: 'text-indigo-500', available: Boolean(onOpenApiAnalysis) },
+        { id: 'code' as const, label: 'Source code → Architecture', description: 'Analyze source files and build an architecture draft', icon: Code2, iconColor: 'text-emerald-500', available: Boolean(onCodeAnalysis) },
+    ] satisfies ImportOption[]).filter((o) => o.available);
+
+    const handleCodeFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
+        const file = event.target.files?.[0];
+        if (!file) return;
+        const ext = file.name.split('.').pop()?.toLowerCase() ?? '';
+        const detected = FILE_EXTENSION_TO_LANGUAGE[ext];
+        if (detected) setLanguage(detected);
+        const reader = new FileReader();
+        reader.onload = (e) => setInput(e.target?.result as string ?? '');
+        reader.readAsText(file);
+        event.target.value = '';
+    };
+
+    const handleGenerate = async () => {
+        if (!input.trim()) return;
+        setIsGenerating(true);
+        try {
+            if (importType === 'code' && onCodeAnalysis) await onCodeAnalysis(input, language);
+            else if (importType === 'sql' && onSqlAnalysis) await onSqlAnalysis(input);
+            else if (importType === 'terraform' && onTerraformAnalysis) await onTerraformAnalysis(input, terraformFormat);
+            else if (importType === 'openapi' && onOpenApiAnalysis) await onOpenApiAnalysis(input);
+            onClose();
+        } finally {
+            setIsGenerating(false);
+        }
+    };
+
+    const activeOption = importOptions.find((o) => o.id === importType) ?? importOptions[0];
+
+    if (importOptions.length === 0) {
+        return (
+            <div className="flex flex-1 flex-col items-center justify-center gap-3 p-8 text-center">
+                <p className="text-sm font-medium text-slate-700">No import options available</p>
+                <p className="text-xs text-slate-400">Import handlers are not configured for this diagram.</p>
+                <Button variant="secondary" size="sm" onClick={handleBack}>Go back</Button>
+            </div>
+        );
+    }
+
+    return (
+        <>
+            <ViewHeader
+                title="Import from data"
+                icon={<WandSparkles className="h-4 w-4 text-[var(--brand-primary)]" />}
+                description="Use structured input to generate a first draft, then refine it on the canvas."
+                onBack={handleBack}
+                onClose={onClose}
+            />
+
+            <div className="flex flex-1 min-h-0 gap-0">
+                {/* Left: type picker */}
+                <div className="flex w-52 shrink-0 flex-col gap-1 border-r border-slate-100 p-3">
+                    {importOptions.map(({ id, label, icon: Icon, iconColor }) => (
+                        <button
+                            key={id}
+                            type="button"
+                            onClick={() => { setImportType(id); setInput(''); }}
+                            className={`flex items-center gap-2.5 rounded-[var(--radius-md)] px-3 py-2.5 text-left text-sm font-medium transition-colors ${
+                                importType === id
+                                    ? 'bg-[var(--brand-primary-50)] text-[var(--brand-primary)]'
+                                    : 'text-slate-600 hover:bg-slate-50 hover:text-slate-900'
+                            }`}
+                        >
+                            <Icon className={`h-4 w-4 shrink-0 ${importType === id ? 'text-[var(--brand-primary)]' : iconColor}`} />
+                            <span className="leading-snug">{label}</span>
+                        </button>
+                    ))}
+                </div>
+
+                {/* Right: input area */}
+                <div className="flex flex-1 flex-col gap-3 overflow-y-auto p-4 custom-scrollbar">
+                    {activeOption && (
+                        <p className="text-[11px] leading-5 text-slate-500">{activeOption.description}</p>
+                    )}
+
+                    {/* Controls row */}
+                    {importType === 'code' && (
+                        <div className="flex items-center gap-2">
+                            <Select
+                                value={language}
+                                onChange={(v) => setLanguage(v as SupportedLanguage)}
+                                options={LANGUAGE_OPTIONS}
+                                className="flex-1"
+                            />
+                            <input
+                                type="file"
+                                accept=".ts,.tsx,.js,.jsx,.mjs,.py,.go,.java,.rb,.cs,.cpp,.cc,.cxx,.rs"
+                                className="hidden"
+                                ref={codeFileInputRef}
+                                onChange={handleCodeFileSelect}
+                            />
+                            <Button
+                                variant="secondary"
+                                size="sm"
+                                icon={<FileCode className="h-3.5 w-3.5" />}
+                                onClick={() => codeFileInputRef.current?.click()}
+                                title="Upload source file"
+                            >
+                                Upload file
+                            </Button>
+                        </div>
+                    )}
+
+                    {importType === 'terraform' && (
+                        <Select
+                            value={terraformFormat}
+                            onChange={(v) => setTerraformFormat(v as TerraformInputFormat)}
+                            options={TERRAFORM_FORMAT_OPTIONS}
+                        />
+                    )}
+
+                    <textarea
+                        value={input}
+                        onChange={(e) => setInput(e.target.value)}
+                        placeholder={IMPORT_PLACEHOLDERS[importType]}
+                        className="min-h-[200px] flex-1 resize-none rounded-[var(--radius-md)] border border-slate-200 bg-white px-3 py-3 font-mono text-xs text-slate-700 outline-none placeholder-slate-300 focus:border-[var(--brand-primary)] focus:ring-1 focus:ring-[var(--brand-primary-100)] custom-scrollbar"
+                    />
+
+                    <Button
+                        variant="primary"
+                        size="md"
+                        className="w-full"
+                        icon={isGenerating ? <Loader2 className="h-4 w-4 animate-spin" /> : <WandSparkles className="h-4 w-4" />}
+                        disabled={!input.trim() || isGenerating}
+                        isLoading={false}
+                        onClick={() => void handleGenerate()}
+                    >
+                        {isGenerating ? 'Generating...' : (activeOption ? IMPORT_GENERATE_LABELS[activeOption.id] : 'Generate')}
+                    </Button>
+                </div>
+            </div>
+        </>
+    );
+}
diff --git a/src/components/command-bar/LayoutView.tsx b/src/components/command-bar/LayoutView.tsx
index cc44149..f16b773 100644
--- a/src/components/command-bar/LayoutView.tsx
+++ b/src/components/command-bar/LayoutView.tsx
@@ -125,7 +125,13 @@ export function LayoutView({
 
     return (
         <div className="flex flex-col h-full">
-            <ViewHeader title={t('commandBar.layout.title')} icon={<Zap className="w-4 h-4 text-[var(--brand-primary)]" />} onBack={handleBack} />
+            <ViewHeader
+                title={t('commandBar.layout.title')}
+                icon={<Zap className="w-4 h-4 text-[var(--brand-primary)]" />}
+                description="Use auto layout as a refinement step after you sketch the structure."
+                onBack={handleBack}
+                onClose={onClose}
+            />
 
             <div className="flex-1 overflow-y-auto p-4">
                 <div className="space-y-3 rounded-[var(--radius-md)] border border-[var(--color-brand-border)] bg-[var(--brand-background)] p-3">
diff --git a/src/components/command-bar/RootView.test.tsx b/src/components/command-bar/RootView.test.tsx
new file mode 100644
index 0000000..16d9d2d
--- /dev/null
+++ b/src/components/command-bar/RootView.test.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { RootView } from './RootView';
+import type { CommandItem } from './types';
+
+const commandItems: CommandItem[] = [
+  {
+    id: 'flowpilot',
+    label: 'Open Flowpilot',
+    tier: 'core',
+    type: 'action',
+    icon: <span>AI</span>,
+    description: 'Generate and refine diagrams',
+    action: vi.fn(),
+  },
+  {
+    id: 'dsl',
+    label: 'Edit Flow DSL',
+    tier: 'advanced',
+    type: 'action',
+    icon: <span>DSL</span>,
+    description: 'Direct editing surface',
+    action: vi.fn(),
+  },
+];
+
+describe('RootView', () => {
+  it('renders non-search results without extra product taxonomy copy', () => {
+    render(
+      <RootView
+        commands={commandItems}
+        searchQuery=""
+        setSearchQuery={vi.fn()}
+        selectedIndex={0}
+        setSelectedIndex={vi.fn()}
+        onClose={vi.fn()}
+        setView={vi.fn()}
+        inputRef={React.createRef<HTMLInputElement>()}
+      />
+    );
+
+    expect(screen.getByText('Open Flowpilot')).toBeTruthy();
+    expect(screen.getByText('Edit Flow DSL')).toBeTruthy();
+  });
+});
diff --git a/src/components/command-bar/RootView.tsx b/src/components/command-bar/RootView.tsx
index 1fe609d..47554b7 100644
--- a/src/components/command-bar/RootView.tsx
+++ b/src/components/command-bar/RootView.tsx
@@ -1,7 +1,9 @@
 import React, { useMemo, useEffect } from 'react';
-import { Search, X, ChevronRight } from 'lucide-react';
+import { X, ChevronRight } from 'lucide-react';
+import { FLOWPILOT_NAME } from '@/lib/brand';
 import { Button } from '../ui/Button';
 import { CommandItem, CommandView } from './types';
+import { SearchField } from '../ui/SearchField';
 
 interface RootViewProps {
     commands: CommandItem[];
@@ -48,7 +50,7 @@ const CommandItemRow = ({ item, isSelected, onClick }: { item: CommandItem, isSe
         </div>
 
         <div className="flex-1 flex flex-col justify-center">
-            <span className="text-sm font-semibold leading-none mb-1">{item.label}</span>
+            <span className="mb-1 text-sm font-semibold leading-none">{item.label}</span>
             {item.description && (
                 <span className={`text-[11px] ${isSelected ? 'text-[var(--brand-primary-500)]' : 'text-slate-400'}`}>
                     {item.description}
@@ -133,9 +135,8 @@ export const RootView = ({
 
     return (
         <>
-            <div className="flex items-center gap-3 px-4 py-3 border-b border-slate-200/50">
-                <Search className="w-5 h-5 text-slate-400" />
-                <input
+            <div className="border-b border-slate-200/50 px-4 py-3">
+                <SearchField
                     ref={inputRef}
                     value={searchQuery}
                     onChange={(e) => setSearchQuery(e.target.value)}
@@ -144,19 +145,18 @@ export const RootView = ({
                         e.stopPropagation();
                     }}
                     aria-label="Search command bar actions"
-                    placeholder="Search actions, FlowPilot, code, or canvas tools..."
-                    className="flex-1 bg-transparent border-none outline-none text-slate-700 placeholder:text-slate-400 text-base focus:ring-0"
+                    placeholder={`Search actions, ${FLOWPILOT_NAME}, code, or canvas tools...`}
                     autoFocus
+                    trailingContent={(
+                        <Button
+                            onClick={onClose}
+                            variant="ghost"
+                            size="icon"
+                            className="rounded-[var(--radius-sm)] h-8 w-8"
+                            icon={<X className="w-4 h-4" />}
+                        />
+                    )}
                 />
-                <div className="flex items-center gap-2">
-                    <Button
-                        onClick={onClose}
-                        variant="ghost"
-                        size="icon"
-                        className="rounded-md h-6 w-6"
-                        icon={<X className="w-4 h-4" />}
-                    />
-                </div>
             </div>
 
             <div
@@ -164,17 +164,30 @@ export const RootView = ({
                 aria-label={searchQuery ? 'Command search results' : 'Command quick actions'}
                 className="flex-1 overflow-y-auto scrollbar-thin scrollbar-thumb-slate-200 scrollbar-track-transparent py-2"
             >
-                <div className="px-4 py-1.5 text-xs font-semibold text-slate-400 uppercase tracking-wider">
-                    {searchQuery ? 'Results' : 'Quick Actions'}
-                </div>
-                {filteredCommands.map((item, idx) => (
-                    <CommandItemRow
-                        key={item.id}
-                        item={item}
-                        isSelected={selectedIndex === idx}
-                        onClick={() => runCommandItem(item, setView, onClose)}
-                    />
-                ))}
+                {searchQuery ? (
+                    <>
+                        <div className="px-4 py-1.5 text-xs font-semibold text-slate-400 uppercase tracking-wider">
+                            Results
+                        </div>
+                        {filteredCommands.map((item, idx) => (
+                            <CommandItemRow
+                                key={item.id}
+                                item={item}
+                                isSelected={selectedIndex === idx}
+                                onClick={() => runCommandItem(item, setView, onClose)}
+                            />
+                        ))}
+                    </>
+                ) : (
+                    filteredCommands.map((item, idx) => (
+                        <CommandItemRow
+                            key={item.id}
+                            item={item}
+                            isSelected={selectedIndex === idx}
+                            onClick={() => runCommandItem(item, setView, onClose)}
+                        />
+                    ))
+                )}
                 {filteredCommands.length === 0 && searchQuery && (
                     <div className="px-4 py-3 text-center text-sm text-slate-500">
                         No matching commands for &quot;{searchQuery}&quot;
diff --git a/src/components/command-bar/SearchView.tsx b/src/components/command-bar/SearchView.tsx
index 408854c..ab3257e 100644
--- a/src/components/command-bar/SearchView.tsx
+++ b/src/components/command-bar/SearchView.tsx
@@ -4,12 +4,15 @@ import type { FlowNode } from '@/lib/types';
 import { Search, Filter } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
-import { Input } from '../ui/Input';
+import { SearchField } from '../ui/SearchField';
+import { SegmentedTabs } from '../ui/SegmentedTabs';
+import { Select } from '../ui/Select';
 import { ViewHeader } from './ViewHeader';
 import { useFlowStore } from '../../store';
 import { useTabActions, useTabsState } from '@/store/tabHooks';
 import { EMPTY_QUERY, matchesNodeQuery, type QueryState } from './searchQuery';
 import { readLocalStorageJson, writeLocalStorageJson } from '@/services/storage/uiLocalStorage';
+import { EDITOR_FIELD_COMPACT_CLASS } from '../ui/editorFieldStyles';
 
 interface QueryPreset {
     id: string;
@@ -86,6 +89,14 @@ export const SearchView = ({
         () => Array.from(new Set(nodes.map((node) => node.data?.color).filter(Boolean))).sort(),
         [nodes]
     );
+    const scopeItems = useMemo(() => ([
+        { id: 'current', label: 'Current page' },
+        { id: 'all', label: 'All pages' },
+    ]), []);
+    const nodeTypeOptions = useMemo(() => [{ value: '', label: 'Any type' }, ...uniqueNodeTypes.map((item) => ({ value: item, label: item }))], [uniqueNodeTypes]);
+    const shapeOptions = useMemo(() => [{ value: '', label: 'Any shape' }, ...uniqueShapes.map((item) => ({ value: String(item), label: String(item) }))], [uniqueShapes]);
+    const colorOptions = useMemo(() => [{ value: '', label: 'Any color' }, ...uniqueColors.map((item) => ({ value: String(item), label: String(item) }))], [uniqueColors]);
+    const presetOptions = useMemo(() => [{ value: '', label: 'Load preset...' }, ...queryPresets.map((preset) => ({ value: preset.id, label: preset.name }))], [queryPresets]);
 
     const handleSelectNode = (node: FlowNode, tabId: string) => {
         if (tabId !== activeTabId) {
@@ -151,80 +162,69 @@ export const SearchView = ({
 
     return (
         <div className="flex flex-col h-full">
-            <ViewHeader title={t('commandBar.search.title')} icon={<Search className="w-4 h-4 text-[var(--brand-primary)]" />} onBack={handleBack} />
+            <ViewHeader
+                title={t('commandBar.search.title')}
+                icon={<Search className="w-4 h-4 text-[var(--brand-primary)]" />}
+                description="Find nodes quickly across the current page or the whole workspace."
+                onBack={handleBack}
+                onClose={onClose}
+            />
 
             <div className="px-4 py-2 border-b border-slate-100">
-                <Input
+                <SearchField
                     value={query.text}
                     onChange={e => setQuery((current) => ({ ...current, text: e.target.value }))}
                     onKeyDown={(e) => e.stopPropagation()}
                     placeholder={t('commandBar.search.placeholder')}
-                    className="w-full focus:border-[var(--brand-primary-400)]"
                     autoFocus
                 />
                 <div className="mt-3 rounded-[var(--radius-md)] border border-slate-200 bg-slate-50 p-3">
-                    <div className="mb-2 grid grid-cols-2 gap-2">
-                        <select
-                            value={scope}
-                            onChange={(event) => setScope(event.target.value as 'current' | 'all')}
-                            className="h-8 rounded-[var(--brand-radius)] border border-slate-300 bg-white px-2 text-xs"
-                        >
-                            <option value="current">Current page</option>
-                            <option value="all">All pages</option>
-                        </select>
-                    </div>
+                    <SegmentedTabs
+                        items={scopeItems}
+                        value={scope}
+                        onChange={(value) => setScope(value as 'current' | 'all')}
+                        size="sm"
+                    />
                     <div className="mb-2 flex items-center gap-2 text-xs font-semibold uppercase tracking-wide text-slate-500">
                         <Filter className="h-3.5 w-3.5" />
                         Query Selection
                     </div>
                     <div className="grid grid-cols-2 gap-2">
-                        <select
+                        <Select
                             value={query.nodeType}
-                            onChange={(event) => setQuery((current) => ({ ...current, nodeType: event.target.value }))}
-                            className="h-9 rounded-[var(--brand-radius)] border border-slate-300 bg-white px-2 text-xs"
-                        >
-                            <option value="">Any type</option>
-                            {uniqueNodeTypes.map((item) => (
-                                <option key={item} value={item}>{item}</option>
-                            ))}
-                        </select>
-                        <select
+                            onChange={(value) => setQuery((current) => ({ ...current, nodeType: value }))}
+                            options={nodeTypeOptions}
+                            placeholder="Any type"
+                        />
+                        <Select
                             value={query.shape}
-                            onChange={(event) => setQuery((current) => ({ ...current, shape: event.target.value }))}
-                            className="h-9 rounded-[var(--brand-radius)] border border-slate-300 bg-white px-2 text-xs"
-                        >
-                            <option value="">Any shape</option>
-                            {uniqueShapes.map((item) => (
-                                <option key={String(item)} value={String(item)}>{String(item)}</option>
-                            ))}
-                        </select>
-                        <select
+                            onChange={(value) => setQuery((current) => ({ ...current, shape: value }))}
+                            options={shapeOptions}
+                            placeholder="Any shape"
+                        />
+                        <Select
                             value={query.color}
-                            onChange={(event) => setQuery((current) => ({ ...current, color: event.target.value }))}
-                            className="h-9 rounded-[var(--brand-radius)] border border-slate-300 bg-white px-2 text-xs"
-                        >
-                            <option value="">Any color</option>
-                            {uniqueColors.map((item) => (
-                                <option key={String(item)} value={String(item)}>{String(item)}</option>
-                            ))}
-                        </select>
+                            onChange={(value) => setQuery((current) => ({ ...current, color: value }))}
+                            options={colorOptions}
+                            placeholder="Any color"
+                        />
                         <input
                             value={query.labelContains}
                             onChange={(event) => setQuery((current) => ({ ...current, labelContains: event.target.value }))}
                             placeholder="Label contains..."
-                            className="h-9 rounded-[var(--brand-radius)] border border-slate-300 bg-white px-2 text-xs"
+                            className={`${EDITOR_FIELD_COMPACT_CLASS} px-3`}
                         />
                         <input
                             value={query.metadataKey}
                             onChange={(event) => setQuery((current) => ({ ...current, metadataKey: event.target.value }))}
                             placeholder="Metadata key"
-                            className="h-9 rounded-[var(--brand-radius)] border border-slate-300 bg-white px-2 text-xs"
+                            className={`${EDITOR_FIELD_COMPACT_CLASS} px-3`}
                         />
                         <input
                             value={query.metadataValue}
                             onChange={(event) => setQuery((current) => ({ ...current, metadataValue: event.target.value }))}
                             placeholder="Metadata value"
-                            className="h-9 rounded-[var(--brand-radius)] border border-slate-300 bg-white px-2 text-xs"
+                            className={`${EDITOR_FIELD_COMPACT_CLASS} px-3`}
                         />
                     </div>
                     <div className="mt-2 flex items-center gap-2">
@@ -246,7 +246,7 @@ export const SearchView = ({
                             value={presetName}
                             onChange={(event) => setPresetName(event.target.value)}
                             placeholder="Preset name"
-                            className="h-8 rounded-[var(--brand-radius)] border border-slate-300 bg-white px-2 text-xs"
+                            className={EDITOR_FIELD_COMPACT_CLASS}
                         />
                         <button
                             onClick={saveQueryPreset}
@@ -261,16 +261,13 @@ export const SearchView = ({
                             Delete
                         </button>
                     </div>
-                    <select
+                    <Select
                         value={selectedPresetId}
-                        onChange={(event) => loadPreset(event.target.value)}
-                        className="mt-2 h-8 w-full rounded-[var(--brand-radius)] border border-slate-300 bg-white px-2 text-xs"
-                    >
-                        <option value="">Load preset...</option>
-                        {queryPresets.map((preset) => (
-                            <option key={preset.id} value={preset.id}>{preset.name}</option>
-                        ))}
-                    </select>
+                        onChange={loadPreset}
+                        options={presetOptions}
+                        placeholder="Load preset..."
+                        className="mt-2"
+                    />
                 </div>
                 <div className="mt-2 flex items-center justify-between text-xs text-slate-500">
                     <span>
diff --git a/src/components/command-bar/TemplatesView.tsx b/src/components/command-bar/TemplatesView.tsx
index fdc35a0..ac71a61 100644
--- a/src/components/command-bar/TemplatesView.tsx
+++ b/src/components/command-bar/TemplatesView.tsx
@@ -1,7 +1,8 @@
 import React, { useState, useMemo } from 'react';
-import { Layout, Search } from 'lucide-react';
+import { Layout } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
-import { Input } from '../ui/Input';
+import { SearchField } from '../ui/SearchField';
+import { SegmentedTabs } from '../ui/SegmentedTabs';
 import { ViewHeader } from './ViewHeader';
 import { getFlowTemplates, type FlowTemplate } from '../../services/templates';
 
@@ -42,61 +43,41 @@ export const TemplatesView = ({
                 || template.tags.some((tag) => tag.toLowerCase().includes(normalizedSearch));
         });
     }, [activeCategory, tSearch, templates]);
+    const categoryItems = useMemo(() => ([
+        { id: 'all', label: 'ALL', count: templates.length },
+        ...categories.map((category) => ({
+            id: category,
+            label: category.toUpperCase(),
+            count: templates.filter((template) => template.category === category).length,
+        })),
+    ]), [categories, templates]);
 
     return (
         <div className="flex h-full flex-col bg-[radial-gradient(circle_at_top,_rgba(249,115,22,0.08),_transparent_48%)]">
-            <ViewHeader title={t('commandBar.templates.title')} icon={<Layout className="w-4 h-4 text-[var(--brand-primary)]" />} onBack={handleBack} />
+            <ViewHeader
+                title={t('commandBar.templates.title')}
+                icon={<Layout className="w-4 h-4 text-[var(--brand-primary)]" />}
+                description="Start from a curated developer-builder diagram, then customize it on the canvas."
+                onBack={handleBack}
+                onClose={onClose}
+            />
 
             <div className="border-b border-slate-200/70 bg-white/90 px-4 py-3 backdrop-blur-sm">
-                <div className="relative">
-                    <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" />
-                    <Input
-                        value={tSearch}
-                        onChange={(e) => setTSearch(e.target.value)}
-                        onKeyDown={(e) => e.stopPropagation()}
-                        placeholder={t('commandBar.templates.placeholder')}
-                        className="w-full pl-10 focus:border-[var(--brand-primary-400)]"
-                        autoFocus
-                    />
-                </div>
+                <SearchField
+                    value={tSearch}
+                    onChange={(e) => setTSearch(e.target.value)}
+                    onKeyDown={(e) => e.stopPropagation()}
+                    placeholder={t('commandBar.templates.placeholder')}
+                    autoFocus
+                />
 
-                <div className="mt-3 -mx-1 overflow-x-auto pb-1 no-scrollbar">
-                    <div className="flex min-w-max gap-2 px-1">
-                        <button
-                            type="button"
-                            onClick={() => setActiveCategory('all')}
-                            className={`h-9 shrink-0 rounded-[var(--radius-md)] border px-3 text-xs font-semibold transition-colors ${activeCategory === 'all'
-                                ? 'border-[var(--brand-primary)] bg-[var(--brand-primary)] text-white shadow-sm'
-                                : 'border-slate-200 bg-white text-slate-600 hover:border-slate-300 hover:text-slate-800'
-                                }`}
-                        >
-                            ALL
-                            <span className={`ml-2 text-[10px] ${activeCategory === 'all' ? 'text-white/75' : 'text-slate-400'}`}>
-                                {templates.length}
-                            </span>
-                        </button>
-                        {categories.map((category) => {
-                            const count = templates.filter((template) => template.category === category).length;
-                            const isActive = activeCategory === category;
-                            return (
-                                <button
-                                    key={category}
-                                    type="button"
-                                    onClick={() => setActiveCategory(category)}
-                                    className={`h-9 shrink-0 rounded-[var(--radius-md)] border px-3 text-xs font-semibold transition-colors ${isActive
-                                        ? 'border-[var(--brand-primary)] bg-[var(--brand-primary)] text-white shadow-sm'
-                                        : 'border-slate-200 bg-white text-slate-600 hover:border-slate-300 hover:text-slate-800'
-                                        }`}
-                                >
-                                    {category.toUpperCase()}
-                                    <span className={`ml-2 text-[10px] ${isActive ? 'text-white/75' : 'text-slate-400'}`}>
-                                        {count}
-                                    </span>
-                                </button>
-                            );
-                        })}
-                    </div>
-                </div>
+                <SegmentedTabs
+                    items={categoryItems}
+                    value={activeCategory}
+                    onChange={setActiveCategory}
+                    className="mt-3 -mx-1"
+                    listClassName="px-1"
+                />
             </div>
 
             <div className="flex-1 overflow-y-auto px-4 py-4 custom-scrollbar">
@@ -109,7 +90,7 @@ export const TemplatesView = ({
                                     key={template.id}
                                     type="button"
                                     onClick={() => handleSelect(template)}
-                                    className="group flex aspect-square flex-col items-center justify-center gap-3 rounded-[var(--radius-lg)] border border-slate-200 bg-white px-3 py-4 text-center shadow-sm transition-all hover:-translate-y-0.5 hover:border-[var(--brand-primary-200)] hover:bg-[var(--brand-primary-50)] hover:shadow-md"
+                                    className="group flex aspect-square flex-col items-center justify-center gap-3 rounded-[var(--radius-lg)] border border-slate-200 bg-white px-3 py-4 text-center transition-colors hover:border-[var(--brand-primary-200)] hover:bg-[var(--brand-primary-50)]"
                                 >
                                     <div className="flex h-11 w-11 items-center justify-center rounded-[var(--radius-md)] border border-slate-200 bg-slate-50 text-slate-600 transition-colors group-hover:border-[var(--brand-primary-200)] group-hover:bg-white group-hover:text-[var(--brand-primary)]">
                                         <Icon className="h-5 w-5" />
@@ -117,6 +98,11 @@ export const TemplatesView = ({
                                     <div className="text-xs font-semibold text-slate-700 group-hover:text-[var(--brand-primary-900)]">
                                         {template.name}
                                     </div>
+                                    {template.useCase ? (
+                                        <div className="line-clamp-2 text-[10px] leading-4 text-slate-500">
+                                            {template.useCase}
+                                        </div>
+                                    ) : null}
                                     <div className="text-[10px] font-medium text-slate-400 opacity-60 uppercase tracking-widest">
                                         {template.category}
                                     </div>
diff --git a/src/components/command-bar/ViewHeader.tsx b/src/components/command-bar/ViewHeader.tsx
index 1ceba6e..2631011 100644
--- a/src/components/command-bar/ViewHeader.tsx
+++ b/src/components/command-bar/ViewHeader.tsx
@@ -6,39 +6,43 @@ interface ViewHeaderProps {
     title: string;
     icon: React.ReactNode;
     onBack: () => void;
-    onClose?: () => void; // Optional if we want global close, but usually passed via context or prop if needed, currently mainly used for layout consistency
+    description?: string;
+    meta?: React.ReactNode;
+    onClose?: () => void;
 }
 
-export const ViewHeader = ({ title, icon, onBack }: ViewHeaderProps) => (
-    <div className="flex items-center gap-3 px-4 py-3 border-b border-slate-200/50 bg-slate-50/50">
-        <Button
-            onClick={onBack}
-            variant="ghost"
-            size="icon"
-            className="rounded-[var(--radius-sm)] h-6 w-6"
-            icon={<ArrowLeft className="w-4 h-4" />}
-        />
-        <div className="flex items-center gap-2 font-medium text-slate-700">
-            {icon}
-            <span>{title}</span>
-        </div>
-        {/* Close button is typically handled by parent container's overlay click or Esc, 
-            but in the original it was sometimes present. 
-            However, the main Close is on the `RootView` header. 
-            Sub-views usually just have Back. 
-            Original `ViewHeader` had a Close button on the right that called `onBack` (which effectively closes if it was root, or goes back).
-            Wait, original code:
-            <div className="ml-auto">
-                <Button onClick={onBack} ... icon={<X ... />} />
-            </div>
-            It calls `onBack`.
-        */}
-        <div className="ml-auto">
+export const ViewHeader = ({
+    title,
+    icon,
+    onBack,
+    description,
+    meta,
+    onClose,
+}: ViewHeaderProps) => (
+    <div className="border-b border-slate-200/60 bg-white/90 px-4 py-3 backdrop-blur-sm">
+        <div className="flex items-start gap-3">
             <Button
                 onClick={onBack}
                 variant="ghost"
                 size="icon"
-                className="rounded-full h-6 w-6"
+                className="mt-0.5 rounded-[var(--radius-sm)]"
+                icon={<ArrowLeft className="w-4 h-4" />}
+            />
+            <div className="min-w-0 flex-1">
+                <div className="flex items-center gap-2 font-medium text-slate-700">
+                    {icon}
+                    <span>{title}</span>
+                </div>
+                {description ? (
+                    <p className="mt-1 text-[11px] leading-5 text-slate-500">{description}</p>
+                ) : null}
+                {meta ? <div className="mt-2">{meta}</div> : null}
+            </div>
+            <Button
+                onClick={onClose ?? onBack}
+                variant="ghost"
+                size="icon"
+                className="rounded-[var(--radius-sm)]"
                 icon={<X className="w-4 h-4" />}
             />
         </div>
diff --git a/src/components/command-bar/applyCodeChanges.ts b/src/components/command-bar/applyCodeChanges.ts
index 24926ac..835acda 100644
--- a/src/components/command-bar/applyCodeChanges.ts
+++ b/src/components/command-bar/applyCodeChanges.ts
@@ -1,4 +1,5 @@
 import type { ParseDiagnostic } from '@/lib/openFlowDSLParser';
+import { createLogger } from '@/lib/logger';
 import { parseOpenFlowDSL } from '@/lib/openFlowDSLParser';
 import type { MermaidDiagnosticsSnapshot } from '@/store/types';
 import { parseMermaidByType } from '@/services/mermaid/parseMermaidByType';
@@ -8,10 +9,12 @@ import {
   mapErrorToIssue,
   mapParserDiagnosticToIssue,
   persistLatestImportReport,
-  summarizeImportReport,
 } from '@/services/importFidelity';
 import { composeDiagramForDisplay } from '@/services/composeDiagramForDisplay';
 import type { FlowEdge, FlowNode } from '@/lib/types';
+import { createImportReportOutcome, notifyOperationOutcome } from '@/services/operationFeedback';
+
+const logger = createLogger({ scope: 'applyCodeChanges' });
 
 interface ApplyOptions {
   closeOnSuccess: boolean;
@@ -90,7 +93,7 @@ export async function applyCodeChanges({
         issues,
       });
       persistLatestImportReport(report);
-      addToast(summarizeImportReport(report), 'error');
+      notifyOperationOutcome(addToast, createImportReportOutcome(report, res.error));
     }
     setError(res.error);
     if ('diagnostics' in res) {
@@ -157,12 +160,12 @@ export async function applyCodeChanges({
           issues: [],
         });
         persistLatestImportReport(report);
-        addToast(summarizeImportReport(report), 'success');
+        notifyOperationOutcome(addToast, createImportReportOutcome(report));
       } else {
         setLiveStatus('synced');
       }
     } catch (err) {
-      console.error('Layout failed, applying raw positions:', err);
+      logger.error('Layout failed; applying raw positions.', { error: err });
       if (isLiveRequestStale(options.liveRequestId, options.source)) {
         return false;
       }
@@ -181,7 +184,7 @@ export async function applyCodeChanges({
           issues: [mapErrorToIssue('Layout fallback applied after import.')],
         });
         persistLatestImportReport(report);
-        addToast(summarizeImportReport(report), 'warning');
+        notifyOperationOutcome(addToast, createImportReportOutcome(report, 'Layout fallback applied after import.'));
       } else {
         setLiveStatus('synced');
       }
@@ -225,7 +228,7 @@ export async function applyCodeChanges({
         issues: [],
       });
       persistLatestImportReport(report);
-      addToast(summarizeImportReport(report), 'success');
+      notifyOperationOutcome(addToast, createImportReportOutcome(report));
     } else {
       setLiveStatus('synced');
     }
diff --git a/src/components/command-bar/assetsViewConstants.ts b/src/components/command-bar/assetsViewConstants.ts
new file mode 100644
index 0000000..36a6174
--- /dev/null
+++ b/src/components/command-bar/assetsViewConstants.ts
@@ -0,0 +1,40 @@
+import type React from 'react';
+import type { DomainLibraryCategory } from '@/services/domainLibrary';
+
+export type AssetTab = 'general' | 'icons' | 'network' | 'c4' | 'aws' | 'azure' | 'gcp' | 'cncf';
+
+export interface GeneralAssetItem {
+    id: string;
+    label: string;
+    icon: React.ReactNode;
+    keywords: string[];
+    action: () => void;
+}
+
+export interface CloudTabDefinition {
+    id: Extract<AssetTab, 'icons' | 'network' | 'c4' | 'aws' | 'azure' | 'gcp' | 'cncf'>;
+    label: string;
+    category: DomainLibraryCategory;
+}
+
+export const TAB_ORDER: AssetTab[] = ['general', 'icons', 'network', 'c4', 'aws', 'azure', 'gcp', 'cncf'];
+
+export const CLOUD_TABS: CloudTabDefinition[] = [
+    { id: 'icons', label: 'Icons', category: 'icons' },
+    { id: 'network', label: 'Network', category: 'network' },
+    { id: 'c4', label: 'C4', category: 'c4' },
+    { id: 'aws', label: 'AWS', category: 'aws' },
+    { id: 'azure', label: 'Azure', category: 'azure' },
+    { id: 'gcp', label: 'GCP', category: 'gcp' },
+    { id: 'cncf', label: 'CNCF', category: 'cncf' },
+];
+
+export const IMAGE_UPLOAD_INPUT_ID = 'assets-image-upload-input';
+export const MAX_CLOUD_RESULTS = 240;
+export const PROVIDER_BACKED_TABS = new Set<AssetTab>(['aws', 'azure', 'gcp', 'cncf']);
+
+export type CloudAssetState = 'idle' | 'loading' | 'ready' | 'error';
+
+export function getTileClass(): string {
+    return 'group flex aspect-square flex-col items-center justify-center gap-3 rounded-[var(--radius-lg)] border border-slate-200 bg-white px-3 py-4 text-center transition-colors hover:border-[var(--brand-primary-200)] hover:bg-[var(--brand-primary-50)]';
+}
diff --git a/src/components/command-bar/types.ts b/src/components/command-bar/types.ts
index bc26a00..52e5276 100644
--- a/src/components/command-bar/types.ts
+++ b/src/components/command-bar/types.ts
@@ -2,13 +2,17 @@ import type { FlowEdge, FlowNode } from '@/lib/types';
 import { FlowTemplate } from '../../services/templates';
 import { LayoutAlgorithm } from '../../services/elkLayout';
 import type { DomainLibraryItem } from '@/services/domainLibrary';
+import type { SupportedLanguage } from '@/hooks/ai-generation/codeToArchitecture';
+import type { TerraformInputFormat } from '@/hooks/ai-generation/terraformToCloud';
+import type { EditorSurfaceTier } from '@/components/editorSurfaceTiers';
 
-export type CommandView = 'root' | 'templates' | 'search' | 'layout' | 'design-system' | 'assets' | 'layers' | 'pages';
+export type CommandView = 'root' | 'templates' | 'search' | 'layout' | 'design-system' | 'assets' | 'layers' | 'pages' | 'import';
 
 export interface CommandItem {
     id: string;
     label: string;
     icon: React.ReactNode;
+    tier: EditorSurfaceTier;
     shortcut?: string;
     action?: () => void;
     type: 'action' | 'navigation' | 'ai' | 'toggle';
@@ -28,7 +32,7 @@ export interface CommandBarProps {
     onLayout?: (direction?: 'TB' | 'LR' | 'RL' | 'BT', algorithm?: LayoutAlgorithm, spacing?: 'compact' | 'normal' | 'loose') => void;
     onSelectTemplate?: (template: FlowTemplate) => void;
     onOpenStudioAI?: () => void;
-    onOpenStudioFlowMind?: () => void;
+    onOpenStudioOpenFlow?: () => void;
     onOpenStudioMermaid?: () => void;
     onOpenStudioPlayback?: () => void;
     initialView?: CommandView;
@@ -38,10 +42,17 @@ export interface CommandBarProps {
     onAddJourney?: () => void;
     onAddMindmap?: () => void;
     onAddArchitecture?: () => void;
+    onAddSequence?: () => void;
+    onAddClassNode?: () => void;
+    onAddEntityNode?: () => void;
     onAddImage?: (imageUrl: string) => void;
     onAddBrowserWireframe?: () => void;
     onAddMobileWireframe?: () => void;
     onAddDomainLibraryItem?: (item: DomainLibraryItem) => void;
+    onCodeAnalysis?: (code: string, language: SupportedLanguage) => Promise<void>;
+    onSqlAnalysis?: (sql: string) => Promise<void>;
+    onTerraformAnalysis?: (input: string, format: TerraformInputFormat) => Promise<void>;
+    onOpenApiAnalysis?: (spec: string) => Promise<void>;
     settings?: {
         showGrid: boolean;
         onToggleGrid: () => void;
diff --git a/src/components/command-bar/useAIViewState.test.tsx b/src/components/command-bar/useAIViewState.test.tsx
new file mode 100644
index 0000000..5a96f28
--- /dev/null
+++ b/src/components/command-bar/useAIViewState.test.tsx
@@ -0,0 +1,49 @@
+import { act, renderHook } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { useAIViewState } from './useAIViewState';
+
+function createHook(onAIGenerate: (prompt: string, imageBase64?: string) => Promise<boolean>) {
+  return renderHook(() =>
+    useAIViewState({
+      searchQuery: '',
+      isGenerating: false,
+      onAIGenerate,
+      onClose: vi.fn(),
+      chatMessageCount: 0,
+    })
+  );
+}
+
+describe('useAIViewState', () => {
+  it('clears prompt after a successful generation', async () => {
+    const onAIGenerate = vi.fn().mockResolvedValue(true);
+    const hook = createHook(onAIGenerate);
+
+    act(() => {
+      hook.result.current.setPrompt('Add Redis');
+    });
+
+    await act(async () => {
+      await hook.result.current.handleGenerate();
+    });
+
+    expect(onAIGenerate).toHaveBeenCalledWith('Add Redis', undefined);
+    expect(hook.result.current.prompt).toBe('');
+  });
+
+  it('keeps the prompt when generation is rejected by preflight or request failure', async () => {
+    const onAIGenerate = vi.fn().mockResolvedValue(false);
+    const hook = createHook(onAIGenerate);
+
+    act(() => {
+      hook.result.current.setPrompt('Add Redis');
+    });
+
+    await act(async () => {
+      await hook.result.current.handleGenerate();
+    });
+
+    expect(onAIGenerate).toHaveBeenCalledWith('Add Redis', undefined);
+    expect(hook.result.current.prompt).toBe('Add Redis');
+  });
+});
diff --git a/src/components/command-bar/useAIViewState.ts b/src/components/command-bar/useAIViewState.ts
index 46522cf..3d162a4 100644
--- a/src/components/command-bar/useAIViewState.ts
+++ b/src/components/command-bar/useAIViewState.ts
@@ -4,7 +4,7 @@ import type { ChangeEvent, KeyboardEvent, RefObject } from 'react';
 interface UseAIViewStateParams {
     searchQuery: string;
     isGenerating: boolean;
-    onAIGenerate: (prompt: string, imageBase64?: string) => Promise<void>;
+    onAIGenerate: (prompt: string, imageBase64?: string) => Promise<boolean>;
     onClose: () => void;
     chatMessageCount: number;
 }
@@ -43,11 +43,12 @@ export function useAIViewState({
         const promptText = text || prompt;
         if ((!promptText.trim() && !selectedImage) || isGenerating) return;
 
-
-        await onAIGenerate(promptText, selectedImage || undefined);
-        setPrompt('');
-        setSelectedImage(null);
-        onClose();
+        const didGenerate = await onAIGenerate(promptText, selectedImage || undefined);
+        if (didGenerate) {
+            setPrompt('');
+            setSelectedImage(null);
+            onClose();
+        }
     }
 
     function handleKeyDown(e: KeyboardEvent): void {
diff --git a/src/components/command-bar/useCloudAssetCatalog.ts b/src/components/command-bar/useCloudAssetCatalog.ts
new file mode 100644
index 0000000..4ead378
--- /dev/null
+++ b/src/components/command-bar/useCloudAssetCatalog.ts
@@ -0,0 +1,48 @@
+import { useCallback, useEffect, useState } from 'react';
+import type { DomainLibraryItem } from '@/services/domainLibrary';
+import {
+    loadProviderCatalog,
+    loadProviderShapePreview,
+} from '@/services/shapeLibrary/providerCatalog';
+import { CLOUD_TABS, type CloudAssetState, type CloudTabDefinition } from './assetsViewConstants';
+
+export function useCloudAssetCatalog(onAddDomainLibraryItem: (item: DomainLibraryItem) => void) {
+    const [providerItems, setProviderItems] = useState<Partial<Record<CloudTabDefinition['id'], DomainLibraryItem[]>>>({});
+    const [providerLoadState, setProviderLoadState] = useState<Partial<Record<CloudTabDefinition['id'], CloudAssetState>>>({});
+    const [providerPreviewUrls, setProviderPreviewUrls] = useState<Record<string, string>>({});
+
+    const loadProviderTab = useCallback((tabId: CloudTabDefinition['id']): void => {
+        if (tabId === 'icons') {
+            return;
+        }
+        if (providerLoadState[tabId] === 'loading' || providerLoadState[tabId] === 'ready') {
+            return;
+        }
+
+        setProviderLoadState((current) => ({ ...current, [tabId]: 'loading' }));
+        loadProviderCatalog(tabId)
+            .then((items) => {
+                setProviderItems((current) => ({ ...current, [tabId]: items }));
+                setProviderLoadState((current) => ({ ...current, [tabId]: 'ready' }));
+            })
+            .catch(() => {
+                setProviderLoadState((current) => ({ ...current, [tabId]: 'error' }));
+            });
+    }, [providerLoadState]);
+
+    useEffect(() => {
+        CLOUD_TABS.forEach((tab) => loadProviderTab(tab.id));
+    }, [loadProviderTab]);
+
+    async function insertProviderItem(item: DomainLibraryItem): Promise<void> {
+        const preview = item.archIconPackId && item.archIconShapeId
+            ? await loadProviderShapePreview(item.archIconPackId, item.archIconShapeId)
+            : null;
+        onAddDomainLibraryItem({
+            ...item,
+            ...(preview ? { previewUrl: preview.previewUrl } : {}),
+        });
+    }
+
+    return { providerItems, providerLoadState, providerPreviewUrls, setProviderPreviewUrls, loadProviderTab, insertProviderItem };
+}
diff --git a/src/components/command-bar/useCommandBarCommands.test.tsx b/src/components/command-bar/useCommandBarCommands.test.tsx
index 2b458a6..fa747aa 100644
--- a/src/components/command-bar/useCommandBarCommands.test.tsx
+++ b/src/components/command-bar/useCommandBarCommands.test.tsx
@@ -5,7 +5,7 @@ import { useCommandBarCommands } from './useCommandBarCommands';
 describe('useCommandBarCommands', () => {
     it('exposes Studio launcher actions from the root command list', () => {
         const onOpenStudioAI = vi.fn();
-        const onOpenStudioFlowMind = vi.fn();
+        const onOpenStudioOpenFlow = vi.fn();
         const onOpenStudioMermaid = vi.fn();
 
         const { result } = renderHook(() =>
@@ -19,23 +19,41 @@ describe('useCommandBarCommands', () => {
                 onUndo: vi.fn(),
                 onRedo: vi.fn(),
                 onOpenStudioAI,
-                onOpenStudioFlowMind,
+                onOpenStudioOpenFlow,
                 onOpenStudioMermaid,
             })
         );
 
         const ids = result.current.map((command) => command.id);
-        expect(ids).toContain('studio-ai');
-        expect(ids).toContain('studio-openflow');
-        expect(ids).toContain('studio-mermaid');
-        expect(ids).toContain('assets');
+        expect(ids).toEqual([
+            'studio-ai',
+            'templates',
+            'assets',
+            'search-nodes',
+            'layout',
+            'studio-openflow',
+            'studio-mermaid',
+            'toggle-grid',
+            'toggle-snap',
+            'undo',
+            'redo',
+            'select-all-edges',
+            'design-systems',
+        ]);
+
+        expect(result.current.find((command) => command.id === 'studio-ai')?.tier).toBe('core');
+        expect(result.current.find((command) => command.id === 'templates')?.tier).toBe('core');
+        expect(result.current.find((command) => command.id === 'layout')?.tier).toBe('core');
+        expect(result.current.find((command) => command.id === 'assets')?.tier).toBe('advanced');
+        expect(result.current.find((command) => command.id === 'studio-openflow')?.tier).toBe('advanced');
+        expect(result.current.find((command) => command.id === 'design-systems')?.tier).toBe('advanced');
 
         result.current.find((command) => command.id === 'studio-ai')?.action?.();
         result.current.find((command) => command.id === 'studio-openflow')?.action?.();
         result.current.find((command) => command.id === 'studio-mermaid')?.action?.();
 
         expect(onOpenStudioAI).toHaveBeenCalledTimes(1);
-        expect(onOpenStudioFlowMind).toHaveBeenCalledTimes(1);
+        expect(onOpenStudioOpenFlow).toHaveBeenCalledTimes(1);
         expect(onOpenStudioMermaid).toHaveBeenCalledTimes(1);
     });
 });
diff --git a/src/components/command-bar/useCommandBarCommands.tsx b/src/components/command-bar/useCommandBarCommands.tsx
index e3ac245..91395af 100644
--- a/src/components/command-bar/useCommandBarCommands.tsx
+++ b/src/components/command-bar/useCommandBarCommands.tsx
@@ -4,15 +4,15 @@ import {
     Code2,
     Compass,
     FileCode,
+    Import,
     Palette,
     Search,
     Settings,
     WandSparkles,
     Workflow,
 } from 'lucide-react';
-import { ROLLOUT_FLAGS } from '@/config/rolloutFlags';
 import { useFlowStore } from '@/store';
-import { APP_NAME } from '@/lib/brand';
+import { APP_NAME, FLOWPILOT_NAME } from '@/lib/brand';
 import type { CommandItem, CommandBarProps } from './types';
 import { AssetsIcon } from '../icons/AssetsIcon';
 
@@ -21,9 +21,9 @@ interface UseCommandBarCommandsParams {
     onUndo?: CommandBarProps['onUndo'];
     onRedo?: CommandBarProps['onRedo'];
     onOpenStudioAI?: CommandBarProps['onOpenStudioAI'];
-    onOpenStudioFlowMind?: CommandBarProps['onOpenStudioFlowMind'];
+    onOpenStudioOpenFlow?: CommandBarProps['onOpenStudioOpenFlow'];
     onOpenStudioMermaid?: CommandBarProps['onOpenStudioMermaid'];
-    onOpenStudioPlayback?: CommandBarProps['onOpenStudioPlayback'];
+    hasImport?: boolean;
 }
 
 export function useCommandBarCommands({
@@ -31,50 +31,44 @@ export function useCommandBarCommands({
     onUndo,
     onRedo,
     onOpenStudioAI,
-    onOpenStudioFlowMind,
+    onOpenStudioOpenFlow,
     onOpenStudioMermaid,
-    onOpenStudioPlayback,
+    hasImport = false,
 }: UseCommandBarCommandsParams): CommandItem[] {
     return useMemo(() => {
         return [
             {
                 id: 'studio-ai',
-                label: 'Open FlowPilot',
+                label: `Open ${FLOWPILOT_NAME}`,
                 icon: <WandSparkles className="w-4 h-4 text-[var(--brand-primary)]" />,
+                tier: 'core',
                 type: 'action',
-                description: 'Open AI editing in the right rail',
+                description: `Open ${FLOWPILOT_NAME} in the right rail`,
                 action: onOpenStudioAI,
             },
             {
-                id: 'studio-openflow',
-                label: 'Edit Flow DSL',
-                icon: <FileCode className="w-4 h-4 text-emerald-500" />,
-                type: 'action',
-                description: `Open ${APP_NAME} DSL in Studio`,
-                action: onOpenStudioFlowMind,
-            },
-            {
-                id: 'studio-mermaid',
-                label: 'Edit Mermaid Code',
-                icon: <Code2 className="w-4 h-4 text-pink-500" />,
-                type: 'action',
-                description: 'Open Mermaid editing in Studio',
-                action: onOpenStudioMermaid,
+                id: 'templates',
+                label: 'Start from Template',
+                icon: <Compass className="w-4 h-4 text-blue-500" />,
+                tier: 'core',
+                type: 'navigation',
+                description: 'Browse pre-built flows and starter layouts',
+                view: 'templates',
             },
-            ...(ROLLOUT_FLAGS.playbackStudioV1
-                ? [{
-                    id: 'studio-playback',
-                    label: 'Open Playback Studio',
-                    icon: <Workflow className="w-4 h-4 text-violet-500" />,
-                    type: 'action' as const,
-                    description: 'Author scenes, timeline order, and playback preview',
-                    action: onOpenStudioPlayback,
-                }]
-                : []),
+            ...(hasImport ? [{
+                id: 'import',
+                label: 'Import from data',
+                icon: <Import className="w-4 h-4 text-violet-500" />,
+                tier: 'core' as const,
+                type: 'navigation' as const,
+                view: 'import' as const,
+                description: 'SQL -> ERD, Terraform -> Cloud, OpenAPI -> Sequence, Code -> Architecture',
+            }] : []),
             {
                 id: 'assets',
                 label: 'Assets',
                 icon: <AssetsIcon className="w-4 h-4 text-[var(--brand-primary)]" />,
+                tier: 'advanced',
                 type: 'navigation',
                 view: 'assets',
                 description: 'Wireframes, notes, sections, and media',
@@ -83,6 +77,7 @@ export function useCommandBarCommands({
                 id: 'search-nodes',
                 label: 'Search Nodes',
                 icon: <Search className="w-4 h-4 text-[var(--brand-primary-400)]" />,
+                tier: 'core',
                 shortcut: '⌘F',
                 type: 'navigation',
                 view: 'search',
@@ -92,17 +87,28 @@ export function useCommandBarCommands({
                 id: 'layout',
                 label: 'Auto Layout',
                 icon: <Workflow className="w-4 h-4 text-sky-500" />,
+                tier: 'core',
                 type: 'navigation',
                 view: 'layout',
                 description: 'Arrange the current flow automatically',
             },
             {
-                id: 'templates',
-                label: 'Start from Template',
-                icon: <Compass className="w-4 h-4 text-blue-500" />,
-                type: 'navigation',
-                description: 'Browse pre-built flows and starter layouts',
-                view: 'templates',
+                id: 'studio-openflow',
+                label: 'Edit Flow DSL',
+                icon: <FileCode className="w-4 h-4 text-emerald-500" />,
+                tier: 'advanced',
+                type: 'action',
+                description: `Open ${APP_NAME} DSL in Studio`,
+                action: onOpenStudioOpenFlow,
+            },
+            {
+                id: 'studio-mermaid',
+                label: 'Edit Mermaid Code',
+                icon: <Code2 className="w-4 h-4 text-pink-500" />,
+                tier: 'advanced',
+                type: 'action',
+                description: 'Open Mermaid editing in Studio',
+                action: onOpenStudioMermaid,
             },
             ...(settings
                 ? [
@@ -110,6 +116,7 @@ export function useCommandBarCommands({
                         id: 'toggle-grid',
                         label: 'Show Grid',
                         icon: <Settings className="w-4 h-4 text-slate-500" />,
+                        tier: 'advanced' as const,
                         type: 'toggle' as const,
                         value: settings.showGrid,
                         action: settings.onToggleGrid,
@@ -120,6 +127,7 @@ export function useCommandBarCommands({
                         id: 'toggle-snap',
                         label: 'Snap to Grid',
                         icon: <Settings className="w-4 h-4 text-slate-500" />,
+                        tier: 'advanced' as const,
                         type: 'toggle' as const,
                         value: settings.snapToGrid,
                         action: settings.onToggleSnap,
@@ -132,6 +140,7 @@ export function useCommandBarCommands({
                 id: 'undo',
                 label: 'Undo',
                 icon: <ArrowRight className="w-4 h-4 rotate-180 text-slate-500" />,
+                tier: 'advanced',
                 shortcut: '⌘Z',
                 type: 'action',
                 action: onUndo,
@@ -141,6 +150,7 @@ export function useCommandBarCommands({
                 id: 'redo',
                 label: 'Redo',
                 icon: <ArrowRight className="w-4 h-4 text-slate-500" />,
+                tier: 'advanced',
                 shortcut: '⌘Y',
                 type: 'action',
                 action: onRedo,
@@ -150,6 +160,7 @@ export function useCommandBarCommands({
                 id: 'select-all-edges',
                 label: 'Select All Edges',
                 icon: <ArrowRight className="w-4 h-4 text-cyan-500" />,
+                tier: 'advanced',
                 type: 'action',
                 description: 'Highlight all connections',
                 action: () => {
@@ -162,10 +173,11 @@ export function useCommandBarCommands({
                 id: 'design-systems',
                 label: 'Design Systems',
                 icon: <Palette className="w-4 h-4 text-[var(--brand-primary)]" />,
+                tier: 'advanced',
                 type: 'navigation',
                 view: 'design-system',
                 description: 'Manage themes & styles',
             },
         ];
-    }, [onOpenStudioAI, onOpenStudioFlowMind, onOpenStudioMermaid, onOpenStudioPlayback, settings, onUndo, onRedo]);
+    }, [onOpenStudioAI, onOpenStudioOpenFlow, onOpenStudioMermaid, hasImport, settings, onUndo, onRedo]);
 }
diff --git a/src/components/custom-edge/CustomEdgeWrapper.tsx b/src/components/custom-edge/CustomEdgeWrapper.tsx
index 2682607..a9f83b3 100644
--- a/src/components/custom-edge/CustomEdgeWrapper.tsx
+++ b/src/components/custom-edge/CustomEdgeWrapper.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { BaseEdge, EdgeLabelRenderer, useReactFlow } from '@/lib/reactflowCompat';
 import { ROLLOUT_FLAGS } from '@/config/rolloutFlags';
 import { MarkerType } from '@/lib/reactflowCompat';
@@ -18,6 +18,8 @@ import {
 } from './classRelationSemantics';
 import { resolveStandardEdgeMarkers } from './standardEdgeMarkers';
 import { resolveAnimatedEdgePresentation } from './animatedEdgePresentation';
+import { buildEdgeLabelUpdates, getEditableEdgeLabel } from '@/components/properties/edge/edgeLabelModel';
+import type { CinematicRenderState } from '@/services/export/cinematicRenderState';
 
 interface CustomEdgeWrapperProps {
     id: string;
@@ -37,6 +39,7 @@ interface CustomEdgeWrapperProps {
     markerStartConfig?: FlowEdge['markerStart'];
     selected?: boolean;
     edgeAnimated?: boolean;
+    cinematicExportState?: CinematicRenderState;
 }
 
 function toLabelTransform(x: number, y: number): string {
@@ -46,10 +49,10 @@ function toLabelTransform(x: number, y: number): string {
 export function CustomEdgeWrapper({
     id,
     path,
-    sourceX,
-    sourceY,
-    targetX,
-    targetY,
+    sourceX: _sourceX,
+    sourceY: _sourceY,
+    targetX: _targetX,
+    targetY: _targetY,
     labelX,
     labelY,
     markerEnd,
@@ -61,15 +64,47 @@ export function CustomEdgeWrapper({
     markerStartConfig,
     selected = false,
     edgeAnimated = false,
+    cinematicExportState,
 }: CustomEdgeWrapperProps): React.ReactElement {
     const { setEdges, screenToFlowPosition } = useReactFlow();
     const pathRef = useRef<SVGPathElement>(null);
     const labelRef = useRef<HTMLDivElement>(null);
     const [isHovered, setIsHovered] = useState(false);
+    const [isEditingLabel, setIsEditingLabel] = useState(false);
+    const [labelDraft, setLabelDraft] = useState('');
     const designSystem = useDesignSystem();
-    const visualQualityV2Enabled = ROLLOUT_FLAGS.visualQualityV2;
+    const visualQualityV2Enabled = true;
     const relationSemanticsV1Enabled = ROLLOUT_FLAGS.relationSemanticsV1;
-    const canvasInteractionsV1Enabled = ROLLOUT_FLAGS.canvasInteractionsV1;
+
+    const beginLabelEdit = useCallback(() => {
+        const current = getEditableEdgeLabel({
+            id,
+            source: '',
+            target: '',
+            data,
+            label,
+        } as FlowEdge);
+        setLabelDraft(current);
+        setIsEditingLabel(true);
+    }, [data, id, label]);
+
+    const commitLabelEdit = useCallback(() => {
+        setEdges((edges) => edges.map((e) => (
+            e.id !== id ? e : { ...e, ...buildEdgeLabelUpdates(e as FlowEdge, labelDraft) }
+        )));
+        setIsEditingLabel(false);
+    }, [id, labelDraft, setEdges]);
+
+    const cancelLabelEdit = useCallback(() => {
+        setIsEditingLabel(false);
+    }, []);
+
+    const displayPath = path;
+    const cinematicActive = Boolean(cinematicExportState?.active);
+    const isBuiltCinematicEdge = Boolean(cinematicExportState?.builtEdgeIds.has(id));
+    const isActiveCinematicEdge = cinematicExportState?.activeEdgeId === id;
+    const cinematicEdgeProgress = isActiveCinematicEdge ? cinematicExportState?.activeEdgeProgress ?? 0 : 0;
+    const showCinematicLabel = isBuiltCinematicEdge || (isActiveCinematicEdge && cinematicEdgeProgress >= 0.85);
 
     const relationVisualSpec = resolveRelationVisualSpec(
         relationSemanticsV1Enabled,
@@ -120,7 +155,7 @@ export function CustomEdgeWrapper({
     const resolvedMarkerStart = standardMarkers.markerStartUrl;
     const resolvedMarkerEnd = standardMarkers.markerEndUrl;
     const animatedPresentation = useMemo(() => resolveAnimatedEdgePresentation({
-        animatedExportEnabled: ROLLOUT_FLAGS.animatedExportV1,
+        animatedExportEnabled: true,
         selected,
         hovered: isHovered,
         edgeAnimated,
@@ -219,6 +254,13 @@ export function CustomEdgeWrapper({
     const sourceSide = typeof data?.archSourceSide === 'string' ? data.archSourceSide : '';
     const targetSide = typeof data?.archTargetSide === 'string' ? data.archTargetSide : '';
     const sideHint = sourceSide || targetSide ? `${sourceSide || '?'}${directionGlyph}${targetSide || '?'}` : '';
+    const edgeLabel = getEditableEdgeLabel({
+        id,
+        source: '',
+        target: '',
+        data,
+        label,
+    } as FlowEdge);
     const renderedLabel = hasArchitectureMeta
         ? (
             <span className="inline-flex items-center gap-1 rounded-full bg-blue-50 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-blue-700 border border-blue-200">
@@ -227,7 +269,24 @@ export function CustomEdgeWrapper({
                 {data?.archPort && <span className="text-blue-500">:{data.archPort}</span>}
             </span>
         )
-        : label;
+        : edgeLabel;
+
+    const shouldRenderInteractiveChrome = !cinematicActive;
+    const shouldRenderBaseEdge = !cinematicActive || isBuiltCinematicEdge;
+    const cinematicEdgeStyle: React.CSSProperties = {
+        ...resolvedStyle,
+        strokeDasharray: 1,
+        strokeDashoffset: Math.max(0, 1 - cinematicEdgeProgress),
+        strokeOpacity: 0.98,
+    };
+    const cinematicMarkerVisible = cinematicEdgeProgress >= 0.995;
+    const cinematicGlowStyle: React.CSSProperties = {
+        ...resolvedStyle,
+        stroke: 'rgba(59,130,246,0.22)',
+        strokeWidth: Number(resolvedStyle.strokeWidth ?? designSystem.components.edge.strokeWidth) + 4,
+        strokeDasharray: 1,
+        strokeDashoffset: Math.max(0, 1 - cinematicEdgeProgress),
+    };
 
     return (
         <>
@@ -276,10 +335,35 @@ export function CustomEdgeWrapper({
                     ))}
                 </defs>
             </svg>
-            <BaseEdge path={path} markerEnd={resolvedMarkerEnd} markerStart={resolvedMarkerStart} style={resolvedStyle} />
-            {animatedPresentation.shouldRenderOverlay && (
+            {shouldRenderBaseEdge ? (
+                <BaseEdge path={displayPath} markerEnd={resolvedMarkerEnd} markerStart={resolvedMarkerStart} style={resolvedStyle} />
+            ) : null}
+            {cinematicActive && isActiveCinematicEdge ? (
+                <>
+                    <path
+                        d={displayPath}
+                        pathLength={1}
+                        fill="none"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        pointerEvents="none"
+                        style={cinematicGlowStyle}
+                    />
+                    <path
+                        d={displayPath}
+                        pathLength={1}
+                        fill="none"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        markerEnd={cinematicMarkerVisible ? resolvedMarkerEnd : undefined}
+                        markerStart={cinematicMarkerVisible ? resolvedMarkerStart : undefined}
+                        style={cinematicEdgeStyle}
+                    />
+                </>
+            ) : null}
+            {animatedPresentation.shouldRenderOverlay && !cinematicActive && (
                 <path
-                    d={path}
+                    d={displayPath}
                     fill="none"
                     strokeLinecap="round"
                     style={animatedPresentation.overlayStyle}
@@ -288,21 +372,27 @@ export function CustomEdgeWrapper({
                     aria-hidden="true"
                 />
             )}
-            <path
-                d={path}
-                fill="none"
-                stroke="rgba(15,23,42,0.001)"
-                strokeWidth={20}
-                pointerEvents="stroke"
-                onPointerEnter={() => setIsHovered(true)}
-                onPointerLeave={() => setIsHovered(false)}
-                aria-hidden="true"
-            >
-                {canvasInteractionsV1Enabled && <title>Select edge</title>}
-            </path>
-            <path ref={pathRef} d={path} style={{ display: 'none' }} fill="none" stroke="none" aria-hidden="true" />
+            {shouldRenderInteractiveChrome ? (
+                <path
+                    d={displayPath}
+                    fill="none"
+                    stroke="rgba(15,23,42,0.001)"
+                    strokeWidth={20}
+                    pointerEvents="stroke"
+                    onPointerEnter={() => setIsHovered(true)}
+                    onPointerLeave={() => setIsHovered(false)}
+                    onDoubleClick={(event) => {
+                        event.stopPropagation();
+                        beginLabelEdit();
+                    }}
+                    aria-hidden="true"
+                >
+                    <title>Select edge</title>
+                </path>
+            ) : null}
+            <path ref={pathRef} d={displayPath} style={{ display: 'none' }} fill="none" stroke="none" aria-hidden="true" />
 
-            {renderedLabel && (
+            {((renderedLabel && (!cinematicActive || showCinematicLabel)) || (!cinematicActive && !hasArchitectureMeta && (selected || isHovered))) && (
                 <EdgeLabelRenderer>
                     <div
                         ref={labelRef}
@@ -312,20 +402,47 @@ export function CustomEdgeWrapper({
                             fontSize: 12,
                             pointerEvents: 'all',
                         }}
-                        onPointerEnter={() => setIsHovered(true)}
-                        onPointerLeave={() => setIsHovered(false)}
+                        onPointerEnter={() => { if (!cinematicActive) setIsHovered(true); }}
+                        onPointerLeave={() => { if (!cinematicActive) setIsHovered(false); }}
                         className={`flow-edge-label nodrag nopan ${selected || isHovered ? 'flow-lod-preserve' : ''}`}
                     >
-                        <div
-                            onPointerDown={onLabelPointerDown}
-                            className={
-                                visualQualityV2Enabled
-                                    ? 'bg-white/95 px-2.5 py-0.5 rounded-full border border-slate-200/70 shadow-[0_1px_3px_rgba(0,0,0,0.08)] text-[11px] font-medium text-slate-500 hover:border-indigo-300 hover:text-slate-700 hover:shadow-md active:ring-2 active:ring-indigo-400 select-none flow-lod-secondary flow-lod-shadow transition-all'
-                                    : 'bg-white px-2 py-1 rounded border border-slate-200 shadow-sm text-xs font-medium text-slate-600 hover:ring-2 hover:ring-indigo-500/20 active:ring-indigo-500 select-none flow-lod-secondary flow-lod-shadow'
-                            }
-                        >
-                            {renderedLabel}
-                        </div>
+                        {isEditingLabel ? (
+                            <input
+                                autoFocus
+                                value={labelDraft}
+                                onChange={(e) => setLabelDraft(e.target.value)}
+                                onBlur={commitLabelEdit}
+                                onKeyDown={(e) => {
+                                    e.stopPropagation();
+                                    if (e.key === 'Enter') { e.preventDefault(); commitLabelEdit(); }
+                                    if (e.key === 'Escape') { e.preventDefault(); cancelLabelEdit(); }
+                                }}
+                                className="bg-white border border-indigo-400 rounded-full px-2.5 py-0.5 text-[11px] font-medium text-slate-700 shadow-sm outline-none ring-2 ring-indigo-300/50 min-w-[60px]"
+                            />
+                        ) : renderedLabel ? (
+                            <div
+                                onPointerDown={onLabelPointerDown}
+                                onDoubleClick={(e) => { e.stopPropagation(); beginLabelEdit(); }}
+                                className={
+                                    visualQualityV2Enabled
+                                        ? `px-2 py-0.5 rounded-full border shadow-sm text-[11px] font-medium select-none flow-lod-secondary flow-lod-shadow transition-all ${cinematicActive ? 'bg-white/96 border-slate-200/90 text-slate-600 shadow-[0_6px_18px_rgba(15,23,42,0.08)]' : 'bg-white/90 border-slate-200 text-slate-500 hover:border-indigo-300 hover:text-slate-700 hover:shadow active:ring-2 active:ring-indigo-400'}`
+                                        : 'bg-white px-2 py-0.5 rounded border border-slate-200 shadow-sm text-[11px] font-medium text-slate-500 hover:ring-2 hover:ring-indigo-500/20 active:ring-indigo-500 select-none flow-lod-secondary flow-lod-shadow'
+                                }
+                            >
+                                {renderedLabel}
+                            </div>
+                        ) : (
+                            <button
+                                type="button"
+                                onClick={(event) => {
+                                    event.stopPropagation();
+                                    beginLabelEdit();
+                                }}
+                                className="rounded-full border border-dashed border-slate-300 bg-white/95 px-2.5 py-0.5 text-[11px] font-medium text-slate-500 shadow-sm transition-colors hover:border-indigo-300 hover:text-slate-700"
+                            >
+                                Add label
+                            </button>
+                        )}
                     </div>
                 </EdgeLabelRenderer>
             )}
diff --git a/src/components/custom-edge/SequenceMessageEdge.test.tsx b/src/components/custom-edge/SequenceMessageEdge.test.tsx
new file mode 100644
index 0000000..6e0d711
--- /dev/null
+++ b/src/components/custom-edge/SequenceMessageEdge.test.tsx
@@ -0,0 +1,73 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { CinematicExportProvider } from '@/context/CinematicExportContext';
+import SequenceMessageEdge from './SequenceMessageEdge';
+
+function renderSequenceEdge(
+  overrideProps: Partial<React.ComponentProps<typeof SequenceMessageEdge>> = {}
+): ReturnType<typeof render> {
+  const props: React.ComponentProps<typeof SequenceMessageEdge> = {
+    id: 'seq-1',
+    source: 'client',
+    target: 'api',
+    sourceX: 100,
+    sourceY: 0,
+    targetX: 320,
+    targetY: 0,
+    sourcePosition: 'top' as never,
+    targetPosition: 'top' as never,
+    label: 'POST /checkout',
+    data: {
+      seqMessageKind: 'sync',
+      seqMessageOrder: 0,
+      sourceIsActor: true,
+      targetIsActor: false,
+    },
+    ...overrideProps,
+  };
+
+  return render(
+    <svg>
+      <CinematicExportProvider>
+        <SequenceMessageEdge {...props} />
+      </CinematicExportProvider>
+    </svg>
+  );
+}
+
+describe('SequenceMessageEdge', () => {
+  it('renders a visible label for standard messages', () => {
+    renderSequenceEdge();
+    expect(screen.getByText('POST /checkout')).toBeInTheDocument();
+  });
+
+  it('uses markerEnd for rightward messages', () => {
+    const { container } = renderSequenceEdge();
+    const path = container.querySelector('path[marker-end]');
+
+    expect(path).not.toBeNull();
+    expect(path?.getAttribute('marker-start')).toBeNull();
+  });
+
+  it('uses markerStart for leftward messages', () => {
+    const { container } = renderSequenceEdge({
+      source: 'api',
+      target: 'client',
+      sourceX: 320,
+      targetX: 100,
+      label: '202 Accepted',
+      data: {
+        seqMessageKind: 'return',
+        seqMessageOrder: 1,
+        sourceIsActor: false,
+        targetIsActor: true,
+      },
+    });
+    const path = container.querySelector('path[marker-start]');
+
+    expect(path).not.toBeNull();
+    expect(path?.getAttribute('marker-end')).toBeNull();
+    expect(screen.getByText('202 Accepted')).toBeInTheDocument();
+  });
+});
diff --git a/src/components/custom-edge/SequenceMessageEdge.tsx b/src/components/custom-edge/SequenceMessageEdge.tsx
new file mode 100644
index 0000000..80acaed
--- /dev/null
+++ b/src/components/custom-edge/SequenceMessageEdge.tsx
@@ -0,0 +1,212 @@
+import React, { memo } from 'react';
+import type { LegacyEdgeProps } from '@/lib/reactflowCompat';
+import type { EdgeData } from '@/lib/types';
+import { useCinematicExportState } from '@/context/CinematicExportContext';
+import {
+  SEQ_BOX_H,
+  SEQ_ACTOR_EXTRA_H,
+  SEQ_MSG_OFFSET,
+  SEQ_MSG_SPACING,
+} from '@/components/custom-nodes/SequenceParticipantNode';
+
+// Resolved at edge render time from source node data (passed via edge data).
+const SELF_LOOP_W = 56;
+const SELF_LOOP_H = 28;
+const LABEL_FONT_SIZE = 11;
+const LABEL_OFFSET_Y = -5;
+const CINEMATIC_EDGE_GLOW_COLOR = 'rgba(59,130,246,0.2)';
+const CINEMATIC_EDGE_MARKER_THRESHOLD = 0.995;
+
+function buildPathRevealProps(progress: number): { pathLength: number; strokeDasharray: number; strokeDashoffset: number } {
+  return {
+    pathLength: 1,
+    strokeDasharray: 1,
+    strokeDashoffset: Math.max(0, 1 - progress),
+  };
+}
+
+function arrowMarkerDef(id: string, color: string, open: boolean): React.ReactElement {
+  return (
+    <defs>
+      <marker
+        id={id}
+        markerWidth="10"
+        markerHeight="7"
+        refX="9"
+        refY="3.5"
+        orient="auto"
+      >
+        {open ? (
+          <polyline points="0,0 9,3.5 0,7" fill="none" stroke={color} strokeWidth="1.5" />
+        ) : (
+          <polygon points="0,0 9,3.5 0,7" fill={color} />
+        )}
+      </marker>
+    </defs>
+  );
+}
+
+function SequenceMessageEdge({
+  id,
+  sourceX,
+  sourceY,
+  targetX,
+  data,
+  label,
+  source,
+  target,
+}: LegacyEdgeProps<EdgeData>): React.ReactElement {
+  const cinematicExportState = useCinematicExportState();
+  const order = (data as { seqMessageOrder?: number })?.seqMessageOrder ?? 0;
+  const kind = (data as { seqMessageKind?: string })?.seqMessageKind ?? 'sync';
+  const sourceIsActor = Boolean((data as { sourceIsActor?: boolean })?.sourceIsActor);
+  const targetIsActor = Boolean((data as { targetIsActor?: boolean })?.targetIsActor);
+
+  // Y position for this message arrow, relative to top of source node
+  const headerH = SEQ_BOX_H + (sourceIsActor ? SEQ_ACTOR_EXTRA_H : 0);
+  const msgY = sourceY + headerH + SEQ_MSG_OFFSET + order * SEQ_MSG_SPACING;
+
+  const isSelf = source === target;
+  const isDashed = kind === 'return';
+  const isOpen = kind === 'async' || kind === 'destroy';
+  const strokeColor = '#64748b';
+  const markerId = `seq-arrow-${id}`;
+  const cinematicActive = cinematicExportState.active;
+  const isBuiltCinematicEdge = cinematicExportState.builtEdgeIds.has(id);
+  const isActiveCinematicEdge = cinematicExportState.activeEdgeId === id;
+  const cinematicEdgeProgress = isActiveCinematicEdge ? cinematicExportState.activeEdgeProgress : 0;
+  const showLabel = !cinematicActive || isBuiltCinematicEdge || (isActiveCinematicEdge && cinematicEdgeProgress >= 0.85);
+  const showAnimatedMarker = cinematicEdgeProgress >= CINEMATIC_EDGE_MARKER_THRESHOLD;
+  const pathRevealProps = cinematicActive && isActiveCinematicEdge
+    ? buildPathRevealProps(cinematicEdgeProgress)
+    : {};
+  const glowPathProps = cinematicActive && isActiveCinematicEdge
+    ? {
+        ...pathRevealProps,
+        stroke: CINEMATIC_EDGE_GLOW_COLOR,
+        strokeWidth: 5,
+      }
+    : null;
+
+  // Center X of source and target participants
+  const sx = sourceX;
+  const tx = isSelf ? sourceX : targetX;
+
+  if (isSelf) {
+    // Self-message: right-side loop
+    const loopPath = [
+      `M ${sx} ${msgY}`,
+      `h ${SELF_LOOP_W}`,
+      `v ${SELF_LOOP_H}`,
+      `H ${sx}`,
+    ].join(' ');
+    const labelX = sx + SELF_LOOP_W + 4;
+    const labelY = msgY + SELF_LOOP_H / 2;
+
+    return (
+      <g>
+        {arrowMarkerDef(markerId, strokeColor, isOpen)}
+        {!cinematicActive || isBuiltCinematicEdge ? (
+          <path
+            d={loopPath}
+            fill="none"
+            stroke={strokeColor}
+            strokeWidth={1.5}
+            strokeDasharray={isDashed ? '6 3' : undefined}
+            markerEnd={`url(#${markerId})`}
+          />
+        ) : null}
+        {cinematicActive && isActiveCinematicEdge ? (
+          <>
+            {glowPathProps ? (
+              <path
+                d={loopPath}
+                fill="none"
+                pointerEvents="none"
+                {...glowPathProps}
+              />
+            ) : null}
+            <path
+              d={loopPath}
+              fill="none"
+              stroke={strokeColor}
+              strokeWidth={1.5}
+              markerEnd={showAnimatedMarker ? `url(#${markerId})` : undefined}
+              {...pathRevealProps}
+            />
+          </>
+        ) : null}
+        {label && showLabel ? (
+          <text
+            x={labelX}
+            y={labelY}
+            fontSize={LABEL_FONT_SIZE}
+            fill="#475569"
+            dominantBaseline="middle"
+          >
+            {String(label)}
+          </text>
+        ) : null}
+      </g>
+    );
+  }
+
+  // Direction — arrow points from source toward target
+  const goingRight = tx > sx;
+  const arrowPath = `M ${sx} ${msgY} H ${tx}`;
+  const labelX = (sx + tx) / 2;
+  const labelY = msgY + LABEL_OFFSET_Y;
+  const _ = targetIsActor; // consumed to avoid lint unused
+
+  return (
+    <g>
+      {arrowMarkerDef(markerId, strokeColor, isOpen)}
+      {!cinematicActive || isBuiltCinematicEdge ? (
+        <path
+          d={arrowPath}
+          fill="none"
+          stroke={strokeColor}
+          strokeWidth={1.5}
+          strokeDasharray={isDashed ? '6 3' : undefined}
+          markerEnd={goingRight ? `url(#${markerId})` : undefined}
+          markerStart={!goingRight ? `url(#${markerId})` : undefined}
+        />
+      ) : null}
+      {cinematicActive && isActiveCinematicEdge ? (
+        <>
+          {glowPathProps ? (
+            <path
+              d={arrowPath}
+              fill="none"
+              pointerEvents="none"
+              {...glowPathProps}
+            />
+          ) : null}
+          <path
+            d={arrowPath}
+            fill="none"
+            stroke={strokeColor}
+            strokeWidth={1.5}
+            markerEnd={goingRight && showAnimatedMarker ? `url(#${markerId})` : undefined}
+            markerStart={!goingRight && showAnimatedMarker ? `url(#${markerId})` : undefined}
+            {...pathRevealProps}
+          />
+        </>
+      ) : null}
+      {label && showLabel ? (
+        <text
+          x={labelX}
+          y={labelY}
+          fontSize={LABEL_FONT_SIZE}
+          fill="#475569"
+          textAnchor="middle"
+          dominantBaseline="auto"
+        >
+          {String(label)}
+        </text>
+      ) : null}
+    </g>
+  );
+}
+
+export default memo(SequenceMessageEdge);
diff --git a/src/components/custom-edge/classRelationSemantics.test.ts b/src/components/custom-edge/classRelationSemantics.test.ts
index 3b57657..c97b66a 100644
--- a/src/components/custom-edge/classRelationSemantics.test.ts
+++ b/src/components/custom-edge/classRelationSemantics.test.ts
@@ -6,7 +6,6 @@ import {
   CLASS_MARKER_DIAMOND_OPEN,
   CLASS_MARKER_TRIANGLE_OPEN,
   ER_MARKER_BAR,
-  ER_MARKER_CIRCLE,
   ER_MARKER_CROW,
   resolveClassRelationVisualSpec,
   resolveRelationVisualSpec,
diff --git a/src/components/custom-edge/pathUtils.test.ts b/src/components/custom-edge/pathUtils.test.ts
index 6026871..98877ab 100644
--- a/src/components/custom-edge/pathUtils.test.ts
+++ b/src/components/custom-edge/pathUtils.test.ts
@@ -28,7 +28,7 @@ function getMovePoint(path: string): string {
   return `${match[1]},${match[2]}`;
 }
 
-function getMoveY(path: string): number {
+function _getMoveY(path: string): number {
   const [, y] = getMovePoint(path).split(',');
   return Number(y);
 }
@@ -78,6 +78,46 @@ describe('buildEdgePath', () => {
     }
   });
 
+  it('skips sibling fanout offsets for very large edge sets even outside interaction mode', () => {
+    const allEdges = Array.from({ length: 600 }, (_, index) => ({
+      id: `edge-${index + 1}`,
+      source: 'a',
+      target: `target-${index + 1}`,
+      sourceHandle: 'right',
+      targetHandle: 'left',
+    }));
+    const allNodes = [
+      NODE_A,
+      ...Array.from({ length: 600 }, (_, index) => ({
+        id: `target-${index + 1}`,
+        position: { x: 260, y: 40 + index * 8 },
+        width: 0,
+        height: 0,
+      })),
+    ];
+
+    const result = buildEdgePath(
+      {
+        id: 'edge-1',
+        source: 'a',
+        target: 'target-1',
+        sourceX: 100,
+        sourceY: 100,
+        targetX: 260,
+        targetY: 40,
+        sourcePosition: Position.Right,
+        targetPosition: Position.Left,
+        sourceHandleId: 'right',
+        targetHandleId: 'left',
+      },
+      allEdges,
+      allNodes,
+      'smoothstep'
+    );
+
+    expect(getMovePoint(result.edgePath)).toBe('100,100');
+  });
+
   it('routes edge through explicit waypoint when provided', () => {
     const result = buildEdgePath(
       {
@@ -164,7 +204,7 @@ describe('buildEdgePath', () => {
     expect(result.labelY).toBe(50);
   });
 
-  it('fans out edges that share the same node side by default', () => {
+  it('separates 3-edge bundles that share the same node side by default', () => {
     const allEdges = [
       { id: 'edge-1', source: 'a', target: 'b', sourceHandle: 'right', targetHandle: 'left' },
       { id: 'edge-2', source: 'a', target: 'c', sourceHandle: 'right', targetHandle: 'left' },
@@ -228,9 +268,8 @@ describe('buildEdgePath', () => {
       'smoothstep'
     );
 
-    expect(getMovePoint(first.edgePath)).not.toBe('100,100');
-    expect(getMovePoint(second.edgePath)).toBe('100,100');
-    expect(getMovePoint(third.edgePath)).not.toBe('100,100');
+    expect(first.labelY).toBeLessThan(second.labelY);
+    expect(third.labelY).toBeGreaterThan(second.labelY);
   });
 
   it('nudges bundle labels further for denser side bundles', () => {
@@ -339,7 +378,7 @@ describe('buildEdgePath', () => {
     expect(getMovePoint(center.edgePath)).toBe('100,100');
   });
 
-  it('does not use a shared source trunk for 3-edge bundles by default', () => {
+  it('uses a shared source trunk for 3-edge bundles by default', () => {
     const threeEdges = [
       { id: 'edge-1', source: 'a', target: 'b', sourceHandle: 'right', targetHandle: 'left' },
       { id: 'edge-2', source: 'a', target: 'c', sourceHandle: 'right', targetHandle: 'left' },
@@ -384,7 +423,7 @@ describe('buildEdgePath', () => {
       'smoothstep'
     );
 
-    expect(getMovePoint(outer.edgePath)).not.toBe('100,100');
+    expect(getMovePoint(outer.edgePath)).toBe('100,100');
     expect(getMovePoint(center.edgePath)).toBe('100,100');
   });
 
@@ -643,7 +682,7 @@ describe('buildEdgePath', () => {
     expect(result.edgePath).not.toContain('L 4 0');
   });
 
-  it('adds an orthogonal bridge from the current handle center into the ELK route', () => {
+  it('uses the rounded ELK connector path by default', () => {
     const result = buildEdgePath(
       {
         id: 'edge-elk-bridge',
@@ -668,11 +707,11 @@ describe('buildEdgePath', () => {
       }
     );
 
-    expect(result.edgePath).toContain('Q 12 0');
-    expect(result.edgePath).toContain('Q 12 30 20 30');
+    expect(result.edgePath).toContain('L 24 18 Q 40 30 60 30');
+    expect(result.edgePath).not.toContain('Q 12 0');
   });
 
-  it('still applies legacy renderer-side fanout to ELK endpoints by default', () => {
+  it('keeps ELK paths anchored at the real handle center by default', () => {
     const elkSiblingEdges = [
       { id: 'elk-1', source: 'a', target: 'b', sourceHandle: 'right', targetHandle: 'left' },
       { id: 'elk-2', source: 'a', target: 'c', sourceHandle: 'right', targetHandle: 'left' },
@@ -705,8 +744,8 @@ describe('buildEdgePath', () => {
       }
     );
 
-    expect(getMovePoint(first.edgePath)).not.toBe('100,100');
+    expect(getMovePoint(first.edgePath)).toBe('100,100');
     expect(first.labelX).toBe(160);
-    expect(first.labelY).toBeLessThan(70);
+    expect(first.labelY).toBe(70);
   });
 });
diff --git a/src/components/custom-edge/pathUtils.ts b/src/components/custom-edge/pathUtils.ts
index 02d2ed0..17f420e 100644
--- a/src/components/custom-edge/pathUtils.ts
+++ b/src/components/custom-edge/pathUtils.ts
@@ -1,663 +1,36 @@
 import { getBezierPath, getSmoothStepPath, getStraightPath, Position } from '@/lib/reactflowCompat';
-import { ROLLOUT_FLAGS } from '@/config/rolloutFlags';
 import { isEdgeInteractionLowDetailModeActive } from './edgeRenderMode';
 import { measureDevPerformance } from '@/lib/devPerformance';
-
-interface MinimalEdge {
-    id: string;
-    source: string;
-    target: string;
-    sourceHandle?: string | null;
-    targetHandle?: string | null;
-}
-
-interface MinimalNode {
-    id: string;
-    position?: { x: number; y: number };
-    positionAbsolute?: { x: number; y: number };
-    width?: number;
-    height?: number;
-    data?: {
-        shape?: string;
-    };
-}
-
-interface EdgePathParams {
-    id: string;
-    source: string;
-    target: string;
-    sourceX: number;
-    sourceY: number;
-    targetX: number;
-    targetY: number;
-    sourcePosition: Position;
-    targetPosition: Position;
-    sourceHandleId?: string | null;
-    targetHandleId?: string | null;
-}
-
-type EdgeVariant = 'bezier' | 'smoothstep' | 'step' | 'straight';
-type LoopDirection = 'right' | 'top' | 'left' | 'bottom';
-
-interface EdgePathOptions {
-    forceOrthogonal?: boolean;
-    elkPoints?: { x: number; y: number }[];
-    mindmapBranchKind?: 'root' | 'branch';
-    routingMode?: 'auto' | 'elk' | 'manual';
-    waypoints?: { x: number; y: number }[];
-    waypoint?: {
-        x: number;
-        y: number;
-    };
-}
-
-interface SelfLoopResult {
-    path: string;
-    labelX: number;
-    labelY: number;
-}
-
-interface EdgePathResult {
-    edgePath: string;
-    labelX: number;
-    labelY: number;
-}
-
-const POLYLINE_EPSILON = 0.5;
-const NODE_LOOKUP_CACHE = new WeakMap<MinimalNode[], Map<string, MinimalNode>>();
-const PARALLEL_EDGE_GROUP_CACHE = new WeakMap<MinimalEdge[], Map<string, MinimalEdge[]>>();
-const ENDPOINT_SIBLING_CACHE = new WeakMap<MinimalEdge[], WeakMap<MinimalNode[], Map<string, MinimalEdge[]>>>();
-
-function getNodeLookup(allNodes: MinimalNode[]): Map<string, MinimalNode> {
-    let lookup = NODE_LOOKUP_CACHE.get(allNodes);
-    if (!lookup) {
-        lookup = new Map(allNodes.map((node) => [node.id, node]));
-        NODE_LOOKUP_CACHE.set(allNodes, lookup);
-    }
-    return lookup;
-}
-
-function getParallelEdgeGroups(allEdges: MinimalEdge[]): Map<string, MinimalEdge[]> {
-    let groups = PARALLEL_EDGE_GROUP_CACHE.get(allEdges);
-    if (!groups) {
-        groups = new Map<string, MinimalEdge[]>();
-        for (const edge of allEdges) {
-            const key = edge.source < edge.target
-                ? `${edge.source}|${edge.target}`
-                : `${edge.target}|${edge.source}`;
-            const bucket = groups.get(key);
-            if (bucket) {
-                bucket.push(edge);
-            } else {
-                groups.set(key, [edge]);
-            }
-        }
-        PARALLEL_EDGE_GROUP_CACHE.set(allEdges, groups);
-    }
-    return groups;
-}
-
-function getEndpointSiblingBuckets(allEdges: MinimalEdge[], allNodes: MinimalNode[]): Map<string, MinimalEdge[]> {
-    let nodesCache = ENDPOINT_SIBLING_CACHE.get(allEdges);
-    if (!nodesCache) {
-        nodesCache = new WeakMap<MinimalNode[], Map<string, MinimalEdge[]>>();
-        ENDPOINT_SIBLING_CACHE.set(allEdges, nodesCache);
-    }
-
-    let buckets = nodesCache.get(allNodes);
-    if (!buckets) {
-        const nodeLookup = getNodeLookup(allNodes);
-        buckets = new Map<string, MinimalEdge[]>();
-        const ensureBucket = (key: string): MinimalEdge[] => {
-            const existing = buckets?.get(key);
-            if (existing) return existing;
-            const next: MinimalEdge[] = [];
-            buckets?.set(key, next);
-            return next;
-        };
-
-        for (const edge of allEdges) {
-            ensureBucket(`source|${edge.source}|${edge.sourceHandle ?? ''}`).push(edge);
-            ensureBucket(`target|${edge.target}|${edge.targetHandle ?? ''}`).push(edge);
-        }
-
-        for (const [key, siblings] of buckets.entries()) {
-            const [, , handleId] = key.split('|');
-            const direction = key.startsWith('source|') ? 'source' : 'target';
-            siblings.sort((a, b) => {
-                const remoteA = getRemoteNodeAxisValueFromLookup(nodeLookup, a, direction, handleId || null);
-                const remoteB = getRemoteNodeAxisValueFromLookup(nodeLookup, b, direction, handleId || null);
-                if (remoteA !== remoteB) {
-                    return remoteA - remoteB;
-                }
-
-                return a.id.localeCompare(b.id);
-            });
-        }
-
-        nodesCache.set(allNodes, buckets);
-    }
-
-    return buckets;
-}
-
-function getShapeAwareElkAnchorClearance(shape?: string): number {
-    switch (shape) {
-        case 'diamond':
-            return 12;
-        case 'circle':
-        case 'ellipse':
-        case 'capsule':
-            return 8;
-        case 'hexagon':
-        case 'parallelogram':
-        case 'cylinder':
-            return 6;
-        default:
-            return 0;
-    }
-}
-
-function isNearlySamePoint(a: { x: number; y: number }, b: { x: number; y: number }): boolean {
-    return Math.abs(a.x - b.x) <= POLYLINE_EPSILON && Math.abs(a.y - b.y) <= POLYLINE_EPSILON;
-}
-
-function normalizePolylinePoints(points: { x: number; y: number }[]): { x: number; y: number }[] {
-    const deduped: { x: number; y: number }[] = [];
-
-    for (const point of points) {
-        if (deduped.length === 0 || !isNearlySamePoint(deduped[deduped.length - 1], point)) {
-            deduped.push(point);
-        }
-    }
-
-    if (deduped.length <= 2) {
-        return deduped;
-    }
-
-    const normalized: { x: number; y: number }[] = [deduped[0]];
-    for (let index = 1; index < deduped.length - 1; index += 1) {
-        const previous = normalized[normalized.length - 1];
-        const current = deduped[index];
-        const next = deduped[index + 1];
-        const sameX =
-            Math.abs(previous.x - current.x) <= POLYLINE_EPSILON
-            && Math.abs(current.x - next.x) <= POLYLINE_EPSILON;
-        const sameY =
-            Math.abs(previous.y - current.y) <= POLYLINE_EPSILON
-            && Math.abs(current.y - next.y) <= POLYLINE_EPSILON;
-
-        if (!sameX && !sameY) {
-            normalized.push(current);
-        }
-    }
-    normalized.push(deduped[deduped.length - 1]);
-
-    return normalized;
-}
-
-function applyAnchorClearance(
-    point: { x: number; y: number },
-    position: Position,
-    clearance: number
-): { x: number; y: number } {
-    if (clearance <= 0) {
-        return point;
-    }
-
-    switch (position) {
-        case Position.Top:
-            return { x: point.x, y: point.y - clearance };
-        case Position.Bottom:
-            return { x: point.x, y: point.y + clearance };
-        case Position.Left:
-            return { x: point.x - clearance, y: point.y };
-        case Position.Right:
-            return { x: point.x + clearance, y: point.y };
-        default:
-            return point;
-    }
-}
-
-function getNodeById(allNodes: MinimalNode[], nodeId: string): MinimalNode | undefined {
-    return getNodeLookup(allNodes).get(nodeId);
-}
-
-function getElkLabelPosition(
-    sourceX: number,
-    sourceY: number,
-    points: { x: number; y: number }[]
-): { x: number; y: number } {
-    if (points.length === 0) {
-        return { x: sourceX, y: sourceY };
-    }
-
-    if (points.length === 1) {
-        return points[0];
-    }
-
-    const middleIndex = Math.floor(points.length / 2);
-    if (points.length % 2 === 0) {
-        const firstPoint = points[middleIndex - 1];
-        const secondPoint = points[middleIndex];
-        return {
-            x: (firstPoint.x + secondPoint.x) / 2,
-            y: (firstPoint.y + secondPoint.y) / 2,
-        };
-    }
-
-    return points[middleIndex];
-}
-
-function withBundledLabelOffset(
-    edgePath: string,
-    labelX: number,
-    labelY: number,
-    params: Pick<EdgePathParams, 'sourcePosition' | 'targetPosition'>,
-    bundleOffset: number
-): EdgePathResult {
-    const nudgedLabel = nudgeLabelByBundleOffset({ x: labelX, y: labelY }, params, bundleOffset);
-    return { edgePath, labelX: nudgedLabel.x, labelY: nudgedLabel.y };
-}
-
-function getPathMidpoint(points: { x: number; y: number }[]): { x: number; y: number } {
-    if (points.length <= 1) {
-        return points[0] ?? { x: 0, y: 0 };
-    }
-
-    const segmentLengths = [];
-    let totalLength = 0;
-    for (let index = 0; index < points.length - 1; index += 1) {
-        const start = points[index];
-        const end = points[index + 1];
-        const length = Math.hypot(end.x - start.x, end.y - start.y);
-        segmentLengths.push(length);
-        totalLength += length;
-    }
-
-    let remaining = totalLength / 2;
-    for (let index = 0; index < segmentLengths.length; index += 1) {
-        const length = segmentLengths[index];
-        if (remaining <= length && length > 0) {
-            const start = points[index];
-            const end = points[index + 1];
-            const ratio = remaining / length;
-            return {
-                x: start.x + (end.x - start.x) * ratio,
-                y: start.y + (end.y - start.y) * ratio,
-            };
-        }
-        remaining -= length;
-    }
-
-    return points[Math.floor(points.length / 2)];
-}
-
-function getAdaptiveFanoutSpacing(siblingCount: number): number {
-    if (siblingCount <= 1) return 0;
-    if (ROLLOUT_FLAGS.connectorModelV1) {
-        return Math.min(18, 10 + Math.max(0, siblingCount - 2) * 1.5);
-    }
-    return Math.min(22, 12 + Math.max(0, siblingCount - 2) * 2);
-}
-
-function getParallelEdgeOffset(edgeId: string, source: string, target: string, allEdges: MinimalEdge[]): number {
-    const key = source < target ? `${source}|${target}` : `${target}|${source}`;
-    const siblings = getParallelEdgeGroups(allEdges).get(key) ?? [];
-    if (siblings.length <= 1) return 0;
-
-    const index = siblings.findIndex((edge) => edge.id === edgeId);
-    const spacing = 25;
-    return (index - (siblings.length - 1) / 2) * spacing;
-}
-
-function getEndpointFanoutOffset(
-    edgeId: string,
-    allEdges: MinimalEdge[],
-    allNodes: MinimalNode[],
-    endpoint: { nodeId: string; handleId?: string | null; direction: 'source' | 'target' }
-): number {
-    const siblings = getEndpointSiblings(allEdges, allNodes, endpoint);
-
-    if (siblings.length <= 1) return 0;
-
-    const index = siblings.findIndex((edge) => edge.id === edgeId);
-    if (index === -1) return 0;
-
-    const spacing = getAdaptiveFanoutSpacing(siblings.length);
-    return (index - (siblings.length - 1) / 2) * spacing;
-}
-
-function getEndpointSiblingCount(
-    allEdges: MinimalEdge[],
-    allNodes: MinimalNode[],
-    endpoint: { nodeId: string; handleId?: string | null; direction: 'source' | 'target' }
-): number {
-    return getEndpointSiblings(allEdges, allNodes, endpoint).length;
-}
-
-function getEndpointSiblings(
-    allEdges: MinimalEdge[],
-    allNodes: MinimalNode[],
-    endpoint: { nodeId: string; handleId?: string | null; direction: 'source' | 'target' }
-): MinimalEdge[] {
-    return getEndpointSiblingBuckets(allEdges, allNodes).get(
-        `${endpoint.direction}|${endpoint.nodeId}|${endpoint.handleId ?? ''}`
-    ) ?? [];
-}
-
-function getRemoteNodeAxisValueFromLookup(
-    nodeLookup: Map<string, MinimalNode>,
-    edge: MinimalEdge,
-    direction: 'source' | 'target',
-    handleId: string | null
-): number {
-    const remoteNodeId = direction === 'source' ? edge.target : edge.source;
-    const remoteNode = nodeLookup.get(remoteNodeId);
-    if (!remoteNode) {
-        return Number.POSITIVE_INFINITY;
-    }
-
-    const position = remoteNode.positionAbsolute ?? remoteNode.position ?? { x: 0, y: 0 };
-    const width = remoteNode.width ?? 0;
-    const height = remoteNode.height ?? 0;
-    const usesVerticalAxis = handleId === 'left' || handleId === 'right';
-
-    return usesVerticalAxis ? position.y + height / 2 : position.x + width / 2;
-}
-
-function getSelfLoopPath(
-    sourceX: number,
-    sourceY: number,
-    nodeWidth = 180,
-    nodeHeight = 60,
-    loopDirection: LoopDirection = 'right'
-): SelfLoopResult {
-    const size = Math.max(nodeWidth, nodeHeight) * 0.5;
-    const offset = size * 0.8;
-
-    switch (loopDirection) {
-        case 'top':
-            return {
-                path: `M ${sourceX - 15} ${sourceY} C ${sourceX - offset} ${sourceY - size * 1.5}, ${sourceX + offset} ${sourceY - size * 1.5}, ${sourceX + 15} ${sourceY}`,
-                labelX: sourceX,
-                labelY: sourceY - size * 1.2,
-            };
-        case 'left':
-            return {
-                path: `M ${sourceX} ${sourceY - 15} C ${sourceX - size * 1.5} ${sourceY - offset}, ${sourceX - size * 1.5} ${sourceY + offset}, ${sourceX} ${sourceY + 15}`,
-                labelX: sourceX - size * 1.2,
-                labelY: sourceY,
-            };
-        case 'bottom':
-            return {
-                path: `M ${sourceX - 15} ${sourceY} C ${sourceX - offset} ${sourceY + size * 1.5}, ${sourceX + offset} ${sourceY + size * 1.5}, ${sourceX + 15} ${sourceY}`,
-                labelX: sourceX,
-                labelY: sourceY + size * 1.2,
-            };
-        case 'right':
-        default:
-            return {
-                path: `M ${sourceX} ${sourceY - 15} C ${sourceX + size * 1.5} ${sourceY - offset}, ${sourceX + size * 1.5} ${sourceY + offset}, ${sourceX} ${sourceY + 15}`,
-                labelX: sourceX + size * 1.2,
-                labelY: sourceY,
-            };
-    }
-}
-
-function getOffsetVector(position: Position, offset: number): { x: number; y: number } {
-    switch (position) {
-        case Position.Top:
-        case Position.Bottom:
-            return { x: offset, y: 0 };
-        case Position.Left:
-        case Position.Right:
-            return { x: 0, y: offset };
-        default:
-            return { x: 0, y: 0 };
-    }
-}
-
-function getLoopDirection(position: Position): LoopDirection {
-    switch (position) {
-        case Position.Top:
-            return 'top';
-        case Position.Left:
-            return 'left';
-        case Position.Bottom:
-            return 'bottom';
-        case Position.Right:
-        default:
-            return 'right';
-    }
-}
-
-function nudgeLabelByBundleOffset(
-    label: { x: number; y: number },
-    params: Pick<EdgePathParams, 'sourcePosition' | 'targetPosition'>,
-    bundleOffset: number
-): { x: number; y: number } {
-    if (bundleOffset === 0) return label;
-
-    const labelNudge = bundleOffset * 0.7;
-    const usesVerticalSpread =
-        params.sourcePosition === Position.Left
-        || params.sourcePosition === Position.Right
-        || params.targetPosition === Position.Left
-        || params.targetPosition === Position.Right;
-
-    return usesVerticalSpread
-        ? { x: label.x, y: label.y + labelNudge }
-        : { x: label.x + labelNudge, y: label.y };
-}
-
-function buildMindmapRootBranchPath(
-    sourceX: number,
-    sourceY: number,
-    targetX: number,
-    targetY: number
-): EdgePathResult {
-    const direction = targetX >= sourceX ? 1 : -1;
-    const horizontalDistance = Math.abs(targetX - sourceX);
-    const trunkLength = Math.min(96, Math.max(56, horizontalDistance * 0.18));
-    const sourceControlX = sourceX + direction * trunkLength * 0.5;
-    const bundleX = sourceX + direction * trunkLength;
-    const targetControlX = targetX - direction * Math.min(100, Math.max(60, horizontalDistance * 0.24));
-    const edgePath = [
-        `M ${sourceX} ${sourceY}`,
-        `C ${sourceControlX} ${sourceY}, ${bundleX} ${sourceY}, ${bundleX} ${sourceY}`,
-        `C ${bundleX + direction * 28} ${sourceY}, ${targetControlX} ${targetY}, ${targetX} ${targetY}`,
-    ].join(' ');
-
-    return {
-        edgePath,
-        labelX: (bundleX + targetX) / 2,
-        labelY: (sourceY + targetY) / 2,
-    };
-}
-
-function buildMindmapTopicBranchPath(
-    sourceX: number,
-    sourceY: number,
-    targetX: number,
-    targetY: number
-): EdgePathResult {
-    const direction = targetX >= sourceX ? 1 : -1;
-    const horizontalDistance = Math.abs(targetX - sourceX);
-    const trunkLength = Math.min(68, Math.max(34, horizontalDistance * 0.16));
-    const sourceControlX = sourceX + direction * trunkLength * 0.55;
-    const bundleX = sourceX + direction * trunkLength;
-    const targetControlX = targetX - direction * Math.min(72, Math.max(42, horizontalDistance * 0.2));
-    const edgePath = [
-        `M ${sourceX} ${sourceY}`,
-        `C ${sourceControlX} ${sourceY}, ${bundleX} ${sourceY}, ${bundleX} ${sourceY}`,
-        `C ${bundleX + direction * 18} ${sourceY}, ${targetControlX} ${targetY}, ${targetX} ${targetY}`,
-    ].join(' ');
-
-    return {
-        edgePath,
-        labelX: (bundleX + targetX) / 2,
-        labelY: (sourceY + targetY) / 2,
-    };
-}
-
-/**
- * Builds an SVG path string from a polyline with rounded corners.
- * Uses quadratic Bézier curves at each interior bend point.
- */
-function buildRoundedPolylinePath(points: { x: number; y: number }[], cornerRadius: number): string {
-    if (points.length === 0) return '';
-    if (points.length === 1) return `M ${points[0].x} ${points[0].y}`;
-    if (points.length === 2) return `M ${points[0].x} ${points[0].y} L ${points[1].x} ${points[1].y}`;
-
-    let path = `M ${points[0].x} ${points[0].y}`;
-
-    for (let i = 1; i < points.length - 1; i++) {
-        const prev = points[i - 1];
-        const curr = points[i];
-        const next = points[i + 1];
-
-        const toPrev = Math.hypot(curr.x - prev.x, curr.y - prev.y);
-        const toNext = Math.hypot(next.x - curr.x, next.y - curr.y);
-
-        // Clamp the radius so it never exceeds half the shorter segment
-        const r = Math.min(cornerRadius, toPrev / 2, toNext / 2);
-
-        if (r < 1) {
-            // Segments too short to round — just line through
-            path += ` L ${curr.x} ${curr.y}`;
-            continue;
-        }
-
-        // Entry control point: r units back from curr along prev→curr
-        const entryX = curr.x + ((prev.x - curr.x) / toPrev) * r;
-        const entryY = curr.y + ((prev.y - curr.y) / toPrev) * r;
-
-        // Exit control point: r units forward from curr along curr→next
-        const exitX = curr.x + ((next.x - curr.x) / toNext) * r;
-        const exitY = curr.y + ((next.y - curr.y) / toNext) * r;
-
-        path += ` L ${entryX} ${entryY} Q ${curr.x} ${curr.y} ${exitX} ${exitY}`;
-    }
-
-    const last = points[points.length - 1];
-    path += ` L ${last.x} ${last.y}`;
-
-    return path;
-}
-
-function enforceMinimumEndpointLead(
-    points: { x: number; y: number }[],
-    sourcePosition: Position,
-    targetPosition: Position,
-    minimumLead = 12
-): { x: number; y: number }[] {
-    if (points.length < 3) {
-        return points;
-    }
-
-    const nextPoints = points.map((point) => ({ ...point }));
-
-    const shiftSourceLead = (): void => {
-        const source = nextPoints[0];
-        const first = nextPoints[1];
-
-        if (sourcePosition === Position.Left || sourcePosition === Position.Right) {
-            if (Math.abs(first.y - source.y) > 0.5) return;
-            const delta = Math.abs(first.x - source.x);
-            if (delta >= minimumLead) return;
-            const desiredX = source.x + (sourcePosition === Position.Right ? minimumLead : -minimumLead);
-            const sharedX = first.x;
-            for (let index = 1; index < nextPoints.length; index += 1) {
-                if (Math.abs(nextPoints[index].x - sharedX) > 0.5) break;
-                nextPoints[index].x = desiredX;
-            }
-            return;
-        }
-
-        if (Math.abs(first.x - source.x) > 0.5) return;
-        const delta = Math.abs(first.y - source.y);
-        if (delta >= minimumLead) return;
-        const desiredY = source.y + (sourcePosition === Position.Bottom ? minimumLead : -minimumLead);
-        const sharedY = first.y;
-        for (let index = 1; index < nextPoints.length; index += 1) {
-            if (Math.abs(nextPoints[index].y - sharedY) > 0.5) break;
-            nextPoints[index].y = desiredY;
-        }
-    };
-
-    const shiftTargetLead = (): void => {
-        const target = nextPoints[nextPoints.length - 1];
-        const lastInterior = nextPoints[nextPoints.length - 2];
-
-        if (targetPosition === Position.Left || targetPosition === Position.Right) {
-            if (Math.abs(lastInterior.y - target.y) > 0.5) return;
-            const delta = Math.abs(target.x - lastInterior.x);
-            if (delta >= minimumLead) return;
-            const desiredX = target.x + (targetPosition === Position.Right ? -minimumLead : minimumLead);
-            const sharedX = lastInterior.x;
-            for (let index = nextPoints.length - 2; index >= 0; index -= 1) {
-                if (Math.abs(nextPoints[index].x - sharedX) > 0.5) break;
-                nextPoints[index].x = desiredX;
-            }
-            return;
-        }
-
-        if (Math.abs(lastInterior.x - target.x) > 0.5) return;
-        const delta = Math.abs(target.y - lastInterior.y);
-        if (delta >= minimumLead) return;
-        const desiredY = target.y + (targetPosition === Position.Bottom ? -minimumLead : minimumLead);
-        const sharedY = lastInterior.y;
-        for (let index = nextPoints.length - 2; index >= 0; index -= 1) {
-            if (Math.abs(nextPoints[index].y - sharedY) > 0.5) break;
-            nextPoints[index].y = desiredY;
-        }
-    };
-
-    shiftSourceLead();
-    shiftTargetLead();
-    return normalizePolylinePoints(nextPoints);
-}
-
-function buildElkEndpointBridge(
-    anchor: { x: number; y: number },
-    routePoint: { x: number; y: number } | undefined,
-    position: Position,
-    minimumLead = 12,
-    direction: 'source' | 'target' = 'source'
-): { x: number; y: number }[] {
-    if (!routePoint) {
-        return [];
-    }
-
-    const bridge: { x: number; y: number }[] = [];
-
-    if (position === Position.Left || position === Position.Right) {
-        const leadSign = position === Position.Right ? 1 : -1;
-        const leadX = anchor.x + leadSign * minimumLead;
-
-        if (direction === 'source') {
-            bridge.push({ x: leadX, y: anchor.y });
-            bridge.push({ x: leadX, y: routePoint.y });
-        } else {
-            bridge.push({ x: leadX, y: routePoint.y });
-            bridge.push({ x: leadX, y: anchor.y });
-        }
-    } else {
-        const leadSign = position === Position.Bottom ? 1 : -1;
-        const leadY = anchor.y + leadSign * minimumLead;
-
-        if (direction === 'source') {
-            bridge.push({ x: anchor.x, y: leadY });
-            bridge.push({ x: routePoint.x, y: leadY });
-        } else {
-            bridge.push({ x: routePoint.x, y: leadY });
-            bridge.push({ x: anchor.x, y: leadY });
-        }
-    }
-
-    return normalizePolylinePoints([anchor, ...bridge, routePoint]).slice(1, -1);
-}
+import {
+    applyAnchorClearance,
+    buildMindmapRootBranchPath,
+    buildMindmapTopicBranchPath,
+    buildRoundedPolylinePath,
+    enforceMinimumEndpointLead,
+    getElkLabelPosition,
+    getLoopDirection,
+    getOffsetVector,
+    getPathMidpoint,
+    getSelfLoopPath,
+    withBundledLabelOffset,
+} from './pathUtilsGeometry';
+import {
+    getEndpointFanoutOffset,
+    getEndpointSiblingCount,
+    getNodeById,
+    getParallelEdgeOffset,
+    getShapeAwareElkAnchorClearance,
+} from './pathUtilsSiblingRouting';
+import type {
+    EdgePathOptions,
+    EdgePathParams,
+    EdgePathResult,
+    EdgeVariant,
+    MinimalEdge,
+    MinimalNode,
+} from './pathUtilsTypes';
+
+const EDGE_ROUTING_FAST_PATH_THRESHOLD = 600;
 
 export function buildEdgePath(
     params: EdgePathParams,
@@ -668,6 +41,7 @@ export function buildEdgePath(
 ): EdgePathResult {
     return measureDevPerformance('buildEdgePath', () => {
         const interactionLowDetailModeActive = isEdgeInteractionLowDetailModeActive();
+        const graphRoutingFastPathActive = interactionLowDetailModeActive || allEdges.length >= EDGE_ROUTING_FAST_PATH_THRESHOLD;
 
         if (params.source === params.target) {
             const loop = getSelfLoopPath(
@@ -685,7 +59,7 @@ export function buildEdgePath(
             && options.elkPoints
             && options.elkPoints.length > 0;
 
-        if (shouldUseElkRoute && ROLLOUT_FLAGS.connectorModelV1) {
+        if (shouldUseElkRoute) {
             const points = options.elkPoints;
             const sourceNode = getNodeById(allNodes, params.source);
             const targetNode = getNodeById(allNodes, params.target);
@@ -704,7 +78,7 @@ export function buildEdgePath(
                 params.sourcePosition,
                 params.targetPosition
             );
-            const pathStr = buildRoundedPolylinePath(allPoints, 8);
+            const pathStr = buildRoundedPolylinePath(allPoints, 20);
             const { x: labelX, y: labelY } = getElkLabelPosition(adjustedSource.x, adjustedSource.y, points);
 
             return {
@@ -714,26 +88,26 @@ export function buildEdgePath(
             };
         }
 
-        const pairOffset = interactionLowDetailModeActive
+        const pairOffset = graphRoutingFastPathActive
             ? 0
             : getParallelEdgeOffset(params.id, params.source, params.target, allEdges);
         const isMindmapBranch = Boolean(options.mindmapBranchKind) && variant === 'bezier' && !options.forceOrthogonal;
         const isMindmapRootBranch = options.mindmapBranchKind === 'root' && isMindmapBranch;
-        const sourceSiblingCount = interactionLowDetailModeActive
+        const sourceSiblingCount = graphRoutingFastPathActive
             ? 0
             : getEndpointSiblingCount(allEdges, allNodes, {
                 nodeId: params.source,
                 handleId: params.sourceHandleId,
                 direction: 'source',
             });
-        const sourceFanoutOffset = interactionLowDetailModeActive
+        const sourceFanoutOffset = graphRoutingFastPathActive
             ? 0
             : getEndpointFanoutOffset(params.id, allEdges, allNodes, {
                 nodeId: params.source,
                 handleId: params.sourceHandleId,
                 direction: 'source',
             });
-        const targetFanoutOffset = interactionLowDetailModeActive
+        const targetFanoutOffset = graphRoutingFastPathActive
             ? 0
             : getEndpointFanoutOffset(params.id, allEdges, allNodes, {
                 nodeId: params.target,
@@ -743,7 +117,7 @@ export function buildEdgePath(
         const shouldUseSharedSourceTrunk =
             !isMindmapBranch
             && (variant === 'smoothstep' || variant === 'step' || options.forceOrthogonal)
-            && sourceSiblingCount >= (ROLLOUT_FLAGS.connectorModelV1 ? 3 : 4)
+            && sourceSiblingCount >= 3
             && (
                 params.sourcePosition === Position.Left
                 || params.sourcePosition === Position.Right
@@ -777,7 +151,7 @@ export function buildEdgePath(
             const pathPoints = [{ x: sourceX, y: sourceY }, ...manualWaypoints, { x: targetX, y: targetY }];
             const midpoint = getPathMidpoint(pathPoints);
             return withBundledLabelOffset(
-                buildRoundedPolylinePath(pathPoints, 8),
+                buildRoundedPolylinePath(pathPoints, 20),
                 midpoint.x,
                 midpoint.y,
                 params,
@@ -785,38 +159,6 @@ export function buildEdgePath(
             );
         }
 
-        if (shouldUseElkRoute) {
-            const points = options.elkPoints;
-            const sourceNode = getNodeById(allNodes, params.source);
-            const targetNode = getNodeById(allNodes, params.target);
-            const adjustedSource = applyAnchorClearance(
-                { x: sourceX, y: sourceY },
-                params.sourcePosition,
-                getShapeAwareElkAnchorClearance(sourceNode?.data?.shape)
-            );
-            const adjustedTarget = applyAnchorClearance(
-                { x: targetX, y: targetY },
-                params.targetPosition,
-                getShapeAwareElkAnchorClearance(targetNode?.data?.shape)
-            );
-
-            const allPoints = enforceMinimumEndpointLead(
-                normalizePolylinePoints([
-                    adjustedSource,
-                    ...buildElkEndpointBridge(adjustedSource, points[0], params.sourcePosition, 12, 'source'),
-                    ...points,
-                    ...buildElkEndpointBridge(adjustedTarget, points[points.length - 1], params.targetPosition, 12, 'target'),
-                    adjustedTarget,
-                ]),
-                params.sourcePosition,
-                params.targetPosition
-            );
-            const pathStr = buildRoundedPolylinePath(allPoints, 8);
-
-            const { x: labelX, y: labelY } = getElkLabelPosition(adjustedSource.x, adjustedSource.y, points);
-            return withBundledLabelOffset(pathStr, labelX, labelY, params, labelBundleOffset);
-        }
-
         if (variant === 'bezier' && !options.forceOrthogonal) {
             if (isMindmapBranch) {
                 return withBundledLabelOffset(
diff --git a/src/components/custom-edge/pathUtilsGeometry.ts b/src/components/custom-edge/pathUtilsGeometry.ts
new file mode 100644
index 0000000..e34e15f
--- /dev/null
+++ b/src/components/custom-edge/pathUtilsGeometry.ts
@@ -0,0 +1,425 @@
+import { Position } from '@/lib/reactflowCompat';
+import type {
+  EdgePathParams,
+  EdgePathResult,
+  LoopDirection,
+  SelfLoopResult,
+} from './pathUtilsTypes';
+
+const POLYLINE_EPSILON = 0.5;
+
+function isNearlySamePoint(a: { x: number; y: number }, b: { x: number; y: number }): boolean {
+  return Math.abs(a.x - b.x) <= POLYLINE_EPSILON && Math.abs(a.y - b.y) <= POLYLINE_EPSILON;
+}
+
+export function normalizePolylinePoints(points: { x: number; y: number }[]): { x: number; y: number }[] {
+  const deduped: { x: number; y: number }[] = [];
+
+  for (const point of points) {
+    if (deduped.length === 0 || !isNearlySamePoint(deduped[deduped.length - 1], point)) {
+      deduped.push(point);
+    }
+  }
+
+  if (deduped.length <= 2) {
+    return deduped;
+  }
+
+  const normalized: { x: number; y: number }[] = [deduped[0]];
+  for (let index = 1; index < deduped.length - 1; index += 1) {
+    const previous = normalized[normalized.length - 1];
+    const current = deduped[index];
+    const next = deduped[index + 1];
+    const sameX =
+      Math.abs(previous.x - current.x) <= POLYLINE_EPSILON
+      && Math.abs(current.x - next.x) <= POLYLINE_EPSILON;
+    const sameY =
+      Math.abs(previous.y - current.y) <= POLYLINE_EPSILON
+      && Math.abs(current.y - next.y) <= POLYLINE_EPSILON;
+
+    if (!sameX && !sameY) {
+      normalized.push(current);
+    }
+  }
+  normalized.push(deduped[deduped.length - 1]);
+
+  return normalized;
+}
+
+export function applyAnchorClearance(
+  point: { x: number; y: number },
+  position: Position,
+  clearance: number,
+): { x: number; y: number } {
+  if (clearance <= 0) {
+    return point;
+  }
+
+  switch (position) {
+    case Position.Top:
+      return { x: point.x, y: point.y - clearance };
+    case Position.Bottom:
+      return { x: point.x, y: point.y + clearance };
+    case Position.Left:
+      return { x: point.x - clearance, y: point.y };
+    case Position.Right:
+      return { x: point.x + clearance, y: point.y };
+    default:
+      return point;
+  }
+}
+
+export function getElkLabelPosition(
+  sourceX: number,
+  sourceY: number,
+  points: { x: number; y: number }[],
+): { x: number; y: number } {
+  if (points.length === 0) {
+    return { x: sourceX, y: sourceY };
+  }
+
+  if (points.length === 1) {
+    return points[0];
+  }
+
+  const middleIndex = Math.floor(points.length / 2);
+  if (points.length % 2 === 0) {
+    const firstPoint = points[middleIndex - 1];
+    const secondPoint = points[middleIndex];
+    return {
+      x: (firstPoint.x + secondPoint.x) / 2,
+      y: (firstPoint.y + secondPoint.y) / 2,
+    };
+  }
+
+  return points[middleIndex];
+}
+
+function nudgeLabelByBundleOffset(
+  label: { x: number; y: number },
+  params: Pick<EdgePathParams, 'sourcePosition' | 'targetPosition'>,
+  bundleOffset: number,
+): { x: number; y: number } {
+  if (bundleOffset === 0) {
+    return label;
+  }
+
+  const labelNudge = bundleOffset * 0.7;
+  const usesVerticalSpread =
+    params.sourcePosition === Position.Left
+    || params.sourcePosition === Position.Right
+    || params.targetPosition === Position.Left
+    || params.targetPosition === Position.Right;
+
+  return usesVerticalSpread
+    ? { x: label.x, y: label.y + labelNudge }
+    : { x: label.x + labelNudge, y: label.y };
+}
+
+export function withBundledLabelOffset(
+  edgePath: string,
+  labelX: number,
+  labelY: number,
+  params: Pick<EdgePathParams, 'sourcePosition' | 'targetPosition'>,
+  bundleOffset: number,
+): EdgePathResult {
+  const nudgedLabel = nudgeLabelByBundleOffset({ x: labelX, y: labelY }, params, bundleOffset);
+  return { edgePath, labelX: nudgedLabel.x, labelY: nudgedLabel.y };
+}
+
+export function getPathMidpoint(points: { x: number; y: number }[]): { x: number; y: number } {
+  if (points.length <= 1) {
+    return points[0] ?? { x: 0, y: 0 };
+  }
+
+  const segmentLengths = [];
+  let totalLength = 0;
+  for (let index = 0; index < points.length - 1; index += 1) {
+    const start = points[index];
+    const end = points[index + 1];
+    const length = Math.hypot(end.x - start.x, end.y - start.y);
+    segmentLengths.push(length);
+    totalLength += length;
+  }
+
+  let remaining = totalLength / 2;
+  for (let index = 0; index < segmentLengths.length; index += 1) {
+    const length = segmentLengths[index];
+    if (remaining <= length && length > 0) {
+      const start = points[index];
+      const end = points[index + 1];
+      const ratio = remaining / length;
+      return {
+        x: start.x + (end.x - start.x) * ratio,
+        y: start.y + (end.y - start.y) * ratio,
+      };
+    }
+    remaining -= length;
+  }
+
+  return points[Math.floor(points.length / 2)];
+}
+
+export function getSelfLoopPath(
+  sourceX: number,
+  sourceY: number,
+  nodeWidth = 180,
+  nodeHeight = 60,
+  loopDirection: LoopDirection = 'right',
+): SelfLoopResult {
+  const size = Math.max(nodeWidth, nodeHeight) * 0.5;
+  const offset = size * 0.8;
+
+  switch (loopDirection) {
+    case 'top':
+      return {
+        path: `M ${sourceX - 15} ${sourceY} C ${sourceX - offset} ${sourceY - size * 1.5}, ${sourceX + offset} ${sourceY - size * 1.5}, ${sourceX + 15} ${sourceY}`,
+        labelX: sourceX,
+        labelY: sourceY - size * 1.2,
+      };
+    case 'left':
+      return {
+        path: `M ${sourceX} ${sourceY - 15} C ${sourceX - size * 1.5} ${sourceY - offset}, ${sourceX - size * 1.5} ${sourceY + offset}, ${sourceX} ${sourceY + 15}`,
+        labelX: sourceX - size * 1.2,
+        labelY: sourceY,
+      };
+    case 'bottom':
+      return {
+        path: `M ${sourceX - 15} ${sourceY} C ${sourceX - offset} ${sourceY + size * 1.5}, ${sourceX + offset} ${sourceY + size * 1.5}, ${sourceX + 15} ${sourceY}`,
+        labelX: sourceX,
+        labelY: sourceY + size * 1.2,
+      };
+    case 'right':
+    default:
+      return {
+        path: `M ${sourceX} ${sourceY - 15} C ${sourceX + size * 1.5} ${sourceY - offset}, ${sourceX + size * 1.5} ${sourceY + offset}, ${sourceX} ${sourceY + 15}`,
+        labelX: sourceX + size * 1.2,
+        labelY: sourceY,
+      };
+  }
+}
+
+export function getOffsetVector(position: Position, offset: number): { x: number; y: number } {
+  switch (position) {
+    case Position.Top:
+    case Position.Bottom:
+      return { x: offset, y: 0 };
+    case Position.Left:
+    case Position.Right:
+      return { x: 0, y: offset };
+    default:
+      return { x: 0, y: 0 };
+  }
+}
+
+export function getLoopDirection(position: Position): LoopDirection {
+  switch (position) {
+    case Position.Top:
+      return 'top';
+    case Position.Left:
+      return 'left';
+    case Position.Bottom:
+      return 'bottom';
+    case Position.Right:
+    default:
+      return 'right';
+  }
+}
+
+export function buildMindmapRootBranchPath(
+  sourceX: number,
+  sourceY: number,
+  targetX: number,
+  targetY: number,
+): EdgePathResult {
+  const direction = targetX >= sourceX ? 1 : -1;
+  const horizontalDistance = Math.abs(targetX - sourceX);
+  const trunkLength = Math.min(96, Math.max(56, horizontalDistance * 0.18));
+  const sourceControlX = sourceX + direction * trunkLength * 0.5;
+  const bundleX = sourceX + direction * trunkLength;
+  const targetControlX = targetX - direction * Math.min(100, Math.max(60, horizontalDistance * 0.24));
+  const edgePath = [
+    `M ${sourceX} ${sourceY}`,
+    `C ${sourceControlX} ${sourceY}, ${bundleX} ${sourceY}, ${bundleX} ${sourceY}`,
+    `C ${bundleX + direction * 28} ${sourceY}, ${targetControlX} ${targetY}, ${targetX} ${targetY}`,
+  ].join(' ');
+
+  return {
+    edgePath,
+    labelX: (bundleX + targetX) / 2,
+    labelY: (sourceY + targetY) / 2,
+  };
+}
+
+export function buildMindmapTopicBranchPath(
+  sourceX: number,
+  sourceY: number,
+  targetX: number,
+  targetY: number,
+): EdgePathResult {
+  const direction = targetX >= sourceX ? 1 : -1;
+  const horizontalDistance = Math.abs(targetX - sourceX);
+  const trunkLength = Math.min(68, Math.max(34, horizontalDistance * 0.16));
+  const sourceControlX = sourceX + direction * trunkLength * 0.55;
+  const bundleX = sourceX + direction * trunkLength;
+  const targetControlX = targetX - direction * Math.min(72, Math.max(42, horizontalDistance * 0.2));
+  const edgePath = [
+    `M ${sourceX} ${sourceY}`,
+    `C ${sourceControlX} ${sourceY}, ${bundleX} ${sourceY}, ${bundleX} ${sourceY}`,
+    `C ${bundleX + direction * 18} ${sourceY}, ${targetControlX} ${targetY}, ${targetX} ${targetY}`,
+  ].join(' ');
+
+  return {
+    edgePath,
+    labelX: (bundleX + targetX) / 2,
+    labelY: (sourceY + targetY) / 2,
+  };
+}
+
+export function buildRoundedPolylinePath(points: { x: number; y: number }[], cornerRadius: number): string {
+  if (points.length === 0) return '';
+  if (points.length === 1) return `M ${points[0].x} ${points[0].y}`;
+  if (points.length === 2) return `M ${points[0].x} ${points[0].y} L ${points[1].x} ${points[1].y}`;
+
+  let path = `M ${points[0].x} ${points[0].y}`;
+
+  for (let index = 1; index < points.length - 1; index += 1) {
+    const previous = points[index - 1];
+    const current = points[index];
+    const next = points[index + 1];
+
+    const toPrev = Math.hypot(current.x - previous.x, current.y - previous.y);
+    const toNext = Math.hypot(next.x - current.x, next.y - current.y);
+    const radius = Math.min(cornerRadius, toPrev / 2, toNext / 2);
+
+    if (radius < 1) {
+      path += ` L ${current.x} ${current.y}`;
+      continue;
+    }
+
+    const entryX = current.x + ((previous.x - current.x) / toPrev) * radius;
+    const entryY = current.y + ((previous.y - current.y) / toPrev) * radius;
+    const exitX = current.x + ((next.x - current.x) / toNext) * radius;
+    const exitY = current.y + ((next.y - current.y) / toNext) * radius;
+
+    path += ` L ${entryX} ${entryY} Q ${current.x} ${current.y} ${exitX} ${exitY}`;
+  }
+
+  const last = points[points.length - 1];
+  path += ` L ${last.x} ${last.y}`;
+
+  return path;
+}
+
+export function enforceMinimumEndpointLead(
+  points: { x: number; y: number }[],
+  sourcePosition: Position,
+  targetPosition: Position,
+  minimumLead = 12,
+): { x: number; y: number }[] {
+  if (points.length < 3) {
+    return points;
+  }
+
+  const nextPoints = points.map((point) => ({ ...point }));
+
+  const shiftSourceLead = (): void => {
+    const source = nextPoints[0];
+    const first = nextPoints[1];
+
+    if (sourcePosition === Position.Left || sourcePosition === Position.Right) {
+      if (Math.abs(first.y - source.y) > 0.5) return;
+      const delta = Math.abs(first.x - source.x);
+      if (delta >= minimumLead) return;
+      const desiredX = source.x + (sourcePosition === Position.Right ? minimumLead : -minimumLead);
+      const sharedX = first.x;
+      for (let index = 1; index < nextPoints.length; index += 1) {
+        if (Math.abs(nextPoints[index].x - sharedX) > 0.5) break;
+        nextPoints[index].x = desiredX;
+      }
+      return;
+    }
+
+    if (Math.abs(first.x - source.x) > 0.5) return;
+    const delta = Math.abs(first.y - source.y);
+    if (delta >= minimumLead) return;
+    const desiredY = source.y + (sourcePosition === Position.Bottom ? minimumLead : -minimumLead);
+    const sharedY = first.y;
+    for (let index = 1; index < nextPoints.length; index += 1) {
+      if (Math.abs(nextPoints[index].y - sharedY) > 0.5) break;
+      nextPoints[index].y = desiredY;
+    }
+  };
+
+  const shiftTargetLead = (): void => {
+    const target = nextPoints[nextPoints.length - 1];
+    const lastInterior = nextPoints[nextPoints.length - 2];
+
+    if (targetPosition === Position.Left || targetPosition === Position.Right) {
+      if (Math.abs(lastInterior.y - target.y) > 0.5) return;
+      const delta = Math.abs(target.x - lastInterior.x);
+      if (delta >= minimumLead) return;
+      const desiredX = target.x + (targetPosition === Position.Right ? -minimumLead : minimumLead);
+      const sharedX = lastInterior.x;
+      for (let index = nextPoints.length - 2; index >= 0; index -= 1) {
+        if (Math.abs(nextPoints[index].x - sharedX) > 0.5) break;
+        nextPoints[index].x = desiredX;
+      }
+      return;
+    }
+
+    if (Math.abs(lastInterior.x - target.x) > 0.5) return;
+    const delta = Math.abs(target.y - lastInterior.y);
+    if (delta >= minimumLead) return;
+    const desiredY = target.y + (targetPosition === Position.Bottom ? -minimumLead : minimumLead);
+    const sharedY = lastInterior.y;
+    for (let index = nextPoints.length - 2; index >= 0; index -= 1) {
+      if (Math.abs(nextPoints[index].y - sharedY) > 0.5) break;
+      nextPoints[index].y = desiredY;
+    }
+  };
+
+  shiftSourceLead();
+  shiftTargetLead();
+  return normalizePolylinePoints(nextPoints);
+}
+
+export function buildElkEndpointBridge(
+  anchor: { x: number; y: number },
+  routePoint: { x: number; y: number } | undefined,
+  position: Position,
+  minimumLead = 12,
+  direction: 'source' | 'target' = 'source',
+): { x: number; y: number }[] {
+  if (!routePoint) {
+    return [];
+  }
+
+  const bridge: { x: number; y: number }[] = [];
+
+  if (position === Position.Left || position === Position.Right) {
+    const leadSign = position === Position.Right ? 1 : -1;
+    const leadX = anchor.x + leadSign * minimumLead;
+
+    if (direction === 'source') {
+      bridge.push({ x: leadX, y: anchor.y });
+      bridge.push({ x: leadX, y: routePoint.y });
+    } else {
+      bridge.push({ x: leadX, y: routePoint.y });
+      bridge.push({ x: leadX, y: anchor.y });
+    }
+  } else {
+    const leadSign = position === Position.Bottom ? 1 : -1;
+    const leadY = anchor.y + leadSign * minimumLead;
+
+    if (direction === 'source') {
+      bridge.push({ x: anchor.x, y: leadY });
+      bridge.push({ x: routePoint.x, y: leadY });
+    } else {
+      bridge.push({ x: routePoint.x, y: leadY });
+      bridge.push({ x: anchor.x, y: leadY });
+    }
+  }
+
+  return normalizePolylinePoints([anchor, ...bridge, routePoint]).slice(1, -1);
+}
diff --git a/src/components/custom-edge/pathUtilsSiblingRouting.ts b/src/components/custom-edge/pathUtilsSiblingRouting.ts
new file mode 100644
index 0000000..e396705
--- /dev/null
+++ b/src/components/custom-edge/pathUtilsSiblingRouting.ts
@@ -0,0 +1,180 @@
+import type { MinimalEdge, MinimalNode } from './pathUtilsTypes';
+
+const NODE_LOOKUP_CACHE = new WeakMap<MinimalNode[], Map<string, MinimalNode>>();
+const PARALLEL_EDGE_GROUP_CACHE = new WeakMap<MinimalEdge[], Map<string, MinimalEdge[]>>();
+const ENDPOINT_SIBLING_CACHE = new WeakMap<MinimalEdge[], WeakMap<MinimalNode[], Map<string, MinimalEdge[]>>>();
+
+function getNodeLookup(allNodes: MinimalNode[]): Map<string, MinimalNode> {
+  let lookup = NODE_LOOKUP_CACHE.get(allNodes);
+  if (!lookup) {
+    lookup = new Map(allNodes.map((node) => [node.id, node]));
+    NODE_LOOKUP_CACHE.set(allNodes, lookup);
+  }
+  return lookup;
+}
+
+function getParallelEdgeGroups(allEdges: MinimalEdge[]): Map<string, MinimalEdge[]> {
+  let groups = PARALLEL_EDGE_GROUP_CACHE.get(allEdges);
+  if (!groups) {
+    groups = new Map<string, MinimalEdge[]>();
+    for (const edge of allEdges) {
+      const key = edge.source < edge.target
+        ? `${edge.source}|${edge.target}`
+        : `${edge.target}|${edge.source}`;
+      const bucket = groups.get(key);
+      if (bucket) {
+        bucket.push(edge);
+      } else {
+        groups.set(key, [edge]);
+      }
+    }
+    PARALLEL_EDGE_GROUP_CACHE.set(allEdges, groups);
+  }
+  return groups;
+}
+
+function getRemoteNodeAxisValueFromLookup(
+  nodeLookup: Map<string, MinimalNode>,
+  edge: MinimalEdge,
+  direction: 'source' | 'target',
+  handleId: string | null,
+): number {
+  const remoteNodeId = direction === 'source' ? edge.target : edge.source;
+  const remoteNode = nodeLookup.get(remoteNodeId);
+  if (!remoteNode) {
+    return Number.POSITIVE_INFINITY;
+  }
+
+  const position = remoteNode.positionAbsolute ?? remoteNode.position ?? { x: 0, y: 0 };
+  const width = remoteNode.width ?? 0;
+  const height = remoteNode.height ?? 0;
+  const usesVerticalAxis = handleId === 'left' || handleId === 'right';
+
+  return usesVerticalAxis ? position.y + height / 2 : position.x + width / 2;
+}
+
+function getEndpointSiblingBuckets(allEdges: MinimalEdge[], allNodes: MinimalNode[]): Map<string, MinimalEdge[]> {
+  let nodesCache = ENDPOINT_SIBLING_CACHE.get(allEdges);
+  if (!nodesCache) {
+    nodesCache = new WeakMap<MinimalNode[], Map<string, MinimalEdge[]>>();
+    ENDPOINT_SIBLING_CACHE.set(allEdges, nodesCache);
+  }
+
+  let buckets = nodesCache.get(allNodes);
+  if (!buckets) {
+    const nodeLookup = getNodeLookup(allNodes);
+    buckets = new Map<string, MinimalEdge[]>();
+    const ensureBucket = (key: string): MinimalEdge[] => {
+      const existing = buckets?.get(key);
+      if (existing) {
+        return existing;
+      }
+
+      const next: MinimalEdge[] = [];
+      buckets?.set(key, next);
+      return next;
+    };
+
+    for (const edge of allEdges) {
+      ensureBucket(`source|${edge.source}|${edge.sourceHandle ?? ''}`).push(edge);
+      ensureBucket(`target|${edge.target}|${edge.targetHandle ?? ''}`).push(edge);
+    }
+
+    for (const [key, siblings] of buckets.entries()) {
+      const [, , handleId] = key.split('|');
+      const direction = key.startsWith('source|') ? 'source' : 'target';
+      siblings.sort((a, b) => {
+        const remoteA = getRemoteNodeAxisValueFromLookup(nodeLookup, a, direction, handleId || null);
+        const remoteB = getRemoteNodeAxisValueFromLookup(nodeLookup, b, direction, handleId || null);
+        if (remoteA !== remoteB) {
+          return remoteA - remoteB;
+        }
+
+        return a.id.localeCompare(b.id);
+      });
+    }
+
+    nodesCache.set(allNodes, buckets);
+  }
+
+  return buckets;
+}
+
+function getAdaptiveFanoutSpacing(siblingCount: number): number {
+  if (siblingCount <= 1) {
+    return 0;
+  }
+
+  return Math.min(18, 10 + Math.max(0, siblingCount - 2) * 1.5);
+}
+
+function getEndpointSiblings(
+  allEdges: MinimalEdge[],
+  allNodes: MinimalNode[],
+  endpoint: { nodeId: string; handleId?: string | null; direction: 'source' | 'target' },
+): MinimalEdge[] {
+  return getEndpointSiblingBuckets(allEdges, allNodes).get(
+    `${endpoint.direction}|${endpoint.nodeId}|${endpoint.handleId ?? ''}`,
+  ) ?? [];
+}
+
+export function getNodeById(allNodes: MinimalNode[], nodeId: string): MinimalNode | undefined {
+  return getNodeLookup(allNodes).get(nodeId);
+}
+
+export function getShapeAwareElkAnchorClearance(shape?: string): number {
+  switch (shape) {
+    case 'diamond':
+      return 12;
+    case 'circle':
+    case 'ellipse':
+    case 'capsule':
+      return 8;
+    case 'hexagon':
+    case 'parallelogram':
+    case 'cylinder':
+      return 6;
+    default:
+      return 0;
+  }
+}
+
+export function getParallelEdgeOffset(edgeId: string, source: string, target: string, allEdges: MinimalEdge[]): number {
+  const key = source < target ? `${source}|${target}` : `${target}|${source}`;
+  const siblings = getParallelEdgeGroups(allEdges).get(key) ?? [];
+  if (siblings.length <= 1) {
+    return 0;
+  }
+
+  const index = siblings.findIndex((edge) => edge.id === edgeId);
+  const spacing = 25;
+  return (index - (siblings.length - 1) / 2) * spacing;
+}
+
+export function getEndpointFanoutOffset(
+  edgeId: string,
+  allEdges: MinimalEdge[],
+  allNodes: MinimalNode[],
+  endpoint: { nodeId: string; handleId?: string | null; direction: 'source' | 'target' },
+): number {
+  const siblings = getEndpointSiblings(allEdges, allNodes, endpoint);
+  if (siblings.length <= 1) {
+    return 0;
+  }
+
+  const index = siblings.findIndex((edge) => edge.id === edgeId);
+  if (index === -1) {
+    return 0;
+  }
+
+  const spacing = getAdaptiveFanoutSpacing(siblings.length);
+  return (index - (siblings.length - 1) / 2) * spacing;
+}
+
+export function getEndpointSiblingCount(
+  allEdges: MinimalEdge[],
+  allNodes: MinimalNode[],
+  endpoint: { nodeId: string; handleId?: string | null; direction: 'source' | 'target' },
+): number {
+  return getEndpointSiblings(allEdges, allNodes, endpoint).length;
+}
diff --git a/src/components/custom-edge/pathUtilsTypes.ts b/src/components/custom-edge/pathUtilsTypes.ts
new file mode 100644
index 0000000..8b1e5a6
--- /dev/null
+++ b/src/components/custom-edge/pathUtilsTypes.ts
@@ -0,0 +1,61 @@
+import type { Position } from '@/lib/reactflowCompat';
+
+export interface MinimalEdge {
+  id: string;
+  source: string;
+  target: string;
+  sourceHandle?: string | null;
+  targetHandle?: string | null;
+}
+
+export interface MinimalNode {
+  id: string;
+  position?: { x: number; y: number };
+  positionAbsolute?: { x: number; y: number };
+  width?: number;
+  height?: number;
+  data?: {
+    shape?: string;
+  };
+}
+
+export interface EdgePathParams {
+  id: string;
+  source: string;
+  target: string;
+  sourceX: number;
+  sourceY: number;
+  targetX: number;
+  targetY: number;
+  sourcePosition: Position;
+  targetPosition: Position;
+  sourceHandleId?: string | null;
+  targetHandleId?: string | null;
+}
+
+export type EdgeVariant = 'bezier' | 'smoothstep' | 'step' | 'straight';
+export type LoopDirection = 'right' | 'top' | 'left' | 'bottom';
+
+export interface EdgePathOptions {
+  forceOrthogonal?: boolean;
+  elkPoints?: { x: number; y: number }[];
+  mindmapBranchKind?: 'root' | 'branch';
+  routingMode?: 'auto' | 'elk' | 'manual';
+  waypoints?: { x: number; y: number }[];
+  waypoint?: {
+    x: number;
+    y: number;
+  };
+}
+
+export interface SelfLoopResult {
+  path: string;
+  labelX: number;
+  labelY: number;
+}
+
+export interface EdgePathResult {
+  edgePath: string;
+  labelX: number;
+  labelY: number;
+}
diff --git a/src/components/custom-edge/standardEdgeMarkers.test.ts b/src/components/custom-edge/standardEdgeMarkers.test.ts
index fce014e..2087244 100644
--- a/src/components/custom-edge/standardEdgeMarkers.test.ts
+++ b/src/components/custom-edge/standardEdgeMarkers.test.ts
@@ -3,7 +3,7 @@ import { MarkerType } from '@/lib/reactflowCompat';
 import { resolveStandardEdgeMarkers } from './standardEdgeMarkers';
 
 describe('resolveStandardEdgeMarkers', () => {
-  it('keeps upstream marker urls when connectorModelV1 is disabled', () => {
+  it('keeps upstream marker urls when local marker generation is disabled', () => {
     const result = resolveStandardEdgeMarkers({
       connectorModelEnabled: false,
       edgeId: 'edge-1',
@@ -19,7 +19,7 @@ describe('resolveStandardEdgeMarkers', () => {
     expect(result.markerEndUrl).toBe('url(#rf-end)');
   });
 
-  it('creates local arrow markers for closed-arrow configs when connectorModelV1 is enabled', () => {
+  it('creates local arrow markers for closed-arrow configs when local marker generation is enabled', () => {
     const result = resolveStandardEdgeMarkers({
       connectorModelEnabled: true,
       edgeId: 'edge-1',
diff --git a/src/components/custom-nodes/ArchitectureNode.handleInteraction.test.tsx b/src/components/custom-nodes/ArchitectureNode.handleInteraction.test.tsx
index 6070646..c5ed350 100644
--- a/src/components/custom-nodes/ArchitectureNode.handleInteraction.test.tsx
+++ b/src/components/custom-nodes/ArchitectureNode.handleInteraction.test.tsx
@@ -7,7 +7,6 @@ import ArchitectureNode from './ArchitectureNode';
 vi.mock('@/config/rolloutFlags', () => ({
   ROLLOUT_FLAGS: {
     visualQualityV2: true,
-    shapeLibraryV1: false,
   },
 }));
 
@@ -110,4 +109,40 @@ describe('ArchitectureNode handle interaction policy', () => {
     expect(diagnosticsNode).not.toBeNull();
     expect(Number(diagnosticsNode?.getAttribute('data-transform-min-height') ?? '0')).toBeGreaterThanOrEqual(96);
   });
+
+  it('keeps service search out of the canvas node chrome', () => {
+    render(
+      <ArchitectureNode
+        id="arch-4"
+        type="architecture"
+        selected={true}
+        dragging={false}
+        zIndex={1}
+        data={{ label: 'API', archProvider: 'aws', archResourceType: 'service' }}
+        isConnectable={true}
+        xPos={0}
+        yPos={0}
+      />
+    );
+
+    expect(screen.queryByPlaceholderText('Search AWS services')).toBeNull();
+  });
+
+  it('renders the custom provider label in the node badge', () => {
+    render(
+      <ArchitectureNode
+        id="arch-5"
+        type="architecture"
+        selected={false}
+        dragging={false}
+        zIndex={1}
+        data={{ label: 'API', archProvider: 'custom', archProviderLabel: 'Hetzner', archResourceType: 'service' }}
+        isConnectable={true}
+        xPos={0}
+        yPos={0}
+      />
+    );
+
+    expect(screen.getByText('Hetzner')).toBeTruthy();
+  });
 });
diff --git a/src/components/custom-nodes/ArchitectureNode.tsx b/src/components/custom-nodes/ArchitectureNode.tsx
index 871052a..1207500 100644
--- a/src/components/custom-nodes/ArchitectureNode.tsx
+++ b/src/components/custom-nodes/ArchitectureNode.tsx
@@ -6,33 +6,51 @@ import { InlineTextEditSurface } from '@/components/InlineTextEditSurface';
 import { NodeChrome } from '@/components/NodeChrome';
 import { getTransformDiagnosticsAttrs } from '@/components/transformDiagnostics';
 import { resolveNodeVisualStyle } from '@/theme';
-import { ROLLOUT_FLAGS } from '@/config/rolloutFlags';
 import { loadProviderShapePreview } from '@/services/shapeLibrary/providerCatalog';
+import type { DomainLibraryCategory } from '@/services/domainLibrary';
 
 function ArchitectureNode({ id, data, selected }: LegacyNodeProps<NodeData>): React.ReactElement {
   const labelEdit = useInlineNodeTextEdit(id, 'label', data.label || '');
-  const provider = data.archProvider || 'custom';
+  const provider = (data.archProvider || 'custom') as DomainLibraryCategory | 'custom';
+  const providerLabel = provider === 'custom'
+    ? String(data.archProviderLabel || 'Custom')
+    : provider;
   const resourceType = data.archResourceType || 'service';
   const environment = data.archEnvironment || 'default';
+  const zone = data.archZone as string | undefined;
+  const trustDomain = data.archTrustDomain as string | undefined;
   const architectureMinHeight = environment ? 96 : 88;
   const activeColor = data.color || 'white';
   const activeColorMode = data.colorMode || 'subtle';
   const visualStyle = resolveNodeVisualStyle(activeColor, activeColorMode, data.customColor);
-  const resourceIcon = {
+  const resourceIcon: string = {
     group: '◼',
     junction: '◆',
     service: '▣',
+    person: '👤',
+    system: '⬜',
+    container: '⧉',
+    component: '⧈',
+    database_container: '⛁',
+    router: '⇄',
+    switch: '⬡',
+    firewall: '🛡',
+    load_balancer: '⇶',
+    cdn: '◉',
+    dns: '◎',
   }[resourceType] ?? '▣';
   const packId = typeof data.archIconPackId === 'string' ? data.archIconPackId : undefined;
   const shapeId = typeof data.archIconShapeId === 'string' ? data.archIconShapeId : undefined;
+  const customIconUrl = typeof data.customIconUrl === 'string' ? data.customIconUrl : undefined;
   const previewKey = packId && shapeId ? `${packId}:${shapeId}` : null;
   const [providerPreviewState, setProviderPreviewState] = useState<{ key: string | null; url: string | null }>({ key: null, url: null });
   const providerPreviewUrl = providerPreviewState.key === previewKey ? providerPreviewState.url : null;
+  const resolvedProviderIconUrl = provider === 'custom' && customIconUrl ? customIconUrl : providerPreviewUrl;
 
   useEffect(() => {
     let cancelled = false;
 
-    if (!ROLLOUT_FLAGS.shapeLibraryV1 || !packId || !shapeId || !previewKey) {
+    if (!packId || !shapeId || !previewKey) {
       return;
     }
 
@@ -55,6 +73,7 @@ function ArchitectureNode({ id, data, selected }: LegacyNodeProps<NodeData>): Re
 
   return (
     <NodeChrome
+      nodeId={id}
       selected={Boolean(selected)}
       minWidth={180}
       minHeight={architectureMinHeight}
@@ -84,12 +103,12 @@ function ArchitectureNode({ id, data, selected }: LegacyNodeProps<NodeData>): Re
               color: visualStyle.iconColor,
             }}
           >
-            {providerPreviewUrl ? (
-              <img src={providerPreviewUrl} alt="" className="h-3.5 w-3.5 object-contain" loading="lazy" />
+            {resolvedProviderIconUrl ? (
+              <img src={resolvedProviderIconUrl} alt={`${providerLabel} ${resourceType} icon`} className="h-3.5 w-3.5 object-contain" loading="lazy" />
             ) : (
               <span>{resourceIcon}</span>
             )}
-            <span>{provider}</span>
+            <span>{providerLabel}</span>
           </span>
           <span className="font-semibold" style={{ color: visualStyle.subText }}>{resourceType}</span>
         </div>
@@ -104,14 +123,38 @@ function ArchitectureNode({ id, data, selected }: LegacyNodeProps<NodeData>): Re
           className="mt-1 text-sm font-semibold break-words"
           isSelected={Boolean(selected)}
         />
-        <div
-          className="mt-1 inline-flex rounded-md px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide"
-          style={{
-            backgroundColor: visualStyle.iconBg,
-            color: visualStyle.subText,
-          }}
-        >
-          {environment}
+        <div className="mt-1 flex flex-wrap items-center gap-1">
+          <span
+            className="inline-flex rounded-md px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide"
+            style={{
+              backgroundColor: visualStyle.iconBg,
+              color: visualStyle.subText,
+            }}
+          >
+            {environment}
+          </span>
+          {zone && (
+            <span
+              className="inline-flex rounded-md px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide"
+              style={{
+                backgroundColor: visualStyle.iconBg,
+                color: visualStyle.subText,
+              }}
+            >
+              {zone}
+            </span>
+          )}
+          {trustDomain && (
+            <span
+              className="inline-flex rounded-md px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide"
+              style={{
+                backgroundColor: visualStyle.iconBg,
+                color: visualStyle.subText,
+              }}
+            >
+              {trustDomain}
+            </span>
+          )}
         </div>
       </div>
     </NodeChrome>
diff --git a/src/components/custom-nodes/BrowserNode.tsx b/src/components/custom-nodes/BrowserNode.tsx
index 368b88d..5f9a620 100644
--- a/src/components/custom-nodes/BrowserNode.tsx
+++ b/src/components/custom-nodes/BrowserNode.tsx
@@ -2,216 +2,21 @@ import React, { memo } from 'react';
 import type { LegacyNodeProps } from '@/lib/reactflowCompat';
 import { useTranslation } from 'react-i18next';
 import { NodeData } from '@/lib/types';
-import { Layout, Cookie, Lock, X, Menu, Search } from 'lucide-react';
-import { ROLLOUT_FLAGS } from '@/config/rolloutFlags';
+import { Lock } from 'lucide-react';
 import { NodeChrome } from '@/components/NodeChrome';
+import { renderBrowserVariantContent } from './browserVariantRenderer';
 
 import { getNodeColorPalette } from '../../theme';
 
-const BrowserNode = ({ data, selected }: LegacyNodeProps<NodeData>): React.ReactElement => {
+const BrowserNode = ({ id, data, selected }: LegacyNodeProps<NodeData>): React.ReactElement => {
     const { t } = useTranslation();
-    const visualQualityV2Enabled = ROLLOUT_FLAGS.visualQualityV2;
+    const visualQualityV2Enabled = true;
     const nodeColorPalette = getNodeColorPalette(visualQualityV2Enabled);
     const style = nodeColorPalette[data.color || 'slate'] || nodeColorPalette.slate;
 
-    // Render content based on variant
-    const renderContent = () => {
-        if (data.imageUrl) {
-            return (
-                <img
-                    src={data.imageUrl}
-                    alt={t('customNodes.browserContent')}
-                    className="w-full h-full object-cover object-top"
-                />
-            );
-        }
-
-        switch (data.variant) {
-            case 'landing': // SaaS Landing
-                return (
-                    <div className="flex flex-col h-full bg-white">
-                        {/* Hero */}
-                        <div className={`flex-1 ${style.iconBg} bg-opacity-10 flex flex-col items-center justify-center p-6 space-y-3`}>
-                            <div className="text-center space-y-2">
-                                <div className="h-4 w-32 bg-slate-800 rounded-lg mx-auto opacity-80" />
-                                <div className="h-2 w-48 bg-slate-400 rounded-md mx-auto opacity-60" />
-                            </div>
-                            <div className="flex gap-2 mt-4">
-                                <div className={`h-6 w-16 ${style.bg} rounded-md shadow-sm`} />
-                                <div className="h-6 w-16 bg-white border border-slate-200 rounded-md" />
-                            </div>
-                        </div>
-                        {/* Features Grid */}
-                        <div className="h-1/3 border-t border-slate-100 grid grid-cols-3 divide-x divide-slate-100">
-                            {[1, 2, 3].map(i => (
-                                <div key={i} className="p-3 space-y-2 flex flex-col items-center justify-center">
-                                    <div className={`w-8 h-8 rounded-full ${style.iconBg} mb-1`} />
-                                    <div className="h-1.5 w-12 bg-slate-200 rounded-sm" />
-                                </div>
-                            ))}
-                        </div>
-                    </div>
-                );
-
-            case 'dashboard': // Admin Dashboard
-                return (
-                    <div className="flex h-full bg-slate-50">
-                        {/* Sidebar */}
-                        <div className="w-12 border-r border-slate-200 bg-white flex flex-col items-center py-3 space-y-3">
-                            <div className={`w-6 h-6 rounded-md ${style.bg}`} />
-                            <div className="w-4 h-0.5 bg-slate-200" />
-                            {[1, 2, 3, 4].map(i => (
-                                <div key={i} className="w-6 h-6 rounded-md bg-slate-100" />
-                            ))}
-                        </div>
-                        {/* Main Content */}
-                        <div className="flex-1 flex flex-col">
-                            {/* Top Bar */}
-                            <div className="h-10 border-b border-slate-200 bg-white flex items-center justify-between px-4">
-                                <div className="w-24 h-2 bg-slate-200 rounded-sm" />
-                                <div className="w-6 h-6 rounded-full bg-slate-200" />
-                            </div>
-                            {/* Dashboard Grid */}
-                            <div className="p-3 grid grid-cols-2 gap-3 flex-1 overflow-hidden">
-                                <div className="bg-white rounded-lg border border-slate-200 shadow-sm p-2 space-y-2">
-                                    <div className="w-8 h-2 bg-slate-200 rounded-sm" />
-                                    <div className={`w-full h-16 ${style.iconBg} bg-opacity-20 rounded-md flex items-end justify-center gap-1 pb-1 px-2`}>
-                                        <div className={`w-2 h-6 ${style.bg} opacity-40`} />
-                                        <div className={`w-2 h-10 ${style.bg} opacity-60`} />
-                                        <div className={`w-2 h-8 ${style.bg} opacity-50`} />
-                                        <div className={`w-2 h-12 ${style.bg}`} />
-                                    </div>
-                                </div>
-                                <div className="bg-white rounded-lg border border-slate-200 shadow-sm p-2 space-y-2">
-                                    <div className="w-12 h-2 bg-slate-200 rounded-sm" />
-                                    <div className="space-y-1.5">
-                                        <div className="w-full h-1.5 bg-slate-100 rounded-sm" />
-                                        <div className="w-3/4 h-1.5 bg-slate-100 rounded-sm" />
-                                        <div className="w-full h-1.5 bg-slate-100 rounded-sm" />
-                                    </div>
-                                </div>
-                                <div className="col-span-2 bg-white rounded-lg border border-slate-200 shadow-sm p-2 flex items-center gap-3">
-                                    <div className="flex-1 h-2 bg-slate-100 rounded-sm" />
-                                    <div className="flex-1 h-2 bg-slate-100 rounded-sm" />
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                );
-
-            case 'form': // Signup / Contact Form
-                return (
-                    <div className={`flex items-center justify-center h-full ${style.iconBg} bg-opacity-5`}>
-                        <div className="bg-white rounded-lg shadow-sm border border-slate-200 w-3/5 p-4 space-y-3">
-                            <div className="space-y-1 text-center mb-2">
-                                <div className="w-1/2 h-2.5 bg-slate-800 rounded-sm mx-auto" />
-                                <div className="w-3/4 h-1.5 bg-slate-300 rounded-sm mx-auto" />
-                            </div>
-                            <div className="space-y-2">
-                                <div className="h-6 w-full border border-slate-200 rounded bg-slate-50" />
-                                <div className="h-6 w-full border border-slate-200 rounded bg-slate-50" />
-                            </div>
-                            <div className={`h-6 w-full ${style.bg} rounded shadow-sm mt-1`} />
-                        </div>
-                    </div>
-                );
-
-            case 'cookie': // Cookie Consent / GDPR Banner
-                return (
-                    <div className="flex flex-col h-full bg-slate-50 relative">
-                        {/* Background Content (blurred/dimmed) */}
-                        <div className="flex-1 p-4 opacity-50 flex flex-col items-center space-y-4">
-                            <div className="w-3/4 h-32 bg-white border border-slate-200 rounded-lg shadow-sm" />
-                            <div className="w-full h-4 bg-slate-200 rounded-sm" />
-                            <div className="w-2/3 h-4 bg-slate-200 rounded-sm" />
-                        </div>
-
-                        {/* Overlay for depth */}
-                        <div className="absolute inset-0 bg-slate-900/10 z-10" />
-
-                        {/* Cookie Banner */}
-                        <div className={`absolute bottom-0 left-0 right-0 bg-white border-t ${style.border} p-4 z-20 shadow-[0_-4px_6px_-1px_rgba(0,0,0,0.1)]`}>
-                            <div className="flex gap-3 items-start">
-                                <Cookie className={`w-6 h-6 ${style.text} shrink-0 mt-1`} />
-                                <div className="flex-1 space-y-2">
-                                    <div className="w-32 h-2.5 bg-slate-800 rounded-sm" />
-                                    <div className="space-y-1.5">
-                                        <div className="w-full h-1.5 bg-slate-300 rounded-sm" />
-                                        <div className="w-4/5 h-1.5 bg-slate-300 rounded-sm" />
-                                    </div>
-                                </div>
-                            </div>
-                            <div className="flex gap-2 mt-3 pl-9">
-                                <div className="h-7 w-20 bg-slate-800 rounded-md shadow-sm" />
-                                <div className={`h-7 w-20 bg-white border ${style.border} rounded-md`} />
-                            </div>
-                        </div>
-                    </div>
-                );
-
-            case 'pricing': // Pricing Tables
-                return (
-                    <div className="flex flex-col h-full bg-slate-50">
-                        {/* Header */}
-                        <div className="h-16 flex flex-col items-center justify-center space-y-1.5 border-b border-slate-100 bg-white">
-                            <div className="w-32 h-2.5 bg-slate-800 rounded-sm" />
-                            <div className="w-48 h-1.5 bg-slate-300 rounded-sm" />
-                        </div>
-                        {/* Pricing Grid */}
-                        <div className="flex-1 p-4 grid grid-cols-3 gap-3 items-center">
-                            {[1, 2, 3].map(i => (
-                                <div key={i} className={`bg-white rounded-lg shadow-sm border ${i === 2 ? style.border : 'border-slate-200'} p-2 flex flex-col h-full relative overflow-hidden`}>
-                                    {i === 2 && <div className={`absolute top-0 inset-x-0 h-1 ${style.bg}`} />}
-                                    <div className="space-y-1.5 mb-3 text-center flex flex-col items-center pt-2">
-                                        <div className="w-8 h-2 bg-slate-400 rounded-sm" />
-                                        <div className="w-12 h-4 bg-slate-800 rounded-sm" />
-                                    </div>
-                                    <div className="space-y-1.5 flex-1">
-                                        <div className="w-full h-1 bg-slate-100 rounded-sm" />
-                                        <div className="w-full h-1 bg-slate-100 rounded-sm" />
-                                        <div className="w-2/3 h-1 bg-slate-100 rounded-sm" />
-                                    </div>
-                                    <div className={`mt-3 w-full h-5 ${i === 2 ? style.bg : 'bg-slate-100'} rounded-sm`} />
-                                </div>
-                            ))}
-                        </div>
-                    </div>
-                );
-
-            case 'modal':
-                return (
-                    <div className="relative w-full h-full bg-slate-900/10 flex items-center justify-center p-4">
-                        <div className="relative bg-white w-4/5 rounded-lg shadow-lg border border-slate-200 p-4 flex flex-col gap-3">
-                            <div className="flex justify-between items-center pb-2 border-b border-slate-100">
-                                <div className="w-24 h-2.5 bg-slate-800 rounded-sm" />
-                                <div className="w-3 h-3 rounded-full bg-slate-200" />
-                            </div>
-                            <div className="space-y-2">
-                                <div className="w-full h-2 bg-slate-100 rounded-sm" />
-                                <div className="w-full h-2 bg-slate-100 rounded-sm" />
-                                <div className="w-2/3 h-2 bg-slate-100 rounded-sm" />
-                            </div>
-                            <div className="flex justify-end gap-2 pt-2">
-                                <div className="w-16 h-6 bg-slate-100 rounded-md" />
-                                <div className={`w-16 h-6 ${style.bg} rounded-md`} />
-                            </div>
-                        </div>
-                    </div>
-                );
-
-            default:
-                return (
-                    <div className={`flex-1 ${style.iconBg} bg-opacity-30 relative p-4 flex flex-col items-center justify-center border-t ${style.border}`}>
-                        <div className={style.iconColor}>
-                            <Layout className="w-8 h-8 opacity-50" />
-                        </div>
-                    </div>
-                );
-        }
-    };
-
     return (
         <NodeChrome
+            nodeId={id}
             selected={Boolean(selected)}
             minWidth={200}
             minHeight={150}
@@ -241,7 +46,14 @@ const BrowserNode = ({ data, selected }: LegacyNodeProps<NodeData>): React.React
                 </div>
 
                 {/* Content Area */}
-                {renderContent()}
+                {renderBrowserVariantContent({
+                    imageUrl: data.imageUrl,
+                    variant: data.variant,
+                    label: data.label,
+                    style,
+                    lockIconVisible: data.icon === 'lock',
+                    imageAlt: t('customNodes.browserContent'),
+                })}
             </div>
         </NodeChrome>
     );
diff --git a/src/components/custom-nodes/ClassNode.tsx b/src/components/custom-nodes/ClassNode.tsx
index 609b84f..f85bdbc 100644
--- a/src/components/custom-nodes/ClassNode.tsx
+++ b/src/components/custom-nodes/ClassNode.tsx
@@ -1,27 +1,26 @@
 import React, { memo } from 'react';
-import { Handle, Position } from '@/lib/reactflowCompat';
 import type { LegacyNodeProps } from '@/lib/reactflowCompat';
 import type { NodeData } from '@/lib/types';
 import { useInlineNodeTextEdit } from '@/hooks/useInlineNodeTextEdit';
-import { ROLLOUT_FLAGS } from '@/config/rolloutFlags';
 import { useFlowStore } from '@/store';
-import { getConnectorHandleStyle, getHandlePointerEvents, getV2HandleVisibilityClass } from '@/components/handleInteraction';
 import { InlineTextEditSurface } from '@/components/InlineTextEditSurface';
 import { getTransformDiagnosticsAttrs } from '@/components/transformDiagnostics';
 import { NodeTransformControls } from '@/components/NodeTransformControls';
 import { useActiveNodeSelection } from '@/components/useActiveNodeSelection';
+import { getStructuredListNavigationAction } from './structuredListNavigation';
+import { NodeQuickCreateButtons } from '@/components/NodeQuickCreateButtons';
+import { getClassVisibilityTone, parseClassMember } from '@/lib/classMembers';
+import { StructuredNodeHandles } from './StructuredNodeHandles';
+
+function getClassList(data: NodeData, key: 'classAttributes' | 'classMethods'): string[] {
+  return Array.isArray(data[key]) ? data[key] : [];
+}
 
 function ClassNode({ id, data, selected }: LegacyNodeProps<NodeData>): React.ReactElement {
-  const visualQualityV2Enabled = ROLLOUT_FLAGS.visualQualityV2;
+  const visualQualityV2Enabled = true;
   const isActiveSelected = useActiveNodeSelection(Boolean(selected));
-  const handlePointerEvents = getHandlePointerEvents(visualQualityV2Enabled, isActiveSelected);
-  const handleVisibilityClass = visualQualityV2Enabled
-    ? getV2HandleVisibilityClass(isActiveSelected)
-    : isActiveSelected
-      ? 'opacity-100'
-      : 'opacity-0 group-hover:opacity-100 [.is-connecting_&]:opacity-100';
-  const attributes = Array.isArray(data.classAttributes) ? data.classAttributes : [];
-  const methods = Array.isArray(data.classMethods) ? data.classMethods : [];
+  const attributes = getClassList(data, 'classAttributes');
+  const methods = getClassList(data, 'classMethods');
   const labelEdit = useInlineNodeTextEdit(id, 'label', data.label || '');
   const stereotypeEdit = useInlineNodeTextEdit(id, 'classStereotype', data.classStereotype || '');
   const { setNodes } = useFlowStore();
@@ -33,50 +32,166 @@ function ClassNode({ id, data, selected }: LegacyNodeProps<NodeData>): React.Rea
   const estimatedMethodsHeight = methods.length > 0 ? Math.min(methods.length, 4) * 18 + 16 : 16;
   const contentMinHeight = Math.max(classBaseMinHeight, 76 + estimatedAttributesHeight + estimatedMethodsHeight);
 
-  const updateClassList = React.useCallback((key: 'classAttributes' | 'classMethods', index: number, nextValue: string) => {
+  function mutateClassList(
+    key: 'classAttributes' | 'classMethods',
+    updater: (current: string[]) => string[],
+  ): void {
     setNodes((nodes) =>
       nodes.map((node) => {
         if (node.id !== id) return node;
-        const current = Array.isArray(node.data?.[key]) ? [...(node.data?.[key] as string[])] : [];
-        if (index >= current.length) {
-          current.push(nextValue);
-        } else {
-          current[index] = nextValue;
-        }
-        return { ...node, data: { ...node.data, [key]: current } };
-      })
+        const current = getClassList(node.data, key);
+        return { ...node, data: { ...node.data, [key]: updater([...current]) } };
+      }),
     );
-  }, [id, setNodes]);
+  }
 
-  const beginAttributeEdit = (index: number, value: string) => {
-    setEditingMethodIndex(null);
-    setEditingAttributeIndex(index);
-    setListDraft(value);
-  };
-
-  const beginMethodEdit = (index: number, value: string) => {
-    setEditingAttributeIndex(null);
-    setEditingMethodIndex(index);
+  function beginEdit(
+    key: 'classAttributes' | 'classMethods',
+    index: number,
+    value: string,
+  ): void {
+    if (key === 'classAttributes') {
+      setEditingMethodIndex(null);
+      setEditingAttributeIndex(index);
+    } else {
+      setEditingAttributeIndex(null);
+      setEditingMethodIndex(index);
+    }
     setListDraft(value);
-  };
+  }
 
-  const commitAttributeEdit = () => {
-    if (editingAttributeIndex === null) return;
+  function commitBlur(key: 'classAttributes' | 'classMethods'): void {
+    const editingIndex = key === 'classAttributes' ? editingAttributeIndex : editingMethodIndex;
+    if (editingIndex === null) return;
+    const currentItems = key === 'classAttributes' ? attributes : methods;
     const trimmed = listDraft.trim();
     if (trimmed) {
-      updateClassList('classAttributes', editingAttributeIndex, trimmed);
+      mutateClassList(key, (list) => {
+        if (editingIndex >= list.length) list.push(trimmed);
+        else list[editingIndex] = trimmed;
+        return list;
+      });
+    } else if (editingIndex < currentItems.length) {
+      mutateClassList(key, (list) => { list.splice(editingIndex, 1); return list; });
+    }
+    if (key === 'classAttributes') setEditingAttributeIndex(null);
+    else setEditingMethodIndex(null);
+  }
+
+  function handleListKeyDown(
+    event: React.KeyboardEvent<HTMLInputElement>,
+    key: 'classAttributes' | 'classMethods',
+    index: number,
+  ): void {
+    event.stopPropagation();
+    const currentItems = key === 'classAttributes' ? attributes : methods;
+    const action = getStructuredListNavigationAction(
+      event.key,
+      { ctrlKey: event.ctrlKey, metaKey: event.metaKey, shiftKey: event.shiftKey },
+      index,
+      currentItems.length,
+    );
+
+    if (!action) return;
+    event.preventDefault();
+
+    if (action.type === 'cancel') {
+      if (key === 'classAttributes') setEditingAttributeIndex(null);
+      else setEditingMethodIndex(null);
+      return;
     }
-    setEditingAttributeIndex(null);
-  };
 
-  const commitMethodEdit = () => {
-    if (editingMethodIndex === null) return;
+    // Persist current value without removing empty rows during navigation
     const trimmed = listDraft.trim();
     if (trimmed) {
-      updateClassList('classMethods', editingMethodIndex, trimmed);
+      mutateClassList(key, (list) => {
+        if (index >= list.length) list.push(trimmed);
+        else list[index] = trimmed;
+        return list;
+      });
     }
-    setEditingMethodIndex(null);
-  };
+
+    if (action.type === 'insertBelow') {
+      mutateClassList(key, (list) => { list.splice(action.targetIndex, 0, ''); return list; });
+      beginEdit(key, action.targetIndex, '');
+      return;
+    }
+
+    beginEdit(key, action.targetIndex, currentItems[action.targetIndex] ?? '');
+  }
+
+  function renderClassMember(value: string): React.ReactElement {
+    const parsed = parseClassMember(value);
+    return (
+      <span className="inline-flex items-start gap-1 break-words">
+        <span className={`font-semibold ${getClassVisibilityTone(parsed.visibility)}`}>{parsed.symbol}</span>
+        <span>{parsed.signature}</span>
+      </span>
+    );
+  }
+
+  function renderListSection(
+    key: 'classAttributes' | 'classMethods',
+    items: string[],
+    editingIndex: number | null,
+    placeholder: string,
+    emptyLabel: string,
+    addLabel: string,
+  ): React.ReactElement {
+    return (
+      <>
+        {items.length > 0 ? (
+          <ul className="space-y-1">
+            {items.map((item, index) => (
+              <li key={`${key}-${index}`} className="text-xs text-slate-700 font-mono break-words">
+                {editingIndex === index ? (
+                  <input
+                    autoFocus
+                    value={listDraft}
+                    onChange={(event) => setListDraft(event.target.value)}
+                    onBlur={() => commitBlur(key)}
+                    onMouseDown={(event) => event.stopPropagation()}
+                    onKeyDown={(event) => handleListKeyDown(event, key, index)}
+                    className="w-full rounded border border-slate-300 bg-white px-1 py-0.5 outline-none"
+                  />
+                ) : (
+                  <button
+                    type="button"
+                    className="w-full text-left hover:bg-slate-50 rounded px-1 -mx-1"
+                    onClick={(event) => { event.stopPropagation(); beginEdit(key, index, item); }}
+                  >
+                    {renderClassMember(item)}
+                  </button>
+                )}
+              </li>
+            ))}
+          </ul>
+        ) : (
+          <div className="text-[11px] text-slate-400">{emptyLabel}</div>
+        )}
+        {editingIndex === items.length ? (
+          <input
+            autoFocus
+            value={listDraft}
+            onChange={(event) => setListDraft(event.target.value)}
+            onBlur={() => commitBlur(key)}
+            onMouseDown={(event) => event.stopPropagation()}
+            onKeyDown={(event) => handleListKeyDown(event, key, items.length)}
+            placeholder={placeholder}
+            className="mt-1 w-full rounded border border-slate-300 bg-white px-1 py-0.5 text-xs font-mono outline-none"
+          />
+        ) : (
+          <button
+            type="button"
+            className="mt-1 text-[11px] text-slate-500 hover:text-slate-700"
+            onClick={(event) => { event.stopPropagation(); beginEdit(key, items.length, ''); }}
+          >
+            {addLabel}
+          </button>
+        )}
+      </>
+    );
+  }
 
   return (
     <>
@@ -87,10 +202,8 @@ function ClassNode({ id, data, selected }: LegacyNodeProps<NodeData>): React.Rea
       />
 
       <div
-        className={`${visualQualityV2Enabled ? 'bg-slate-50' : 'bg-white'} border border-slate-300 rounded-lg shadow-sm min-w-[220px]`}
-        style={{
-          minHeight: contentMinHeight,
-        }}
+        className={`relative ${visualQualityV2Enabled ? 'bg-slate-50' : 'bg-white'} border border-slate-300 rounded-lg shadow-sm min-w-[220px]`}
+        style={{ minHeight: contentMinHeight }}
         {...getTransformDiagnosticsAttrs({
           nodeFamily: 'class',
           selected: Boolean(selected),
@@ -98,6 +211,7 @@ function ClassNode({ id, data, selected }: LegacyNodeProps<NodeData>): React.Rea
           hasSubLabel: Boolean(data.classStereotype),
         })}
       >
+        <NodeQuickCreateButtons nodeId={id} visible={Boolean(selected)} />
         <div className="border-b border-slate-300 px-3 py-2 text-center">
           {data.classStereotype && (
             <InlineTextEditSurface
@@ -128,152 +242,15 @@ function ClassNode({ id, data, selected }: LegacyNodeProps<NodeData>): React.Rea
         </div>
 
         <div className="border-b border-slate-300 px-3 py-2">
-          {attributes.length > 0 ? (
-            <ul className="space-y-1">
-              {attributes.map((attribute, index) => (
-                <li key={`attr-${index}`} className="text-xs text-slate-700 font-mono break-words">
-                  {editingAttributeIndex === index ? (
-                    <input
-                      autoFocus
-                      value={listDraft}
-                      onChange={(event) => setListDraft(event.target.value)}
-                      onBlur={commitAttributeEdit}
-                      onMouseDown={(event) => event.stopPropagation()}
-                      onKeyDown={(event) => {
-                        event.stopPropagation();
-                        if (event.key === 'Escape') {
-                          event.preventDefault();
-                          setEditingAttributeIndex(null);
-                        }
-                        if (event.key === 'Enter') {
-                          event.preventDefault();
-                          commitAttributeEdit();
-                        }
-                      }}
-                      className="w-full rounded border border-slate-300 bg-white px-1 py-0.5 outline-none"
-                    />
-                  ) : (
-                    <button
-                      type="button"
-                      className="w-full text-left hover:bg-slate-50 rounded px-1 -mx-1"
-                      onClick={(event) => {
-                        event.stopPropagation();
-                        beginAttributeEdit(index, attribute);
-                      }}
-                    >
-                      {attribute}
-                    </button>
-                  )}
-                </li>
-              ))}
-            </ul>
-          ) : (
-            <div className="text-[11px] text-slate-400">No attributes</div>
-          )}
-          <button
-            type="button"
-            className="mt-1 text-[11px] text-slate-500 hover:text-slate-700"
-            onClick={(event) => {
-              event.stopPropagation();
-              beginAttributeEdit(attributes.length, '');
-            }}
-          >
-            + Add attribute
-          </button>
+          {renderListSection('classAttributes', attributes, editingAttributeIndex, '+ attribute: Type', 'No attributes', '+ Add attribute')}
         </div>
 
         <div className="px-3 py-2">
-          {methods.length > 0 ? (
-            <ul className="space-y-1">
-              {methods.map((method, index) => (
-                <li key={`method-${index}`} className="text-xs text-slate-700 font-mono break-words">
-                  {editingMethodIndex === index ? (
-                    <input
-                      autoFocus
-                      value={listDraft}
-                      onChange={(event) => setListDraft(event.target.value)}
-                      onBlur={commitMethodEdit}
-                      onMouseDown={(event) => event.stopPropagation()}
-                      onKeyDown={(event) => {
-                        event.stopPropagation();
-                        if (event.key === 'Escape') {
-                          event.preventDefault();
-                          setEditingMethodIndex(null);
-                        }
-                        if (event.key === 'Enter') {
-                          event.preventDefault();
-                          commitMethodEdit();
-                        }
-                      }}
-                      className="w-full rounded border border-slate-300 bg-white px-1 py-0.5 outline-none"
-                    />
-                  ) : (
-                    <button
-                      type="button"
-                      className="w-full text-left hover:bg-slate-50 rounded px-1 -mx-1"
-                      onClick={(event) => {
-                        event.stopPropagation();
-                        beginMethodEdit(index, method);
-                      }}
-                    >
-                      {method}
-                    </button>
-                  )}
-                </li>
-              ))}
-            </ul>
-          ) : (
-            <div className="text-[11px] text-slate-400">No methods</div>
-          )}
-          <button
-            type="button"
-            className="mt-1 text-[11px] text-slate-500 hover:text-slate-700"
-            onClick={(event) => {
-              event.stopPropagation();
-              beginMethodEdit(methods.length, '');
-            }}
-          >
-            + Add method
-          </button>
+          {renderListSection('classMethods', methods, editingMethodIndex, '+ method(): void', 'No methods', '+ Add method')}
         </div>
       </div>
 
-      <Handle
-        type="source"
-        position={Position.Top}
-        id="top"
-        isConnectableStart
-        isConnectableEnd
-        className={`!w-3 !h-3 !border-2 !border-white transition-all duration-150 hover:scale-125 ${handleVisibilityClass}`}
-        style={getConnectorHandleStyle('top', isActiveSelected, handlePointerEvents)}
-      />
-      <Handle
-        type="source"
-        position={Position.Bottom}
-        id="bottom"
-        isConnectableStart
-        isConnectableEnd
-        className={`!w-3 !h-3 !border-2 !border-white transition-all duration-150 hover:scale-125 ${handleVisibilityClass}`}
-        style={getConnectorHandleStyle('bottom', isActiveSelected, handlePointerEvents)}
-      />
-      <Handle
-        type="source"
-        position={Position.Left}
-        id="left"
-        isConnectableStart
-        isConnectableEnd
-        className={`!w-3 !h-3 !border-2 !border-white transition-all duration-150 hover:scale-125 ${handleVisibilityClass}`}
-        style={getConnectorHandleStyle('left', isActiveSelected, handlePointerEvents)}
-      />
-      <Handle
-        type="source"
-        position={Position.Right}
-        id="right"
-        isConnectableStart
-        isConnectableEnd
-        className={`!w-3 !h-3 !border-2 !border-white transition-all duration-150 hover:scale-125 ${handleVisibilityClass}`}
-        style={getConnectorHandleStyle('right', isActiveSelected, handlePointerEvents)}
-      />
+      <StructuredNodeHandles isActiveSelected={isActiveSelected} />
     </>
   );
 }
diff --git a/src/components/custom-nodes/EntityNode.tsx b/src/components/custom-nodes/EntityNode.tsx
index 4945fba..e91b8ac 100644
--- a/src/components/custom-nodes/EntityNode.tsx
+++ b/src/components/custom-nodes/EntityNode.tsx
@@ -1,62 +1,31 @@
 import React, { memo } from 'react';
-import { Handle, Position } from '@/lib/reactflowCompat';
 import type { LegacyNodeProps } from '@/lib/reactflowCompat';
 import type { NodeData } from '@/lib/types';
 import { useInlineNodeTextEdit } from '@/hooks/useInlineNodeTextEdit';
-import { ROLLOUT_FLAGS } from '@/config/rolloutFlags';
-import { useFlowStore } from '@/store';
-import { getConnectorHandleStyle, getHandlePointerEvents, getV2HandleVisibilityClass } from '@/components/handleInteraction';
+import { InlineTextEditSurface } from '@/components/InlineTextEditSurface';
 import { getTransformDiagnosticsAttrs } from '@/components/transformDiagnostics';
 import { NodeTransformControls } from '@/components/NodeTransformControls';
 import { useActiveNodeSelection } from '@/components/useActiveNodeSelection';
+import { NodeQuickCreateButtons } from '@/components/NodeQuickCreateButtons';
+import { formatErFieldLabel, normalizeErFields, parseErField, stringifyErField } from '@/lib/entityFields';
+import { useStructuredListEditor } from '@/hooks/useStructuredListEditor';
+import { StructuredNodeHandles } from './StructuredNodeHandles';
+
+const applyErFieldPatch = (items: string[]): Record<string, unknown> => {
+  return { erFields: items.map((s) => parseErField(s)) };
+};
 
 function EntityNode({ id, data, selected }: LegacyNodeProps<NodeData>): React.ReactElement {
-  const visualQualityV2Enabled = ROLLOUT_FLAGS.visualQualityV2;
+  const visualQualityV2Enabled = true;
   const isActiveSelected = useActiveNodeSelection(Boolean(selected));
-  const handlePointerEvents = getHandlePointerEvents(visualQualityV2Enabled, isActiveSelected);
-  const handleVisibilityClass = visualQualityV2Enabled
-    ? getV2HandleVisibilityClass(isActiveSelected)
-    : isActiveSelected
-      ? 'opacity-100'
-      : 'opacity-0 group-hover:opacity-100 [.is-connecting_&]:opacity-100';
-  const fields = Array.isArray(data.erFields) ? data.erFields : [];
+  const fields = normalizeErFields(data.erFields);
   const labelEdit = useInlineNodeTextEdit(id, 'label', data.label || '');
-  const { setNodes } = useFlowStore();
-  const [editingFieldIndex, setEditingFieldIndex] = React.useState<number | null>(null);
-  const [fieldDraft, setFieldDraft] = React.useState('');
+  const fieldStrings = React.useMemo(() => fields.map(stringifyErField), [fields]);
+  const fieldEditor = useStructuredListEditor(id, fieldStrings, applyErFieldPatch);
   const entityBaseMinHeight = 130;
   const estimatedFieldsHeight = fields.length > 0 ? Math.min(fields.length, 6) * 18 + 24 : 18;
   const contentMinHeight = Math.max(entityBaseMinHeight, 56 + estimatedFieldsHeight);
 
-  const updateField = React.useCallback((index: number, value: string) => {
-    setNodes((nodes) =>
-      nodes.map((node) => {
-        if (node.id !== id) return node;
-        const current = Array.isArray(node.data?.erFields) ? [...node.data.erFields] : [];
-        if (index >= current.length) {
-          current.push(value);
-        } else {
-          current[index] = value;
-        }
-        return { ...node, data: { ...node.data, erFields: current } };
-      })
-    );
-  }, [id, setNodes]);
-
-  const beginFieldEdit = (index: number, value: string) => {
-    setEditingFieldIndex(index);
-    setFieldDraft(value);
-  };
-
-  const commitFieldEdit = () => {
-    if (editingFieldIndex === null) return;
-    const trimmed = fieldDraft.trim();
-    if (trimmed) {
-      updateField(editingFieldIndex, trimmed);
-    }
-    setEditingFieldIndex(null);
-  };
-
   return (
     <>
       <NodeTransformControls
@@ -66,10 +35,8 @@ function EntityNode({ id, data, selected }: LegacyNodeProps<NodeData>): React.Re
       />
 
       <div
-        className={`${visualQualityV2Enabled ? 'bg-slate-50' : 'bg-white'} border border-slate-300 rounded-lg shadow-sm min-w-[220px]`}
-        style={{
-          minHeight: contentMinHeight,
-        }}
+        className={`relative ${visualQualityV2Enabled ? 'bg-slate-50' : 'bg-white'} border border-slate-300 rounded-lg shadow-sm min-w-[220px]`}
+        style={{ minHeight: contentMinHeight }}
         {...getTransformDiagnosticsAttrs({
           nodeFamily: 'entity',
           selected: Boolean(selected),
@@ -77,30 +44,20 @@ function EntityNode({ id, data, selected }: LegacyNodeProps<NodeData>): React.Re
           hasSubLabel: fields.length > 0,
         })}
       >
+        <NodeQuickCreateButtons nodeId={id} visible={Boolean(selected)} />
         <div className="border-b border-slate-300 px-3 py-2 bg-slate-50 rounded-t-lg">
           <div className="text-[11px] font-semibold text-slate-500">Entity</div>
-          <div
+          <InlineTextEditSurface
+            isEditing={labelEdit.isEditing}
+            draft={labelEdit.draft}
+            displayValue={data.label || 'Entity'}
+            onBeginEdit={labelEdit.beginEdit}
+            onDraftChange={labelEdit.setDraft}
+            onCommit={labelEdit.commit}
+            onKeyDown={labelEdit.handleKeyDown}
             className={`${visualQualityV2Enabled ? 'text-[13px]' : 'text-sm'} font-semibold text-slate-800 break-words`}
-            title={data.label || 'Entity'}
-            onClick={(event) => {
-              event.stopPropagation();
-              labelEdit.beginEdit();
-            }}
-          >
-            {labelEdit.isEditing ? (
-              <input
-                autoFocus
-                value={labelEdit.draft}
-                onChange={(event) => labelEdit.setDraft(event.target.value)}
-                onBlur={labelEdit.commit}
-                onKeyDown={labelEdit.handleKeyDown}
-                onMouseDown={(event) => event.stopPropagation()}
-                className="w-full rounded border border-slate-300 bg-white/90 px-1 py-0.5 outline-none"
-              />
-            ) : (
-              data.label || 'Entity'
-            )}
-          </div>
+            isSelected={Boolean(selected)}
+          />
         </div>
 
         <div className="px-3 py-2">
@@ -108,24 +65,14 @@ function EntityNode({ id, data, selected }: LegacyNodeProps<NodeData>): React.Re
             <ul className="space-y-1">
               {fields.map((field, index) => (
                 <li key={`field-${index}`} className="text-xs text-slate-700 font-mono break-words">
-                  {editingFieldIndex === index ? (
+                  {fieldEditor.editingIndex === index ? (
                     <input
                       autoFocus
-                      value={fieldDraft}
-                      onChange={(event) => setFieldDraft(event.target.value)}
-                      onBlur={commitFieldEdit}
+                      value={fieldEditor.draft}
+                      onChange={(event) => fieldEditor.setDraft(event.target.value)}
+                      onBlur={fieldEditor.commitEdit}
                       onMouseDown={(event) => event.stopPropagation()}
-                      onKeyDown={(event) => {
-                        event.stopPropagation();
-                        if (event.key === 'Escape') {
-                          event.preventDefault();
-                          setEditingFieldIndex(null);
-                        }
-                        if (event.key === 'Enter') {
-                          event.preventDefault();
-                          commitFieldEdit();
-                        }
-                      }}
+                      onKeyDown={(event) => fieldEditor.handleKeyDown(event, index)}
                       className="w-full rounded border border-slate-300 bg-white px-1 py-0.5 outline-none"
                     />
                   ) : (
@@ -134,10 +81,20 @@ function EntityNode({ id, data, selected }: LegacyNodeProps<NodeData>): React.Re
                       className="w-full text-left hover:bg-slate-50 rounded px-1 -mx-1"
                       onClick={(event) => {
                         event.stopPropagation();
-                        beginFieldEdit(index, field);
+                        fieldEditor.beginEdit(index, stringifyErField(field));
                       }}
                     >
-                      {field}
+                      <div className="flex items-center justify-between gap-2">
+                        <span className="font-mono">{formatErFieldLabel(field)}</span>
+                        <span className="flex shrink-0 gap-1">
+                          {field.isPrimaryKey ? (
+                            <span className="rounded-full bg-amber-100 px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-amber-700">PK</span>
+                          ) : null}
+                          {field.isForeignKey ? (
+                            <span className="rounded-full bg-sky-100 px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-sky-700">FK</span>
+                          ) : null}
+                        </span>
+                      </div>
                     </button>
                   )}
                 </li>
@@ -146,55 +103,33 @@ function EntityNode({ id, data, selected }: LegacyNodeProps<NodeData>): React.Re
           ) : (
             <div className="text-[11px] text-slate-400">No fields</div>
           )}
-          <button
-            type="button"
-            className="mt-1 text-[11px] text-slate-500 hover:text-slate-700"
-            onClick={(event) => {
-              event.stopPropagation();
-              beginFieldEdit(fields.length, '');
-            }}
-          >
-            + Add field
-          </button>
+          {fieldEditor.editingIndex === fields.length ? (
+            <input
+              autoFocus
+              value={fieldEditor.draft}
+              onChange={(event) => fieldEditor.setDraft(event.target.value)}
+              onBlur={fieldEditor.commitEdit}
+              onMouseDown={(event) => event.stopPropagation()}
+              onKeyDown={(event) => fieldEditor.handleKeyDown(event, fields.length)}
+              placeholder="fieldName: TYPE"
+              className="mt-1 w-full rounded border border-slate-300 bg-white px-1 py-0.5 text-xs font-mono outline-none"
+            />
+          ) : (
+            <button
+              type="button"
+              className="mt-1 text-[11px] text-slate-500 hover:text-slate-700"
+              onClick={(event) => {
+                event.stopPropagation();
+                fieldEditor.beginEdit(fields.length, '');
+              }}
+            >
+              + Add field
+            </button>
+          )}
         </div>
       </div>
 
-      <Handle
-        type="source"
-        position={Position.Top}
-        id="top"
-        isConnectableStart
-        isConnectableEnd
-        className={`!w-3 !h-3 !border-2 !border-white transition-all duration-150 hover:scale-125 ${handleVisibilityClass}`}
-        style={getConnectorHandleStyle('top', isActiveSelected, handlePointerEvents)}
-      />
-      <Handle
-        type="source"
-        position={Position.Bottom}
-        id="bottom"
-        isConnectableStart
-        isConnectableEnd
-        className={`!w-3 !h-3 !border-2 !border-white transition-all duration-150 hover:scale-125 ${handleVisibilityClass}`}
-        style={getConnectorHandleStyle('bottom', isActiveSelected, handlePointerEvents)}
-      />
-      <Handle
-        type="source"
-        position={Position.Left}
-        id="left"
-        isConnectableStart
-        isConnectableEnd
-        className={`!w-3 !h-3 !border-2 !border-white transition-all duration-150 hover:scale-125 ${handleVisibilityClass}`}
-        style={getConnectorHandleStyle('left', isActiveSelected, handlePointerEvents)}
-      />
-      <Handle
-        type="source"
-        position={Position.Right}
-        id="right"
-        isConnectableStart
-        isConnectableEnd
-        className={`!w-3 !h-3 !border-2 !border-white transition-all duration-150 hover:scale-125 ${handleVisibilityClass}`}
-        style={getConnectorHandleStyle('right', isActiveSelected, handlePointerEvents)}
-      />
+      <StructuredNodeHandles isActiveSelected={isActiveSelected} />
     </>
   );
 }
diff --git a/src/components/custom-nodes/JourneyNode.tsx b/src/components/custom-nodes/JourneyNode.tsx
index d24f47d..14d1ce2 100644
--- a/src/components/custom-nodes/JourneyNode.tsx
+++ b/src/components/custom-nodes/JourneyNode.tsx
@@ -3,13 +3,7 @@ import type { LegacyNodeProps } from '@/lib/reactflowCompat';
 import type { NodeData } from '@/lib/types';
 import { useFlowStore } from '@/store';
 import { NodeChrome } from '@/components/NodeChrome';
-
-function getScoreTone(score: number | undefined): string {
-  if (typeof score !== 'number') return 'bg-slate-100 text-slate-600';
-  if (score >= 4) return 'bg-emerald-100 text-emerald-700';
-  if (score >= 2) return 'bg-amber-100 text-amber-700';
-  return 'bg-rose-100 text-rose-700';
-}
+import { JourneyScoreControl } from '@/components/journey/JourneyScoreControl';
 
 function useInlineJourneyEdit(
   nodeId: string,
@@ -84,11 +78,29 @@ function JourneyNode({ id, data, selected }: LegacyNodeProps<NodeData>): React.R
   const sectionEdit = useInlineJourneyEdit(id, data.journeySection || '', (nextValue) => ({
     journeySection: nextValue || 'General',
   }));
+  const { setNodes } = useFlowStore();
   const sectionLabel = data.journeySection || 'General';
   const score = data.journeyScore;
 
+  function updateScore(nextScore: number): void {
+    setNodes((nodes) =>
+      nodes.map((node) => (
+        node.id === id
+          ? {
+              ...node,
+              data: {
+                ...node.data,
+                journeyScore: nextScore,
+              },
+            }
+          : node
+      ))
+    );
+  }
+
   return (
     <NodeChrome
+      nodeId={id}
       selected={Boolean(selected)}
       minWidth={220}
       minHeight={120}
@@ -117,9 +129,12 @@ function JourneyNode({ id, data, selected }: LegacyNodeProps<NodeData>): React.R
               sectionLabel
             )}
           </span>
-          <span className={`rounded-md px-2 py-0.5 text-[11px] font-semibold ${getScoreTone(score)}`}>
-            {typeof score === 'number' ? `${score}/5` : 'Unscored'}
-          </span>
+          <JourneyScoreControl
+            score={score}
+            onChange={updateScore}
+            className="rounded-md bg-slate-50 px-2 py-1"
+            starClassName="text-sm leading-none"
+          />
         </div>
 
         <div
diff --git a/src/components/custom-nodes/MindmapNode.tsx b/src/components/custom-nodes/MindmapNode.tsx
index 9c2d6ae..d309295 100644
--- a/src/components/custom-nodes/MindmapNode.tsx
+++ b/src/components/custom-nodes/MindmapNode.tsx
@@ -7,6 +7,8 @@ import { InlineTextEditSurface } from '@/components/InlineTextEditSurface';
 import { NodeChrome } from '@/components/NodeChrome';
 import { resolveNodeVisualStyle } from '@/theme';
 import { requestMindmapTopicAction } from '@/hooks/mindmapTopicActionRequest';
+import { useFlowStore } from '@/store';
+import { getMindmapChildrenById, getMindmapDescendantIds } from '@/lib/mindmapTree';
 
 function MindmapNode({ id, data, selected }: LegacyNodeProps<NodeData>): React.ReactElement {
   const HANDLE_INSET_PX = 8;
@@ -24,6 +26,17 @@ function MindmapNode({ id, data, selected }: LegacyNodeProps<NodeData>): React.R
   const activeColor = data.color || (isRoot ? 'slate' : 'white');
   const activeColorMode = data.colorMode || (isRoot ? 'filled' : 'subtle');
   const visualStyle = resolveNodeVisualStyle(activeColor, activeColorMode, data.customColor);
+  const setNodes = useFlowStore((state) => state.setNodes);
+  const setEdges = useFlowStore((state) => state.setEdges);
+  const childCount = useFlowStore((state) => {
+    const childrenById = getMindmapChildrenById(state.nodes, state.edges);
+    return (childrenById.get(id) ?? []).length;
+  });
+  const hiddenDescendantCount = useFlowStore((state) => {
+    const childrenById = getMindmapChildrenById(state.nodes, state.edges);
+    return getMindmapDescendantIds(id, childrenById).size;
+  });
+  const isCollapsed = data.mindmapCollapsed === true;
   const branchHandles = [
     { id: 'left', position: Position.Left, side: 'left' as const },
     { id: 'right', position: Position.Right, side: 'right' as const },
@@ -55,6 +68,28 @@ function MindmapNode({ id, data, selected }: LegacyNodeProps<NodeData>): React.R
     event.stopPropagation();
     requestMindmapTopicAction(id, 'sibling');
   };
+  const toggleCollapsed = (event: React.MouseEvent<HTMLButtonElement>) => {
+    event.preventDefault();
+    event.stopPropagation();
+    const nextCollapsed = !isCollapsed;
+    const { nodes: currentNodes, edges: currentEdges } = useFlowStore.getState();
+    const currentChildrenById = getMindmapChildrenById(currentNodes, currentEdges);
+    const descendantIds = getMindmapDescendantIds(id, currentChildrenById);
+    setNodes((prev) => prev.map((node) => {
+      if (node.id === id) {
+        return { ...node, data: { ...node.data, mindmapCollapsed: nextCollapsed } };
+      }
+      if (descendantIds.has(node.id)) {
+        return { ...node, hidden: nextCollapsed };
+      }
+      return node;
+    }));
+    setEdges((prev) => prev.map((edge) => (
+      descendantIds.has(edge.source) || descendantIds.has(edge.target)
+        ? { ...edge, hidden: nextCollapsed }
+        : edge
+    )));
+  };
 
   return (
     <NodeChrome
@@ -73,6 +108,17 @@ function MindmapNode({ id, data, selected }: LegacyNodeProps<NodeData>): React.R
           color: visualStyle.text,
         }}
         >
+        {childCount > 0 ? (
+          <button
+            type="button"
+            aria-label={isCollapsed ? 'Expand branch' : 'Collapse branch'}
+            onClick={toggleCollapsed}
+            className={`absolute -bottom-2 left-1/2 z-10 flex h-5 min-w-5 -translate-x-1/2 items-center justify-center rounded-full border bg-white px-1 text-[10px] font-semibold text-slate-600 shadow-sm hover:bg-slate-50 ${selected ? 'opacity-100' : 'opacity-0 transition-opacity duration-150 group-hover:opacity-100'}`}
+            style={{ borderColor: visualStyle.border }}
+          >
+            {isCollapsed ? `+${hiddenDescendantCount}` : '▾'}
+          </button>
+        ) : null}
         {isRoot ? (
           <>
             <button
diff --git a/src/components/custom-nodes/MobileNode.tsx b/src/components/custom-nodes/MobileNode.tsx
index efcbb31..7de46e2 100644
--- a/src/components/custom-nodes/MobileNode.tsx
+++ b/src/components/custom-nodes/MobileNode.tsx
@@ -2,196 +2,19 @@ import React, { memo } from 'react';
 import type { LegacyNodeProps } from '@/lib/reactflowCompat';
 import { useTranslation } from 'react-i18next';
 import { NodeData } from '@/lib/types';
-import { User, Lock, Mail, ChevronLeft, Menu, Bell, Search } from 'lucide-react';
-import { ROLLOUT_FLAGS } from '@/config/rolloutFlags';
 import { NodeChrome } from '@/components/NodeChrome';
+import { renderMobileVariantContent } from './mobileVariantRenderer';
 import { getNodeColorPalette } from '../../theme';
 
-function MobileNode({ data, selected }: LegacyNodeProps<NodeData>): React.ReactElement {
+function MobileNode({ id, data, selected }: LegacyNodeProps<NodeData>): React.ReactElement {
     const { t } = useTranslation();
-    const visualQualityV2Enabled = ROLLOUT_FLAGS.visualQualityV2;
+    const visualQualityV2Enabled = true;
     const nodeColorPalette = getNodeColorPalette(visualQualityV2Enabled);
     const style = nodeColorPalette[data.color || 'slate'] || nodeColorPalette.slate;
 
-    // Render content based on variant
-    const renderContent = () => {
-        if (data.imageUrl) {
-            return (
-                <img
-                    src={data.imageUrl}
-                    alt={t('customNodes.mobileContent')}
-                    className="w-full h-full object-cover"
-                />
-            );
-        }
-
-        switch (data.variant) {
-            case 'login': // Clean Mobile Login
-                return (
-                    <div className="flex flex-col items-center justify-center h-full p-6 space-y-5 bg-white">
-                        <div className={`w-14 h-14 ${style.iconBg} rounded-2xl flex items-center justify-center mb-1`}>
-                            <div className={`w-8 h-8 rounded-full bg-white opacity-50`} />
-                        </div>
-                        <div className="w-full space-y-3">
-                            <div className="h-10 bg-slate-50 rounded-xl border border-slate-100 flex items-center px-4">
-                                <div className="w-16 h-2 bg-slate-200 rounded-sm" />
-                            </div>
-                            <div className="h-10 bg-slate-50 rounded-xl border border-slate-100 flex items-center px-4">
-                                <div className="w-12 h-2 bg-slate-200 rounded-sm" />
-                            </div>
-                        </div>
-                        <div className={`w-full h-10 ${style.bg} rounded-xl shadow-sm flex items-center justify-center`}>
-                            <div className="w-12 h-2 bg-white opacity-90 rounded-sm" />
-                        </div>
-                        <div className="flex gap-3 pt-2">
-                            <div className="w-10 h-10 rounded-full bg-slate-100" />
-                            <div className="w-10 h-10 rounded-full bg-slate-100" />
-                            <div className="w-10 h-10 rounded-full bg-slate-100" />
-                        </div>
-                    </div>
-                );
-
-            case 'social': // Social Feed Post
-                return (
-                    <div className="flex flex-col h-full bg-slate-50">
-                        {/* Header */}
-                        <div className="h-12 bg-white flex items-center px-4 border-b border-slate-100">
-                            <div className="w-24 h-4 bg-slate-800 rounded-sm" />
-                        </div>
-                        {/* Feed Item */}
-                        <div className="bg-white mt-2 pb-4">
-                            <div className="flex items-center gap-2 p-3">
-                                <div className="w-8 h-8 rounded-full bg-slate-200" />
-                                <div className="w-16 h-2.5 bg-slate-700 rounded-sm" />
-                            </div>
-                            <div className="aspect-square bg-slate-100 w-full flex items-center justify-center text-slate-300">
-                                <div className="w-12 h-12 rounded-lg border-2 border-slate-300 border-dashed" />
-                            </div>
-                            <div className="p-3 space-y-2">
-                                <div className="flex gap-3">
-                                    <div className="w-5 h-5 rounded-full bg-slate-200" />
-                                    <div className="w-5 h-5 rounded-full bg-slate-200" />
-                                    <div className="w-5 h-5 rounded-full bg-slate-200" />
-                                </div>
-                                <div className="w-2/3 h-2 bg-slate-200 rounded-sm mt-2" />
-                                <div className="w-1/3 h-2 bg-slate-100 rounded-sm" />
-                            </div>
-                        </div>
-                    </div>
-                );
-
-            case 'chat': // Messaging App
-                return (
-                    <div className="flex flex-col h-full bg-white">
-                        {/* Header */}
-                        <div className="h-12 border-b border-slate-100 flex items-center px-4 gap-3 bg-white z-10">
-                            <ChevronLeft className="w-5 h-5 text-slate-400" />
-                            <div className="w-8 h-8 rounded-full bg-slate-200" />
-                            <div className="w-20 h-2.5 bg-slate-800 rounded-sm" />
-                        </div>
-                        {/* Messages */}
-                        <div className="flex-1 p-4 space-y-4 bg-slate-50">
-                            <div className="flex gap-2">
-                                <div className="w-8 h-8 rounded-full bg-slate-200 shrink-0" />
-                                <div className="bg-white p-2.5 rounded-2xl rounded-tl-sm shadow-sm max-w-[70%] space-y-1.5">
-                                    <div className="w-32 h-2 bg-slate-200 rounded-sm" />
-                                    <div className="w-20 h-2 bg-slate-200 rounded-sm" />
-                                </div>
-                            </div>
-                            <div className="flex justify-end">
-                                <div className={`${style.bg} p-2.5 rounded-2xl rounded-tr-sm shadow-sm max-w-[70%]`}>
-                                    <div className="w-24 h-2 bg-white opacity-90 rounded-sm" />
-                                </div>
-                            </div>
-                            <div className="flex gap-2">
-                                <div className="w-8 h-8 rounded-full bg-slate-200 shrink-0" />
-                                <div className="bg-white p-2 rounded-2xl rounded-tl-sm shadow-sm max-w-[70%] flex items-center justify-center h-24 w-40">
-                                    <div className="w-8 h-8 rounded border-2 border-slate-100 border-dashed" />
-                                </div>
-                            </div>
-                        </div>
-                        {/* Input */}
-                        <div className="h-14 border-t border-slate-100 p-3 bg-white">
-                            <div className="h-full bg-slate-100 rounded-full px-4 flex items-center">
-                                <div className="w-32 h-2 bg-slate-300 rounded-sm" />
-                            </div>
-                        </div>
-                    </div>
-                );
-
-            case 'product': // Ecommerce Product
-                return (
-                    <div className="flex flex-col h-full bg-white">
-                        <div className="h-[45%] bg-slate-100 flex items-center justify-center relative">
-                            <div className="w-24 h-24 rounded-lg bg-white shadow-sm flex items-center justify-center">
-                                <div className="w-12 h-12 rounded border-2 border-slate-100 border-dashed" />
-                            </div>
-                            <div className="absolute top-4 right-4 w-8 h-8 bg-white rounded-full shadow-sm flex items-center justify-center">
-                                <div className="w-4 h-4 bg-slate-200 rounded-full" />
-                            </div>
-                        </div>
-                        <div className="flex-1 p-5 flex flex-col">
-                            <div className="space-y-2 mb-4">
-                                <div className="w-full h-4 bg-slate-800 rounded-sm" />
-                                <div className="w-2/3 h-4 bg-slate-800 rounded-sm" />
-                            </div>
-                            <div className="w-16 h-4 bg-slate-200 rounded-sm mb-6" />
-                            <div className="space-y-3 mt-auto">
-                                <div className="w-full h-2 bg-slate-100 rounded-sm" />
-                                <div className="w-full h-2 bg-slate-100 rounded-sm" />
-                                <div className="w-2/3 h-2 bg-slate-100 rounded-sm" />
-                            </div>
-                        </div>
-                        {/* Bottom Bar */}
-                        <div className="h-20 border-t border-slate-100 p-4 flex items-center gap-4 bg-white">
-                            <div className="flex-1 space-y-1">
-                                <div className="w-10 h-2 bg-slate-400 rounded-sm" />
-                                <div className="w-16 h-3 bg-slate-800 rounded-sm" />
-                            </div>
-                            <div className={`w-32 h-12 ${style.bg} rounded-xl shadow-sm flex items-center justify-center`}>
-                                <div className="w-12 h-2 bg-white rounded-sm" />
-                            </div>
-                        </div>
-                    </div>
-                );
-
-            case 'list':
-            case 'profile':
-                // Keep minimal list view
-                return (
-                    <div className="flex flex-col h-full bg-white">
-                        <div className={`h-12 border-b border-slate-100 flex items-center px-4 justify-between`}>
-                            <div className="w-24 h-3 bg-slate-800 rounded-sm" />
-                            <div className={`w-6 h-6 rounded-full bg-slate-100`} />
-                        </div>
-                        <div className="flex-1 p-3 space-y-2">
-                            {[1, 2, 3, 4, 5, 6].map((i) => (
-                                <div key={i} className={`flex items-center gap-3 p-2 border border-slate-50 rounded-lg`}>
-                                    <div className="w-10 h-10 rounded-lg bg-slate-100 shrink-0" />
-                                    <div className="flex-1 space-y-1.5">
-                                        <div className="h-2.5 w-32 bg-slate-800 rounded-sm opacity-80" />
-                                        <div className="h-2 w-20 bg-slate-300 rounded-sm" />
-                                    </div>
-                                    <div className="w-4 h-4 rounded-full bg-slate-100" />
-                                </div>
-                            ))}
-                        </div>
-                    </div>
-                );
-
-            default:
-                return (
-                    <div className={`flex-1 ${style.iconBg} bg-opacity-30 relative p-4 flex flex-col items-center justify-center`}>
-                        <div className="text-slate-200">
-                            <div className={`w-12 h-20 rounded border-2 ${style.border} border-dashed`} />
-                        </div>
-                    </div>
-                );
-        }
-    };
-
     return (
         <NodeChrome
+            nodeId={id}
             selected={Boolean(selected)}
             minWidth={300}
             minHeight={600}
@@ -221,7 +44,12 @@ function MobileNode({ data, selected }: LegacyNodeProps<NodeData>): React.ReactE
 
                 {/* Screen Content */}
                 <div className="flex-1 bg-white relative overflow-hidden flex flex-col">
-                    {renderContent()}
+                    {renderMobileVariantContent({
+                        imageUrl: data.imageUrl,
+                        variant: data.variant,
+                        style,
+                        imageAlt: t('customNodes.mobileContent'),
+                    })}
 
                     {/* Dynamic Label Overlay - Subtler */}
                     {data.label && !['list', 'profile'].includes(data.variant || '') && (
diff --git a/src/components/custom-nodes/SequenceParticipantNode.tsx b/src/components/custom-nodes/SequenceParticipantNode.tsx
new file mode 100644
index 0000000..495bc1b
--- /dev/null
+++ b/src/components/custom-nodes/SequenceParticipantNode.tsx
@@ -0,0 +1,81 @@
+import React, { memo } from 'react';
+import { User } from 'lucide-react';
+import { Position, type LegacyNodeProps } from '@/lib/reactflowCompat';
+import type { NodeData } from '@/lib/types';
+import { useInlineNodeTextEdit } from '@/hooks/useInlineNodeTextEdit';
+import { InlineTextEditSurface } from '@/components/InlineTextEditSurface';
+import { NodeChrome } from '@/components/NodeChrome';
+import { getTransformDiagnosticsAttrs } from '@/components/transformDiagnostics';
+
+// These constants are used by SequenceMessageEdge to position arrows correctly.
+export const SEQ_BOX_H = 48;
+export const SEQ_ACTOR_EXTRA_H = 40;
+export const SEQ_LIFELINE_H = 500;
+export const SEQ_MSG_OFFSET = 20; // gap between box bottom and first message
+export const SEQ_MSG_SPACING = 52;
+
+const SEQ_NODE_W = 140;
+
+// Single invisible handle at top-center — used by SequenceMessageEdge
+const TOP_HANDLE_ONLY = [{ id: 'top', position: Position.Top, side: 'top' as const }];
+
+function SequenceParticipantNode({ id, data, selected }: LegacyNodeProps<NodeData>): React.ReactElement {
+  const labelEdit = useInlineNodeTextEdit(id, 'label', data.label || '');
+  const isActor = data.seqParticipantKind === 'actor';
+  const totalH = (isActor ? SEQ_ACTOR_EXTRA_H : 0) + SEQ_BOX_H + SEQ_LIFELINE_H;
+
+  return (
+    <NodeChrome
+      nodeId={id}
+      selected={Boolean(selected)}
+      minWidth={SEQ_NODE_W}
+      minHeight={totalH}
+      handles={TOP_HANDLE_ONLY}
+      handleClassName="!w-2 !h-2 !border !border-white !bg-slate-400 transition-all duration-150 hover:scale-125 opacity-0 group-hover:opacity-100 [.is-connecting_&]:opacity-100"
+      {...getTransformDiagnosticsAttrs({ nodeFamily: 'sequence', selected: Boolean(selected), minHeight: totalH })}
+    >
+      <div
+        className="relative flex select-none flex-col items-center"
+        style={{ width: SEQ_NODE_W, height: totalH }}
+      >
+        {/* Actor stick figure */}
+        {isActor && (
+          <div className="flex flex-col items-center pb-1 pt-1">
+            <User className="h-7 w-7 text-slate-500" strokeWidth={1.5} />
+          </div>
+        )}
+
+        {/* Participant box */}
+        <div
+          className="flex w-full items-center justify-center rounded border border-slate-300 bg-white px-3 shadow-sm"
+          style={{ height: SEQ_BOX_H }}
+        >
+          <InlineTextEditSurface
+            isEditing={labelEdit.isEditing}
+            draft={labelEdit.draft}
+            displayValue={data.label || 'Participant'}
+            onBeginEdit={labelEdit.beginEdit}
+            onDraftChange={labelEdit.setDraft}
+            onCommit={labelEdit.commit}
+            onKeyDown={labelEdit.handleKeyDown}
+            className="w-full truncate text-center text-[12px] font-semibold text-slate-700"
+            inputClassName="text-center text-[12px]"
+            isSelected={Boolean(selected)}
+          />
+        </div>
+
+        {/* Dashed lifeline */}
+        <div
+          className="mt-0"
+          style={{
+            width: 1.5,
+            height: SEQ_LIFELINE_H,
+            background: 'repeating-linear-gradient(to bottom, #94a3b8 0px, #94a3b8 6px, transparent 6px, transparent 12px)',
+          }}
+        />
+      </div>
+    </NodeChrome>
+  );
+}
+
+export default memo(SequenceParticipantNode);
diff --git a/src/components/custom-nodes/StructuredNodeHandles.tsx b/src/components/custom-nodes/StructuredNodeHandles.tsx
new file mode 100644
index 0000000..44d10cb
--- /dev/null
+++ b/src/components/custom-nodes/StructuredNodeHandles.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import { Handle, Position } from '@/lib/reactflowCompat';
+import { getConnectorHandleStyle, getHandlePointerEvents, getV2HandleVisibilityClass } from '@/components/handleInteraction';
+
+interface StructuredNodeHandlesProps {
+  isActiveSelected: boolean;
+}
+
+const HANDLE_POSITIONS = [
+  { id: 'top', position: Position.Top },
+  { id: 'bottom', position: Position.Bottom },
+  { id: 'left', position: Position.Left },
+  { id: 'right', position: Position.Right },
+] as const;
+
+export function StructuredNodeHandles({ isActiveSelected }: StructuredNodeHandlesProps): React.ReactElement {
+  const visualQualityV2Enabled = true;
+  const handlePointerEvents = getHandlePointerEvents(visualQualityV2Enabled, isActiveSelected);
+  const handleVisibilityClass = visualQualityV2Enabled
+    ? getV2HandleVisibilityClass(isActiveSelected)
+    : isActiveSelected
+      ? 'opacity-100'
+      : 'opacity-0 group-hover:opacity-100 [.is-connecting_&]:opacity-100';
+
+  return (
+    <>
+      {HANDLE_POSITIONS.map(({ id, position }) => (
+        <Handle
+          key={id}
+          type="source"
+          position={position}
+          id={id}
+          isConnectableStart
+          isConnectableEnd
+          className={`!w-3 !h-3 !border-2 !border-white transition-all duration-150 hover:scale-125 ${handleVisibilityClass}`}
+          style={getConnectorHandleStyle(id, isActiveSelected, handlePointerEvents)}
+        />
+      ))}
+    </>
+  );
+}
diff --git a/src/components/custom-nodes/browserVariantRenderer.tsx b/src/components/custom-nodes/browserVariantRenderer.tsx
new file mode 100644
index 0000000..7f29b6a
--- /dev/null
+++ b/src/components/custom-nodes/browserVariantRenderer.tsx
@@ -0,0 +1,348 @@
+import type React from 'react';
+import { Cookie, Layout, Lock } from 'lucide-react';
+import type { ThemeColors } from '@/theme';
+
+interface BrowserVariantRendererParams {
+  imageUrl?: string;
+  variant?: string;
+  label?: string;
+  style: ThemeColors;
+  lockIconVisible: boolean;
+  imageAlt: string;
+}
+
+export function renderBrowserVariantContent({
+  imageUrl,
+  variant,
+  label,
+  style,
+  lockIconVisible,
+  imageAlt,
+}: BrowserVariantRendererParams): React.ReactElement {
+  if (imageUrl) {
+    return (
+      <img
+        src={imageUrl}
+        alt={imageAlt}
+        className="h-full w-full object-cover object-top"
+      />
+    );
+  }
+
+  switch (variant) {
+    case 'landing':
+      return (
+        <div className="flex h-full flex-col bg-white">
+          <div className={`flex flex-1 flex-col items-center justify-center space-y-3 p-6 ${style.iconBg} bg-opacity-10`}>
+            <div className="space-y-2 text-center">
+              <div className="mx-auto h-4 w-32 rounded-lg bg-slate-800 opacity-80" />
+              <div className="mx-auto h-2 w-48 rounded-md bg-slate-400 opacity-60" />
+            </div>
+            <div className="mt-4 flex gap-2">
+              <div className={`h-6 w-16 rounded-md shadow-sm ${style.bg}`} />
+              <div className="h-6 w-16 rounded-md border border-slate-200 bg-white" />
+            </div>
+          </div>
+          <div className="grid h-1/3 grid-cols-3 divide-x divide-slate-100 border-t border-slate-100">
+            {[1, 2, 3].map((item) => (
+              <div key={item} className="flex flex-col items-center justify-center space-y-2 p-3">
+                <div className={`mb-1 h-8 w-8 rounded-full ${style.iconBg}`} />
+                <div className="h-1.5 w-12 rounded-sm bg-slate-200" />
+              </div>
+            ))}
+          </div>
+        </div>
+      );
+
+    case 'dashboard':
+      return (
+        <div className="flex h-full bg-slate-50">
+          <div className="flex w-12 flex-col items-center space-y-3 border-r border-slate-200 bg-white py-3">
+            <div className={`h-6 w-6 rounded-md ${style.bg}`} />
+            <div className="h-0.5 w-4 bg-slate-200" />
+            {[1, 2, 3, 4].map((item) => (
+              <div key={item} className="h-6 w-6 rounded-md bg-slate-100" />
+            ))}
+          </div>
+          <div className="flex flex-1 flex-col">
+            <div className="flex h-10 items-center justify-between border-b border-slate-200 bg-white px-4">
+              <div className="h-2 w-24 rounded-sm bg-slate-200" />
+              <div className="h-6 w-6 rounded-full bg-slate-200" />
+            </div>
+            <div className="grid flex-1 grid-cols-2 gap-3 overflow-hidden p-3">
+              <div className="space-y-2 rounded-lg border border-slate-200 bg-white p-2 shadow-sm">
+                <div className="h-2 w-8 rounded-sm bg-slate-200" />
+                <div className={`flex h-16 w-full items-end justify-center gap-1 rounded-md px-2 pb-1 ${style.iconBg} bg-opacity-20`}>
+                  <div className={`h-6 w-2 opacity-40 ${style.bg}`} />
+                  <div className={`h-10 w-2 opacity-60 ${style.bg}`} />
+                  <div className={`h-8 w-2 opacity-50 ${style.bg}`} />
+                  <div className={`h-12 w-2 ${style.bg}`} />
+                </div>
+              </div>
+              <div className="space-y-2 rounded-lg border border-slate-200 bg-white p-2 shadow-sm">
+                <div className="h-2 w-12 rounded-sm bg-slate-200" />
+                <div className="space-y-1.5">
+                  <div className="h-1.5 w-full rounded-sm bg-slate-100" />
+                  <div className="h-1.5 w-3/4 rounded-sm bg-slate-100" />
+                  <div className="h-1.5 w-full rounded-sm bg-slate-100" />
+                </div>
+              </div>
+              <div className="col-span-2 flex items-center gap-3 rounded-lg border border-slate-200 bg-white p-2 shadow-sm">
+                <div className="h-2 flex-1 rounded-sm bg-slate-100" />
+                <div className="h-2 flex-1 rounded-sm bg-slate-100" />
+              </div>
+            </div>
+          </div>
+        </div>
+      );
+
+    case 'form':
+      return (
+        <div className={`flex h-full items-center justify-center ${style.iconBg} bg-opacity-5`}>
+          <div className="w-3/5 space-y-3 rounded-lg border border-slate-200 bg-white p-4 shadow-sm">
+            <div className="mb-2 space-y-1 text-center">
+              <div className="mx-auto h-2.5 w-1/2 rounded-sm bg-slate-800" />
+              <div className="mx-auto h-1.5 w-3/4 rounded-sm bg-slate-300" />
+            </div>
+            <div className="space-y-2">
+              <div className="h-6 w-full rounded border border-slate-200 bg-slate-50" />
+              <div className="h-6 w-full rounded border border-slate-200 bg-slate-50" />
+            </div>
+            <div className={`mt-1 h-6 w-full rounded shadow-sm ${style.bg}`} />
+          </div>
+        </div>
+      );
+
+    case 'cookie':
+      return (
+        <div className="relative flex h-full flex-col bg-slate-50">
+          <div className="flex flex-1 flex-col items-center space-y-4 p-4 opacity-50">
+            <div className="h-32 w-3/4 rounded-lg border border-slate-200 bg-white shadow-sm" />
+            <div className="h-4 w-full rounded-sm bg-slate-200" />
+            <div className="h-4 w-2/3 rounded-sm bg-slate-200" />
+          </div>
+          <div className="absolute inset-0 z-10 bg-slate-900/10" />
+          <div className={`absolute bottom-0 left-0 right-0 z-20 border-t bg-white p-4 shadow-[0_-4px_6px_-1px_rgba(0,0,0,0.1)] ${style.border}`}>
+            <div className="flex items-start gap-3">
+              <Cookie className={`mt-1 h-6 w-6 shrink-0 ${style.text}`} />
+              <div className="flex-1 space-y-2">
+                <div className="h-2.5 w-32 rounded-sm bg-slate-800" />
+                <div className="space-y-1.5">
+                  <div className="h-1.5 w-full rounded-sm bg-slate-300" />
+                  <div className="h-1.5 w-4/5 rounded-sm bg-slate-300" />
+                </div>
+              </div>
+            </div>
+            <div className="mt-3 flex gap-2 pl-9">
+              <div className="h-7 w-20 rounded-md bg-slate-800 shadow-sm" />
+              <div className={`h-7 w-20 rounded-md border bg-white ${style.border}`} />
+            </div>
+          </div>
+        </div>
+      );
+
+    case 'pricing':
+      return (
+        <div className="flex h-full flex-col bg-slate-50">
+          <div className="flex h-16 flex-col items-center justify-center space-y-1.5 border-b border-slate-100 bg-white">
+            <div className="h-2.5 w-32 rounded-sm bg-slate-800" />
+            <div className="h-1.5 w-48 rounded-sm bg-slate-300" />
+          </div>
+          <div className="grid flex-1 grid-cols-3 items-center gap-3 p-4">
+            {[1, 2, 3].map((item) => (
+              <div key={item} className={`relative flex h-full flex-col overflow-hidden rounded-lg border bg-white p-2 shadow-sm ${item === 2 ? style.border : 'border-slate-200'}`}>
+                {item === 2 ? <div className={`absolute inset-x-0 top-0 h-1 ${style.bg}`} /> : null}
+                <div className="mb-3 flex flex-col items-center space-y-1.5 pt-2 text-center">
+                  <div className="h-2 w-8 rounded-sm bg-slate-400" />
+                  <div className="h-4 w-12 rounded-sm bg-slate-800" />
+                </div>
+                <div className="flex-1 space-y-1.5">
+                  <div className="h-1 w-full rounded-sm bg-slate-100" />
+                  <div className="h-1 w-full rounded-sm bg-slate-100" />
+                  <div className="h-1 w-2/3 rounded-sm bg-slate-100" />
+                </div>
+                <div className={`mt-3 h-5 w-full rounded-sm ${item === 2 ? style.bg : 'bg-slate-100'}`} />
+              </div>
+            ))}
+          </div>
+        </div>
+      );
+
+    case 'analytics':
+      return (
+        <div className="flex h-full flex-col bg-slate-950 text-white">
+          <div className="grid grid-cols-3 gap-2 border-b border-white/10 p-3">
+            {[1, 2, 3].map((item) => (
+              <div key={item} className="rounded-lg border border-white/10 bg-white/5 p-2">
+                <div className="h-2 w-10 rounded-sm bg-white/30" />
+                <div className={`mt-2 h-5 w-14 rounded-sm ${style.bg}`} />
+              </div>
+            ))}
+          </div>
+          <div className="grid flex-1 grid-cols-[1.5fr_1fr] gap-3 p-3">
+            <div className="rounded-xl border border-white/10 bg-white/5 p-3">
+              <div className="mb-3 h-2 w-24 rounded-sm bg-white/20" />
+              <div className="flex h-[calc(100%-20px)] items-end gap-2">
+                {[28, 56, 44, 72, 64, 88].map((height) => (
+                  <div key={height} className={`w-full rounded-t ${style.bg}`} style={{ height }} />
+                ))}
+              </div>
+            </div>
+            <div className="space-y-2">
+              {[1, 2, 3, 4].map((item) => (
+                <div key={item} className="rounded-lg border border-white/10 bg-white/5 p-2">
+                  <div className="h-2 w-12 rounded-sm bg-white/20" />
+                  <div className="mt-2 h-8 rounded-md bg-white/10" />
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      );
+
+    case 'settings':
+      return (
+        <div className="grid h-full grid-cols-[88px_1fr] bg-slate-50">
+          <div className="space-y-2 border-r border-slate-200 bg-white p-3">
+            {[1, 2, 3, 4, 5].map((item) => (
+              <div key={item} className={`h-8 rounded-md ${item === 2 ? style.iconBg : 'bg-slate-100'}`} />
+            ))}
+          </div>
+          <div className="space-y-3 p-4">
+            <div className="h-3 w-32 rounded-sm bg-slate-800" />
+            {[1, 2, 3].map((item) => (
+              <div key={item} className="rounded-xl border border-slate-200 bg-white p-3 shadow-sm">
+                <div className="flex items-center justify-between">
+                  <div className="space-y-1.5">
+                    <div className="h-2.5 w-24 rounded-sm bg-slate-700" />
+                    <div className="h-1.5 w-40 rounded-sm bg-slate-200" />
+                  </div>
+                  <div className={`h-6 w-10 rounded-full ${item === 1 ? style.bg : 'bg-slate-200'}`} />
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      );
+
+    case 'docs':
+      return (
+        <div className="grid h-full grid-cols-[72px_1fr] bg-white">
+          <div className="space-y-2 border-r border-slate-100 bg-slate-50 p-3">
+            {[1, 2, 3, 4].map((item) => (
+              <div key={item} className="h-2 rounded-sm bg-slate-200" />
+            ))}
+          </div>
+          <div className="space-y-3 p-4">
+            <div className="h-4 w-40 rounded-sm bg-slate-900" />
+            <div className="space-y-2">
+              {[1, 2, 3, 4, 5].map((item) => (
+                <div key={item} className={`h-2 rounded-sm ${item === 3 ? 'w-2/3' : 'w-full'} bg-slate-200`} />
+              ))}
+            </div>
+            <div className="rounded-xl border border-slate-200 bg-slate-950 p-3">
+              <div className="space-y-2">
+                {[1, 2, 3, 4].map((item) => (
+                  <div key={item} className={`h-2 rounded-sm ${item === 4 ? 'w-1/2' : 'w-full'} bg-emerald-300/30`} />
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+      );
+
+    case 'checkout':
+      return (
+        <div className="grid h-full grid-cols-[1.2fr_0.9fr] bg-slate-50">
+          <div className="space-y-3 p-4">
+            <div className="h-3 w-32 rounded-sm bg-slate-800" />
+            {[1, 2, 3].map((item) => (
+              <div key={item} className="rounded-xl border border-slate-200 bg-white p-3 shadow-sm">
+                <div className="h-2 w-20 rounded-sm bg-slate-300" />
+                <div className="mt-3 grid grid-cols-2 gap-2">
+                  <div className="h-8 rounded-md bg-slate-100" />
+                  <div className="h-8 rounded-md bg-slate-100" />
+                </div>
+              </div>
+            ))}
+          </div>
+          <div className="border-l border-slate-200 bg-white p-4">
+            <div className="h-3 w-24 rounded-sm bg-slate-700" />
+            <div className="mt-4 space-y-3">
+              {[1, 2, 3].map((item) => (
+                <div key={item} className="flex items-center justify-between">
+                  <div className="space-y-1">
+                    <div className="h-2 w-16 rounded-sm bg-slate-300" />
+                    <div className="h-1.5 w-10 rounded-sm bg-slate-200" />
+                  </div>
+                  <div className="h-2 w-8 rounded-sm bg-slate-300" />
+                </div>
+              ))}
+            </div>
+            <div className={`mt-6 h-10 rounded-lg ${style.bg}`} />
+          </div>
+        </div>
+      );
+
+    case 'kanban':
+      return (
+        <div className="grid h-full grid-cols-3 gap-3 bg-slate-100 p-3">
+          {['Backlog', 'In Progress', 'Done'].map((column, index) => (
+            <div key={column} className="rounded-xl border border-slate-200 bg-white p-2 shadow-sm">
+              <div className="mb-2 flex items-center justify-between">
+                <div className="h-2.5 w-16 rounded-sm bg-slate-700" />
+                <div className={`h-5 w-5 rounded-full ${index === 1 ? style.bg : 'bg-slate-100'}`} />
+              </div>
+              <div className="space-y-2">
+                {[1, 2, 3].map((item) => (
+                  <div key={item} className="rounded-lg border border-slate-200 bg-slate-50 p-2">
+                    <div className="h-2 w-full rounded-sm bg-slate-200" />
+                    <div className="mt-2 flex items-center justify-between">
+                      <div className="h-1.5 w-10 rounded-sm bg-slate-200" />
+                      <div className={`h-4 w-4 rounded-full ${style.iconBg}`} />
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          ))}
+        </div>
+      );
+
+    case 'modal':
+      return (
+        <div className="relative flex h-full w-full items-center justify-center bg-slate-900/10 p-4">
+          <div className="relative flex w-4/5 flex-col gap-3 rounded-lg border border-slate-200 bg-white p-4 shadow-lg">
+            <div className="flex items-center justify-between border-b border-slate-100 pb-2">
+              <div className="h-2.5 w-24 rounded-sm bg-slate-800" />
+              <div className="h-3 w-3 rounded-full bg-slate-200" />
+            </div>
+            <div className="space-y-2">
+              <div className="h-2 w-full rounded-sm bg-slate-100" />
+              <div className="h-2 w-full rounded-sm bg-slate-100" />
+              <div className="h-2 w-2/3 rounded-sm bg-slate-100" />
+            </div>
+            <div className="flex justify-end gap-2 pt-2">
+              <div className="h-6 w-16 rounded-md bg-slate-100" />
+              <div className={`h-6 w-16 rounded-md ${style.bg}`} />
+            </div>
+          </div>
+        </div>
+      );
+
+    default:
+      return (
+        <div className={`relative flex flex-1 flex-col items-center justify-center border-t p-4 ${style.iconBg} ${style.border} bg-opacity-30`}>
+          <div className={style.iconColor}>
+            <Layout className="h-8 w-8 opacity-50" />
+          </div>
+          {label ? (
+            <div className="mt-3 flex items-center gap-1 text-[10px] uppercase tracking-[0.18em] text-slate-400">
+              {lockIconVisible ? <Lock className="h-3 w-3 opacity-50" /> : null}
+              <span>{label}</span>
+            </div>
+          ) : null}
+        </div>
+      );
+  }
+}
diff --git a/src/components/custom-nodes/mobileVariantRenderer.tsx b/src/components/custom-nodes/mobileVariantRenderer.tsx
new file mode 100644
index 0000000..82df028
--- /dev/null
+++ b/src/components/custom-nodes/mobileVariantRenderer.tsx
@@ -0,0 +1,323 @@
+import type React from 'react';
+import { ChevronLeft } from 'lucide-react';
+import type { ThemeColors } from '@/theme';
+
+interface MobileVariantRendererParams {
+  imageUrl?: string;
+  variant?: string;
+  style: ThemeColors;
+  imageAlt: string;
+}
+
+export function renderMobileVariantContent({
+  imageUrl,
+  variant,
+  style,
+  imageAlt,
+}: MobileVariantRendererParams): React.ReactElement {
+  if (imageUrl) {
+    return (
+      <img
+        src={imageUrl}
+        alt={imageAlt}
+        className="h-full w-full object-cover"
+      />
+    );
+  }
+
+  switch (variant) {
+    case 'login':
+      return (
+        <div className="flex h-full flex-col items-center justify-center space-y-5 bg-white p-6">
+          <div className={`mb-1 flex h-14 w-14 items-center justify-center rounded-2xl ${style.iconBg}`}>
+            <div className="h-8 w-8 rounded-full bg-white opacity-50" />
+          </div>
+          <div className="w-full space-y-3">
+            <div className="flex h-10 items-center rounded-xl border border-slate-100 bg-slate-50 px-4">
+              <div className="h-2 w-16 rounded-sm bg-slate-200" />
+            </div>
+            <div className="flex h-10 items-center rounded-xl border border-slate-100 bg-slate-50 px-4">
+              <div className="h-2 w-12 rounded-sm bg-slate-200" />
+            </div>
+          </div>
+          <div className={`flex h-10 w-full items-center justify-center rounded-xl shadow-sm ${style.bg}`}>
+            <div className="h-2 w-12 rounded-sm bg-white opacity-90" />
+          </div>
+          <div className="flex gap-3 pt-2">
+            {[1, 2, 3].map((item) => (
+              <div key={item} className="h-10 w-10 rounded-full bg-slate-100" />
+            ))}
+          </div>
+        </div>
+      );
+
+    case 'social':
+      return (
+        <div className="flex h-full flex-col bg-slate-50">
+          <div className="flex h-12 items-center border-b border-slate-100 bg-white px-4">
+            <div className="h-4 w-24 rounded-sm bg-slate-800" />
+          </div>
+          <div className="mt-2 bg-white pb-4">
+            <div className="flex items-center gap-2 p-3">
+              <div className="h-8 w-8 rounded-full bg-slate-200" />
+              <div className="h-2.5 w-16 rounded-sm bg-slate-700" />
+            </div>
+            <div className="flex aspect-square w-full items-center justify-center bg-slate-100 text-slate-300">
+              <div className="h-12 w-12 rounded-lg border-2 border-dashed border-slate-300" />
+            </div>
+            <div className="space-y-2 p-3">
+              <div className="flex gap-3">
+                {[1, 2, 3].map((item) => (
+                  <div key={item} className="h-5 w-5 rounded-full bg-slate-200" />
+                ))}
+              </div>
+              <div className="mt-2 h-2 w-2/3 rounded-sm bg-slate-200" />
+              <div className="h-2 w-1/3 rounded-sm bg-slate-100" />
+            </div>
+          </div>
+        </div>
+      );
+
+    case 'chat':
+      return (
+        <div className="flex h-full flex-col bg-white">
+          <div className="z-10 flex h-12 items-center gap-3 border-b border-slate-100 bg-white px-4">
+            <ChevronLeft className="h-5 w-5 text-slate-400" />
+            <div className="h-8 w-8 rounded-full bg-slate-200" />
+            <div className="h-2.5 w-20 rounded-sm bg-slate-800" />
+          </div>
+          <div className="flex-1 space-y-4 bg-slate-50 p-4">
+            <div className="flex gap-2">
+              <div className="h-8 w-8 shrink-0 rounded-full bg-slate-200" />
+              <div className="max-w-[70%] space-y-1.5 rounded-2xl rounded-tl-sm bg-white p-2.5 shadow-sm">
+                <div className="h-2 w-32 rounded-sm bg-slate-200" />
+                <div className="h-2 w-20 rounded-sm bg-slate-200" />
+              </div>
+            </div>
+            <div className="flex justify-end">
+              <div className={`max-w-[70%] rounded-2xl rounded-tr-sm p-2.5 shadow-sm ${style.bg}`}>
+                <div className="h-2 w-24 rounded-sm bg-white opacity-90" />
+              </div>
+            </div>
+            <div className="flex gap-2">
+              <div className="h-8 w-8 shrink-0 rounded-full bg-slate-200" />
+              <div className="flex h-24 w-40 items-center justify-center rounded-2xl rounded-tl-sm bg-white p-2 shadow-sm">
+                <div className="h-8 w-8 rounded border-2 border-dashed border-slate-100" />
+              </div>
+            </div>
+          </div>
+          <div className="h-14 border-t border-slate-100 bg-white p-3">
+            <div className="flex h-full items-center rounded-full bg-slate-100 px-4">
+              <div className="h-2 w-32 rounded-sm bg-slate-300" />
+            </div>
+          </div>
+        </div>
+      );
+
+    case 'product':
+      return (
+        <div className="flex h-full flex-col bg-white">
+          <div className="relative flex h-[45%] items-center justify-center bg-slate-100">
+            <div className="flex h-24 w-24 items-center justify-center rounded-lg bg-white shadow-sm">
+              <div className="h-12 w-12 rounded border-2 border-dashed border-slate-100" />
+            </div>
+            <div className="absolute right-4 top-4 flex h-8 w-8 items-center justify-center rounded-full bg-white shadow-sm">
+              <div className="h-4 w-4 rounded-full bg-slate-200" />
+            </div>
+          </div>
+          <div className="flex flex-1 flex-col p-5">
+            <div className="mb-4 space-y-2">
+              <div className="h-4 w-full rounded-sm bg-slate-800" />
+              <div className="h-4 w-2/3 rounded-sm bg-slate-800" />
+            </div>
+            <div className="mb-6 h-4 w-16 rounded-sm bg-slate-200" />
+            <div className="mt-auto space-y-3">
+              <div className="h-2 w-full rounded-sm bg-slate-100" />
+              <div className="h-2 w-full rounded-sm bg-slate-100" />
+              <div className="h-2 w-2/3 rounded-sm bg-slate-100" />
+            </div>
+          </div>
+          <div className="flex h-20 items-center gap-4 border-t border-slate-100 bg-white p-4">
+            <div className="flex-1 space-y-1">
+              <div className="h-2 w-10 rounded-sm bg-slate-400" />
+              <div className="h-3 w-16 rounded-sm bg-slate-800" />
+            </div>
+            <div className={`flex h-12 w-32 items-center justify-center rounded-xl shadow-sm ${style.bg}`}>
+              <div className="h-2 w-12 rounded-sm bg-white" />
+            </div>
+          </div>
+        </div>
+      );
+
+    case 'wallet':
+      return (
+        <div className="flex h-full flex-col bg-slate-950 text-white">
+          <div className={`mx-4 mt-5 rounded-3xl p-4 ${style.bg}`}>
+            <div className="h-2 w-20 rounded-sm bg-white/40" />
+            <div className="mt-3 h-6 w-28 rounded-sm bg-white/80" />
+            <div className="mt-6 flex justify-between">
+              <div className="h-2 w-14 rounded-sm bg-white/40" />
+              <div className="h-2 w-10 rounded-sm bg-white/40" />
+            </div>
+          </div>
+          <div className="p-4">
+            <div className="mb-3 h-2.5 w-24 rounded-sm bg-white/20" />
+            <div className="space-y-2">
+              {[1, 2, 3, 4].map((item) => (
+                <div key={item} className="flex items-center justify-between rounded-2xl bg-white/5 px-3 py-3">
+                  <div className="flex items-center gap-3">
+                    <div className={`h-10 w-10 rounded-2xl ${style.iconBg}`} />
+                    <div className="space-y-1.5">
+                      <div className="h-2 w-16 rounded-sm bg-white/30" />
+                      <div className="h-1.5 w-10 rounded-sm bg-white/15" />
+                    </div>
+                  </div>
+                  <div className="h-2 w-12 rounded-sm bg-white/30" />
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      );
+
+    case 'calendar':
+      return (
+        <div className="flex h-full flex-col bg-white">
+          <div className={`p-4 ${style.iconBg}`}>
+            <div className="flex items-center justify-between">
+              <div className="h-3 w-20 rounded-sm bg-slate-800" />
+              <div className={`h-8 w-8 rounded-full ${style.bg}`} />
+            </div>
+            <div className="mt-4 grid grid-cols-7 gap-1">
+              {Array.from({ length: 28 }, (_, index) => (
+                <div
+                  key={index}
+                  className={`flex h-8 items-center justify-center rounded-xl text-[10px] ${index === 10 || index === 16 ? style.bg : index > 20 ? 'bg-white/80' : 'bg-white/50'}`}
+                />
+              ))}
+            </div>
+          </div>
+          <div className="flex-1 space-y-2 p-4">
+            {[1, 2, 3].map((item) => (
+              <div key={item} className="rounded-2xl border border-slate-200 bg-slate-50 p-3">
+                <div className="flex items-center justify-between">
+                  <div className="space-y-1.5">
+                    <div className="h-2.5 w-20 rounded-sm bg-slate-700" />
+                    <div className="h-1.5 w-14 rounded-sm bg-slate-300" />
+                  </div>
+                  <div className={`h-8 w-1 rounded-full ${style.bg}`} />
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      );
+
+    case 'maps':
+      return (
+        <div className="relative h-full bg-emerald-50">
+          <div className="absolute inset-0 bg-[radial-gradient(circle_at_20%_20%,rgba(16,185,129,0.18),transparent_28%),linear-gradient(90deg,rgba(15,23,42,0.05)_1px,transparent_1px),linear-gradient(rgba(15,23,42,0.05)_1px,transparent_1px)] bg-[length:auto,44px_44px,44px_44px]" />
+          <div className="absolute left-6 right-6 top-5 rounded-2xl border border-slate-200 bg-white/95 p-3 shadow-sm">
+            <div className="h-3 w-24 rounded-sm bg-slate-700" />
+            <div className="mt-3 h-10 rounded-xl bg-slate-100" />
+          </div>
+          <div className="absolute left-1/2 top-[48%] flex h-12 w-12 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full border-4 border-white bg-rose-500 shadow-lg" />
+          <div className="absolute bottom-6 left-4 right-4 rounded-3xl border border-slate-200 bg-white p-4 shadow-xl">
+            <div className="h-2.5 w-28 rounded-sm bg-slate-800" />
+            <div className="mt-3 space-y-2">
+              <div className="h-2 w-full rounded-sm bg-slate-200" />
+              <div className="h-2 w-2/3 rounded-sm bg-slate-200" />
+            </div>
+            <div className={`mt-4 h-10 rounded-2xl ${style.bg}`} />
+          </div>
+        </div>
+      );
+
+    case 'music':
+      return (
+        <div className="flex h-full flex-col bg-slate-950 text-white">
+          <div className="flex flex-1 flex-col items-center justify-center p-6">
+            <div className="h-40 w-40 rounded-[2rem] bg-gradient-to-br from-white/20 to-white/5 shadow-2xl" />
+            <div className="mt-6 h-3 w-28 rounded-sm bg-white/80" />
+            <div className="mt-2 h-2 w-20 rounded-sm bg-white/30" />
+            <div className="mt-8 h-1.5 w-full rounded-full bg-white/10">
+              <div className={`h-full w-1/2 rounded-full ${style.bg}`} />
+            </div>
+            <div className="mt-8 flex items-center gap-5">
+              <div className="h-8 w-8 rounded-full bg-white/10" />
+              <div className={`h-14 w-14 rounded-full ${style.bg}`} />
+              <div className="h-8 w-8 rounded-full bg-white/10" />
+            </div>
+          </div>
+          <div className="border-t border-white/10 p-4">
+            {[1, 2, 3].map((item) => (
+              <div key={item} className="mb-2 flex items-center gap-3 rounded-2xl bg-white/5 p-2 last:mb-0">
+                <div className="h-10 w-10 rounded-xl bg-white/10" />
+                <div className="flex-1 space-y-1.5">
+                  <div className="h-2 w-24 rounded-sm bg-white/25" />
+                  <div className="h-1.5 w-14 rounded-sm bg-white/10" />
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      );
+
+    case 'fitness':
+      return (
+        <div className="flex h-full flex-col bg-slate-950 text-white">
+          <div className="p-5">
+            <div className="h-3 w-24 rounded-sm bg-white/80" />
+            <div className="mt-5 flex items-center justify-center">
+              <div className="relative flex h-40 w-40 items-center justify-center rounded-full border-[14px] border-white/10">
+                <div className={`absolute inset-0 rounded-full border-[14px] border-transparent ${style.border}`} />
+                <div className="h-14 w-14 rounded-full bg-white/10" />
+              </div>
+            </div>
+            <div className="mt-4 text-center">
+              <div className="mx-auto h-6 w-20 rounded-sm bg-white/80" />
+              <div className="mx-auto mt-2 h-2 w-24 rounded-sm bg-white/20" />
+            </div>
+          </div>
+          <div className="grid flex-1 grid-cols-2 gap-3 px-4 pb-4">
+            {[1, 2, 3, 4].map((item) => (
+              <div key={item} className="rounded-3xl bg-white/5 p-3">
+                <div className="h-2 w-14 rounded-sm bg-white/25" />
+                <div className={`mt-3 h-12 rounded-2xl ${item % 2 === 0 ? style.bg : 'bg-white/10'}`} />
+              </div>
+            ))}
+          </div>
+        </div>
+      );
+
+    case 'list':
+    case 'profile':
+      return (
+        <div className="flex h-full flex-col bg-white">
+          <div className="flex h-12 items-center justify-between border-b border-slate-100 px-4">
+            <div className="h-3 w-24 rounded-sm bg-slate-800" />
+            <div className="h-6 w-6 rounded-full bg-slate-100" />
+          </div>
+          <div className="flex-1 space-y-2 p-3">
+            {[1, 2, 3, 4, 5, 6].map((item) => (
+              <div key={item} className="flex items-center gap-3 rounded-lg border border-slate-50 p-2">
+                <div className="h-10 w-10 shrink-0 rounded-lg bg-slate-100" />
+                <div className="flex-1 space-y-1.5">
+                  <div className="h-2.5 w-32 rounded-sm bg-slate-800 opacity-80" />
+                  <div className="h-2 w-20 rounded-sm bg-slate-300" />
+                </div>
+                <div className="h-4 w-4 rounded-full bg-slate-100" />
+              </div>
+            ))}
+          </div>
+        </div>
+      );
+
+    default:
+      return (
+        <div className={`relative flex flex-1 flex-col items-center justify-center p-4 ${style.iconBg} bg-opacity-30`}>
+          <div className={`h-20 w-12 rounded border-2 border-dashed ${style.border}`} />
+        </div>
+      );
+  }
+}
diff --git a/src/components/custom-nodes/structuredListNavigation.test.ts b/src/components/custom-nodes/structuredListNavigation.test.ts
new file mode 100644
index 0000000..e1f3945
--- /dev/null
+++ b/src/components/custom-nodes/structuredListNavigation.test.ts
@@ -0,0 +1,30 @@
+import { describe, expect, it } from 'vitest';
+import { getStructuredListNavigationAction } from './structuredListNavigation';
+
+describe('structuredListNavigation', () => {
+  it('moves forward on Enter and Tab', () => {
+    expect(getStructuredListNavigationAction('Enter', { ctrlKey: false, metaKey: false, shiftKey: false }, 1, 3)).toEqual({
+      type: 'move',
+      targetIndex: 2,
+    });
+
+    expect(getStructuredListNavigationAction('Tab', { ctrlKey: false, metaKey: false, shiftKey: false }, 2, 3)).toEqual({
+      type: 'move',
+      targetIndex: 3,
+    });
+  });
+
+  it('wraps backward on Shift+Tab', () => {
+    expect(getStructuredListNavigationAction('Tab', { ctrlKey: false, metaKey: false, shiftKey: true }, 0, 3)).toEqual({
+      type: 'move',
+      targetIndex: 2,
+    });
+  });
+
+  it('inserts below on Cmd/Ctrl+Enter', () => {
+    expect(getStructuredListNavigationAction('Enter', { ctrlKey: true, metaKey: false, shiftKey: false }, 1, 3)).toEqual({
+      type: 'insertBelow',
+      targetIndex: 2,
+    });
+  });
+});
diff --git a/src/components/custom-nodes/structuredListNavigation.ts b/src/components/custom-nodes/structuredListNavigation.ts
new file mode 100644
index 0000000..7848763
--- /dev/null
+++ b/src/components/custom-nodes/structuredListNavigation.ts
@@ -0,0 +1,42 @@
+export type StructuredListNavigationAction =
+  | { type: 'cancel' }
+  | { type: 'insertBelow'; targetIndex: number }
+  | { type: 'move'; targetIndex: number };
+
+export function getStructuredListNavigationAction(
+  key: string,
+  modifiers: {
+    ctrlKey: boolean;
+    metaKey: boolean;
+    shiftKey: boolean;
+  },
+  currentIndex: number,
+  listLength: number
+): StructuredListNavigationAction | null {
+  if (key === 'Escape') {
+    return { type: 'cancel' };
+  }
+
+  if (key === 'Enter' && (modifiers.ctrlKey || modifiers.metaKey)) {
+    return {
+      type: 'insertBelow',
+      targetIndex: Math.min(currentIndex + 1, listLength),
+    };
+  }
+
+  if (key === 'Tab' && modifiers.shiftKey) {
+    return {
+      type: 'move',
+      targetIndex: listLength === 0 ? 0 : currentIndex <= 0 ? listLength - 1 : currentIndex - 1,
+    };
+  }
+
+  if (key === 'Tab' || key === 'Enter') {
+    return {
+      type: 'move',
+      targetIndex: Math.min(currentIndex + 1, listLength),
+    };
+  }
+
+  return null;
+}
diff --git a/src/components/diagram-diff/DiffModeBanner.tsx b/src/components/diagram-diff/DiffModeBanner.tsx
new file mode 100644
index 0000000..f1b42de
--- /dev/null
+++ b/src/components/diagram-diff/DiffModeBanner.tsx
@@ -0,0 +1,60 @@
+import React from 'react';
+import { GitCompare, Plus, Minus, RefreshCw, X } from 'lucide-react';
+import { useDiagramDiff } from '@/context/DiagramDiffContext';
+
+export function DiffModeBanner(): React.ReactElement | null {
+    const { isActive, diff, baselineSnapshot, stopCompare } = useDiagramDiff();
+    if (!isActive || !diff || !baselineSnapshot) return null;
+
+    const snapshotDate = new Date(baselineSnapshot.timestamp).toLocaleString(undefined, {
+        month: 'short',
+        day: 'numeric',
+        hour: 'numeric',
+        minute: '2-digit',
+    });
+
+    return (
+        <div className="absolute top-3 left-1/2 z-30 -translate-x-1/2 pointer-events-none">
+            <div className="pointer-events-auto flex items-center gap-3 rounded-full border border-slate-200 bg-white/95 backdrop-blur-sm px-4 py-2 shadow-lg text-xs font-medium text-slate-700 animate-in fade-in slide-in-from-top-2 duration-200">
+                <GitCompare className="h-3.5 w-3.5 shrink-0 text-[var(--brand-primary)]" />
+                <span className="text-slate-500">vs</span>
+                <span className="font-semibold truncate max-w-[160px]">{baselineSnapshot.name}</span>
+                <span className="text-slate-300">·</span>
+                <span className="text-slate-400">{snapshotDate}</span>
+
+                {diff.totalChanges === 0 ? (
+                    <span className="rounded-full bg-emerald-50 px-2 py-0.5 text-emerald-700 font-medium">No changes</span>
+                ) : (
+                    <div className="flex items-center gap-1.5">
+                        {diff.addedNodeIds.length + diff.addedEdgeIds.length > 0 && (
+                            <span className="flex items-center gap-0.5 text-emerald-600">
+                                <Plus className="h-3 w-3" />
+                                {diff.addedNodeIds.length + diff.addedEdgeIds.length}
+                            </span>
+                        )}
+                        {diff.removedNodes.length + diff.removedEdges.length > 0 && (
+                            <span className="flex items-center gap-0.5 text-red-500">
+                                <Minus className="h-3 w-3" />
+                                {diff.removedNodes.length + diff.removedEdges.length}
+                            </span>
+                        )}
+                        {diff.changedNodeIds.length > 0 && (
+                            <span className="flex items-center gap-0.5 text-amber-500">
+                                <RefreshCw className="h-3 w-3" />
+                                {diff.changedNodeIds.length}
+                            </span>
+                        )}
+                    </div>
+                )}
+
+                <button
+                    onClick={stopCompare}
+                    className="ml-1 flex h-5 w-5 items-center justify-center rounded-full text-slate-400 hover:bg-slate-100 hover:text-slate-600 transition-colors"
+                    title="Exit compare mode"
+                >
+                    <X className="h-3 w-3" />
+                </button>
+            </div>
+        </div>
+    );
+}
diff --git a/src/components/docs/Callout.tsx b/src/components/docs/Callout.tsx
deleted file mode 100644
index 7297a37..0000000
--- a/src/components/docs/Callout.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import React from 'react';
-import { Info, AlertTriangle, CheckCircle, Lightbulb } from 'lucide-react';
-
-export type CalloutType = 'info' | 'warning' | 'success' | 'tip';
-
-interface CalloutProps {
-    type?: CalloutType;
-    title?: string;
-    children: React.ReactNode;
-}
-
-export const Callout: React.FC<CalloutProps> = ({ type = 'info', title, children }) => {
-    const styles = {
-        info: {
-            bg: 'bg-blue-50',
-            border: 'border-blue-200',
-            text: 'text-blue-900',
-            icon: <Info className="w-5 h-5 text-blue-500" />
-        },
-        warning: {
-            bg: 'bg-amber-50',
-            border: 'border-amber-200',
-            text: 'text-amber-900',
-            icon: <AlertTriangle className="w-5 h-5 text-amber-500" />
-        },
-        success: {
-            bg: 'bg-green-50',
-            border: 'border-green-200',
-            text: 'text-green-900',
-            icon: <CheckCircle className="w-5 h-5 text-green-500" />
-        },
-        tip: {
-            bg: 'bg-violet-50',
-            border: 'border-violet-200',
-            text: 'text-violet-900',
-            icon: <Lightbulb className="w-5 h-5 text-violet-500" />
-        }
-    };
-
-    const style = styles[type];
-
-    return (
-        <div className={`my-6 p-4 rounded-lg border flex gap-4 ${style.bg} ${style.border}`}>
-            <div className="shrink-0 mt-0.5">{style.icon}</div>
-            <div className={`space-y-1 ${style.text}`}>
-                {title && <h4 className="font-semibold text-sm">{title}</h4>}
-                <div className="text-sm leading-relaxed opacity-90">{children}</div>
-            </div>
-        </div>
-    );
-};
diff --git a/src/components/docs/DocsBreadcrumbs.tsx b/src/components/docs/DocsBreadcrumbs.tsx
deleted file mode 100644
index fb3c15d..0000000
--- a/src/components/docs/DocsBreadcrumbs.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import React from 'react';
-import { ChevronRight, Home } from 'lucide-react';
-import { Link } from 'react-router-dom';
-import { useDocsNavigation } from './useDocsNavigation';
-
-export const DocsBreadcrumbs: React.FC = () => {
-    const { currentEntry } = useDocsNavigation();
-
-    if (!currentEntry) return null;
-
-    const breadcrumbSchema = {
-        "@context": "https://schema.org",
-        "@type": "BreadcrumbList",
-        "itemListElement": [
-            {
-                "@type": "ListItem",
-                "position": 1,
-                "name": "Documentation",
-                "item": "https://openflowkit.com/docs"
-            },
-            {
-                "@type": "ListItem",
-                "position": 2,
-                "name": currentEntry.section
-            },
-            {
-                "@type": "ListItem",
-                "position": 3,
-                "name": currentEntry.item.title,
-                "item": `https://openflowkit.com/docs/en/${currentEntry.item.slug}`
-            }
-        ]
-    };
-
-    return (
-        <nav className="flex items-center text-sm text-[var(--brand-secondary)] mb-6 overflow-x-auto whitespace-nowrap">
-            <script type="application/ld+json">
-                {JSON.stringify(breadcrumbSchema)}
-            </script>
-            <Link to="/docs" className="hover:text-[var(--brand-primary)] transition-colors">
-                <Home className="w-4 h-4" />
-            </Link>
-            <ChevronRight className="w-4 h-4 mx-2 text-slate-300" />
-            <span className="font-medium text-slate-600">{currentEntry.section}</span>
-            <ChevronRight className="w-4 h-4 mx-2 text-slate-300" />
-            <span className="font-medium text-[var(--brand-primary)]">{currentEntry.item.title}</span>
-        </nav>
-    );
-};
diff --git a/src/components/docs/DocsChatbot.test.tsx b/src/components/docs/DocsChatbot.test.tsx
deleted file mode 100644
index a792508..0000000
--- a/src/components/docs/DocsChatbot.test.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { describe, expect, it, vi } from 'vitest';
-import { DocsChatbot } from './DocsChatbot';
-
-vi.mock('react-markdown', () => ({
-  default: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
-}));
-
-vi.mock('rehype-raw', () => ({ default: [] }));
-vi.mock('remark-gfm', () => ({ default: [] }));
-
-vi.mock('react-i18next', () => ({
-  useTranslation: () => ({
-    t: (
-      key: string,
-      fallbackOrParams?: string | Record<string, string>,
-      maybeParams?: Record<string, string>
-    ) => {
-      const fallback = typeof fallbackOrParams === 'string' ? fallbackOrParams : undefined;
-      const params = typeof fallbackOrParams === 'object' ? fallbackOrParams : maybeParams;
-
-      if (key === 'chatbot.welcomeMessage' && params?.appName) {
-        return `Welcome to ${params.appName}`;
-      }
-
-      return fallback ?? key;
-    },
-  }),
-}));
-
-vi.mock('../../store', () => ({
-  useFlowStore: (selector: (state: { aiSettings: object }) => unknown) =>
-    selector({ aiSettings: {} }),
-}));
-
-vi.mock('../icons/OpenFlowLogo', () => ({
-  OpenFlowLogo: ({ className }: { className?: string }) => <div className={className}>Logo</div>,
-}));
-
-vi.mock('./MarkdownComponents', () => ({
-  MarkdownComponents: {},
-}));
-
-const useDocsChatbotStateMock = vi.fn();
-
-vi.mock('./chatbot/useDocsChatbotState', () => ({
-  useDocsChatbotState: (params: unknown) => useDocsChatbotStateMock(params),
-}));
-
-describe('DocsChatbot', () => {
-  it('focuses the composer and exposes an accessible label on the first-run state', () => {
-    useDocsChatbotStateMock.mockReturnValue({
-      messages: [],
-      input: '',
-      setInput: vi.fn(),
-      isLoading: false,
-      error: null,
-      messagesEndRef: { current: null },
-      handleSend: vi.fn(),
-      resetChat: vi.fn(),
-    });
-
-    render(<DocsChatbot />);
-
-    const composer = screen.getByRole('textbox', { name: 'chatbot.messagePlaceholder' });
-    expect(document.activeElement).toBe(composer);
-  });
-
-  it('renders message history inside a polite log region', () => {
-    useDocsChatbotStateMock.mockReturnValue({
-      messages: [
-        { role: 'user', parts: [{ text: 'How do I export?' }] },
-        { role: 'model', parts: [{ text: 'Use the export menu.' }] },
-      ],
-      input: '',
-      setInput: vi.fn(),
-      isLoading: false,
-      error: null,
-      messagesEndRef: { current: null },
-      handleSend: vi.fn(),
-      resetChat: vi.fn(),
-    });
-
-    render(<DocsChatbot />);
-
-    expect(screen.getByRole('log')).toBeTruthy();
-    expect(screen.getByText('How do I export?')).toBeTruthy();
-    expect(screen.getByText('Use the export menu.')).toBeTruthy();
-  });
-});
diff --git a/src/components/docs/DocsChatbot.tsx b/src/components/docs/DocsChatbot.tsx
deleted file mode 100644
index 634c774..0000000
--- a/src/components/docs/DocsChatbot.tsx
+++ /dev/null
@@ -1,248 +0,0 @@
-import React, { useEffect, useRef } from 'react';
-import ReactMarkdown from 'react-markdown';
-import rehypeRaw from 'rehype-raw';
-import remarkGfm from 'remark-gfm';
-import { AlertCircle, Loader2, Plus, Send, User } from 'lucide-react';
-import { useTranslation } from 'react-i18next';
-import { useFlowStore } from '../../store';
-import { APP_NAME, FAVICON_URL } from '@/lib/brand';
-import { OpenFlowLogo } from '../icons/OpenFlowLogo';
-import { MarkdownComponents } from './MarkdownComponents';
-import { useDocsChatbotState } from './chatbot/useDocsChatbotState';
-
-export const DocsChatbot: React.FC = () => {
-    const { t } = useTranslation();
-    const aiSettings = useFlowStore((state) => state.aiSettings);
-    const {
-        messages,
-        input,
-        setInput,
-        isLoading,
-        error,
-        messagesEndRef,
-        handleSend,
-        resetChat,
-    } = useDocsChatbotState({ aiSettings });
-    const composerRef = useRef<HTMLTextAreaElement>(null);
-
-    const suggestedPrompts = [
-        {
-            title: t('chatbot.prompts.keyboardShortcuts.title'),
-            description: t('chatbot.prompts.keyboardShortcuts.description'),
-            icon: t('chatbot.prompts.keyboardShortcuts.icon')
-        },
-        {
-            title: t('chatbot.prompts.nodeTypes.title'),
-            description: t('chatbot.prompts.nodeTypes.description'),
-            icon: t('chatbot.prompts.nodeTypes.icon')
-        },
-        {
-            title: t('chatbot.prompts.dslSyntax.title'),
-            description: t('chatbot.prompts.dslSyntax.description'),
-            icon: t('chatbot.prompts.dslSyntax.icon')
-        }
-    ];
-
-    const renderLogo = (className: string) => {
-        return FAVICON_URL ? (
-            <img src={FAVICON_URL} alt={APP_NAME} className={`object-contain ${className}`} />
-        ) : (
-            <OpenFlowLogo className={className} />
-        );
-    };
-
-    const handleKeyDown = (event: React.KeyboardEvent): void => {
-        if (event.key === 'Enter' && !event.shiftKey) {
-            event.preventDefault();
-            void handleSend();
-        }
-    };
-
-    useEffect(() => {
-        composerRef.current?.focus();
-    }, [messages.length]);
-
-    if (messages.length === 0) {
-        return (
-            <div className="flex flex-col items-center justify-center min-h-[60vh] max-w-4xl mx-auto w-full animate-in fade-in zoom-in-95 duration-500">
-                <div className="w-16 h-16 flex items-center justify-center mb-8 transform transition-transform hover:scale-105 duration-300">
-                    {renderLogo('w-full h-full drop-shadow-sm')}
-                </div>
-
-                <h1 className="text-4xl md:text-5xl font-extrabold tracking-tight text-slate-900 mb-4 text-center bg-clip-text">
-                    {t('chatbot.greeting')}
-                </h1>
-
-                <p className="text-lg text-slate-500 mb-10 text-center max-w-2xl px-4">
-                    {t('chatbot.tagline')} {APP_NAME}.
-                </p>
-
-                <div className="relative flex items-end gap-2 w-full max-w-2xl bg-white rounded-2xl shadow-[0_8px_30px_rgb(0,0,0,0.04)] ring-1 ring-slate-200/50 p-1.5 focus-within:shadow-[0_8px_30px_rgb(0,0,0,0.08)] focus-within:ring-2 focus-within:ring-[var(--brand-primary)]/30 mb-10 transition-all">
-                    <textarea
-                        ref={composerRef}
-                        value={input}
-                        onChange={(event) => setInput(event.target.value)}
-                        onKeyDown={handleKeyDown}
-                        aria-label={t('chatbot.messagePlaceholder')}
-                        placeholder={`${t('chatbot.messagePlaceholder')} ${APP_NAME} ${t('chatbot.aiSuffix')}`}
-                        className="w-full min-h-[52px] max-h-[200px] border-0 px-4 py-3.5 text-[15px] focus:ring-0 resize-none placeholder:text-slate-400 custom-scrollbar block bg-transparent leading-relaxed"
-                        rows={1}
-                    />
-                    <button
-                        onClick={() => {
-                            void handleSend();
-                        }}
-                        disabled={!input.trim() || isLoading}
-                        className="shrink-0 w-11 h-11 mb-1 mr-1 bg-slate-900 hover:bg-slate-800 text-white rounded-xl flex items-center justify-center transition-all disabled:opacity-30 disabled:scale-95 shadow-sm"
-                        aria-label={t('chatbot.sendMessage')}
-                    >
-                        <Send className="w-4 h-4 ml-0.5" />
-                    </button>
-                </div>
-
-                <div className="grid grid-cols-1 md:grid-cols-3 gap-5 w-full max-w-4xl px-4">
-                    {suggestedPrompts.map((prompt, index) => (
-                        <button
-                            key={index}
-                            onClick={() => {
-                                void handleSend(prompt.description);
-                            }}
-                            className="flex flex-col text-left p-5 rounded-2xl bg-white shadow-[0_2px_10px_rgb(0,0,0,0.02)] ring-1 ring-slate-100 hover:ring-slate-200 hover:shadow-md transition-all group duration-300 transform hover:-translate-y-1"
-                        >
-                            <div className="w-8 h-8 rounded-lg bg-slate-100 flex items-center justify-center text-slate-600 mb-3 group-hover:bg-[var(--brand-primary)]/10 group-hover:text-[var(--brand-primary)] transition-colors text-sm font-medium">
-                                {prompt.icon}
-                            </div>
-                            <h3 className="text-sm font-semibold text-slate-900 mb-1">{prompt.title}</h3>
-                            <p className="text-xs text-slate-500 line-clamp-2 leading-relaxed">{prompt.description}</p>
-                        </button>
-                    ))}
-                </div>
-            </div>
-        );
-    }
-
-    return (
-        <div className="flex flex-col h-[calc(100vh-8rem)] max-h-[900px] max-w-5xl mx-auto w-full bg-white rounded-[2rem] shadow-[0_8px_40px_rgb(0,0,0,0.08)] ring-1 ring-slate-200/50 overflow-hidden animate-in fade-in duration-300">
-            <div className="px-6 py-4 border-b border-slate-100 flex items-center justify-between bg-white z-10 shadow-sm">
-                <div className="flex items-center gap-3 bg-white">
-                    <div className="w-8 h-8 flex items-center justify-center">
-                        {renderLogo('w-full h-full drop-shadow-sm')}
-                    </div>
-                    <div>
-                        <h2 className="text-sm font-semibold text-slate-900 tracking-tight">{APP_NAME} {t('chatbot.docsTitle')}</h2>
-                        <p className="text-[11px] font-medium text-slate-500 uppercase tracking-wider">{t('chatbot.aiAssistant')}</p>
-                    </div>
-                </div>
-                <button
-                    onClick={resetChat}
-                    className="flex items-center gap-2 px-3 py-1.5 text-xs font-semibold text-slate-600 bg-slate-100 hover:bg-slate-200 rounded-lg transition-colors"
-                >
-                    <Plus className="w-3.5 h-3.5" />
-                    {t('chatbot.newChat')}
-                </button>
-            </div>
-
-            <div
-                role="log"
-                aria-live="polite"
-                aria-relevant="additions text"
-                className="flex-1 overflow-y-auto p-6 md:p-8 space-y-8 custom-scrollbar bg-slate-50/30"
-            >
-                <div className="flex gap-4 max-w-[85%] animate-in fade-in slide-in-from-bottom-2 duration-300">
-                    <div className="shrink-0 w-8 h-8 flex items-center justify-center">
-                        {renderLogo('w-full h-full object-contain drop-shadow-sm')}
-                    </div>
-                    <div className="flex flex-col gap-1 items-start min-w-0">
-                        <span className="text-[10px] font-bold text-slate-400 uppercase tracking-wider px-1">{APP_NAME} {t('chatbot.aiName')}</span>
-                        <div className="px-5 py-4 rounded-2xl text-sm shadow-sm bg-white border border-slate-100 rounded-tl-sm text-slate-700">
-                            <p>{t('chatbot.welcomeMessage', { appName: APP_NAME })}</p>
-                        </div>
-                    </div>
-                </div>
-
-                {messages.map((message, index) => {
-                    const isUser = message.role === 'user';
-                    return (
-                        <div key={index} className={`flex gap-4 max-w-[85%] animate-in fade-in slide-in-from-bottom-2 duration-300 ${isUser ? 'ml-auto flex-row-reverse' : ''}`}>
-                            <div className={`shrink-0 w-8 h-8 flex items-center justify-center ${isUser ? 'rounded-full bg-slate-200 text-slate-600 p-2 shadow-sm' : ''}`}>
-                                {isUser ? <User className="w-4 h-4" /> : renderLogo('w-full h-full object-contain drop-shadow-sm')}
-                            </div>
-                            <div className={`flex flex-col gap-1 min-w-0 ${isUser ? 'items-end' : 'items-start'}`}>
-                                <span className="text-[10px] font-bold text-slate-400 uppercase tracking-wider px-1">
-                                    {isUser ? t('chatbot.you') : `${APP_NAME} ${t('chatbot.aiName')}`}
-                                </span>
-                                <div className={`px-4 py-3 rounded-2xl text-sm shadow-sm ${isUser ? 'bg-[var(--brand-primary)] text-white rounded-tr-sm' : 'bg-white border border-slate-100 rounded-tl-sm text-slate-700'}`}>
-                                    {isUser ? (
-                                        <p className="whitespace-pre-wrap">{message.parts.map((part) => part.text).join('')}</p>
-                                    ) : (
-                                        <div className="prose prose-sm prose-slate max-w-none">
-                                            <ReactMarkdown
-                                                components={MarkdownComponents}
-                                                remarkPlugins={[remarkGfm]}
-                                                rehypePlugins={[rehypeRaw]}
-                                            >
-                                                {message.parts.map((part) => part.text).join('')}
-                                            </ReactMarkdown>
-                                        </div>
-                                    )}
-                                </div>
-                            </div>
-                        </div>
-                    );
-                })}
-
-                {isLoading && (
-                    <div className="flex gap-4 max-w-[85%] animate-in fade-in duration-300">
-                        <div className="shrink-0 w-8 h-8 flex items-center justify-center">
-                            {renderLogo('w-full h-full object-contain drop-shadow-sm')}
-                        </div>
-                        <div className="flex flex-col gap-1 items-start">
-                            <span className="text-[10px] font-semibold text-slate-400 uppercase tracking-wider px-1">{APP_NAME} {t('chatbot.aiName')}</span>
-                            <div className="px-5 py-4 rounded-2xl bg-white border border-slate-100 rounded-tl-sm text-slate-700 shadow-sm flex items-center gap-2">
-                                <Loader2 className="w-4 h-4 animate-spin text-[var(--brand-primary)]" />
-                                <span className="text-sm text-slate-500">{t('chatbot.searchingDocs')}</span>
-                            </div>
-                        </div>
-                    </div>
-                )}
-                <div ref={messagesEndRef} />
-            </div>
-
-            {error && (
-                <div className="mx-6 p-3 bg-red-50 text-red-900 rounded-lg border border-red-200 flex items-start gap-3 mt-2">
-                    <AlertCircle className="w-4 h-4 mt-0.5 shrink-0" />
-                    <p className="text-xs">{error}</p>
-                </div>
-            )}
-
-            <div className="p-4 md:p-6 bg-white border-t border-slate-100 z-10">
-                <div className="relative flex items-end gap-2 max-w-4xl mx-auto bg-slate-50 ring-1 ring-slate-200/50 rounded-2xl p-1.5 focus-within:ring-2 focus-within:ring-[var(--brand-primary)]/40 focus-within:bg-white transition-all shadow-[0_2px_10px_rgb(0,0,0,0.02)]">
-                    <textarea
-                        ref={composerRef}
-                        value={input}
-                        onChange={(event) => setInput(event.target.value)}
-                        onKeyDown={handleKeyDown}
-                        aria-label={t('chatbot.messagePlaceholder')}
-                        placeholder={`${t('chatbot.messagePlaceholder')} ${APP_NAME} ${t('chatbot.aiSuffix')}`}
-                        className="w-full max-h-32 min-h-[44px] bg-transparent border-0 px-4 py-3 text-[15px] focus:ring-0 resize-none custom-scrollbar leading-relaxed"
-                        rows={1}
-                        disabled={isLoading}
-                    />
-                    <button
-                        onClick={() => {
-                            void handleSend();
-                        }}
-                        disabled={!input.trim() || isLoading}
-                        className="shrink-0 w-11 h-11 mb-0.5 mr-0.5 bg-slate-900 hover:bg-slate-800 text-white rounded-xl flex items-center justify-center transition-all disabled:opacity-30 disabled:scale-95 shadow-sm"
-                        aria-label={t('chatbot.sendMessage')}
-                    >
-                        <Send className="w-4 h-4 ml-0.5" />
-                    </button>
-                </div>
-                <p className="text-[11px] text-center text-slate-400 mt-3 font-medium tracking-wide">
-                    {t('chatbot.aiDisclaimer')}
-                </p>
-            </div>
-        </div>
-    );
-};
diff --git a/src/components/docs/DocsFooter.tsx b/src/components/docs/DocsFooter.tsx
deleted file mode 100644
index fe22b4c..0000000
--- a/src/components/docs/DocsFooter.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import React from 'react';
-import { ArrowLeft, ArrowRight } from 'lucide-react';
-import { Link, useParams } from 'react-router-dom';
-import { useDocsNavigation } from './useDocsNavigation';
-import { useTranslation } from 'react-i18next';
-
-export const DocsFooter: React.FC = () => {
-    const { t } = useTranslation();
-    const { prevEntry, nextEntry } = useDocsNavigation();
-    const { lang } = useParams();
-
-    return (
-        <div className="mt-16 pt-8 border-t border-slate-100 flex flex-col sm:flex-row gap-4 justify-between">
-            {prevEntry ? (
-                <Link
-                    to={`/docs/${lang}/${prevEntry.item.slug}`}
-                    className="group flex flex-col gap-1 p-4 rounded-lg border border-slate-200 hover:border-[var(--brand-primary-300)] hover:bg-[var(--brand-primary-50)] transition-all w-full sm:w-1/2"
-                >
-                    <span className="text-xs font-medium text-[var(--brand-secondary)] flex items-center gap-1 group-hover:text-[var(--brand-primary)]">
-                        <ArrowLeft className="w-3 h-3 transition-transform group-hover:-translate-x-1" />
-                        {t('common.previous', 'Previous')}
-                    </span>
-                    <span className="text-sm font-semibold text-slate-900 group-hover:text-[var(--brand-primary-700)]">
-                        {prevEntry.item.title}
-                    </span>
-                </Link>
-            ) : <div className="hidden sm:block w-1/2" />}
-
-            {nextEntry ? (
-                <Link
-                    to={`/docs/${lang}/${nextEntry.item.slug}`}
-                    className="group flex flex-col gap-1 p-4 rounded-lg border border-slate-200 hover:border-[var(--brand-primary-300)] hover:bg-[var(--brand-primary-50)] transition-all w-full sm:w-1/2 text-right items-end"
-                >
-                    <span className="text-xs font-medium text-[var(--brand-secondary)] flex items-center gap-1 group-hover:text-[var(--brand-primary)]">
-                        {t('common.next', 'Next')}
-                        <ArrowRight className="w-3 h-3 transition-transform group-hover:translate-x-1" />
-                    </span>
-                    <span className="text-sm font-semibold text-slate-900 group-hover:text-[var(--brand-primary-700)]">
-                        {nextEntry.item.title}
-                    </span>
-                </Link>
-            ) : <div className="hidden sm:block w-1/2" />}
-        </div>
-    );
-};
diff --git a/src/components/docs/DocsLayout.tsx b/src/components/docs/DocsLayout.tsx
deleted file mode 100644
index 4d8ceb5..0000000
--- a/src/components/docs/DocsLayout.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import React from 'react';
-import { Outlet, useNavigate, useLocation, useParams } from 'react-router-dom';
-import { useTranslation } from 'react-i18next';
-import { DocsSidebar } from './DocsSidebar';
-import { Menu, X } from 'lucide-react';
-import { LanguageSelector } from '../LanguageSelector';
-import { useDocsLayoutState } from './useDocsLayoutState';
-
-export const DocsLayout: React.FC = () => {
-    const navigate = useNavigate();
-    const location = useLocation();
-    const { t, i18n } = useTranslation();
-    const { lang } = useParams();
-    const { mobileMenuOpen, toggleMobileMenu, closeMobileMenu } = useDocsLayoutState({
-        pathname: location.pathname,
-        navigate,
-        i18n,
-        lang,
-    });
-
-    return (
-        <div className="min-h-screen bg-[var(--brand-background)] text-[var(--brand-text)] flex">
-            {/* Mobile Header */}
-            <div className="lg:hidden fixed top-0 left-0 right-0 h-14 bg-[var(--brand-surface)] border-b border-slate-200 z-30 flex items-center px-4 justify-between">
-                <div className="font-semibold text-slate-900">{t('docs.documentation')}</div>
-                <div className="flex items-center gap-2">
-                    <LanguageSelector variant="minimal" />
-                    <button onClick={toggleMobileMenu} className="p-2 text-slate-500 hover:bg-slate-100 rounded-md">
-                        {mobileMenuOpen ? <X className="w-5 h-5" /> : <Menu className="w-5 h-5" />}
-                    </button>
-                </div>
-            </div>
-
-            {/* Sidebar with Mobile State */}
-            <DocsSidebar
-                className={mobileMenuOpen ? 'translate-x-0 shadow-xl' : '-translate-x-full lg:translate-x-0 lg:shadow-none'}
-                onClose={closeMobileMenu}
-            />
-
-            {/* Overlay */}
-            {mobileMenuOpen && (
-                <div
-                    className="fixed inset-0 bg-black/20 z-10 lg:hidden backdrop-blur-sm"
-                    onClick={closeMobileMenu}
-                />
-            )}
-
-            <main className="flex-1 lg:ml-64 flex flex-col min-w-0 bg-[var(--brand-surface)] min-h-screen pt-14 lg:pt-0">
-                <div className="flex-1 overflow-y-auto w-full">
-                    <div className="max-w-4xl mx-auto px-6 py-8 lg:px-12 lg:py-12">
-                        <Outlet />
-                    </div>
-                </div>
-            </main>
-        </div>
-    );
-};
diff --git a/src/components/docs/DocsPage.tsx b/src/components/docs/DocsPage.tsx
deleted file mode 100644
index 65a38c2..0000000
--- a/src/components/docs/DocsPage.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-import React, { Suspense, lazy } from 'react';
-import { Link } from 'react-router-dom';
-import ReactMarkdown from 'react-markdown';
-import rehypeRaw from 'rehype-raw';
-import rehypeSlug from 'rehype-slug';
-import remarkGfm from 'remark-gfm';
-import { AlertCircle, Loader2 } from 'lucide-react';
-import { DocsBreadcrumbs } from './DocsBreadcrumbs';
-import { DocsFooter } from './DocsFooter';
-import { DocsToc } from './DocsToc';
-import { MarkdownComponents } from './MarkdownComponents';
-import { useDocsPageModel } from './useDocsPageModel';
-
-const LazyDocsChatbot = lazy(async () => {
-    const module = await import('./DocsChatbot');
-    return { default: module.DocsChatbot };
-});
-
-export const DocsPage: React.FC = () => {
-    const {
-        slug,
-        content,
-        toc,
-        loading,
-        error,
-        isChatPage,
-        handleTocClick,
-    } = useDocsPageModel();
-
-    return (
-        <div className="animate-in fade-in duration-300 min-h-[60vh] flex gap-12">
-            <div className={`flex-1 min-w-0 ${isChatPage ? 'max-w-5xl mx-auto w-full' : ''}`}>
-                {!isChatPage && (
-                    <>
-                        <DocsBreadcrumbs />
-                        {(!content || !content.trim().startsWith('# ')) && (
-                            <h1 className="text-4xl font-extrabold mb-8 capitalize text-slate-900 tracking-tight leading-tight">
-                                {slug?.replace(/-/g, ' ')}
-                            </h1>
-                        )}
-                    </>
-                )}
-
-                {loading && (
-                    <div className="flex items-center gap-2 text-slate-400 py-12">
-                        <Loader2 className="w-5 h-5 animate-spin" />
-                        <span>Loading documentation...</span>
-                    </div>
-                )}
-
-                {error && (
-                    <div className="flex items-start gap-3 p-4 bg-red-50 text-red-900 rounded-lg border border-red-200">
-                        <AlertCircle className="w-5 h-5 mt-0.5 shrink-0" />
-                        <div>
-                            <h3 className="font-semibold text-sm">Document Not Found</h3>
-                            <p className="text-sm mt-1">We could not find the requested documentation page.</p>
-                            <Link to="/docs" className="text-sm mt-3 inline-block font-medium underline">Return to Introduction</Link>
-                        </div>
-                    </div>
-                )}
-
-                {!loading && !error && content && !isChatPage && (
-                    <div className="mb-16">
-                        <ReactMarkdown
-                            components={MarkdownComponents}
-                            remarkPlugins={[remarkGfm]}
-                            rehypePlugins={[rehypeSlug, rehypeRaw]}
-                        >
-                            {content}
-                        </ReactMarkdown>
-                    </div>
-                )}
-
-                {!loading && !error && isChatPage && (
-                    <Suspense
-                        fallback={(
-                            <div className="flex items-center gap-2 text-slate-400 py-12">
-                                <Loader2 className="w-5 h-5 animate-spin" />
-                                <span>Loading AI assistant...</span>
-                            </div>
-                        )}
-                    >
-                        <LazyDocsChatbot />
-                    </Suspense>
-                )}
-                {!loading && !error && !isChatPage && <DocsFooter />}
-            </div>
-
-            {!isChatPage && <DocsToc items={toc} onItemClick={handleTocClick} />}
-        </div>
-    );
-};
diff --git a/src/components/docs/DocsSidebar.tsx b/src/components/docs/DocsSidebar.tsx
deleted file mode 100644
index 4b759a8..0000000
--- a/src/components/docs/DocsSidebar.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import React from 'react';
-import { NavLink, Link, useParams } from 'react-router-dom';
-import { useTranslation } from 'react-i18next';
-import { docsNavigation } from './docsData';
-import { Book, ArrowLeft } from 'lucide-react';
-import { LanguageSelector } from '../LanguageSelector';
-import { SidebarItem } from '../ui/SidebarItem';
-import { APP_NAME } from '@/lib/brand';
-
-interface DocsSidebarProps {
-    className?: string;
-    onClose?: () => void;
-}
-
-export const DocsSidebar: React.FC<DocsSidebarProps> = ({ className = '', onClose }) => {
-    const { t, i18n } = useTranslation();
-    const { lang } = useParams();
-    const currentLang = lang || i18n.language || 'en';
-
-    return (
-        <aside className={`w-64 border-r border-slate-200 bg-[var(--brand-surface)] flex flex-col h-full fixed inset-y-0 left-0 z-20 transition-transform duration-300 lg:translate-x-0 ${className}`}>
-            <div className="h-14 flex items-center gap-3 px-4 border-b border-slate-100 bg-white/50 backdrop-blur-sm">
-                <Link
-                    to="/home"
-                    className="flex items-center justify-center w-8 h-8 rounded-lg hover:bg-slate-100 text-slate-500 hover:text-slate-900 transition-colors"
-                    title={t('docs.returnToDashboard', 'Back to dashboard')}
-                >
-                    <ArrowLeft className="w-4 h-4" />
-                </Link>
-
-                <div className="w-px h-4 bg-slate-200"></div>
-
-                <div className="flex items-center gap-2 font-semibold text-slate-900">
-                    <div className="p-1 rounded bg-[var(--brand-primary)]/10 text-[var(--brand-primary)]">
-                        <Book className="w-3.5 h-3.5" />
-                    </div>
-                    <span>{t('docs.documentation')}</span>
-                </div>
-            </div>
-
-            <nav className="flex-1 overflow-y-auto p-4 space-y-6 custom-scrollbar">
-                {docsNavigation.map((section, idx) => (
-                    <div key={`${section.title}-${idx}`}>
-                        <h3 className="text-xs font-semibold text-slate-400 uppercase tracking-wider mb-2 px-2">
-                            {section.title}
-                        </h3>
-                        <div className="space-y-0.5">
-                            {section.items.map((item) => (
-                                <SidebarItem
-                                    key={item.slug}
-                                    to={`/docs/${currentLang}/${item.slug}`}
-                                    onClick={onClose}
-                                >
-                                    {item.title.replace(/FlowMind|OpenFlowKit/g, APP_NAME)}
-                                </SidebarItem>
-                            ))}
-                        </div>
-                    </div>
-                ))}
-            </nav>
-
-            <div className="p-4 space-y-3">
-                <div className="hidden lg:block">
-                    <LanguageSelector variant="compact" placement="top" />
-                </div>
-                <div className="border-t border-slate-100 pt-3">
-                    <div className="text-[10px] text-slate-400 font-medium uppercase tracking-wider">
-                        {APP_NAME} Docs v1.0
-                    </div>
-                </div>
-            </div>
-        </aside>
-    );
-};
diff --git a/src/components/docs/DocsToc.tsx b/src/components/docs/DocsToc.tsx
deleted file mode 100644
index c401776..0000000
--- a/src/components/docs/DocsToc.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import React from 'react';
-import { useTranslation } from 'react-i18next';
-import type { TocItem } from './docsPageUtils';
-
-interface DocsTocProps {
-    items: TocItem[];
-    onItemClick: (event: React.MouseEvent<HTMLAnchorElement>, id: string) => void;
-}
-
-export function DocsToc({ items, onItemClick }: DocsTocProps): React.ReactElement {
-    const { t } = useTranslation();
-
-    return (
-        <div className="hidden xl:block w-64 shrink-0">
-            <div className="sticky top-6">
-                <h5 className="text-xs font-semibold text-slate-900 uppercase tracking-widest mb-4">{t('docs.onThisPage')}</h5>
-                <ul className="space-y-2 text-sm border-l border-slate-100">
-                    {items.map((item, index) => (
-                        <li key={index}>
-                            <a
-                                href={`#${item.id}`}
-                                onClick={(event) => onItemClick(event, item.id)}
-                                className={`
-                                    block pl-4 py-1 border-l -ml-px transition-colors cursor-pointer
-                                    ${item.level === 2 ? 'text-slate-600 hover:text-slate-900 hover:border-slate-300' : 'text-slate-400 hover:text-slate-700 pl-8 text-xs'}
-                                `}
-                            >
-                                {item.text}
-                            </a>
-                        </li>
-                    ))}
-                </ul>
-            </div>
-        </div>
-    );
-}
diff --git a/src/components/docs/MarkdownComponents.tsx b/src/components/docs/MarkdownComponents.tsx
deleted file mode 100644
index 30ced7c..0000000
--- a/src/components/docs/MarkdownComponents.tsx
+++ /dev/null
@@ -1,146 +0,0 @@
-import React, { Suspense, lazy } from 'react';
-import { Components } from 'react-markdown';
-import { Info, AlertTriangle, CheckCircle, Lightbulb, Copy } from 'lucide-react';
-
-const LazySyntaxCodeBlock = lazy(async () => {
-    const module = await import('./SyntaxCodeBlock');
-    return { default: module.SyntaxCodeBlock };
-});
-
-// Callout/Alert Component
-const Callout = ({ type, title, children }: { type: 'info' | 'warning' | 'success' | 'tip', title?: string, children: React.ReactNode }) => {
-    const styles = {
-        info: { bg: 'bg-blue-50/50', border: 'border-blue-200/50', text: 'text-blue-900', icon: <Info className="w-5 h-5 text-blue-500" /> },
-        warning: { bg: 'bg-amber-50/50', border: 'border-amber-200/50', text: 'text-amber-900', icon: <AlertTriangle className="w-5 h-5 text-amber-500" /> },
-        success: { bg: 'bg-green-50/50', border: 'border-green-200/50', text: 'text-green-900', icon: <CheckCircle className="w-5 h-5 text-green-500" /> },
-        tip: { bg: 'bg-violet-50/50', border: 'border-violet-200/50', text: 'text-violet-900', icon: <Lightbulb className="w-5 h-5 text-violet-500" /> }
-    };
-    const style = styles[type] || styles.info;
-
-    return (
-        <div className={`my-6 p-4 rounded-xl border flex gap-4 ${style.bg} ${style.border} shadow-sm`}>
-            <div className="shrink-0 mt-0.5">{style.icon}</div>
-            <div className={`space-y-1 ${style.text} flex-1`}>
-                {title && <h4 className="font-semibold text-sm">{title}</h4>}
-                <div className="text-sm leading-relaxed opacity-90">{children}</div>
-            </div>
-        </div>
-    );
-};
-
-// Code Block Component
-interface CodeBlockProps extends React.HTMLAttributes<HTMLElement> {
-    className?: string;
-    children?: React.ReactNode;
-}
-
-const CodeBlock: React.FC<CodeBlockProps> = ({ className, children, ...props }) => {
-    const match = /language-(\w+)/.exec(className || '');
-    const isMultiLine = String(children).includes('\n');
-
-    if (match || isMultiLine) {
-        const language = match ? match[1] : 'text';
-        const code = String(children).replace(/\n$/, '');
-        return (
-            <div className="my-8 rounded-xl overflow-hidden border border-slate-200/60 bg-[#1e293b] shadow-md group">
-                <div className="flex items-center justify-between px-4 py-3 bg-[#0f172a]/50 border-b border-white/5">
-                    <div className="flex items-center gap-2">
-                        <div className="flex gap-1.5">
-                            <div className="w-2.5 h-2.5 rounded-full bg-red-400/80" />
-                            <div className="w-2.5 h-2.5 rounded-full bg-amber-400/80" />
-                            <div className="w-2.5 h-2.5 rounded-full bg-green-400/80" />
-                        </div>
-                        <span className="ml-2 text-xs font-medium text-slate-400 lowercase font-mono">{language}</span>
-                    </div>
-                    <button
-                        onClick={() => navigator.clipboard.writeText(String(children))}
-                        className="text-slate-500 hover:text-slate-300 transition-colors p-1 rounded opacity-0 group-hover:opacity-100"
-                        title="Copy code"
-                    >
-                        <Copy className="w-3.5 h-3.5" />
-                    </button>
-                </div>
-                <Suspense
-                    fallback={(
-                        <pre className="m-0 overflow-x-auto p-5 text-[13px] leading-relaxed text-slate-100">
-                            <code>{code}</code>
-                        </pre>
-                    )}
-                >
-                    <LazySyntaxCodeBlock language={language} code={code} />
-                </Suspense>
-            </div>
-        );
-    }
-
-    return (
-        <code className="bg-slate-100 text-[var(--brand-primary-700)] px-1.5 py-0.5 rounded-[4px] text-[13px] font-medium font-mono border border-slate-200/60" {...props}>
-            {children}
-        </code>
-    );
-};
-
-export const MarkdownComponents: Components = {
-    h1: ({ children }) => (
-        <h1 className="text-4xl font-extrabold text-slate-900 mb-8 mt-2 tracking-tight">{children}</h1>
-    ),
-    h2: ({ children, id }) => (
-        <h2 id={id} className="text-2xl font-bold text-slate-900 mt-12 mb-4 tracking-tight group flex items-center gap-2">
-            {children}
-            <span className="opacity-0 group-hover:opacity-100 transition-opacity text-slate-300 text-lg font-normal cursor-pointer">#</span>
-        </h2>
-    ),
-    h3: ({ children, id }) => (
-        <h3 id={id} className="text-lg font-bold text-slate-900 mt-8 mb-3 tracking-tight">{children}</h3>
-    ),
-    p: ({ children }) => (
-        <p className="text-[15px] text-slate-600 leading-7 mb-5">{children}</p>
-    ),
-    ul: ({ children }) => (
-        <ul className="list-disc pl-5 mb-6 space-y-2 text-slate-600 marker:text-[var(--brand-primary)]">{children}</ul>
-    ),
-    ol: ({ children }) => (
-        <ol className="list-decimal pl-5 mb-6 space-y-2 text-slate-600 marker:font-medium">{children}</ol>
-    ),
-    li: ({ children }) => (
-        <li className="leading-7 pl-1">{children}</li>
-    ),
-    blockquote: ({ children }) => (
-        <blockquote className="border-l-4 border-[var(--brand-primary)] pl-6 py-2 my-8 text-slate-700 italic bg-gradient-to-r from-slate-50 to-transparent rounded-r-lg">
-            {children}
-        </blockquote>
-    ),
-    pre: ({ children }) => <>{children}</>,
-    code: CodeBlock,
-    a: ({ href, children }) => (
-        <a
-            href={href}
-            className="text-[var(--brand-primary)] hover:text-[var(--brand-primary-700)] font-medium transition-colors border-b border-[var(--brand-primary)]/30 hover:border-[var(--brand-primary)]"
-            target={href?.startsWith('http') ? '_blank' : undefined}
-            rel={href?.startsWith('http') ? 'noopener noreferrer' : undefined}
-        >
-            {children}
-        </a>
-    ),
-    table: ({ children }) => (
-        <div className="overflow-hidden my-8 border border-slate-200 rounded-xl shadow-sm">
-            <table className="w-full text-sm text-left border-collapse">{children}</table>
-        </div>
-    ),
-    thead: ({ children }) => (
-        <thead className="bg-slate-50/80 text-slate-700 font-semibold border-b border-slate-200">{children}</thead>
-    ),
-    tbody: ({ children }) => (
-        <tbody className="divide-y divide-slate-100 bg-white">{children}</tbody>
-    ),
-    tr: ({ children }) => (
-        <tr className="transition-colors hover:bg-slate-50/50">{children}</tr>
-    ),
-    th: ({ children }) => (
-        <th className="px-6 py-3 font-semibold text-xs uppercase tracking-wider text-slate-500">{children}</th>
-    ),
-    td: ({ children }) => (
-        <td className="px-6 py-4 text-slate-600 align-top">{children}</td>
-    ),
-    hr: () => <hr className="my-10 border-slate-100" />
-};
diff --git a/src/components/docs/SyntaxCodeBlock.tsx b/src/components/docs/SyntaxCodeBlock.tsx
deleted file mode 100644
index 169fdaf..0000000
--- a/src/components/docs/SyntaxCodeBlock.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import React from 'react';
-import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter';
-import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
-import bash from 'react-syntax-highlighter/dist/esm/languages/prism/bash';
-import css from 'react-syntax-highlighter/dist/esm/languages/prism/css';
-import javascript from 'react-syntax-highlighter/dist/esm/languages/prism/javascript';
-import json from 'react-syntax-highlighter/dist/esm/languages/prism/json';
-import markdown from 'react-syntax-highlighter/dist/esm/languages/prism/markdown';
-import typescript from 'react-syntax-highlighter/dist/esm/languages/prism/typescript';
-import tsx from 'react-syntax-highlighter/dist/esm/languages/prism/tsx';
-import yaml from 'react-syntax-highlighter/dist/esm/languages/prism/yaml';
-
-interface SyntaxCodeBlockProps {
-    language: string;
-    code: string;
-}
-
-SyntaxHighlighter.registerLanguage('bash', bash);
-SyntaxHighlighter.registerLanguage('shell', bash);
-SyntaxHighlighter.registerLanguage('css', css);
-SyntaxHighlighter.registerLanguage('javascript', javascript);
-SyntaxHighlighter.registerLanguage('js', javascript);
-SyntaxHighlighter.registerLanguage('json', json);
-SyntaxHighlighter.registerLanguage('markdown', markdown);
-SyntaxHighlighter.registerLanguage('md', markdown);
-SyntaxHighlighter.registerLanguage('typescript', typescript);
-SyntaxHighlighter.registerLanguage('ts', typescript);
-SyntaxHighlighter.registerLanguage('tsx', tsx);
-SyntaxHighlighter.registerLanguage('yaml', yaml);
-SyntaxHighlighter.registerLanguage('yml', yaml);
-
-export function SyntaxCodeBlock({ language, code }: SyntaxCodeBlockProps): React.ReactElement {
-    return (
-        <div className="text-[13px] font-mono leading-relaxed custom-scrollbar">
-            <SyntaxHighlighter
-                language={language}
-                style={vscDarkPlus}
-                customStyle={{ margin: 0, padding: '1.25rem', background: 'transparent', fontSize: '13px' }}
-                wrapLongLines={true}
-            >
-                {code}
-            </SyntaxHighlighter>
-        </div>
-    );
-}
diff --git a/src/components/docs/chatbot/useDocsChatbotState.ts b/src/components/docs/chatbot/useDocsChatbotState.ts
deleted file mode 100644
index 062b3e8..0000000
--- a/src/components/docs/chatbot/useDocsChatbotState.ts
+++ /dev/null
@@ -1,106 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
-import type { RefObject } from 'react';
-import { chatWithDocs } from '@/services/aiService';
-import type { ChatMessage } from '@/services/aiService';
-import type { AISettings } from '@/store';
-import { docsMarkdownLoaders } from '../docsMarkdownLoaders';
-
-interface UseDocsChatbotStateParams {
-    aiSettings: AISettings;
-}
-
-interface UseDocsChatbotStateResult {
-    messages: ChatMessage[];
-    input: string;
-    setInput: (value: string) => void;
-    isLoading: boolean;
-    error: string | null;
-    messagesEndRef: RefObject<HTMLDivElement>;
-    handleSend: (overrideMsg?: string) => Promise<void>;
-    resetChat: () => void;
-}
-
-const DOCS_CONTEXT_ERROR = 'Documentation context is unavailable. Please refresh or rebuild docs.';
-const AI_RESPONSE_ERROR = 'Failed to get a response. Please check your API key settings.';
-
-export function useDocsChatbotState({ aiSettings }: UseDocsChatbotStateParams): UseDocsChatbotStateResult {
-    const [messages, setMessages] = useState<ChatMessage[]>([]);
-    const [input, setInput] = useState('');
-    const [isLoading, setIsLoading] = useState(false);
-    const [error, setError] = useState<string | null>(null);
-    const [docsContext, setDocsContext] = useState('');
-    const messagesEndRef = useRef<HTMLDivElement>(null);
-
-    useEffect(() => {
-        async function loadDocsContext(): Promise<void> {
-            const entries = await Promise.all(
-                Object.entries(docsMarkdownLoaders).map(async ([path, loader]) => {
-                    const content = await loader();
-                    const filename = path.split('/').pop()?.replace('.md', '') || '';
-                    return `--- FILE: ${filename} ---\n${content}\n`;
-                })
-            );
-            const merged = entries.join('\n');
-            setDocsContext(merged);
-            if (!merged.trim()) {
-                setError(DOCS_CONTEXT_ERROR);
-            }
-        }
-
-        loadDocsContext().catch(() => {
-            setError(DOCS_CONTEXT_ERROR);
-        });
-    }, []);
-
-    useEffect(() => {
-        messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
-    }, [messages, isLoading]);
-
-    const resetChat = useCallback(() => {
-        setMessages([]);
-        setInput('');
-        setError(null);
-    }, []);
-
-    const handleSend = useCallback(async (overrideMsg?: string) => {
-        const msgToSend = overrideMsg || input.trim();
-        if (!msgToSend || isLoading || !docsContext.trim()) return;
-
-        setInput('');
-        setError(null);
-
-        const userMessage: ChatMessage = { role: 'user', parts: [{ text: msgToSend }] };
-        const newHistory = [...messages, userMessage];
-        setMessages(newHistory);
-        setIsLoading(true);
-
-        try {
-            const responseText = await chatWithDocs(
-                newHistory.slice(0, -1),
-                msgToSend,
-                docsContext,
-                aiSettings.apiKey,
-                aiSettings.model,
-                aiSettings.provider,
-                aiSettings.customBaseUrl
-            );
-            setMessages([...newHistory, { role: 'model', parts: [{ text: responseText }] }]);
-        } catch (err: unknown) {
-            const message = err instanceof Error ? err.message : AI_RESPONSE_ERROR;
-            setError(message || AI_RESPONSE_ERROR);
-        } finally {
-            setIsLoading(false);
-        }
-    }, [aiSettings, docsContext, input, isLoading, messages]);
-
-    return {
-        messages,
-        input,
-        setInput,
-        isLoading,
-        error,
-        messagesEndRef,
-        handleSend,
-        resetChat,
-    };
-}
diff --git a/src/components/docs/docsContentIndex.ts b/src/components/docs/docsContentIndex.ts
deleted file mode 100644
index 71941ff..0000000
--- a/src/components/docs/docsContentIndex.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { docsMarkdownLoaders } from './docsMarkdownLoaders';
-
-let cachedDocsContextPromise: Promise<string> | null = null;
-
-export function getMarkdownLoader(path: string): (() => Promise<unknown>) | undefined {
-  return docsMarkdownLoaders[path];
-}
-
-export function getAvailableMarkdownPaths(): string[] {
-  return Object.keys(docsMarkdownLoaders);
-}
-
-export async function loadAllDocsContext(): Promise<string> {
-  if (!cachedDocsContextPromise) {
-    cachedDocsContextPromise = (async () => {
-      const entries = await Promise.all(
-        Object.entries(docsMarkdownLoaders).map(async ([path, loader]) => {
-          const filename = path.split('/').pop()?.replace('.md', '') || '';
-          const content = await loader();
-          return `--- FILE: ${filename} ---\n${String(content)}\n`;
-        })
-      );
-
-      return entries.join('\n');
-    })();
-  }
-
-  return cachedDocsContextPromise;
-}
diff --git a/src/components/docs/docsData.ts b/src/components/docs/docsData.ts
deleted file mode 100644
index acd4a42..0000000
--- a/src/components/docs/docsData.ts
+++ /dev/null
@@ -1,63 +0,0 @@
-export type DocSection = {
-    title: string;
-    items: DocItem[];
-};
-
-export type DocItem = {
-    title: string;
-    slug: string;
-};
-
-export const docsNavigation: DocSection[] = [
-    {
-        title: 'AI Assistant',
-        items: [
-            { title: 'Ask Flowpilot', slug: 'ask-flowpilot' },
-        ],
-    },
-    {
-        title: 'Getting Started',
-        items: [
-            { title: 'Introduction', slug: 'introduction' },
-            { title: 'Quick Start', slug: 'quick-start' },
-        ],
-    },
-    {
-        title: 'Core Features',
-        items: [
-            { title: 'Canvas Basics', slug: 'canvas-basics' },
-            { title: 'Node Types', slug: 'node-types' },
-            { title: 'Properties Panel', slug: 'properties-panel' },
-            { title: 'Command Center', slug: 'command-center' },
-        ],
-    },
-    {
-        title: 'Advanced Tools',
-        items: [
-            { title: 'AI Generation', slug: 'ai-generation' },
-            { title: 'Smart Layout', slug: 'smart-layout' },
-            { title: 'Playback & History', slug: 'playback-history' },
-            { title: 'FlowMind DSL (V2)', slug: 'openflow-dsl' },
-        ],
-    },
-    {
-        title: 'Guides & Use Cases',
-        items: [
-            { title: 'Prompting AI Agents', slug: 'prompting-agents' },
-            { title: 'Mermaid vs. OpenFlow', slug: 'mermaid-vs-openflow' },
-            { title: 'AWS Architecture Diagram', slug: 'aws-architecture' },
-            { title: 'Payment Flow Visualization', slug: 'payment-flow' },
-            { title: 'Mermaid Integration', slug: 'mermaid-integration' },
-            { title: 'Exporting', slug: 'exporting' },
-            { title: 'Keyboard Shortcuts', slug: 'keyboard-shortcuts' },
-            { title: 'Theming', slug: 'theming' },
-        ],
-    },
-    {
-        title: 'Announcements',
-        items: [
-            { title: 'V1 Beta Launch', slug: 'v1-beta-launch' },
-            { title: 'Future Roadmap', slug: 'roadmap' },
-        ],
-    },
-];
diff --git a/src/components/docs/docsMarkdownLoaders.test.ts b/src/components/docs/docsMarkdownLoaders.test.ts
deleted file mode 100644
index 7830565..0000000
--- a/src/components/docs/docsMarkdownLoaders.test.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { describe, expect, it } from 'vitest';
-import { PUBLIC_DOCS_GLOB_PATTERNS, PUBLIC_DOCS_SLUGS } from './docsMarkdownLoaders';
-
-describe('docsMarkdownLoaders', () => {
-  it('includes only curated public docs slugs', () => {
-    expect(PUBLIC_DOCS_SLUGS).toContain('introduction');
-    expect(PUBLIC_DOCS_SLUGS).toContain('roadmap');
-    expect(PUBLIC_DOCS_SLUGS).not.toContain('ENGINEERING_AUDIT_2026-03-07');
-    expect(PUBLIC_DOCS_SLUGS).not.toContain('PAX_ROMANA');
-    expect(PUBLIC_DOCS_SLUGS).not.toContain('SAFE_EXECUTION_PLAN_2026-03-05');
-  });
-
-  it('builds language-scoped glob patterns for public docs only', () => {
-    expect(PUBLIC_DOCS_GLOB_PATTERNS).toEqual([
-      expect.stringContaining('/docs/en/{'),
-      expect.stringContaining('/docs/tr/{'),
-    ]);
-    expect(PUBLIC_DOCS_GLOB_PATTERNS.join(' ')).not.toContain('PAX_ROMANA');
-    expect(PUBLIC_DOCS_GLOB_PATTERNS.join(' ')).not.toContain('ENGINEERING_AUDIT_2026-03-07');
-  });
-});
diff --git a/src/components/docs/docsMarkdownLoaders.ts b/src/components/docs/docsMarkdownLoaders.ts
deleted file mode 100644
index 055a6e2..0000000
--- a/src/components/docs/docsMarkdownLoaders.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-export const PUBLIC_DOCS_SLUGS = [
-  'ai-generation',
-  'ask-flowpilot',
-  'aws-architecture',
-  'canvas-basics',
-  'command-center',
-  'exporting',
-  'introduction',
-  'keyboard-shortcuts',
-  'mermaid-integration',
-  'mermaid-vs-openflow',
-  'node-types',
-  'openflow-dsl',
-  'payment-flow',
-  'playback-history',
-  'prompting-agents',
-  'properties-panel',
-  'quick-start',
-  'roadmap',
-  'smart-layout',
-  'theming',
-  'v1-beta-launch',
-] as const;
-
-export const PUBLIC_DOCS_GLOB_PATTERNS = [
-  '/docs/en/{ai-generation,ask-flowpilot,aws-architecture,canvas-basics,command-center,exporting,introduction,keyboard-shortcuts,mermaid-integration,mermaid-vs-openflow,node-types,openflow-dsl,payment-flow,playback-history,prompting-agents,properties-panel,quick-start,roadmap,smart-layout,theming,v1-beta-launch}.md',
-  '/docs/tr/{ai-generation,ask-flowpilot,aws-architecture,canvas-basics,command-center,exporting,introduction,keyboard-shortcuts,mermaid-integration,mermaid-vs-openflow,node-types,openflow-dsl,payment-flow,playback-history,prompting-agents,properties-panel,quick-start,roadmap,smart-layout,theming,v1-beta-launch}.md',
-];
-
-export const docsMarkdownLoaders = import.meta.glob([
-  '/docs/en/{ai-generation,ask-flowpilot,aws-architecture,canvas-basics,command-center,exporting,introduction,keyboard-shortcuts,mermaid-integration,mermaid-vs-openflow,node-types,openflow-dsl,payment-flow,playback-history,prompting-agents,properties-panel,quick-start,roadmap,smart-layout,theming,v1-beta-launch}.md',
-  '/docs/tr/{ai-generation,ask-flowpilot,aws-architecture,canvas-basics,command-center,exporting,introduction,keyboard-shortcuts,mermaid-integration,mermaid-vs-openflow,node-types,openflow-dsl,payment-flow,playback-history,prompting-agents,properties-panel,quick-start,roadmap,smart-layout,theming,v1-beta-launch}.md',
-], {
-  query: '?raw',
-  import: 'default',
-});
diff --git a/src/components/docs/docsPageUtils.ts b/src/components/docs/docsPageUtils.ts
deleted file mode 100644
index b91c7e8..0000000
--- a/src/components/docs/docsPageUtils.ts
+++ /dev/null
@@ -1,114 +0,0 @@
-export function processContent(content: string, appName: string): string {
-    return content
-        .replace(/FlowMind/g, appName || 'FlowMind')
-        .replace(/OpenFlowKit/g, appName || 'OpenFlowKit')
-        .replace(/\[PLACEHOLDER: (.*?)\]/g, (_, text) => {
-            return `<div class="p-8 border-2 border-dashed border-slate-200 rounded-xl bg-slate-50 text-center my-8 text-slate-400 text-sm flex flex-col items-center gap-2"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/></svg><span>Image: ${text}</span></div>`;
-        });
-}
-
-export function stripEmojis(value: string): string {
-    return value
-        .replace(/([\u2700-\u27BF]|[\uE000-\uF8FF]|\uD83C[\uDC00-\uDFFF]|\uD83D[\uDC00-\uDFFF]|[\u2011-\u26FF]|\uD83E[\uDD10-\uDDFF])/g, '')
-        .replace(/\p{Emoji}/gu, '')
-        .replace(/\s+/g, ' ')
-        .trim();
-}
-
-export function slugify(text: string): string {
-    return stripEmojis(text)
-        .toLowerCase()
-        .trim()
-        .replace(/\s+/g, '-')
-        .replace(/[^\w-]+/g, '')
-        .replace(/--+/g, '-')
-        .replace(/^-+/, '')
-        .replace(/-+$/, '');
-}
-
-export interface TocItem {
-    level: 2 | 3;
-    text: string;
-    id: string;
-}
-
-export function extractToc(content: string): TocItem[] {
-    const regex = /^(#{2,3})\s+(.*)$/gm;
-    const result: TocItem[] = [];
-    let match: RegExpExecArray | null = regex.exec(content);
-
-    while (match !== null) {
-        const level = match[1].length as 2 | 3;
-        const originalText = match[2];
-        result.push({
-            level,
-            text: stripEmojis(originalText),
-            id: slugify(originalText),
-        });
-        match = regex.exec(content);
-    }
-
-    return result;
-}
-
-export function applyDocsMetaTags(slug: string, content: string | null): () => void {
-    const titleCase = slug
-        .split('-')
-        .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
-        .join(' ');
-
-    let title = `${titleCase} | OpenFlowKit Docs`;
-    let description = 'Learn how to use OpenFlowKit, the open-source Diagram-as-Code engine.';
-
-    if (content) {
-        const h1Match = content.match(/^#\s+(.*)$/m);
-        if (h1Match && h1Match[1]) {
-            title = `${stripEmojis(h1Match[1])} | OpenFlowKit Docs`;
-        }
-
-        const paragraphs = content.split('\n\n');
-        const firstPara = paragraphs.find((paragraph) => {
-            const trimmed = paragraph.trim();
-            return Boolean(trimmed) && !trimmed.startsWith('#') && !trimmed.startsWith('>') && !trimmed.startsWith('!');
-        });
-        if (firstPara) {
-            description = firstPara.replace(/\[([^\]]+)\]\([^)]+\)/g, '$1').substring(0, 160).trim();
-            if (description.length === 160) {
-                description += '...';
-            }
-        }
-    }
-
-    document.title = title;
-
-    let metaDescription = document.querySelector('meta[name="description"]');
-    if (!metaDescription) {
-        metaDescription = document.createElement('meta');
-        metaDescription.setAttribute('name', 'description');
-        document.head.appendChild(metaDescription);
-    }
-    metaDescription.setAttribute('content', description);
-
-    return () => {
-        document.title = 'OpenFlowKit | Diagram-as-Code Engine';
-        metaDescription?.setAttribute(
-            'content',
-            'OpenFlowKit is the open-source, white-label Diagram-as-Code engine built for modern workflows.'
-        );
-    };
-}
-
-export function scrollToDocSection(id: string): void {
-    const element = document.getElementById(id);
-    if (!element) return;
-
-    const offset = 80;
-    const elementPosition = element.getBoundingClientRect().top;
-    const offsetPosition = elementPosition + window.pageYOffset - offset;
-
-    window.scrollTo({
-        top: offsetPosition,
-        behavior: 'smooth',
-    });
-    window.history.pushState({}, '', `#${id}`);
-}
diff --git a/src/components/docs/useDocsContent.ts b/src/components/docs/useDocsContent.ts
deleted file mode 100644
index 7858823..0000000
--- a/src/components/docs/useDocsContent.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-import { useState, useEffect } from 'react';
-import { docsMarkdownLoaders } from './docsMarkdownLoaders';
-
-export const useDocsContent = (slug: string | undefined, lang: string = 'en') => {
-    const [content, setContent] = useState<string | null>(null);
-    const [loading, setLoading] = useState(true);
-    const [error, setError] = useState<string | null>(null);
-
-    useEffect(() => {
-        if (!slug) {
-            setLoading(false);
-            return;
-        }
-
-        const fetchContent = async () => {
-            setLoading(true);
-            setError(null);
-
-            try {
-                // Construct path key relative to project root with language folder
-                const path = `/docs/${lang}/${slug}.md`;
-                const fallbackPath = `/docs/en/${slug}.md`;
-
-                let loader = docsMarkdownLoaders[path];
-
-                // Fallback to English if translation doesn't exist
-                if (!loader && lang !== 'en') {
-                    console.log(`Translation not found for ${lang}, falling back to English`);
-                    loader = docsMarkdownLoaders[fallbackPath];
-                }
-
-                if (!loader) {
-                    console.warn(`Doc not found: ${path}. Available:`, Object.keys(docsMarkdownLoaders));
-                    throw new Error(`Document not found: ${slug} for language ${lang}`);
-                }
-
-                const rawContent = await loader() as string;
-                setContent(rawContent);
-            } catch (err) {
-                console.error(err);
-                setError('Failed to load documentation');
-                setContent(null);
-            } finally {
-                setLoading(false);
-            }
-        };
-
-        fetchContent();
-    }, [slug, lang]);
-
-    return { content, loading, error };
-};
diff --git a/src/components/docs/useDocsLayoutState.ts b/src/components/docs/useDocsLayoutState.ts
deleted file mode 100644
index aad71b7..0000000
--- a/src/components/docs/useDocsLayoutState.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-import { useEffect, useState } from 'react';
-import type { i18n as I18nInstance } from 'i18next';
-
-interface UseDocsLayoutStateParams {
-    pathname: string;
-    navigate: (path: string, options?: { replace?: boolean }) => void;
-    i18n: I18nInstance;
-    lang?: string;
-}
-
-interface UseDocsLayoutStateResult {
-    mobileMenuOpen: boolean;
-    toggleMobileMenu: () => void;
-    closeMobileMenu: () => void;
-}
-
-export function useDocsLayoutState({
-    pathname,
-    navigate,
-    i18n,
-    lang,
-}: UseDocsLayoutStateParams): UseDocsLayoutStateResult {
-    const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
-
-    useEffect(() => {
-        if (pathname !== '/docs' && pathname !== '/docs/') return;
-        const currentLang = i18n.language === 'en' || i18n.language === 'tr' ? i18n.language : 'en';
-        navigate(`/docs/${currentLang}/ask-flowpilot`, { replace: true });
-    }, [pathname, navigate, i18n.language]);
-
-    useEffect(() => {
-        if (lang && lang !== i18n.language) {
-            i18n.changeLanguage(lang);
-        }
-    }, [lang, i18n]);
-
-    function toggleMobileMenu(): void {
-        setMobileMenuOpen((value) => !value);
-    }
-
-    function closeMobileMenu(): void {
-        setMobileMenuOpen(false);
-    }
-
-    return { mobileMenuOpen, toggleMobileMenu, closeMobileMenu };
-}
diff --git a/src/components/docs/useDocsNavigation.ts b/src/components/docs/useDocsNavigation.ts
deleted file mode 100644
index f67a2ee..0000000
--- a/src/components/docs/useDocsNavigation.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { useParams } from 'react-router-dom';
-import { docsNavigation, DocItem, DocSection } from './docsData';
-
-export const useDocsNavigation = () => {
-    const { slug } = useParams();
-
-    // Flatten the list to easily find next/prev
-    const flatList: { item: DocItem, section: string }[] = [];
-    docsNavigation.forEach(section => {
-        section.items.forEach(item => {
-            flatList.push({ item, section: section.title });
-        });
-    });
-
-    const currentIndex = flatList.findIndex(entry => entry.item.slug === slug);
-    const currentEntry = currentIndex !== -1 ? flatList[currentIndex] : null;
-
-    const prevEntry = currentIndex > 0 ? flatList[currentIndex - 1] : null;
-    const nextEntry = currentIndex < flatList.length - 1 ? flatList[currentIndex + 1] : null;
-
-    return {
-        currentEntry,
-        prevEntry,
-        nextEntry
-    };
-};
diff --git a/src/components/docs/useDocsPageModel.ts b/src/components/docs/useDocsPageModel.ts
deleted file mode 100644
index bc2529a..0000000
--- a/src/components/docs/useDocsPageModel.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import { useEffect, useMemo } from 'react';
-import type { MouseEvent } from 'react';
-import { useLocation, useParams } from 'react-router-dom';
-import { APP_NAME } from '@/lib/brand';
-import { useDocsContent } from './useDocsContent';
-import {
-    applyDocsMetaTags,
-    extractToc,
-    processContent,
-    scrollToDocSection,
-    type TocItem,
-} from './docsPageUtils';
-
-interface UseDocsPageModelResult {
-    slug?: string;
-    content: string | null;
-    toc: TocItem[];
-    loading: boolean;
-    error: string | null;
-    isChatPage: boolean;
-    handleTocClick: (event: MouseEvent<HTMLAnchorElement>, id: string) => void;
-}
-
-export function useDocsPageModel(): UseDocsPageModelResult {
-    const { slug, lang } = useParams();
-    const location = useLocation();
-    const { content: rawContent, loading, error } = useDocsContent(slug, lang || 'en');
-
-    const content = useMemo(() => {
-        if (!rawContent) return null;
-        return processContent(rawContent, APP_NAME);
-    }, [rawContent]);
-
-    const toc = useMemo(() => {
-        if (!content) return [];
-        return extractToc(content);
-    }, [content]);
-
-    useEffect(() => {
-        if (!slug) return;
-        return applyDocsMetaTags(slug, content);
-    }, [slug, content, location.pathname]);
-
-    function handleTocClick(event: MouseEvent<HTMLAnchorElement>, id: string): void {
-        event.preventDefault();
-        scrollToDocSection(id);
-    }
-
-    return {
-        slug,
-        content,
-        toc,
-        loading,
-        error,
-        isChatPage: slug === 'ask-flowpilot',
-        handleTocClick,
-    };
-}
diff --git a/src/components/editorSurfaceTiers.ts b/src/components/editorSurfaceTiers.ts
new file mode 100644
index 0000000..789a71a
--- /dev/null
+++ b/src/components/editorSurfaceTiers.ts
@@ -0,0 +1 @@
+export type EditorSurfaceTier = 'core' | 'advanced' | 'experimental';
diff --git a/src/components/export/CinematicExportSurface.tsx b/src/components/export/CinematicExportSurface.tsx
new file mode 100644
index 0000000..b603d9d
--- /dev/null
+++ b/src/components/export/CinematicExportSurface.tsx
@@ -0,0 +1,78 @@
+import React, { forwardRef } from 'react';
+import { Background, BackgroundVariant, ReactFlow, ReactFlowProvider } from '@/lib/reactflowCompat';
+import type { FlowEdge, FlowNode } from '@/lib/types';
+import { useCinematicExportSurfaceConfig } from '@/context/CinematicExportContext';
+import { flowCanvasEdgeTypes, flowCanvasNodeTypes } from '@/components/flow-canvas/flowCanvasTypes';
+
+const CINEMATIC_EXPORT_SURFACE_BACKGROUND =
+  'radial-gradient(circle at top, rgba(59,130,246,0.14), transparent 42%), linear-gradient(180deg, #f8fbff 0%, #eef5ff 52%, #f8fafc 100%)';
+const CINEMATIC_EXPORT_SURFACE_STYLE = {
+  position: 'fixed',
+  top: 0,
+  left: 0,
+  transform: 'translate(-20000px, 0)',
+  overflow: 'hidden',
+  pointerEvents: 'none',
+  zIndex: -1,
+  background: CINEMATIC_EXPORT_SURFACE_BACKGROUND,
+} as const;
+
+interface CinematicExportSurfaceProps {
+  nodes: FlowNode[];
+  edges: FlowEdge[];
+}
+
+function CinematicExportSurfaceInner(
+  { nodes, edges }: CinematicExportSurfaceProps,
+  ref: React.ForwardedRef<HTMLDivElement>,
+): React.ReactElement | null {
+  const surfaceConfig = useCinematicExportSurfaceConfig();
+
+  if (!surfaceConfig) {
+    return null;
+  }
+
+  return (
+    <div
+      ref={ref}
+      aria-hidden="true"
+      style={{
+        ...CINEMATIC_EXPORT_SURFACE_STYLE,
+        width: surfaceConfig.width,
+        height: surfaceConfig.height,
+      }}
+    >
+      <ReactFlowProvider>
+        <ReactFlow
+          nodes={nodes}
+          edges={edges}
+          nodeTypes={flowCanvasNodeTypes}
+          edgeTypes={flowCanvasEdgeTypes}
+          nodesDraggable={false}
+          nodesConnectable={false}
+          elementsSelectable={false}
+          panOnScroll={false}
+          zoomOnScroll={false}
+          zoomOnPinch={false}
+          preventScrolling={false}
+          fitView
+          fitViewOptions={{ padding: 0.14 }}
+          className="bg-transparent"
+          minZoom={0.05}
+          maxZoom={2}
+          proOptions={{ hideAttribution: true }}
+        >
+          <Background
+            variant={BackgroundVariant.Dots}
+            gap={24}
+            size={1.5}
+            color="rgba(148,163,184,0.38)"
+          />
+        </ReactFlow>
+      </ReactFlowProvider>
+    </div>
+  );
+}
+
+export const CinematicExportSurface = forwardRef<HTMLDivElement, CinematicExportSurfaceProps>(CinematicExportSurfaceInner);
+CinematicExportSurface.displayName = 'CinematicExportSurface';
diff --git a/src/components/flow-canvas/FlowCanvasOverlays.tsx b/src/components/flow-canvas/FlowCanvasOverlays.tsx
index b7f3ac8..9636084 100644
--- a/src/components/flow-canvas/FlowCanvasOverlays.tsx
+++ b/src/components/flow-canvas/FlowCanvasOverlays.tsx
@@ -6,6 +6,7 @@ import { FlowCanvasAlignmentGuidesOverlay } from './FlowCanvasAlignmentGuidesOve
 import type { AlignmentGuides, SelectionDragPreview } from './alignmentGuides';
 import type { FlowNode } from '@/lib/types';
 import type { DomainLibraryItem } from '@/services/domainLibrary';
+import type { ConnectedEdgePreset } from '@/hooks/edge-operations/utils';
 
 const LazyConnectMenu = lazy(async () => {
     const module = await import('../ConnectMenu');
@@ -33,7 +34,8 @@ interface FlowCanvasOverlaysProps {
         position: { x: number; y: number },
         sourceId?: string,
         sourceHandle?: string,
-        shape?: NodeData['shape']
+        shape?: NodeData['shape'],
+        edgePreset?: ConnectedEdgePreset
     ) => void;
     handleAddDomainLibraryItemAndConnect: (
         item: DomainLibraryItem,
@@ -84,9 +86,9 @@ export function FlowCanvasOverlays({
                         sourceId={connectMenu.sourceId}
                         sourceType={connectMenu.sourceType}
                         onClose={() => setConnectMenu(null)}
-                        onSelect={(type, shape) => {
+                        onSelect={(type, shape, edgePreset) => {
                             const flowPos = screenToFlowPosition(connectMenu.position);
-                            handleAddAndConnect(type, flowPos, connectMenu.sourceId, connectMenu.sourceHandle, shape as NodeData['shape']);
+                            handleAddAndConnect(type, flowPos, connectMenu.sourceId, connectMenu.sourceHandle, shape as NodeData['shape'], edgePreset);
                         }}
                         onSelectAsset={(item) => {
                             const flowPos = screenToFlowPosition(connectMenu.position);
@@ -106,6 +108,7 @@ export function FlowCanvasOverlays({
                         onDuplicate={contextActions.onDuplicate}
                         onDelete={contextActions.onDelete}
                         onSendToBack={contextActions.onSendToBack}
+                        onChangeNodeType={contextActions.onChangeNodeType}
                         canPaste={true}
                         selectedCount={contextActions.selectedCount}
                         onAlignNodes={contextActions.onAlignNodes}
diff --git a/src/components/flow-canvas/flowCanvasReactFlowContracts.ts b/src/components/flow-canvas/flowCanvasReactFlowContracts.ts
new file mode 100644
index 0000000..2fce2b1
--- /dev/null
+++ b/src/components/flow-canvas/flowCanvasReactFlowContracts.ts
@@ -0,0 +1,89 @@
+import {
+    BackgroundVariant,
+    ConnectionMode,
+    MarkerType,
+    PanOnScrollMode,
+    SelectionMode,
+    type KeyCode,
+} from '@/lib/reactflowCompat';
+
+export const FLOW_CANVAS_BASE_BEHAVIOR: {
+    connectionMode: ConnectionMode;
+    selectNodesOnDrag: boolean;
+    selectionKeyCode: KeyCode | null;
+    panActivationKeyCode: KeyCode | null;
+    zoomActivationKeyCode: KeyCode | null;
+    multiSelectionKeyCode: string;
+    zoomOnScroll: boolean;
+    zoomOnPinch: boolean;
+    panOnScroll: boolean;
+    panOnScrollMode: PanOnScrollMode;
+    preventScrolling: boolean;
+    zoomOnDoubleClick: boolean;
+} = {
+    connectionMode: ConnectionMode.Loose,
+    selectNodesOnDrag: false,
+    selectionKeyCode: 'Shift',
+    panActivationKeyCode: 'Space',
+    zoomActivationKeyCode: ['Meta', 'Control'],
+    multiSelectionKeyCode: 'Shift',
+    zoomOnScroll: false,
+    zoomOnPinch: true,
+    panOnScroll: true,
+    panOnScrollMode: PanOnScrollMode.Free,
+    preventScrolling: true,
+    zoomOnDoubleClick: false,
+};
+
+export const FLOW_CANVAS_STYLE_PRESETS = {
+    enhanced: {
+        defaultEdgeOptions: {
+            style: { stroke: '#64748b', strokeWidth: 1.5 },
+            animated: false,
+            markerEnd: { type: MarkerType.ArrowClosed, color: '#64748b', width: 20, height: 20 },
+        },
+        background: {
+            variant: BackgroundVariant.Dots,
+            gap: 24,
+            size: 1.5,
+            color: 'rgba(148,163,184,0.4)',
+        },
+    },
+    standard: {
+        defaultEdgeOptions: {
+            style: { stroke: '#94a3b8', strokeWidth: 2 },
+            animated: false,
+            markerEnd: { type: MarkerType.ArrowClosed, color: '#94a3b8', width: 20, height: 20 },
+        },
+        background: {
+            variant: BackgroundVariant.Dots,
+            gap: 24,
+            size: 1.5,
+            color: 'rgba(148,163,184,0.5)',
+        },
+    },
+} as const;
+
+export function getFlowCanvasClassName(isEffectiveSelectMode: boolean): string {
+    return `bg-[var(--brand-background)] ${isEffectiveSelectMode ? 'flow-canvas-select-mode' : 'flow-canvas-pan-mode'}`;
+}
+
+export function getFlowCanvasInteractionMode(isEffectiveSelectMode: boolean): {
+    selectionOnDrag: boolean;
+    panOnDrag: boolean | number[];
+    selectionMode: SelectionMode | undefined;
+} {
+    if (isEffectiveSelectMode) {
+        return {
+            selectionOnDrag: true,
+            panOnDrag: [1, 2],
+            selectionMode: SelectionMode.Partial,
+        };
+    }
+
+    return {
+        selectionOnDrag: false,
+        panOnDrag: [0, 1, 2],
+        selectionMode: undefined,
+    };
+}
diff --git a/src/components/flow-canvas/flowCanvasTypes.test.ts b/src/components/flow-canvas/flowCanvasTypes.test.ts
index d67ce70..7b32d00 100644
--- a/src/components/flow-canvas/flowCanvasTypes.test.ts
+++ b/src/components/flow-canvas/flowCanvasTypes.test.ts
@@ -21,6 +21,7 @@ describe('flowCanvasNodeTypes', () => {
         "mobile",
         "process",
         "section",
+        "sequence_participant",
         "start",
         "swimlane",
         "text",
@@ -46,9 +47,12 @@ describe('flowCanvasEdgeTypes', () => {
     const edgeTypeKeys = Object.keys(flowCanvasEdgeTypes).sort();
     expect(edgeTypeKeys).toMatchInlineSnapshot(`
       [
+        "bezier",
         "default",
+        "sequence_message",
         "smoothstep",
         "step",
+        "straight",
       ]
     `);
   });
diff --git a/src/components/flow-canvas/flowCanvasTypes.tsx b/src/components/flow-canvas/flowCanvasTypes.tsx
index 509aa70..e833781 100644
--- a/src/components/flow-canvas/flowCanvasTypes.tsx
+++ b/src/components/flow-canvas/flowCanvasTypes.tsx
@@ -1,8 +1,8 @@
 import type { EdgeTypes, NodeTypes } from '@/lib/reactflowCompat';
-import { ROLLOUT_FLAGS } from '@/config/rolloutFlags';
 import AnnotationNode from '@/components/AnnotationNode';
 import CustomNode from '@/components/CustomNode';
 import { CustomBezierEdge, CustomSmoothStepEdge, CustomStepEdge, CustomStraightEdge } from '@/components/CustomEdge';
+import SequenceMessageEdge from '@/components/custom-edge/SequenceMessageEdge';
 import GroupNode from '@/components/GroupNode';
 import ImageNode from '@/components/ImageNode';
 import SectionNode from '@/components/SectionNode';
@@ -15,6 +15,7 @@ import EntityNode from '@/components/custom-nodes/EntityNode';
 import MindmapNode from '@/components/custom-nodes/MindmapNode';
 import JourneyNode from '@/components/custom-nodes/JourneyNode';
 import ArchitectureNode from '@/components/custom-nodes/ArchitectureNode';
+import SequenceParticipantNode from '@/components/custom-nodes/SequenceParticipantNode';
 
 export const flowCanvasNodeTypes: NodeTypes = {
     start: CustomNode,
@@ -35,18 +36,16 @@ export const flowCanvasNodeTypes: NodeTypes = {
     image: ImageNode,
     browser: BrowserNode,
     mobile: MobileNode,
+    sequence_participant: SequenceParticipantNode,
 };
 
 export const flowCanvasEdgeTypes: EdgeTypes = {
     default: CustomBezierEdge,
     smoothstep: CustomSmoothStepEdge,
     step: CustomStepEdge,
-    ...(ROLLOUT_FLAGS.connectorModelV1
-        ? {
-            bezier: CustomBezierEdge,
-            straight: CustomStraightEdge,
-        }
-        : {}),
+    bezier: CustomBezierEdge,
+    straight: CustomStraightEdge,
+    sequence_message: SequenceMessageEdge,
 };
 
 interface ConnectionLike {
diff --git a/src/components/flow-canvas/largeGraphSafetyMode.test.ts b/src/components/flow-canvas/largeGraphSafetyMode.test.ts
index dac611c..848b09d 100644
--- a/src/components/flow-canvas/largeGraphSafetyMode.test.ts
+++ b/src/components/flow-canvas/largeGraphSafetyMode.test.ts
@@ -1,6 +1,7 @@
 import { describe, expect, it } from 'vitest';
 import type { Edge } from '@/lib/reactflowCompat';
 import {
+  getGraphComplexityScore,
   getInteractionLodCooldownMs,
   getSafetyAdjustedEdges,
   isFarZoomReductionActive,
@@ -21,10 +22,17 @@ describe('largeGraphSafetyMode', () => {
     expect(isLargeGraphSafetyActive(120, 10, 'auto', 'performance')).toBe(true);
     expect(isLargeGraphSafetyActive(299, 500, 'auto', 'balanced')).toBe(false);
     expect(isLargeGraphSafetyActive(300, 500, 'auto', 'balanced')).toBe(true);
+    expect(isLargeGraphSafetyActive(80, 190, 'auto', 'performance')).toBe(true);
+    expect(isLargeGraphSafetyActive(120, 820, 'auto', 'quality')).toBe(false);
     expect(isLargeGraphSafetyActive(499, 10, 'auto', 'quality')).toBe(false);
     expect(isLargeGraphSafetyActive(500, 10, 'auto', 'quality')).toBe(true);
   });
 
+  it('computes a weighted complexity score that accounts for dense edge counts', () => {
+    expect(getGraphComplexityScore(100, 200)).toBe(220);
+    expect(getGraphComplexityScore(280, 500)).toBe(580);
+  });
+
   it('disables animated edges when safety mode is active', () => {
     const animated = { id: 'e1', source: 'a', target: 'b', animated: true } as Edge;
     const staticEdge = { id: 'e2', source: 'b', target: 'c', animated: false } as Edge;
diff --git a/src/components/flow-canvas/largeGraphSafetyMode.ts b/src/components/flow-canvas/largeGraphSafetyMode.ts
index 7da8034..aed76c8 100644
--- a/src/components/flow-canvas/largeGraphSafetyMode.ts
+++ b/src/components/flow-canvas/largeGraphSafetyMode.ts
@@ -3,6 +3,8 @@ import type { ViewSettings } from '@/store/types';
 
 const PROFILE_THRESHOLDS: Record<ViewSettings['largeGraphSafetyProfile'], {
   nodeThreshold: number;
+  edgeThreshold: number;
+  complexityThreshold: number;
   lowDetailZoomThreshold: number;
   farZoomReductionThreshold: number;
   interactionCooldownMs: number;
@@ -10,6 +12,8 @@ const PROFILE_THRESHOLDS: Record<ViewSettings['largeGraphSafetyProfile'], {
 }> = {
   performance: {
     nodeThreshold: 100,
+    edgeThreshold: 180,
+    complexityThreshold: 170,
     lowDetailZoomThreshold: 0.6,
     farZoomReductionThreshold: 0.5,
     interactionCooldownMs: 240,
@@ -17,6 +21,8 @@ const PROFILE_THRESHOLDS: Record<ViewSettings['largeGraphSafetyProfile'], {
   },
   balanced: {
     nodeThreshold: 300,
+    edgeThreshold: 650,
+    complexityThreshold: 600,
     lowDetailZoomThreshold: 0.5,
     farZoomReductionThreshold: 0.4,
     interactionCooldownMs: 180,
@@ -24,6 +30,8 @@ const PROFILE_THRESHOLDS: Record<ViewSettings['largeGraphSafetyProfile'], {
   },
   quality: {
     nodeThreshold: 500,
+    edgeThreshold: 900,
+    complexityThreshold: 850,
     lowDetailZoomThreshold: 0.42,
     farZoomReductionThreshold: 0.34,
     interactionCooldownMs: 130,
@@ -31,6 +39,10 @@ const PROFILE_THRESHOLDS: Record<ViewSettings['largeGraphSafetyProfile'], {
   },
 };
 
+export function getGraphComplexityScore(nodeCount: number, edgeCount: number): number {
+  return nodeCount + edgeCount * 0.6;
+}
+
 function resolveHysteresisState(
   safetyActive: boolean,
   zoom: number,
@@ -47,13 +59,17 @@ function resolveHysteresisState(
 
 export function isLargeGraphSafetyActive(
   nodeCount: number,
-  _edgeCount: number,
+  edgeCount: number,
   mode: ViewSettings['largeGraphSafetyMode'],
   profile: ViewSettings['largeGraphSafetyProfile'] = 'balanced'
 ): boolean {
   if (mode === 'on') return true;
   if (mode === 'off') return false;
-  return nodeCount >= PROFILE_THRESHOLDS[profile].nodeThreshold;
+
+  const thresholds = PROFILE_THRESHOLDS[profile];
+  return nodeCount >= thresholds.nodeThreshold
+    || edgeCount >= thresholds.edgeThreshold
+    || getGraphComplexityScore(nodeCount, edgeCount) >= thresholds.complexityThreshold;
 }
 
 export function getSafetyAdjustedEdges(edges: Edge[], safetyActive: boolean): Edge[] {
diff --git a/src/components/flow-canvas/nodeChromeCoverage.test.ts b/src/components/flow-canvas/nodeChromeCoverage.test.ts
index d16690c..d461e6c 100644
--- a/src/components/flow-canvas/nodeChromeCoverage.test.ts
+++ b/src/components/flow-canvas/nodeChromeCoverage.test.ts
@@ -19,6 +19,7 @@ const NODE_COMPONENT_FILES = [
   'src/components/custom-nodes/MindmapNode.tsx',
   'src/components/custom-nodes/JourneyNode.tsx',
   'src/components/custom-nodes/ArchitectureNode.tsx',
+  'src/components/custom-nodes/SequenceParticipantNode.tsx',
 ] as const;
 
 function readSource(path: string): string {
@@ -30,6 +31,7 @@ describe('node chrome coverage', () => {
     for (const path of NODE_COMPONENT_FILES) {
       const source = readSource(path);
       const usesNodeChrome = source.includes('NodeChrome');
+      const usesStructuredNodeHandles = source.includes('StructuredNodeHandles');
       const usesExplicitChrome =
         source.includes('NodeTransformControls')
         && source.includes('<Handle')
@@ -37,15 +39,14 @@ describe('node chrome coverage', () => {
         && source.includes('Position.Right')
         && source.includes('Position.Bottom')
         && source.includes('Position.Left');
-      expect(usesNodeChrome || usesExplicitChrome, path).toBe(true);
+      expect(usesNodeChrome || usesStructuredNodeHandles || usesExplicitChrome, path).toBe(true);
     }
   });
 
   it('keeps production node components on NodeChrome or loose-mode universal handles', () => {
     for (const path of NODE_COMPONENT_FILES) {
       const source = readSource(path);
-      if (source.includes('NodeChrome')) {
-        expect(source, path).toContain('NodeChrome');
+      if (source.includes('NodeChrome') || source.includes('StructuredNodeHandles')) {
         continue;
       }
 
diff --git a/src/components/flow-canvas/useFlowCanvasContextActions.ts b/src/components/flow-canvas/useFlowCanvasContextActions.ts
index 5b6c713..f8f45d8 100644
--- a/src/components/flow-canvas/useFlowCanvasContextActions.ts
+++ b/src/components/flow-canvas/useFlowCanvasContextActions.ts
@@ -12,6 +12,7 @@ interface UseFlowCanvasContextActionsParams {
     deleteNode: (id: string) => void;
     deleteEdge: (id: string) => void;
     updateNodeZIndex: (id: string, action: 'front' | 'back') => void;
+    updateNodeType: (id: string, type: string) => void;
     handleAlignNodes: (direction: 'left' | 'center' | 'right' | 'top' | 'middle' | 'bottom') => void;
     handleDistributeNodes: (direction: 'horizontal' | 'vertical') => void;
     handleGroupNodes: () => void;
@@ -24,6 +25,7 @@ export interface UseFlowCanvasContextActionsResult {
     onDuplicate: () => void;
     onDelete: () => void;
     onSendToBack: () => void;
+    onChangeNodeType: (type: string) => void;
     onAlignNodes: (direction: 'left' | 'center' | 'right' | 'top' | 'middle' | 'bottom') => void;
     onDistributeNodes: (direction: 'horizontal' | 'vertical') => void;
     onGroupSelected: () => void;
@@ -33,12 +35,12 @@ export function useFlowCanvasContextActions({
     contextMenu,
     onCloseContextMenu,
     screenToFlowPosition,
-    copySelection,
     pasteSelection,
     duplicateNode,
     deleteNode,
     deleteEdge,
     updateNodeZIndex,
+    updateNodeType,
     handleAlignNodes,
     handleDistributeNodes,
     handleGroupNodes,
@@ -78,6 +80,13 @@ export function useFlowCanvasContextActions({
         onCloseContextMenu();
     }
 
+    function onChangeNodeType(type: string): void {
+        if (contextMenu.id) {
+            updateNodeType(contextMenu.id, type);
+        }
+        onCloseContextMenu();
+    }
+
     function onAlignNodesAndClose(direction: 'left' | 'center' | 'right' | 'top' | 'middle' | 'bottom'): void {
         handleAlignNodes(direction);
         onCloseContextMenu();
@@ -99,6 +108,7 @@ export function useFlowCanvasContextActions({
         onDuplicate,
         onDelete,
         onSendToBack,
+        onChangeNodeType,
         onAlignNodes: onAlignNodesAndClose,
         onDistributeNodes: onDistributeNodesAndClose,
         onGroupSelected,
diff --git a/src/components/flow-canvas/useFlowCanvasMenus.ts b/src/components/flow-canvas/useFlowCanvasMenus.ts
index f2efa73..3b03bc5 100644
--- a/src/components/flow-canvas/useFlowCanvasMenus.ts
+++ b/src/components/flow-canvas/useFlowCanvasMenus.ts
@@ -50,6 +50,7 @@ export function useFlowCanvasMenus({
         setContextMenu({
             id: node.id,
             type: 'node',
+            currentNodeType: node.type ?? null,
             position: { x: event.clientX, y: event.clientY },
             onClose: onCloseContextMenu,
             isOpen: true,
diff --git a/src/components/flow-canvas/useFlowCanvasMenusAndActions.test.tsx b/src/components/flow-canvas/useFlowCanvasMenusAndActions.test.tsx
index 0fdd2eb..076d2d8 100644
--- a/src/components/flow-canvas/useFlowCanvasMenusAndActions.test.tsx
+++ b/src/components/flow-canvas/useFlowCanvasMenusAndActions.test.tsx
@@ -15,6 +15,7 @@ describe('useFlowCanvasMenusAndActions', () => {
                 deleteNode: vi.fn(),
                 deleteEdge: vi.fn(),
                 updateNodeZIndex: vi.fn(),
+                updateNodeType: vi.fn(),
                 handleAlignNodes: vi.fn(),
                 handleDistributeNodes: vi.fn(),
                 handleGroupNodes: vi.fn(),
diff --git a/src/components/flow-canvas/useFlowCanvasMenusAndActions.ts b/src/components/flow-canvas/useFlowCanvasMenusAndActions.ts
index 34a4393..bb91549 100644
--- a/src/components/flow-canvas/useFlowCanvasMenusAndActions.ts
+++ b/src/components/flow-canvas/useFlowCanvasMenusAndActions.ts
@@ -11,6 +11,7 @@ interface UseFlowCanvasMenusAndActionsParams {
     deleteNode: (id: string) => void;
     deleteEdge: (id: string) => void;
     updateNodeZIndex: (id: string, action: 'front' | 'back') => void;
+    updateNodeType: (id: string, type: string) => void;
     handleAlignNodes: (direction: 'left' | 'center' | 'right' | 'top' | 'middle' | 'bottom') => void;
     handleDistributeNodes: (direction: 'horizontal' | 'vertical') => void;
     handleGroupNodes: () => void;
@@ -26,6 +27,7 @@ export function useFlowCanvasMenusAndActions({
     deleteNode,
     deleteEdge,
     updateNodeZIndex,
+    updateNodeType,
     handleAlignNodes,
     handleDistributeNodes,
     handleGroupNodes,
@@ -44,6 +46,7 @@ export function useFlowCanvasMenusAndActions({
         deleteNode,
         deleteEdge,
         updateNodeZIndex,
+        updateNodeType,
         handleAlignNodes,
         handleDistributeNodes,
         handleGroupNodes,
diff --git a/src/components/flow-canvas/useFlowCanvasReactFlowConfig.test.ts b/src/components/flow-canvas/useFlowCanvasReactFlowConfig.test.ts
index d44ceed..5ff2e07 100644
--- a/src/components/flow-canvas/useFlowCanvasReactFlowConfig.test.ts
+++ b/src/components/flow-canvas/useFlowCanvasReactFlowConfig.test.ts
@@ -1,6 +1,10 @@
 import { describe, expect, it } from 'vitest';
-import { ConnectionMode, MarkerType, SelectionMode } from '@/lib/reactflowCompat';
+import { ConnectionMode, SelectionMode } from '@/lib/reactflowCompat';
 import { computeFlowCanvasReactFlowConfig } from './useFlowCanvasReactFlowConfig';
+import {
+    FLOW_CANVAS_BASE_BEHAVIOR,
+    FLOW_CANVAS_STYLE_PRESETS,
+} from './flowCanvasReactFlowContracts';
 
 describe('computeFlowCanvasReactFlowConfig', () => {
     it('builds select-mode config with visual quality styling', () => {
@@ -14,29 +18,21 @@ describe('computeFlowCanvasReactFlowConfig', () => {
         expect(result.onlyRenderVisibleElements).toBe(true);
         expect(result.connectionMode).toBe(ConnectionMode.Loose);
         expect(result.selectionOnDrag).toBe(true);
-        expect(result.selectionKeyCode).toBe('Shift');
+        expect(result.selectNodesOnDrag).toBe(FLOW_CANVAS_BASE_BEHAVIOR.selectNodesOnDrag);
+        expect(result.selectionKeyCode).toBe(FLOW_CANVAS_BASE_BEHAVIOR.selectionKeyCode);
         expect(result.panOnDrag).toEqual([1, 2]);
-        expect(result.panActivationKeyCode).toBe('Space');
-        expect(result.zoomActivationKeyCode).toEqual(['Meta', 'Control']);
+        expect(result.panActivationKeyCode).toBe(FLOW_CANVAS_BASE_BEHAVIOR.panActivationKeyCode);
+        expect(result.zoomActivationKeyCode).toEqual(FLOW_CANVAS_BASE_BEHAVIOR.zoomActivationKeyCode);
         expect(result.selectionMode).toBe(SelectionMode.Partial);
-        expect(result.multiSelectionKeyCode).toBe('Shift');
-        expect(result.zoomOnScroll).toBe(false);
-        expect(result.zoomOnPinch).toBe(true);
-        expect(result.panOnScroll).toBe(true);
-        expect(result.panOnScrollMode).toBe('free');
-        expect(result.preventScrolling).toBe(true);
-        expect(result.zoomOnDoubleClick).toBe(false);
-        expect(result.defaultEdgeOptions).toEqual({
-            style: { stroke: '#64748b', strokeWidth: 1.5 },
-            animated: false,
-            markerEnd: { type: MarkerType.ArrowClosed, color: '#64748b', width: 20, height: 20 },
-        });
-        expect(result.background).toEqual({
-            variant: expect.anything(),
-            gap: 24,
-            size: 1.5,
-            color: 'rgba(148,163,184,0.5)',
-        });
+        expect(result.multiSelectionKeyCode).toBe(FLOW_CANVAS_BASE_BEHAVIOR.multiSelectionKeyCode);
+        expect(result.zoomOnScroll).toBe(FLOW_CANVAS_BASE_BEHAVIOR.zoomOnScroll);
+        expect(result.zoomOnPinch).toBe(FLOW_CANVAS_BASE_BEHAVIOR.zoomOnPinch);
+        expect(result.panOnScroll).toBe(FLOW_CANVAS_BASE_BEHAVIOR.panOnScroll);
+        expect(result.panOnScrollMode).toBe(FLOW_CANVAS_BASE_BEHAVIOR.panOnScrollMode);
+        expect(result.preventScrolling).toBe(FLOW_CANVAS_BASE_BEHAVIOR.preventScrolling);
+        expect(result.zoomOnDoubleClick).toBe(FLOW_CANVAS_BASE_BEHAVIOR.zoomOnDoubleClick);
+        expect(result.defaultEdgeOptions).toEqual(FLOW_CANVAS_STYLE_PRESETS.enhanced.defaultEdgeOptions);
+        expect(result.background).toEqual(FLOW_CANVAS_STYLE_PRESETS.enhanced.background);
     });
 
     it('builds pan-mode config with legacy styling', () => {
@@ -49,25 +45,20 @@ describe('computeFlowCanvasReactFlowConfig', () => {
         expect(result.className).toContain('flow-canvas-pan-mode');
         expect(result.onlyRenderVisibleElements).toBe(false);
         expect(result.selectionOnDrag).toBe(false);
-        expect(result.selectionKeyCode).toBe('Shift');
+        expect(result.selectNodesOnDrag).toBe(FLOW_CANVAS_BASE_BEHAVIOR.selectNodesOnDrag);
+        expect(result.selectionKeyCode).toBe(FLOW_CANVAS_BASE_BEHAVIOR.selectionKeyCode);
         expect(result.panOnDrag).toEqual([0, 1, 2]);
-        expect(result.panActivationKeyCode).toBe('Space');
-        expect(result.zoomActivationKeyCode).toEqual(['Meta', 'Control']);
+        expect(result.panActivationKeyCode).toBe(FLOW_CANVAS_BASE_BEHAVIOR.panActivationKeyCode);
+        expect(result.zoomActivationKeyCode).toEqual(FLOW_CANVAS_BASE_BEHAVIOR.zoomActivationKeyCode);
         expect(result.selectionMode).toBeUndefined();
-        expect(result.multiSelectionKeyCode).toBe('Shift');
-        expect(result.zoomOnScroll).toBe(false);
-        expect(result.zoomOnPinch).toBe(true);
-        expect(result.panOnScroll).toBe(true);
-        expect(result.panOnScrollMode).toBe('free');
-        expect(result.preventScrolling).toBe(true);
-        expect(result.zoomOnDoubleClick).toBe(false);
-        expect(result.defaultEdgeOptions).toEqual({
-            style: { stroke: '#94a3b8', strokeWidth: 2 },
-            animated: false,
-            markerEnd: { type: MarkerType.ArrowClosed, color: '#94a3b8', width: 20, height: 20 },
-        });
-        expect(result.background.gap).toBe(20);
-        expect(result.background.size).toBe(1.25);
-        expect(result.background.color).toBe('#94a3b8');
+        expect(result.multiSelectionKeyCode).toBe(FLOW_CANVAS_BASE_BEHAVIOR.multiSelectionKeyCode);
+        expect(result.zoomOnScroll).toBe(FLOW_CANVAS_BASE_BEHAVIOR.zoomOnScroll);
+        expect(result.zoomOnPinch).toBe(FLOW_CANVAS_BASE_BEHAVIOR.zoomOnPinch);
+        expect(result.panOnScroll).toBe(FLOW_CANVAS_BASE_BEHAVIOR.panOnScroll);
+        expect(result.panOnScrollMode).toBe(FLOW_CANVAS_BASE_BEHAVIOR.panOnScrollMode);
+        expect(result.preventScrolling).toBe(FLOW_CANVAS_BASE_BEHAVIOR.preventScrolling);
+        expect(result.zoomOnDoubleClick).toBe(FLOW_CANVAS_BASE_BEHAVIOR.zoomOnDoubleClick);
+        expect(result.defaultEdgeOptions).toEqual(FLOW_CANVAS_STYLE_PRESETS.standard.defaultEdgeOptions);
+        expect(result.background).toEqual(FLOW_CANVAS_STYLE_PRESETS.standard.background);
     });
 });
diff --git a/src/components/flow-canvas/useFlowCanvasReactFlowConfig.ts b/src/components/flow-canvas/useFlowCanvasReactFlowConfig.ts
index 09cd7bd..13f019f 100644
--- a/src/components/flow-canvas/useFlowCanvasReactFlowConfig.ts
+++ b/src/components/flow-canvas/useFlowCanvasReactFlowConfig.ts
@@ -10,6 +10,12 @@ import {
 } from '@/lib/reactflowCompat';
 import type { FlowEdge } from '@/lib/types';
 import { isDuplicateConnection } from './flowCanvasTypes';
+import {
+    FLOW_CANVAS_BASE_BEHAVIOR,
+    FLOW_CANVAS_STYLE_PRESETS,
+    getFlowCanvasClassName,
+    getFlowCanvasInteractionMode,
+} from './flowCanvasReactFlowContracts';
 
 interface ComputeFlowCanvasReactFlowConfigParams {
     visualQualityV2Enabled: boolean;
@@ -33,6 +39,7 @@ export interface FlowCanvasReactFlowConfig {
     onlyRenderVisibleElements: boolean;
     connectionMode: ConnectionMode;
     selectionOnDrag: boolean;
+    selectNodesOnDrag: boolean;
     selectionKeyCode: KeyCode | null;
     panOnDrag: boolean | number[];
     panActivationKeyCode: KeyCode | null;
@@ -59,39 +66,18 @@ export function computeFlowCanvasReactFlowConfig({
     isEffectiveSelectMode,
     viewportCullingEnabled,
 }: ComputeFlowCanvasReactFlowConfigParams): Omit<FlowCanvasReactFlowConfig, 'isValidConnection'> {
+    const interactionMode = getFlowCanvasInteractionMode(isEffectiveSelectMode);
+    const stylePreset = visualQualityV2Enabled
+        ? FLOW_CANVAS_STYLE_PRESETS.enhanced
+        : FLOW_CANVAS_STYLE_PRESETS.standard;
+
     return {
-        className: `bg-[var(--brand-background)] ${isEffectiveSelectMode ? 'flow-canvas-select-mode' : 'flow-canvas-pan-mode'}`,
+        className: getFlowCanvasClassName(isEffectiveSelectMode),
         onlyRenderVisibleElements: viewportCullingEnabled,
-        connectionMode: ConnectionMode.Loose,
-        selectionOnDrag: isEffectiveSelectMode,
-        selectionKeyCode: 'Shift',
-        panOnDrag: isEffectiveSelectMode ? [1, 2] : [0, 1, 2],
-        panActivationKeyCode: 'Space',
-        zoomActivationKeyCode: ['Meta', 'Control'],
-        selectionMode: isEffectiveSelectMode ? SelectionMode.Partial : undefined,
-        multiSelectionKeyCode: 'Shift',
-        zoomOnScroll: false,
-        zoomOnPinch: true,
-        panOnScroll: true,
-        panOnScrollMode: PanOnScrollMode.Free,
-        preventScrolling: true,
-        zoomOnDoubleClick: false,
-        defaultEdgeOptions: {
-            style: visualQualityV2Enabled ? { stroke: '#64748b', strokeWidth: 1.5 } : { stroke: '#94a3b8', strokeWidth: 2 },
-            animated: false,
-            markerEnd: {
-                type: MarkerType.ArrowClosed,
-                color: visualQualityV2Enabled ? '#64748b' : '#94a3b8',
-                width: 20,
-                height: 20,
-            },
-        },
-        background: {
-            variant: BackgroundVariant.Dots,
-            gap: visualQualityV2Enabled ? 24 : 20,
-            size: visualQualityV2Enabled ? 1.5 : 1.25,
-            color: visualQualityV2Enabled ? 'rgba(148,163,184,0.5)' : '#94a3b8',
-        },
+        ...FLOW_CANVAS_BASE_BEHAVIOR,
+        ...interactionMode,
+        defaultEdgeOptions: stylePreset.defaultEdgeOptions,
+        background: stylePreset.background,
     };
 }
 
@@ -111,7 +97,9 @@ export function useFlowCanvasReactFlowConfig({
     );
 
     const isValidConnection = useCallback(
-        (connection: Connection) => !isDuplicateConnection(connection, effectiveEdges),
+        (connection: Connection) =>
+            connection.source !== connection.target &&
+            !isDuplicateConnection(connection, effectiveEdges),
         [effectiveEdges]
     );
 
diff --git a/src/components/flow-canvas/useFlowCanvasViewState.test.ts b/src/components/flow-canvas/useFlowCanvasViewState.test.ts
index 2b3ad41..6aa483f 100644
--- a/src/components/flow-canvas/useFlowCanvasViewState.test.ts
+++ b/src/components/flow-canvas/useFlowCanvasViewState.test.ts
@@ -67,4 +67,21 @@ describe('computeFlowCanvasViewState', () => {
         expect(result.viewportCullingEnabled).toBe(true);
         expect(result.effectiveShowGrid).toBe(false);
     });
+
+    it('activates safety mode for edge-dense graphs even when node count is modest', () => {
+        const nodes = Array.from({ length: 80 }, (_, index) => createNode(`node-${index}`));
+        const edges = Array.from({ length: 190 }, (_, index) => createEdge(`edge-${index}`, 'node-0', `node-${(index % 79) + 1}`));
+
+        const result = computeFlowCanvasViewState({
+            nodes,
+            edges,
+            layers: [{ id: 'default', name: 'Default', visible: true, locked: false }],
+            showGrid: true,
+            largeGraphSafetyMode: 'auto',
+            largeGraphSafetyProfile: 'performance',
+        });
+
+        expect(result.safetyModeActive).toBe(true);
+        expect(result.effectiveShowGrid).toBe(false);
+    });
 });
diff --git a/src/components/flow-editor/CollaborationPresenceOverlay.test.tsx b/src/components/flow-editor/CollaborationPresenceOverlay.test.tsx
index cbdb7a6..777560d 100644
--- a/src/components/flow-editor/CollaborationPresenceOverlay.test.tsx
+++ b/src/components/flow-editor/CollaborationPresenceOverlay.test.tsx
@@ -19,8 +19,7 @@ describe('CollaborationPresenceOverlay', () => {
 
     const cursor = screen.getByTestId('remote-cursor-client-a');
     expect(cursor).toBeTruthy();
-    expect(cursor instanceof HTMLElement ? cursor.style.left : '').toBe('320px');
-    expect(cursor instanceof HTMLElement ? cursor.style.top : '').toBe('180px');
+    expect(cursor instanceof HTMLElement ? cursor.style.transform : '').toBe('translate(330px, 190px)');
   });
 
   it('suppresses untouched ghost cursors at 0,0', () => {
diff --git a/src/components/flow-editor/CollaborationPresenceOverlay.tsx b/src/components/flow-editor/CollaborationPresenceOverlay.tsx
index f612bc7..832b1b4 100644
--- a/src/components/flow-editor/CollaborationPresenceOverlay.tsx
+++ b/src/components/flow-editor/CollaborationPresenceOverlay.tsx
@@ -1,56 +1,130 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import type { CollaborationRemotePresence } from '@/hooks/useFlowEditorCollaboration';
 
 interface CollaborationPresenceOverlayProps {
     remotePresence: CollaborationRemotePresence[];
+    nodePositions?: Map<string, { x: number; y: number; width: number; height: number }>;
+}
+
+const IDLE_TIMEOUT_MS = 30_000;
+
+function RemoteCursor({
+    presence,
+    nodePositions,
+}: {
+    presence: CollaborationRemotePresence;
+    nodePositions?: Map<string, { x: number; y: number; width: number; height: number }>;
+}): React.ReactElement {
+    const cursorRef = useRef<HTMLDivElement>(null);
+    const dotRef = useRef<HTMLSpanElement>(null);
+    const timerRef = useRef<number | null>(null);
+    const prevCursorRef = useRef(presence.cursor);
+    const selectedNodeIds = presence.selectedNodeIds ?? [];
+
+    useEffect(() => {
+        const moved = presence.cursor.x !== prevCursorRef.current.x || presence.cursor.y !== prevCursorRef.current.y;
+        prevCursorRef.current = presence.cursor;
+
+        if (!moved) return;
+
+        cursorRef.current?.style.setProperty('opacity', '1');
+        dotRef.current?.style.setProperty('background-color', presence.color);
+
+        if (timerRef.current !== null) {
+            window.clearTimeout(timerRef.current);
+        }
+        timerRef.current = window.setTimeout(() => {
+            cursorRef.current?.style.setProperty('opacity', '0.4');
+            dotRef.current?.style.setProperty('background-color', '#94a3b8');
+        }, IDLE_TIMEOUT_MS);
+
+        return () => {
+            if (timerRef.current !== null) {
+                window.clearTimeout(timerRef.current);
+            }
+        };
+    }, [presence.cursor, presence.color]);
+
+    return (
+        <>
+            <div
+                ref={cursorRef}
+                className="pointer-events-none absolute left-0 top-0 will-change-transform"
+                style={{
+                    transform: `translate(${presence.cursor.x + 10}px, ${presence.cursor.y + 10}px)`,
+                    transition: 'transform 80ms linear, opacity 300ms ease',
+                }}
+                data-testid={`remote-cursor-${presence.clientId}`}
+            >
+                <div className="flex items-start gap-2">
+                    <svg
+                        aria-hidden="true"
+                        viewBox="0 0 20 24"
+                        className="h-6 w-5 drop-shadow-[0_4px_10px_rgba(15,23,42,0.22)]"
+                    >
+                        <path
+                            d="M3 2.5L16.5 11.25L10.25 12.75L13 20.5L9.5 21.75L6.75 14L2.5 18.5Z"
+                            fill={presence.color}
+                            stroke="white"
+                            strokeWidth="1.5"
+                            strokeLinejoin="round"
+                        />
+                    </svg>
+                    <div
+                        className="inline-flex items-center gap-2 rounded-full border bg-white/95 px-3 py-1 text-[11px] font-medium text-slate-700 shadow-[0_8px_24px_rgba(15,23,42,0.12)] backdrop-blur"
+                        style={{
+                            borderColor: `${presence.color}33`,
+                        }}
+                    >
+                        <span
+                            ref={dotRef}
+                            className="h-2.5 w-2.5 rounded-full"
+                            style={{
+                                backgroundColor: presence.color,
+                                transition: 'background-color 300ms ease',
+                            }}
+                        />
+                        <span>{presence.name}</span>
+                    </div>
+                </div>
+            </div>
+
+            {nodePositions && selectedNodeIds.map((nodeId) => {
+                const pos = nodePositions.get(nodeId);
+                if (!pos) return null;
+                return (
+                    <div
+                        key={`${presence.clientId}-sel-${nodeId}`}
+                        className="pointer-events-none absolute left-0 top-0 rounded-lg will-change-transform"
+                        style={{
+                            transform: `translate(${pos.x - 3}px, ${pos.y - 3}px)`,
+                            width: `${pos.width + 6}px`,
+                            height: `${pos.height + 6}px`,
+                            border: `2px solid ${presence.color}`,
+                            opacity: 0.5,
+                            transition: 'transform 80ms linear',
+                        }}
+                    />
+                );
+            })}
+        </>
+    );
 }
 
 export function CollaborationPresenceOverlay({
     remotePresence,
+    nodePositions,
 }: CollaborationPresenceOverlayProps): React.ReactElement {
     const visiblePresence = remotePresence.filter((presence) => presence.cursor.x > 0 || presence.cursor.y > 0);
 
     return (
         <div className="pointer-events-none absolute inset-0 z-50 overflow-hidden">
             {visiblePresence.map((presence) => (
-                <div
+                <RemoteCursor
                     key={presence.clientId}
-                    className="pointer-events-none absolute"
-                    style={{
-                        left: `${presence.cursor.x}px`,
-                        top: `${presence.cursor.y}px`,
-                        transform: 'translate(10px, 10px)',
-                    }}
-                    data-testid={`remote-cursor-${presence.clientId}`}
-                >
-                    <div className="flex items-start gap-2">
-                        <svg
-                            aria-hidden="true"
-                            viewBox="0 0 20 24"
-                            className="h-6 w-5 drop-shadow-[0_4px_10px_rgba(15,23,42,0.22)]"
-                        >
-                            <path
-                                d="M3 2.5L16.5 11.25L10.25 12.75L13 20.5L9.5 21.75L6.75 14L2.5 18.5Z"
-                                fill={presence.color}
-                                stroke="white"
-                                strokeWidth="1.5"
-                                strokeLinejoin="round"
-                            />
-                        </svg>
-                        <div
-                            className="inline-flex items-center gap-2 rounded-full border bg-white/95 px-3 py-1 text-[11px] font-medium text-slate-700 shadow-[0_8px_24px_rgba(15,23,42,0.12)] backdrop-blur"
-                            style={{
-                                borderColor: `${presence.color}33`,
-                            }}
-                        >
-                            <span
-                                className="h-2.5 w-2.5 rounded-full"
-                                style={{ backgroundColor: presence.color }}
-                            />
-                            <span>{presence.name}</span>
-                        </div>
-                    </div>
-                </div>
+                    presence={presence}
+                    nodePositions={nodePositions}
+                />
             ))}
         </div>
     );
diff --git a/src/components/flow-editor/FlowEditorChrome.tsx b/src/components/flow-editor/FlowEditorChrome.tsx
new file mode 100644
index 0000000..119b133
--- /dev/null
+++ b/src/components/flow-editor/FlowEditorChrome.tsx
@@ -0,0 +1,274 @@
+import React, { Suspense, lazy } from 'react';
+import type { FlowTab } from '@/lib/types';
+import type { NodeData } from '@/lib/types';
+import type { FlowEditorPanelsProps } from '@/components/FlowEditorPanels';
+import type {
+    CollaborationRemotePresence,
+    FlowEditorCollaborationTopNavState,
+} from '@/hooks/useFlowEditorCollaboration';
+import { ErrorBoundary } from '@/components/ErrorBoundary';
+
+const LazyFlowEditorPanels = lazy(async () => {
+    const module = await import('@/components/FlowEditorPanels');
+    return { default: module.FlowEditorPanels };
+});
+
+const LazyTopNav = lazy(async () => {
+    const module = await import('@/components/TopNav');
+    return { default: module.TopNav };
+});
+
+const LazyToolbar = lazy(async () => {
+    const module = await import('@/components/Toolbar');
+    return { default: module.Toolbar };
+});
+
+const LazyPlaybackControls = lazy(async () => {
+    const module = await import('@/components/PlaybackControls');
+    return { default: module.PlaybackControls };
+});
+
+const LazyFlowEditorLayoutOverlay = lazy(async () => {
+    const module = await import('@/components/FlowEditorLayoutOverlay');
+    return { default: module.FlowEditorLayoutOverlay };
+});
+
+const LazyFlowEditorEmptyState = lazy(async () => {
+    const module = await import('@/components/FlowEditorEmptyState');
+    return { default: module.FlowEditorEmptyState };
+});
+
+const LazyDiffModeBanner = lazy(async () => {
+    const module = await import('@/components/diagram-diff/DiffModeBanner');
+    return { default: module.DiffModeBanner };
+});
+
+const LazyCollaborationPresenceOverlay = lazy(async () => {
+    const module = await import('@/components/flow-editor/CollaborationPresenceOverlay');
+    return { default: module.CollaborationPresenceOverlay };
+});
+
+function TopNavFallback(): React.ReactElement {
+    return (
+        <div className="absolute top-0 left-0 right-0 z-50 h-14 border-b border-white/20 bg-white/70 shadow-sm backdrop-blur-md" />
+    );
+}
+
+export interface FlowEditorChromeProps {
+    tabs: FlowTab[];
+    activeTabId: string;
+    topNav: {
+        onSwitchTab: (tabId: string) => void;
+        onAddTab: () => void;
+        onCloseTab: (tabId: string) => void;
+        onRenameTab: (tabId: string, newName: string) => void;
+        onExportPNG: (format?: 'png' | 'jpeg') => void;
+        onCopyImage: (format?: 'png' | 'jpeg') => void;
+        onExportSVG: () => void;
+        onCopySVG: () => void;
+        onExportPDF: () => void;
+        onExportCinematic: (format: 'cinematic-video' | 'cinematic-gif') => void;
+        onExportJSON: () => void;
+        onCopyJSON: () => void;
+        onExportMermaid: () => void;
+        onDownloadMermaid: () => void;
+        onExportPlantUML: () => void;
+        onDownloadPlantUML: () => void;
+        onExportOpenFlowDSL: () => void;
+        onDownloadOpenFlowDSL: () => void;
+        onExportFigma: () => void;
+        onDownloadFigma: () => void;
+        onShare: () => void;
+        onImportJSON: () => void;
+        onHistory: () => void;
+        onGoHome: () => void;
+        onPlay: () => void;
+        collaboration?: FlowEditorCollaborationTopNavState;
+    };
+    canvas: React.ReactNode;
+    shouldRenderPanels: boolean;
+    panels: FlowEditorPanelsProps;
+    collaborationEnabled: boolean;
+    remotePresence: CollaborationRemotePresence[];
+    collaborationNodePositions?: Map<string, { x: number; y: number; width: number; height: number }>;
+    layoutMessage: string;
+    isLayouting: boolean;
+    playback: {
+        currentStepIndex: number;
+        totalSteps: number;
+        isPlaying: boolean;
+        onPlayPause: () => void;
+        onNext: () => void;
+        onPrev: () => void;
+        onStop: () => void;
+    };
+    toolbar: {
+        isVisible: boolean;
+        onCommandBar: () => void;
+        onToggleStudio: () => void;
+        isStudioOpen: boolean;
+        onOpenAssets: () => void;
+        onAddShape: (shape: NodeData['shape'], position: { x: number; y: number }) => void;
+        onUndo: () => void;
+        onRedo: () => void;
+        onLayout: () => void;
+        canUndo: boolean;
+        canRedo: boolean;
+        isSelectMode: boolean;
+        onToggleSelectMode: () => void;
+        isCommandBarOpen: boolean;
+        onTogglePanMode: () => void;
+        getCenter: () => { x: number; y: number };
+    };
+    emptyState?: {
+        title: string;
+        description: string;
+        generateLabel: string;
+        templatesLabel: string;
+        addNodeLabel: string;
+        onGenerate: () => void;
+        onTemplates: () => void;
+        onAddNode: () => void;
+        onSuggestionClick?: (prompt: string) => void;
+    };
+}
+
+export function FlowEditorChrome({
+    tabs,
+    activeTabId,
+    topNav,
+    canvas,
+    shouldRenderPanels,
+    panels,
+    collaborationEnabled,
+    remotePresence,
+    collaborationNodePositions,
+    layoutMessage,
+    isLayouting,
+    playback,
+    toolbar,
+    emptyState,
+}: FlowEditorChromeProps): React.ReactElement {
+    const topNavProps = {
+        tabs,
+        activeTabId,
+        collaboration: topNav.collaboration,
+        onSwitchTab: topNav.onSwitchTab,
+        onAddTab: topNav.onAddTab,
+        onCloseTab: topNav.onCloseTab,
+        onRenameTab: topNav.onRenameTab,
+        onExportPNG: topNav.onExportPNG,
+        onCopyImage: topNav.onCopyImage,
+        onExportSVG: topNav.onExportSVG,
+        onCopySVG: topNav.onCopySVG,
+        onExportPDF: topNav.onExportPDF,
+        onExportCinematic: topNav.onExportCinematic,
+        onExportJSON: topNav.onExportJSON,
+        onCopyJSON: topNav.onCopyJSON,
+        onExportMermaid: topNav.onExportMermaid,
+        onDownloadMermaid: topNav.onDownloadMermaid,
+        onExportPlantUML: topNav.onExportPlantUML,
+        onDownloadPlantUML: topNav.onDownloadPlantUML,
+        onExportOpenFlowDSL: topNav.onExportOpenFlowDSL,
+        onDownloadOpenFlowDSL: topNav.onDownloadOpenFlowDSL,
+        onExportFigma: topNav.onExportFigma,
+        onDownloadFigma: topNav.onDownloadFigma,
+        onShare: topNav.onShare,
+        onImportJSON: topNav.onImportJSON,
+        onHistory: topNav.onHistory,
+        onGoHome: topNav.onGoHome,
+        onPlay: topNav.onPlay,
+    };
+    const toolbarProps = {
+        onCommandBar: toolbar.onCommandBar,
+        onToggleStudio: toolbar.onToggleStudio,
+        isStudioOpen: toolbar.isStudioOpen,
+        onOpenAssets: toolbar.onOpenAssets,
+        onAddShape: toolbar.onAddShape,
+        onUndo: toolbar.onUndo,
+        onRedo: toolbar.onRedo,
+        onLayout: toolbar.onLayout,
+        canUndo: toolbar.canUndo,
+        canRedo: toolbar.canRedo,
+        isSelectMode: toolbar.isSelectMode,
+        onToggleSelectMode: toolbar.onToggleSelectMode,
+        isCommandBarOpen: toolbar.isCommandBarOpen,
+        onTogglePanMode: toolbar.onTogglePanMode,
+        getCenter: toolbar.getCenter,
+    };
+    const playbackProps = {
+        isPlaying: playback.isPlaying,
+        currentStepIndex: playback.currentStepIndex,
+        totalSteps: playback.totalSteps,
+        onPlayPause: playback.onPlayPause,
+        onNext: playback.onNext,
+        onPrev: playback.onPrev,
+        onStop: playback.onStop,
+    };
+    const emptyStateProps = emptyState
+        ? {
+            title: emptyState.title,
+            description: emptyState.description,
+            generateLabel: emptyState.generateLabel,
+            templatesLabel: emptyState.templatesLabel,
+            addNodeLabel: emptyState.addNodeLabel,
+            onGenerate: emptyState.onGenerate,
+            onTemplates: emptyState.onTemplates,
+            onAddNode: emptyState.onAddNode,
+            onSuggestionClick: emptyState.onSuggestionClick,
+        }
+        : null;
+
+    return (
+        <>
+            <Suspense fallback={<TopNavFallback />}>
+                <LazyTopNav {...topNavProps} />
+            </Suspense>
+
+            <div className="flex min-h-0 flex-1 min-w-0 pt-14">
+                <div className="relative min-w-0 flex-1">
+                    <ErrorBoundary className="h-full">{canvas}</ErrorBoundary>
+                    <Suspense fallback={null}>
+                        <LazyDiffModeBanner />
+                    </Suspense>
+                </div>
+                {shouldRenderPanels ? (
+                    <Suspense fallback={null}>
+                        <LazyFlowEditorPanels {...panels} />
+                    </Suspense>
+                ) : null}
+            </div>
+
+            {collaborationEnabled ? (
+                <Suspense fallback={null}>
+                    <LazyCollaborationPresenceOverlay
+                        remotePresence={remotePresence}
+                        nodePositions={collaborationNodePositions}
+                    />
+                </Suspense>
+            ) : null}
+
+            {isLayouting ? (
+                <Suspense fallback={null}>
+                    <LazyFlowEditorLayoutOverlay message={layoutMessage} />
+                </Suspense>
+            ) : null}
+
+            {toolbar.isVisible ? (
+                <Suspense fallback={null}>
+                    <LazyToolbar {...toolbarProps} />
+                </Suspense>
+            ) : (
+                <Suspense fallback={null}>
+                    <LazyPlaybackControls {...playbackProps} />
+                </Suspense>
+            )}
+
+            {emptyStateProps ? (
+                <Suspense fallback={null}>
+                    <LazyFlowEditorEmptyState {...emptyStateProps} />
+                </Suspense>
+            ) : null}
+        </>
+    );
+}
diff --git a/src/components/flow-editor/buildFlowEditorControllerParams.ts b/src/components/flow-editor/buildFlowEditorControllerParams.ts
new file mode 100644
index 0000000..2008c53
--- /dev/null
+++ b/src/components/flow-editor/buildFlowEditorControllerParams.ts
@@ -0,0 +1,134 @@
+import type { TFunction } from 'i18next';
+import type { FlowEdge, FlowNode, FlowSnapshot } from '@/lib/types';
+import type { FlowEditorMode, StudioCodeMode, StudioTab } from '@/hooks/useFlowEditorUIState';
+import type { DomainLibraryItem } from '@/services/domainLibrary';
+import type {
+    UseFlowEditorChromeParams,
+    UseFlowEditorPanelsParams,
+    UseFlowEditorShellParams,
+    UseFlowEditorStudioParams,
+} from './useFlowEditorController';
+import type { FlowEditorChromeProps } from './FlowEditorChrome';
+import type { LayoutAlgorithm } from '@/services/elkLayout';
+import type { Location, NavigateFunction } from 'react-router-dom';
+
+interface BuildFlowEditorControllerShellParams {
+    location: Location;
+    navigate: NavigateFunction;
+    tabs: Array<{ id: string; name: string }>;
+    activeTabId: string | null;
+    snapshots: FlowSnapshot[];
+    nodes: FlowNode[];
+    edges: FlowEdge[];
+    selectedNodeId: string | null;
+    selectedEdgeId: string | null;
+    isCommandBarOpen: boolean;
+    isHistoryOpen: boolean;
+    editorMode: FlowEditorMode;
+    handleExportJSON: () => void;
+    onLayout: (
+        direction?: 'TB' | 'LR' | 'RL' | 'BT',
+        algorithm?: LayoutAlgorithm,
+        spacing?: 'compact' | 'normal' | 'loose'
+    ) => Promise<void>;
+}
+
+interface BuildFlowEditorControllerStudioParams {
+    editorMode: FlowEditorMode;
+    studioTab: StudioTab;
+    selectedNodeId: string | null;
+    selectedEdgeId: string | null;
+    setStudioTab: (tab: StudioTab) => void;
+    setStudioCodeMode: (mode: StudioCodeMode) => void;
+    setStudioMode: () => void;
+    closeCommandBar: () => void;
+    setCanvasMode: () => void;
+    setSelectedNodeId: (id: string | null) => void;
+    setSelectedEdgeId: (id: string | null) => void;
+}
+
+type BuildFlowEditorControllerPanelsParams = UseFlowEditorPanelsParams;
+
+interface BuildFlowEditorControllerChromeParams {
+    handleSwitchTab: (tabId: string) => void;
+    handleAddTab: () => void;
+    handleCloseTab: (tabId: string) => void;
+    handleRenameTab: (tabId: string, newName: string) => void;
+    handleExport: (format?: 'png' | 'jpeg') => void;
+    handleCopyImage: (format?: 'png' | 'jpeg') => void;
+    handleSvgExport: () => void;
+    handleCopySvg: () => void;
+    handlePdfExport: () => void;
+    handleCinematicExport: (format: 'cinematic-video' | 'cinematic-gif') => void;
+    handleExportJSON: () => void;
+    handleCopyJSON: () => void;
+    handleExportMermaid: () => void;
+    handleDownloadMermaid: () => void;
+    handleExportPlantUML: () => void;
+    handleDownloadPlantUML: () => void;
+    handleExportOpenFlowDSL: () => void;
+    handleDownloadOpenFlowDSL: () => void;
+    handleExportFigma: () => void;
+    handleDownloadFigma: () => void;
+    handleShare: () => void;
+    handleImportJSON: () => void;
+    openHistory: () => void;
+    onGoHome: () => void;
+    collaborationTopNavState?: FlowEditorChromeProps['topNav']['collaboration'];
+    openCommandBar: (view: 'root' | 'search' | 'assets' | 'templates' | 'layout' | 'design-system') => void;
+    handleAddShape: (shapeType: string, position?: { x: number; y: number }) => void;
+    undo: () => void;
+    redo: () => void;
+    canUndo: boolean;
+    canRedo: boolean;
+    isSelectMode: boolean;
+    enableSelectMode: () => void;
+    enablePanMode: () => void;
+    getCenter: () => { x: number; y: number };
+    t: TFunction;
+    handleAddNode: (position?: { x: number; y: number }) => void;
+    setPendingAIPrompt: (prompt: string | undefined) => void;
+    startPlayback: () => void;
+    totalSteps: number;
+    isPlaying: boolean;
+    togglePlay: () => void;
+    nextStep: () => void;
+    prevStep: () => void;
+    stopPlayback: () => void;
+    handleAddAnnotation: () => void;
+    handleAddSection: () => void;
+    handleAddTextNode: () => void;
+    handleAddJourneyNode: () => void;
+    handleAddMindmapNode: () => void;
+    handleAddArchitectureNode: () => void;
+    handleAddSequenceParticipant: () => void;
+    handleAddClassNode: () => void;
+    handleAddEntityNode: () => void;
+    handleAddImage: (imageUrl: string) => void;
+    handleAddWireframe: (surface: 'browser' | 'mobile') => void;
+    handleAddDomainLibraryItem: (item: DomainLibraryItem) => void;
+}
+
+export function buildFlowEditorControllerShellParams(
+    params: BuildFlowEditorControllerShellParams
+): Omit<UseFlowEditorShellParams, 'fileInputRef'> {
+    return params;
+}
+
+export function buildFlowEditorControllerStudioParams(
+    params: BuildFlowEditorControllerStudioParams
+): UseFlowEditorStudioParams {
+    return params;
+}
+
+export function buildFlowEditorControllerPanelsParams(
+    params: BuildFlowEditorControllerPanelsParams
+): UseFlowEditorPanelsParams {
+    return params;
+}
+
+export function buildFlowEditorControllerChromeParams(
+    params: BuildFlowEditorControllerChromeParams
+): UseFlowEditorChromeParams {
+    return params;
+}
diff --git a/src/components/flow-editor/buildFlowEditorScreenControllerParams.ts b/src/components/flow-editor/buildFlowEditorScreenControllerParams.ts
new file mode 100644
index 0000000..ac44689
--- /dev/null
+++ b/src/components/flow-editor/buildFlowEditorScreenControllerParams.ts
@@ -0,0 +1,40 @@
+import type React from 'react';
+import {
+    buildFlowEditorControllerChromeParams,
+    buildFlowEditorControllerPanelsParams,
+    buildFlowEditorControllerShellParams,
+    buildFlowEditorControllerStudioParams,
+} from './buildFlowEditorControllerParams';
+import type { UseFlowEditorControllerParams } from './useFlowEditorController';
+
+type BuildShellParams = Parameters<typeof buildFlowEditorControllerShellParams>[0] & {
+    fileInputRef: React.RefObject<HTMLInputElement | null>;
+};
+
+type BuildStudioParams = Parameters<typeof buildFlowEditorControllerStudioParams>[0];
+type BuildPanelsParams = Parameters<typeof buildFlowEditorControllerPanelsParams>[0];
+type BuildChromeParams = Parameters<typeof buildFlowEditorControllerChromeParams>[0];
+
+interface BuildFlowEditorScreenControllerParamsInput {
+    shell: BuildShellParams;
+    studio: BuildStudioParams;
+    panels: BuildPanelsParams;
+    chrome: BuildChromeParams;
+}
+
+export function buildFlowEditorScreenControllerParams({
+    shell,
+    studio,
+    panels,
+    chrome,
+}: BuildFlowEditorScreenControllerParamsInput): UseFlowEditorControllerParams {
+    return {
+        shell: {
+            ...buildFlowEditorControllerShellParams(shell),
+            fileInputRef: shell.fileInputRef,
+        },
+        studio: buildFlowEditorControllerStudioParams(studio),
+        panels: buildFlowEditorControllerPanelsParams(panels),
+        chrome: buildFlowEditorControllerChromeParams(chrome),
+    };
+}
diff --git a/src/components/flow-editor/flowEditorChromeProps.ts b/src/components/flow-editor/flowEditorChromeProps.ts
new file mode 100644
index 0000000..8c599c6
--- /dev/null
+++ b/src/components/flow-editor/flowEditorChromeProps.ts
@@ -0,0 +1,385 @@
+import { useMemo } from 'react';
+import type { TFunction } from 'i18next';
+import type { FlowNode } from '@/lib/types';
+import type { FlowEditorChromeProps } from './FlowEditorChrome';
+
+interface BuildTopNavParams {
+    handleSwitchTab: (tabId: string) => void;
+    handleAddTab: () => void;
+    handleCloseTab: (tabId: string) => void;
+    handleRenameTab: (tabId: string, newName: string) => void;
+    handleExport: (format?: 'png' | 'jpeg') => void;
+    handleCopyImage: (format?: 'png' | 'jpeg') => void;
+    handleSvgExport: () => void;
+    handleCopySvg: () => void;
+    handlePdfExport: () => void;
+    handleCinematicExport: (format: 'cinematic-video' | 'cinematic-gif') => void;
+    handleExportJSON: () => void;
+    handleCopyJSON: () => void;
+    handleExportMermaid: () => void;
+    handleDownloadMermaid: () => void;
+    handleExportPlantUML: () => void;
+    handleDownloadPlantUML: () => void;
+    handleExportOpenFlowDSL: () => void;
+    handleDownloadOpenFlowDSL: () => void;
+    handleExportFigma: () => void;
+    handleDownloadFigma: () => void;
+    handleShare: () => void;
+    handleImportJSON: () => void;
+    openHistory: () => void;
+    onGoHome: () => void;
+    startPlayback: () => void;
+    collaborationTopNavState?: FlowEditorChromeProps['topNav']['collaboration'];
+}
+
+interface BuildToolbarParams {
+    currentStepIndex: number;
+    openCommandBar: (view: 'root' | 'search' | 'assets' | 'templates' | 'layout' | 'design-system') => void;
+    toggleStudioPanel: () => void;
+    editorMode: 'canvas' | 'studio';
+    handleAddShape: FlowEditorChromeProps['toolbar']['onAddShape'];
+    undo: () => void;
+    redo: () => void;
+    handleLayoutWithContext: () => void;
+    canUndo: boolean;
+    canRedo: boolean;
+    isSelectMode: boolean;
+    enableSelectMode: () => void;
+    isCommandBarOpen: boolean;
+    enablePanMode: () => void;
+    getCenter: () => { x: number; y: number };
+}
+
+interface BuildPlaybackParams {
+    currentStepIndex: number;
+    totalSteps: number;
+    isPlaying: boolean;
+    togglePlay: () => void;
+    nextStep: () => void;
+    prevStep: () => void;
+    stopPlayback: () => void;
+}
+
+interface BuildEmptyStateParams {
+    nodes: FlowNode[];
+    t: TFunction;
+    openStudioPanel: (tab: 'ai' | 'code' | 'playback') => void;
+    openCommandBar: (view: 'root' | 'search' | 'assets' | 'templates' | 'layout' | 'design-system') => void;
+    handleAddNode: (position?: { x: number; y: number }) => void;
+    setPendingAIPrompt: (prompt: string) => void;
+}
+
+export function buildFlowEditorTopNavProps({
+    handleSwitchTab,
+    handleAddTab,
+    handleCloseTab,
+    handleRenameTab,
+    handleExport,
+    handleCopyImage,
+    handleSvgExport,
+    handleCopySvg,
+    handlePdfExport,
+    handleCinematicExport,
+    handleExportJSON,
+    handleCopyJSON,
+    handleExportMermaid,
+    handleDownloadMermaid,
+    handleExportPlantUML,
+    handleDownloadPlantUML,
+    handleExportOpenFlowDSL,
+    handleDownloadOpenFlowDSL,
+    handleExportFigma,
+    handleDownloadFigma,
+    handleShare,
+    handleImportJSON,
+    openHistory,
+    onGoHome,
+    startPlayback,
+    collaborationTopNavState,
+}: BuildTopNavParams): FlowEditorChromeProps['topNav'] {
+    return {
+        onSwitchTab: handleSwitchTab,
+        onAddTab: handleAddTab,
+        onCloseTab: handleCloseTab,
+        onRenameTab: handleRenameTab,
+        onExportPNG: handleExport,
+        onCopyImage: handleCopyImage,
+        onExportSVG: handleSvgExport,
+        onCopySVG: handleCopySvg,
+        onExportPDF: handlePdfExport,
+        onExportCinematic: handleCinematicExport,
+        onExportJSON: handleExportJSON,
+        onCopyJSON: handleCopyJSON,
+        onExportMermaid: handleExportMermaid,
+        onDownloadMermaid: handleDownloadMermaid,
+        onExportPlantUML: handleExportPlantUML,
+        onDownloadPlantUML: handleDownloadPlantUML,
+        onExportOpenFlowDSL: handleExportOpenFlowDSL,
+        onDownloadOpenFlowDSL: handleDownloadOpenFlowDSL,
+        onExportFigma: handleExportFigma,
+        onDownloadFigma: handleDownloadFigma,
+        onShare: handleShare,
+        onImportJSON: handleImportJSON,
+        onHistory: openHistory,
+        onGoHome,
+        onPlay: startPlayback,
+        collaboration: collaborationTopNavState,
+    };
+}
+
+export function buildFlowEditorToolbarProps({
+    currentStepIndex,
+    openCommandBar,
+    toggleStudioPanel,
+    editorMode,
+    handleAddShape,
+    undo,
+    redo,
+    handleLayoutWithContext,
+    canUndo,
+    canRedo,
+    isSelectMode,
+    enableSelectMode,
+    isCommandBarOpen,
+    enablePanMode,
+    getCenter,
+}: BuildToolbarParams): FlowEditorChromeProps['toolbar'] {
+    return {
+        isVisible: currentStepIndex === -1,
+        onCommandBar: () => openCommandBar('root'),
+        onToggleStudio: toggleStudioPanel,
+        isStudioOpen: editorMode === 'studio',
+        onOpenAssets: () => openCommandBar('assets'),
+        onAddShape: handleAddShape,
+        onUndo: undo,
+        onRedo: redo,
+        onLayout: handleLayoutWithContext,
+        canUndo,
+        canRedo,
+        isSelectMode,
+        onToggleSelectMode: enableSelectMode,
+        isCommandBarOpen,
+        onTogglePanMode: enablePanMode,
+        getCenter,
+    };
+}
+
+export function buildFlowEditorPlaybackProps({
+    currentStepIndex,
+    totalSteps,
+    isPlaying,
+    togglePlay,
+    nextStep,
+    prevStep,
+    stopPlayback,
+}: BuildPlaybackParams): FlowEditorChromeProps['playback'] {
+    return {
+        currentStepIndex,
+        totalSteps,
+        isPlaying,
+        onPlayPause: togglePlay,
+        onNext: nextStep,
+        onPrev: prevStep,
+        onStop: stopPlayback,
+    };
+}
+
+export function buildFlowEditorEmptyStateProps({
+    nodes,
+    t,
+    openStudioPanel,
+    openCommandBar,
+    handleAddNode,
+    setPendingAIPrompt,
+}: BuildEmptyStateParams): FlowEditorChromeProps['emptyState'] | undefined {
+    if (nodes.length > 0) {
+        return undefined;
+    }
+
+    return {
+        title: t('flowEditor.emptyState.title', { defaultValue: 'Start your diagram' }),
+        description: t('flowEditor.emptyState.description', { defaultValue: 'Choose the fastest way to get a first draft on the canvas, then refine it with layout, properties, and Studio tools.' }),
+        generateLabel: t('flowEditor.emptyState.generateWithFlowpilot', { defaultValue: 'Generate with Flowpilot' }),
+        templatesLabel: t('flowEditor.emptyState.browseTemplates', { defaultValue: 'Browse templates' }),
+        addNodeLabel: t('flowEditor.emptyState.addBlankNode', { defaultValue: 'Start from a blank node' }),
+        onGenerate: () => openStudioPanel('ai'),
+        onTemplates: () => openCommandBar('templates'),
+        onAddNode: () => handleAddNode(),
+        onSuggestionClick: (prompt) => {
+            setPendingAIPrompt(prompt);
+            openStudioPanel('ai');
+        },
+    };
+}
+
+interface UseFlowEditorChromePropsParams extends BuildTopNavParams, BuildToolbarParams, BuildPlaybackParams, BuildEmptyStateParams {}
+
+export function useFlowEditorChromeProps(params: UseFlowEditorChromePropsParams): Pick<FlowEditorChromeProps, 'topNav' | 'toolbar' | 'playback' | 'emptyState'> {
+    const {
+        handleSwitchTab,
+        handleAddTab,
+        handleCloseTab,
+        handleRenameTab,
+        handleExport,
+        handleCopyImage,
+        handleSvgExport,
+        handleCopySvg,
+        handlePdfExport,
+        handleCinematicExport,
+        handleExportJSON,
+        handleCopyJSON,
+        handleExportMermaid,
+        handleDownloadMermaid,
+        handleExportPlantUML,
+        handleDownloadPlantUML,
+        handleExportOpenFlowDSL,
+        handleDownloadOpenFlowDSL,
+        handleExportFigma,
+        handleDownloadFigma,
+        handleShare,
+        handleImportJSON,
+        openHistory,
+        onGoHome,
+        startPlayback,
+        collaborationTopNavState,
+        currentStepIndex,
+        toggleStudioPanel,
+        editorMode,
+        handleAddShape,
+        undo,
+        redo,
+        handleLayoutWithContext,
+        canUndo,
+        canRedo,
+        isSelectMode,
+        enableSelectMode,
+        isCommandBarOpen,
+        enablePanMode,
+        getCenter,
+        totalSteps,
+        isPlaying,
+        togglePlay,
+        nextStep,
+        prevStep,
+        stopPlayback,
+        nodes,
+        t,
+        openStudioPanel,
+        openCommandBar,
+        handleAddNode,
+        setPendingAIPrompt,
+    } = params;
+
+    const topNav = useMemo(() => buildFlowEditorTopNavProps({
+        handleSwitchTab,
+        handleAddTab,
+        handleCloseTab,
+        handleRenameTab,
+        handleExport,
+        handleCopyImage,
+        handleSvgExport,
+        handleCopySvg,
+        handlePdfExport,
+        handleCinematicExport,
+        handleExportJSON,
+        handleCopyJSON,
+        handleExportMermaid,
+        handleDownloadMermaid,
+        handleExportPlantUML,
+        handleDownloadPlantUML,
+        handleExportOpenFlowDSL,
+        handleDownloadOpenFlowDSL,
+        handleExportFigma,
+        handleDownloadFigma,
+        handleShare,
+        handleImportJSON,
+        openHistory,
+        onGoHome,
+        startPlayback,
+        collaborationTopNavState,
+    }), [
+        handleSwitchTab,
+        handleAddTab,
+        handleCloseTab,
+        handleRenameTab,
+        handleExport,
+        handleCopyImage,
+        handleSvgExport,
+        handleCopySvg,
+        handlePdfExport,
+        handleCinematicExport,
+        handleExportJSON,
+        handleCopyJSON,
+        handleExportMermaid,
+        handleDownloadMermaid,
+        handleExportPlantUML,
+        handleDownloadPlantUML,
+        handleExportOpenFlowDSL,
+        handleDownloadOpenFlowDSL,
+        handleExportFigma,
+        handleDownloadFigma,
+        handleShare,
+        handleImportJSON,
+        openHistory,
+        onGoHome,
+        startPlayback,
+        collaborationTopNavState,
+    ]);
+    const toolbar = useMemo(() => buildFlowEditorToolbarProps({
+        currentStepIndex,
+        openCommandBar,
+        toggleStudioPanel,
+        editorMode,
+        handleAddShape,
+        undo,
+        redo,
+        handleLayoutWithContext,
+        canUndo,
+        canRedo,
+        isSelectMode,
+        enableSelectMode,
+        isCommandBarOpen,
+        enablePanMode,
+        getCenter,
+    }), [
+        currentStepIndex,
+        openCommandBar,
+        toggleStudioPanel,
+        editorMode,
+        handleAddShape,
+        undo,
+        redo,
+        handleLayoutWithContext,
+        canUndo,
+        canRedo,
+        isSelectMode,
+        enableSelectMode,
+        isCommandBarOpen,
+        enablePanMode,
+        getCenter,
+    ]);
+    const playback = useMemo(() => buildFlowEditorPlaybackProps({
+        currentStepIndex,
+        totalSteps,
+        isPlaying,
+        togglePlay,
+        nextStep,
+        prevStep,
+        stopPlayback,
+    }), [currentStepIndex, totalSteps, isPlaying, togglePlay, nextStep, prevStep, stopPlayback]);
+    const emptyState = useMemo(() => buildFlowEditorEmptyStateProps({
+        nodes,
+        t,
+        openStudioPanel,
+        openCommandBar,
+        handleAddNode,
+        setPendingAIPrompt,
+    }), [nodes, t, openStudioPanel, openCommandBar, handleAddNode, setPendingAIPrompt]);
+
+    return {
+        topNav,
+        toolbar,
+        playback,
+        emptyState,
+    };
+}
diff --git a/src/components/flow-editor/infraDslApply.test.ts b/src/components/flow-editor/infraDslApply.test.ts
new file mode 100644
index 0000000..bbe507e
--- /dev/null
+++ b/src/components/flow-editor/infraDslApply.test.ts
@@ -0,0 +1,38 @@
+import { describe, expect, it, vi } from 'vitest';
+
+vi.mock('@/hooks/ai-generation/graphComposer', () => ({
+  parseDslOrThrow: vi.fn(),
+}));
+
+import { parseDslOrThrow } from '@/hooks/ai-generation/graphComposer';
+import { parseInfraDslApplyInput } from './infraDslApply';
+
+describe('parseInfraDslApplyInput', () => {
+  it('returns parsed nodes and edges on success', () => {
+    vi.mocked(parseDslOrThrow).mockReturnValue({
+      nodes: [{ id: 'node-1' }] as never,
+      edges: [{ id: 'edge-1' }] as never,
+    });
+
+    const result = parseInfraDslApplyInput('flow: Test');
+
+    expect(result).toEqual({
+      status: 'success',
+      nodes: [{ id: 'node-1' }],
+      edges: [{ id: 'edge-1' }],
+    });
+  });
+
+  it('returns a user-facing error on parse failure', () => {
+    vi.mocked(parseDslOrThrow).mockImplementation(() => {
+      throw new Error('Line 4: expected node definition');
+    });
+
+    const result = parseInfraDslApplyInput('invalid');
+
+    expect(result).toEqual({
+      status: 'error',
+      message: 'Line 4: expected node definition',
+    });
+  });
+});
diff --git a/src/components/flow-editor/infraDslApply.ts b/src/components/flow-editor/infraDslApply.ts
new file mode 100644
index 0000000..5c39599
--- /dev/null
+++ b/src/components/flow-editor/infraDslApply.ts
@@ -0,0 +1,32 @@
+import { parseDslOrThrow } from '@/hooks/ai-generation/graphComposer';
+import type { FlowEdge, FlowNode } from '@/lib/types';
+
+export type InfraDslApplyResult =
+    | {
+        status: 'success';
+        nodes: FlowNode[];
+        edges: FlowEdge[];
+    }
+    | {
+        status: 'error';
+        message: string;
+    };
+
+export function parseInfraDslApplyInput(dsl: string): InfraDslApplyResult {
+    try {
+        const { nodes, edges } = parseDslOrThrow(dsl);
+        return {
+            status: 'success',
+            nodes,
+            edges,
+        };
+    } catch (error) {
+        const message = error instanceof Error && error.message.trim().length > 0
+            ? error.message
+            : 'The generated infrastructure DSL could not be parsed.';
+        return {
+            status: 'error',
+            message,
+        };
+    }
+}
diff --git a/src/components/flow-editor/panelProps.test.ts b/src/components/flow-editor/panelProps.test.ts
index f571193..d70bd3e 100644
--- a/src/components/flow-editor/panelProps.test.ts
+++ b/src/components/flow-editor/panelProps.test.ts
@@ -1,6 +1,8 @@
 import { describe, expect, it, vi } from 'vitest';
 import type { FlowEdge, FlowNode, FlowSnapshot } from '@/lib/types';
-import { buildFlowEditorPanelsProps } from './panelProps';
+import {
+  buildFlowEditorPanelsProps,
+} from './panelProps';
 
 function createNode(id: string): FlowNode {
   return {
@@ -34,7 +36,7 @@ describe('buildFlowEditorPanelsProps', () => {
     const openStudioCode = vi.fn();
     const clearSelection = vi.fn();
 
-    const result = buildFlowEditorPanelsProps({
+    const commandBar = {
       isCommandBarOpen: true,
       closeCommandBar: vi.fn(),
       nodes,
@@ -46,13 +48,16 @@ describe('buildFlowEditorPanelsProps', () => {
       openStudioAI: vi.fn(),
       openStudioCode,
       openStudioPlayback: vi.fn(),
-      commandBarView: 'assets',
+      commandBarView: 'assets' as const,
       handleAddAnnotation: vi.fn(),
       handleAddSection: vi.fn(),
       handleAddTextNode: vi.fn(),
       handleAddJourneyNode: vi.fn(),
       handleAddMindmapNode: vi.fn(),
       handleAddArchitectureNode: vi.fn(),
+      handleAddSequenceParticipant: vi.fn(),
+      handleAddClassNode: vi.fn(),
+      handleAddEntityNode: vi.fn(),
       handleAddImage: vi.fn(),
       handleAddWireframe: vi.fn(),
       handleAddDomainLibraryItem: vi.fn(),
@@ -60,6 +65,8 @@ describe('buildFlowEditorPanelsProps', () => {
       toggleGrid: vi.fn(),
       snapToGrid: false,
       toggleSnap: vi.fn(),
+    };
+    const snapshotsPanel = {
       isHistoryOpen: true,
       closeHistory: vi.fn(),
       snapshots,
@@ -68,6 +75,10 @@ describe('buildFlowEditorPanelsProps', () => {
       saveSnapshot,
       handleRestoreSnapshot: vi.fn(),
       deleteSnapshot: vi.fn(),
+      nodes,
+      edges,
+    };
+    const properties = {
       selectedNode: nodes[0],
       selectedNodes: nodes,
       selectedEdge: edges[0],
@@ -83,16 +94,43 @@ describe('buildFlowEditorPanelsProps', () => {
       handleAddMindmapSibling: vi.fn(),
       handleAddArchitectureService: vi.fn(),
       handleCreateArchitectureBoundary: vi.fn(),
+      handleApplyArchitectureTemplate: vi.fn(),
+      handleGenerateEntityFields: vi.fn(),
+      handleSuggestArchitectureNode: vi.fn(),
+      handleConvertEntitySelectionToClassDiagram: vi.fn(),
+      handleOpenMermaidCodeEditor: vi.fn(),
       clearSelection,
+    };
+    const studio = {
       closeStudioPanel: vi.fn(),
       handleCommandBarApply: vi.fn(),
-      handleAIRequest: vi.fn(async () => undefined),
+      handleAIRequest: vi.fn(async () => true),
+      handleCodeAnalysis: vi.fn(async () => true),
+      handleSqlAnalysis: vi.fn(async () => true),
+      handleTerraformAnalysis: vi.fn(async () => true),
+      handleOpenApiAnalysis: vi.fn(async () => true),
+      setCanvasMode: vi.fn(),
       isGenerating: false,
+      streamingText: null,
+      retryCount: 0,
+      cancelGeneration: vi.fn(),
+      pendingDiff: null,
+      confirmPendingDiff: vi.fn(),
+      discardPendingDiff: vi.fn(),
+      aiReadiness: {
+        canGenerate: true,
+        blockingIssue: null,
+        advisory: null,
+      },
+      lastAIError: null,
+      onClearAIError: vi.fn(),
       chatMessages: [],
       clearChat: vi.fn(),
-      studioTab: 'ai',
+      selectedNode: nodes[0],
+      selectedNodeCount: nodes.length,
+      studioTab: 'ai' as const,
       setStudioTab: vi.fn(),
-      studioCodeMode: 'openflow',
+      studioCodeMode: 'openflow' as const,
       setStudioCodeMode: vi.fn(),
       playback: {
         currentStepIndex: -1,
@@ -107,6 +145,14 @@ describe('buildFlowEditorPanelsProps', () => {
         playbackSpeed: 2000,
         onPlaybackSpeedChange: vi.fn(),
       },
+    };
+
+    const result = buildFlowEditorPanelsProps({
+      commandBar,
+      snapshots: snapshotsPanel,
+      properties,
+      studio,
+      isHistoryOpen: true,
       editorMode: 'studio',
     });
 
@@ -115,7 +161,7 @@ describe('buildFlowEditorPanelsProps', () => {
     expect(result.properties.selectedNode?.id).toBe('n1');
     expect(result.studio.activeTab).toBe('ai');
 
-    result.commandBar.onOpenStudioFlowMind();
+    result.commandBar.onOpenStudioOpenFlow();
     expect(openStudioCode).toHaveBeenCalledWith('openflow');
 
     result.snapshots.onSaveSnapshot('Snapshot 1');
diff --git a/src/components/flow-editor/panelProps.ts b/src/components/flow-editor/panelProps.ts
index 1c299dd..c37b8bc 100644
--- a/src/components/flow-editor/panelProps.ts
+++ b/src/components/flow-editor/panelProps.ts
@@ -5,8 +5,11 @@ import type { LayoutAlgorithm } from '@/services/elkLayout';
 import type { FlowTemplate } from '@/services/templates';
 import type { DomainLibraryItem } from '@/services/domainLibrary';
 import type { ChatMessage } from '@/services/aiService';
+import type { SupportedLanguage } from '@/hooks/ai-generation/codeToArchitecture';
+import type { TerraformInputFormat } from '@/hooks/ai-generation/terraformToCloud';
+import type { AIReadinessState } from '@/hooks/ai-generation/readiness';
 
-interface BuildFlowEditorPanelsPropsParams {
+export interface CommandBarPanelBuilderParams {
     isCommandBarOpen: boolean;
     closeCommandBar: () => void;
     nodes: FlowNode[];
@@ -29,13 +32,23 @@ interface BuildFlowEditorPanelsPropsParams {
     handleAddJourneyNode: () => void;
     handleAddMindmapNode: () => void;
     handleAddArchitectureNode: () => void;
+    handleAddSequenceParticipant: () => void;
+    handleAddClassNode: () => void;
+    handleAddEntityNode: () => void;
     handleAddImage: (imageUrl: string) => void;
     handleAddWireframe: (surface: 'browser' | 'mobile') => void;
     handleAddDomainLibraryItem: (item: DomainLibraryItem) => void;
+    handleCodeAnalysis?: (code: string, language: SupportedLanguage) => Promise<boolean>;
+    handleSqlAnalysis?: (sql: string) => Promise<boolean>;
+    handleTerraformAnalysis?: (input: string, format: TerraformInputFormat) => Promise<boolean>;
+    handleOpenApiAnalysis?: (spec: string) => Promise<boolean>;
     showGrid: boolean;
     toggleGrid: () => void;
     snapToGrid: boolean;
     toggleSnap: () => void;
+}
+
+export interface SnapshotsPanelBuilderParams {
     isHistoryOpen: boolean;
     closeHistory: () => void;
     snapshots: FlowSnapshot[];
@@ -44,6 +57,12 @@ interface BuildFlowEditorPanelsPropsParams {
     saveSnapshot: (name: string, nodes: FlowNode[], edges: FlowEdge[]) => void;
     handleRestoreSnapshot: (snapshot: FlowSnapshot) => void;
     deleteSnapshot: (id: string) => void;
+    handleCompareSnapshot?: (snapshot: FlowSnapshot) => void;
+    nodes: FlowNode[];
+    edges: FlowEdge[];
+}
+
+export interface PropertiesRailBuilderParams {
     selectedNode: FlowNode | null;
     selectedNodes: FlowNode[];
     selectedEdge: FlowEdge | null;
@@ -59,22 +78,64 @@ interface BuildFlowEditorPanelsPropsParams {
     handleAddMindmapSibling: FlowEditorPanelsProps['properties']['onAddMindmapSibling'];
     handleAddArchitectureService: FlowEditorPanelsProps['properties']['onAddArchitectureService'];
     handleCreateArchitectureBoundary: FlowEditorPanelsProps['properties']['onCreateArchitectureBoundary'];
+    handleApplyArchitectureTemplate: FlowEditorPanelsProps['properties']['onApplyArchitectureTemplate'];
+    handleGenerateEntityFields: FlowEditorPanelsProps['properties']['onGenerateEntityFields'];
+    handleSuggestArchitectureNode: FlowEditorPanelsProps['properties']['onSuggestArchitectureNode'];
+    handleConvertEntitySelectionToClassDiagram: FlowEditorPanelsProps['properties']['onConvertEntitySelectionToClassDiagram'];
+    handleOpenMermaidCodeEditor: FlowEditorPanelsProps['properties']['onOpenMermaidCodeEditor'];
     clearSelection: () => void;
+}
+
+export interface StudioRailBuilderParams {
     closeStudioPanel: () => void;
     handleCommandBarApply: (nodes: FlowNode[], edges: FlowEdge[]) => void;
-    handleAIRequest: (prompt: string, imageBase64?: string) => Promise<void>;
+    handleAIRequest: (prompt: string, imageBase64?: string) => Promise<boolean>;
     isGenerating: boolean;
+    streamingText: string | null;
+    retryCount: number;
+    cancelGeneration: () => void;
+    pendingDiff: import('@/hooks/useAIGeneration').ImportDiff | null;
+    confirmPendingDiff: () => void;
+    discardPendingDiff: () => void;
+    aiReadiness: AIReadinessState;
+    lastAIError: string | null;
+    onClearAIError: () => void;
     chatMessages: ChatMessage[];
     clearChat: () => void;
+    selectedNode: FlowNode | null;
+    selectedNodeCount: number;
+    setCanvasMode: () => void;
     studioTab: StudioTab;
     setStudioTab: (tab: StudioTab) => void;
     studioCodeMode: StudioCodeMode;
     setStudioCodeMode: (mode: StudioCodeMode) => void;
     playback: FlowEditorPanelsProps['studio']['playback'];
+    initialPrompt?: string;
+    onInitialPromptConsumed?: () => void;
+}
+
+export interface BuildFlowEditorPanelsPropsParams {
+    commandBar: CommandBarPanelBuilderParams;
+    snapshots: SnapshotsPanelBuilderParams;
+    properties: PropertiesRailBuilderParams;
+    studio: StudioRailBuilderParams;
+    isHistoryOpen: boolean;
     editorMode: FlowEditorMode;
 }
 
-export function buildFlowEditorPanelsProps({
+function wrapAsyncCommand<TArgs extends unknown[]>(
+    handler?: (...args: TArgs) => Promise<boolean>
+): ((...args: TArgs) => Promise<void>) | undefined {
+    if (!handler) {
+        return undefined;
+    }
+
+    return async (...args: TArgs): Promise<void> => {
+        await handler(...args);
+    };
+}
+
+export function buildCommandBarPanelProps({
     isCommandBarOpen,
     closeCommandBar,
     nodes,
@@ -93,13 +154,60 @@ export function buildFlowEditorPanelsProps({
     handleAddJourneyNode,
     handleAddMindmapNode,
     handleAddArchitectureNode,
+    handleAddSequenceParticipant,
+    handleAddClassNode,
+    handleAddEntityNode,
     handleAddImage,
     handleAddWireframe,
     handleAddDomainLibraryItem,
+    handleCodeAnalysis,
+    handleSqlAnalysis,
+    handleTerraformAnalysis,
+    handleOpenApiAnalysis,
     showGrid,
     toggleGrid,
     snapToGrid,
     toggleSnap,
+}: CommandBarPanelBuilderParams): FlowEditorPanelsProps['commandBar'] {
+    return {
+        isOpen: isCommandBarOpen,
+        onClose: closeCommandBar,
+        nodes,
+        edges,
+        onUndo: undo,
+        onRedo: redo,
+        onLayout,
+        onSelectTemplate: handleInsertTemplate,
+        onOpenStudioAI: openStudioAI,
+        onOpenStudioOpenFlow: () => openStudioCode('openflow'),
+        onOpenStudioMermaid: () => openStudioCode('mermaid'),
+        onOpenStudioPlayback: openStudioPlayback,
+        initialView: commandBarView,
+        onAddAnnotation: handleAddAnnotation,
+        onAddSection: handleAddSection,
+        onAddText: handleAddTextNode,
+        onAddJourney: handleAddJourneyNode,
+        onAddMindmap: handleAddMindmapNode,
+        onAddArchitecture: handleAddArchitectureNode,
+        onAddSequence: handleAddSequenceParticipant,
+        onAddClassNode: handleAddClassNode,
+        onAddEntityNode: handleAddEntityNode,
+        onAddImage: handleAddImage,
+        onAddBrowserWireframe: () => handleAddWireframe('browser'),
+        onAddMobileWireframe: () => handleAddWireframe('mobile'),
+        onAddDomainLibraryItem: handleAddDomainLibraryItem,
+        onCodeAnalysis: wrapAsyncCommand(handleCodeAnalysis),
+        onSqlAnalysis: wrapAsyncCommand(handleSqlAnalysis),
+        onTerraformAnalysis: wrapAsyncCommand(handleTerraformAnalysis),
+        onOpenApiAnalysis: wrapAsyncCommand(handleOpenApiAnalysis),
+        showGrid,
+        onToggleGrid: toggleGrid,
+        snapToGrid,
+        onToggleSnap: toggleSnap,
+    };
+}
+
+export function buildSnapshotsPanelProps({
     isHistoryOpen,
     closeHistory,
     snapshots,
@@ -108,6 +216,24 @@ export function buildFlowEditorPanelsProps({
     saveSnapshot,
     handleRestoreSnapshot,
     deleteSnapshot,
+    handleCompareSnapshot,
+    nodes,
+    edges,
+}: SnapshotsPanelBuilderParams): FlowEditorPanelsProps['snapshots'] {
+    return {
+        isOpen: isHistoryOpen,
+        onClose: closeHistory,
+        snapshots,
+        manualSnapshots,
+        autoSnapshots,
+        onSaveSnapshot: (name) => saveSnapshot(name, nodes, edges),
+        onRestoreSnapshot: handleRestoreSnapshot,
+        onDeleteSnapshot: deleteSnapshot,
+        onCompareSnapshot: handleCompareSnapshot,
+    };
+}
+
+export function buildPropertiesRailProps({
     selectedNode,
     selectedNodes,
     selectedEdge,
@@ -123,91 +249,107 @@ export function buildFlowEditorPanelsProps({
     handleAddMindmapSibling,
     handleAddArchitectureService,
     handleCreateArchitectureBoundary,
+    handleApplyArchitectureTemplate,
+    handleGenerateEntityFields,
+    handleSuggestArchitectureNode,
+    handleConvertEntitySelectionToClassDiagram,
+    handleOpenMermaidCodeEditor,
     clearSelection,
+}: PropertiesRailBuilderParams): FlowEditorPanelsProps['properties'] {
+    return {
+        selectedNode,
+        selectedNodes,
+        selectedEdge,
+        onChangeNode: updateNodeData,
+        onBulkChangeNodes: applyBulkNodeData,
+        onChangeNodeType: updateNodeType,
+        onChangeEdge: updateEdge,
+        onDeleteNode: deleteNode,
+        onDuplicateNode: duplicateNode,
+        onDeleteEdge: deleteEdge,
+        onUpdateZIndex: updateNodeZIndex,
+        onAddMindmapChild: handleAddMindmapChild,
+        onAddMindmapSibling: handleAddMindmapSibling,
+        onAddArchitectureService: handleAddArchitectureService,
+        onCreateArchitectureBoundary: handleCreateArchitectureBoundary,
+        onApplyArchitectureTemplate: handleApplyArchitectureTemplate,
+        onGenerateEntityFields: handleGenerateEntityFields,
+        onSuggestArchitectureNode: handleSuggestArchitectureNode,
+        onConvertEntitySelectionToClassDiagram: handleConvertEntitySelectionToClassDiagram,
+        onOpenMermaidCodeEditor: handleOpenMermaidCodeEditor,
+        onClose: clearSelection,
+    };
+}
+
+export function buildStudioRailProps({
     closeStudioPanel,
     handleCommandBarApply,
     handleAIRequest,
     isGenerating,
+    streamingText,
+    retryCount,
+    cancelGeneration,
+    pendingDiff,
+    confirmPendingDiff,
+    discardPendingDiff,
+    aiReadiness,
+    lastAIError,
+    onClearAIError,
     chatMessages,
     clearChat,
+    selectedNode,
+    selectedNodeCount,
+    setCanvasMode,
     studioTab,
     setStudioTab,
     studioCodeMode,
     setStudioCodeMode,
     playback,
+    initialPrompt,
+    onInitialPromptConsumed,
+}: StudioRailBuilderParams): FlowEditorPanelsProps['studio'] {
+    return {
+        onClose: closeStudioPanel,
+        onApply: handleCommandBarApply,
+        onAIGenerate: handleAIRequest,
+        isGenerating,
+        streamingText,
+        retryCount,
+        cancelGeneration,
+        pendingDiff,
+        onConfirmDiff: confirmPendingDiff,
+        onDiscardDiff: discardPendingDiff,
+        aiReadiness,
+        lastAIError,
+        onClearAIError,
+        chatMessages,
+        onClearChat: clearChat,
+        selectedNode,
+        selectedNodeCount,
+        onViewProperties: setCanvasMode,
+        activeTab: studioTab,
+        onTabChange: setStudioTab,
+        codeMode: studioCodeMode,
+        onCodeModeChange: setStudioCodeMode,
+        playback,
+        initialPrompt,
+        onInitialPromptConsumed,
+    };
+}
+
+export function buildFlowEditorPanelsProps({
+    commandBar,
+    snapshots,
+    properties,
+    studio,
+    isHistoryOpen,
     editorMode,
 }: BuildFlowEditorPanelsPropsParams): FlowEditorPanelsProps {
     return {
-        commandBar: {
-            isOpen: isCommandBarOpen,
-            onClose: closeCommandBar,
-            nodes,
-            edges,
-            onUndo: undo,
-            onRedo: redo,
-            onLayout,
-            onSelectTemplate: handleInsertTemplate,
-            onOpenStudioAI: openStudioAI,
-            onOpenStudioFlowMind: () => openStudioCode('openflow'),
-            onOpenStudioMermaid: () => openStudioCode('mermaid'),
-            onOpenStudioPlayback: openStudioPlayback,
-            initialView: commandBarView,
-            onAddAnnotation: handleAddAnnotation,
-            onAddSection: handleAddSection,
-            onAddText: handleAddTextNode,
-            onAddJourney: handleAddJourneyNode,
-            onAddMindmap: handleAddMindmapNode,
-            onAddArchitecture: handleAddArchitectureNode,
-            onAddImage: handleAddImage,
-            onAddBrowserWireframe: () => handleAddWireframe('browser'),
-            onAddMobileWireframe: () => handleAddWireframe('mobile'),
-            onAddDomainLibraryItem: handleAddDomainLibraryItem,
-            showGrid,
-            onToggleGrid: toggleGrid,
-            snapToGrid,
-            onToggleSnap: toggleSnap,
-        },
-        snapshots: {
-            isOpen: isHistoryOpen,
-            onClose: closeHistory,
-            snapshots,
-            manualSnapshots,
-            autoSnapshots,
-            onSaveSnapshot: (name) => saveSnapshot(name, nodes, edges),
-            onRestoreSnapshot: handleRestoreSnapshot,
-            onDeleteSnapshot: deleteSnapshot,
-        },
-        properties: {
-            selectedNode,
-            selectedNodes,
-            selectedEdge,
-            onChangeNode: updateNodeData,
-            onBulkChangeNodes: applyBulkNodeData,
-            onChangeNodeType: updateNodeType,
-            onChangeEdge: updateEdge,
-            onDeleteNode: deleteNode,
-            onDuplicateNode: duplicateNode,
-            onDeleteEdge: deleteEdge,
-            onUpdateZIndex: updateNodeZIndex,
-            onAddMindmapChild: handleAddMindmapChild,
-            onAddMindmapSibling: handleAddMindmapSibling,
-            onAddArchitectureService: handleAddArchitectureService,
-            onCreateArchitectureBoundary: handleCreateArchitectureBoundary,
-            onClose: clearSelection,
-        },
-        studio: {
-            onClose: closeStudioPanel,
-            onApply: handleCommandBarApply,
-            onAIGenerate: handleAIRequest,
-            isGenerating,
-            chatMessages,
-            onClearChat: clearChat,
-            activeTab: studioTab,
-            onTabChange: setStudioTab,
-            codeMode: studioCodeMode,
-            onCodeModeChange: setStudioCodeMode,
-            playback,
-        },
+        commandBar: buildCommandBarPanelProps(commandBar),
+        snapshots: buildSnapshotsPanelProps(snapshots),
+        properties: buildPropertiesRailProps(properties),
+        studio: buildStudioRailProps(studio),
         isHistoryOpen,
         editorMode,
     };
diff --git a/src/components/flow-editor/shouldExitStudioOnSelection.test.ts b/src/components/flow-editor/shouldExitStudioOnSelection.test.ts
index dd0431c..183244d 100644
--- a/src/components/flow-editor/shouldExitStudioOnSelection.test.ts
+++ b/src/components/flow-editor/shouldExitStudioOnSelection.test.ts
@@ -2,93 +2,39 @@ import { describe, expect, it } from 'vitest';
 import { shouldExitStudioOnSelection } from './shouldExitStudioOnSelection';
 
 describe('shouldExitStudioOnSelection', () => {
-    it('returns false when studio is not open', () => {
-        expect(
-            shouldExitStudioOnSelection({
-                editorMode: 'canvas',
-                studioTab: 'ai',
-                studioSelectionSnapshot: {
-                    selectedNodeId: null,
-                    selectedEdgeId: null,
-                },
-                selectedNodeId: 'node-1',
-                selectedEdgeId: null,
-            })
-        ).toBe(false);
-    });
-
-    it('returns false when the selection matches the snapshot Studio opened with', () => {
+    it('always returns false — node/edge clicks never auto-exit studio', () => {
         expect(
             shouldExitStudioOnSelection({
                 editorMode: 'studio',
                 studioTab: 'ai',
-                studioSelectionSnapshot: {
-                    selectedNodeId: 'node-1',
-                    selectedEdgeId: null,
-                },
+                studioSelectionSnapshot: { selectedNodeId: null, selectedEdgeId: null },
                 selectedNodeId: 'node-1',
                 selectedEdgeId: null,
             })
         ).toBe(false);
     });
 
-    it('returns true when a node selection changes while studio is open', () => {
+    it('returns false when studio is not open', () => {
         expect(
             shouldExitStudioOnSelection({
-                editorMode: 'studio',
+                editorMode: 'canvas',
                 studioTab: 'ai',
-                studioSelectionSnapshot: {
-                    selectedNodeId: null,
-                    selectedEdgeId: null,
-                },
+                studioSelectionSnapshot: { selectedNodeId: null, selectedEdgeId: null },
                 selectedNodeId: 'node-1',
                 selectedEdgeId: null,
             })
-        ).toBe(true);
+        ).toBe(false);
     });
 
-    it('returns true when an edge is selected while studio is open', () => {
+    it('returns false even when an edge is selected while studio is open', () => {
         expect(
             shouldExitStudioOnSelection({
                 editorMode: 'studio',
-                studioTab: 'ai',
-                studioSelectionSnapshot: {
-                    selectedNodeId: null,
-                    selectedEdgeId: null,
-                },
+                studioTab: 'code',
+                studioSelectionSnapshot: { selectedNodeId: null, selectedEdgeId: null },
                 selectedNodeId: null,
                 selectedEdgeId: 'edge-1',
             })
-        ).toBe(true);
-    });
-
-    it('returns false when nothing is selected while studio is open', () => {
-        expect(
-            shouldExitStudioOnSelection({
-                editorMode: 'studio',
-                studioTab: 'ai',
-                studioSelectionSnapshot: {
-                    selectedNodeId: null,
-                    selectedEdgeId: null,
-                },
-                selectedNodeId: null,
-                selectedEdgeId: null,
-            })
-        ).toBe(false);
-    });
-
-    it('returns false for playback studio even when selection changes', () => {
-        expect(
-            shouldExitStudioOnSelection({
-                editorMode: 'studio',
-                studioTab: 'playback',
-                studioSelectionSnapshot: {
-                    selectedNodeId: null,
-                    selectedEdgeId: null,
-                },
-                selectedNodeId: 'node-1',
-                selectedEdgeId: null,
-            })
         ).toBe(false);
     });
 });
diff --git a/src/components/flow-editor/shouldExitStudioOnSelection.ts b/src/components/flow-editor/shouldExitStudioOnSelection.ts
index 3421193..66f7b31 100644
--- a/src/components/flow-editor/shouldExitStudioOnSelection.ts
+++ b/src/components/flow-editor/shouldExitStudioOnSelection.ts
@@ -11,41 +11,10 @@ interface ShouldExitStudioOnSelectionParams extends SelectionSnapshot {
     studioSelectionSnapshot: SelectionSnapshot | null;
 }
 
-function hasSelectionChanged(
-    studioSelectionSnapshot: SelectionSnapshot | null,
-    selectedNodeId: string | null,
-    selectedEdgeId: string | null
-): boolean {
-    if (!studioSelectionSnapshot) {
-        return false;
-    }
-
-    return (
-        studioSelectionSnapshot.selectedNodeId !== selectedNodeId ||
-        studioSelectionSnapshot.selectedEdgeId !== selectedEdgeId
-    );
-}
-
-export function shouldExitStudioOnSelection({
-    editorMode,
-    studioTab,
-    studioSelectionSnapshot,
-    selectedNodeId,
-    selectedEdgeId,
-}: ShouldExitStudioOnSelectionParams): boolean {
-    if (editorMode !== 'studio') {
-        return false;
-    }
-
-    if (studioTab === 'playback') {
-        return false;
-    }
-
-    if (!selectedNodeId && !selectedEdgeId) {
-        return false;
-    }
-
-    return hasSelectionChanged(studioSelectionSnapshot, selectedNodeId, selectedEdgeId);
+// Selecting a node/edge never auto-exits studio — the user stays in Studio
+// and can explicitly click "View Properties" to switch.
+export function shouldExitStudioOnSelection(_params: ShouldExitStudioOnSelectionParams): boolean {
+    return false;
 }
 
 export type { SelectionSnapshot };
diff --git a/src/components/flow-editor/useCollaborationNodePositions.ts b/src/components/flow-editor/useCollaborationNodePositions.ts
new file mode 100644
index 0000000..695d577
--- /dev/null
+++ b/src/components/flow-editor/useCollaborationNodePositions.ts
@@ -0,0 +1,33 @@
+import { useMemo } from 'react';
+import type { FlowNode } from '@/lib/types';
+
+export interface CollaborationNodePosition {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+
+export function useCollaborationNodePositions(
+    enabled: boolean,
+    nodes: FlowNode[],
+    remotePresenceCount: number
+): Map<string, CollaborationNodePosition> | undefined {
+    return useMemo(() => {
+        if (!enabled || remotePresenceCount === 0) {
+            return undefined;
+        }
+
+        const positions = new Map<string, CollaborationNodePosition>();
+        for (const node of nodes) {
+            positions.set(node.id, {
+                x: node.position.x,
+                y: node.position.y,
+                width: (node.measured?.width ?? node.width) ?? 150,
+                height: (node.measured?.height ?? node.height) ?? 40,
+            });
+        }
+
+        return positions;
+    }, [enabled, nodes, remotePresenceCount]);
+}
diff --git a/src/components/flow-editor/useFlowEditorController.ts b/src/components/flow-editor/useFlowEditorController.ts
new file mode 100644
index 0000000..5fd6955
--- /dev/null
+++ b/src/components/flow-editor/useFlowEditorController.ts
@@ -0,0 +1,337 @@
+import { useCallback, useEffect } from 'react';
+import { shouldOpenFlowEditorAI, shouldOpenFlowEditorTemplates } from '@/app/routeState';
+import type { FlowEdge, FlowNode, FlowSnapshot } from '@/lib/types';
+import type { FlowEditorMode, StudioCodeMode, StudioTab } from '@/hooks/useFlowEditorUIState';
+import type { DomainLibraryItem } from '@/services/domainLibrary';
+import type { LayoutAlgorithm } from '@/services/elkLayout';
+import type { Location, NavigateFunction } from 'react-router-dom';
+import type { TFunction } from 'i18next';
+import type { FlowEditorChromeProps } from './FlowEditorChrome';
+import type {
+    BuildFlowEditorPanelsPropsParams,
+    CommandBarPanelBuilderParams,
+    PropertiesRailBuilderParams,
+    SnapshotsPanelBuilderParams,
+    StudioRailBuilderParams,
+} from './panelProps';
+import { useFlowEditorShellController } from './useFlowEditorShellController';
+import { useFlowEditorStudioController } from './useFlowEditorStudioController';
+import { useFlowEditorPanelProps } from './useFlowEditorPanelProps';
+import { useFlowEditorChromeProps } from './flowEditorChromeProps';
+
+export interface UseFlowEditorShellParams {
+    location: Location;
+    navigate: NavigateFunction;
+    fileInputRef: React.RefObject<HTMLInputElement | null>;
+    tabs: Array<{ id: string; name: string }>;
+    activeTabId: string | null;
+    snapshots: FlowSnapshot[];
+    nodes: FlowNode[];
+    edges: FlowEdge[];
+    selectedNodeId: string | null;
+    selectedEdgeId: string | null;
+    isCommandBarOpen: boolean;
+    isHistoryOpen: boolean;
+    editorMode: FlowEditorMode;
+    handleExportJSON: () => void;
+    onLayout: (
+        direction?: 'TB' | 'LR' | 'RL' | 'BT',
+        algorithm?: LayoutAlgorithm,
+        spacing?: 'compact' | 'normal' | 'loose'
+    ) => Promise<void>;
+}
+
+export interface UseFlowEditorStudioParams {
+    editorMode: FlowEditorMode;
+    studioTab: StudioTab;
+    selectedNodeId: string | null;
+    selectedEdgeId: string | null;
+    setStudioTab: (tab: StudioTab) => void;
+    setStudioCodeMode: (mode: StudioCodeMode) => void;
+    setStudioMode: () => void;
+    closeCommandBar: () => void;
+    setCanvasMode: () => void;
+    setSelectedNodeId: (id: string | null) => void;
+    setSelectedEdgeId: (id: string | null) => void;
+}
+
+type FlowEditorCommandBarConfig = Omit<
+    CommandBarPanelBuilderParams,
+    | 'isCommandBarOpen'
+    | 'closeCommandBar'
+    | 'nodes'
+    | 'edges'
+    | 'onLayout'
+    | 'openStudioAI'
+    | 'openStudioCode'
+    | 'openStudioPlayback'
+    | 'handleAddAnnotation'
+    | 'handleAddSection'
+    | 'handleAddTextNode'
+    | 'handleAddJourneyNode'
+    | 'handleAddMindmapNode'
+    | 'handleAddArchitectureNode'
+    | 'handleAddSequenceParticipant'
+    | 'handleAddClassNode'
+    | 'handleAddEntityNode'
+    | 'handleAddImage'
+    | 'handleAddWireframe'
+    | 'handleAddDomainLibraryItem'
+>;
+
+type FlowEditorSnapshotsConfig = Omit<
+    SnapshotsPanelBuilderParams,
+    'isHistoryOpen' | 'snapshots' | 'nodes' | 'edges' | 'handleCompareSnapshot'
+> & {
+    setDiffBaseline: NonNullable<SnapshotsPanelBuilderParams['handleCompareSnapshot']>;
+};
+
+type FlowEditorPropertiesConfig = Omit<
+    PropertiesRailBuilderParams,
+    'selectedNode' | 'selectedNodes' | 'selectedEdge' | 'clearSelection'
+>;
+
+type FlowEditorStudioConfig = Omit<
+    StudioRailBuilderParams,
+    | 'closeStudioPanel'
+    | 'selectedNode'
+    | 'selectedNodeCount'
+    | 'setCanvasMode'
+    | 'studioTab'
+    | 'setStudioTab'
+    | 'setStudioCodeMode'
+    | 'playback'
+    | 'initialPrompt'
+    | 'onInitialPromptConsumed'
+> & {
+    playback: {
+        currentStepIndex: number;
+        totalSteps: number;
+        isPlaying: boolean;
+        startPlayback: () => void;
+        togglePlay: () => void;
+        stopPlayback: () => void;
+        jumpToStep: (stepIndex: number) => void;
+        nextStep: () => void;
+        prevStep: () => void;
+        playbackSpeed: number;
+        setPlaybackSpeed: (speed: number) => void;
+    };
+    pendingAIPrompt?: string;
+    clearPendingAIPrompt: () => void;
+};
+
+export interface UseFlowEditorPanelsParams {
+    commandBar: FlowEditorCommandBarConfig;
+    snapshots: FlowEditorSnapshotsConfig;
+    properties: FlowEditorPropertiesConfig;
+    studio: FlowEditorStudioConfig;
+    isHistoryOpen: BuildFlowEditorPanelsPropsParams['isHistoryOpen'];
+    editorMode: BuildFlowEditorPanelsPropsParams['editorMode'];
+}
+
+export interface UseFlowEditorChromeParams {
+    handleSwitchTab: (tabId: string) => void;
+    handleAddTab: () => void;
+    handleCloseTab: (tabId: string) => void;
+    handleRenameTab: (tabId: string, newName: string) => void;
+    handleExport: (format?: 'png' | 'jpeg') => void;
+    handleCopyImage: (format?: 'png' | 'jpeg') => void;
+    handleSvgExport: () => void;
+    handleCopySvg: () => void;
+    handlePdfExport: () => void;
+    handleCinematicExport: (format: 'cinematic-video' | 'cinematic-gif') => void;
+    handleExportJSON: () => void;
+    handleCopyJSON: () => void;
+    handleExportMermaid: () => void;
+    handleDownloadMermaid: () => void;
+    handleExportPlantUML: () => void;
+    handleDownloadPlantUML: () => void;
+    handleExportOpenFlowDSL: () => void;
+    handleDownloadOpenFlowDSL: () => void;
+    handleExportFigma: () => void;
+    handleDownloadFigma: () => void;
+    handleShare: () => void;
+    handleImportJSON: () => void;
+    openHistory: () => void;
+    onGoHome: () => void;
+    collaborationTopNavState?: FlowEditorChromeProps['topNav']['collaboration'];
+    openCommandBar: (view: 'root' | 'search' | 'assets' | 'templates' | 'layout' | 'design-system') => void;
+    handleAddShape: (shapeType: string, position?: { x: number; y: number }) => void;
+    undo: () => void;
+    redo: () => void;
+    canUndo: boolean;
+    canRedo: boolean;
+    isSelectMode: boolean;
+    enableSelectMode: () => void;
+    enablePanMode: () => void;
+    getCenter: () => { x: number; y: number };
+    t: TFunction;
+    handleAddNode: (position?: { x: number; y: number }) => void;
+    setPendingAIPrompt: (prompt: string | undefined) => void;
+    startPlayback: () => void;
+    totalSteps: number;
+    isPlaying: boolean;
+    togglePlay: () => void;
+    nextStep: () => void;
+    prevStep: () => void;
+    stopPlayback: () => void;
+    handleAddAnnotation: () => void;
+    handleAddSection: () => void;
+    handleAddTextNode: () => void;
+    handleAddJourneyNode: () => void;
+    handleAddMindmapNode: () => void;
+    handleAddArchitectureNode: () => void;
+    handleAddSequenceParticipant: () => void;
+    handleAddClassNode: () => void;
+    handleAddEntityNode: () => void;
+    handleAddImage: (imageUrl: string) => void;
+    handleAddWireframe: (surface: 'browser' | 'mobile') => void;
+    handleAddDomainLibraryItem: (item: DomainLibraryItem) => void;
+}
+
+export interface UseFlowEditorControllerParams {
+    shell: UseFlowEditorShellParams;
+    studio: UseFlowEditorStudioParams;
+    panels: UseFlowEditorPanelsParams;
+    chrome: UseFlowEditorChromeParams;
+}
+
+export function useFlowEditorController({
+    shell,
+    studio,
+    panels: panelParams,
+    chrome: chromeParams,
+}: UseFlowEditorControllerParams) {
+    const {
+        handleLayoutWithContext,
+        selectedNode,
+        selectedNodes,
+        selectedEdge,
+        shouldRenderPanels,
+    } = useFlowEditorShellController(shell);
+
+    const {
+        openStudioPanel,
+        openStudioAI,
+        openStudioCode,
+        openStudioPlayback,
+        toggleStudioPanel,
+        closeStudioPanel,
+        handleCanvasEntityIntent,
+    } = useFlowEditorStudioController(studio);
+
+    const clearSelection = useCallback(() => {
+        studio.setSelectedNodeId(null);
+        studio.setSelectedEdgeId(null);
+    }, [studio]);
+
+    const panels = useFlowEditorPanelProps({
+        commandBar: {
+            ...panelParams.commandBar,
+            isCommandBarOpen: shell.isCommandBarOpen,
+            closeCommandBar: studio.closeCommandBar,
+            nodes: shell.nodes,
+            edges: shell.edges,
+            onLayout: shell.onLayout,
+            openStudioAI,
+            openStudioCode,
+            openStudioPlayback,
+            handleAddAnnotation: chromeParams.handleAddAnnotation,
+            handleAddSection: chromeParams.handleAddSection,
+            handleAddTextNode: chromeParams.handleAddTextNode,
+            handleAddJourneyNode: chromeParams.handleAddJourneyNode,
+            handleAddMindmapNode: chromeParams.handleAddMindmapNode,
+            handleAddArchitectureNode: chromeParams.handleAddArchitectureNode,
+            handleAddSequenceParticipant: chromeParams.handleAddSequenceParticipant,
+            handleAddClassNode: chromeParams.handleAddClassNode,
+            handleAddEntityNode: chromeParams.handleAddEntityNode,
+            handleAddImage: chromeParams.handleAddImage,
+            handleAddWireframe: chromeParams.handleAddWireframe,
+            handleAddDomainLibraryItem: chromeParams.handleAddDomainLibraryItem,
+        },
+        snapshots: {
+            ...panelParams.snapshots,
+            isHistoryOpen: shell.isHistoryOpen,
+            snapshots: shell.snapshots,
+            handleCompareSnapshot: panelParams.snapshots.setDiffBaseline,
+            nodes: shell.nodes,
+            edges: shell.edges,
+        },
+        properties: {
+            ...panelParams.properties,
+            selectedNode,
+            selectedNodes,
+            selectedEdge,
+            clearSelection,
+        },
+        studio: {
+            ...panelParams.studio,
+            closeStudioPanel,
+            selectedNode,
+            selectedNodeCount: selectedNodes.length,
+            setCanvasMode: studio.setCanvasMode,
+            studioTab: studio.studioTab,
+            setStudioTab: studio.setStudioTab,
+            setStudioCodeMode: studio.setStudioCodeMode,
+            playback: {
+                currentStepIndex: panelParams.studio.playback.currentStepIndex,
+                totalSteps: panelParams.studio.playback.totalSteps,
+                isPlaying: panelParams.studio.playback.isPlaying,
+                onStartPlayback: panelParams.studio.playback.startPlayback,
+                onPlayPause: panelParams.studio.playback.togglePlay,
+                onStop: panelParams.studio.playback.stopPlayback,
+                onScrubToStep: panelParams.studio.playback.jumpToStep,
+                onNext: panelParams.studio.playback.nextStep,
+                onPrev: panelParams.studio.playback.prevStep,
+                playbackSpeed: panelParams.studio.playback.playbackSpeed,
+                onPlaybackSpeedChange: panelParams.studio.playback.setPlaybackSpeed,
+            },
+            initialPrompt: panelParams.studio.pendingAIPrompt,
+            onInitialPromptConsumed: panelParams.studio.clearPendingAIPrompt,
+        },
+        isHistoryOpen: shell.isHistoryOpen,
+        editorMode: shell.editorMode,
+    });
+
+    const chrome = useFlowEditorChromeProps({
+        ...chromeParams,
+        handleExportJSON: shell.handleExportJSON,
+        currentStepIndex: panelParams.studio.playback.currentStepIndex,
+        toggleStudioPanel,
+        editorMode: shell.editorMode,
+        handleLayoutWithContext,
+        openStudioPanel,
+        isCommandBarOpen: shell.isCommandBarOpen,
+        nodes: shell.nodes,
+        undo: panelParams.commandBar.undo,
+        redo: panelParams.commandBar.redo,
+    });
+
+    useEffect(() => {
+        if (!shouldOpenFlowEditorTemplates(shell.location.state)) return;
+        chromeParams.openCommandBar('templates');
+        shell.navigate(
+            { pathname: shell.location.pathname, search: shell.location.search, hash: shell.location.hash },
+            { replace: true, state: null }
+        );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    useEffect(() => {
+        if (!shouldOpenFlowEditorAI(shell.location.state)) return;
+        openStudioAI();
+        shell.navigate(
+            { pathname: shell.location.pathname, search: shell.location.search, hash: shell.location.hash },
+            { replace: true, state: null }
+        );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    return {
+        shouldRenderPanels,
+        handleCanvasEntityIntent,
+        panels,
+        chrome,
+    };
+}
diff --git a/src/components/flow-editor/useFlowEditorInteractionBindings.ts b/src/components/flow-editor/useFlowEditorInteractionBindings.ts
new file mode 100644
index 0000000..254a520
--- /dev/null
+++ b/src/components/flow-editor/useFlowEditorInteractionBindings.ts
@@ -0,0 +1,143 @@
+import { useCallback } from 'react';
+import { useKeyboardShortcuts } from '@/hooks/useKeyboardShortcuts';
+import { useMindmapTopicActionRequest } from '@/hooks/mindmapTopicActionRequest';
+import type { FlowEdge, FlowNode } from '@/lib/types';
+import { useNodeQuickCreateRequest } from '@/hooks/nodeQuickCreateRequest';
+
+interface UseFlowEditorInteractionBindingsParams {
+    selectedNodeId: string | null;
+    selectedEdgeId: string | null;
+    selectedNodeType: string | null;
+    deleteNode: (id: string) => void;
+    deleteEdge: (id: string) => void;
+    undo: () => void;
+    redo: () => void;
+    duplicateNode: (id: string) => void;
+    selectAll: () => void;
+    handleAddMindmapChild: (nodeId: string, side?: 'left' | 'right' | null) => void;
+    handleAddMindmapSibling: (nodeId: string) => void;
+    openCommandBar: (view: 'root' | 'search' | 'assets' | 'templates' | 'layout' | 'design-system') => void;
+    setShortcutsHelpOpen: (open: boolean) => void;
+    enableSelectMode: () => void;
+    enablePanMode: () => void;
+    fitView: (options?: { duration?: number; padding?: number }) => void;
+    zoomIn: (options?: { duration?: number }) => void;
+    zoomOut: (options?: { duration?: number }) => void;
+    copySelection: () => void;
+    pasteSelection: () => void;
+    copyStyleSelection: () => void;
+    pasteStyleSelection: () => void;
+    createConnectedNodeInDirection: (nodeId: string, direction: 'up' | 'right' | 'down' | 'left') => void;
+    updateNodeData: (id: string, data: Partial<FlowNode['data']>) => void;
+    setSelectedNodeId: (id: string | null) => void;
+    setSelectedEdgeId: (id: string | null) => void;
+    setNodes: (updater: (nodes: FlowNode[]) => FlowNode[]) => void;
+    setEdges: (updater: (edges: FlowEdge[]) => FlowEdge[]) => void;
+}
+
+export function useFlowEditorInteractionBindings({
+    selectedNodeId,
+    selectedEdgeId,
+    selectedNodeType,
+    deleteNode,
+    deleteEdge,
+    undo,
+    redo,
+    duplicateNode,
+    selectAll,
+    handleAddMindmapChild,
+    handleAddMindmapSibling,
+    openCommandBar,
+    setShortcutsHelpOpen,
+    enableSelectMode,
+    enablePanMode,
+    fitView,
+    zoomIn,
+    zoomOut,
+    copySelection,
+    pasteSelection,
+    copyStyleSelection,
+    pasteStyleSelection,
+    createConnectedNodeInDirection,
+    updateNodeData,
+    setSelectedNodeId,
+    setSelectedEdgeId,
+    setNodes,
+    setEdges,
+}: UseFlowEditorInteractionBindingsParams) {
+    useKeyboardShortcuts({
+        selectedNodeId,
+        selectedEdgeId,
+        deleteNode,
+        deleteEdge,
+        undo,
+        redo,
+        duplicateNode,
+        selectAll,
+        selectedNodeType,
+        onAddMindmapChildShortcut: () => {
+            if (selectedNodeId) {
+                handleAddMindmapChild(selectedNodeId);
+            }
+        },
+        onAddMindmapSiblingShortcut: () => {
+            if (selectedNodeId) {
+                handleAddMindmapSibling(selectedNodeId);
+            }
+        },
+        onCommandBar: () => openCommandBar('root'),
+        onSearch: () => openCommandBar('search'),
+        onShortcutsHelp: () => setShortcutsHelpOpen(true),
+        onSelectMode: enableSelectMode,
+        onPanMode: enablePanMode,
+        onFitView: () => fitView({ duration: 600, padding: 0.2 }),
+        onZoomIn: () => zoomIn({ duration: 300 }),
+        onZoomOut: () => zoomOut({ duration: 300 }),
+        onCopy: copySelection,
+        onPaste: pasteSelection,
+        onCopyStyle: copyStyleSelection,
+        onPasteStyle: pasteStyleSelection,
+        onQuickCreateShortcut: (direction) => {
+            if (selectedNodeId) {
+                createConnectedNodeInDirection(selectedNodeId, direction);
+            }
+        },
+        onAnnotationColorShortcut: (color) => {
+            if (selectedNodeId) {
+                updateNodeData(selectedNodeId, { color });
+            }
+        },
+        onClearSelection: () => {
+            setSelectedNodeId(null);
+            setSelectedEdgeId(null);
+            setNodes((nodes) => nodes.map((node) => ({ ...node, selected: false })));
+            setEdges((edges) => edges.map((edge) => ({ ...edge, selected: false })));
+        },
+        onNudge: (dx, dy) => {
+            setNodes((nodes) => nodes.map((node) =>
+                node.selected
+                    ? { ...node, position: { x: node.position.x + dx, y: node.position.y + dy } }
+                    : node
+            ));
+        },
+    });
+
+    useNodeQuickCreateRequest(
+        useCallback((nodeId, direction) => {
+            createConnectedNodeInDirection(nodeId, direction);
+        }, [createConnectedNodeInDirection])
+    );
+
+    useMindmapTopicActionRequest(
+        useCallback(({ nodeId, action, side }) => {
+            if (action === 'child') {
+                handleAddMindmapChild(nodeId, side ?? null);
+                return;
+            }
+
+            if (action === 'sibling') {
+                handleAddMindmapSibling(nodeId);
+            }
+        }, [handleAddMindmapChild, handleAddMindmapSibling])
+    );
+}
diff --git a/src/components/flow-editor/useFlowEditorPanelActions.ts b/src/components/flow-editor/useFlowEditorPanelActions.ts
new file mode 100644
index 0000000..19fd598
--- /dev/null
+++ b/src/components/flow-editor/useFlowEditorPanelActions.ts
@@ -0,0 +1,63 @@
+import { useCallback } from 'react';
+import { useFlowStore } from '@/store';
+import { buildArchitectureServiceSuggestionPrompt, buildEntityFieldGenerationPrompt } from '@/hooks/ai-generation/nodeActionPrompts';
+import type { StudioCodeMode, StudioTab } from '@/hooks/useFlowEditorUIState';
+import type { ArchitectureTemplateId } from '@/lib/architectureTemplates';
+
+interface UseFlowEditorPanelActionsParams {
+    handleFocusedAIRequest: (prompt: string, selectedNodeIds?: string[]) => Promise<boolean>;
+    setStudioTab: (tab: StudioTab) => void;
+    setStudioCodeMode: (mode: StudioCodeMode) => void;
+    setStudioMode: () => void;
+    handleApplyArchitectureTemplate?: (sourceId: string, templateId: ArchitectureTemplateId) => void;
+}
+
+interface UseFlowEditorPanelActionsResult {
+    handleGenerateEntityFields: (nodeId: string) => Promise<void>;
+    handleSuggestArchitectureNode: (nodeId: string) => Promise<void>;
+    handleOpenMermaidCodeEditor: () => void;
+    applyArchitectureTemplate: (sourceId: string, templateId: ArchitectureTemplateId) => void;
+}
+
+export function useFlowEditorPanelActions({
+    handleFocusedAIRequest,
+    setStudioTab,
+    setStudioCodeMode,
+    setStudioMode,
+    handleApplyArchitectureTemplate,
+}: UseFlowEditorPanelActionsParams): UseFlowEditorPanelActionsResult {
+    const handleGenerateEntityFields = useCallback(async (nodeId: string) => {
+        const node = useFlowStore.getState().nodes.find((candidate) => candidate.id === nodeId);
+        if (!node) {
+            return;
+        }
+
+        await handleFocusedAIRequest(buildEntityFieldGenerationPrompt(node), [nodeId]);
+    }, [handleFocusedAIRequest]);
+
+    const handleSuggestArchitectureNode = useCallback(async (nodeId: string) => {
+        const node = useFlowStore.getState().nodes.find((candidate) => candidate.id === nodeId);
+        if (!node) {
+            return;
+        }
+
+        await handleFocusedAIRequest(buildArchitectureServiceSuggestionPrompt(node), [nodeId]);
+    }, [handleFocusedAIRequest]);
+
+    const handleOpenMermaidCodeEditor = useCallback(() => {
+        setStudioTab('code');
+        setStudioCodeMode('mermaid');
+        setStudioMode();
+    }, [setStudioCodeMode, setStudioMode, setStudioTab]);
+
+    const applyArchitectureTemplate = useCallback((sourceId: string, templateId: ArchitectureTemplateId) => {
+        handleApplyArchitectureTemplate?.(sourceId, templateId);
+    }, [handleApplyArchitectureTemplate]);
+
+    return {
+        handleGenerateEntityFields,
+        handleSuggestArchitectureNode,
+        handleOpenMermaidCodeEditor,
+        applyArchitectureTemplate,
+    };
+}
diff --git a/src/components/flow-editor/useFlowEditorPanelProps.ts b/src/components/flow-editor/useFlowEditorPanelProps.ts
new file mode 100644
index 0000000..646b0c6
--- /dev/null
+++ b/src/components/flow-editor/useFlowEditorPanelProps.ts
@@ -0,0 +1,11 @@
+import type { FlowEditorPanelsProps } from '@/components/FlowEditorPanels';
+import {
+    buildFlowEditorPanelsProps,
+    type BuildFlowEditorPanelsPropsParams,
+} from './panelProps';
+
+export function useFlowEditorPanelProps(
+    params: BuildFlowEditorPanelsPropsParams
+): FlowEditorPanelsProps {
+    return buildFlowEditorPanelsProps(params);
+}
diff --git a/src/components/flow-editor/useFlowEditorRuntime.ts b/src/components/flow-editor/useFlowEditorRuntime.ts
new file mode 100644
index 0000000..18484b8
--- /dev/null
+++ b/src/components/flow-editor/useFlowEditorRuntime.ts
@@ -0,0 +1,89 @@
+import { useEffect, type RefObject } from 'react';
+import type { TFunction } from 'i18next';
+import type { ToastType } from '@/components/ui/ToastContext';
+import type { FlowEdge, FlowNode } from '@/lib/types';
+import type { ExportSerializationMode } from '@/services/canonicalSerialization';
+import { useFlowEditorActions } from '@/hooks/useFlowEditorActions';
+import { useFlowEditorCollaboration } from '@/hooks/useFlowEditorCollaboration';
+import { useCollaborationNodePositions } from './useCollaborationNodePositions';
+
+type SetFlowNodes = (payload: FlowNode[] | ((nodes: FlowNode[]) => FlowNode[])) => void;
+type SetFlowEdges = (payload: FlowEdge[] | ((edges: FlowEdge[]) => FlowEdge[])) => void;
+
+interface UseFlowEditorRuntimeParams {
+    collaborationEnabled: boolean;
+    activeTabId: string;
+    activeTabName?: string;
+    nodes: FlowNode[];
+    edges: FlowEdge[];
+    editorSurfaceRef: RefObject<HTMLDivElement | null>;
+    setNodes: SetFlowNodes;
+    setEdges: SetFlowEdges;
+    addToast: (message: string, type?: ToastType, duration?: number) => void;
+    recordHistory: () => void;
+    fitView: (options?: { duration?: number; padding?: number }) => void;
+    t: TFunction;
+    exportSerializationMode: ExportSerializationMode;
+    queueAutoSnapshot: (nodes: FlowNode[], edges: FlowEdge[]) => void;
+}
+
+export function useFlowEditorRuntime({
+    collaborationEnabled,
+    activeTabId,
+    activeTabName,
+    nodes,
+    edges,
+    editorSurfaceRef,
+    setNodes,
+    setEdges,
+    addToast,
+    recordHistory,
+    fitView,
+    t,
+    exportSerializationMode,
+    queueAutoSnapshot,
+}: UseFlowEditorRuntimeParams) {
+    useEffect(() => {
+        queueAutoSnapshot(nodes, edges);
+    }, [edges, nodes, queueAutoSnapshot]);
+
+    const {
+        collaborationTopNavState,
+        remotePresence,
+    } = useFlowEditorCollaboration({
+        collaborationEnabled,
+        activeTabId,
+        nodes,
+        edges,
+        editorSurfaceRef,
+        setNodes,
+        setEdges,
+        addToast,
+    });
+
+    const collaborationNodePositions = useCollaborationNodePositions(
+        collaborationEnabled,
+        nodes,
+        remotePresence.length
+    );
+
+    const actions = useFlowEditorActions({
+        nodes,
+        edges,
+        activeTabName,
+        recordHistory,
+        setNodes,
+        setEdges,
+        fitView,
+        t,
+        addToast,
+        exportSerializationMode,
+    });
+
+    return {
+        collaborationTopNavState,
+        remotePresence,
+        collaborationNodePositions,
+        ...actions,
+    };
+}
diff --git a/src/components/flow-editor/useFlowEditorScreenBehavior.ts b/src/components/flow-editor/useFlowEditorScreenBehavior.ts
new file mode 100644
index 0000000..d8d8b34
--- /dev/null
+++ b/src/components/flow-editor/useFlowEditorScreenBehavior.ts
@@ -0,0 +1,72 @@
+import { useMemo } from 'react';
+import { useFlowOperations } from '@/hooks/useFlowOperations';
+import { useFlowEditorCallbacks } from '@/hooks/useFlowEditorCallbacks';
+import { useFlowEditorInteractionBindings } from './useFlowEditorInteractionBindings';
+import type { TFunction } from 'i18next';
+import type { useFlowEditorScreenState } from './useFlowEditorScreenState';
+
+type ScreenState = ReturnType<typeof useFlowEditorScreenState>;
+
+export function useFlowEditorScreenBehavior(params: {
+  screenState: ScreenState;
+  t: TFunction;
+}) {
+  const { screenState, t } = params;
+  const operations = useFlowOperations(screenState.recordHistory);
+  const selectedNodeType = useMemo(
+    () => screenState.nodes.find((node) => node.id === screenState.selectedNodeId)?.type ?? null,
+    [screenState.nodes, screenState.selectedNodeId],
+  );
+
+  const callbacks = useFlowEditorCallbacks({
+    addTab: screenState.addTab,
+    closeTab: screenState.closeTab,
+    updateTab: screenState.updateTab,
+    navigate: screenState.navigate,
+    tabsLength: screenState.tabs.length,
+    cannotCloseLastTabMessage: t('flowEditor.cannotCloseLastTab'),
+    setNodes: screenState.setNodes,
+    setEdges: screenState.setEdges,
+    restoreSnapshot: screenState.restoreSnapshot,
+    recordHistory: screenState.recordHistory,
+    fitView: screenState.fitView,
+    screenToFlowPosition: screenState.screenToFlowPosition,
+  });
+
+  useFlowEditorInteractionBindings({
+    selectedNodeId: screenState.selectedNodeId,
+    selectedEdgeId: screenState.selectedEdgeId,
+    selectedNodeType,
+    deleteNode: operations.deleteNode,
+    deleteEdge: operations.deleteEdge,
+    undo: screenState.undo,
+    redo: screenState.redo,
+    duplicateNode: operations.duplicateNode,
+    selectAll: callbacks.selectAll,
+    handleAddMindmapChild: operations.handleAddMindmapChild,
+    handleAddMindmapSibling: operations.handleAddMindmapSibling,
+    openCommandBar: screenState.openCommandBar,
+    setShortcutsHelpOpen: screenState.setShortcutsHelpOpen,
+    enableSelectMode: screenState.enableSelectMode,
+    enablePanMode: screenState.enablePanMode,
+    fitView: screenState.fitView,
+    zoomIn: screenState.zoomIn,
+    zoomOut: screenState.zoomOut,
+    copySelection: operations.copySelection,
+    pasteSelection: operations.pasteSelection,
+    copyStyleSelection: operations.copyStyleSelection,
+    pasteStyleSelection: operations.pasteStyleSelection,
+    createConnectedNodeInDirection: operations.createConnectedNodeInDirection,
+    updateNodeData: operations.updateNodeData,
+    setSelectedNodeId: screenState.setSelectedNodeId,
+    setSelectedEdgeId: screenState.setSelectedEdgeId,
+    setNodes: screenState.setNodes,
+    setEdges: screenState.setEdges,
+  });
+
+  return {
+    operations,
+    selectedNodeType,
+    callbacks,
+  };
+}
diff --git a/src/components/flow-editor/useFlowEditorScreenModel.ts b/src/components/flow-editor/useFlowEditorScreenModel.ts
new file mode 100644
index 0000000..fc7f177
--- /dev/null
+++ b/src/components/flow-editor/useFlowEditorScreenModel.ts
@@ -0,0 +1,324 @@
+import { useCallback, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useAIGeneration } from '@/hooks/useAIGeneration';
+import { useFlowExport } from '@/hooks/useFlowExport';
+import { useToast } from '@/components/ui/ToastContext';
+import { usePlayback } from '@/hooks/usePlayback';
+import {
+    buildFlowEditorScreenControllerParams,
+} from './buildFlowEditorScreenControllerParams';
+import { useFlowEditorController } from './useFlowEditorController';
+import { useFlowEditorPanelActions } from './useFlowEditorPanelActions';
+import { useFlowEditorRuntime } from './useFlowEditorRuntime';
+import { useFlowEditorScreenState } from './useFlowEditorScreenState';
+import { useFlowEditorScreenBehavior } from './useFlowEditorScreenBehavior';
+
+interface UseFlowEditorScreenModelParams {
+    onGoHome: () => void;
+}
+
+export function useFlowEditorScreenModel({ onGoHome }: UseFlowEditorScreenModelParams) {
+    const { t } = useTranslation();
+    const { addToast } = useToast();
+    const screenState = useFlowEditorScreenState();
+    const { operations, callbacks } = useFlowEditorScreenBehavior({
+        screenState,
+        t,
+    });
+
+    const [pendingAIPrompt, setPendingAIPrompt] = useState<string | undefined>();
+    const clearPendingAIPrompt = useCallback(() => setPendingAIPrompt(undefined), []);
+    const {
+        isGenerating,
+        streamingText,
+        retryCount,
+        cancelGeneration,
+        pendingDiff,
+        confirmPendingDiff,
+        discardPendingDiff,
+        readiness,
+        lastError,
+        handleAIRequest,
+        handleFocusedAIRequest,
+        handleCodeAnalysis,
+        handleSqlAnalysis,
+        handleTerraformAnalysis,
+        handleOpenApiAnalysis,
+        chatMessages,
+        clearChat,
+        clearLastError,
+    } = useAIGeneration(screenState.recordHistory, callbacks.handleCommandBarApply);
+
+    const {
+        handleGenerateEntityFields,
+        handleSuggestArchitectureNode,
+        handleOpenMermaidCodeEditor,
+        applyArchitectureTemplate,
+    } = useFlowEditorPanelActions({
+        handleFocusedAIRequest,
+        setStudioTab: screenState.setStudioTab,
+        setStudioCodeMode: screenState.setStudioCodeMode,
+        setStudioMode: screenState.setStudioMode,
+        handleApplyArchitectureTemplate: operations.handleApplyArchitectureTemplate,
+    });
+
+    const {
+        isPlaying,
+        currentStepIndex,
+        totalSteps,
+        startPlayback,
+        stopPlayback,
+        togglePlay,
+        nextStep,
+        prevStep,
+        setPlaybackSpeed,
+        playbackSpeed,
+        jumpToStep,
+    } = usePlayback();
+
+    const {
+        fileInputRef,
+        handleExport,
+        handleCopyImage,
+        handleSvgExport,
+        handleCopySvg,
+        handlePdfExport,
+        handleCinematicExport,
+        handleExportJSON,
+        handleCopyJSON,
+        handleImportJSON,
+        onFileImport,
+    } = useFlowExport(screenState.recordHistory, screenState.reactFlowWrapper, {
+        stopPlayback,
+    }, screenState.cinematicExportSurfaceRef);
+
+    const {
+        collaborationTopNavState,
+        remotePresence,
+        collaborationNodePositions,
+        isLayouting,
+        onLayout,
+        handleInsertTemplate,
+        handleExportMermaid,
+        handleDownloadMermaid,
+        handleExportPlantUML,
+        handleDownloadPlantUML,
+        handleExportOpenFlowDSL,
+        handleDownloadOpenFlowDSL,
+        handleExportFigma,
+        handleDownloadFigma,
+        handleShare,
+        shareViewerUrl,
+        clearShareViewerUrl,
+    } = useFlowEditorRuntime({
+        collaborationEnabled: screenState.collaborationEnabled,
+        activeTabId: screenState.activeTabId,
+        activeTabName: screenState.activeTabName,
+        nodes: screenState.nodes,
+        edges: screenState.edges,
+        editorSurfaceRef: screenState.reactFlowWrapper,
+        setNodes: screenState.setNodes,
+        setEdges: screenState.setEdges,
+        addToast,
+        recordHistory: screenState.recordHistory,
+        fitView: screenState.fitView,
+        t,
+        exportSerializationMode: screenState.viewSettings.exportSerializationMode,
+        queueAutoSnapshot: screenState.queueAutoSnapshot,
+    });
+
+    const flowEditorControllerConfig = buildFlowEditorScreenControllerParams({
+        shell: {
+            location: screenState.location,
+            navigate: screenState.navigate,
+            tabs: screenState.tabs,
+            activeTabId: screenState.activeTabId,
+            snapshots: screenState.snapshots,
+            nodes: screenState.nodes,
+            edges: screenState.edges,
+            selectedNodeId: screenState.selectedNodeId,
+            selectedEdgeId: screenState.selectedEdgeId,
+            isCommandBarOpen: screenState.isCommandBarOpen,
+            isHistoryOpen: screenState.isHistoryOpen,
+            editorMode: screenState.editorMode,
+            handleExportJSON,
+            onLayout,
+            fileInputRef,
+        },
+        studio: {
+            editorMode: screenState.editorMode,
+            studioTab: screenState.studioTab,
+            selectedNodeId: screenState.selectedNodeId,
+            selectedEdgeId: screenState.selectedEdgeId,
+            setStudioTab: screenState.setStudioTab,
+            setStudioCodeMode: screenState.setStudioCodeMode,
+            setStudioMode: screenState.setStudioMode,
+            closeCommandBar: screenState.closeCommandBar,
+            setCanvasMode: screenState.setCanvasMode,
+            setSelectedNodeId: screenState.setSelectedNodeId,
+            setSelectedEdgeId: screenState.setSelectedEdgeId,
+        },
+        panels: {
+            commandBar: {
+                commandBarView: screenState.commandBarView,
+                undo: screenState.undo,
+                redo: screenState.redo,
+                handleInsertTemplate,
+                showGrid: screenState.viewSettings.showGrid,
+                toggleGrid: screenState.toggleGrid,
+                snapToGrid: screenState.viewSettings.snapToGrid,
+                toggleSnap: screenState.toggleSnap,
+                handleCodeAnalysis,
+                handleSqlAnalysis,
+                handleTerraformAnalysis,
+                handleOpenApiAnalysis,
+            },
+            snapshots: {
+                closeHistory: screenState.closeHistory,
+                manualSnapshots: screenState.manualSnapshots,
+                autoSnapshots: screenState.autoSnapshots,
+                saveSnapshot: screenState.saveSnapshot,
+                handleRestoreSnapshot: callbacks.handleRestoreSnapshot,
+                deleteSnapshot: screenState.deleteSnapshot,
+                setDiffBaseline: screenState.setDiffBaseline,
+            },
+            properties: {
+                updateNodeData: operations.updateNodeData,
+                applyBulkNodeData: operations.applyBulkNodeData,
+                updateNodeType: operations.updateNodeType,
+                updateEdge: operations.updateEdge,
+                deleteNode: operations.deleteNode,
+                duplicateNode: operations.duplicateNode,
+                deleteEdge: operations.deleteEdge,
+                updateNodeZIndex: operations.updateNodeZIndex,
+                handleAddMindmapChild: operations.handleAddMindmapChild,
+                handleAddMindmapSibling: operations.handleAddMindmapSibling,
+                handleAddArchitectureService: operations.handleAddArchitectureService,
+                handleCreateArchitectureBoundary: operations.handleCreateArchitectureBoundary,
+                handleApplyArchitectureTemplate: applyArchitectureTemplate,
+                handleGenerateEntityFields,
+                handleSuggestArchitectureNode,
+                handleConvertEntitySelectionToClassDiagram: operations.handleConvertEntitySelectionToClassDiagram,
+                handleOpenMermaidCodeEditor,
+            },
+            studio: {
+                handleCommandBarApply: callbacks.handleCommandBarApply,
+                handleAIRequest,
+                isGenerating,
+                streamingText,
+                retryCount,
+                cancelGeneration,
+                pendingDiff,
+                confirmPendingDiff,
+                discardPendingDiff,
+                aiReadiness: readiness,
+                lastAIError: lastError,
+                onClearAIError: clearLastError,
+                chatMessages,
+                clearChat,
+                studioCodeMode: screenState.studioCodeMode,
+                playback: {
+                    currentStepIndex,
+                    totalSteps,
+                    isPlaying,
+                    startPlayback,
+                    togglePlay,
+                    stopPlayback,
+                    jumpToStep,
+                    nextStep,
+                    prevStep,
+                    playbackSpeed,
+                    setPlaybackSpeed,
+                },
+                pendingAIPrompt,
+                clearPendingAIPrompt,
+            },
+            isHistoryOpen: screenState.isHistoryOpen,
+            editorMode: screenState.editorMode,
+        },
+        chrome: {
+            handleSwitchTab: callbacks.handleSwitchTab,
+            handleAddTab: callbacks.handleAddTab,
+            handleCloseTab: callbacks.handleCloseTab,
+            handleRenameTab: callbacks.handleRenameTab,
+            handleExport,
+            handleCopyImage,
+            handleSvgExport,
+            handleCopySvg,
+            handlePdfExport,
+            handleCinematicExport,
+            handleExportJSON,
+            handleCopyJSON,
+            handleExportMermaid,
+            handleDownloadMermaid,
+            handleExportPlantUML,
+            handleDownloadPlantUML,
+            handleExportOpenFlowDSL,
+            handleDownloadOpenFlowDSL,
+            handleExportFigma,
+            handleDownloadFigma,
+            handleShare,
+            handleImportJSON,
+            openHistory: screenState.openHistory,
+            onGoHome,
+            collaborationTopNavState,
+            openCommandBar: screenState.openCommandBar,
+            handleAddShape: operations.handleAddShape,
+            undo: screenState.undo,
+            redo: screenState.redo,
+            canUndo: screenState.canUndo,
+            canRedo: screenState.canRedo,
+            isSelectMode: screenState.isSelectMode,
+            enableSelectMode: screenState.enableSelectMode,
+            enablePanMode: screenState.enablePanMode,
+            getCenter: callbacks.getCenter,
+            t,
+            handleAddNode: operations.handleAddNode,
+            setPendingAIPrompt,
+            startPlayback,
+            totalSteps,
+            isPlaying,
+            togglePlay,
+            nextStep,
+            prevStep,
+            stopPlayback,
+            handleAddAnnotation: operations.handleAddAnnotation,
+            handleAddSection: operations.handleAddSection,
+            handleAddTextNode: operations.handleAddTextNode,
+            handleAddJourneyNode: operations.handleAddJourneyNode,
+            handleAddMindmapNode: operations.handleAddMindmapNode,
+            handleAddArchitectureNode: operations.handleAddArchitectureNode,
+            handleAddSequenceParticipant: operations.handleAddSequenceParticipant,
+            handleAddClassNode: operations.handleAddClassNode,
+            handleAddEntityNode: operations.handleAddEntityNode,
+            handleAddImage: operations.handleAddImage,
+            handleAddWireframe: operations.handleAddWireframe,
+            handleAddDomainLibraryItem: operations.handleAddDomainLibraryItem,
+        },
+    });
+    const flowEditorController = useFlowEditorController(flowEditorControllerConfig);
+
+    return {
+        nodes: screenState.nodes,
+        edges: screenState.edges,
+        tabs: screenState.tabs,
+        activeTabId: screenState.activeTabId,
+        viewSettings: screenState.viewSettings,
+        diffBaseline: screenState.diffBaseline,
+        setDiffBaseline: screenState.setDiffBaseline,
+        recordHistory: screenState.recordHistory,
+        isSelectMode: screenState.isSelectMode,
+        reactFlowWrapper: screenState.reactFlowWrapper,
+        cinematicExportSurfaceRef: screenState.cinematicExportSurfaceRef,
+        fileInputRef,
+        onFileImport,
+        shareViewerUrl,
+        clearShareViewerUrl,
+        collaborationEnabled: screenState.collaborationEnabled,
+        remotePresence,
+        collaborationNodePositions,
+        isLayouting,
+        flowEditorController,
+        t,
+    };
+}
diff --git a/src/components/flow-editor/useFlowEditorScreenState.ts b/src/components/flow-editor/useFlowEditorScreenState.ts
new file mode 100644
index 0000000..255db3f
--- /dev/null
+++ b/src/components/flow-editor/useFlowEditorScreenState.ts
@@ -0,0 +1,67 @@
+import { useMemo, useRef, useState } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
+import { useShallow } from 'zustand/react/shallow';
+import { useReactFlow } from '@/lib/reactflowCompat';
+import { useFlowStore } from '@/store';
+import { useSnapshots } from '@/hooks/useSnapshots';
+import { useFlowHistory } from '@/hooks/useFlowHistory';
+import { useFlowEditorUIState } from '@/hooks/useFlowEditorUIState';
+import { useShortcutHelpActions, useViewSettings } from '@/store/viewHooks';
+import { useSelectionActions, useSelectionState } from '@/store/selectionHooks';
+import type { FlowSnapshot } from '@/lib/types';
+import { isRolloutFlagEnabled } from '@/config/rolloutFlags';
+
+export function useFlowEditorScreenState() {
+  const location = useLocation();
+  const navigate = useNavigate();
+  const collaborationEnabled = isRolloutFlagEnabled('collaborationEnabled');
+
+  const storeState = useFlowStore(useShallow((state) => ({
+    nodes: state.nodes,
+    edges: state.edges,
+    setNodes: state.setNodes,
+    setEdges: state.setEdges,
+    tabs: state.tabs,
+    activeTabId: state.activeTabId,
+    addTab: state.addTab,
+    closeTab: state.closeTab,
+    updateTab: state.updateTab,
+    toggleGrid: state.toggleGrid,
+    toggleSnap: state.toggleSnap,
+  })));
+  const viewSettings = useViewSettings();
+  const { setShortcutsHelpOpen } = useShortcutHelpActions();
+  const [diffBaseline, setDiffBaseline] = useState<FlowSnapshot | null>(null);
+  const selectionState = useSelectionState();
+  const selectionActions = useSelectionActions();
+  const activeTabName = useMemo(
+    () => storeState.tabs.find((tab) => tab.id === storeState.activeTabId)?.name,
+    [storeState.tabs, storeState.activeTabId],
+  );
+  const snapshotsState = useSnapshots();
+  const uiState = useFlowEditorUIState();
+  const reactFlowWrapper = useRef<HTMLDivElement>(null);
+  const cinematicExportSurfaceRef = useRef<HTMLDivElement>(null);
+  const reactFlowState = useReactFlow();
+  const historyState = useFlowHistory();
+
+  return {
+    location,
+    navigate,
+    collaborationEnabled,
+    ...storeState,
+    viewSettings,
+    setShortcutsHelpOpen,
+    diffBaseline,
+    setDiffBaseline,
+    ...selectionState,
+    ...selectionActions,
+    activeTabName,
+    ...snapshotsState,
+    ...uiState,
+    reactFlowWrapper,
+    cinematicExportSurfaceRef,
+    ...reactFlowState,
+    ...historyState,
+  };
+}
diff --git a/src/components/flow-editor/useFlowEditorShellController.ts b/src/components/flow-editor/useFlowEditorShellController.ts
index c3d0d13..49adeb3 100644
--- a/src/components/flow-editor/useFlowEditorShellController.ts
+++ b/src/components/flow-editor/useFlowEditorShellController.ts
@@ -130,7 +130,7 @@ export function useFlowEditorShellController({
     const shouldRenderPanels = isCommandBarOpen
         || isHistoryOpen
         || editorMode === 'studio'
-        || Boolean(selectedNode || selectedEdge);
+        || Boolean(selectedNode || selectedEdge || selectedNodes.length > 1);
 
     return {
         activeTab,
diff --git a/src/components/flow-editor/useFlowEditorStudioController.test.tsx b/src/components/flow-editor/useFlowEditorStudioController.test.tsx
index 65ec2d3..72af2d3 100644
--- a/src/components/flow-editor/useFlowEditorStudioController.test.tsx
+++ b/src/components/flow-editor/useFlowEditorStudioController.test.tsx
@@ -77,7 +77,7 @@ describe('useFlowEditorStudioController', () => {
         expect(props.setCanvasMode).toHaveBeenCalled();
     });
 
-    it('returns to canvas mode when selection changes after studio opens', () => {
+    it('stays in studio when selection changes — never auto-exits', () => {
         const initialProps = createBaseProps({
             editorMode: 'canvas',
             selectedNodeId: 'node-1',
@@ -97,6 +97,6 @@ describe('useFlowEditorStudioController', () => {
             selectedNodeId: 'node-2',
         });
 
-        expect(initialProps.setCanvasMode).toHaveBeenCalled();
+        expect(initialProps.setCanvasMode).not.toHaveBeenCalled();
     });
 });
diff --git a/src/components/flow-editor/useFlowEditorStudioController.ts b/src/components/flow-editor/useFlowEditorStudioController.ts
index 763c4a0..3a1c5cc 100644
--- a/src/components/flow-editor/useFlowEditorStudioController.ts
+++ b/src/components/flow-editor/useFlowEditorStudioController.ts
@@ -102,13 +102,9 @@ export function useFlowEditorStudioController({
         clearSelectionAndSetCanvasMode();
     }, [clearSelectionAndSetCanvasMode]);
 
-    const handleCanvasEntityIntent = useCallback(() => {
-        if (editorMode !== 'studio') {
-            return;
-        }
-
-        setCanvasMode();
-    }, [editorMode, setCanvasMode]);
+    // Clicking a node/edge while in studio keeps the studio open.
+    // The user explicitly switches via "View Properties" in the studio header.
+    const handleCanvasEntityIntent = useCallback(() => undefined, []);
 
     useEffect(() => {
         if (!shouldExitStudioOnSelection({
diff --git a/src/components/flow-editor/useInfraDslApply.ts b/src/components/flow-editor/useInfraDslApply.ts
new file mode 100644
index 0000000..e9e3b08
--- /dev/null
+++ b/src/components/flow-editor/useInfraDslApply.ts
@@ -0,0 +1,28 @@
+import { useCallback } from 'react';
+import { parseInfraDslApplyInput } from './infraDslApply';
+import type { FlowEdge, FlowNode } from '@/lib/types';
+
+interface UseInfraDslApplyParams {
+    addToast: (message: string, type?: 'success' | 'error' | 'info' | 'warning', duration?: number) => void;
+    handleCommandBarApply: (nodes: FlowNode[], edges: FlowEdge[]) => void;
+}
+
+export function useInfraDslApply({
+    addToast,
+    handleCommandBarApply,
+}: UseInfraDslApplyParams) {
+    return useCallback((dsl: string) => {
+        const result = parseInfraDslApplyInput(dsl);
+        if (result.status === 'error') {
+            addToast(
+                `Infrastructure import could not be applied: ${result.message}`,
+                'error',
+                5000
+            );
+            return;
+        }
+
+        handleCommandBarApply(result.nodes, result.edges);
+        addToast('Infrastructure diagram applied to the canvas.', 'success', 3000);
+    }, [addToast, handleCommandBarApply]);
+}
diff --git a/src/components/handleInteraction.ts b/src/components/handleInteraction.ts
index 728ce41..05ba48f 100644
--- a/src/components/handleInteraction.ts
+++ b/src/components/handleInteraction.ts
@@ -1,6 +1,6 @@
 import type { CSSProperties } from 'react';
 
-export function getHandlePointerEvents(visualQualityV2Enabled: boolean, selected: boolean): 'none' | 'all' {
+export function getHandlePointerEvents(_visualQualityV2Enabled: boolean, _selected: boolean): 'none' | 'all' {
   return 'all';
 }
 
@@ -12,10 +12,10 @@ export function getV2HandleVisibilityClass(
   const includeScale = options.includeScale ?? true;
 
   // Keep anchors visible but secondary to resize controls while selected.
-  const selectedVisibility = includeScale ? 'opacity-65 scale-100' : 'opacity-65';
+  const selectedVisibility = includeScale ? 'opacity-80 scale-100' : 'opacity-80';
   const connectingClass = includeConnectingState ? ' [.is-connecting_&]:opacity-100' : '';
   const hitAreaClass = selected ? '' : ' flow-handle-hitarea';
-  return `${selected ? selectedVisibility : 'opacity-30'} group-hover:opacity-100${connectingClass}${hitAreaClass}`.trim();
+  return `${selected ? selectedVisibility : 'opacity-0'} group-hover:opacity-100${connectingClass}${hitAreaClass}`.trim();
 }
 
 export function getConnectorHandleStyle(
diff --git a/src/components/handleInteractionUsage.test.ts b/src/components/handleInteractionUsage.test.ts
index 16299b4..b373452 100644
--- a/src/components/handleInteractionUsage.test.ts
+++ b/src/components/handleInteractionUsage.test.ts
@@ -29,7 +29,8 @@ describe('handle interaction usage guardrails', () => {
       const source = readSource(path);
       const usesSharedHelpers = source.includes('getHandlePointerEvents') && source.includes('getV2HandleVisibilityClass');
       const usesNodeChrome = source.includes('NodeChrome');
-      expect(usesSharedHelpers || usesNodeChrome, path).toBe(true);
+      const usesStructuredNodeHandles = source.includes('StructuredNodeHandles');
+      expect(usesSharedHelpers || usesNodeChrome || usesStructuredNodeHandles, path).toBe(true);
     }
   });
 
diff --git a/src/components/home/HomeDashboard.tsx b/src/components/home/HomeDashboard.tsx
index ba7637b..914a073 100644
--- a/src/components/home/HomeDashboard.tsx
+++ b/src/components/home/HomeDashboard.tsx
@@ -15,6 +15,8 @@ export interface HomeFlowCard {
 interface HomeDashboardProps {
     flows: HomeFlowCard[];
     onCreateNew: () => void;
+    onOpenTemplates: () => void;
+    onPromptWithAI: () => void;
     onImportJSON: () => void;
     onOpenFlow: (flowId: string) => void;
     onRenameFlow: (flowId: string) => void;
@@ -25,6 +27,8 @@ interface HomeDashboardProps {
 export function HomeDashboard({
     flows,
     onCreateNew,
+    onOpenTemplates,
+    onPromptWithAI,
     onImportJSON,
     onOpenFlow,
     onRenameFlow,
@@ -34,8 +38,8 @@ export function HomeDashboard({
     const { t } = useTranslation();
 
     return (
-        <div className="flex-1 overflow-y-auto px-10 py-12 animate-in fade-in duration-300">
-            <div className="flex items-end justify-between mb-12">
+        <div className="flex-1 overflow-y-auto px-4 py-6 animate-in fade-in duration-300 sm:px-6 md:px-10 md:py-12">
+            <div className="mb-8 flex flex-col gap-4 md:mb-12 md:flex-row md:items-end md:justify-between">
                 <div>
                     <h1 className="text-2xl font-semibold text-slate-900 tracking-tight mb-1">{t('home.title', 'Dashboard')}</h1>
                     <p className="text-[var(--brand-secondary)] text-sm">{t('home.description', 'Manage your flows and diagrams.')}</p>
@@ -62,43 +66,58 @@ export function HomeDashboard({
                 </div>
 
                 {flows.length === 0 ? (
-                    <div className="rounded-[24px] border border-dashed border-slate-200 bg-[linear-gradient(180deg,_rgba(255,255,255,0.96),_rgba(248,250,252,0.9))] px-6 py-16 text-center shadow-sm">
+                    <div className="rounded-[var(--radius-xl)] border border-dashed border-slate-200 bg-[linear-gradient(180deg,_rgba(255,255,255,0.96),_rgba(248,250,252,0.9))] px-6 py-16 text-center shadow-sm">
                         <div className="mx-auto mb-3 flex h-10 w-10 items-center justify-center rounded-full border border-slate-100 bg-[var(--brand-surface)] shadow-sm">
                             <Plus className="w-5 h-5 text-slate-400" />
                         </div>
                         <h3 className="mb-1 text-sm font-medium text-slate-900">{t('home.createFirstFlow', 'Create your first flow')}</h3>
                         <p className="mx-auto max-w-md text-xs leading-6 text-[var(--brand-secondary)]">
-                            {t('home.startFromScratch', 'Start from scratch or import an existing diagram.')}
+                            Build a useful diagram fast: start from a template, import Mermaid or SQL, or open Flowpilot on a blank canvas.
                         </p>
-                        <div className="mt-6 flex items-center justify-center gap-3">
+                        <div className="mt-6 flex flex-col items-center justify-center gap-3 sm:flex-row sm:flex-wrap">
+                            <Button
+                                onClick={onOpenTemplates}
+                                variant="primary"
+                                size="sm"
+                                data-testid="home-open-templates"
+                            >
+                                Browse Templates
+                            </Button>
                             <Button
                                 onClick={onImportJSON}
                                 variant="secondary"
                                 size="sm"
                                 data-testid="home-open-file"
                             >
-                                {t('common.openFile', 'Open File')}
+                                Import Diagram
+                            </Button>
+                            <Button
+                                onClick={onPromptWithAI}
+                                variant="secondary"
+                                size="sm"
+                            >
+                                Generate with Flowpilot
                             </Button>
                             <Button
                                 onClick={onCreateNew}
-                                variant="primary"
+                                variant="ghost"
                                 size="sm"
                             >
-                                {t('common.createNew', 'Create New')}
+                                Blank Canvas
                             </Button>
                         </div>
                         <div className="mx-auto mt-8 grid max-w-2xl grid-cols-1 gap-3 text-left sm:grid-cols-3">
-                            <div className="rounded-2xl border border-slate-200/80 bg-white/70 px-4 py-3">
-                                <p className="text-xs font-semibold text-slate-900">Start blank</p>
-                                <p className="mt-1 text-[11px] leading-5 text-slate-500">Open a new workspace and sketch the flow from scratch.</p>
+                            <div className="rounded-[var(--radius-lg)] border border-slate-200/80 bg-white/70 px-4 py-3">
+                                <p className="text-xs font-semibold text-slate-900">Use builder templates</p>
+                                <p className="mt-1 text-[11px] leading-5 text-slate-500">Start from release trains, cloud architectures, mind maps, and technical workflows.</p>
                             </div>
-                            <div className="rounded-2xl border border-slate-200/80 bg-white/70 px-4 py-3">
-                                <p className="text-xs font-semibold text-slate-900">Import existing work</p>
-                                <p className="mt-1 text-[11px] leading-5 text-slate-500">Bring in a saved JSON flow when you want to keep iterating.</p>
+                            <div className="rounded-[var(--radius-lg)] border border-slate-200/80 bg-white/70 px-4 py-3">
+                                <p className="text-xs font-semibold text-slate-900">Import real source material</p>
+                                <p className="mt-1 text-[11px] leading-5 text-slate-500">Bring in Mermaid, SQL, OpenAPI, JSON, or OpenFlow sources and keep editing visually.</p>
                             </div>
-                            <div className="rounded-2xl border border-slate-200/80 bg-white/70 px-4 py-3">
-                                <p className="text-xs font-semibold text-slate-900">Autosave by default</p>
-                                <p className="mt-1 text-[11px] leading-5 text-slate-500">Diagram data stays local in this browser unless you export or open a collaboration room.</p>
+                            <div className="rounded-[var(--radius-lg)] border border-slate-200/80 bg-white/70 px-4 py-3">
+                                <p className="text-xs font-semibold text-slate-900">Local-first by default</p>
+                                <p className="mt-1 text-[11px] leading-5 text-slate-500">Diagram data stays in this browser unless you explicitly export or share it.</p>
                             </div>
                         </div>
                     </div>
@@ -108,7 +127,7 @@ export function HomeDashboard({
                             <div
                                 key={flow.id}
                                 onClick={() => onOpenFlow(flow.id)}
-                                className="group bg-[var(--brand-surface)] rounded-lg border border-slate-200 overflow-hidden cursor-pointer hover:border-slate-300 hover:shadow-sm transition-all relative"
+                                className="group bg-[var(--brand-surface)] rounded-[var(--radius-lg)] border border-slate-200 overflow-hidden cursor-pointer hover:border-slate-300 hover:shadow-sm transition-all relative"
                             >
                                 <div className="h-40 bg-slate-50 flex items-center justify-center border-b border-slate-100 relative overflow-hidden">
                                     <div className="absolute inset-0 flex items-center justify-center opacity-[0.03] group-hover:opacity-[0.06] transition-opacity">
@@ -126,7 +145,7 @@ export function HomeDashboard({
                                                 event.stopPropagation();
                                                 onRenameFlow(flow.id);
                                             }}
-                                            className="rounded-md border border-slate-200 bg-white p-1.5 text-slate-400 hover:bg-slate-50 hover:text-slate-700"
+                                            className="rounded-[var(--radius-sm)] border border-slate-200 bg-white p-1.5 text-slate-400 hover:bg-slate-50 hover:text-slate-700"
                                             aria-label={t('common.rename', 'Rename')}
                                         >
                                             <Pencil className="h-3 w-3" />
@@ -137,7 +156,7 @@ export function HomeDashboard({
                                                 event.stopPropagation();
                                                 onDuplicateFlow(flow.id);
                                             }}
-                                            className="rounded-md border border-slate-200 bg-white p-1.5 text-slate-400 hover:bg-slate-50 hover:text-slate-700"
+                                            className="rounded-[var(--radius-sm)] border border-slate-200 bg-white p-1.5 text-slate-400 hover:bg-slate-50 hover:text-slate-700"
                                             aria-label={t('common.duplicate', 'Duplicate')}
                                         >
                                             <Copy className="h-3 w-3" />
@@ -148,7 +167,7 @@ export function HomeDashboard({
                                                 event.stopPropagation();
                                                 onDeleteFlow(flow.id);
                                             }}
-                                            className="rounded-md border border-slate-200 bg-white p-1.5 text-slate-400 hover:bg-red-50 hover:text-red-600"
+                                            className="rounded-[var(--radius-sm)] border border-slate-200 bg-white p-1.5 text-slate-400 hover:bg-red-50 hover:text-red-600"
                                             aria-label={t('common.delete', 'Delete')}
                                         >
                                             <Trash2 className="h-3 w-3" />
diff --git a/src/components/home/HomeFlowDialogs.tsx b/src/components/home/HomeFlowDialogs.tsx
index d1ee1f8..15e591c 100644
--- a/src/components/home/HomeFlowDialogs.tsx
+++ b/src/components/home/HomeFlowDialogs.tsx
@@ -60,18 +60,19 @@ export function HomeFlowRenameDialog({
                 role="dialog"
                 aria-modal="true"
                 aria-labelledby="home-flow-rename-title"
-                className="w-full max-w-md rounded-[var(--radius-xl)] border border-slate-200 bg-white shadow-2xl"
+                aria-describedby="home-flow-rename-description"
+                className="w-full max-w-md rounded-[var(--radius-lg)] border border-slate-200 bg-white shadow-[var(--shadow-overlay)]"
             >
                 <div className="flex items-start justify-between border-b border-slate-100 px-6 py-5">
                     <div className="flex items-center gap-3">
-                        <div className="flex h-10 w-10 items-center justify-center rounded-2xl bg-[var(--brand-primary-50)] text-[var(--brand-primary)]">
+                        <div className="flex h-10 w-10 items-center justify-center rounded-[var(--radius-md)] bg-[var(--brand-primary-50)] text-[var(--brand-primary)]">
                             <Pencil className="h-4 w-4" />
                         </div>
                         <div>
                             <h2 id="home-flow-rename-title" className="text-base font-semibold text-slate-900">
                                 {t('home.renameFlow.title', 'Rename flow')}
                             </h2>
-                            <p className="text-sm text-slate-500">
+                            <p id="home-flow-rename-description" className="text-sm text-slate-500">
                                 {t('home.renameFlow.description', 'Update the name shown on your dashboard and tabs.')}
                             </p>
                         </div>
@@ -95,7 +96,7 @@ export function HomeFlowRenameDialog({
                         id="home-flow-rename-input"
                         value={draftName}
                         onChange={(event) => setDraftName(event.target.value)}
-                        className="w-full rounded-[var(--radius-lg)] border border-slate-200 px-3 py-2.5 text-sm text-slate-900 outline-none transition-colors placeholder:text-slate-400 focus:border-[var(--brand-primary)]"
+                        className="w-full rounded-[var(--radius-md)] border border-slate-200 px-3 py-2.5 text-sm text-slate-900 outline-none transition-colors placeholder:text-slate-400 focus:border-[var(--brand-primary)]"
                         placeholder={t('home.renameFlow.placeholder', 'Enter a flow name')}
                         autoFocus
                     />
@@ -161,7 +162,8 @@ export function HomeFlowDeleteDialog({
                 role="dialog"
                 aria-modal="true"
                 aria-labelledby="home-flow-delete-title"
-                className="w-full max-w-md rounded-[var(--radius-xl)] border border-slate-200 bg-white shadow-2xl"
+                aria-describedby="home-flow-delete-description"
+                className="w-full max-w-md rounded-[var(--radius-lg)] border border-slate-200 bg-white shadow-[var(--shadow-overlay)]"
             >
                 <div className="flex items-start justify-between border-b border-slate-100 px-6 py-5">
                     <div className="flex items-center gap-3">
@@ -172,7 +174,7 @@ export function HomeFlowDeleteDialog({
                             <h2 id="home-flow-delete-title" className="text-base font-semibold text-slate-900">
                                 {t('home.deleteFlow.title', 'Delete flow')}
                             </h2>
-                            <p className="text-sm text-slate-500">
+                            <p id="home-flow-delete-description" className="text-sm text-slate-500">
                                 {t('home.deleteFlow.description', 'This removes the local autosaved flow from this device.')}
                             </p>
                         </div>
diff --git a/src/components/home/HomeSettingsView.tsx b/src/components/home/HomeSettingsView.tsx
index 7785798..4c0bfa8 100644
--- a/src/components/home/HomeSettingsView.tsx
+++ b/src/components/home/HomeSettingsView.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { FLOWPILOT_NAME } from '@/lib/brand';
 import { useTranslation } from 'react-i18next';
 import { AISettings } from '../SettingsModal/AISettings';
 import { GeneralSettings } from '../SettingsModal/GeneralSettings';
@@ -18,35 +19,38 @@ export function HomeSettingsView({
     const { t } = useTranslation();
 
     return (
-        <div className="flex-1 flex flex-col h-screen overflow-hidden animate-in fade-in duration-300">
-            <header className="px-8 py-6 border-b border-slate-100 bg-[var(--brand-surface)]">
+        <div className="flex min-h-screen flex-1 flex-col overflow-hidden animate-in fade-in duration-300">
+            <header className="border-b border-slate-100 bg-[var(--brand-surface)] px-4 py-4 sm:px-6 md:px-8 md:py-6">
                 <h1 className="text-xl font-bold text-slate-900 tracking-tight">{t('settings.title', 'Settings')}</h1>
             </header>
 
-            <div className="flex-1 flex min-h-0 bg-[var(--brand-surface)]">
-                <div className="w-48 border-r border-slate-100 p-2 space-y-1 overflow-y-auto">
+            <div className="flex min-h-0 flex-1 flex-col bg-[var(--brand-surface)] md:flex-row">
+                <div className="flex gap-2 overflow-x-auto border-b border-slate-100 p-2 md:w-48 md:block md:space-y-1 md:overflow-y-auto md:border-b-0 md:border-r">
                     <SidebarItem
                         isActive={activeSettingsTab === 'general'}
                         onClick={() => onSettingsTabChange('general')}
+                        className="min-w-fit md:min-w-0"
                     >
                         {t('settings.general', 'General')}
                     </SidebarItem>
                     <SidebarItem
                         isActive={activeSettingsTab === 'ai'}
                         onClick={() => onSettingsTabChange('ai')}
+                        className="min-w-fit md:min-w-0"
                     >
-                        {t('settings.ai', 'Flowpilot AI')}
+                        {t('settings.ai', FLOWPILOT_NAME)}
                     </SidebarItem>
                     <SidebarItem
                         isActive={activeSettingsTab === 'shortcuts'}
                         onClick={() => onSettingsTabChange('shortcuts')}
+                        className="min-w-fit md:min-w-0"
                     >
                         {t('settings.shortcuts', 'Shortcuts')}
                     </SidebarItem>
 
                 </div>
 
-                <div className="flex-1 overflow-y-auto p-8">
+                <div className="flex-1 overflow-y-auto p-4 sm:p-6 md:p-8">
                     <div className="max-w-2xl">
                         {activeSettingsTab === 'general' && <GeneralSettings />}
                         {activeSettingsTab === 'ai' && <AISettings />}
diff --git a/src/components/home/HomeSidebar.tsx b/src/components/home/HomeSidebar.tsx
index 7f83564..94b82d8 100644
--- a/src/components/home/HomeSidebar.tsx
+++ b/src/components/home/HomeSidebar.tsx
@@ -18,8 +18,8 @@ export function HomeSidebar({
     const { t } = useTranslation();
 
     return (
-        <aside className="w-64 border-r border-slate-200 flex flex-col fixed inset-y-0 left-0 z-20 bg-[var(--brand-surface)]">
-            <div className="h-14 flex items-center gap-3 px-4 border-b border-slate-100">
+        <aside className="sticky top-0 z-20 flex w-full flex-col border-b border-slate-200 bg-[var(--brand-surface)] md:fixed md:inset-y-0 md:left-0 md:w-64 md:border-b-0 md:border-r">
+            <div className="flex h-14 items-center gap-3 border-b border-slate-100 px-4">
                 <div className="w-8 h-8 flex items-center justify-center bg-[var(--brand-primary)]/10 rounded-lg text-[var(--brand-primary)] overflow-hidden shrink-0">
                     <OpenFlowLogo className="w-5 h-5" />
                 </div>
@@ -31,12 +31,13 @@ export function HomeSidebar({
                 </div>
             </div>
 
-            <div className="p-3 space-y-1">
+            <div className="flex gap-2 overflow-x-auto p-3 md:block md:space-y-1">
                 <SidebarItem
                     icon={<Home className="w-4 h-4" />}
                     isActive={activeTab === 'home'}
                     onClick={() => onTabChange('home')}
                     testId="sidebar-home"
+                    className="min-w-fit md:min-w-0"
                 >
                     {t('nav.home', 'Home')}
                 </SidebarItem>
@@ -45,6 +46,7 @@ export function HomeSidebar({
                     isActive={activeTab === 'settings'}
                     onClick={() => onTabChange('settings')}
                     testId="sidebar-settings"
+                    className="min-w-fit md:min-w-0"
                 >
                     {t('nav.settings', 'Settings')}
                 </SidebarItem>
@@ -52,12 +54,13 @@ export function HomeSidebar({
                     icon={<Book className="w-4 h-4" />}
                     to="https://docs.openflowkit.com"
                     testId="sidebar-docs"
+                    className="min-w-fit md:min-w-0"
                 >
                     {t('nav.documentation', 'Documentation')}
                 </SidebarItem>
             </div>
 
-            <div className="mt-auto p-4 space-y-3">
+            <div className="hidden p-4 md:mt-auto md:block md:space-y-3">
                 <LanguageSelector variant="compact" placement="top" />
                 <div className="border-t border-slate-100 pt-3">
                     <div className="text-[10px] text-slate-400 font-medium uppercase tracking-wider">
diff --git a/src/components/infra-sync/InfraSyncPanel.test.tsx b/src/components/infra-sync/InfraSyncPanel.test.tsx
new file mode 100644
index 0000000..2bb5c3d
--- /dev/null
+++ b/src/components/infra-sync/InfraSyncPanel.test.tsx
@@ -0,0 +1,38 @@
+import '@testing-library/jest-dom/vitest';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { InfraSyncPanel } from './InfraSyncPanel';
+
+vi.mock('@/hooks/useInfraSync', () => ({
+  useInfraSync: () => ({
+    result: null,
+    dsl: null,
+    isParsing: false,
+    error: null,
+    parse: vi.fn(async () => undefined),
+    refresh: vi.fn(async () => undefined),
+    reset: vi.fn(),
+  }),
+}));
+
+describe('InfraSyncPanel', () => {
+  it('marks the active format tab as pressed and updates selection', () => {
+    render(
+      <InfraSyncPanel
+        onApplyDsl={vi.fn()}
+        onTerraformAnalysis={vi.fn(async () => undefined)}
+      />
+    );
+
+    const tfStateButton = screen.getByRole('button', { name: 'TF State' });
+    const hclButton = screen.getByRole('button', { name: 'HCL' });
+
+    expect(tfStateButton).toHaveAttribute('aria-pressed', 'true');
+    expect(hclButton).toHaveAttribute('aria-pressed', 'false');
+
+    fireEvent.click(hclButton);
+
+    expect(screen.getByRole('button', { name: 'HCL' })).toHaveAttribute('aria-pressed', 'true');
+    expect(screen.getByRole('button', { name: 'TF State' })).toHaveAttribute('aria-pressed', 'false');
+  });
+});
diff --git a/src/components/infra-sync/InfraSyncPanel.tsx b/src/components/infra-sync/InfraSyncPanel.tsx
new file mode 100644
index 0000000..7c41043
--- /dev/null
+++ b/src/components/infra-sync/InfraSyncPanel.tsx
@@ -0,0 +1,202 @@
+import { useCallback, useEffect, useRef, useState, type ReactElement } from 'react';
+import { Server, Loader2, RefreshCw, Check, AlertCircle, FileText } from 'lucide-react';
+import { IS_BEVELED } from '@/lib/brand';
+import { useInfraSync } from '@/hooks/useInfraSync';
+import { infraSyncResultSummary } from '@/services/infraSync/infraToDsl';
+import type { InfraFormat } from '@/services/infraSync/types';
+import type { TerraformInputFormat } from '@/hooks/ai-generation/terraformToCloud';
+
+const FORMAT_TABS: Array<{ id: InfraFormat; label: string }> = [
+    { id: 'terraform-state', label: 'TF State' },
+    { id: 'kubernetes', label: 'K8s' },
+    { id: 'docker-compose', label: 'Compose' },
+    { id: 'terraform-hcl', label: 'HCL' },
+];
+
+const FORMAT_PLACEHOLDERS: Record<InfraFormat, string> = {
+    'terraform-state': 'Paste .tfstate JSON here...',
+    'kubernetes': 'Paste Kubernetes YAML manifests here...',
+    'docker-compose': 'Paste docker-compose.yml here...',
+    'terraform-hcl': 'Paste Terraform HCL here...',
+};
+
+const FORMAT_HINTS: Record<InfraFormat, string> = {
+    'terraform-state': 'Drop your .tfstate file or run: terraform show -json > state.json',
+    'kubernetes': 'Drop a manifest.yaml or run: kubectl get all -o yaml > cluster.yaml',
+    'docker-compose': 'Drop your docker-compose.yml',
+    'terraform-hcl': 'Paste your main.tf — uses AI to interpret',
+};
+
+function getFormatTabClassName(selected: boolean): string {
+    return selected
+        ? 'border-[var(--brand-primary)] bg-[var(--brand-primary)] text-white shadow-sm shadow-[var(--brand-primary-200)]'
+        : 'border-slate-200 bg-white text-slate-500 hover:border-[var(--brand-primary-200)] hover:bg-[var(--brand-primary-50)] hover:text-[var(--brand-primary)]';
+}
+
+function formatFileSize(bytes: number): string {
+    if (bytes < 1024) return `${bytes}B`;
+    return `${Math.round(bytes / 1024)}KB`;
+}
+
+function formatRelativeTime(ts: number): string {
+    const seconds = Math.floor((Date.now() - ts) / 1000);
+    if (seconds < 5) return 'just now';
+    if (seconds < 60) return `${seconds}s ago`;
+    const minutes = Math.floor(seconds / 60);
+    if (minutes < 60) return `${minutes}m ago`;
+    return `${Math.floor(minutes / 60)}h ago`;
+}
+
+interface InfraSyncPanelProps {
+    onApplyDsl: (dsl: string) => void;
+    onTerraformAnalysis?: (input: string, format: TerraformInputFormat) => Promise<void>;
+}
+
+export function InfraSyncPanel({ onApplyDsl, onTerraformAnalysis }: InfraSyncPanelProps): ReactElement {
+    const isBeveled = IS_BEVELED;
+    const [format, setFormat] = useState<InfraFormat>('terraform-state');
+    const [input, setInput] = useState('');
+    const [fileInfo, setFileInfo] = useState<{ name: string; size: number } | null>(null);
+    const [applyFeedback, setApplyFeedback] = useState(false);
+    const applyTimeoutRef = useRef<ReturnType<typeof setTimeout>>(undefined);
+
+    const handleHclAnalysis = onTerraformAnalysis
+        ? async (text: string) => {
+              await onTerraformAnalysis(text, 'terraform');
+          }
+        : undefined;
+
+    const { result, dsl, isParsing, error, parse, refresh } = useInfraSync(handleHclAnalysis);
+
+    const handleGenerate = (): void => {
+        if (!input.trim()) return;
+        void parse(input, format);
+    };
+
+    const handleApply = useCallback((): void => {
+        if (!dsl) return;
+        onApplyDsl(dsl);
+        setApplyFeedback(true);
+        clearTimeout(applyTimeoutRef.current);
+        applyTimeoutRef.current = setTimeout(() => setApplyFeedback(false), 2000);
+    }, [dsl, onApplyDsl]);
+
+    useEffect(() => () => clearTimeout(applyTimeoutRef.current), []);
+
+    const handleDrop = (e: React.DragEvent<HTMLTextAreaElement>): void => {
+        e.preventDefault();
+        const file = e.dataTransfer.files[0];
+        if (!file) return;
+        setFileInfo({ name: file.name, size: file.size });
+        const reader = new FileReader();
+        reader.onload = (ev) => {
+            const text = ev.target?.result;
+            if (typeof text === 'string') setInput(text);
+        };
+        reader.readAsText(file);
+    };
+
+    return (
+        <div className="flex h-full min-h-0 flex-col gap-3 overflow-y-auto p-3 custom-scrollbar">
+            <div className="rounded-[var(--radius-md)] border border-slate-200 bg-[var(--brand-primary-50)] p-3">
+                <p className="text-xs font-medium text-[var(--brand-primary)]">Infrastructure Sync</p>
+                <p className="mt-0.5 text-[11px] leading-5 text-slate-500">
+                    Parse infrastructure source into an editable diagram draft, then apply it to the canvas when the result looks right.
+                </p>
+            </div>
+
+            <div className="flex flex-wrap gap-1.5 rounded-[var(--radius-md)] border border-slate-200 bg-slate-50 p-1">
+                {FORMAT_TABS.map((tab) => (
+                    <button
+                        key={tab.id}
+                        type="button"
+                        onClick={() => { setFormat(tab.id); setInput(''); setFileInfo(null); }}
+                        aria-pressed={format === tab.id}
+                        className={`rounded-full border px-3 py-1.5 text-[11px] font-semibold transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand-primary-200)] focus-visible:ring-offset-1 ${getFormatTabClassName(format === tab.id)}`}
+                    >
+                        {tab.label}
+                    </button>
+                ))}
+            </div>
+
+            <div className="text-[11px] text-slate-400 -mt-1">{FORMAT_HINTS[format]}</div>
+
+            {fileInfo && (
+                <div className="flex items-center gap-2 rounded-[var(--radius-sm)] bg-slate-50 border border-slate-200 px-2.5 py-1.5">
+                    <FileText className="h-3.5 w-3.5 text-slate-400" />
+                    <span className="text-[11px] font-medium text-slate-600 truncate">{fileInfo.name}</span>
+                    <span className="text-[11px] text-slate-400">{formatFileSize(fileInfo.size)}</span>
+                </div>
+            )}
+
+            <textarea
+                value={input}
+                onChange={(e) => { setInput(e.target.value); setFileInfo(null); }}
+                onDrop={handleDrop}
+                onDragOver={(e) => e.preventDefault()}
+                placeholder={FORMAT_PLACEHOLDERS[format]}
+                className="min-h-[200px] flex-1 resize-none rounded-[var(--radius-md)] border border-slate-200 bg-white px-3 py-3 font-mono text-xs text-slate-700 shadow-sm outline-none transition-all placeholder-slate-300 focus:border-[var(--brand-primary)] focus:ring-2 focus:ring-[var(--brand-primary-100)] custom-scrollbar"
+            />
+
+            <button
+                onClick={handleGenerate}
+                disabled={!input.trim() || isParsing}
+                className={`flex h-10 w-full items-center justify-center gap-2 rounded-[var(--brand-radius)] bg-[var(--brand-primary)] text-sm font-semibold text-white shadow-sm transition-all duration-200 hover:-translate-y-px hover:bg-[var(--brand-primary-600)] hover:shadow-md disabled:cursor-not-allowed disabled:opacity-40 active:scale-[0.98] ${isBeveled ? 'btn-beveled' : ''}`}
+            >
+                {isParsing ? (
+                    <><Loader2 className="h-4 w-4 animate-spin" /> Parsing infrastructure...</>
+                ) : (
+                    <><Server className="h-4 w-4" /> Generate draft</>
+                )}
+            </button>
+
+            {error && (
+                <div className="flex items-start gap-2 rounded-[var(--radius-md)] border border-red-200 bg-red-50 p-3">
+                    <AlertCircle className="h-4 w-4 shrink-0 text-red-500 mt-0.5" />
+                    <p className="text-[11px] text-red-700">{error}</p>
+                </div>
+            )}
+
+            {result && dsl && (
+                <div className="rounded-[var(--radius-md)] border border-emerald-200 bg-emerald-50/50 p-3 space-y-1.5">
+                    <div className="flex items-center gap-2">
+                        <Check className="h-4 w-4 shrink-0 text-emerald-500" />
+                        <span className="text-xs font-medium text-slate-700">
+                            Found {infraSyncResultSummary(result)}
+                        </span>
+                    </div>
+                    <p className="text-[11px] text-slate-400 pl-6">
+                        Parsed {formatRelativeTime(result.lastParsed)}
+                    </p>
+                </div>
+            )}
+
+            {result && dsl && (
+                <div className="flex gap-2">
+                    <button
+                        onClick={handleApply}
+                        className={`flex h-10 flex-1 items-center justify-center gap-2 rounded-[var(--brand-radius)] text-sm font-semibold text-white shadow-sm transition-all duration-200 active:scale-[0.98] ${
+                            applyFeedback
+                                ? 'bg-emerald-500'
+                                : `bg-[var(--brand-primary)] hover:-translate-y-px hover:bg-[var(--brand-primary-600)] hover:shadow-md ${isBeveled ? 'btn-beveled' : ''}`
+                        }`}
+                    >
+                        {applyFeedback ? (
+                            <><Check className="h-4 w-4" /> Applied to canvas</>
+                        ) : (
+                            'Apply to Canvas'
+                        )}
+                    </button>
+                    <button
+                        onClick={() => void refresh()}
+                        disabled={isParsing}
+                        title="Refresh"
+                        className="flex h-10 w-10 shrink-0 items-center justify-center rounded-[var(--brand-radius)] border border-slate-200 bg-white text-slate-500 shadow-sm transition-all duration-200 hover:-translate-y-px hover:border-slate-300 hover:bg-slate-50 hover:text-slate-700 hover:shadow-md disabled:opacity-40"
+                    >
+                        <RefreshCw className={`h-4 w-4 ${isParsing ? 'animate-spin' : ''}`} />
+                    </button>
+                </div>
+            )}
+        </div>
+    );
+}
diff --git a/src/components/journey/JourneyScoreControl.test.tsx b/src/components/journey/JourneyScoreControl.test.tsx
new file mode 100644
index 0000000..c514bf1
--- /dev/null
+++ b/src/components/journey/JourneyScoreControl.test.tsx
@@ -0,0 +1,21 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { JourneyScoreControl } from './JourneyScoreControl';
+
+describe('JourneyScoreControl', () => {
+  it('renders the current score as filled stars', () => {
+    render(<JourneyScoreControl score={3} onChange={vi.fn()} />);
+
+    expect(screen.getByLabelText('Set journey score to 3').textContent).toContain('★');
+    expect(screen.getByLabelText('Set journey score to 4').textContent).toContain('☆');
+  });
+
+  it('emits the selected score when a star is clicked', () => {
+    const onChange = vi.fn();
+    render(<JourneyScoreControl score={2} onChange={onChange} />);
+
+    fireEvent.click(screen.getByLabelText('Set journey score to 5'));
+
+    expect(onChange).toHaveBeenCalledWith(5);
+  });
+});
diff --git a/src/components/journey/JourneyScoreControl.tsx b/src/components/journey/JourneyScoreControl.tsx
new file mode 100644
index 0000000..21f5cf5
--- /dev/null
+++ b/src/components/journey/JourneyScoreControl.tsx
@@ -0,0 +1,68 @@
+import React from 'react';
+
+interface JourneyScoreControlProps {
+  score?: number;
+  onChange: (score: number) => void;
+  className?: string;
+  starClassName?: string;
+  showEmotion?: boolean;
+}
+
+function getEmotion(score?: number): string {
+  switch (score) {
+    case 1:
+      return '😞';
+    case 2:
+      return '😕';
+    case 3:
+      return '😐';
+    case 4:
+      return '😊';
+    case 5:
+      return '🤩';
+    default:
+      return '😐';
+  }
+}
+
+function getStarTone(score?: number): string {
+  if (!score || score <= 2) {
+    return 'text-rose-500';
+  }
+  if (score === 3) {
+    return 'text-amber-500';
+  }
+  return 'text-emerald-500';
+}
+
+export function JourneyScoreControl({
+  score,
+  onChange,
+  className = '',
+  starClassName = '',
+  showEmotion = true,
+}: JourneyScoreControlProps): React.ReactElement {
+  const toneClassName = getStarTone(score);
+
+  return (
+    <div className={`flex items-center gap-2 ${className}`.trim()}>
+      <div className="flex items-center gap-0.5">
+        {[1, 2, 3, 4, 5].map((star) => (
+          <button
+            key={star}
+            type="button"
+            onClick={(event) => {
+              event.stopPropagation();
+              onChange(star);
+            }}
+            className={`rounded-sm transition-colors ${toneClassName} ${starClassName}`.trim()}
+            aria-label={`Set journey score to ${star}`}
+          >
+            {star <= (score ?? 0) ? '★' : '☆'}
+          </button>
+        ))}
+      </div>
+      {showEmotion ? <span className="text-sm leading-none">{getEmotion(score)}</span> : null}
+    </div>
+  );
+}
diff --git a/src/components/landing/Button.tsx b/src/components/landing/Button.tsx
deleted file mode 100644
index be52556..0000000
--- a/src/components/landing/Button.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import React from 'react';
-import { IS_BEVELED } from '@/lib/brand';
-
-interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?: 'primary' | 'secondary' | 'outline' | 'ghost';
-  size?: 'sm' | 'md' | 'lg' | 'xl';
-  shape?: 'default' | 'pill' | 'square';
-  icon?: React.ReactNode;
-  children: React.ReactNode;
-}
-
-export function Button({
-  variant = 'primary',
-  size = 'md',
-  shape = 'default',
-  icon,
-  children,
-  className = '',
-  ...props
-}: ButtonProps): React.ReactElement {
-  const baseStyles = "inline-flex items-center justify-center font-medium transition-all duration-200 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed active:scale-[0.98]";
-
-  const isBeveled = IS_BEVELED;
-
-  // Note: We use specific shadow stacks here to create the bevel effect. 
-  // Avoid adding extra 'shadow-lg' classes on the component usage, as it will override these.
-  const variants = {
-    primary: `
-      bg-[var(--brand-primary)] text-white 
-      ${isBeveled ? 'border border-[color-mix(in_srgb,var(--brand-primary),black_20%)] shadow-[inset_0px_1px_0px_0px_rgba(255,255,255,0.3),inset_0px_-3px_0px_0px_rgba(0,0,0,0.18),0px_4px_8px_-2px_rgba(0,0,0,0.05),0px_3px_5px_-2px_rgba(0,0,0,0.05)]' : 'border border-transparent'}
-      hover:bg-[var(--brand-primary-600)] hover:-translate-y-[0.5px] 
-      ${isBeveled ? 'hover:shadow-[inset_0px_1px_0px_0px_rgba(255,255,255,0.35),inset_0px_-3px_0px_0px_rgba(0,0,0,0.2),0px_15px_20px_-5px_rgba(0,0,0,0.08),0px_8px_8px_-5px_rgba(0,0,0,0.03)]' : ''}
-      active:translate-y-[0.5px] 
-      ${isBeveled ? 'active:shadow-[inset_0px_1.5px_3px_rgba(0,0,0,0.18)]' : ''}
-    `.replace(/\s+/g, ' ').trim(),
-
-    secondary: `
-      bg-white text-brand-dark 
-      ${isBeveled ? 'border border-brand-border shadow-[inset_0px_1px_0px_0px_rgba(255,255,255,0.8),inset_0px_-2px_0px_0px_rgba(0,0,0,0.05),0px_1px_1.5px_0_rgba(0,0,0,0.03)]' : 'border border-brand-border'}
-      hover:bg-brand-canvas hover:border-gray-300 hover:-translate-y-[0.5px] 
-      ${isBeveled ? 'hover:shadow-[inset_0px_1px_0px_0px_rgba(255,255,255,0.8),inset_0px_-2px_0px_0px_rgba(0,0,0,0.07),0px_4px_8px_-2px_rgba(0,0,0,0.05)]' : ''}
-      active:translate-y-[0.5px] 
-      ${isBeveled ? 'active:shadow-[inset_0px_1.5px_3px_rgba(0,0,0,0.03)]' : ''}
-    `.replace(/\s+/g, ' ').trim(),
-
-    outline: "bg-transparent text-brand-primary border border-brand-border hover:border-brand-primary/30 hover:bg-brand-canvas",
-    ghost: "bg-transparent text-brand-secondary hover:text-brand-primary hover:bg-brand-canvas",
-  };
-
-  const sizes = {
-    sm: "text-[13px] px-4 py-1.5 gap-1.5 h-8",
-    md: "text-sm px-5 py-2.5 gap-2 h-10",
-    lg: "text-base px-8 py-3.5 gap-2.5 h-12",
-    xl: "text-[16px] px-8 py-4 gap-2.5 h-14 font-semibold",
-  };
-
-  const shapes = {
-    default: "rounded-[var(--brand-radius)]",
-    pill: "rounded-full",
-    square: "rounded-none",
-  };
-
-  return (
-    <button
-      className={`${baseStyles} ${variants[variant]} ${sizes[size]} ${shapes[shape]} ${className}`}
-      {...props}
-    >
-      {children}
-      {icon && <span className="ml-1">{icon}</span>}
-    </button>
-  );
-}
diff --git a/src/components/landing/CodeDemo.tsx b/src/components/landing/CodeDemo.tsx
deleted file mode 100644
index 8978711..0000000
--- a/src/components/landing/CodeDemo.tsx
+++ /dev/null
@@ -1,189 +0,0 @@
-import React from 'react';
-import { Box, Database, Globe, MousePointer2, Search, Sidebar } from 'lucide-react';
-
-export function CodeDemo(): React.ReactElement {
-  return (
-    <div className="rounded-2xl border border-brand-border/80 bg-white overflow-hidden shadow-2xl shadow-brand-primary/5 flex flex-col md:flex-row min-h-[500px] md:h-[640px] relative group ring-1 ring-black/5 select-none">
-      
-      {/* Visual Editor Side (Light) */}
-      <div className="w-full h-[300px] md:h-auto md:w-[60%] bg-[#F9FAFB] relative overflow-hidden border-b md:border-b-0 md:border-r border-brand-border order-1 group/canvas">
-         {/* Refined Dot Pattern - Lighter */}
-         <div className="absolute inset-0 bg-[radial-gradient(#E5E7EB_1px,transparent_1px)] [background-size:24px_24px] opacity-60"></div>
-         
-         {/* Floating Toolbar */}
-         <div className="absolute top-6 left-1/2 -translate-x-1/2 bg-white/90 backdrop-blur-md border border-brand-border rounded-full shadow-[0_2px_8px_rgba(0,0,0,0.04)] px-2 py-1.5 flex gap-1 z-20 hover:scale-105 transition-transform ring-1 ring-black/5">
-            <div className="w-9 h-9 rounded-full bg-brand-primary text-white flex items-center justify-center cursor-pointer shadow-md shadow-brand-primary/20">
-               <MousePointer2 className="w-4 h-4 fill-current" />
-            </div>
-            <div className="w-9 h-9 rounded-full hover:bg-gray-100 text-gray-500 flex items-center justify-center cursor-pointer transition-colors">
-               <Box className="w-4 h-4" />
-            </div>
-             <div className="w-9 h-9 rounded-full hover:bg-gray-100 text-gray-500 flex items-center justify-center cursor-pointer transition-colors">
-               <Database className="w-4 h-4" />
-            </div>
-         </div>
-
-         {/* Canvas Content */}
-         <div className="absolute inset-0 flex items-center justify-center scale-75 md:scale-100 origin-center">
-            
-            {/* Connection Line - Polished with Gradient */}
-            <svg className="absolute inset-0 w-full h-full pointer-events-none z-0">
-               <defs>
-                 <marker id="arrowhead" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto">
-                   <polygon points="0 0, 8 3, 0 6" fill="#94A3B8" />
-                 </marker>
-                 <linearGradient id="line-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
-                    <stop offset="0%" stopColor="#CBD5E1" />
-                    <stop offset="100%" stopColor="#94A3B8" />
-                 </linearGradient>
-               </defs>
-               <path 
-                d="M 320 280 C 400 280, 400 380, 480 380" 
-                stroke="url(#line-gradient)" 
-                strokeWidth="2" 
-                strokeDasharray="6 4" 
-                fill="none" 
-                markerEnd="url(#arrowhead)" 
-                className="transition-all duration-500 animate-[dash_30s_linear_infinite] opacity-60" 
-               />
-            </svg>
-
-            {/* Draggable Card 1 */}
-            <div className="absolute top-[30%] md:top-[30%] left-[10%] md:left-[20%] w-64 bg-white rounded-xl border border-brand-border shadow-panel hover:shadow-panel-hover hover:border-brand-primary/30 transition-all cursor-grab active:cursor-grabbing z-10 group/card ring-1 ring-black/5">
-                <div className="p-3 border-b border-brand-border/50 flex items-center justify-between bg-gray-50/80 backdrop-blur-sm rounded-t-xl">
-                    <div className="flex items-center gap-2">
-                        <div className="w-2 h-2 rounded-full bg-green-500 shadow-[0_0_8px_rgba(34,197,94,0.4)]"></div>
-                        <span className="font-semibold text-xs text-brand-primary font-mono tracking-tight">Checkout Service</span>
-                    </div>
-                    <Globe className="w-3.5 h-3.5 text-gray-400" />
-                </div>
-                <div className="p-4 space-y-3">
-                    <div className="flex items-center justify-between text-[10px] text-gray-400 font-mono">
-                        <span>latency</span>
-                        <span className="text-green-600 bg-green-50 px-1.5 py-0.5 rounded border border-green-100">45ms</span>
-                    </div>
-                    <div className="h-1.5 w-full bg-gray-100 rounded-full overflow-hidden">
-                        <div className="h-full w-3/4 bg-brand-primary rounded-full"></div>
-                    </div>
-                </div>
-                {/* Active User Cursor - Polished */}
-                <div className="absolute -right-3 -bottom-3 flex items-center gap-1 animate-float z-20">
-                   <MousePointer2 className="w-4 h-4 text-brand-purple fill-brand-purple drop-shadow-md" />
-                   <div className="bg-brand-purple/90 backdrop-blur text-white text-[10px] font-bold px-2 py-0.5 rounded-full shadow-lg border border-white/20">
-                      You
-                   </div>
-                </div>
-            </div>
-
-            {/* Draggable Card 2 */}
-             <div className="absolute bottom-[30%] md:bottom-[30%] right-[10%] md:right-[20%] w-64 bg-white rounded-xl border border-brand-border shadow-panel hover:shadow-panel-hover hover:border-brand-primary/30 transition-all cursor-grab active:cursor-grabbing z-10 ring-1 ring-black/5">
-                <div className="p-3 border-b border-brand-border/50 flex items-center justify-between bg-gray-50/80 backdrop-blur-sm rounded-t-xl">
-                    <div className="flex items-center gap-2">
-                        <div className="w-2 h-2 rounded-full bg-blue-500 shadow-[0_0_8px_rgba(59,130,246,0.4)]"></div>
-                        <span className="font-semibold text-xs text-brand-primary font-mono tracking-tight">Payment DB</span>
-                    </div>
-                    <Database className="w-3.5 h-3.5 text-gray-400" />
-                </div>
-                <div className="p-4 grid grid-cols-4 gap-2">
-                     <div className="aspect-square bg-blue-50/50 rounded border border-blue-100"></div>
-                     <div className="aspect-square bg-blue-50/50 rounded border border-blue-100"></div>
-                     <div className="aspect-square bg-blue-50/50 rounded border border-blue-100"></div>
-                     <div className="aspect-square bg-blue-50/20 rounded border border-blue-100 opacity-50 border-dashed"></div>
-                </div>
-            </div>
-         </div>
-      </div>
-
-      {/* Code Editor Side (Dark Mode) */}
-      <div className="w-full md:w-[40%] bg-[#0D0E12] flex flex-col order-2 font-mono text-[13px] h-[300px] md:h-auto border-l border-white/5">
-          {/* Editor Header */}
-          <div className="h-10 flex items-center justify-between px-4 bg-[#0D0E12] border-b border-white/5 select-none shrink-0">
-              <div className="flex gap-1.5 opacity-60 hover:opacity-100 transition-opacity">
-                  <div className="w-3 h-3 rounded-full bg-[#FF5F57]"></div>
-                  <div className="w-3 h-3 rounded-full bg-[#FEBC2E]"></div>
-                  <div className="w-3 h-3 rounded-full bg-[#28C840]"></div>
-              </div>
-              <div className="text-[11px] text-white/40 flex items-center gap-2 bg-white/5 px-3 py-1 rounded-md border border-white/5 group-hover:bg-white/10 transition-colors">
-                 <Search className="w-3 h-3" />
-                 flow.tsx
-              </div>
-              <Sidebar className="w-4 h-4 text-white/20 hover:text-white/50 transition-colors" />
-          </div>
-          
-          {/* Editor Content - Polished Colors */}
-          <div className="flex-1 p-6 leading-7 text-gray-400 overflow-y-auto custom-scrollbar selection:bg-brand-blue/30 selection:text-white">
-             <div className="flex group hover:bg-white/5 transition-colors -mx-6 px-6">
-                 <span className="w-8 text-gray-700 select-none text-right mr-4 text-[11px] pt-0.5 font-medium">1</span>
-                 <div><span className="text-[#C678DD]">import</span> <span className="text-[#E5C07B]">{`{ Node, Edge }`}</span> <span className="text-[#C678DD]">from</span> <span className="text-[#98C379]">&quot;@openflowkit/core&quot;</span>;</div>
-             </div>
-             <div className="flex group hover:bg-white/5 transition-colors -mx-6 px-6">
-                 <span className="w-8 text-gray-700 select-none text-right mr-4 text-[11px] pt-0.5 font-medium">2</span>
-                 <div>&nbsp;</div>
-             </div>
-             <div className="flex group hover:bg-white/5 transition-colors -mx-6 px-6">
-                 <span className="w-8 text-gray-700 select-none text-right mr-4 text-[11px] pt-0.5 font-medium">3</span>
-                 <div className="italic text-gray-500"><span className="text-[#56B6C2]">{'/** Defines the Checkout Service */'}</span></div>
-             </div>
-             <div className="flex group hover:bg-white/5 transition-colors -mx-6 px-6">
-                 <span className="w-8 text-gray-700 select-none text-right mr-4 text-[11px] pt-0.5 font-medium">4</span>
-                 <div><span className="text-[#C678DD]">export const</span> <span className="text-[#61AFEF]">checkoutNode</span> = <span className="text-[#C678DD]">new</span> <span className="text-[#E5C07B]">Node</span>({`{`}</div>
-             </div>
-             <div className="flex bg-[#1E222A] border-l-2 border-brand-blue -mx-6 px-6">
-                 <span className="w-8 text-gray-700 select-none text-right mr-4 text-[11px] pt-0.5 font-medium">5</span>
-                 <div className="pl-4">id: <span className="text-[#98C379]">&apos;checkout-service&apos;</span>,</div>
-             </div>
-             <div className="flex bg-[#1E222A] border-l-2 border-brand-blue -mx-6 px-6">
-                 <span className="w-8 text-gray-700 select-none text-right mr-4 text-[11px] pt-0.5 font-medium">6</span>
-                 <div className="pl-4">type: <span className="text-[#98C379]">&apos;service&apos;</span>,</div>
-             </div>
-             <div className="flex bg-[#1E222A] border-l-2 border-brand-blue -mx-6 px-6">
-                 <span className="w-8 text-gray-700 select-none text-right mr-4 text-[11px] pt-0.5 font-medium">7</span>
-                 <div className="pl-4">metadata: <span className="text-[#E5C07B]">ServerConfig</span>,</div>
-             </div>
-             <div className="flex group hover:bg-white/5 transition-colors -mx-6 px-6">
-                 <span className="w-8 text-gray-700 select-none text-right mr-4 text-[11px] pt-0.5 font-medium">8</span>
-                 <div>{`});`}</div>
-             </div>
-             <div className="flex group hover:bg-white/5 transition-colors -mx-6 px-6">
-                 <span className="w-8 text-gray-700 select-none text-right mr-4 text-[11px] pt-0.5 font-medium">9</span>
-                 <div>&nbsp;</div>
-             </div>
-             <div className="flex group hover:bg-white/5 transition-colors -mx-6 px-6">
-                 <span className="w-8 text-gray-700 select-none text-right mr-4 text-[11px] pt-0.5 font-medium">10</span>
-                 <div><span className="text-[#C678DD]">const</span> <span className="text-[#61AFEF]">connection</span> = <span className="text-[#61AFEF]">checkoutNode</span>.<span className="text-[#61AFEF]">connectTo</span>({`{`}</div>
-             </div>
-             <div className="flex group hover:bg-white/5 transition-colors -mx-6 px-6">
-                 <span className="w-8 text-gray-700 select-none text-right mr-4 text-[11px] pt-0.5 font-medium">11</span>
-                 <div className="pl-4">target: <span className="text-[#98C379]">&apos;payment-db&apos;</span>,</div>
-             </div>
-             <div className="flex group hover:bg-white/5 transition-colors -mx-6 px-6">
-                 <span className="w-8 text-gray-700 select-none text-right mr-4 text-[11px] pt-0.5 font-medium">12</span>
-                 <div className="pl-4">kind: <span className="text-[#98C379]">&apos;TCP/IP&apos;</span></div>
-             </div>
-             <div className="flex group hover:bg-white/5 transition-colors -mx-6 px-6">
-                 <span className="w-8 text-gray-700 select-none text-right mr-4 text-[11px] pt-0.5 font-medium">13</span>
-                 <div>{`});`}</div>
-             </div>
-          </div>
-          
-          {/* Editor Status Bar */}
-          <div className="h-7 border-t border-white/5 flex items-center justify-between px-3 bg-[#0D0E12] select-none shrink-0 hidden sm:flex">
-             <div className="flex items-center gap-3">
-                 <div className="flex items-center gap-1.5">
-                    <div className="w-1.5 h-1.5 rounded-full bg-[#28C840]"></div>
-                    <span className="text-[10px] text-white/50 font-medium">Ready</span>
-                 </div>
-                 <div className="w-px h-3 bg-white/10"></div>
-                 <span className="text-[10px] text-white/30">master*</span>
-             </div>
-             <div className="flex items-center gap-3 text-[10px] text-white/30">
-                 <span>Ln 13, Col 4</span>
-                 <span>TypeScript React</span>
-                 <span>UTF-8</span>
-             </div>
-          </div>
-      </div>
-
-    </div>
-  );
-}
diff --git a/src/components/landing/FigmaSection.tsx b/src/components/landing/FigmaSection.tsx
deleted file mode 100644
index 53557ca..0000000
--- a/src/components/landing/FigmaSection.tsx
+++ /dev/null
@@ -1,102 +0,0 @@
-import React from 'react';
-import { Figma, ArrowRight, Command, Type, Layers, Scissors } from 'lucide-react';
-import { useTranslation } from 'react-i18next';
-
-export function FigmaSection(): React.ReactElement {
-    const { t } = useTranslation();
-    return (
-        <section id="figma" className="py-24 md:py-32 bg-[#F2F4F7] relative overflow-hidden border-y border-white">
-            <div className="container mx-auto px-6 relative z-10">
-                <div className="flex flex-col lg:flex-row items-center gap-16 lg:gap-24">
-
-                    {/* Copy Side */}
-                    <div className="lg:w-1/2 text-center lg:text-left">
-                        <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white border border-gray-200 shadow-sm text-[10px] uppercase tracking-widest font-bold text-gray-900 mb-8 font-mono">
-                            <Scissors className="w-3 h-3" />
-                            {t('figma.badge')}
-                        </div>
-
-                        <h2 className="text-5xl md:text-7xl font-bold mb-6 tracking-tighter text-gray-900 leading-[0.9]">
-                            {t('figma.title')}<br />
-                            <span className="font-serif italic font-normal text-brand-primary">{t('figma.subtitle')}</span>
-                        </h2>
-
-                        <p className="text-xl text-gray-600 leading-relaxed mb-10 max-w-xl mx-auto lg:mx-0 font-medium">
-                            {t('figma.description')}
-                        </p>
-
-                        <div className="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start">
-                            <div className="flex items-center gap-3 px-4 py-3 bg-white rounded-xl border border-gray-200 shadow-sm">
-                                <div className="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center">
-                                    <Type className="w-4 h-4 text-green-600" />
-                                </div>
-                                <span className="text-sm font-semibold text-gray-700">{t('figma.editableText')}</span>
-                            </div>
-                            <div className="flex items-center gap-3 px-4 py-3 bg-white rounded-xl border border-gray-200 shadow-sm">
-                                <div className="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center">
-                                    <Layers className="w-4 h-4 text-green-600" />
-                                </div>
-                                <span className="text-sm font-semibold text-gray-700">{t('figma.vectorFidelity')}</span>
-                            </div>
-                        </div>
-                    </div>
-
-                    {/* Visual Side */}
-                    <div className="w-full lg:w-1/2 relative perspective-1000">
-                        <div className="relative h-[400px] w-full flex items-center justify-center">
-
-                            {/* Arrow Connector */}
-                            <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-20 flex flex-col items-center justify-center">
-                                <div className="w-12 h-12 bg-white rounded-full shadow-xl flex items-center justify-center border border-gray-100">
-                                    <ArrowRight className="w-5 h-5 text-gray-400" />
-                                </div>
-                            </div>
-
-                            {/* Left Card: Code */}
-                            <div className="absolute left-0 top-1/2 -translate-y-1/2 w-[260px] h-[300px] bg-[#1e1e1e] rounded-xl shadow-2xl p-4 transform -rotate-6 transition-transform hover:-rotate-3 border border-gray-800 z-10">
-                                <div className="flex gap-1.5 mb-4">
-                                    <div className="w-2.5 h-2.5 rounded-full bg-[#FF5F57]"></div>
-                                    <div className="w-2.5 h-2.5 rounded-full bg-[#FEBC2E]"></div>
-                                    <div className="w-2.5 h-2.5 rounded-full bg-[#28C840]"></div>
-                                </div>
-                                <div className="space-y-2">
-                                    <div className="h-2 w-2/3 bg-gray-700 rounded opacity-50"></div>
-                                    <div className="h-2 w-full bg-gray-700 rounded opacity-30"></div>
-                                    <div className="h-2 w-3/4 bg-gray-700 rounded opacity-40"></div>
-                                    <div className="h-20 w-full border border-dashed border-gray-700 rounded mt-4 flex items-center justify-center">
-                                        <span className="text-xs text-gray-500 font-mono">Selected</span>
-                                    </div>
-                                </div>
-                                <div className="absolute bottom-4 left-1/2 -translate-x-1/2 bg-white/10 px-3 py-1 rounded text-[10px] text-white font-mono border border-white/5 flex items-center gap-1">
-                                    <Command className="w-3 h-3" /> C
-                                </div>
-                            </div>
-
-                            {/* Right Card: Figma */}
-                            <div className="absolute right-0 top-1/2 -translate-y-1/2 w-[260px] h-[300px] bg-white rounded-xl shadow-[0_20px_50px_-12px_rgba(0,0,0,0.1)] p-4 transform rotate-6 transition-transform hover:rotate-3 border border-gray-200 z-0">
-                                <div className="flex items-center justify-between mb-4 border-b border-gray-100 pb-2">
-                                    <div className="flex items-center gap-1">
-                                        <Figma className="w-3 h-3 text-[#0ACF83]" />
-                                        <span className="text-[10px] font-bold text-gray-900">Untitled</span>
-                                    </div>
-                                </div>
-                                <div className="space-y-2">
-                                    <div className="h-24 w-full bg-[#0ACF83]/10 border border-[#0ACF83] border-dashed rounded flex items-center justify-center">
-                                        <span className="text-xs text-[#0ACF83] font-bold">Vector + Text</span>
-                                    </div>
-                                    <div className="h-2 w-1/2 bg-gray-100 rounded"></div>
-                                    <div className="h-2 w-2/3 bg-gray-100 rounded"></div>
-                                </div>
-                                <div className="absolute bottom-4 left-1/2 -translate-x-1/2 bg-gray-100 px-3 py-1 rounded text-[10px] text-gray-600 font-mono border border-gray-200 flex items-center gap-1">
-                                    <Command className="w-3 h-3" /> V
-                                </div>
-                            </div>
-
-                        </div>
-                    </div>
-
-                </div>
-            </div>
-        </section>
-    );
-}
diff --git a/src/components/landing/FinalCTASection.tsx b/src/components/landing/FinalCTASection.tsx
deleted file mode 100644
index cfbd65d..0000000
--- a/src/components/landing/FinalCTASection.tsx
+++ /dev/null
@@ -1,128 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { Copy, ArrowRight, CheckCircle2 } from 'lucide-react';
-import { useTranslation } from 'react-i18next';
-import { Button } from './Button';
-
-interface FinalCTASectionProps {
-    onLaunch: () => void;
-}
-
-export function FinalCTASection({ onLaunch }: FinalCTASectionProps): React.ReactElement {
-    const { t } = useTranslation();
-    const [copied, setCopied] = useState(false);
-    const [terminalStep, setTerminalStep] = useState(0);
-
-    // Simple typing simulation for the terminal
-    useEffect(() => {
-        const interval = setInterval(() => {
-            setTerminalStep((prev) => (prev + 1) % 4);
-        }, 2000);
-        return () => clearInterval(interval);
-    }, []);
-
-    const handleCopy = () => {
-        navigator.clipboard.writeText('gh repo clone Vrun-design/openflowkit');
-        setCopied(true);
-        setTimeout(() => setCopied(false), 2000);
-    };
-
-    return (
-        <section className="py-32 bg-white relative overflow-hidden border-t border-brand-border">
-
-            {/* Cyber Grid Background - Light */}
-            <div className="absolute inset-0 bg-[linear-gradient(rgba(0,0,0,0.02)_1px,transparent_1px),linear-gradient(90deg,rgba(0,0,0,0.02)_1px,transparent_1px)] bg-[size:64px_64px] [mask-image:radial-gradient(ellipse_80%_80%_at_50%_50%,#000_70%,transparent_100%)] pointer-events-none"></div>
-
-            <div className="container mx-auto px-6 relative z-10">
-                <div className="flex flex-col items-center text-center">
-
-                    {/* Floating "Bevel" Badge - Light */}
-                    <div className="mb-10 animate-float">
-                        <div className="bg-white text-brand-dark px-6 py-2 rounded-full border border-gray-100 shadow-[inset_0px_1px_0px_0px_rgba(255,255,255,1),0px_10px_20px_-5px_rgba(0,0,0,0.05)] flex items-center gap-3">
-                            <div className="w-2 h-2 rounded-full bg-green-500 animate-pulse"></div>
-                            <span className="font-mono text-xs tracking-widest uppercase text-brand-secondary">{t('cta.readyToUse')}</span>
-                        </div>
-                    </div>
-
-                    <h2 className="text-6xl md:text-8xl font-bold text-brand-dark mb-8 tracking-tighter leading-[0.9] text-balance">
-                        {t('cta.buildDiagrams')} <br />
-                        <span className="font-serif italic font-light text-brand-primary">{t('cta.dontLookGeneric')}</span>
-                    </h2>
-
-                    <p className="text-xl text-brand-secondary mb-10 max-w-xl mx-auto leading-relaxed">
-                        {t('cta.joinUs')}
-                    </p>
-
-                    {/* Final CTA Button above the block */}
-                    <div className="animate-slide-up opacity-0 [animation-delay:300ms] mb-12">
-                        <Button size="xl" className="transform hover:-translate-y-1 transition-all active:scale-95" onClick={onLaunch}>
-                            {t('cta.getStartedNow')} <ArrowRight className="w-4 h-4 ml-2" />
-                        </Button>
-                    </div>
-
-                    {/* The "Command Center" Interaction */}
-                    <div className="w-full max-w-2xl relative group">
-
-                        {/* Glow behind terminal */}
-                        <div className="absolute -inset-1 bg-gradient-to-r from-brand-primary via-purple-500 to-pink-500 rounded-xl blur-lg opacity-10 group-hover:opacity-30 transition-opacity duration-1000"></div>
-
-                        {/* Terminal Window - Dark Mode Terminal on Light Background looks professional */}
-                        <div className="relative bg-[#1E1E1E] rounded-xl border border-black/5 p-2 shadow-2xl ring-1 ring-black/5">
-                            {/* Window Chrome */}
-                            <div className="flex items-center px-4 py-2 border-b border-white/5 bg-white/[0.02]">
-                                <div className="flex gap-2">
-                                    <div className="w-3 h-3 rounded-full bg-[#FF5F57]"></div>
-                                    <div className="w-3 h-3 rounded-full bg-[#FEBC2E]"></div>
-                                    <div className="w-3 h-3 rounded-full bg-[#28C840]"></div>
-                                </div>
-                                <div className="mx-auto text-[10px] font-mono text-white/30">bash — 80x24</div>
-                            </div>
-
-                            {/* Terminal Content */}
-                            <div className="p-6 font-mono text-left text-sm md:text-base h-[140px] flex flex-col justify-center">
-                                <div className="flex items-center gap-3 text-white/90">
-                                    <span className="text-green-400">➜</span>
-                                    <span className="text-blue-400">~</span>
-                                    <span className="typing-effect">gh repo clone openflowkit</span>
-                                </div>
-
-                                {/* Simulated Output Steps */}
-                                <div className="mt-4 space-y-1 text-xs md:text-sm text-white/50">
-                                    <div className={`transition-opacity duration-300 ${terminalStep >= 1 ? 'opacity-100' : 'opacity-0'}`}>
-                                        <span className="text-gray-500">✔</span> Cloning into &apos;openflowkit&apos;...
-                                    </div>
-                                    <div className={`transition-opacity duration-300 ${terminalStep >= 2 ? 'opacity-100' : 'opacity-0'}`}>
-                                        <span className="text-gray-500">✔</span> Remote: Enumerating objects...
-                                    </div>
-                                    <div className={`transition-opacity duration-300 ${terminalStep >= 3 ? 'opacity-100' : 'opacity-0'} text-green-400`}>
-                                        <span className="text-green-500">✔</span> Receiving objects: 100% done.
-                                    </div>
-                                </div>
-                            </div>
-
-                            {/* Overlay Action */}
-                            <div className="absolute bottom-6 right-6 flex items-center gap-4">
-                                <button
-                                    onClick={handleCopy}
-                                    className="text-xs font-mono text-white/40 hover:text-white transition-colors flex items-center gap-2"
-                                >
-                                    {copied ? <CheckCircle2 className="w-4 h-4 text-green-400" /> : <Copy className="w-4 h-4" />}
-                                    {copied ? t('cta.copied') : t('cta.copy')}
-                                </button>
-                            </div>
-                        </div>
-                    </div>
-
-                    {/* Footer Links - Light Mode */}
-                    <div className="mt-12 flex items-center gap-6 text-sm text-brand-secondary">
-                        <a href="#/docs" className="hover:text-brand-primary transition-colors">{t('cta.documentation')}</a>
-                        <span className="opacity-30">•</span>
-                        <a href="https://github.com/Vrun-design/FlowMind" target="_blank" rel="noreferrer" className="hover:text-brand-primary transition-colors">{t('cta.github')}</a>
-                        <span className="opacity-30">•</span>
-                        <a href="#/docs/roadmap" className="hover:text-brand-primary transition-colors">{t('cta.roadmap')}</a>
-                    </div>
-
-                </div>
-            </div>
-        </section>
-    );
-}
diff --git a/src/components/landing/Footer.tsx b/src/components/landing/Footer.tsx
deleted file mode 100644
index a43b367..0000000
--- a/src/components/landing/Footer.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import React from 'react';
-import { Github } from 'lucide-react';
-import { useTranslation } from 'react-i18next';
-import { OpenFlowLogo } from '../icons/OpenFlowLogo';
-
-interface FooterProps {
-  onLaunch: () => void;
-}
-
-export function Footer({ onLaunch }: FooterProps): React.ReactElement {
-  const { t } = useTranslation();
-  return (
-    <footer className="bg-white border-t border-brand-border py-12 select-none">
-      <div className="container mx-auto px-6 flex flex-col md:flex-row items-center justify-between gap-6">
-
-        <button
-          type="button"
-          onClick={onLaunch}
-          className="flex items-center gap-2.5 cursor-pointer group"
-          aria-label="Open OpenFlowKit"
-        >
-          <div className="w-6 h-6 bg-brand-primary rounded flex items-center justify-center text-white shadow-sm transition-transform group-hover:rotate-6">
-            <OpenFlowLogo className="w-4 h-4 text-white" />
-          </div>
-          <span className="font-bold text-brand-primary text-sm tracking-tight">OpenFlowKit</span>
-          <span className="text-brand-border mx-2">/</span>
-          <span className="text-brand-secondary text-xs font-medium">{t('footer.mitLicensed')}</span>
-        </button>
-
-        <div className="flex items-center gap-6">
-          <a
-            href="https://www.producthunt.com/products/openflowkit?embed=true&utm_source=badge-top-post-topic-badge&utm_medium=badge&utm_campaign=badge-openflowkit"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="hidden sm:block hover:opacity-90 transition-opacity"
-          >
-            <img
-              alt="Product Hunt"
-              width="180"
-              height="39"
-              src="https://api.producthunt.com/widgets/embed-image/v1/top-post-topic-badge.svg?post_id=1081019&theme=light&period=weekly&topic_id=44&t=1772031326630"
-              className="h-8 w-auto"
-            />
-          </a>
-          <a href="https://github.com/Vrun-design/openflowkit" target="_blank" rel="noreferrer" className="text-brand-secondary hover:text-brand-primary transition-colors group" aria-label="GitHub">
-            <Github className="w-4 h-4 group-hover:scale-110 transition-transform" />
-          </a>
-        </div>
-
-      </div>
-    </footer>
-  );
-}
diff --git a/src/components/landing/HeroSection.tsx b/src/components/landing/HeroSection.tsx
deleted file mode 100644
index f6db204..0000000
--- a/src/components/landing/HeroSection.tsx
+++ /dev/null
@@ -1,135 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { Play, Copy, GitBranch, Terminal, Check } from 'lucide-react';
-import { useTranslation } from 'react-i18next';
-import { Button } from './Button';
-
-interface HeroSectionProps {
-  onLaunch: () => void;
-}
-
-export function HeroSection({ onLaunch }: HeroSectionProps): React.ReactElement {
-  const { t } = useTranslation();
-  const [index, setIndex] = useState(0);
-  const [isExiting, setIsExiting] = useState(false);
-
-  const ROTATING_WORDS = [
-    t('landing.hero.thinks'),
-    t('landing.hero.draws'),
-    t('landing.hero.builds'),
-    t('landing.hero.ships')
-  ];
-  const rotatingWordsLength = ROTATING_WORDS.length;
-
-  useEffect(() => {
-    const timer = setInterval(() => {
-      setIsExiting(true);
-      setTimeout(() => {
-        setIndex((prev) => (prev + 1) % rotatingWordsLength);
-        setIsExiting(false);
-      }, 500); // Wait for exit animation
-    }, 3000); // Total cycle time
-
-    return () => clearInterval(timer);
-  }, [rotatingWordsLength]);
-
-  const [copied, setCopied] = useState(false);
-
-  const handleCopy = () => {
-    navigator.clipboard.writeText('gh repo clone Vrun-design/openflowkit');
-    setCopied(true);
-    setTimeout(() => setCopied(false), 2000);
-  };
-
-  return (
-    <section className="relative pt-24 pb-12 md:pt-36 md:pb-24 overflow-hidden select-none bg-brand-canvas">
-      {/* Background Ambience with Dissolve Transition */}
-      <div className="absolute inset-0 pointer-events-none [mask-image:linear-gradient(to_bottom,black_0%,black_20%,rgba(0,0,0,0.8)_40%,rgba(0,0,0,0.4)_70%,transparent_100%)]">
-        {/* Layered Primary Grid */}
-        <div className="absolute inset-0 bg-[linear-gradient(to_right,#80808008_1px,transparent_1px),linear-gradient(to_bottom,#80808008_1px,transparent_1px)] bg-[size:40px_40px]"></div>
-
-        {/* Secondary Fine Grid */}
-        <div className="absolute inset-0 bg-[linear-gradient(to_right,#80808004_1px,transparent_1px),linear-gradient(to_bottom,#80808004_1px,transparent_1px)] bg-[size:10px_10px]"></div>
-
-        {/* Architectural Intersection Dots */}
-        <div className="absolute inset-0 bg-[radial-gradient(#8080800C_1px,transparent_1px)] bg-[size:40px_40px] [background-position:center_center]"></div>
-
-        {/* Ambient Orbs */}
-        <div className="absolute top-[-20%] left-[-10%] w-[70vw] h-[70vw] bg-brand-blue/[0.015] rounded-full blur-[120px] animate-pulse-slow"></div>
-        <div className="absolute bottom-[-10%] right-[-10%] w-[60vw] h-[60vw] bg-purple-500/[0.015] rounded-full blur-[120px] animate-pulse-slow [animation-delay:2s]"></div>
-      </div>
-
-      <div className="container mx-auto px-4 md:px-6 relative z-10 flex flex-col items-center text-center">
-        {/* Badge */}
-        <div className="animate-slide-up opacity-0 [animation-delay:0ms] inline-flex items-center gap-2 px-3 py-1 rounded-full bg-brand-primary/5 border border-brand-primary/10 text-brand-primary/60 mb-6 font-mono text-[10px] uppercase tracking-widest font-bold ring-1 ring-brand-primary/5">
-          <Terminal className="w-3 h-3" />
-          <span>{t('landing.hero.publicBeta')}</span>
-        </div>
-
-        {/* Headline */}
-        <h1 className="animate-slide-up opacity-0 [animation-delay:100ms] text-5xl sm:text-6xl md:text-[88px] font-bold tracking-[-0.04em] text-brand-dark mb-6 md:mb-8 max-w-5xl mx-auto leading-[1.1] text-balance">
-          {t('landing.hero.description1')} <br />
-          <span className="font-serif italic font-normal text-brand-primary inline-flex items-center gap-[0.2em]">
-            {t('landing.hero.description2')}
-            <span
-              key={ROTATING_WORDS[index]}
-              className={`inline-block ${isExiting ? '[animation:text-exit_0.5s_ease-in_forwards]' : '[animation:text-reveal_0.5s_ease-out_forwards]'}`}
-            >
-              {ROTATING_WORDS[index]}
-            </span>
-            {t('landing.hero.description3')}
-          </span>
-        </h1>
-
-        {/* Subhead */}
-        <p className="animate-slide-up opacity-0 [animation-delay:200ms] text-lg md:text-xl text-brand-secondary mb-8 md:mb-10 max-w-2xl mx-auto leading-relaxed text-balance font-medium tracking-tight px-4 opacity-80">
-          {t('landing.hero.description4')}
-        </p>
-
-        {/* CTAs - Removed overriding shadow classes */}
-        <div className="animate-slide-up opacity-0 [animation-delay:300ms] flex flex-col sm:flex-row items-center justify-center gap-4 w-full sm:w-auto mb-12 px-6">
-          <Button
-            size="lg"
-            className="w-full sm:w-auto h-14 px-10 transition-all active:scale-95 text-[15px]"
-            onClick={() => {
-              window.open("https://github.com/Vrun-design/FlowMind", "_blank");
-            }}
-          >
-            <GitBranch className="w-4 h-4 mr-2" />
-            {t('landing.hero.forkOnGithub')}
-          </Button>
-          <Button
-            variant="secondary"
-            size="lg"
-            icon={<Play className="w-3.5 h-3.5 fill-current" />}
-            className="w-full sm:w-auto h-14 px-10 transition-all active:scale-95 text-[15px]"
-            onClick={onLaunch}
-          >
-            {t('common.getStarted')}
-          </Button>
-        </div>
-        {/* Install Block */}
-        <div
-          className="animate-slide-up opacity-0 [animation-delay:400ms] group cursor-pointer w-fit max-w-full mx-auto"
-          onClick={handleCopy}
-        >
-          <div className="relative flex items-center justify-between md:justify-center gap-2 px-4 py-3 bg-white/60 backdrop-blur-sm rounded-xl border border-brand-border/60 hover:border-brand-primary/20 transition-all shadow-sm ring-1 ring-transparent hover:ring-brand-primary/10">
-            <span className="font-mono text-xs md:text-sm text-brand-secondary select-all truncate">gh repo clone openflowkit</span>
-            <div className="hidden md:block w-px h-4 bg-brand-secondary/20"></div>
-            {copied ? (
-              <Check className="w-3.5 h-3.5 text-green-500 shrink-0" />
-            ) : (
-              <Copy className="w-3.5 h-3.5 text-brand-muted hover:text-brand-primary transition-colors shrink-0" />
-            )}
-          </div>
-          <div className="mt-4 text-[10px] font-mono text-brand-muted uppercase tracking-widest opacity-60 flex items-center justify-center gap-3">
-            <span>{t('landing.hero.licence')}</span>
-            <span className="w-1 h-1 rounded-full bg-brand-muted/30"></span>
-            <span>{t('landing.hero.localFirst')}</span>
-            <span className="w-1 h-1 rounded-full bg-brand-muted/30"></span>
-            <span>{t('landing.hero.noAuth')}</span>
-          </div>
-        </div>
-      </div>
-    </section>
-  );
-}
diff --git a/src/components/landing/Navbar.tsx b/src/components/landing/Navbar.tsx
deleted file mode 100644
index 32244aa..0000000
--- a/src/components/landing/Navbar.tsx
+++ /dev/null
@@ -1,176 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { Github, Menu, X, ChevronRight, WandSparkles } from 'lucide-react';
-import { useTranslation } from 'react-i18next';
-import { Button } from './Button';
-import { OpenFlowLogo } from '../icons/OpenFlowLogo';
-import { LanguageSelector } from '../LanguageSelector';
-
-interface NavbarProps {
-  isScrolled: boolean;
-  onLaunch: () => void;
-}
-
-export function Navbar({ isScrolled, onLaunch }: NavbarProps): React.ReactElement {
-  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
-  const { t } = useTranslation();
-
-  // Lock body scroll when mobile menu is open
-  useEffect(() => {
-    if (isMobileMenuOpen) {
-      document.body.style.overflow = 'hidden';
-    } else {
-      document.body.style.overflow = 'unset';
-    }
-  }, [isMobileMenuOpen]);
-
-  const handleNavClick = (e: React.MouseEvent<HTMLAnchorElement>, id: string) => {
-    e.preventDefault();
-    const element = document.getElementById(id.replace('#', ''));
-    if (element) {
-      element.scrollIntoView({ behavior: 'smooth' });
-    }
-  };
-
-  const navLinks = [
-    { name: t('landing.nav.features', 'Features'), href: '#architecture' },
-    { name: t('landing.nav.figma', 'Figma'), href: '#figma' },
-    { name: t('landing.nav.useCases', 'Use Cases'), href: '#workflows' },
-    { name: t('landing.nav.pricing', 'Pricing'), href: '#pricing' },
-  ];
-
-  // Dynamic classes for the navbar container (The Pill)
-  // When mobile menu is open, we make it solid white and remove border/shadow to blend with the overlay
-  const navContainerClasses = isMobileMenuOpen
-    ? 'bg-white border-transparent shadow-none ring-0' // Seamless blend
-    : isScrolled
-      ? 'bg-white/85 backdrop-blur-xl shadow-lg shadow-black/[0.03] border-brand-border/80 ring-1 ring-black/5'
-      : 'bg-white/50 backdrop-blur-md border-brand-border/60 shadow-sm shadow-black/[0.02] ring-1 ring-white/50';
-
-  const mobileMenuClasses = isMobileMenuOpen
-    ? 'opacity-100 pointer-events-auto translate-y-0'
-    : 'opacity-0 pointer-events-none -translate-y-4';
-
-  return (
-    <>
-      {/* Main Navbar Pill - High Z-index to stay above overlay and content */}
-      <div className="fixed top-0 left-0 right-0 z-[60] flex justify-center pt-4 md:pt-6 px-4 transition-all duration-300">
-        <nav
-          className={`transition-all duration-500 w-full max-w-5xl rounded-full border ${navContainerClasses} py-2.5 px-4 md:px-5 relative flex items-center justify-between`}
-        >
-          {/* Logo */}
-          <button
-            type="button"
-            onClick={onLaunch}
-            className="flex items-center gap-2.5 cursor-pointer group select-none min-w-0"
-            aria-label="Open OpenFlowKit"
-          >
-            <div className="w-8 h-8 bg-brand-primary rounded-lg flex items-center justify-center text-white shadow-lg shadow-brand-primary/20 transition-transform duration-500 group-hover:rotate-12 group-hover:scale-105 ring-1 ring-white/20 shrink-0">
-              <OpenFlowLogo className="w-5 h-5 text-white" />
-            </div>
-            <span className="text-lg font-bold tracking-tight text-brand-primary font-sans group-hover:opacity-80 transition-opacity whitespace-nowrap">OpenFlowKit</span>
-          </button>
-
-          {/* Links - Desktop */}
-          <div className="hidden md:flex items-center gap-8">
-            {navLinks.map((item) => (
-              <a
-                key={item.name}
-                href={item.href}
-                onClick={(e) => handleNavClick(e, item.href)}
-                className="text-[13px] font-medium text-brand-secondary hover:text-brand-primary transition-colors relative group tracking-wide"
-              >
-                {item.name}
-              </a>
-            ))}
-          </div>
-
-          {/* Actions */}
-          <div className="flex items-center gap-3">
-            <div className="hidden md:flex">
-              <LanguageSelector variant="minimal" />
-            </div>
-
-            <div className="hidden md:flex">
-              <Button
-                variant="secondary"
-                size="sm"
-                className="h-9 px-4"
-                onClick={() => window.open("https://github.com/Vrun-design/openflowkit", "_blank")}
-              >
-                <Github className="w-4 h-4 mr-2" />
-                <span>Github</span>
-              </Button>
-            </div>
-
-            <div className="hidden md:flex">
-              <Button
-                size="sm"
-                variant="primary"
-                className="px-5 text-[13px] h-9 transform hover:-translate-y-0.5 transition-all"
-                onClick={onLaunch}
-              >
-                <span className="mr-1"> {t('common.getStarted', 'Get Started')}</span>
-              </Button>
-            </div>
-
-            {/* Mobile Menu Toggle */}
-            <button
-              className="md:hidden p-2 text-brand-primary hover:bg-black/5 rounded-full transition-colors active:scale-90"
-              onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
-            >
-              {isMobileMenuOpen ? <X className="w-5 h-5" /> : <Menu className="w-5 h-5" />}
-            </button>
-          </div>
-        </nav>
-      </div>
-
-      {/* Mobile Menu Overlay - z-[55] to sit below navbar but above page content */}
-      <div
-        className={`fixed inset-0 bg-white z-[55] transition-all duration-500 md:hidden flex flex-col pt-24 px-6 overflow-y-auto ${mobileMenuClasses}`}
-      >
-        <div className="flex flex-col gap-2">
-          {navLinks.map((item, i) => (
-            <a
-              key={item.name}
-              href={item.href}
-              onClick={(e) => {
-                setIsMobileMenuOpen(false);
-                handleNavClick(e, item.href);
-              }}
-              className="text-3xl font-bold text-brand-primary py-4 border-b border-brand-border/40 flex items-center justify-between group"
-              style={{ transitionDelay: `${i * 50}ms` }}
-            >
-              {item.name}
-              <ChevronRight className="w-6 h-6 opacity-0 -translate-x-4 group-hover:translate-x-0 group-hover:opacity-100 transition-all text-brand-muted" />
-            </a>
-          ))}
-          <div className="mt-12 space-y-4">
-            <Button
-              size="lg"
-              className="w-full justify-between h-14 text-base shadow-none"
-              onClick={() => {
-                setIsMobileMenuOpen(false);
-                onLaunch();
-              }}
-            >
-              <span>{t('common.getStarted', 'Get Started')}</span>
-              <WandSparkles className="w-4 h-4" />
-            </Button>
-            <Button
-              size="lg"
-              variant="secondary"
-              className="w-full justify-center h-14 text-base bg-gray-50 border-gray-200"
-              onClick={() => window.open("https://github.com/Vrun-design/openflowkit", "_blank")}
-            >
-              <Github className="w-5 h-5 mr-2" />
-              {t('landing.nav.viewGithub', 'View on GitHub')}
-            </Button>
-            <div className="w-full flex justify-center pt-4">
-              <LanguageSelector variant="compact" placement="top" />
-            </div>
-          </div>
-        </div>
-      </div>
-    </>
-  );
-}
diff --git a/src/components/landing/PricingSection.tsx b/src/components/landing/PricingSection.tsx
deleted file mode 100644
index 5fa8a51..0000000
--- a/src/components/landing/PricingSection.tsx
+++ /dev/null
@@ -1,113 +0,0 @@
-import React from 'react';
-import { Check, ArrowRight, Heart, Code2 } from 'lucide-react';
-import { useTranslation } from 'react-i18next';
-import { Button } from './Button';
-
-interface PricingSectionProps {
-    onLaunch: () => void;
-}
-
-export function PricingSection({ onLaunch }: PricingSectionProps): React.ReactElement {
-    const { t } = useTranslation();
-    return (
-        <section id="pricing" className="py-24 md:py-32 bg-white relative overflow-hidden">
-            <div className="container mx-auto px-6">
-
-                <div className="max-w-4xl mx-auto">
-                    {/* Header */}
-                    <div className="text-center mb-16">
-                        <h2 className="text-5xl md:text-7xl font-bold text-brand-dark mb-6 tracking-tighter leading-[0.9]">
-                            {t('pricing.title')}<br />
-                            <span className="font-serif italic font-normal text-brand-primary">{t('pricing.subtitle')}</span>
-                        </h2>
-                        <p className="text-xl text-brand-secondary max-w-xl mx-auto font-medium">
-                            {t('pricing.description')}
-                        </p>
-                    </div>
-
-                    {/* The Pricing Card */}
-                    <div className="relative group">
-                        {/* Glow Effect */}
-                        <div className="absolute -inset-[1px] bg-gradient-to-r from-brand-blue/30 via-purple-500/30 to-pink-500/30 rounded-[2.1rem] blur-xl opacity-30 group-hover:opacity-50 transition-opacity duration-1000"></div>
-
-                        <div className="relative bg-white rounded-[2rem] border border-brand-border/80 shadow-2xl overflow-hidden ring-1 ring-black/5">
-                            <div className="grid grid-cols-1 md:grid-cols-2">
-
-                                {/* Left: The "Price" */}
-                                <div className="p-8 md:p-14 bg-brand-canvas border-b md:border-b-0 md:border-r border-brand-border flex flex-col justify-between relative overflow-hidden">
-                                    {/* Background pattern */}
-                                    <div className="absolute inset-0 bg-[radial-gradient(#00000008_1px,transparent_1px)] [background-size:16px_16px]"></div>
-
-                                    <div className="relative z-10">
-                                        <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-black text-white text-[11px] font-bold uppercase tracking-wider mb-6 ring-1 ring-white/20">
-                                            <Code2 className="w-3 h-3" />
-                                            {t('pricing.mitLicense')}
-                                        </div>
-                                        <h3 className="text-2xl font-bold text-brand-dark mb-2">{t('pricing.freeForever')}</h3>
-                                        <p className="text-brand-secondary text-sm leading-relaxed mb-8">
-                                            {t('pricing.fullAccess')} <br />{t('pricing.hostAnywhere')}
-                                        </p>
-                                    </div>
-
-                                    <div className="relative z-10">
-                                        <div className="flex items-baseline gap-2 mb-2">
-                                            <span className="text-7xl font-bold text-brand-dark tracking-tighter">$0</span>
-                                        </div>
-                                        <p className="text-xs font-mono text-brand-muted uppercase tracking-wider mb-8">{t('pricing.unlimitedUsage')}</p>
-
-                                        <Button
-                                            className="w-full h-12 text-sm flex items-center justify-center gap-2 group"
-                                            onClick={onLaunch}
-                                        >
-                                            <span>{t('common.getStarted')}</span>
-                                            <ArrowRight className="w-4 h-4 opacity-50 group-hover:translate-x-1 transition-transform" />
-                                        </Button>
-                                        <p className="text-center text-[10px] text-brand-muted mt-4">
-                                            {t('pricing.noAccount')}
-                                        </p>
-                                    </div>
-                                </div>
-
-                                {/* Right: The List */}
-                                <div className="p-8 md:p-14 bg-white flex flex-col justify-center">
-                                    <h4 className="text-sm font-bold text-brand-dark uppercase tracking-widest mb-8 text-opacity-80">{t('pricing.everythingIncluded')}</h4>
-                                    <ul className="space-y-5">
-                                        {[
-                                            t('pricing.features.unlimitedDiagrams'),
-                                            t('pricing.features.saveLocally'),
-                                            t('pricing.features.whiteLabelBranding'),
-                                            t('pricing.features.oneClickLayout'),
-                                            t('pricing.features.exportFormats'),
-                                            t('pricing.features.figmaExport'),
-                                            t('pricing.features.mermaidSupport'),
-                                            t('pricing.features.aiGeneration')
-                                        ].map((item, i) => (
-                                            <li key={i} className="flex items-center gap-3 group">
-                                                <div className="w-5 h-5 rounded-full bg-green-50 flex items-center justify-center border border-green-100 group-hover:scale-110 transition-transform shadow-sm">
-                                                    <Check className="w-3 h-3 text-green-600" />
-                                                </div>
-                                                <span className="text-brand-secondary text-[15px] font-medium group-hover:text-brand-primary transition-colors">
-                                                    {item}
-                                                </span>
-                                            </li>
-                                        ))}
-                                    </ul>
-                                </div>
-
-                            </div>
-                        </div>
-                    </div>
-
-                    {/* Sponsor CTA */}
-                    <div className="mt-12 text-center">
-                        <a href="https://github.com/Vrun-design/FlowMind" target="_blank" rel="noreferrer" className="inline-flex items-center gap-2 text-brand-muted hover:text-brand-primary transition-colors text-sm font-medium">
-                            <Heart className="w-4 h-4 fill-current text-pink-500" />
-                            {t('pricing.supportDevelopment')}
-                        </a>
-                    </div>
-
-                </div>
-            </div>
-        </section>
-    );
-}
diff --git a/src/components/landing/ProblemSection.tsx b/src/components/landing/ProblemSection.tsx
deleted file mode 100644
index 2a35b03..0000000
--- a/src/components/landing/ProblemSection.tsx
+++ /dev/null
@@ -1,128 +0,0 @@
-import React from 'react';
-import { Image, Lock, AlertTriangle, MousePointer2 } from 'lucide-react';
-import { useTranslation } from 'react-i18next';
-
-export function ProblemSection(): React.ReactElement {
-    const { t } = useTranslation();
-    return (
-        <section className="py-32 bg-[#111111] text-white relative overflow-hidden select-none">
-            {/* Background Grid - Dark Mode */}
-            <div className="absolute inset-0 bg-[linear-gradient(to_right,#333_1px,transparent_1px),linear-gradient(to_bottom,#333_1px,transparent_1px)] bg-[size:40px_40px] opacity-[0.07]"></div>
-
-            {/* Gradient Fog */}
-            <div className="absolute top-0 left-0 w-full h-40 bg-gradient-to-b from-[#111111] to-transparent z-10"></div>
-            <div className="absolute bottom-0 left-0 w-full h-40 bg-gradient-to-t from-[#111111] to-transparent z-10"></div>
-
-            <div className="container mx-auto px-6 relative z-20">
-
-                {/* Header */}
-                <div className="mb-24 max-w-3xl">
-                    <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-red-500/10 border border-red-500/20 text-red-400 mb-8 font-mono text-[10px] uppercase tracking-widest font-bold">
-                        <AlertTriangle className="w-3 h-3" />
-                        <span>{t('problem.badge')}</span>
-                    </div>
-                    <h2 className="text-5xl md:text-7xl font-bold mb-8 leading-[0.9] tracking-tighter text-white">
-                        {t('problem.title')} <br />
-                        <span className="font-serif italic text-white/50 font-normal">{t('problem.subtitle')}</span>
-                    </h2>
-                    <p className="text-xl text-white/50 leading-relaxed max-w-2xl font-medium">
-                        {t('problem.description')}
-                    </p>
-                </div>
-
-                {/* Grid of Pain */}
-                <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
-
-                    {/* Card 1: The Alignment Hell */}
-                    <div className="group relative bg-[#1A1A1A] rounded-2xl p-8 hover:bg-[#222] transition-colors duration-500 overflow-hidden min-h-[360px] flex flex-col border border-white/5 hover:border-white/10">
-                        <div className="flex-1 relative w-full flex items-center justify-center">
-                            {/* Visual: Misalignment */}
-                            <div className="relative w-40 h-32">
-                                {/* Box A */}
-                                <div className="absolute top-0 left-4 w-24 h-24 border border-white/20 rounded-lg bg-white/5 flex items-center justify-center">
-                                    <span className="font-mono text-[10px] text-white/30">A</span>
-                                </div>
-                                {/* Box B - Animated Misalignment */}
-                                <div className="absolute top-6 left-20 w-24 h-24 border border-red-500/50 rounded-lg bg-red-500/10 flex items-center justify-center animate-[pulse_4s_infinite]">
-                                    <span className="font-mono text-[10px] text-red-400">B</span>
-
-                                    {/* The "1px off" indicator */}
-                                    <div className="absolute -top-3 left-0 w-full flex justify-center opacity-0 group-hover:opacity-100 transition-opacity">
-                                        <span className="bg-red-500 text-white text-[9px] px-1 rounded font-mono shadow-lg">1px off</span>
-                                    </div>
-                                </div>
-
-                                {/* Cursor */}
-                                <div className="absolute bottom-0 right-0 translate-x-1/2 translate-y-1/2 opacity-0 group-hover:opacity-100 transition-all duration-500 group-hover:translate-x-0 group-hover:translate-y-0">
-                                    <MousePointer2 className="w-5 h-5 text-white fill-white" />
-                                </div>
-                            </div>
-                        </div>
-                        <div className="mt-8">
-                            <h3 className="text-xl font-bold mb-3 text-white">{t('problem.pixelPurgatory')}</h3>
-                            <p className="text-sm text-white/40 leading-relaxed font-medium">
-                                {t('problem.pixelPurgatoryDesc')}
-                            </p>
-                        </div>
-                    </div>
-
-                    {/* Card 2: The Screenshot Rot */}
-                    <div className="group relative bg-[#1A1A1A] rounded-2xl p-8 hover:bg-[#222] transition-colors duration-500 overflow-hidden min-h-[360px] flex flex-col border border-white/5 hover:border-white/10">
-                        <div className="flex-1 relative w-full flex items-center justify-center">
-                            {/* Visual: Image Card */}
-                            <div className="relative w-32 h-40 bg-white/5 border border-white/10 rounded-lg p-3 flex flex-col gap-2 group-hover:blur-[2px] transition-all duration-700">
-                                <div className="w-full h-2 bg-white/10 rounded-full"></div>
-                                <div className="w-2/3 h-2 bg-white/10 rounded-full"></div>
-                                <div className="mt-4 w-full h-20 bg-white/5 rounded border border-dashed border-white/10 flex items-center justify-center">
-                                    <Image className="w-6 h-6 text-white/20" />
-                                </div>
-                            </div>
-
-                            {/* Overlay Warning */}
-                            <div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-all duration-300 transform scale-90 group-hover:scale-100">
-                                <div className="bg-black/80 backdrop-blur-md border border-red-500/30 px-4 py-2 rounded-lg flex items-center gap-2 shadow-xl">
-                                    <div className="w-2 h-2 rounded-full bg-red-500 animate-pulse"></div>
-                                    <span className="text-xs font-mono text-red-400 font-bold">OUTDATED</span>
-                                </div>
-                            </div>
-                        </div>
-                        <div className="mt-8">
-                            <h3 className="text-xl font-bold mb-3 text-white">{t('problem.screenshotTrap')}</h3>
-                            <p className="text-sm text-white/40 leading-relaxed font-medium">
-                                {t('problem.screenshotTrapDesc')}
-                            </p>
-                        </div>
-                    </div>
-
-                    {/* Card 3: The Style Prison */}
-                    <div className="group relative bg-[#1A1A1A] rounded-2xl p-8 hover:bg-[#222] transition-colors duration-500 overflow-hidden min-h-[360px] flex flex-col border border-white/5 hover:border-white/10">
-                        <div className="flex-1 relative w-full flex items-center justify-center">
-                            <div className="flex items-center gap-4">
-                                {/* Locked Color */}
-                                <div className="relative group/lock">
-                                    <div className="w-16 h-16 rounded-full bg-blue-600 shadow-[0_0_20px_rgba(37,99,235,0.3)] flex items-center justify-center border-4 border-[#1A1A1A] ring-1 ring-white/10">
-                                        <Lock className="w-5 h-5 text-white/90" />
-                                    </div>
-                                    <div className="absolute -bottom-8 left-1/2 -translate-x-1/2 text-[9px] font-mono text-white/30 uppercase tracking-wider opacity-0 group-hover/lock:opacity-100 transition-opacity">Locked</div>
-                                </div>
-
-                                {/* Desired Colors (Faded) */}
-                                <div className="flex flex-col gap-2 opacity-30 blur-[1px] group-hover:blur-0 group-hover:opacity-50 transition-all">
-                                    <div className="w-8 h-8 rounded-full bg-purple-500 border border-white/10"></div>
-                                    <div className="w-8 h-8 rounded-full bg-pink-500 border border-white/10"></div>
-                                </div>
-                            </div>
-                        </div>
-                        <div className="mt-8">
-                            <h3 className="text-xl font-bold mb-3 text-white">{t('problem.enterpriseBeige')}</h3>
-                            <p className="text-sm text-white/40 leading-relaxed font-medium">
-                                {t('problem.enterpriseBeigeDesc')}
-                            </p>
-                        </div>
-                    </div>
-
-                </div>
-            </div>
-        </section>
-    );
-}
diff --git a/src/components/landing/SolutionSection.tsx b/src/components/landing/SolutionSection.tsx
deleted file mode 100644
index 178b552..0000000
--- a/src/components/landing/SolutionSection.tsx
+++ /dev/null
@@ -1,256 +0,0 @@
-import React from 'react';
-import { WandSparkles, FileCode, Palette, ShieldCheck, HardDrive, Layers, Lock } from 'lucide-react';
-import { useTranslation } from 'react-i18next';
-
-function getFlagCode(country: string): string {
-    switch (country) {
-        case 'UK':
-            return 'gb';
-        case 'CN':
-            return 'cn';
-        case 'JP':
-            return 'jp';
-        default:
-            return country.toLowerCase();
-    }
-}
-
-export function SolutionSection(): React.ReactElement {
-    const { t } = useTranslation();
-    return (
-        <section id="architecture" className="py-32 bg-brand-canvas relative border-b border-brand-border/60 overflow-hidden">
-
-            {/* Background Decor */}
-            <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[800px] h-[500px] bg-brand-blue/5 rounded-full blur-[120px] pointer-events-none"></div>
-
-            {/* Header */}
-            <div className="container mx-auto px-6 mb-24 relative z-10">
-                <div className="max-w-4xl">
-                    <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-brand-primary/5 border border-brand-primary/10 text-brand-primary/60 mb-8 font-mono text-[10px] uppercase tracking-widest font-bold opacity-0 animate-slide-up [animation-delay:200ms]">
-                        <Layers className="w-3 h-3" />
-                        {t('solution.badge')}
-                    </div>
-                    <h2 className="text-5xl md:text-7xl font-bold text-brand-dark tracking-tighter leading-[1.1] mb-8 opacity-0 animate-slide-up [animation-delay:300ms]">
-                        {t('solution.title')} <br />
-                        <span className="font-serif italic font-normal text-brand-primary">{t('solution.subtitle')}</span>
-                    </h2>
-                    <p className="text-xl text-brand-secondary max-w-2xl leading-relaxed font-medium opacity-0 animate-slide-up [animation-delay:400ms] text-balance">
-                        {t('solution.description')}
-                    </p>
-                </div>
-            </div>
-
-            {/* Bento Grid */}
-            <div className="container mx-auto px-6 relative z-10">
-                <div className="grid grid-cols-1 md:grid-cols-12 gap-6 auto-rows-[minmax(340px,auto)]">
-
-                    {/* Card 1: Advanced Diagram as Code (Span 7) */}
-                    <div className="md:col-span-7 bg-white rounded-[2.5rem] border border-brand-border p-8 md:p-12 relative overflow-hidden group hover:shadow-2xl hover:shadow-brand-blue/5 transition-all duration-700 flex flex-col justify-between">
-
-                        <div className="absolute top-0 right-0 w-[60%] h-full bg-gradient-to-l from-gray-50 to-transparent pointer-events-none"></div>
-
-                        <div className="relative z-10 max-w-[50%]">
-                            <div className="w-12 h-12 rounded-2xl bg-brand-primary text-white flex items-center justify-center mb-6 shadow-lg shadow-brand-primary/20">
-                                <FileCode className="w-6 h-6" />
-                            </div>
-                            <h3 className="text-3xl font-bold text-brand-dark mb-4 tracking-tight">{t('solution.diagramAsCode')}</h3>
-                            <p className="text-brand-secondary text-lg leading-relaxed">
-                                {t('solution.diagramAsCodeDesc')}
-                            </p>
-                        </div>
-
-                        {/* Visual Side (Absolute right) */}
-                        <div className="absolute right-[-20px] top-[10%] bottom-[10%] w-[45%] flex flex-col justify-center transition-transform duration-700 group-hover:-translate-x-4">
-                            {/* Code Editor */}
-                            <div className="bg-[#1e1e1e] rounded-xl shadow-2xl p-4 border border-gray-800 transform rotate-2 group-hover:rotate-0 transition-transform duration-500 origin-center z-20 relative">
-                                <div className="flex gap-1.5 mb-3 border-b border-white/10 pb-2">
-                                    <div className="w-2 h-2 rounded-full bg-red-500/80"></div>
-                                    <div className="w-2 h-2 rounded-full bg-yellow-500/80"></div>
-                                    <div className="w-2 h-2 rounded-full bg-green-500/80"></div>
-                                </div>
-                                <div className="font-mono text-[10px] space-y-1.5">
-                                    <div className="text-gray-400">{'// define.ts'}</div>
-                                    <div><span className="text-purple-400">const</span> <span className="text-blue-300">api</span> = <span className="text-yellow-200">Node</span>();</div>
-                                    <div><span className="text-purple-400">const</span> <span className="text-blue-300">db</span> = <span className="text-yellow-200">Node</span>();</div>
-                                    <div><span className="text-blue-300">api</span>.<span className="text-green-300">connect</span>(<span className="text-blue-300">db</span>);</div>
-                                </div>
-                            </div>
-
-                            {/* Arrow */}
-                            <div className="h-8 flex justify-center items-center my-2 relative z-10">
-                                <div className="w-0.5 h-full bg-brand-border group-hover:bg-brand-blue transition-colors"></div>
-                                <div className="absolute bottom-0 w-2 h-2 border-r border-b border-brand-border group-hover:border-brand-blue rotate-45 transform translate-y-[-4px] transition-colors"></div>
-                            </div>
-
-                            {/* Rendered Block */}
-                            <div className="bg-white rounded-xl shadow-[0_20px_40px_-12px_rgba(0,0,0,0.1)] border border-brand-border p-3 transform -rotate-1 group-hover:rotate-0 transition-transform duration-500 origin-center z-10 flex flex-col items-center gap-2">
-                                <div className="w-24 h-8 bg-brand-canvas border border-brand-border rounded flex items-center justify-center text-[8px] font-bold text-brand-primary">API Service</div>
-                                <div className="h-4 w-px bg-brand-border"></div>
-                                <div className="w-24 h-8 bg-brand-canvas border border-brand-border rounded flex items-center justify-center text-[8px] font-bold text-brand-primary">Postgres DB</div>
-                            </div>
-                        </div>
-                    </div>
-
-                    {/* Card 2: Flowpilot AI (Span 5) */}
-                    <div className="md:col-span-5 bg-[#0A0A0A] rounded-[2.5rem] p-8 md:p-12 flex flex-col relative overflow-hidden group border border-white/10 shadow-2xl min-h-[400px]">
-                        <div className="absolute inset-0 bg-[radial-gradient(circle_at_top_right,#222_0%,transparent_60%)]"></div>
-                        <div className="absolute inset-0 noise-overlay opacity-10 mix-blend-overlay"></div>
-
-                        {/* Content Top */}
-                        <div className="relative z-20 mb-auto">
-                            <div className="flex items-center gap-2 mb-3 text-brand-blue font-mono text-[10px] uppercase tracking-widest">
-                                <WandSparkles className="w-3 h-3" />
-                                <span>{t('solution.aiAssistant')}</span>
-                            </div>
-                            <h3 className="text-3xl font-bold text-white mb-2 tracking-tight">{t('solution.flowpilotAI')}</h3>
-                            <p className="text-white/60 text-base leading-relaxed">
-                                {t('solution.flowpilotAIDesc')}
-                            </p>
-                        </div>
-
-                        {/* Visual Bottom - Chat Interface */}
-                        <div className="relative w-full mt-8">
-                            <div className="space-y-3">
-                                {/* User Message */}
-                                <div className="flex justify-end transform translate-x-0 transition-transform duration-500 delay-100">
-                                    <div className="bg-[#222] border border-white/10 text-white text-xs px-4 py-3 rounded-2xl rounded-tr-sm shadow-lg max-w-[85%]">
-                                        {t('solution.addRedisCache')}
-                                    </div>
-                                </div>
-                                {/* AI Thinking */}
-                                <div className="flex justify-start">
-                                    <div className="flex items-center gap-2">
-                                        <div className="w-6 h-6 rounded-full bg-brand-blue/20 flex items-center justify-center border border-brand-blue/30">
-                                            <WandSparkles className="w-3 h-3 text-brand-blue animate-pulse" />
-                                        </div>
-                                        <div className="h-1 w-1 bg-brand-blue rounded-full animate-bounce [animation-delay:0ms]"></div>
-                                        <div className="h-1 w-1 bg-brand-blue rounded-full animate-bounce [animation-delay:150ms]"></div>
-                                        <div className="h-1 w-1 bg-brand-blue rounded-full animate-bounce [animation-delay:300ms]"></div>
-                                    </div>
-                                </div>
-                                {/* AI Result */}
-                                <div className="flex justify-start w-full">
-                                    <div className="bg-[#151515] border border-green-500/20 rounded-xl p-3 shadow-lg w-full max-w-[90%] relative overflow-hidden group-hover:border-green-500/40 transition-colors">
-                                        <div className="absolute top-0 left-0 w-0.5 h-full bg-green-500/50"></div>
-                                        <div className="font-mono text-[10px] text-gray-400 space-y-1.5 pl-2">
-                                            <div className="flex justify-between">
-                                                <span className="text-gray-500">diff --git a/diagram.tsx</span>
-                                            </div>
-                                            <div className="text-green-400">{`+ const redis = new Node({ type: 'Redis' }); `}</div>
-                                            <div className="text-green-400">+ api.connect(redis);</div>
-                                            <div className="text-green-400">+ redis.connect(db);</div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-
-                    {/* Card 3: Local First (Span 4) */}
-                    <div className="md:col-span-4 bg-white rounded-[2.5rem] border border-brand-border p-8 md:p-12 flex flex-col justify-between group hover:border-brand-primary/20 transition-all relative overflow-hidden min-h-[320px]">
-                        <div className="absolute right-0 top-0 p-12 opacity-[0.03] group-hover:opacity-[0.08] transition-opacity transform group-hover:scale-110 duration-700 pointer-events-none">
-                            <ShieldCheck className="w-64 h-64" />
-                        </div>
-
-                        <div className="relative z-10 max-w-md">
-                            <div className="w-12 h-12 rounded-2xl bg-gray-50 flex items-center justify-center text-gray-900 mb-6 group-hover:scale-110 transition-transform border border-gray-100">
-                                <Lock className="w-6 h-6" />
-                            </div>
-                            <h3 className="text-2xl font-bold text-brand-dark mb-3">{t('solution.localPrivate')}</h3>
-                            <p className="text-brand-secondary text-lg leading-relaxed">
-                                {t('solution.localPrivateDesc')}
-                            </p>
-                        </div>
-
-                        <div className="relative z-10 mt-8 flex items-center gap-4">
-                            <div className="flex items-center gap-2 px-3 py-1.5 bg-gray-50 rounded-full border border-gray-100 text-[11px] font-mono text-gray-600 font-medium">
-                                <div className="w-1.5 h-1.5 rounded-full bg-green-500"></div>
-                                {t('solution.offlineReady')}
-                            </div>
-                            <div className="flex items-center gap-2 px-3 py-1.5 bg-gray-50 rounded-full border border-gray-100 text-[11px] font-mono text-gray-600 font-medium">
-                                <HardDrive className="w-3 h-3" />
-                                {t('solution.localFileSystem')}
-                            </div>
-                        </div>
-                    </div>
-
-                    {/* Card 4: Aesthetics (Span 4) */}
-                    <div className="md:col-span-4 bg-gradient-to-br from-gray-50 via-white to-purple-50/30 rounded-[2.5rem] border border-brand-border p-8 md:p-12 flex flex-col justify-between group hover:border-purple-200 transition-all relative overflow-hidden min-h-[320px]">
-                        {/* Decorative Background */}
-                        <div className="absolute inset-0 bg-[radial-gradient(#e5e7eb_1px,transparent_1px)] [background-size:20px_20px] opacity-30"></div>
-                        <div className="absolute -right-20 -top-20 w-64 h-64 bg-gradient-to-br from-brand-blue/20 to-purple-500/20 rounded-full blur-[60px] opacity-0 group-hover:opacity-100 transition-opacity duration-1000"></div>
-
-                        <div className="relative z-10 max-w-md">
-                            <div className="w-12 h-12 rounded-2xl bg-purple-50 flex items-center justify-center text-purple-600 mb-6 group-hover:scale-110 transition-transform border border-purple-100/50">
-                                <Palette className="w-6 h-6" />
-                            </div>
-                            <h3 className="text-2xl font-bold text-brand-dark mb-3">{t('solution.amazingAesthetics')}</h3>
-                            <p className="text-brand-secondary text-lg leading-relaxed">
-                                {t('solution.amazingAestheticsDesc')}
-                            </p>
-                        </div>
-
-                        {/* Visual: Interactive Palette */}
-                        <div className="relative z-10 mt-8">
-                            <div className="flex items-center gap-3">
-                                {/* Swatch 1 */}
-                                <div className="group/swatch relative cursor-pointer">
-                                    <div className="w-10 h-10 rounded-full bg-[#FF5F57] shadow-sm ring-2 ring-white hover:scale-110 transition-transform"></div>
-                                    <div className="absolute -top-8 left-1/2 -translate-x-1/2 bg-black text-white text-[9px] px-2 py-1 rounded opacity-0 group-hover/swatch:opacity-100 transition-opacity whitespace-nowrap">Sunset Red</div>
-                                </div>
-                                {/* Swatch 2 */}
-                                <div className="group/swatch relative cursor-pointer">
-                                    <div className="w-10 h-10 rounded-full bg-[#FEBC2E] shadow-sm ring-2 ring-white hover:scale-110 transition-transform delay-75"></div>
-                                    <div className="absolute -top-8 left-1/2 -translate-x-1/2 bg-black text-white text-[9px] px-2 py-1 rounded opacity-0 group-hover/swatch:opacity-100 transition-opacity whitespace-nowrap">Amber Warning</div>
-                                </div>
-                                {/* Swatch 3 */}
-                                <div className="group/swatch relative cursor-pointer">
-                                    <div className="w-10 h-10 rounded-full bg-[#28C840] shadow-sm ring-2 ring-white hover:scale-110 transition-transform delay-100"></div>
-                                    <div className="absolute -top-8 left-1/2 -translate-x-1/2 bg-black text-white text-[9px] px-2 py-1 rounded opacity-0 group-hover/swatch:opacity-100 transition-opacity whitespace-nowrap">Success Green</div>
-                                </div>
-                                {/* Swatch 4 */}
-                                <div className="group/swatch relative cursor-pointer">
-                                    <div className="w-10 h-10 rounded-full bg-brand-blue shadow-sm ring-2 ring-white hover:scale-110 transition-transform delay-150"></div>
-                                    <div className="absolute -top-8 left-1/2 -translate-x-1/2 bg-black text-white text-[9px] px-2 py-1 rounded opacity-0 group-hover/swatch:opacity-100 transition-opacity whitespace-nowrap">Klein Blue</div>
-                                </div>
-
-                                <div className="w-px h-8 bg-brand-border mx-2"></div>
-
-                                <div className="text-xs font-mono text-brand-secondary bg-white border border-brand-border px-3 py-2 rounded-lg">
-                                    font-family: &apos;Inter&apos;, sans-serif;
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-
-                    {/* Card 5: Localization (Span 4) */}
-                    <div className="md:col-span-4 bg-white rounded-[2.5rem] border border-brand-border p-8 md:p-12 flex flex-col justify-between group hover:border-green-200 transition-all relative overflow-hidden min-h-[320px]">
-                        <div className="absolute right-0 bottom-0 p-8 opacity-[0.03] group-hover:opacity-[0.08] transition-opacity transform group-hover:-translate-y-2 duration-700 pointer-events-none">
-                            <svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" className="lucide lucide-globe"><circle cx="12" cy="12" r="10" /><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" /><path d="M2 12h20" /></svg>
-                        </div>
-
-                        <div className="relative z-10 max-w-md">
-                            <div className="w-12 h-12 rounded-2xl bg-green-50 flex items-center justify-center text-green-600 mb-6 group-hover:scale-110 transition-transform border border-green-100/50">
-                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="lucide lucide-globe"><circle cx="12" cy="12" r="10" /><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" /><path d="M2 12h20" /></svg>
-                            </div>
-                            <h3 className="text-2xl font-bold text-brand-dark mb-3">{t('solution.localization')}</h3>
-                            <p className="text-brand-secondary text-lg leading-relaxed">
-                                {t('solution.localizationDesc')}
-                            </p>
-                        </div>
-
-                        {/* Visual: Language Flags */}
-                        <div className="relative z-10 mt-8 flex flex-wrap gap-3">
-                            {['US', 'TR', 'DE', 'FR', 'ES', 'CN', 'JP'].map((country, index) => (
-                                <div key={country} className="w-10 h-10 rounded-full bg-gray-50 border border-gray-200 flex items-center justify-center shadow-sm overflow-hidden group-hover:-translate-y-1 transition-transform hover:!scale-110 duration-300" style={{ transitionDelay: `${index * 25}ms` }}>
-                                    <img src={`https://flagcdn.com/w40/${getFlagCode(country)}.png`} alt={`${country} flag`} className="w-full h-full object-cover" />
-                                </div>
-                            ))}
-                        </div>
-                    </div>
-
-                </div>
-            </div>
-        </section>
-    );
-}
diff --git a/src/components/landing/Testimonials.tsx b/src/components/landing/Testimonials.tsx
deleted file mode 100644
index 7727c2d..0000000
--- a/src/components/landing/Testimonials.tsx
+++ /dev/null
@@ -1,141 +0,0 @@
-import React from 'react';
-import { Github, ArrowUpRight, GitPullRequest, Construction, Users, Map, CheckCircle2, CircleDashed } from 'lucide-react';
-import { useTranslation } from 'react-i18next';
-
-export function Testimonials(): React.ReactElement {
-    const { t } = useTranslation();
-    return (
-        <section className="py-32 bg-[#08090A] border-t border-white/5 relative overflow-hidden select-none">
-            {/* Background Effects */}
-            <div className="absolute top-0 left-0 w-full h-full bg-[radial-gradient(circle_at_50%_0%,#1a1a1a_0%,transparent_70%)] pointer-events-none"></div>
-
-            <div className="container mx-auto px-6 relative z-10">
-
-                {/* Header */}
-                <div className="flex flex-col md:flex-row md:items-end justify-between mb-16 gap-6">
-                    <div className="max-w-2xl">
-                        <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/5 border border-white/10 text-white/60 mb-6 font-mono text-[10px] uppercase tracking-widest font-bold">
-                            <Construction className="w-3 h-3" />
-                            <span>{t('testimonials.badge')}</span>
-                        </div>
-                        <h2 className="text-5xl md:text-7xl font-bold text-white tracking-tighter mb-4 leading-[0.9]">
-                            {t('testimonials.title')} <br />
-                            <span className="font-serif italic font-normal text-white/50">{t('testimonials.subtitle')}</span>
-                        </h2>
-                        <p className="text-xl text-white/50 leading-relaxed max-w-lg font-medium">
-                            {t('testimonials.description')}
-                        </p>
-                    </div>
-
-                    <div className="flex items-center gap-4">
-                        <a href="https://github.com/Vrun-design/openflowkit" target="_blank" className="flex items-center gap-2 px-4 py-2 bg-white text-black rounded-full font-bold text-sm hover:bg-gray-200 transition-colors" rel="noreferrer">
-                            <Github className="w-4 h-4" />
-                            {t('testimonials.starTheRepo')}
-                        </a>
-                    </div>
-                </div>
-
-                <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-
-                    {/* GitHub Card */}
-                    <a href="https://github.com/Vrun-design/openflowkit" target="_blank" className="group relative bg-[#111] rounded-2xl p-8 border border-white/5 hover:border-white/20 transition-all duration-300 overflow-hidden flex flex-col justify-between h-[340px]" rel="noreferrer">
-                        <div className="absolute top-0 right-0 w-32 h-32 bg-white/5 rounded-full blur-[60px] -mr-16 -mt-16 transition-opacity opacity-0 group-hover:opacity-20"></div>
-
-                        <div className="flex items-center justify-between">
-                            <div className="w-12 h-12 rounded-xl bg-white/5 flex items-center justify-center border border-white/10 group-hover:scale-110 transition-transform">
-                                <Github className="w-6 h-6 text-white" />
-                            </div>
-                            <ArrowUpRight className="w-5 h-5 text-white/20 group-hover:text-white group-hover:translate-x-1 group-hover:-translate-y-1 transition-all" />
-                        </div>
-
-                        <div>
-                            <h3 className="text-xl font-bold text-white mb-2">{t('testimonials.openSource')}</h3>
-                            <p className="text-white/50 text-sm leading-relaxed mb-6">
-                                {t('testimonials.openSourceDesc')}
-                            </p>
-                            <div className="flex items-center gap-3 text-xs font-mono text-white/40">
-                                <span className="flex items-center gap-1"><GitPullRequest className="w-3 h-3" /> {t('testimonials.prsWelcome')}</span>
-                            </div>
-                        </div>
-                    </a>
-
-                    {/* Contributors Card */}
-                    <div className="group relative bg-[#111] rounded-2xl p-8 border border-white/5 hover:border-white/20 transition-all duration-300 overflow-hidden flex flex-col justify-between h-[340px]">
-                        <div className="absolute top-0 right-0 w-32 h-32 bg-brand-blue/10 rounded-full blur-[60px] -mr-16 -mt-16 transition-opacity opacity-0 group-hover:opacity-20"></div>
-
-                        <div className="flex items-center justify-between">
-                            <div className="w-12 h-12 rounded-xl bg-brand-blue/10 flex items-center justify-center border border-brand-blue/20 group-hover:scale-110 transition-transform">
-                                <Users className="w-5 h-5 text-brand-blue" />
-                            </div>
-                            <span className="text-[10px] font-mono text-white/30 border border-white/10 px-2 py-1 rounded bg-white/5">Contributors</span>
-                        </div>
-
-                        <div>
-                            <h3 className="text-xl font-bold text-white mb-2">{t('testimonials.community')}</h3>
-                            <p className="text-white/50 text-sm leading-relaxed mb-6">
-                                {t('testimonials.communityDesc')}
-                            </p>
-
-                            <div className="flex items-center -space-x-3">
-                                {[
-                                    { login: 'Vrun-design', name: 'Varun' },
-                                    { login: 'YunusEmreAlps', name: 'Yunus Emre' },
-                                    { login: 'namandhakad712', name: 'Naman Dhakad' },
-                                ].map((c) => (
-                                    <a
-                                        key={c.login}
-                                        href={`https://github.com/${c.login}`}
-                                        target="_blank"
-                                        rel="noopener noreferrer"
-                                        title={c.name}
-                                        className="w-10 h-10 rounded-full border-2 border-[#111] overflow-hidden relative z-0 hover:z-10 transition-transform hover:scale-110 block"
-                                    >
-                                        <img
-                                            src={`https://github.com/${c.login}.png?size=80`}
-                                            alt={c.name}
-                                            className="w-full h-full object-cover bg-white/5"
-                                        />
-                                    </a>
-                                ))}
-                                <div className="w-10 h-10 rounded-full border-2 border-[#111] bg-[#222] flex items-center justify-center text-[10px] text-white font-medium z-0">
-                                    +You
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-
-                    {/* Roadmap Card */}
-                    <div className="group relative bg-[#111] rounded-2xl p-8 border border-white/5 hover:border-white/20 transition-all duration-300 overflow-hidden flex flex-col justify-between h-[340px]">
-                        <div className="absolute top-0 right-0 w-32 h-32 bg-purple-500/10 rounded-full blur-[60px] -mr-16 -mt-16 transition-opacity opacity-0 group-hover:opacity-20"></div>
-
-                        <div className="flex items-center justify-between">
-                            <div className="w-12 h-12 rounded-xl bg-purple-500/10 flex items-center justify-center border border-purple-500/20 group-hover:scale-110 transition-transform">
-                                <Map className="w-5 h-5 text-purple-400" />
-                            </div>
-                            <span className="text-[10px] font-mono text-white/30 border border-white/10 px-2 py-1 rounded bg-white/5">2026</span>
-                        </div>
-
-                        <div>
-                            <h3 className="text-xl font-bold text-white mb-4">{t('testimonials.roadmap')}</h3>
-                            <div className="space-y-3">
-                                <div className="flex items-center gap-3">
-                                    <CheckCircle2 className="w-4 h-4 text-green-500" />
-                                    <span className="text-white/60 text-sm line-through decoration-white/20">{t('testimonials.coreRenderer')}</span>
-                                </div>
-                                <div className="flex items-center gap-3">
-                                    <CheckCircle2 className="w-4 h-4 text-green-500" />
-                                    <span className="text-white/60 text-sm line-through decoration-white/20">{t('testimonials.flowpilotAI')}</span>
-                                </div>
-                                <div className="flex items-center gap-3">
-                                    <CircleDashed className="w-4 h-4 text-purple-400 animate-spin-slow" />
-                                    <span className="text-white text-sm font-medium">{t('testimonials.pdfExport')}</span>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-
-                </div>
-            </div>
-        </section>
-    );
-}
diff --git a/src/components/landing/UseCases.tsx b/src/components/landing/UseCases.tsx
deleted file mode 100644
index 05f512f..0000000
--- a/src/components/landing/UseCases.tsx
+++ /dev/null
@@ -1,144 +0,0 @@
-import React from 'react';
-import { useTranslation } from 'react-i18next';
-import {
-    Terminal,
-    Figma,
-    GitBranch,
-    Share2,
-    Workflow
-} from 'lucide-react';
-
-export function UseCases(): React.ReactElement {
-    const { t } = useTranslation();
-    return (
-        <section id="workflows" className="py-32 bg-[#050505] relative overflow-hidden text-white selection:bg-brand-blue/30 border-t border-white/5">
-
-            {/* Subtle Background Mesh */}
-            <div className="absolute inset-0 bg-[linear-gradient(to_right,#ffffff03_1px,transparent_1px),linear-gradient(to_bottom,#ffffff03_1px,transparent_1px)] bg-[size:40px_40px] opacity-20 pointer-events-none"></div>
-
-            {/* Ambient Glows */}
-            <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[800px] h-[500px] bg-brand-blue/5 rounded-full blur-[120px] pointer-events-none"></div>
-
-            <div className="container mx-auto px-6 relative z-10">
-
-                {/* Header */}
-                <div className="flex flex-col items-center text-center mb-24 max-w-4xl mx-auto">
-                    <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/5 border border-white/10 text-white/60 mb-8 font-mono text-[10px] uppercase tracking-widest font-bold">
-                        <Workflow className="w-3 h-3" />
-                        <span>{t('workflows.badge')}</span>
-                    </div>
-                    <h2 className="text-5xl md:text-7xl font-bold tracking-tighter mb-8 text-white leading-[0.9]">
-                        {t('workflows.title')} <br />
-                        <span className="font-serif italic font-normal text-white/50">{t('workflows.subtitle')}</span>
-                    </h2>
-                    <p className="text-xl text-white/50 max-w-2xl leading-relaxed text-balance font-medium">
-                        {t('workflows.description')}
-                    </p>
-                </div>
-
-                {/* Persona Grid */}
-                <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 md:gap-8">
-
-                    {/* Persona 1: Engineering (Cyan/Blue Theme) */}
-                    <div className="group relative bg-[#0A0A0A] rounded-[2rem] border border-white/5 overflow-hidden flex flex-col hover:border-cyan-500/30 transition-all duration-500 hover:shadow-[0_0_50px_-12px_rgba(6,182,212,0.15)]">
-                        <div className="absolute inset-0 bg-gradient-to-b from-cyan-500/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
-
-                        <div className="p-8 relative z-10 flex-1">
-                            <div className="w-12 h-12 rounded-xl bg-cyan-950/30 flex items-center justify-center border border-cyan-500/20 text-cyan-400 mb-6 group-hover:scale-110 transition-transform">
-                                <Terminal className="w-6 h-6" />
-                            </div>
-                            <h3 className="text-2xl font-bold text-white mb-2">{t('workflows.engineering')}</h3>
-                            <p className="text-sm text-cyan-400 font-mono mb-4">{t('workflows.diagramAsCode')}</p>
-                            <p className="text-neutral-400 text-sm leading-relaxed mb-8">
-                                {t('workflows.engineeringDesc')}
-                            </p>
-
-                            {/* Visual: Mini Code Editor */}
-                            <div className="bg-[#050505] rounded-xl border border-white/10 p-4 font-mono text-[10px] text-gray-500 leading-relaxed shadow-inner">
-                                <div className="flex items-center gap-2 border-b border-white/5 pb-2 mb-2">
-                                    <div className="w-2 h-2 rounded-full bg-red-500/20"></div>
-                                    <div className="w-2 h-2 rounded-full bg-yellow-500/20"></div>
-                                    <div className="w-2 h-2 rounded-full bg-green-500/20"></div>
-                                    <div className="ml-auto text-xs text-white/20">architecture.dsl</div>
-                                </div>
-                                <div><span className="text-cyan-300">Auth Service</span></div>
-                                <div className="pl-4"><span className="text-white/70">-&gt;</span> <span className="text-cyan-300">API Gateway</span></div>
-                                <div className="pl-4"><span className="text-white/70">-&gt;</span> <span className="text-cyan-300">Redis Cache</span></div>
-                                <div className="pl-4"><span className="text-white/70">-&gt;</span> <span className="text-cyan-300">Postgres DB</span></div>
-                            </div>
-                        </div>
-                    </div>
-
-                    {/* Persona 2: Design (Violet/Purple Theme) */}
-                    <div className="group relative bg-[#0A0A0A] rounded-[2rem] border border-white/5 overflow-hidden flex flex-col hover:border-violet-500/30 transition-all duration-500 hover:shadow-[0_0_50px_-12px_rgba(139,92,246,0.15)]">
-                        <div className="absolute inset-0 bg-gradient-to-b from-violet-500/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
-
-                        <div className="p-8 relative z-10 flex-1">
-                            <div className="w-12 h-12 rounded-xl bg-violet-950/30 flex items-center justify-center border border-violet-500/20 text-violet-400 mb-6 group-hover:scale-110 transition-transform">
-                                <Figma className="w-6 h-6" />
-                            </div>
-                            <h3 className="text-2xl font-bold text-white mb-2">{t('workflows.design')}</h3>
-                            <p className="text-sm text-violet-400 font-mono mb-4">{t('workflows.theVisualLayer')}</p>
-                            <p className="text-neutral-400 text-sm leading-relaxed mb-8">
-                                {t('workflows.designDesc')}
-                            </p>
-
-                            {/* Visual: Figma Canvas */}
-                            <div className="h-[140px] bg-[#1e1e1e] rounded-xl border border-white/10 relative overflow-hidden flex items-center justify-center">
-                                <div className="absolute inset-0 bg-[radial-gradient(#ffffff05_1px,transparent_1px)] [background-size:12px_12px]"></div>
-
-                                <div className="bg-[#0A0A0A] border border-violet-500/50 rounded p-3 w-32 shadow-2xl relative transform group-hover:-translate-y-1 transition-transform">
-                                    <div className="absolute -top-3 left-0 bg-violet-500 text-white text-[8px] px-1.5 py-0.5 rounded">Group 1</div>
-                                    <div className="flex gap-2 mb-2">
-                                        <div className="w-6 h-6 rounded bg-violet-500/20"></div>
-                                        <div className="flex-1 space-y-1">
-                                            <div className="h-1.5 w-full bg-white/20 rounded"></div>
-                                            <div className="h-1.5 w-1/2 bg-white/20 rounded"></div>
-                                        </div>
-                                    </div>
-                                </div>
-                                {/* Cursor */}
-                                <svg className="w-4 h-4 text-white fill-white absolute bottom-4 right-10 drop-shadow-lg" viewBox="0 0 24 24"><path d="M3 3l7.07 16.97 2.51-7.39 7.39-2.51L3 3z" /></svg>
-                            </div>
-                        </div>
-                    </div>
-
-                    {/* Persona 3: Export & Share (Amber/Orange Theme) */}
-                    <div className="group relative bg-[#0A0A0A] rounded-[2rem] border border-white/5 overflow-hidden flex flex-col hover:border-amber-500/30 transition-all duration-500 hover:shadow-[0_0_50px_-12px_rgba(245,158,11,0.15)]">
-                        <div className="absolute inset-0 bg-gradient-to-b from-amber-500/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
-
-                        <div className="p-8 relative z-10 flex-1">
-                            <div className="w-12 h-12 rounded-xl bg-amber-950/30 flex items-center justify-center border border-amber-500/20 text-amber-400 mb-6 group-hover:scale-110 transition-transform">
-                                <Share2 className="w-6 h-6" />
-                            </div>
-                            <h3 className="text-2xl font-bold text-white mb-2">{t('workflows.exportShare')}</h3>
-                            <p className="text-sm text-amber-400 font-mono mb-4">{t('workflows.pixelPerfectOutput')}</p>
-                            <p className="text-neutral-400 text-sm leading-relaxed mb-8">
-                                {t('workflows.exportShareDesc')}
-                            </p>
-
-                            {/* Visual: Export Formats */}
-                            <div className="h-[140px] bg-[#151515] rounded-xl border border-white/10 p-4 relative overflow-hidden flex flex-col justify-center">
-                                <div className="space-y-2.5">
-                                    <div className="flex items-center gap-3 p-2 bg-white/5 rounded border border-white/5 group-hover:border-amber-500/20 transition-colors">
-                                        <div className="w-6 h-6 bg-amber-500/10 rounded flex items-center justify-center text-[9px] text-amber-400 font-bold">SVG</div>
-                                        <div className="text-[10px] text-white/60 font-mono">{t('workflows.vectorEditable')}</div>
-                                    </div>
-                                    <div className="flex items-center gap-3 p-2 bg-white/5 rounded border border-white/5 group-hover:border-amber-500/20 transition-colors">
-                                        <div className="w-6 h-6 bg-amber-500/10 rounded flex items-center justify-center text-[9px] text-amber-400 font-bold">PNG</div>
-                                        <div className="text-[10px] text-white/60 font-mono">{t('workflows.rasterHighRes')}</div>
-                                    </div>
-                                    <div className="flex items-center gap-3 p-2 bg-white/5 rounded border border-white/5 group-hover:border-amber-500/20 transition-colors">
-                                        <div className="w-6 h-6 bg-amber-500/10 rounded flex items-center justify-center text-[9px] text-amber-400 font-bold">JSON</div>
-                                        <div className="text-[10px] text-white/60 font-mono">{t('workflows.dataSaveRestore')}</div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-
-                </div>
-            </div>
-        </section>
-    );
-}
diff --git a/src/components/lightweight-nodes.handleInteraction.test.tsx b/src/components/lightweight-nodes.handleInteraction.test.tsx
index b9ca042..cea1375 100644
--- a/src/components/lightweight-nodes.handleInteraction.test.tsx
+++ b/src/components/lightweight-nodes.handleInteraction.test.tsx
@@ -52,10 +52,13 @@ vi.mock('@/lib/reactflowCompat', async (importOriginal) => {
 });
 
 vi.mock('@/store', () => ({
-  useFlowStore: (selector?: (state: { selectedNodeId: string | null; setNodes: ReturnType<typeof vi.fn> }) => unknown) => {
-    const state = { selectedNodeId, setNodes: vi.fn() };
-    return typeof selector === 'function' ? selector(state) : state;
-  },
+  useFlowStore: Object.assign(
+    (selector?: (state: Record<string, unknown>) => unknown) => {
+      const state = { selectedNodeId, setNodes: vi.fn(), setEdges: vi.fn(), nodes: [], edges: [] };
+      return typeof selector === 'function' ? selector(state) : state;
+    },
+    { getState: () => ({ nodes: [], edges: [], setNodes: vi.fn(), setEdges: vi.fn() }) },
+  ),
 }));
 
 afterEach(() => {
diff --git a/src/components/properties/BulkNodeProperties.tsx b/src/components/properties/BulkNodeProperties.tsx
index ebdddb9..30415e8 100644
--- a/src/components/properties/BulkNodeProperties.tsx
+++ b/src/components/properties/BulkNodeProperties.tsx
@@ -16,6 +16,7 @@ import {
     InspectorSectionDivider,
     InspectorSummaryCard,
 } from './InspectorPrimitives';
+import { createPropertyInputKeyDownHandler } from './propertyInputBehavior';
 
 interface BulkNodePropertiesProps {
     selectedNodes: Node<NodeData>[];
@@ -71,6 +72,7 @@ export function BulkNodeProperties({ selectedNodes, onApply }: BulkNodePropertie
     const [labelPrefix, setLabelPrefix] = useState('');
     const [labelSuffix, setLabelSuffix] = useState('');
     const [activeSection, setActiveSection] = useState('shape');
+    const handleInputKeyDown = createPropertyInputKeyDownHandler({ blurOnEnter: true });
 
     const changeSummary = useMemo(
         () => buildChangeSummary(shape, color, colorMode, customColor, icon, customIconUrl, labelPrefix, labelSuffix),
@@ -159,6 +161,7 @@ export function BulkNodeProperties({ selectedNodes, onApply }: BulkNodePropertie
                         <input
                             value={labelPrefix}
                             onChange={(event) => setLabelPrefix(event.target.value)}
+                            onKeyDown={handleInputKeyDown}
                             placeholder={t('properties.prefixOptional', 'Prefix (optional)')}
                             className={INSPECTOR_INPUT_CLASSNAME}
                         />
@@ -167,6 +170,7 @@ export function BulkNodeProperties({ selectedNodes, onApply }: BulkNodePropertie
                         <input
                             value={labelSuffix}
                             onChange={(event) => setLabelSuffix(event.target.value)}
+                            onKeyDown={handleInputKeyDown}
                             placeholder={t('properties.suffixOptional', 'Suffix (optional)')}
                             className={INSPECTOR_INPUT_CLASSNAME}
                         />
diff --git a/src/components/properties/ColorPicker.tsx b/src/components/properties/ColorPicker.tsx
index 9216ccf..9ee0776 100644
--- a/src/components/properties/ColorPicker.tsx
+++ b/src/components/properties/ColorPicker.tsx
@@ -86,7 +86,7 @@ export const ColorPicker: React.FC<ColorPickerProps> = ({
                                     key={mode}
                                     type="button"
                                     onClick={() => onColorModeChange(mode)}
-                                    className={`rounded-[calc(var(--brand-radius)-4px)] px-2 py-1 text-xs font-medium transition-colors ${
+                                    className={`rounded-[var(--radius-xs)] px-2 py-1 text-xs font-medium transition-colors ${
                                         selected
                                             ? 'bg-white text-slate-900 shadow-sm'
                                             : 'text-slate-500 hover:text-slate-700'
diff --git a/src/components/properties/CustomColorPopover.tsx b/src/components/properties/CustomColorPopover.tsx
index 822579c..74ef87e 100644
--- a/src/components/properties/CustomColorPopover.tsx
+++ b/src/components/properties/CustomColorPopover.tsx
@@ -83,7 +83,7 @@ export function CustomColorPopover({
     return createPortal(
         <div
             ref={popupRef}
-            className="fixed z-[100] overflow-y-auto rounded-[calc(var(--brand-radius)+2px)] border border-slate-200 bg-white p-3 shadow-[0_18px_48px_rgba(15,23,42,0.16)]"
+            className="fixed z-[100] overflow-y-auto rounded-[var(--radius-lg)] border border-slate-200 bg-white p-3 shadow-[0_18px_48px_rgba(15,23,42,0.16)]"
             style={{
                 top: position.top,
                 left: position.left,
diff --git a/src/components/properties/DiagramNodePropertiesRouter.tsx b/src/components/properties/DiagramNodePropertiesRouter.tsx
index 7f72cf2..6dcc310 100644
--- a/src/components/properties/DiagramNodePropertiesRouter.tsx
+++ b/src/components/properties/DiagramNodePropertiesRouter.tsx
@@ -17,6 +17,11 @@ interface DiagramNodePropertiesRouterProps {
   onAddMindmapSibling?: (nodeId: string) => void;
   onAddArchitectureService?: (sourceId: string) => void;
   onCreateArchitectureBoundary?: (sourceId: string) => void;
+  onApplyArchitectureTemplate?: (sourceId: string, templateId: import('@/lib/architectureTemplates').ArchitectureTemplateId) => void;
+  onGenerateEntityFields?: (nodeId: string) => Promise<void> | void;
+  onSuggestArchitectureNode?: (nodeId: string) => Promise<void> | void;
+  onConvertEntitySelectionToClassDiagram?: () => void;
+  onOpenMermaidCodeEditor?: () => void;
 }
 
 const NODE_TYPE_PANEL_MAP: Partial<Record<NodeType, DiagramType>> = {
@@ -25,6 +30,7 @@ const NODE_TYPE_PANEL_MAP: Partial<Record<NodeType, DiagramType>> = {
   [NodeType.ER_ENTITY]: 'erDiagram',
   [NodeType.JOURNEY]: 'journey',
   [NodeType.MINDMAP]: 'mindmap',
+  [NodeType.SEQUENCE_PARTICIPANT]: 'sequence',
 };
 
 export function resolveNodePropertiesPanelDiagramType(
@@ -43,6 +49,11 @@ export function DiagramNodePropertiesRouter({
   onAddMindmapSibling,
   onAddArchitectureService,
   onCreateArchitectureBoundary,
+  onApplyArchitectureTemplate,
+  onGenerateEntityFields,
+  onSuggestArchitectureNode,
+  onConvertEntitySelectionToClassDiagram,
+  onOpenMermaidCodeEditor,
 }: DiagramNodePropertiesRouterProps): ReactElement {
   const { tabs, activeTabId } = useFlowStore();
   const activeTab = tabs.find((tab) => tab.id === activeTabId);
@@ -70,5 +81,10 @@ export function DiagramNodePropertiesRouter({
     onAddMindmapSibling,
     onAddArchitectureService,
     onCreateArchitectureBoundary,
+    onApplyArchitectureTemplate,
+    onGenerateEntityFields,
+    onSuggestArchitectureNode,
+    onConvertEntitySelectionToClassDiagram,
+    onOpenMermaidCodeEditor,
   });
 }
diff --git a/src/components/properties/EdgeProperties.tsx b/src/components/properties/EdgeProperties.tsx
index 085805a..b4dd36e 100644
--- a/src/components/properties/EdgeProperties.tsx
+++ b/src/components/properties/EdgeProperties.tsx
@@ -1,7 +1,8 @@
 import React, { useState } from 'react';
 import type { Edge } from '@/lib/reactflowCompat';
+import type { FlowEdge } from '@/lib/types';
 import { useFlowStore } from '@/store';
-import { Activity, GitBranch, MessageSquareText, Network, Palette, Route, Trash2 } from 'lucide-react';
+import { Activity, GitBranch, MessageSquareText, Network, Palette, Route, Trash2, Waypoints } from 'lucide-react';
 import { Button } from '../ui/Button';
 import { useTranslation } from 'react-i18next';
 import { EdgeConditionSection } from './edge/EdgeConditionSection';
@@ -10,6 +11,8 @@ import { EdgeLabelSection } from './edge/EdgeLabelSection';
 import { EdgeRouteSection } from './edge/EdgeRouteSection';
 import { EdgeStyleSection } from './edge/EdgeStyleSection';
 import { ArchitectureEdgeSemanticsSection } from './edge/ArchitectureEdgeSemanticsSection';
+import { EdgeRelationSection } from './edge/EdgeRelationSection';
+import { SequenceMessageSection } from './edge/SequenceMessageSection';
 import { CollapsibleSection } from '../ui/CollapsibleSection';
 import { InspectorFooter, InspectorSectionDivider } from './InspectorPrimitives';
 
@@ -29,7 +32,9 @@ export const EdgeProperties: React.FC<EdgePropertiesProps> = ({
     const sourceNode = nodes.find((node) => node.id === selectedEdge.source);
     const targetNode = nodes.find((node) => node.id === selectedEdge.target);
     const isArchitectureEdge = sourceNode?.type === 'architecture' && targetNode?.type === 'architecture';
-    const defaultSection = isArchitectureEdge ? 'architecture' : 'route';
+    const isEntityRelationEdge = sourceNode?.type === 'er_entity' && targetNode?.type === 'er_entity';
+    const isSequenceEdge = selectedEdge.type === 'sequence_message';
+    const defaultSection = isArchitectureEdge ? 'architecture' : isSequenceEdge ? 'sequence' : 'route';
     const [panelState, setPanelState] = useState<{ edgeId: string; activeSection: string }>({
         edgeId: selectedEdge.id,
         activeSection: defaultSection,
@@ -60,50 +65,76 @@ export const EdgeProperties: React.FC<EdgePropertiesProps> = ({
                 </CollapsibleSection>
             )}
 
-            <CollapsibleSection
-                title={t('connectionPanel.label', 'Label')}
-                icon={<MessageSquareText className="w-3.5 h-3.5" />}
-                isOpen={activeSection === 'label'}
-                onToggle={() => toggleSection('label')}
-            >
-                <EdgeLabelSection selectedEdge={selectedEdge} onChange={onChange} />
-            </CollapsibleSection>
+            {isEntityRelationEdge && (
+                <CollapsibleSection
+                    title="Relation"
+                    icon={<GitBranch className="w-3.5 h-3.5" />}
+                    isOpen={activeSection === 'relation'}
+                    onToggle={() => toggleSection('relation')}
+                >
+                    <EdgeRelationSection selectedEdge={selectedEdge as FlowEdge} onChange={onChange} />
+                </CollapsibleSection>
+            )}
 
-            <CollapsibleSection
-                title={t('connectionPanel.route', 'Route')}
-                icon={<Route className="w-3.5 h-3.5" />}
-                isOpen={activeSection === 'route'}
-                onToggle={() => toggleSection('route')}
-            >
-                <EdgeRouteSection selectedEdge={selectedEdge} onChange={onChange} />
-            </CollapsibleSection>
+            {isSequenceEdge && (
+                <CollapsibleSection
+                    title="Message"
+                    icon={<MessageSquareText className="w-3.5 h-3.5" />}
+                    isOpen={activeSection === 'sequence'}
+                    onToggle={() => toggleSection('sequence')}
+                >
+                    <SequenceMessageSection selectedEdge={selectedEdge as FlowEdge} onChange={onChange} />
+                </CollapsibleSection>
+            )}
+
+            {!isSequenceEdge && (
+                <>
+                    <CollapsibleSection
+                        title={t('connectionPanel.label', 'Label')}
+                        icon={<MessageSquareText className="w-3.5 h-3.5" />}
+                        isOpen={activeSection === 'label'}
+                        onToggle={() => toggleSection('label')}
+                    >
+                        <EdgeLabelSection selectedEdge={selectedEdge} onChange={onChange} />
+                    </CollapsibleSection>
 
-            <CollapsibleSection
-                title={t('properties.color', 'Color')}
-                icon={<Palette className="w-3.5 h-3.5" />}
-                isOpen={activeSection === 'color'}
-                onToggle={() => toggleSection('color')}
-            >
-                <EdgeColorSection selectedEdge={selectedEdge} onChange={onChange} />
-            </CollapsibleSection>
+                    <CollapsibleSection
+                        title={t('connectionPanel.route', 'Route')}
+                        icon={<Route className="w-3.5 h-3.5" />}
+                        isOpen={activeSection === 'route'}
+                        onToggle={() => toggleSection('route')}
+                    >
+                        <EdgeRouteSection selectedEdge={selectedEdge} onChange={onChange} />
+                    </CollapsibleSection>
 
-            <CollapsibleSection
-                title={t('connectionPanel.appearance', 'Appearance')}
-                icon={<Activity className="w-3.5 h-3.5" />}
-                isOpen={activeSection === 'appearance'}
-                onToggle={() => toggleSection('appearance')}
-            >
-                <EdgeStyleSection selectedEdge={selectedEdge} onChange={onChange} />
-            </CollapsibleSection>
+                    <CollapsibleSection
+                        title={t('properties.color', 'Color')}
+                        icon={<Palette className="w-3.5 h-3.5" />}
+                        isOpen={activeSection === 'color'}
+                        onToggle={() => toggleSection('color')}
+                    >
+                        <EdgeColorSection selectedEdge={selectedEdge} onChange={onChange} />
+                    </CollapsibleSection>
 
-            <CollapsibleSection
-                title={t('connectionPanel.condition', 'Condition')}
-                icon={<GitBranch className="w-3.5 h-3.5" />}
-                isOpen={activeSection === 'condition'}
-                onToggle={() => toggleSection('condition')}
-            >
-                <EdgeConditionSection selectedEdge={selectedEdge} onChange={onChange} />
-            </CollapsibleSection>
+                    <CollapsibleSection
+                        title={t('connectionPanel.appearance', 'Appearance')}
+                        icon={<Activity className="w-3.5 h-3.5" />}
+                        isOpen={activeSection === 'appearance'}
+                        onToggle={() => toggleSection('appearance')}
+                    >
+                        <EdgeStyleSection selectedEdge={selectedEdge} onChange={onChange} />
+                    </CollapsibleSection>
+
+                    <CollapsibleSection
+                        title={t('connectionPanel.condition', 'Condition')}
+                        icon={<Waypoints className="w-3.5 h-3.5" />}
+                        isOpen={activeSection === 'condition'}
+                        onToggle={() => toggleSection('condition')}
+                    >
+                        <EdgeConditionSection selectedEdge={selectedEdge} onChange={onChange} />
+                    </CollapsibleSection>
+                </>
+            )}
 
             <InspectorFooter>
                 <Button
diff --git a/src/components/properties/IconPicker.tsx b/src/components/properties/IconPicker.tsx
index 3010a7c..ae80fd8 100644
--- a/src/components/properties/IconPicker.tsx
+++ b/src/components/properties/IconPicker.tsx
@@ -1,7 +1,21 @@
-import React, { useState, useMemo } from 'react';
-import { Search, Ban, Upload } from 'lucide-react';
+import React, { useMemo, useState } from 'react';
+import { Ban, Upload } from 'lucide-react';
 import { ICON_NAMES, ICON_PICKER_PRIORITY_NAMES, NamedIcon } from '../IconMap';
 import { Tooltip } from '../Tooltip';
+import { IconSearchField, IconTileScrollGrid } from './IconTilePickerPrimitives';
+
+const DEFAULT_ICON_COUNT = 48;
+const SEARCH_RESULT_COUNT = 50;
+
+function readFileAsDataUrl(file: File, onLoad: (result: string) => void): void {
+    const reader = new FileReader();
+    reader.onloadend = () => {
+        if (typeof reader.result === 'string') {
+            onLoad(reader.result);
+        }
+    };
+    reader.readAsDataURL(file);
+}
 
 interface IconPickerProps {
     selectedIcon?: string;
@@ -22,35 +36,36 @@ export const IconPicker: React.FC<IconPickerProps> = ({
         const term = iconSearch.toLowerCase();
 
         if (!term) {
-            const others = ICON_NAMES.filter((name) => !ICON_PICKER_PRIORITY_NAMES.includes(name)).slice(0, 48);
+            const others = ICON_NAMES.filter((name) => !ICON_PICKER_PRIORITY_NAMES.includes(name)).slice(0, DEFAULT_ICON_COUNT);
             return [...ICON_PICKER_PRIORITY_NAMES.filter((name) => ICON_NAMES.includes(name)), ...others];
         }
 
-        return ICON_NAMES.filter((name) => name.toLowerCase().includes(term)).slice(0, 50);
+        return ICON_NAMES.filter((name) => name.toLowerCase().includes(term)).slice(0, SEARCH_RESULT_COUNT);
     }, [iconSearch]);
 
+    function handleCustomIconFileChange(event: React.ChangeEvent<HTMLInputElement>): void {
+        const file = event.target.files?.[0];
+        if (!file) {
+            return;
+        }
+
+        readFileAsDataUrl(file, onCustomIconChange);
+    }
+
     return (
         <div className="space-y-3">
-            <div className="mb-2">
-                <div className="relative w-full">
-                    <Search className="w-3 h-3 absolute left-2 top-2 text-[var(--brand-secondary)]" />
-                    <input
-                        type="text"
-                        placeholder="Search icons..."
-                        value={iconSearch}
-                        onChange={(e) => setIconSearch(e.target.value)}
-                        className="w-full pl-7 pr-2 py-1.5 bg-[var(--brand-background)] rounded-[calc(var(--brand-radius)-4px)] text-xs outline-none focus:ring-1 focus:ring-[var(--brand-primary)] text-[var(--brand-text)] border border-slate-200"
-                    />
-                </div>
-            </div>
+            <IconSearchField
+                value={iconSearch}
+                onChange={(event) => setIconSearch(event.target.value)}
+                placeholder="Search icons..."
+            />
 
-            <div className="grid grid-cols-6 gap-2 p-2 bg-[var(--brand-background)] rounded-[var(--brand-radius)] border border-slate-200 max-h-40 overflow-y-auto custom-scrollbar">
-                {/* No Icon Option */}
-                <Tooltip text="No Icon">
+            <IconTileScrollGrid>
+                <Tooltip text="No Icon" className="block w-full aspect-square">
                     <button
                         onClick={() => onChange('none')}
                         className={`
-                            p-2 rounded-lg flex items-center justify-center transition-all
+                            h-full w-full p-2 rounded-lg flex items-center justify-center transition-all
                             ${selectedIcon === 'none'
                                 ? 'bg-red-100 text-red-600 ring-1 ring-red-400'
                                 : 'hover:bg-white hover:shadow-sm text-slate-400'
@@ -62,28 +77,25 @@ export const IconPicker: React.FC<IconPickerProps> = ({
                     </button>
                 </Tooltip>
 
-                {filteredIcons.map((key) => {
-                    return (
-                        <Tooltip key={key} text={key}>
-                            <button
-                                onClick={() => onChange(key)}
-                                className={`
-                                    p-2 rounded-lg flex items-center justify-center transition-all
-                                    ${selectedIcon === key
-                                        ? 'bg-[var(--brand-primary-100)] text-[var(--brand-primary)] ring-1 ring-[var(--brand-primary-400)]'
-                                        : 'hover:bg-[var(--brand-surface)] hover:shadow-sm text-[var(--brand-secondary)]'
-                                    }
-                                `}
-                                aria-label={key}
-                            >
-                                <NamedIcon name={key} className="w-5 h-5" />
-                            </button>
-                        </Tooltip>
-                    );
-                })}
-            </div>
+                {filteredIcons.map((key) => (
+                    <Tooltip key={key} text={key} className="block w-full aspect-square">
+                        <button
+                            onClick={() => onChange(key)}
+                            className={`
+                                h-full w-full p-2 rounded-lg flex items-center justify-center transition-all
+                                ${selectedIcon === key
+                                    ? 'bg-[var(--brand-primary-100)] text-[var(--brand-primary)] ring-1 ring-[var(--brand-primary-400)]'
+                                    : 'hover:bg-[var(--brand-surface)] hover:shadow-sm text-[var(--brand-secondary)]'
+                                }
+                            `}
+                            aria-label={key}
+                        >
+                            <NamedIcon name={key} className="w-5 h-5" />
+                        </button>
+                    </Tooltip>
+                ))}
+            </IconTileScrollGrid>
 
-            {/* Custom Icon Upload */}
             <div className="flex items-center gap-2">
                 {customIconUrl ? (
                     <div className="flex items-center gap-2 w-full">
@@ -106,16 +118,7 @@ export const IconPicker: React.FC<IconPickerProps> = ({
                             type="file"
                             accept="image/svg+xml,image/png,image/jpeg,image/webp"
                             className="hidden"
-                            onChange={(e) => {
-                                const file = e.target.files?.[0];
-                                if (file) {
-                                    const reader = new FileReader();
-                                    reader.onloadend = () => {
-                                        onCustomIconChange(reader.result as string);
-                                    };
-                                    reader.readAsDataURL(file);
-                                }
-                            }}
+                            onChange={handleCustomIconFileChange}
                         />
                     </label>
                 )}
diff --git a/src/components/properties/IconTilePickerPrimitives.tsx b/src/components/properties/IconTilePickerPrimitives.tsx
new file mode 100644
index 0000000..c57c697
--- /dev/null
+++ b/src/components/properties/IconTilePickerPrimitives.tsx
@@ -0,0 +1,48 @@
+import React from 'react';
+import { SearchField } from '@/components/ui/SearchField';
+
+interface IconSearchFieldProps {
+  value: string;
+  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  placeholder: string;
+  disabled?: boolean;
+  onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
+}
+
+export function IconSearchField({
+  value,
+  onChange,
+  placeholder,
+  disabled = false,
+  onKeyDown,
+}: IconSearchFieldProps): React.ReactElement {
+  return (
+    <SearchField
+      value={value}
+      onChange={onChange}
+      onKeyDown={onKeyDown}
+      disabled={disabled}
+      placeholder={placeholder}
+      surface="subtle"
+      className="h-10 bg-[var(--brand-background)]"
+    />
+  );
+}
+
+interface IconTileScrollGridProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+export function IconTileScrollGrid({
+  children,
+  className = '',
+}: IconTileScrollGridProps): React.ReactElement {
+  return (
+    <div className={`max-h-40 overflow-y-auto rounded-[var(--brand-radius)] border border-slate-200 bg-[var(--brand-background)] p-2 custom-scrollbar ${className}`.trim()}>
+      <div className="grid grid-cols-6 gap-2">
+        {children}
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/properties/ImageUpload.tsx b/src/components/properties/ImageUpload.tsx
index a1e57ae..bf60b5a 100644
--- a/src/components/properties/ImageUpload.tsx
+++ b/src/components/properties/ImageUpload.tsx
@@ -1,5 +1,5 @@
 import React, { useRef } from 'react';
-import { Image as ImageIcon, Upload } from 'lucide-react';
+import { Upload } from 'lucide-react';
 
 interface ImageUploadProps {
     imageUrl?: string;
@@ -26,12 +26,12 @@ export const ImageUpload: React.FC<ImageUploadProps> = ({ imageUrl, onChange })
             <div className="flex flex-col gap-3">
 
                 {imageUrl ? (
-                    <div className="relative group rounded-lg overflow-hidden border border-slate-200">
+                    <div className="relative group overflow-hidden rounded-[var(--radius-lg)] border border-slate-200">
                         <img src={imageUrl} className="w-full h-32 object-cover opacity-90" alt="attached" />
                         <div className="absolute inset-0 bg-black/40 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
                             <button
                                 onClick={() => onChange(undefined)}
-                                className="px-3 py-1.5 bg-red-500 text-white rounded-lg text-xs font-medium hover:bg-red-600"
+                                className="rounded-[var(--radius-sm)] bg-red-500 px-3 py-1.5 text-xs font-medium text-white hover:bg-red-600"
                             >
                                 Remove
                             </button>
@@ -40,7 +40,7 @@ export const ImageUpload: React.FC<ImageUploadProps> = ({ imageUrl, onChange })
                 ) : (
                     <button
                         onClick={() => fileInputRef.current?.click()}
-                        className="w-full py-6 border-2 border-dashed border-slate-300 rounded-xl hover:bg-slate-50 hover:border-indigo-400 hover:text-indigo-600 transition-all text-sm text-slate-500 flex flex-col items-center gap-2"
+                        className="flex w-full flex-col items-center gap-2 rounded-[var(--radius-lg)] border-2 border-dashed border-slate-300 py-6 text-sm text-slate-500 transition-all hover:border-indigo-400 hover:bg-slate-50 hover:text-indigo-600"
                     >
                         <Upload className="w-5 h-5" />
                         <span>Click to Upload Image</span>
diff --git a/src/components/properties/InspectorPrimitives.tsx b/src/components/properties/InspectorPrimitives.tsx
index b64129e..f4e7cc8 100644
--- a/src/components/properties/InspectorPrimitives.tsx
+++ b/src/components/properties/InspectorPrimitives.tsx
@@ -62,5 +62,6 @@ export function InspectorField({
 }
 
 export const INSPECTOR_INPUT_CLASSNAME = 'w-full rounded-[var(--brand-radius)] border border-slate-300 bg-white px-3 py-2 text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-[var(--brand-primary)]';
-export const INSPECTOR_INPUT_COMPACT_CLASSNAME = 'w-full rounded-md border border-slate-300 bg-white px-2 py-1.5 text-sm';
-export const INSPECTOR_BUTTON_CLASSNAME = 'rounded-md border border-slate-300 bg-white px-2 py-1.5 text-xs font-medium text-slate-700 hover:border-slate-400';
+export const INSPECTOR_INPUT_COMPACT_CLASSNAME = 'w-full rounded-[var(--radius-sm)] border border-slate-300 bg-white px-2 py-1.5 text-sm disabled:cursor-not-allowed disabled:bg-slate-100 disabled:text-slate-400';
+export const INSPECTOR_BUTTON_CLASSNAME = 'rounded-[var(--radius-sm)] border border-slate-300 bg-white px-2 py-1.5 text-xs font-medium text-slate-700 hover:border-slate-400 disabled:cursor-not-allowed disabled:opacity-50';
+export const INSPECTOR_BUTTON_ACCENT_CLASSNAME = 'rounded-[var(--radius-sm)] border border-[var(--brand-primary-200)] bg-[var(--brand-primary-50)] px-2 py-1.5 text-xs font-medium text-[var(--brand-primary-700)] hover:border-[var(--brand-primary-300)] disabled:cursor-not-allowed disabled:opacity-50';
diff --git a/src/components/properties/NodeContentSection.tsx b/src/components/properties/NodeContentSection.tsx
index 1c7c3f4..748403e 100644
--- a/src/components/properties/NodeContentSection.tsx
+++ b/src/components/properties/NodeContentSection.tsx
@@ -3,6 +3,7 @@ import { Node } from '@/lib/reactflowCompat';
 import { NodeData } from '@/lib/types';
 import { Bold, Italic, AlignLeft, AlignCenter, AlignRight } from 'lucide-react';
 import { CollapsibleSection } from '../ui/CollapsibleSection';
+import { handlePropertyInputKeyDown } from './propertyInputBehavior';
 
 interface NodeContentSectionProps {
     selectedNode: Node<NodeData>;
@@ -45,6 +46,14 @@ export function NodeContentSection({
     onLabelKeyDown,
     onDescKeyDown,
 }: NodeContentSectionProps): React.ReactElement {
+    function handleContentKeyDown(
+        event: React.KeyboardEvent<HTMLTextAreaElement>,
+        delegate: (nextEvent: React.KeyboardEvent) => void
+    ): void {
+        handlePropertyInputKeyDown(event, { blurOnModifiedEnter: true });
+        delegate(event);
+    }
+
     return (
         <CollapsibleSection
             title="Content"
@@ -148,7 +157,7 @@ export function NodeContentSection({
                             e.target.style.height = 'auto';
                             e.target.style.height = `${e.target.scrollHeight}px`;
                         }}
-                        onKeyDown={onLabelKeyDown}
+                        onKeyDown={(event) => handleContentKeyDown(event, onLabelKeyDown)}
                         placeholder="Type label here..."
                         rows={1}
                         style={{ minHeight: '32px' }}
@@ -168,7 +177,7 @@ export function NodeContentSection({
                                 e.target.style.height = 'auto';
                                 e.target.style.height = `${e.target.scrollHeight}px`;
                             }}
-                            onKeyDown={onDescKeyDown}
+                            onKeyDown={(event) => handleContentKeyDown(event, onDescKeyDown)}
                             placeholder="Add description..."
                             rows={1}
                             style={{ minHeight: '40px' }}
diff --git a/src/components/properties/NodeProperties.tsx b/src/components/properties/NodeProperties.tsx
index 65543ba..82de030 100644
--- a/src/components/properties/NodeProperties.tsx
+++ b/src/components/properties/NodeProperties.tsx
@@ -15,13 +15,14 @@ import { NodeImageSettingsSection } from './NodeImageSettingsSection';
 import { NodeTextStyleSection } from './NodeTextStyleSection';
 import { NodeWireframeVariantSection } from './NodeWireframeVariantSection';
 import { InspectorSectionDivider } from './InspectorPrimitives';
-import { Input } from '../ui/Input';
 import { Tooltip } from '../Tooltip';
 import { Select } from '../ui/Select';
 import type { DomainLibraryCategory, DomainLibraryItem } from '@/services/domainLibrary';
 import { loadProviderCatalog, loadProviderShapePreview } from '@/services/shapeLibrary/providerCatalog';
 import { loadIconAssetCatalog } from '@/services/iconAssetCatalog';
 import { NamedIcon } from '../IconMap';
+import { createPropertyInputKeyDownHandler } from './propertyInputBehavior';
+import { IconSearchField, IconTileScrollGrid } from './IconTilePickerPrimitives';
 
 interface NodePropertiesProps {
     selectedNode: Node<NodeData>;
@@ -54,13 +55,15 @@ export const NodeProperties: React.FC<NodePropertiesProps> = ({
         query: '',
         category: 'all',
     });
+    const handlePropertyInputKeyDown = createPropertyInputKeyDownHandler({ blurOnEnter: true });
 
     function getDefaultSection(): string {
+        if (isImage) return 'image';
         if (isWireframeApp) return 'variant';
         if (isIconAssetNode) return 'asset';
         if (isSection) return 'content';
         if (isText || isAnnotation) return 'content';
-        return 'shape';
+        return 'content';
     }
 
     // Persist accordion state per node to avoid effect-driven synchronous setState.
@@ -245,9 +248,10 @@ export const NodeProperties: React.FC<NodePropertiesProps> = ({
                     onToggle={() => toggleSection('asset')}
                 >
                     <div className="mt-4 space-y-3">
-                        <Input
+                        <IconSearchField
                             value={assetQuery}
                             onChange={(event) => setAssetSearchState({ nodeId: selectedNode.id, query: event.target.value, category: assetFilterCategory })}
+                            onKeyDown={handlePropertyInputKeyDown}
                             placeholder={`Search ${String(assetProvider || 'asset')} icons`}
                         />
                         {assetCategories.length > 1 ? (
@@ -261,17 +265,16 @@ export const NodeProperties: React.FC<NodePropertiesProps> = ({
                                 placeholder="All categories"
                             />
                         ) : null}
-                        <div className="max-h-[20rem] overflow-y-auto pr-1 custom-scrollbar">
-                        <div className="grid grid-cols-6 gap-2">
+                        <IconTileScrollGrid>
                             {filteredAssetItems.map((item) => (
-                                <Tooltip key={item.id} text={item.label}>
+                                <Tooltip key={item.id} text={item.label} className="block w-full aspect-square">
                                     <button
                                         type="button"
                                         aria-label={item.label}
-                                        className={`flex aspect-square items-center justify-center rounded-[var(--radius-md)] border p-2 transition-all ${
+                                        className={`flex h-full w-full items-center justify-center rounded-[var(--radius-md)] border p-2 transition-all ${
                                             selectedNode.data?.archIconShapeId === item.archIconShapeId
                                                 ? 'border-[var(--brand-primary)] bg-[var(--brand-primary-50)]'
-                                                : 'border-slate-200 bg-white hover:border-slate-300 hover:bg-slate-50'
+                                                : 'border-transparent bg-transparent hover:border-slate-200 hover:bg-slate-50'
                                         }`}
                                         onClick={async () => {
                                             const preview = item.archIconPackId && item.archIconShapeId
@@ -289,7 +292,7 @@ export const NodeProperties: React.FC<NodePropertiesProps> = ({
                                         }}
                                     >
                                         {assetPreviewUrls[item.id] ? (
-                                            <img src={assetPreviewUrls[item.id]} alt="" className="h-10 w-10 object-contain" />
+                                            <img src={assetPreviewUrls[item.id]} alt={`${item.label} icon`} className="h-10 w-10 object-contain" />
                                         ) : (
                                             item.category === 'icons'
                                                 ? <NamedIcon name={item.icon} fallbackName="Box" className="h-5 w-5 text-slate-400" />
@@ -298,8 +301,7 @@ export const NodeProperties: React.FC<NodePropertiesProps> = ({
                                     </button>
                                 </Tooltip>
                             ))}
-                        </div>
-                        </div>
+                        </IconTileScrollGrid>
                     </div>
                 </CollapsibleSection>
             )}
diff --git a/src/components/properties/NodeTextStyleSection.tsx b/src/components/properties/NodeTextStyleSection.tsx
index fffc7f0..428a6f6 100644
--- a/src/components/properties/NodeTextStyleSection.tsx
+++ b/src/components/properties/NodeTextStyleSection.tsx
@@ -33,7 +33,7 @@ export function NodeTextStyleSection({
                         <button
                             key={font}
                             onClick={() => onChange(selectedNode.id, { fontFamily: font })}
-                            className={`flex-1 px-2 py-1.5 rounded-[calc(var(--brand-radius)-4px)] text-[10px] font-bold uppercase whitespace-nowrap
+                            className={`flex-1 px-2 py-1.5 rounded-[var(--radius-xs)] text-[10px] font-bold uppercase whitespace-nowrap
                                 ${(selectedNode.data?.fontFamily || 'inter') === font
                                     ? 'bg-[var(--brand-surface)] shadow-sm text-[var(--brand-primary)]'
                                     : 'text-[var(--brand-secondary)] hover:text-[var(--brand-text)]'}`}
@@ -47,7 +47,7 @@ export function NodeTextStyleSection({
                         <button
                             key={size}
                             onClick={() => onChange(selectedNode.id, { fontSize: size.toString() })}
-                            className={`flex-1 px-2 py-1.5 rounded-[calc(var(--brand-radius)-4px)] text-[10px] font-bold
+                            className={`flex-1 px-2 py-1.5 rounded-[var(--radius-xs)] text-[10px] font-bold
                                 ${(selectedNode.data?.fontSize || '16') === size.toString()
                                     ? 'bg-[var(--brand-surface)] shadow-sm text-[var(--brand-primary)]'
                                     : 'text-[var(--brand-secondary)] hover:text-[var(--brand-text)]'}`}
diff --git a/src/components/properties/NodeWireframeVariantSection.tsx b/src/components/properties/NodeWireframeVariantSection.tsx
index 3b72a83..5f318ff 100644
--- a/src/components/properties/NodeWireframeVariantSection.tsx
+++ b/src/components/properties/NodeWireframeVariantSection.tsx
@@ -3,6 +3,7 @@ import type { Node } from '@/lib/reactflowCompat';
 import { Layout } from 'lucide-react';
 import type { NodeData } from '@/lib/types';
 import { CollapsibleSection } from '../ui/CollapsibleSection';
+import { getWireframeVariants } from './wireframeVariants';
 
 interface NodeWireframeVariantSectionProps {
     selectedNode: Node<NodeData>;
@@ -11,16 +12,13 @@ interface NodeWireframeVariantSectionProps {
     onChange: (id: string, data: Partial<NodeData>) => void;
 }
 
-const BROWSER_VARIANTS = ['landing', 'dashboard', 'form', 'modal', 'cookie', 'pricing'];
-const MOBILE_VARIANTS = ['login', 'social', 'chat', 'product', 'list'];
-
 export function NodeWireframeVariantSection({
     selectedNode,
     isOpen,
     onToggle,
     onChange,
 }: NodeWireframeVariantSectionProps): React.ReactElement {
-    const variants = selectedNode.type === 'browser' ? BROWSER_VARIANTS : MOBILE_VARIANTS;
+    const variants = getWireframeVariants(selectedNode.type);
     const activeVariant = selectedNode.data?.variant || 'default';
 
     return (
@@ -33,14 +31,15 @@ export function NodeWireframeVariantSection({
             <div className="grid grid-cols-2 gap-2 mb-2">
                 {variants.map((variant) => (
                     <button
-                        key={variant}
-                        onClick={() => onChange(selectedNode.id, { variant })}
+                        key={variant.id}
+                        onClick={() => onChange(selectedNode.id, { variant: variant.id })}
                         className={`px-2 py-2 rounded text-xs font-medium border transition-all
-                            ${activeVariant === variant
+                            ${activeVariant === variant.id
                                 ? 'bg-[var(--brand-primary-50)] border-[var(--brand-primary-200)] text-[var(--brand-primary)]'
                                 : 'bg-white border-slate-200 text-slate-600 hover:border-slate-300'}`}
+                        title={variant.description}
                     >
-                        {variant.charAt(0).toUpperCase() + variant.slice(1)}
+                        {variant.label}
                     </button>
                 ))}
             </div>
diff --git a/src/components/properties/SegmentedChoice.tsx b/src/components/properties/SegmentedChoice.tsx
index d479881..a492308 100644
--- a/src/components/properties/SegmentedChoice.tsx
+++ b/src/components/properties/SegmentedChoice.tsx
@@ -19,6 +19,20 @@ const GRID_COLUMNS: Record<number, string> = {
     4: 'grid-cols-4',
 };
 
+function getContainerPaddingClass(size: SegmentedChoiceProps['size']): string {
+    return size === 'sm' ? 'p-0.5' : 'p-0.75';
+}
+
+function getItemClassName(selected: boolean, size: SegmentedChoiceProps['size']): string {
+    const spacingClass = size === 'sm' ? 'min-h-8 px-2.5 py-1 text-[11px]' : 'min-h-10 px-3.5 py-2 text-[13px]';
+
+    return `flex items-center justify-center rounded-[var(--radius-xs)] font-medium transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand-primary-200)] focus-visible:ring-offset-1 ${spacingClass} ${
+        selected
+            ? 'bg-white text-[var(--brand-primary)] shadow-sm ring-1 ring-[var(--brand-primary-200)]'
+            : 'text-slate-500 hover:bg-white/85 hover:text-slate-700'
+    }`;
+}
+
 export function SegmentedChoice({
     items,
     selectedId,
@@ -27,10 +41,10 @@ export function SegmentedChoice({
     size = 'md',
 }: SegmentedChoiceProps): React.ReactElement {
     const gridClass = GRID_COLUMNS[columns] || 'grid-cols-3';
-    const sizeClass = size === 'sm' ? 'py-1.5 text-[11px]' : 'py-2 text-xs';
+    const paddingClass = getContainerPaddingClass(size);
 
     return (
-        <div className={`grid ${gridClass} gap-2`}>
+        <div className={`grid ${gridClass} gap-1 rounded-[var(--radius-sm)] border border-slate-200/80 bg-slate-100/70 shadow-[inset_0_1px_0_rgba(255,255,255,0.7)] ${paddingClass}`}>
             {items.map((item) => {
                 const selected = item.id === selectedId;
                 return (
@@ -38,11 +52,8 @@ export function SegmentedChoice({
                         key={item.id}
                         type="button"
                         onClick={() => onSelect(item.id)}
-                        className={`${sizeClass} rounded-[var(--brand-radius)] border font-medium transition-all ${
-                            selected
-                                ? 'bg-[var(--brand-primary-50)] border-[var(--brand-primary-200)] text-[var(--brand-primary-700)]'
-                                : 'bg-[var(--brand-surface)] border-slate-200 text-[var(--brand-secondary)]'
-                        }`}
+                        className={getItemClassName(selected, size)}
+                        aria-pressed={selected}
                     >
                         {item.label}
                     </button>
diff --git a/src/components/properties/edge/ArchitectureEdgeSemanticsSection.tsx b/src/components/properties/edge/ArchitectureEdgeSemanticsSection.tsx
index fd458ff..4f0ee62 100644
--- a/src/components/properties/edge/ArchitectureEdgeSemanticsSection.tsx
+++ b/src/components/properties/edge/ArchitectureEdgeSemanticsSection.tsx
@@ -9,6 +9,10 @@ import {
   normalizeArchitectureEdgeDirection,
   normalizeArchitectureEdgeSide,
 } from './architectureSemantics';
+import {
+  INSPECTOR_INPUT_COMPACT_CLASSNAME,
+  InspectorField,
+} from '@/components/properties/InspectorPrimitives';
 
 interface ArchitectureEdgeSemanticsSectionProps {
   selectedEdge: FlowEdge;
@@ -109,56 +113,68 @@ export function ArchitectureEdgeSemanticsSection({
     });
   };
 
+  const sideOptions = (
+    <>
+      <option value="">Auto</option>
+      <option value="L">Left</option>
+      <option value="R">Right</option>
+      <option value="T">Top</option>
+      <option value="B">Bottom</option>
+    </>
+  );
+
   return (
-    <div className="space-y-2">
-      <div className="grid grid-cols-2 gap-2">
+    <div className="space-y-3">
+      <InspectorField label="Direction">
         <select
           value={currentDirection}
           onChange={(event) => updateDirection(event.target.value)}
-          className="rounded-md border border-slate-300 bg-white px-2 py-1.5 text-xs"
+          className={INSPECTOR_INPUT_COMPACT_CLASSNAME}
         >
           <option value="-->">Forward (--&gt;)</option>
           <option value="<--">Reverse (&lt;--)</option>
           <option value="<-->">Bidirectional (&lt;--&gt;)</option>
         </select>
-        <div className="grid grid-cols-2 gap-2">
+      </InspectorField>
+
+      <div className="grid grid-cols-2 gap-2">
+        <InspectorField label="Source Side">
           <select
             value={currentSourceSide || ''}
             onChange={(event) => updateSourceSide(event.target.value)}
-            className="rounded-md border border-slate-300 bg-white px-2 py-1.5 text-xs"
+            className={INSPECTOR_INPUT_COMPACT_CLASSNAME}
           >
-            <option value="">Src side</option>
-            <option value="L">L</option>
-            <option value="R">R</option>
-            <option value="T">T</option>
-            <option value="B">B</option>
+            {sideOptions}
           </select>
+        </InspectorField>
+        <InspectorField label="Target Side">
           <select
             value={currentTargetSide || ''}
             onChange={(event) => updateTargetSide(event.target.value)}
-            className="rounded-md border border-slate-300 bg-white px-2 py-1.5 text-xs"
+            className={INSPECTOR_INPUT_COMPACT_CLASSNAME}
           >
-            <option value="">Tgt side</option>
-            <option value="L">L</option>
-            <option value="R">R</option>
-            <option value="T">T</option>
-            <option value="B">B</option>
+            {sideOptions}
           </select>
-        </div>
+        </InspectorField>
       </div>
+
       <div className="grid grid-cols-2 gap-2">
-        <input
-          value={currentProtocol}
-          onChange={(event) => updateProtocol(event.target.value)}
-          placeholder="Protocol (HTTPS)"
-          className="rounded-md border border-slate-300 px-2 py-1.5 text-xs"
-        />
-        <input
-          value={currentPort}
-          onChange={(event) => updatePort(event.target.value)}
-          placeholder="Port (443)"
-          className="rounded-md border border-slate-300 px-2 py-1.5 text-xs"
-        />
+        <InspectorField label="Protocol">
+          <input
+            value={currentProtocol}
+            onChange={(event) => updateProtocol(event.target.value)}
+            placeholder="HTTPS"
+            className={INSPECTOR_INPUT_COMPACT_CLASSNAME}
+          />
+        </InspectorField>
+        <InspectorField label="Port">
+          <input
+            value={currentPort}
+            onChange={(event) => updatePort(event.target.value)}
+            placeholder="443"
+            className={INSPECTOR_INPUT_COMPACT_CLASSNAME}
+          />
+        </InspectorField>
       </div>
     </div>
   );
diff --git a/src/components/properties/edge/EdgeLabelSection.tsx b/src/components/properties/edge/EdgeLabelSection.tsx
index 256863b..19baa66 100644
--- a/src/components/properties/edge/EdgeLabelSection.tsx
+++ b/src/components/properties/edge/EdgeLabelSection.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import type { FlowEdge } from '@/lib/types';
 import { Input } from '@/components/ui/Input';
 import { Slider } from '@/components/ui/Slider';
+import { buildEdgeLabelUpdates, getEditableEdgeLabel, hasEditableEdgeLabel } from './edgeLabelModel';
 
 interface EdgeLabelSectionProps {
     selectedEdge: FlowEdge;
@@ -9,16 +10,18 @@ interface EdgeLabelSectionProps {
 }
 
 export function EdgeLabelSection({ selectedEdge, onChange }: EdgeLabelSectionProps): React.ReactElement {
+    const editableLabel = getEditableEdgeLabel(selectedEdge);
+
     return (
         <div className="space-y-3">
             <Input
                 label="Label"
-                value={(selectedEdge.label as string) || ''}
-                onChange={(event) => onChange(selectedEdge.id, { label: event.target.value })}
+                value={editableLabel}
+                onChange={(event) => onChange(selectedEdge.id, buildEdgeLabelUpdates(selectedEdge, event.target.value))}
                 placeholder="e.g., 'If yes', 'On success'"
             />
 
-            {selectedEdge.label && (
+            {hasEditableEdgeLabel(selectedEdge) && (
                 <div className="space-y-1 pt-2">
                     <Slider
                         label="Position"
diff --git a/src/components/properties/edge/EdgeRelationSection.test.tsx b/src/components/properties/edge/EdgeRelationSection.test.tsx
new file mode 100644
index 0000000..2659243
--- /dev/null
+++ b/src/components/properties/edge/EdgeRelationSection.test.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import type { FlowEdge } from '@/lib/types';
+import { EdgeRelationSection } from './EdgeRelationSection';
+
+function createEdge(overrides: Partial<FlowEdge> = {}): FlowEdge {
+  return {
+    id: 'edge-1',
+    source: 'entity-a',
+    target: 'entity-b',
+    data: { erRelation: '||--||' },
+    ...overrides,
+  };
+}
+
+describe('EdgeRelationSection', () => {
+  it('updates the ER relation token from the select control', () => {
+    const onChange = vi.fn();
+    render(<EdgeRelationSection selectedEdge={createEdge()} onChange={onChange} />);
+
+    fireEvent.click(screen.getByRole('button', { name: /one to one/i }));
+    fireEvent.click(screen.getByRole('button', { name: 'One to zero or many' }));
+
+    expect(onChange).toHaveBeenCalledWith('edge-1', {
+      data: {
+        erRelation: '||--o{',
+      },
+    });
+  });
+});
diff --git a/src/components/properties/edge/EdgeRelationSection.tsx b/src/components/properties/edge/EdgeRelationSection.tsx
new file mode 100644
index 0000000..42b335b
--- /dev/null
+++ b/src/components/properties/edge/EdgeRelationSection.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import type { FlowEdge } from '@/lib/types';
+import { Select } from '@/components/ui/Select';
+import { ER_RELATION_OPTIONS } from './erRelationOptions';
+
+interface EdgeRelationSectionProps {
+  selectedEdge: FlowEdge;
+  onChange: (id: string, updates: Partial<FlowEdge>) => void;
+}
+
+export function EdgeRelationSection({
+  selectedEdge,
+  onChange,
+}: EdgeRelationSectionProps): React.ReactElement {
+  return (
+    <div className="space-y-3">
+      <div className="space-y-1.5">
+        <label className="block text-xs font-semibold uppercase tracking-wider text-slate-500">
+          Crow&apos;s Foot
+        </label>
+        <Select
+          value={(selectedEdge.data?.erRelation as string) || '||--||'}
+          onChange={(value) => {
+            onChange(selectedEdge.id, {
+              data: {
+                ...selectedEdge.data,
+                erRelation: value as FlowEdge['data']['erRelation'],
+              },
+            });
+          }}
+          options={ER_RELATION_OPTIONS.map((option) => ({
+            value: option.id,
+            label: option.label,
+          }))}
+        />
+      </div>
+      <p className="text-xs text-slate-500">
+        Controls the ER cardinality markers rendered on this connection.
+      </p>
+    </div>
+  );
+}
diff --git a/src/components/properties/edge/EdgeRouteSection.test.tsx b/src/components/properties/edge/EdgeRouteSection.test.tsx
index 0262a18..fe83356 100644
--- a/src/components/properties/edge/EdgeRouteSection.test.tsx
+++ b/src/components/properties/edge/EdgeRouteSection.test.tsx
@@ -107,4 +107,32 @@ describe('EdgeRouteSection', () => {
         expect(screen.getByText(/2 custom bends/i)).toBeTruthy();
         expect(screen.getByText(/reset to return to automatic routing/i)).toBeTruthy();
     });
+
+    it('switches connector ownership to fixed and dynamic', () => {
+        const onChange = vi.fn();
+        render(
+            <EdgeRouteSection
+                selectedEdge={createEdge({
+                    sourceHandle: 'right',
+                    targetHandle: 'left',
+                    data: {
+                        connectionType: 'fixed',
+                    },
+                })}
+                onChange={onChange}
+            />
+        );
+
+        fireEvent.click(screen.getByRole('button', { name: 'Dynamic' }));
+
+        expect(onChange).toHaveBeenCalledWith('edge-1', {
+            sourceHandle: null,
+            targetHandle: null,
+            data: {
+                connectionType: 'dynamic',
+                archSourceSide: undefined,
+                archTargetSide: undefined,
+            },
+        });
+    });
 });
diff --git a/src/components/properties/edge/EdgeRouteSection.tsx b/src/components/properties/edge/EdgeRouteSection.tsx
index 7b88b19..e098703 100644
--- a/src/components/properties/edge/EdgeRouteSection.tsx
+++ b/src/components/properties/edge/EdgeRouteSection.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import type { FlowEdge } from '@/lib/types';
 import { Button } from '@/components/ui/Button';
 import { InspectorField } from '../InspectorPrimitives';
+import { SegmentedChoice } from '../SegmentedChoice';
 
 interface EdgeRouteSectionProps {
     selectedEdge: FlowEdge;
@@ -25,6 +26,7 @@ export function EdgeRouteSection({
     onChange,
 }: EdgeRouteSectionProps): React.ReactElement {
     const effectiveMode = getEffectiveRoutingMode(selectedEdge);
+    const connectionType = selectedEdge.data?.connectionType === 'fixed' ? 'fixed' : 'dynamic';
     const hasElkRoute = (selectedEdge.data?.elkPoints?.length ?? 0) > 0;
     const hasManualWaypoints =
         Boolean(selectedEdge.data?.waypoint) || (selectedEdge.data?.waypoints?.length ?? 0) > 0;
@@ -43,27 +45,59 @@ export function EdgeRouteSection({
     };
 
     return (
-        <InspectorField
-            label="Path"
-            helper={
-                hasManualWaypoints
-                    ? `${waypointCount} custom bend${waypointCount !== 1 ? 's' : ''} stored on this edge · Reset to return to automatic routing`
-                    : 'Connector routing is automatic'
-            }
-        >
-            {hasManualWaypoints ? (
-                <Button
-                    onClick={resetRoute}
-                    variant="secondary"
-                    className="w-full"
-                >
-                    Reset path
-                </Button>
-            ) : (
-                <div className="rounded-[var(--brand-radius)] border border-slate-200 bg-slate-50 px-3 py-2 text-xs text-slate-400 text-center select-none">
-                    {effectiveMode === 'elk' ? 'ELK auto-routed' : 'Auto-routed'}
-                </div>
-            )}
-        </InspectorField>
+        <div className="space-y-3">
+            <InspectorField
+                label="Connector Ownership"
+                helper="Dynamic connectors follow automatic handle assignment. Fixed connectors preserve their current endpoints."
+            >
+                <SegmentedChoice
+                    items={[
+                        { id: 'dynamic', label: 'Dynamic' },
+                        { id: 'fixed', label: 'Fixed' },
+                    ]}
+                    selectedId={connectionType}
+                    onSelect={(value) => {
+                        onChange(selectedEdge.id, {
+                            sourceHandle: value === 'dynamic' ? null : selectedEdge.sourceHandle,
+                            targetHandle: value === 'dynamic' ? null : selectedEdge.targetHandle,
+                            data: {
+                                ...selectedEdge.data,
+                                connectionType: value as 'fixed' | 'dynamic',
+                                ...(value === 'dynamic'
+                                    ? {
+                                        archSourceSide: undefined,
+                                        archTargetSide: undefined,
+                                    }
+                                    : {}),
+                            },
+                        });
+                    }}
+                    columns={2}
+                />
+            </InspectorField>
+
+            <InspectorField
+                label="Path"
+                helper={
+                    hasManualWaypoints
+                        ? `${waypointCount} custom bend${waypointCount !== 1 ? 's' : ''} stored on this edge · Reset to return to automatic routing`
+                        : 'Connector routing is automatic'
+                }
+            >
+                {hasManualWaypoints ? (
+                    <Button
+                        onClick={resetRoute}
+                        variant="secondary"
+                        className="w-full"
+                    >
+                        Reset path
+                    </Button>
+                ) : (
+                    <div className="rounded-[var(--brand-radius)] border border-slate-200 bg-slate-50 px-3 py-2 text-xs text-slate-400 text-center select-none">
+                        {effectiveMode === 'elk' ? 'ELK auto-routed' : 'Auto-routed'}
+                    </div>
+                )}
+            </InspectorField>
+        </div>
     );
 }
diff --git a/src/components/properties/edge/SequenceMessageSection.tsx b/src/components/properties/edge/SequenceMessageSection.tsx
new file mode 100644
index 0000000..4933ed9
--- /dev/null
+++ b/src/components/properties/edge/SequenceMessageSection.tsx
@@ -0,0 +1,73 @@
+import React from 'react';
+import type { FlowEdge } from '@/lib/types';
+import {
+  INSPECTOR_INPUT_COMPACT_CLASSNAME,
+  InspectorField,
+} from '@/components/properties/InspectorPrimitives';
+import { SegmentedChoice } from '@/components/properties/SegmentedChoice';
+import { createPropertyInputKeyDownHandler } from '@/components/properties/propertyInputBehavior';
+
+interface SequenceMessageSectionProps {
+  selectedEdge: FlowEdge;
+  onChange: (id: string, updates: Partial<FlowEdge>) => void;
+}
+
+const KIND_ITEMS = [
+  { id: 'sync', label: 'Sync' },
+  { id: 'async', label: 'Async' },
+  { id: 'return', label: 'Return' },
+  { id: 'destroy', label: 'Destroy' },
+];
+
+export function SequenceMessageSection({
+  selectedEdge,
+  onChange,
+}: SequenceMessageSectionProps): React.ReactElement {
+  const handleInputKeyDown = createPropertyInputKeyDownHandler({ blurOnEnter: true });
+
+  const kind = typeof selectedEdge.data?.seqMessageKind === 'string'
+    ? selectedEdge.data.seqMessageKind
+    : 'sync';
+  const order = typeof selectedEdge.data?.seqMessageOrder === 'number'
+    ? selectedEdge.data.seqMessageOrder
+    : 0;
+  const label = typeof selectedEdge.label === 'string' ? selectedEdge.label : '';
+
+  function updateData(updates: Partial<NonNullable<FlowEdge['data']>>): void {
+    onChange(selectedEdge.id, { data: { ...selectedEdge.data, ...updates } });
+  }
+
+  return (
+    <div className="space-y-3">
+      <InspectorField label="Label">
+        <input
+          value={label}
+          onChange={(event) => onChange(selectedEdge.id, { label: event.target.value || undefined })}
+          onKeyDown={handleInputKeyDown}
+          placeholder="Message label..."
+          className={INSPECTOR_INPUT_COMPACT_CLASSNAME}
+        />
+      </InspectorField>
+
+      <InspectorField label="Kind">
+        <SegmentedChoice
+          items={KIND_ITEMS}
+          selectedId={kind}
+          onSelect={(id) => updateData({ seqMessageKind: id as FlowEdge['data']['seqMessageKind'] })}
+          columns={2}
+        />
+      </InspectorField>
+
+      <InspectorField label="Order">
+        <input
+          type="number"
+          min={0}
+          value={order}
+          onChange={(event) => updateData({ seqMessageOrder: Math.max(0, parseInt(event.target.value, 10) || 0) })}
+          onKeyDown={handleInputKeyDown}
+          className={INSPECTOR_INPUT_COMPACT_CLASSNAME}
+        />
+      </InspectorField>
+    </div>
+  );
+}
diff --git a/src/components/properties/edge/edgeLabelModel.test.ts b/src/components/properties/edge/edgeLabelModel.test.ts
new file mode 100644
index 0000000..578ddf5
--- /dev/null
+++ b/src/components/properties/edge/edgeLabelModel.test.ts
@@ -0,0 +1,35 @@
+import { describe, expect, it } from 'vitest';
+import type { FlowEdge } from '@/lib/types';
+import { buildEdgeLabelUpdates, getEditableEdgeLabel } from './edgeLabelModel';
+
+function createEdge(overrides: Partial<FlowEdge> = {}): FlowEdge {
+  return {
+    id: 'edge-1',
+    source: 'a',
+    target: 'b',
+    data: {},
+    ...overrides,
+  };
+}
+
+describe('edgeLabelModel', () => {
+  it('reads and writes top-level labels for standard edges', () => {
+    const edge = createEdge({ label: 'Sync' });
+
+    expect(getEditableEdgeLabel(edge)).toBe('Sync');
+    expect(buildEdgeLabelUpdates(edge, 'Async')).toEqual({ label: 'Async' });
+  });
+
+  it('prefers ER relation labels when ER semantics are present', () => {
+    const edge = createEdge({
+      label: 'ignored',
+      data: { erRelation: '||--o{', erRelationLabel: 'places' },
+    });
+
+    expect(getEditableEdgeLabel(edge)).toBe('places');
+    expect(buildEdgeLabelUpdates(edge, 'owns')).toEqual({
+      data: { erRelation: '||--o{', erRelationLabel: 'owns' },
+      label: undefined,
+    });
+  });
+});
diff --git a/src/components/properties/edge/edgeLabelModel.ts b/src/components/properties/edge/edgeLabelModel.ts
new file mode 100644
index 0000000..f631155
--- /dev/null
+++ b/src/components/properties/edge/edgeLabelModel.ts
@@ -0,0 +1,48 @@
+import type { FlowEdge } from '@/lib/types';
+
+function trimToOptionalString(value: string): string | undefined {
+  const trimmed = value.trim();
+  return trimmed.length > 0 ? trimmed : undefined;
+}
+
+export function getEditableEdgeLabel(edge: FlowEdge): string {
+  if (typeof edge.data?.erRelationLabel === 'string') {
+    return edge.data.erRelationLabel;
+  }
+  if (typeof edge.data?.classRelationLabel === 'string') {
+    return edge.data.classRelationLabel;
+  }
+  return typeof edge.label === 'string' ? edge.label : '';
+}
+
+export function buildEdgeLabelUpdates(edge: FlowEdge, value: string): Partial<FlowEdge> {
+  const trimmed = trimToOptionalString(value);
+
+  if (typeof edge.data?.erRelation === 'string') {
+    return {
+      data: {
+        ...edge.data,
+        erRelationLabel: trimmed,
+      },
+      label: undefined,
+    };
+  }
+
+  if (typeof edge.data?.classRelation === 'string') {
+    return {
+      data: {
+        ...edge.data,
+        classRelationLabel: trimmed,
+      },
+      label: undefined,
+    };
+  }
+
+  return {
+    label: trimmed,
+  };
+}
+
+export function hasEditableEdgeLabel(edge: FlowEdge): boolean {
+  return getEditableEdgeLabel(edge).trim().length > 0;
+}
diff --git a/src/components/properties/edge/erRelationOptions.ts b/src/components/properties/edge/erRelationOptions.ts
new file mode 100644
index 0000000..2196a52
--- /dev/null
+++ b/src/components/properties/edge/erRelationOptions.ts
@@ -0,0 +1,17 @@
+import type { ERRelationToken } from '@/lib/relationSemantics';
+
+export const ER_RELATION_OPTIONS: Array<{ id: ERRelationToken; label: string }> = [
+  { id: '||--||', label: 'One to one' },
+  { id: '||--o{', label: 'One to zero or many' },
+  { id: '||--|{', label: 'One to one or many' },
+  { id: '}o--||', label: 'Zero or many to one' },
+  { id: '}|--||', label: 'One or many to one' },
+  { id: '}o..o{', label: 'Zero or many to zero or many' },
+  { id: '}|..|{', label: 'One or many to one or many' },
+  { id: '}o--o{', label: 'Zero or many to zero or many (solid)' },
+  { id: '}|--|{', label: 'One or many to one or many (solid)' },
+  { id: '}o..||', label: 'Zero or many to one (optional)' },
+  { id: '}|..||', label: 'One or many to one (optional)' },
+  { id: '||..o{', label: 'One to zero or many (optional)' },
+  { id: '||..|{', label: 'One to one or many (optional)' },
+] as const;
diff --git a/src/components/properties/families/ArchitectureNodeProperties.test.tsx b/src/components/properties/families/ArchitectureNodeProperties.test.tsx
new file mode 100644
index 0000000..bedf12d
--- /dev/null
+++ b/src/components/properties/families/ArchitectureNodeProperties.test.tsx
@@ -0,0 +1,101 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { describe, expect, it, vi, beforeEach } from 'vitest';
+import { useFlowStore } from '@/store';
+import { ArchitectureNodeProperties } from './ArchitectureNodeProperties';
+
+vi.mock('@/services/shapeLibrary/providerCatalog', () => ({
+  loadProviderCatalog: vi.fn().mockImplementation(() => new Promise(() => {})),
+  loadProviderShapePreview: vi.fn().mockResolvedValue(null),
+}));
+
+const baseHandlers = {
+  onChange: vi.fn(),
+  onDuplicate: vi.fn(),
+  onDelete: vi.fn(),
+  onAddArchitectureService: vi.fn(),
+  onCreateArchitectureBoundary: vi.fn(),
+  onApplyArchitectureTemplate: vi.fn(),
+  onSuggestArchitectureNode: vi.fn(),
+};
+
+function createSelectedNode() {
+  return {
+    id: 'arch-1',
+    type: 'architecture',
+    position: { x: 0, y: 0 },
+    data: {
+      label: 'API',
+      archProvider: 'aws',
+      archEnvironment: 'production',
+      archResourceType: 'service',
+      archBoundaryId: '',
+    },
+  } as const;
+}
+
+describe('ArchitectureNodeProperties', () => {
+  beforeEach(() => {
+    useFlowStore.setState({
+      nodes: [
+        createSelectedNode() as never,
+        {
+          id: 'section-1',
+          type: 'section',
+          position: { x: 0, y: 0 },
+          data: { label: 'Public Edge' },
+        } as never,
+      ],
+      edges: [],
+    });
+  });
+
+  it('removes AI/template shortcuts from the default service editor', () => {
+    render(
+      <ArchitectureNodeProperties
+        selectedNode={createSelectedNode()}
+        {...baseHandlers}
+      />
+    );
+
+    expect(screen.queryByText('Suggest with AI')).toBeNull();
+    expect(screen.queryByText('Starter Layouts')).toBeNull();
+  });
+
+  it('uses custom inspector selects instead of native selects', () => {
+    const { container } = render(
+      <ArchitectureNodeProperties
+        selectedNode={createSelectedNode()}
+        {...baseHandlers}
+      />
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: 'Deployment' }));
+
+    expect(container.querySelector('select')).toBeNull();
+    expect(screen.getByText('Production')).toBeTruthy();
+    expect(screen.getAllByText('Service').length).toBeGreaterThan(0);
+    expect(screen.queryByText('Boundary')).toBeNull();
+    expect(screen.queryByText('Add Connected Service')).toBeNull();
+    expect(screen.queryByText('Create Boundary Around Node')).toBeNull();
+  });
+
+  it('shows editable custom provider controls instead of a disabled library', () => {
+    render(
+      <ArchitectureNodeProperties
+        selectedNode={{
+          ...createSelectedNode(),
+          data: {
+            ...createSelectedNode().data,
+            archProvider: 'custom',
+            archProviderLabel: 'Hetzner',
+          },
+        }}
+        {...baseHandlers}
+      />
+    );
+
+    expect(screen.getByDisplayValue('Hetzner')).toBeTruthy();
+    expect(screen.getByText('Add provider icon')).toBeTruthy();
+    expect(screen.queryByPlaceholderText('Select a provider to search')).toBeNull();
+  });
+});
diff --git a/src/components/properties/families/ArchitectureNodeProperties.tsx b/src/components/properties/families/ArchitectureNodeProperties.tsx
index d102ace..fa4f90a 100644
--- a/src/components/properties/families/ArchitectureNodeProperties.tsx
+++ b/src/components/properties/families/ArchitectureNodeProperties.tsx
@@ -4,25 +4,50 @@ import { NodeProperties } from '@/components/properties/NodeProperties';
 import { NodeActionButtons } from '@/components/properties/NodeActionButtons';
 import { ColorPicker } from '@/components/properties/ColorPicker';
 import { CollapsibleSection } from '@/components/ui/CollapsibleSection';
-import { useFlowStore } from '@/store';
+import { Select } from '@/components/ui/Select';
 import {
-  INSPECTOR_BUTTON_CLASSNAME,
   INSPECTOR_INPUT_COMPACT_CLASSNAME,
   InspectorField,
   InspectorSectionDivider,
 } from '@/components/properties/InspectorPrimitives';
+import { createPropertyInputKeyDownHandler } from '@/components/properties/propertyInputBehavior';
 import { Palette, ServerCog, Type } from 'lucide-react';
+import { ArchitectureNodeSection } from './ArchitectureNodeSection';
+
+const ENVIRONMENT_OPTIONS = [
+  { value: 'default', label: 'Default' },
+  { value: 'production', label: 'Production' },
+  { value: 'staging', label: 'Staging' },
+  { value: 'development', label: 'Development' },
+  { value: 'testing', label: 'Testing' },
+];
+
+const RESOURCE_TYPE_OPTIONS = [
+  { value: 'service', label: 'Service' },
+  { value: 'database', label: 'Database' },
+  { value: 'queue', label: 'Queue' },
+  { value: 'group', label: 'Group' },
+  { value: 'junction', label: 'Junction' },
+  { value: 'person', label: 'C4 — Person' },
+  { value: 'system', label: 'C4 — System' },
+  { value: 'container', label: 'C4 — Container' },
+  { value: 'component', label: 'C4 — Component' },
+  { value: 'database_container', label: 'C4 — Database' },
+  { value: 'router', label: 'Net — Router' },
+  { value: 'switch', label: 'Net — Switch' },
+  { value: 'firewall', label: 'Net — Firewall' },
+  { value: 'load_balancer', label: 'Net — Load Balancer' },
+  { value: 'cdn', label: 'Net — CDN' },
+  { value: 'dns', label: 'Net — DNS' },
+];
 
 export function ArchitectureNodeProperties({
   selectedNode,
   onChange,
   onDuplicate,
   onDelete,
-  onAddArchitectureService,
-  onCreateArchitectureBoundary,
 }: DiagramNodePropertiesComponentProps): React.ReactElement {
-  const nodes = useFlowStore((state) => state.nodes);
-  const [activeSection, setActiveSection] = React.useState('content');
+  const [activeSection, setActiveSection] = React.useState('architecture');
   if (selectedNode.type !== 'architecture') {
     return (
       <NodeProperties
@@ -33,7 +58,7 @@ export function ArchitectureNodeProperties({
       />
     );
   }
-  const boundaryOptions = nodes.filter((node) => node.type === 'section');
+  const handleInputKeyDown = createPropertyInputKeyDownHandler({ blurOnEnter: true });
 
   function toggleSection(section: string): void {
     setActiveSection((currentSection) => (currentSection === section ? '' : section));
@@ -44,19 +69,16 @@ export function ArchitectureNodeProperties({
       <InspectorSectionDivider />
 
       <CollapsibleSection
-        title="Content"
+        title="Service"
         icon={<Type className="w-3.5 h-3.5" />}
-        isOpen={activeSection === 'content'}
-        onToggle={() => toggleSection('content')}
+        isOpen={activeSection === 'architecture'}
+        onToggle={() => toggleSection('architecture')}
       >
-        <InspectorField label="Resource Name">
-          <input
-            value={selectedNode.data.label || ''}
-            onChange={(event) => onChange(selectedNode.id, { label: event.target.value })}
-            className={INSPECTOR_INPUT_COMPACT_CLASSNAME}
-            placeholder="API Gateway"
-          />
-        </InspectorField>
+        <ArchitectureNodeSection
+          nodeId={selectedNode.id}
+          data={selectedNode.data}
+          onChange={onChange}
+        />
       </CollapsibleSection>
 
       <CollapsibleSection
@@ -81,66 +103,28 @@ export function ArchitectureNodeProperties({
       </CollapsibleSection>
 
       <CollapsibleSection
-        title="Structure"
+        title="Deployment"
         icon={<ServerCog className="w-3.5 h-3.5" />}
         isOpen={activeSection === 'structure'}
         onToggle={() => toggleSection('structure')}
       >
         <div className="space-y-3">
-          <InspectorField label="Provider">
-            <input
-              value={selectedNode.data.archProvider || ''}
-              onChange={(event) => onChange(selectedNode.id, { archProvider: event.target.value })}
-              className={INSPECTOR_INPUT_COMPACT_CLASSNAME}
-              placeholder="aws, azure, gcp, k8s, custom"
-            />
-          </InspectorField>
-
-          <InspectorField label="Resource Type">
-            <input
-              value={selectedNode.data.archResourceType || ''}
-              onChange={(event) => onChange(selectedNode.id, { archResourceType: event.target.value })}
-              className={INSPECTOR_INPUT_COMPACT_CLASSNAME}
-              placeholder="service, database, queue, group"
-            />
-          </InspectorField>
-
           <div className="grid grid-cols-2 gap-2">
             <InspectorField label="Environment">
-              <input
-                value={selectedNode.data.archEnvironment || ''}
-                onChange={(event) => onChange(selectedNode.id, { archEnvironment: event.target.value })}
-                className={INSPECTOR_INPUT_COMPACT_CLASSNAME}
-                placeholder="prod"
+              <Select
+                value={String(selectedNode.data.archEnvironment || 'default')}
+                onChange={(value) => onChange(selectedNode.id, { archEnvironment: value })}
+                options={ENVIRONMENT_OPTIONS}
+                placeholder="Select environment"
               />
             </InspectorField>
-            <InspectorField
-              label="Boundary"
-              helper={(
-                <div className="flex items-center justify-between gap-2">
-                  <span>Boundary selection also updates containment.</span>
-                  <button
-                    type="button"
-                    className={INSPECTOR_BUTTON_CLASSNAME}
-                    onClick={() => onChange(selectedNode.id, { archBoundaryId: '' })}
-                  >
-                    Clear
-                  </button>
-                </div>
-              )}
-            >
-              <select
-                value={selectedNode.data.archBoundaryId || ''}
-                onChange={(event) => onChange(selectedNode.id, { archBoundaryId: event.target.value })}
-                className={INSPECTOR_INPUT_COMPACT_CLASSNAME}
-              >
-                <option value="">No boundary</option>
-                {boundaryOptions.map((boundaryNode) => (
-                  <option key={boundaryNode.id} value={boundaryNode.id}>
-                    {boundaryNode.data?.label || boundaryNode.id}
-                  </option>
-                ))}
-              </select>
+            <InspectorField label="Resource Type">
+              <Select
+                value={String(selectedNode.data.archResourceType || 'service')}
+                onChange={(value) => onChange(selectedNode.id, { archResourceType: value })}
+                options={RESOURCE_TYPE_OPTIONS}
+                placeholder="Select resource type"
+              />
             </InspectorField>
           </div>
 
@@ -149,70 +133,21 @@ export function ArchitectureNodeProperties({
               <input
                 value={selectedNode.data.archZone || ''}
                 onChange={(event) => onChange(selectedNode.id, { archZone: event.target.value })}
+                onKeyDown={handleInputKeyDown}
                 className={INSPECTOR_INPUT_COMPACT_CLASSNAME}
-                placeholder="public"
+                placeholder="e.g. us-east-1"
               />
             </InspectorField>
             <InspectorField label="Trust Domain">
               <input
                 value={selectedNode.data.archTrustDomain || ''}
                 onChange={(event) => onChange(selectedNode.id, { archTrustDomain: event.target.value })}
+                onKeyDown={handleInputKeyDown}
                 className={INSPECTOR_INPUT_COMPACT_CLASSNAME}
-                placeholder="internal"
+                placeholder="e.g. internal"
               />
             </InspectorField>
           </div>
-
-          <InspectorField label="Quick Semantics">
-            <div className="grid grid-cols-2 gap-2">
-              <button
-                type="button"
-                className={INSPECTOR_BUTTON_CLASSNAME}
-                onClick={() => onChange(selectedNode.id, { archZone: 'public' })}
-              >
-                Zone: Public
-              </button>
-              <button
-                type="button"
-                className={INSPECTOR_BUTTON_CLASSNAME}
-                onClick={() => onChange(selectedNode.id, { archZone: 'private' })}
-              >
-                Zone: Private
-              </button>
-              <button
-                type="button"
-                className={INSPECTOR_BUTTON_CLASSNAME}
-                onClick={() => onChange(selectedNode.id, { archTrustDomain: 'internal' })}
-              >
-                Trust: Internal
-              </button>
-              <button
-                type="button"
-                className={INSPECTOR_BUTTON_CLASSNAME}
-                onClick={() => onChange(selectedNode.id, { archTrustDomain: 'external' })}
-              >
-                Trust: External
-              </button>
-            </div>
-          </InspectorField>
-
-          <div className="grid grid-cols-2 gap-2">
-            <button
-              type="button"
-              className={`${INSPECTOR_BUTTON_CLASSNAME} w-full px-3 py-2 text-sm`}
-              onClick={() => onAddArchitectureService?.(selectedNode.id)}
-            >
-              Add Connected Service
-            </button>
-
-            <button
-              type="button"
-              className="w-full rounded-md border border-violet-300 bg-violet-50 px-3 py-2 text-sm font-medium text-violet-700 hover:border-violet-400"
-              onClick={() => onCreateArchitectureBoundary?.(selectedNode.id)}
-            >
-              Create Boundary
-            </button>
-          </div>
         </div>
       </CollapsibleSection>
 
diff --git a/src/components/properties/families/ArchitectureNodeSection.tsx b/src/components/properties/families/ArchitectureNodeSection.tsx
new file mode 100644
index 0000000..93e9cfa
--- /dev/null
+++ b/src/components/properties/families/ArchitectureNodeSection.tsx
@@ -0,0 +1,320 @@
+import React from 'react';
+import type { NodeData } from '@/lib/types';
+import type { DomainLibraryCategory, DomainLibraryItem } from '@/services/domainLibrary';
+import { loadProviderCatalog, loadProviderShapePreview } from '@/services/shapeLibrary/providerCatalog';
+import { InspectorField } from '@/components/properties/InspectorPrimitives';
+import { SegmentedChoice } from '@/components/properties/SegmentedChoice';
+import { Input } from '@/components/ui/Input';
+import { Select } from '@/components/ui/Select';
+import { Tooltip } from '@/components/Tooltip';
+import { Image as ImageIcon, Upload } from 'lucide-react';
+import { IconSearchField, IconTileScrollGrid } from '@/components/properties/IconTilePickerPrimitives';
+
+interface ArchitectureNodeSectionProps {
+  nodeId: string;
+  data: NodeData;
+  onChange: (id: string, data: Partial<NodeData>) => void;
+}
+
+const PROVIDER_OPTIONS: Array<{ id: DomainLibraryCategory | 'custom'; label: string }> = [
+  { id: 'aws', label: 'AWS' },
+  { id: 'azure', label: 'Azure' },
+  { id: 'gcp', label: 'GCP' },
+  { id: 'cncf', label: 'K8s' },
+  { id: 'custom', label: 'Custom' },
+];
+
+function readFileAsDataUrl(file: File, onLoad: (result: string) => void): void {
+  const reader = new FileReader();
+  reader.onloadend = () => {
+    if (typeof reader.result === 'string') {
+      onLoad(reader.result);
+    }
+  };
+  reader.readAsDataURL(file);
+}
+
+export function ArchitectureNodeSection({
+  nodeId,
+  data,
+  onChange,
+}: ArchitectureNodeSectionProps): React.ReactElement {
+  const provider = (data.archProvider || 'custom') as DomainLibraryCategory | 'custom';
+  const providerLabel = provider.toUpperCase();
+  const customProviderLabel = typeof data.archProviderLabel === 'string' ? data.archProviderLabel : '';
+  const customIconUrl = typeof data.customIconUrl === 'string' ? data.customIconUrl : undefined;
+  const [query, setQuery] = React.useState('');
+  const [category, setCategory] = React.useState('all');
+  const [results, setResults] = React.useState<DomainLibraryItem[]>([]);
+  const [isLoading, setIsLoading] = React.useState(false);
+  const [previewUrls, setPreviewUrls] = React.useState<Record<string, string>>({});
+
+  React.useEffect(() => {
+    if (provider === 'custom') {
+      setResults([]);
+      setCategory('all');
+      return;
+    }
+
+    let cancelled = false;
+    setIsLoading(true);
+    loadProviderCatalog(provider)
+      .then((items) => {
+        if (!cancelled) {
+          setResults(items);
+          setIsLoading(false);
+        }
+      })
+      .catch(() => {
+        if (!cancelled) {
+          setResults([]);
+          setIsLoading(false);
+        }
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [provider]);
+
+  const providerCategories = React.useMemo(() => Array.from(new Set(
+    results
+      .map((item) => item.providerShapeCategory)
+      .filter((value): value is string => Boolean(value))
+  )).sort((left, right) => left.localeCompare(right)), [results]);
+  const hasProviderCategories = providerCategories.length > 1;
+
+  const filteredResults = React.useMemo(() => {
+    const normalizedQuery = query.trim().toLowerCase();
+    return results
+      .filter((item) => {
+        if (category !== 'all' && item.providerShapeCategory !== category) {
+          return false;
+        }
+        if (!normalizedQuery) {
+          return true;
+        }
+        return item.label.toLowerCase().includes(normalizedQuery)
+          || item.description.toLowerCase().includes(normalizedQuery)
+          || (item.providerShapeCategory || '').toLowerCase().includes(normalizedQuery);
+      })
+      .slice(0, 24);
+  }, [category, query, results]);
+
+  React.useEffect(() => {
+    if (filteredResults.length === 0) {
+      return;
+    }
+
+    let cancelled = false;
+    Promise.all(filteredResults.map(async (item) => {
+      if (!item.archIconPackId || !item.archIconShapeId || previewUrls[item.id]) {
+        return null;
+      }
+
+      const preview = await loadProviderShapePreview(item.archIconPackId, item.archIconShapeId);
+      return preview ? [item.id, preview.previewUrl] as const : null;
+    })).then((entries) => {
+      if (cancelled) {
+        return;
+      }
+
+      const loadedEntries = entries.filter((entry): entry is readonly [string, string] => entry !== null);
+      if (loadedEntries.length === 0) {
+        return;
+      }
+
+      setPreviewUrls((current) => {
+        const next = { ...current };
+        loadedEntries.forEach(([itemId, previewUrl]) => {
+          next[itemId] = previewUrl;
+        });
+        return next;
+      });
+    }).catch(() => undefined);
+
+    return () => {
+      cancelled = true;
+    };
+  }, [filteredResults, previewUrls]);
+
+  function applySuggestion(item: DomainLibraryItem): void {
+    onChange(nodeId, {
+      label: item.label,
+      subLabel: item.providerShapeCategory || item.description,
+      icon: item.icon,
+      archProvider: item.category,
+      archProviderLabel: undefined,
+      archResourceType: 'service',
+      customIconUrl: undefined,
+      archIconPackId: item.archIconPackId,
+      archIconShapeId: item.archIconShapeId,
+    });
+  }
+
+  function handleCustomIconChange(event: React.ChangeEvent<HTMLInputElement>): void {
+    const file = event.target.files?.[0];
+    if (!file) {
+      return;
+    }
+
+    readFileAsDataUrl(file, (result) => {
+      onChange(nodeId, { customIconUrl: result });
+    });
+  }
+
+  function handleProviderSelect(value: string): void {
+    if (value === 'custom') {
+      onChange(nodeId, {
+        archProvider: value,
+        archIconPackId: undefined,
+        archIconShapeId: undefined,
+        icon: undefined,
+      });
+      return;
+    }
+
+    onChange(nodeId, {
+      archProvider: value as DomainLibraryCategory,
+      archProviderLabel: undefined,
+      customIconUrl: undefined,
+    });
+  }
+
+  function getItemTooltipText(item: DomainLibraryItem): string {
+    return item.providerShapeCategory ? `${item.label} • ${item.providerShapeCategory}` : item.label;
+  }
+
+  return (
+    <div className="space-y-4">
+      <InspectorField label="Provider">
+        <SegmentedChoice
+          columns={3}
+          size="sm"
+          selectedId={provider}
+          onSelect={handleProviderSelect}
+          items={PROVIDER_OPTIONS.map((option) => ({ id: option.id, label: option.label }))}
+        />
+      </InspectorField>
+
+      {provider === 'custom' ? (
+        <InspectorField
+          label="Custom Provider"
+          helper="Name the provider. Icon is optional."
+        >
+          <div className="space-y-2 rounded-[var(--brand-radius)] border border-slate-200 bg-slate-50/60 p-3">
+            <Input
+              value={customProviderLabel}
+              onChange={(event) => onChange(nodeId, { archProviderLabel: event.target.value })}
+              placeholder="Provider name, e.g. Hetzner"
+            />
+
+            {customIconUrl ? (
+              <div className="flex items-center gap-3 rounded-[var(--brand-radius)] border border-slate-200 bg-white px-3 py-2">
+                <div className="flex h-9 w-9 items-center justify-center overflow-hidden rounded-[var(--radius-sm)] border border-slate-200 bg-slate-50">
+                  <img src={customIconUrl} alt="Custom provider icon" className="h-5 w-5 object-contain" />
+                </div>
+                <span className="flex-1 text-xs font-medium text-slate-500">Custom icon added</span>
+                <label className="cursor-pointer rounded-[var(--radius-sm)] border border-slate-200 px-2.5 py-1 text-xs font-medium text-slate-600 hover:border-slate-300 hover:bg-slate-50">
+                  Replace
+                  <input
+                    type="file"
+                    accept="image/svg+xml,image/png,image/jpeg,image/webp"
+                    className="hidden"
+                    onChange={handleCustomIconChange}
+                  />
+                </label>
+                <button
+                  type="button"
+                  className="rounded-[var(--radius-sm)] border border-red-200 bg-red-50 px-2.5 py-1 text-xs font-medium text-red-600 hover:bg-red-100"
+                  onClick={() => onChange(nodeId, { customIconUrl: undefined })}
+                >
+                  Remove
+                </button>
+              </div>
+            ) : (
+              <label className="flex cursor-pointer items-center justify-center gap-2 rounded-[var(--brand-radius)] border border-dashed border-slate-300 px-3 py-2 text-xs font-medium text-slate-600 transition-all hover:border-[var(--brand-primary-400)] hover:bg-white hover:text-[var(--brand-primary)]">
+                <Upload className="h-3.5 w-3.5" />
+                <span>Add provider icon</span>
+                <input
+                  type="file"
+                  accept="image/svg+xml,image/png,image/jpeg,image/webp"
+                  className="hidden"
+                  onChange={handleCustomIconChange}
+                />
+              </label>
+            )}
+          </div>
+        </InspectorField>
+      ) : (
+        <InspectorField
+          label={`${providerLabel} service library`}
+          helper="Search and pick a service to apply its name, icon, and category."
+        >
+          <div className="space-y-3">
+            <IconSearchField
+              value={query}
+              onChange={(event) => setQuery(event.target.value)}
+              placeholder={`Search ${providerLabel} services`}
+            />
+
+            {hasProviderCategories ? (
+              <Select
+                value={category}
+                onChange={setCategory}
+                options={[
+                  { value: 'all', label: 'All categories' },
+                  ...providerCategories.map((option) => ({ value: option, label: option })),
+                ]}
+                placeholder="All categories"
+              />
+            ) : null}
+
+            {isLoading ? (
+              <div className="grid grid-cols-6 gap-2">
+                {[0, 1, 2, 3, 4, 5, 6, 7].map((i) => (
+                  <div key={i} className="aspect-square animate-pulse rounded-[var(--radius-md)] border border-slate-200 bg-slate-50" />
+                ))}
+              </div>
+            ) : null}
+
+            {!isLoading && filteredResults.length > 0 ? (
+              <IconTileScrollGrid>
+                  {filteredResults.map((item) => {
+                    const isSelected = data.archIconShapeId === item.archIconShapeId;
+                    const previewUrl = previewUrls[item.id];
+                    return (
+                      <Tooltip key={item.id} text={getItemTooltipText(item)} className="block w-full aspect-square">
+                        <button
+                          type="button"
+                          aria-label={item.label}
+                          className={`group flex h-full w-full items-center justify-center rounded-[var(--radius-md)] border p-2 transition-all ${
+                            isSelected
+                              ? 'border-[var(--brand-primary)] bg-[var(--brand-primary-50)]'
+                              : 'border-transparent bg-transparent hover:border-slate-200 hover:bg-slate-50'
+                          }`}
+                          onClick={() => applySuggestion(item)}
+                        >
+                          {previewUrl ? (
+                            <img src={previewUrl} alt="" className="h-10 w-10 object-contain" />
+                          ) : (
+                            <ImageIcon className="h-5 w-5 text-slate-400" />
+                          )}
+                        </button>
+                      </Tooltip>
+                    );
+                  })}
+              </IconTileScrollGrid>
+            ) : null}
+
+            {!isLoading && filteredResults.length === 0 ? (
+              <div className="rounded-[var(--brand-radius)] border border-dashed border-slate-200 px-3 py-4 text-center text-xs text-slate-500">
+                No matching services found.
+              </div>
+            ) : null}
+          </div>
+        </InspectorField>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/properties/families/ClassDiagramNodeProperties.tsx b/src/components/properties/families/ClassDiagramNodeProperties.tsx
index b315f75..a1fbd77 100644
--- a/src/components/properties/families/ClassDiagramNodeProperties.tsx
+++ b/src/components/properties/families/ClassDiagramNodeProperties.tsx
@@ -2,24 +2,26 @@ import React from 'react';
 import type { DiagramNodePropertiesComponentProps } from '@/diagram-types/core';
 import { NodeProperties } from '@/components/properties/NodeProperties';
 import { NodeActionButtons } from '@/components/properties/NodeActionButtons';
-
-function parseLines(input: string): string[] {
-  return input
-    .split('\n')
-    .map((line) => line.trim())
-    .filter((line) => line.length > 0);
-}
-
-function toMultiline(value: string[] | undefined): string {
-  return Array.isArray(value) ? value.join('\n') : '';
-}
+import { ClassNodeSection } from './ClassNodeSection';
+import { CollapsibleSection } from '@/components/ui/CollapsibleSection';
+import {
+  INSPECTOR_BUTTON_CLASSNAME,
+  INSPECTOR_INPUT_COMPACT_CLASSNAME,
+  InspectorField,
+  InspectorSectionDivider,
+} from '@/components/properties/InspectorPrimitives';
+import { createPropertyInputKeyDownHandler } from '@/components/properties/propertyInputBehavior';
+import { Braces, Code, Type } from 'lucide-react';
 
 export function ClassDiagramNodeProperties({
   selectedNode,
   onChange,
   onDuplicate,
   onDelete,
+  onOpenMermaidCodeEditor,
 }: DiagramNodePropertiesComponentProps): React.ReactElement {
+  const [activeSection, setActiveSection] = React.useState('definition');
+
   if (selectedNode.type !== 'class') {
     return (
       <NodeProperties
@@ -31,52 +33,58 @@ export function ClassDiagramNodeProperties({
     );
   }
 
-  const attributes = toMultiline(selectedNode.data.classAttributes);
-  const methods = toMultiline(selectedNode.data.classMethods);
+  const handleInputKeyDown = createPropertyInputKeyDownHandler({ blurOnEnter: true });
+
+  function toggleSection(section: string): void {
+    setActiveSection((currentSection) => (currentSection === section ? '' : section));
+  }
 
   return (
-    <div className="space-y-4">
-      <div>
-        <label className="text-xs font-semibold text-slate-600">Class Name</label>
-        <input
-          value={selectedNode.data.label || ''}
-          onChange={(event) => onChange(selectedNode.id, { label: event.target.value })}
-          className="mt-1 w-full rounded-md border border-slate-300 px-2 py-1.5 text-sm"
-          placeholder="Class name"
-        />
-      </div>
+    <>
+      <InspectorSectionDivider />
 
-      <div>
-        <label className="text-xs font-semibold text-slate-600">Stereotype</label>
-        <input
-          value={selectedNode.data.classStereotype || ''}
-          onChange={(event) => onChange(selectedNode.id, { classStereotype: event.target.value })}
-          className="mt-1 w-full rounded-md border border-slate-300 px-2 py-1.5 text-sm"
-          placeholder="interface, abstract, service..."
-        />
-      </div>
+      <CollapsibleSection
+        title="Class Name"
+        icon={<Type className="w-3.5 h-3.5" />}
+        isOpen={activeSection === 'name'}
+        onToggle={() => toggleSection('name')}
+      >
+        <InspectorField label="Name">
+          <input
+            value={selectedNode.data.label || ''}
+            onChange={(event) => onChange(selectedNode.id, { label: event.target.value })}
+            onKeyDown={handleInputKeyDown}
+            className={INSPECTOR_INPUT_COMPACT_CLASSNAME}
+            placeholder="Class name"
+          />
+        </InspectorField>
+      </CollapsibleSection>
 
-      <div>
-        <label className="text-xs font-semibold text-slate-600">Attributes (one per line)</label>
-        <textarea
-          value={attributes}
-          onChange={(event) => onChange(selectedNode.id, { classAttributes: parseLines(event.target.value) })}
-          className="mt-1 w-full min-h-[88px] rounded-md border border-slate-300 px-2 py-1.5 text-xs font-mono"
-          placeholder="+id: UUID&#10;+name: String"
-        />
-      </div>
+      <CollapsibleSection
+        title="Definition"
+        icon={<Braces className="w-3.5 h-3.5" />}
+        isOpen={activeSection === 'definition'}
+        onToggle={() => toggleSection('definition')}
+      >
+        <ClassNodeSection nodeId={selectedNode.id} data={selectedNode.data} onChange={onChange} />
+      </CollapsibleSection>
 
-      <div>
-        <label className="text-xs font-semibold text-slate-600">Methods (one per line)</label>
-        <textarea
-          value={methods}
-          onChange={(event) => onChange(selectedNode.id, { classMethods: parseLines(event.target.value) })}
-          className="mt-1 w-full min-h-[88px] rounded-md border border-slate-300 px-2 py-1.5 text-xs font-mono"
-          placeholder="+createUser(name: String): User"
-        />
-      </div>
+      <CollapsibleSection
+        title="Code"
+        icon={<Code className="w-3.5 h-3.5" />}
+        isOpen={activeSection === 'code'}
+        onToggle={() => toggleSection('code')}
+      >
+        <button
+          type="button"
+          className={`${INSPECTOR_BUTTON_CLASSNAME} w-full px-3 py-2 text-sm`}
+          onClick={() => onOpenMermaidCodeEditor?.()}
+        >
+          Open Mermaid code
+        </button>
+      </CollapsibleSection>
 
       <NodeActionButtons nodeId={selectedNode.id} onDuplicate={onDuplicate} onDelete={onDelete} />
-    </div>
+    </>
   );
 }
diff --git a/src/components/properties/families/ClassMemberListEditor.tsx b/src/components/properties/families/ClassMemberListEditor.tsx
new file mode 100644
index 0000000..82c8c04
--- /dev/null
+++ b/src/components/properties/families/ClassMemberListEditor.tsx
@@ -0,0 +1,128 @@
+import React from 'react';
+import { ArrowDown, ArrowUp, Plus, X } from 'lucide-react';
+import type { ClassVisibility } from '@/lib/classMembers';
+import { parseClassMember, stringifyClassMember } from '@/lib/classMembers';
+
+interface ClassMemberListEditorProps {
+  title: string;
+  items: string[];
+  placeholder: string;
+  addLabel: string;
+  onChange: (items: string[]) => void;
+}
+
+function updateItem(items: string[], index: number, value: string): string[] {
+  return items.map((item, itemIndex) => (itemIndex === index ? value : item));
+}
+
+function removeItem(items: string[], index: number): string[] {
+  return items.filter((_, itemIndex) => itemIndex !== index);
+}
+
+function moveItem(items: string[], index: number, direction: -1 | 1): string[] {
+  const targetIndex = index + direction;
+  if (targetIndex < 0 || targetIndex >= items.length) {
+    return items;
+  }
+
+  const nextItems = [...items];
+  const [item] = nextItems.splice(index, 1);
+  nextItems.splice(targetIndex, 0, item);
+  return nextItems;
+}
+
+function updateVisibility(items: string[], index: number, visibility: ClassVisibility): string[] {
+  const parsed = parseClassMember(items[index] ?? '');
+  return updateItem(items, index, stringifyClassMember({ ...parsed, visibility }));
+}
+
+function updateSignature(items: string[], index: number, signature: string): string[] {
+  const parsed = parseClassMember(items[index] ?? '');
+  return updateItem(items, index, stringifyClassMember({ ...parsed, signature }));
+}
+
+export function ClassMemberListEditor({
+  title,
+  items,
+  placeholder,
+  addLabel,
+  onChange,
+}: ClassMemberListEditorProps): React.ReactElement {
+  return (
+    <div className="space-y-2">
+      <div className="flex items-center justify-between">
+        <label className="text-xs font-semibold text-slate-600">{title}</label>
+        <button
+          type="button"
+          className="inline-flex items-center gap-1 rounded-[var(--radius-sm)] border border-slate-200 px-2 py-1 text-[11px] font-medium text-slate-600 hover:border-slate-300 hover:text-slate-800"
+          onClick={() => onChange([...items, '+ '])}
+        >
+          <Plus className="h-3 w-3" />
+          {addLabel}
+        </button>
+      </div>
+
+      <div className="space-y-2 rounded-[var(--radius-lg)] border border-slate-200 bg-white p-2">
+        {items.length > 0 ? items.map((item, index) => {
+          const parsed = parseClassMember(item);
+          return (
+            <div key={`${title}-${index}`} className="grid grid-cols-[92px_minmax(0,1fr)_auto] gap-2">
+              <select
+                value={parsed.visibility}
+                onChange={(event) => onChange(updateVisibility(items, index, event.target.value as ClassVisibility))}
+                className="rounded-[var(--radius-sm)] border border-slate-200 px-2 py-1.5 text-xs text-slate-700 outline-none focus:border-violet-300 focus:ring-1 focus:ring-violet-200"
+              >
+                <option value="public">Public</option>
+                <option value="private">Private</option>
+                <option value="protected">Protected</option>
+                <option value="package">Package</option>
+              </select>
+              <input
+                value={parsed.signature}
+                onChange={(event) => onChange(updateSignature(items, index, event.target.value))}
+                className="rounded-[var(--radius-sm)] border border-slate-200 px-2 py-1.5 text-xs font-mono text-slate-700 outline-none focus:border-violet-300 focus:ring-1 focus:ring-violet-200"
+                placeholder={placeholder}
+              />
+              <div className="flex items-center gap-1">
+                <button
+                  type="button"
+                  className="rounded-[var(--radius-xs)] border border-slate-200 p-1 text-slate-500 hover:border-slate-300 hover:text-slate-700 disabled:opacity-40"
+                  onClick={() => onChange(moveItem(items, index, -1))}
+                  disabled={index === 0}
+                  aria-label={`Move ${title} item up`}
+                >
+                  <ArrowUp className="h-3 w-3" />
+                </button>
+                <button
+                  type="button"
+                  className="rounded-[var(--radius-xs)] border border-slate-200 p-1 text-slate-500 hover:border-slate-300 hover:text-slate-700 disabled:opacity-40"
+                  onClick={() => onChange(moveItem(items, index, 1))}
+                  disabled={index === items.length - 1}
+                  aria-label={`Move ${title} item down`}
+                >
+                  <ArrowDown className="h-3 w-3" />
+                </button>
+                <button
+                  type="button"
+                  className="rounded-[var(--radius-xs)] border border-slate-200 p-1 text-slate-500 hover:border-rose-300 hover:text-rose-600"
+                  onClick={() => onChange(removeItem(items, index))}
+                  aria-label={`Remove ${title} item`}
+                >
+                  <X className="h-3 w-3" />
+                </button>
+              </div>
+            </div>
+          );
+        }) : (
+          <button
+            type="button"
+            className="w-full rounded-[var(--radius-sm)] border border-dashed border-slate-200 px-3 py-2 text-left text-xs text-slate-400 hover:border-slate-300 hover:text-slate-600"
+            onClick={() => onChange(['+ '])}
+          >
+            {addLabel}
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/properties/families/ClassNodeSection.tsx b/src/components/properties/families/ClassNodeSection.tsx
new file mode 100644
index 0000000..ea0f401
--- /dev/null
+++ b/src/components/properties/families/ClassNodeSection.tsx
@@ -0,0 +1,50 @@
+import React from 'react';
+import type { NodeData } from '@/lib/types';
+import { ClassMemberListEditor } from './ClassMemberListEditor';
+import { createPropertyInputKeyDownHandler } from '@/components/properties/propertyInputBehavior';
+import { INSPECTOR_INPUT_COMPACT_CLASSNAME } from '@/components/properties/InspectorPrimitives';
+
+interface ClassNodeSectionProps {
+  nodeId: string;
+  data: NodeData;
+  onChange: (id: string, data: Partial<NodeData>) => void;
+}
+
+function normalizeItems(items: string[] | undefined): string[] {
+  return Array.isArray(items) ? items : [];
+}
+
+export function ClassNodeSection({ nodeId, data, onChange }: ClassNodeSectionProps): React.ReactElement {
+  const handleInputKeyDown = createPropertyInputKeyDownHandler({ blurOnEnter: true });
+
+  return (
+    <div className="space-y-4">
+      <div>
+        <label className="text-xs font-semibold text-slate-600">Stereotype</label>
+        <input
+          value={data.classStereotype || ''}
+          onChange={(event) => onChange(nodeId, { classStereotype: event.target.value })}
+          onKeyDown={handleInputKeyDown}
+          className={INSPECTOR_INPUT_COMPACT_CLASSNAME}
+          placeholder="interface, abstract, service..."
+        />
+      </div>
+
+      <ClassMemberListEditor
+        title="Attributes"
+        items={normalizeItems(data.classAttributes)}
+        placeholder="+ id: UUID"
+        addLabel="+ Add attribute"
+        onChange={(items) => onChange(nodeId, { classAttributes: items })}
+      />
+
+      <ClassMemberListEditor
+        title="Methods"
+        items={normalizeItems(data.classMethods)}
+        placeholder="+ save(): void"
+        addLabel="+ Add method"
+        onChange={(items) => onChange(nodeId, { classMethods: items })}
+      />
+    </div>
+  );
+}
diff --git a/src/components/properties/families/ERDiagramNodeProperties.tsx b/src/components/properties/families/ERDiagramNodeProperties.tsx
index 5197e55..ff7f24a 100644
--- a/src/components/properties/families/ERDiagramNodeProperties.tsx
+++ b/src/components/properties/families/ERDiagramNodeProperties.tsx
@@ -2,24 +2,28 @@ import React from 'react';
 import type { DiagramNodePropertiesComponentProps } from '@/diagram-types/core';
 import { NodeProperties } from '@/components/properties/NodeProperties';
 import { NodeActionButtons } from '@/components/properties/NodeActionButtons';
-
-function parseLines(input: string): string[] {
-  return input
-    .split('\n')
-    .map((line) => line.trim())
-    .filter((line) => line.length > 0);
-}
-
-function toMultiline(value: string[] | undefined): string {
-  return Array.isArray(value) ? value.join('\n') : '';
-}
+import { EntityNodeSection } from './EntityNodeSection';
+import { CollapsibleSection } from '@/components/ui/CollapsibleSection';
+import {
+  INSPECTOR_BUTTON_CLASSNAME,
+  INSPECTOR_INPUT_COMPACT_CLASSNAME,
+  InspectorField,
+  InspectorSectionDivider,
+} from '@/components/properties/InspectorPrimitives';
+import { createPropertyInputKeyDownHandler } from '@/components/properties/propertyInputBehavior';
+import { Code, Table, Type } from 'lucide-react';
 
 export function ERDiagramNodeProperties({
   selectedNode,
   onChange,
   onDuplicate,
   onDelete,
+  onGenerateEntityFields,
+  onConvertEntitySelectionToClassDiagram,
+  onOpenMermaidCodeEditor,
 }: DiagramNodePropertiesComponentProps): React.ReactElement {
+  const [activeSection, setActiveSection] = React.useState('fields');
+
   if (selectedNode.type !== 'er_entity') {
     return (
       <NodeProperties
@@ -31,31 +35,72 @@ export function ERDiagramNodeProperties({
     );
   }
 
-  const fields = toMultiline(selectedNode.data.erFields);
+  const handleInputKeyDown = createPropertyInputKeyDownHandler({ blurOnEnter: true });
+
+  function toggleSection(section: string): void {
+    setActiveSection((currentSection) => (currentSection === section ? '' : section));
+  }
 
   return (
-    <div className="space-y-4">
-      <div>
-        <label className="text-xs font-semibold text-slate-600">Entity Name</label>
-        <input
-          value={selectedNode.data.label || ''}
-          onChange={(event) => onChange(selectedNode.id, { label: event.target.value })}
-          className="mt-1 w-full rounded-md border border-slate-300 px-2 py-1.5 text-sm"
-          placeholder="Entity name"
-        />
-      </div>
-
-      <div>
-        <label className="text-xs font-semibold text-slate-600">Fields (one per line)</label>
-        <textarea
-          value={fields}
-          onChange={(event) => onChange(selectedNode.id, { erFields: parseLines(event.target.value) })}
-          className="mt-1 w-full min-h-[120px] rounded-md border border-slate-300 px-2 py-1.5 text-xs font-mono"
-          placeholder="id UUID PK&#10;name STRING&#10;owner_id UUID FK"
+    <>
+      <InspectorSectionDivider />
+
+      <CollapsibleSection
+        title="Entity Name"
+        icon={<Type className="w-3.5 h-3.5" />}
+        isOpen={activeSection === 'name'}
+        onToggle={() => toggleSection('name')}
+      >
+        <InspectorField label="Name">
+          <input
+            value={selectedNode.data.label || ''}
+            onChange={(event) => onChange(selectedNode.id, { label: event.target.value })}
+            onKeyDown={handleInputKeyDown}
+            className={INSPECTOR_INPUT_COMPACT_CLASSNAME}
+            placeholder="Entity name"
+          />
+        </InspectorField>
+      </CollapsibleSection>
+
+      <CollapsibleSection
+        title="Fields"
+        icon={<Table className="w-3.5 h-3.5" />}
+        isOpen={activeSection === 'fields'}
+        onToggle={() => toggleSection('fields')}
+      >
+        <EntityNodeSection
+          nodeId={selectedNode.id}
+          data={selectedNode.data}
+          onChange={onChange}
+          onGenerateEntityFields={onGenerateEntityFields}
         />
-      </div>
+      </CollapsibleSection>
+
+      <CollapsibleSection
+        title="Actions"
+        icon={<Code className="w-3.5 h-3.5" />}
+        isOpen={activeSection === 'actions'}
+        onToggle={() => toggleSection('actions')}
+      >
+        <div className="space-y-2">
+          <button
+            type="button"
+            className={`${INSPECTOR_BUTTON_CLASSNAME} w-full px-3 py-2 text-sm`}
+            onClick={() => onConvertEntitySelectionToClassDiagram?.()}
+          >
+            Convert to class diagram
+          </button>
+          <button
+            type="button"
+            className={`${INSPECTOR_BUTTON_CLASSNAME} w-full px-3 py-2 text-sm`}
+            onClick={() => onOpenMermaidCodeEditor?.()}
+          >
+            Open Mermaid code
+          </button>
+        </div>
+      </CollapsibleSection>
 
       <NodeActionButtons nodeId={selectedNode.id} onDuplicate={onDuplicate} onDelete={onDelete} />
-    </div>
+    </>
   );
 }
diff --git a/src/components/properties/families/EntityFieldListEditor.tsx b/src/components/properties/families/EntityFieldListEditor.tsx
new file mode 100644
index 0000000..52445b5
--- /dev/null
+++ b/src/components/properties/families/EntityFieldListEditor.tsx
@@ -0,0 +1,134 @@
+import React from 'react';
+import { ArrowDown, ArrowUp, Plus, X } from 'lucide-react';
+import type { ErField } from '@/lib/types';
+import { createDefaultErField } from '@/lib/entityFields';
+
+interface EntityFieldListEditorProps {
+  fields: ErField[];
+  onChange: (fields: ErField[]) => void;
+}
+
+function updateField(fields: ErField[], index: number, patch: Partial<ErField>): ErField[] {
+  return fields.map((field, fieldIndex) => (
+    fieldIndex === index ? { ...field, ...patch } : field
+  ));
+}
+
+function removeField(fields: ErField[], index: number): ErField[] {
+  return fields.filter((_, fieldIndex) => fieldIndex !== index);
+}
+
+function moveField(fields: ErField[], index: number, direction: -1 | 1): ErField[] {
+  const targetIndex = index + direction;
+  if (targetIndex < 0 || targetIndex >= fields.length) {
+    return fields;
+  }
+
+  const nextFields = [...fields];
+  const [field] = nextFields.splice(index, 1);
+  nextFields.splice(targetIndex, 0, field);
+  return nextFields;
+}
+
+export function EntityFieldListEditor({
+  fields,
+  onChange,
+}: EntityFieldListEditorProps): React.ReactElement {
+  return (
+    <div className="space-y-2">
+      <div className="flex items-center justify-between">
+        <label className="text-xs font-semibold text-slate-600">Fields</label>
+        <button
+          type="button"
+          className="inline-flex items-center gap-1 rounded-[var(--radius-sm)] border border-slate-200 px-2 py-1 text-[11px] font-medium text-slate-600 hover:border-slate-300 hover:text-slate-800"
+          onClick={() => onChange([...fields, createDefaultErField()])}
+        >
+          <Plus className="h-3 w-3" />
+          + Add field
+        </button>
+      </div>
+
+      <div className="space-y-2 rounded-[var(--radius-lg)] border border-slate-200 bg-white p-2">
+        {fields.length > 0 ? fields.map((field, index) => (
+          <div key={`er-field-${index}`} className="space-y-2 rounded-[var(--radius-sm)] border border-slate-200 bg-slate-50/70 p-2">
+            <div className="grid grid-cols-[minmax(0,1fr)_140px_auto] gap-2">
+              <input
+                value={field.name}
+                onChange={(event) => onChange(updateField(fields, index, { name: event.target.value }))}
+                className="rounded-[var(--radius-sm)] border border-slate-200 px-2 py-1.5 text-sm text-slate-700 outline-none focus:border-violet-300 focus:ring-1 focus:ring-violet-200"
+                placeholder="field_name"
+              />
+              <input
+                value={field.dataType}
+                onChange={(event) => onChange(updateField(fields, index, { dataType: event.target.value }))}
+                className="rounded-[var(--radius-sm)] border border-slate-200 px-2 py-1.5 text-sm text-slate-700 outline-none focus:border-violet-300 focus:ring-1 focus:ring-violet-200"
+                placeholder="VARCHAR(255)"
+              />
+              <div className="flex items-center gap-1">
+                <button
+                  type="button"
+                  className="rounded-[var(--radius-xs)] border border-slate-200 p-1 text-slate-500 hover:border-slate-300 hover:text-slate-700 disabled:opacity-40"
+                  onClick={() => onChange(moveField(fields, index, -1))}
+                  disabled={index === 0}
+                  aria-label="Move field up"
+                >
+                  <ArrowUp className="h-3 w-3" />
+                </button>
+                <button
+                  type="button"
+                  className="rounded-[var(--radius-xs)] border border-slate-200 p-1 text-slate-500 hover:border-slate-300 hover:text-slate-700 disabled:opacity-40"
+                  onClick={() => onChange(moveField(fields, index, 1))}
+                  disabled={index === fields.length - 1}
+                  aria-label="Move field down"
+                >
+                  <ArrowDown className="h-3 w-3" />
+                </button>
+                <button
+                  type="button"
+                  className="rounded-[var(--radius-xs)] border border-slate-200 p-1 text-slate-500 hover:border-rose-300 hover:text-rose-600"
+                  onClick={() => onChange(removeField(fields, index))}
+                  aria-label="Remove field"
+                >
+                  <X className="h-3 w-3" />
+                </button>
+              </div>
+            </div>
+
+            <div className="flex flex-wrap gap-2">
+              <button
+                type="button"
+                className={`rounded-full border px-2.5 py-1 text-[11px] font-semibold transition-colors ${
+                  field.isPrimaryKey
+                    ? 'border-amber-300 bg-amber-50 text-amber-700'
+                    : 'border-slate-200 bg-white text-slate-500 hover:border-slate-300 hover:text-slate-700'
+                }`}
+                onClick={() => onChange(updateField(fields, index, { isPrimaryKey: !field.isPrimaryKey }))}
+              >
+                PK
+              </button>
+              <button
+                type="button"
+                className={`rounded-full border px-2.5 py-1 text-[11px] font-semibold transition-colors ${
+                  field.isForeignKey
+                    ? 'border-sky-300 bg-sky-50 text-sky-700'
+                    : 'border-slate-200 bg-white text-slate-500 hover:border-slate-300 hover:text-slate-700'
+                }`}
+                onClick={() => onChange(updateField(fields, index, { isForeignKey: !field.isForeignKey }))}
+              >
+                FK
+              </button>
+            </div>
+          </div>
+        )) : (
+          <button
+            type="button"
+            className="w-full rounded-[var(--radius-sm)] border border-dashed border-slate-200 px-3 py-2 text-left text-xs text-slate-400 hover:border-slate-300 hover:text-slate-600"
+            onClick={() => onChange([createDefaultErField()])}
+          >
+            + Add field
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/properties/families/EntityNodeSection.tsx b/src/components/properties/families/EntityNodeSection.tsx
new file mode 100644
index 0000000..015f594
--- /dev/null
+++ b/src/components/properties/families/EntityNodeSection.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import type { NodeData } from '@/lib/types';
+import { normalizeErFields } from '@/lib/entityFields';
+import { EntityFieldListEditor } from './EntityFieldListEditor';
+import { INSPECTOR_BUTTON_CLASSNAME } from '@/components/properties/InspectorPrimitives';
+
+interface EntityNodeSectionProps {
+  nodeId: string;
+  data: NodeData;
+  onChange: (id: string, data: Partial<NodeData>) => void;
+  onGenerateEntityFields?: (nodeId: string) => Promise<void> | void;
+}
+
+export function EntityNodeSection({
+  nodeId,
+  data,
+  onChange,
+  onGenerateEntityFields,
+}: EntityNodeSectionProps): React.ReactElement {
+  return (
+    <div className="space-y-4">
+      <button
+        type="button"
+        className={INSPECTOR_BUTTON_CLASSNAME + ' w-full px-3 py-2 text-sm'}
+        onClick={() => void onGenerateEntityFields?.(nodeId)}
+      >
+        Generate fields with AI
+      </button>
+
+      <EntityFieldListEditor
+        fields={normalizeErFields(data.erFields)}
+        onChange={(fields) => onChange(nodeId, { erFields: fields })}
+      />
+    </div>
+  );
+}
diff --git a/src/components/properties/families/JourneyNodeProperties.tsx b/src/components/properties/families/JourneyNodeProperties.tsx
index c5253bd..5966adb 100644
--- a/src/components/properties/families/JourneyNodeProperties.tsx
+++ b/src/components/properties/families/JourneyNodeProperties.tsx
@@ -2,16 +2,10 @@ import React from 'react';
 import type { DiagramNodePropertiesComponentProps } from '@/diagram-types/core';
 import { NodeProperties } from '@/components/properties/NodeProperties';
 import { NodeActionButtons } from '@/components/properties/NodeActionButtons';
-
-function clampJourneyScore(raw: string): number | undefined {
-  if (raw.trim() === '') return undefined;
-  const parsed = Number(raw);
-  if (!Number.isFinite(parsed)) return undefined;
-  const rounded = Math.round(parsed);
-  if (rounded < 0) return 0;
-  if (rounded > 5) return 5;
-  return rounded;
-}
+import { JourneyNodeSection } from './JourneyNodeSection';
+import { CollapsibleSection } from '@/components/ui/CollapsibleSection';
+import { InspectorSectionDivider } from '@/components/properties/InspectorPrimitives';
+import { Footprints } from 'lucide-react';
 
 export function JourneyNodeProperties({
   selectedNode,
@@ -19,6 +13,8 @@ export function JourneyNodeProperties({
   onDuplicate,
   onDelete,
 }: DiagramNodePropertiesComponentProps): React.ReactElement {
+  const [activeSection, setActiveSection] = React.useState('step');
+
   if (selectedNode.type !== 'journey') {
     return (
       <NodeProperties
@@ -30,57 +26,24 @@ export function JourneyNodeProperties({
     );
   }
 
-  const titleValue = selectedNode.data.journeyTask || selectedNode.data.label || '';
-  const actorValue = selectedNode.data.journeyActor || selectedNode.data.subLabel || '';
-  const sectionValue = selectedNode.data.journeySection || '';
-  const scoreValue = typeof selectedNode.data.journeyScore === 'number' ? String(selectedNode.data.journeyScore) : '';
+  function toggleSection(section: string): void {
+    setActiveSection((currentSection) => (currentSection === section ? '' : section));
+  }
 
   return (
-    <div className="space-y-4">
-      <div>
-        <label className="text-xs font-semibold text-slate-600">Section</label>
-        <input
-          value={sectionValue}
-          onChange={(event) => onChange(selectedNode.id, { journeySection: event.target.value })}
-          className="mt-1 w-full rounded-md border border-slate-300 px-2 py-1.5 text-sm"
-          placeholder="Journey section"
-        />
-      </div>
-
-      <div>
-        <label className="text-xs font-semibold text-slate-600">Step Title</label>
-        <input
-          value={titleValue}
-          onChange={(event) => onChange(selectedNode.id, { label: event.target.value, journeyTask: event.target.value })}
-          className="mt-1 w-full rounded-md border border-slate-300 px-2 py-1.5 text-sm"
-          placeholder="Step task"
-        />
-      </div>
-
-      <div>
-        <label className="text-xs font-semibold text-slate-600">Actor</label>
-        <input
-          value={actorValue}
-          onChange={(event) => onChange(selectedNode.id, { subLabel: event.target.value, journeyActor: event.target.value })}
-          className="mt-1 w-full rounded-md border border-slate-300 px-2 py-1.5 text-sm"
-          placeholder="Primary actor"
-        />
-      </div>
-
-      <div>
-        <label className="text-xs font-semibold text-slate-600">Score (0-5)</label>
-        <input
-          type="number"
-          min={0}
-          max={5}
-          value={scoreValue}
-          onChange={(event) => onChange(selectedNode.id, { journeyScore: clampJourneyScore(event.target.value) })}
-          className="mt-1 w-full rounded-md border border-slate-300 px-2 py-1.5 text-sm"
-          placeholder="0-5"
-        />
-      </div>
+    <>
+      <InspectorSectionDivider />
+
+      <CollapsibleSection
+        title="Journey Step"
+        icon={<Footprints className="w-3.5 h-3.5" />}
+        isOpen={activeSection === 'step'}
+        onToggle={() => toggleSection('step')}
+      >
+        <JourneyNodeSection nodeId={selectedNode.id} data={selectedNode.data} onChange={onChange} />
+      </CollapsibleSection>
 
       <NodeActionButtons nodeId={selectedNode.id} onDuplicate={onDuplicate} onDelete={onDelete} />
-    </div>
+    </>
   );
 }
diff --git a/src/components/properties/families/JourneyNodeSection.tsx b/src/components/properties/families/JourneyNodeSection.tsx
new file mode 100644
index 0000000..ccbd686
--- /dev/null
+++ b/src/components/properties/families/JourneyNodeSection.tsx
@@ -0,0 +1,64 @@
+import React from 'react';
+import type { NodeData } from '@/lib/types';
+import { JourneyScoreControl } from '@/components/journey/JourneyScoreControl';
+import { createPropertyInputKeyDownHandler } from '@/components/properties/propertyInputBehavior';
+import { INSPECTOR_INPUT_COMPACT_CLASSNAME, InspectorField } from '@/components/properties/InspectorPrimitives';
+
+interface JourneyNodeSectionProps {
+  nodeId: string;
+  data: NodeData;
+  onChange: (id: string, data: Partial<NodeData>) => void;
+}
+
+export function JourneyNodeSection({
+  nodeId,
+  data,
+  onChange,
+}: JourneyNodeSectionProps): React.ReactElement {
+  const handleInputKeyDown = createPropertyInputKeyDownHandler({ blurOnEnter: true });
+  const titleValue = data.journeyTask || data.label || '';
+  const actorValue = data.journeyActor || data.subLabel || '';
+
+  return (
+    <div className="space-y-3">
+      <InspectorField label="Section">
+        <input
+          value={data.journeySection || ''}
+          onChange={(event) => onChange(nodeId, { journeySection: event.target.value })}
+          onKeyDown={handleInputKeyDown}
+          className={INSPECTOR_INPUT_COMPACT_CLASSNAME}
+          placeholder="Discovery"
+        />
+      </InspectorField>
+
+      <InspectorField label="Step Title">
+        <input
+          value={titleValue}
+          onChange={(event) => onChange(nodeId, { label: event.target.value, journeyTask: event.target.value })}
+          onKeyDown={handleInputKeyDown}
+          className={INSPECTOR_INPUT_COMPACT_CLASSNAME}
+          placeholder="Click Get Started"
+        />
+      </InspectorField>
+
+      <InspectorField label="Actor">
+        <input
+          value={actorValue}
+          onChange={(event) => onChange(nodeId, { subLabel: event.target.value, journeyActor: event.target.value })}
+          onKeyDown={handleInputKeyDown}
+          className={INSPECTOR_INPUT_COMPACT_CLASSNAME}
+          placeholder="New Visitor"
+        />
+      </InspectorField>
+
+      <InspectorField label="Experience Score">
+        <JourneyScoreControl
+          score={data.journeyScore}
+          onChange={(score) => onChange(nodeId, { journeyScore: score })}
+          className="justify-between"
+          starClassName="text-lg"
+        />
+      </InspectorField>
+    </div>
+  );
+}
diff --git a/src/components/properties/families/MindmapNodeProperties.test.tsx b/src/components/properties/families/MindmapNodeProperties.test.tsx
index 635f102..c3d0bc9 100644
--- a/src/components/properties/families/MindmapNodeProperties.test.tsx
+++ b/src/components/properties/families/MindmapNodeProperties.test.tsx
@@ -64,7 +64,7 @@ describe('MindmapNodeProperties', () => {
       />
     );
 
-    fireEvent.click(screen.getByRole('button', { name: 'Color' }));
+    fireEvent.click(screen.getByRole('button', { name: 'Branch Color' }));
     fireEvent.click(screen.getByRole('button', { name: 'Blue' }));
 
     expect(onChange).toHaveBeenCalledWith('branch-topic', expect.objectContaining({ color: 'blue' }));
diff --git a/src/components/properties/families/MindmapNodeProperties.tsx b/src/components/properties/families/MindmapNodeProperties.tsx
index 1d0afe2..0e1a804 100644
--- a/src/components/properties/families/MindmapNodeProperties.tsx
+++ b/src/components/properties/families/MindmapNodeProperties.tsx
@@ -10,6 +10,7 @@ import {
   InspectorField,
   InspectorSectionDivider,
 } from '@/components/properties/InspectorPrimitives';
+import { createPropertyInputKeyDownHandler } from '@/components/properties/propertyInputBehavior';
 import { SegmentedChoice } from '@/components/properties/SegmentedChoice';
 import { Palette, Type, Workflow } from 'lucide-react';
 
@@ -43,6 +44,8 @@ export function MindmapNodeProperties({
   const canAddSibling = Boolean(selectedNode.data.mindmapParentId && onAddMindmapSibling);
   const nodeRole = isRoot ? 'Root Topic' : `Branch (depth ${depth})`;
   const branchStyle = selectedNode.data.mindmapBranchStyle === 'straight' ? 'straight' : 'curved';
+  const collapsed = selectedNode.data.mindmapCollapsed === true;
+  const handleInputKeyDown = createPropertyInputKeyDownHandler({ blurOnEnter: true });
 
   function toggleSection(section: string): void {
     setActiveSection((currentSection) => (currentSection === section ? '' : section));
@@ -62,6 +65,7 @@ export function MindmapNodeProperties({
           <input
             value={selectedNode.data.label || ''}
             onChange={(event) => onChange(selectedNode.id, { label: event.target.value })}
+            onKeyDown={handleInputKeyDown}
             className={INSPECTOR_INPUT_COMPACT_CLASSNAME}
             placeholder="Mindmap topic"
           />
@@ -69,11 +73,12 @@ export function MindmapNodeProperties({
       </CollapsibleSection>
 
       <CollapsibleSection
-        title="Color"
+        title="Branch Color"
         icon={<Palette className="w-3.5 h-3.5" />}
         isOpen={activeSection === 'appearance'}
         onToggle={() => toggleSection('appearance')}
       >
+        <p className="mb-3 text-xs text-slate-500">Applies the selected color to this topic and all of its descendants.</p>
         <ColorPicker
           selectedColor={selectedNode.data.color}
           selectedColorMode={selectedNode.data.colorMode}
@@ -96,9 +101,10 @@ export function MindmapNodeProperties({
         onToggle={() => toggleSection('structure')}
       >
         <div className="space-y-3">
-          <div className="rounded-md border border-slate-200 bg-slate-50 px-3 py-2">
-            <div className="text-[11px] font-semibold uppercase tracking-wide text-slate-500">Hierarchy</div>
-            <div className="mt-1 text-sm text-slate-700">{nodeRole}</div>
+          <div className="flex items-center gap-2">
+            <span className="rounded-full bg-slate-100 px-2.5 py-0.5 text-[11px] font-semibold text-slate-600">
+              {nodeRole}
+            </span>
           </div>
 
           <div className="grid grid-cols-2 gap-2">
@@ -112,13 +118,23 @@ export function MindmapNodeProperties({
             <button
               type="button"
               disabled={!canAddSibling}
-              className={`${INSPECTOR_BUTTON_CLASSNAME} px-3 py-2 text-sm disabled:cursor-not-allowed disabled:opacity-45`}
+              className={`${INSPECTOR_BUTTON_CLASSNAME} px-3 py-2 text-sm`}
               onClick={() => onAddMindmapSibling?.(selectedNode.id)}
             >
               Add Sibling Topic
             </button>
           </div>
 
+          {!isRoot ? (
+            <button
+              type="button"
+              className={`${INSPECTOR_BUTTON_CLASSNAME} w-full px-3 py-2 text-sm`}
+              onClick={() => onChange(selectedNode.id, { mindmapCollapsed: !collapsed })}
+            >
+              {collapsed ? 'Expand Branch' : 'Collapse Branch'}
+            </button>
+          ) : null}
+
           {isRoot ? (
             <InspectorField label="Branch Style">
               <SegmentedChoice
diff --git a/src/components/properties/families/SequenceNodeProperties.tsx b/src/components/properties/families/SequenceNodeProperties.tsx
new file mode 100644
index 0000000..e216fa3
--- /dev/null
+++ b/src/components/properties/families/SequenceNodeProperties.tsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import type { DiagramNodePropertiesComponentProps } from '@/diagram-types/core';
+import { NodeProperties } from '@/components/properties/NodeProperties';
+import { NodeActionButtons } from '@/components/properties/NodeActionButtons';
+import { SequenceNodeSection } from './SequenceNodeSection';
+import { CollapsibleSection } from '@/components/ui/CollapsibleSection';
+import { InspectorSectionDivider } from '@/components/properties/InspectorPrimitives';
+import { Users } from 'lucide-react';
+
+export function SequenceNodeProperties({
+  selectedNode,
+  onChange,
+  onDuplicate,
+  onDelete,
+}: DiagramNodePropertiesComponentProps): React.ReactElement {
+  const [activeSection, setActiveSection] = React.useState('participant');
+
+  if (selectedNode.type !== 'sequence_participant') {
+    return (
+      <NodeProperties
+        selectedNode={selectedNode}
+        onChange={onChange}
+        onDuplicate={onDuplicate}
+        onDelete={onDelete}
+      />
+    );
+  }
+
+  function toggleSection(section: string): void {
+    setActiveSection((current) => (current === section ? '' : section));
+  }
+
+  return (
+    <>
+      <InspectorSectionDivider />
+
+      <CollapsibleSection
+        title="Participant"
+        icon={<Users className="w-3.5 h-3.5" />}
+        isOpen={activeSection === 'participant'}
+        onToggle={() => toggleSection('participant')}
+      >
+        <SequenceNodeSection nodeId={selectedNode.id} data={selectedNode.data} onChange={onChange} />
+      </CollapsibleSection>
+
+      <NodeActionButtons nodeId={selectedNode.id} onDuplicate={onDuplicate} onDelete={onDelete} />
+    </>
+  );
+}
diff --git a/src/components/properties/families/SequenceNodeSection.tsx b/src/components/properties/families/SequenceNodeSection.tsx
new file mode 100644
index 0000000..aa6f5a1
--- /dev/null
+++ b/src/components/properties/families/SequenceNodeSection.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import type { NodeData } from '@/lib/types';
+import { createPropertyInputKeyDownHandler } from '@/components/properties/propertyInputBehavior';
+import { INSPECTOR_INPUT_COMPACT_CLASSNAME, InspectorField } from '@/components/properties/InspectorPrimitives';
+import { SegmentedChoice } from '@/components/properties/SegmentedChoice';
+
+interface SequenceNodeSectionProps {
+  nodeId: string;
+  data: NodeData;
+  onChange: (id: string, data: Partial<NodeData>) => void;
+}
+
+const KIND_ITEMS = [
+  { id: 'participant', label: 'Box' },
+  { id: 'actor', label: 'Actor' },
+];
+
+export function SequenceNodeSection({
+  nodeId,
+  data,
+  onChange,
+}: SequenceNodeSectionProps): React.ReactElement {
+  const handleInputKeyDown = createPropertyInputKeyDownHandler({ blurOnEnter: true });
+
+  return (
+    <div className="space-y-3">
+      <InspectorField label="Name">
+        <input
+          value={data.label || ''}
+          onChange={(event) => onChange(nodeId, { label: event.target.value })}
+          onKeyDown={handleInputKeyDown}
+          className={INSPECTOR_INPUT_COMPACT_CLASSNAME}
+          placeholder="Alice"
+        />
+      </InspectorField>
+
+      <InspectorField label="Kind">
+        <SegmentedChoice
+          items={KIND_ITEMS}
+          selectedId={data.seqParticipantKind || 'participant'}
+          onSelect={(id) => onChange(nodeId, { seqParticipantKind: id as 'participant' | 'actor' })}
+          columns={2}
+        />
+      </InspectorField>
+
+      <InspectorField label="Alias">
+        <input
+          value={data.seqParticipantAlias || ''}
+          onChange={(event) => onChange(nodeId, { seqParticipantAlias: event.target.value })}
+          onKeyDown={handleInputKeyDown}
+          className={INSPECTOR_INPUT_COMPACT_CLASSNAME}
+          placeholder="A"
+        />
+      </InspectorField>
+    </div>
+  );
+}
diff --git a/src/components/properties/families/StructuredTextListEditor.tsx b/src/components/properties/families/StructuredTextListEditor.tsx
new file mode 100644
index 0000000..e581502
--- /dev/null
+++ b/src/components/properties/families/StructuredTextListEditor.tsx
@@ -0,0 +1,107 @@
+import React from 'react';
+import { ArrowDown, ArrowUp, Plus, X } from 'lucide-react';
+import { createPropertyInputKeyDownHandler } from '@/components/properties/propertyInputBehavior';
+
+interface StructuredTextListEditorProps {
+  title: string;
+  items: string[];
+  placeholder: string;
+  addLabel: string;
+  onChange: (items: string[]) => void;
+}
+
+function updateItem(items: string[], index: number, value: string): string[] {
+  const nextItems = [...items];
+  nextItems[index] = value;
+  return nextItems;
+}
+
+function removeItem(items: string[], index: number): string[] {
+  return items.filter((_, itemIndex) => itemIndex !== index);
+}
+
+function moveItem(items: string[], index: number, direction: -1 | 1): string[] {
+  const targetIndex = index + direction;
+  if (targetIndex < 0 || targetIndex >= items.length) {
+    return items;
+  }
+
+  const nextItems = [...items];
+  const [item] = nextItems.splice(index, 1);
+  nextItems.splice(targetIndex, 0, item);
+  return nextItems;
+}
+
+export function StructuredTextListEditor({
+  title,
+  items,
+  placeholder,
+  addLabel,
+  onChange,
+}: StructuredTextListEditorProps): React.ReactElement {
+  const handleInputKeyDown = createPropertyInputKeyDownHandler({ blurOnEnter: true });
+
+  return (
+    <div className="space-y-2">
+      <div className="flex items-center justify-between">
+        <label className="text-xs font-semibold text-slate-600">{title}</label>
+        <button
+          type="button"
+          className="inline-flex items-center gap-1 rounded-[var(--radius-sm)] border border-slate-200 px-2 py-1 text-[11px] font-medium text-slate-600 hover:border-slate-300 hover:text-slate-800"
+          onClick={() => onChange([...items, ''])}
+        >
+          <Plus className="h-3 w-3" />
+          {addLabel}
+        </button>
+      </div>
+
+      <div className="space-y-2 rounded-[var(--radius-lg)] border border-slate-200 bg-white p-2">
+        {items.length > 0 ? items.map((item, index) => (
+          <div key={`${title}-${index}`} className="flex items-center gap-2">
+            <input
+              value={item}
+              onChange={(event) => onChange(updateItem(items, index, event.target.value))}
+              onKeyDown={handleInputKeyDown}
+              className="flex-1 rounded-[var(--radius-sm)] border border-slate-200 px-2 py-1.5 text-xs font-mono text-slate-700 outline-none focus:border-violet-300 focus:ring-1 focus:ring-violet-200"
+              placeholder={placeholder}
+            />
+            <button
+              type="button"
+              className="rounded-[var(--radius-xs)] border border-slate-200 p-1 text-slate-500 hover:border-slate-300 hover:text-slate-700 disabled:opacity-40"
+              onClick={() => onChange(moveItem(items, index, -1))}
+              disabled={index === 0}
+              aria-label={`Move ${title} item up`}
+            >
+              <ArrowUp className="h-3 w-3" />
+            </button>
+            <button
+              type="button"
+              className="rounded-[var(--radius-xs)] border border-slate-200 p-1 text-slate-500 hover:border-slate-300 hover:text-slate-700 disabled:opacity-40"
+              onClick={() => onChange(moveItem(items, index, 1))}
+              disabled={index === items.length - 1}
+              aria-label={`Move ${title} item down`}
+            >
+              <ArrowDown className="h-3 w-3" />
+            </button>
+            <button
+              type="button"
+              className="rounded-[var(--radius-xs)] border border-slate-200 p-1 text-slate-500 hover:border-rose-300 hover:text-rose-600"
+              onClick={() => onChange(removeItem(items, index))}
+              aria-label={`Remove ${title} item`}
+            >
+              <X className="h-3 w-3" />
+            </button>
+          </div>
+        )) : (
+          <button
+            type="button"
+            className="w-full rounded-[var(--radius-sm)] border border-dashed border-slate-200 px-3 py-2 text-left text-xs text-slate-400 hover:border-slate-300 hover:text-slate-600"
+            onClick={() => onChange([''])}
+          >
+            {addLabel}
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/properties/propertyInputBehavior.test.ts b/src/components/properties/propertyInputBehavior.test.ts
new file mode 100644
index 0000000..3825ad4
--- /dev/null
+++ b/src/components/properties/propertyInputBehavior.test.ts
@@ -0,0 +1,48 @@
+import type React from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import { handlePropertyInputKeyDown } from './propertyInputBehavior';
+
+function createKeyboardEvent(overrides: Partial<React.KeyboardEvent<HTMLElement>> = {}): React.KeyboardEvent<HTMLElement> {
+  return {
+    key: 'a',
+    metaKey: false,
+    ctrlKey: false,
+    altKey: false,
+    shiftKey: false,
+    stopPropagation: vi.fn(),
+    preventDefault: vi.fn(),
+    currentTarget: {
+      blur: vi.fn(),
+    } as unknown as HTMLElement,
+    ...overrides,
+  } as React.KeyboardEvent<HTMLElement>;
+}
+
+describe('propertyInputBehavior', () => {
+  it('stops propagation for select-all shortcuts without preventing the native selection', () => {
+    const event = createKeyboardEvent({ key: 'a', metaKey: true });
+
+    handlePropertyInputKeyDown(event);
+
+    expect(event.stopPropagation).toHaveBeenCalled();
+    expect(event.preventDefault).not.toHaveBeenCalled();
+  });
+
+  it('blurs on Cmd/Ctrl+Enter when configured', () => {
+    const event = createKeyboardEvent({ key: 'Enter', ctrlKey: true });
+
+    handlePropertyInputKeyDown(event, { blurOnModifiedEnter: true });
+
+    expect(event.preventDefault).toHaveBeenCalled();
+    expect((event.currentTarget as HTMLElement).blur).toHaveBeenCalled();
+  });
+
+  it('blurs on plain Enter for single-line inspector inputs when configured', () => {
+    const event = createKeyboardEvent({ key: 'Enter' });
+
+    handlePropertyInputKeyDown(event, { blurOnEnter: true });
+
+    expect(event.preventDefault).toHaveBeenCalled();
+    expect((event.currentTarget as HTMLElement).blur).toHaveBeenCalled();
+  });
+});
diff --git a/src/components/properties/propertyInputBehavior.ts b/src/components/properties/propertyInputBehavior.ts
new file mode 100644
index 0000000..7879034
--- /dev/null
+++ b/src/components/properties/propertyInputBehavior.ts
@@ -0,0 +1,49 @@
+import type React from 'react';
+
+interface PropertyInputKeyDownOptions {
+  blurOnEnter?: boolean;
+  blurOnModifiedEnter?: boolean;
+}
+
+function isSelectAllShortcut(event: React.KeyboardEvent<HTMLElement>): boolean {
+  return (event.metaKey || event.ctrlKey) && event.key.toLowerCase() === 'a';
+}
+
+export function handlePropertyInputKeyDown(
+  event: React.KeyboardEvent<HTMLElement>,
+  options: PropertyInputKeyDownOptions = {}
+): void {
+  event.stopPropagation();
+
+  if (isSelectAllShortcut(event)) {
+    return;
+  }
+
+  const target = event.currentTarget as HTMLElement;
+
+  if (options.blurOnModifiedEnter && (event.metaKey || event.ctrlKey) && event.key === 'Enter') {
+    event.preventDefault();
+    target.blur();
+    return;
+  }
+
+  if (
+    options.blurOnEnter
+    && event.key === 'Enter'
+    && !event.metaKey
+    && !event.ctrlKey
+    && !event.altKey
+    && !event.shiftKey
+  ) {
+    event.preventDefault();
+    target.blur();
+  }
+}
+
+export function createPropertyInputKeyDownHandler(
+  options: PropertyInputKeyDownOptions = {}
+): (event: React.KeyboardEvent<HTMLElement>) => void {
+  return (event) => {
+    handlePropertyInputKeyDown(event, options);
+  };
+}
diff --git a/src/components/properties/wireframeVariants.ts b/src/components/properties/wireframeVariants.ts
new file mode 100644
index 0000000..85bec86
--- /dev/null
+++ b/src/components/properties/wireframeVariants.ts
@@ -0,0 +1,41 @@
+export interface WireframeVariantOption {
+  id: string;
+  label: string;
+  description: string;
+}
+
+export const BROWSER_VARIANTS: WireframeVariantOption[] = [
+  { id: 'landing', label: 'Landing', description: 'Hero-led marketing page' },
+  { id: 'dashboard', label: 'Dashboard', description: 'Dense analytics workspace' },
+  { id: 'form', label: 'Form', description: 'Focused data entry flow' },
+  { id: 'modal', label: 'Modal', description: 'Dialog over existing content' },
+  { id: 'cookie', label: 'Cookie', description: 'Consent banner overlay' },
+  { id: 'pricing', label: 'Pricing', description: 'Tier comparison layout' },
+  { id: 'analytics', label: 'Analytics', description: 'Operational metrics board' },
+  { id: 'settings', label: 'Settings', description: 'Preferences and controls' },
+  { id: 'docs', label: 'Docs', description: 'Documentation reader shell' },
+  { id: 'checkout', label: 'Checkout', description: 'Order confirmation funnel' },
+  { id: 'kanban', label: 'Kanban', description: 'Board-style planning view' },
+];
+
+export const MOBILE_VARIANTS: WireframeVariantOption[] = [
+  { id: 'login', label: 'Login', description: 'Authentication entry screen' },
+  { id: 'social', label: 'Social', description: 'Feed with media cards' },
+  { id: 'chat', label: 'Chat', description: 'Conversation thread UI' },
+  { id: 'product', label: 'Product', description: 'Commerce detail screen' },
+  { id: 'list', label: 'List', description: 'Scrollable content list' },
+  { id: 'profile', label: 'Profile', description: 'Identity and activity summary' },
+  { id: 'wallet', label: 'Wallet', description: 'Balance and transaction view' },
+  { id: 'calendar', label: 'Calendar', description: 'Schedule overview' },
+  { id: 'maps', label: 'Maps', description: 'Location and route screen' },
+  { id: 'music', label: 'Music', description: 'Player and queue screen' },
+  { id: 'fitness', label: 'Fitness', description: 'Progress and activity view' },
+];
+
+export function getWireframeVariants(type: string | undefined): WireframeVariantOption[] {
+  if (type === 'browser') {
+    return BROWSER_VARIANTS;
+  }
+
+  return MOBILE_VARIANTS;
+}
diff --git a/src/components/shareModalContent.ts b/src/components/shareModalContent.ts
new file mode 100644
index 0000000..54f75e7
--- /dev/null
+++ b/src/components/shareModalContent.ts
@@ -0,0 +1,25 @@
+export type ShareModalStatus = 'realtime' | 'waiting' | 'fallback';
+
+export const SHARE_MODAL_COPY = {
+    title: 'Share live canvas',
+    betaBadge: 'Beta',
+    description: 'Invite people with a room link so they can open this canvas and collaborate in the same workspace.',
+    roomLabel: 'Room',
+    linkLabel: 'Invite link',
+    copyLink: 'Copy invite link',
+    copiedLink: 'Copied invite link',
+    footerNote: 'Your diagram stays local unless you share this room. If copy is blocked, copy the link above manually.',
+    close: 'Close',
+    closeDialog: 'Close share dialog',
+} as const;
+
+const SHARE_STATUS_MESSAGE_DEFAULTS: Record<ShareModalStatus, string> = {
+    realtime: 'Anyone with this link can join the live canvas right away.',
+    waiting: 'The link is ready. Live sync is still connecting for this session.',
+    fallback:
+        'This browser is in local-only mode right now. You can still copy the room link, but others will not join live until realtime sync is available.',
+};
+
+export function getShareStatusDefaultMessage(status: ShareModalStatus): string {
+    return SHARE_STATUS_MESSAGE_DEFAULTS[status];
+}
diff --git a/src/components/studio-code-panel/useStudioCodePanelController.ts b/src/components/studio-code-panel/useStudioCodePanelController.ts
index cd45a7d..c384d6f 100644
--- a/src/components/studio-code-panel/useStudioCodePanelController.ts
+++ b/src/components/studio-code-panel/useStudioCodePanelController.ts
@@ -1,4 +1,4 @@
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import type { TFunction } from 'i18next';
 import { parseOpenFlowDSL, type ParseDiagnostic } from '@/lib/openFlowDSLParser';
 import { toMermaid } from '@/services/exportService';
@@ -29,7 +29,7 @@ interface UseStudioCodePanelControllerParams {
     setMermaidDiagnostics: (snapshot: MermaidDiagnosticsSnapshot | null) => void;
     clearMermaidDiagnostics: () => void;
     addToast: (message: string, type?: 'success' | 'error' | 'info' | 'warning', duration?: number) => void;
-    t: TFunction;
+    t: TFunction; // kept for future i18n use
 }
 
 interface UseStudioCodePanelControllerResult {
@@ -39,6 +39,8 @@ interface UseStudioCodePanelControllerResult {
     isApplying: boolean;
     draftPreview: DraftPreview;
     hasDraftChanges: boolean;
+    liveSync: boolean;
+    setLiveSync: (value: boolean) => void;
     handleCodeChange: (value: string) => void;
     handleApply: () => Promise<void>;
     handleReset: () => void;
@@ -57,20 +59,21 @@ export function useStudioCodePanelController({
     setMermaidDiagnostics,
     clearMermaidDiagnostics,
     addToast,
-    t,
+    t: _t,
 }: UseStudioCodePanelControllerParams): UseStudioCodePanelControllerResult {
     const [error, setError] = useState<string | null>(null);
     const [diagnostics, setDiagnostics] = useState<ParseDiagnostic[]>([]);
     const [isApplying, setIsApplying] = useState(false);
+    const [liveSync, setLiveSync] = useState(false);
     const [draftCodeByMode, setDraftCodeByMode] = useState<Partial<Record<StudioCodeMode, string>>>({});
     const [lastAppliedCode, setLastAppliedCode] = useState<Record<StudioCodeMode, string>>({
         openflow: '',
         mermaid: '',
     });
 
-    const generatedFlowMind = useMemo(() => toOpenFlowDSL(nodes, edges), [nodes, edges]);
+    const generatedOpenFlow = useMemo(() => toOpenFlowDSL(nodes, edges), [nodes, edges]);
     const generatedMermaid = useMemo(() => toMermaid(nodes, edges), [nodes, edges]);
-    const generatedCode = mode === 'openflow' ? generatedFlowMind : generatedMermaid;
+    const generatedCode = mode === 'openflow' ? generatedOpenFlow : generatedMermaid;
     const code = draftCodeByMode[mode] ?? generatedCode;
 
     const draftPreview = useMemo<DraftPreview>(() => {
@@ -176,6 +179,12 @@ export function useStudioCodePanelController({
         onModeChange(nextMode);
     }, [onModeChange]);
 
+    useEffect(() => {
+        if (!liveSync || !hasDraftChanges || draftPreview.state !== 'ready' || isApplying) return;
+        const timer = setTimeout(() => { void handleApply(); }, 800);
+        return () => clearTimeout(timer);
+    }, [liveSync, hasDraftChanges, draftPreview.state, isApplying, handleApply]);
+
     const handleCodeChange = useCallback((value: string) => {
         setDraftCodeByMode((current) => ({
             ...current,
@@ -192,6 +201,8 @@ export function useStudioCodePanelController({
         isApplying,
         draftPreview,
         hasDraftChanges,
+        liveSync,
+        setLiveSync,
         handleCodeChange,
         handleApply,
         handleReset,
diff --git a/src/components/studioAICopy.ts b/src/components/studioAICopy.ts
new file mode 100644
index 0000000..f97dec3
--- /dev/null
+++ b/src/components/studioAICopy.ts
@@ -0,0 +1,4 @@
+export const STUDIO_AI_COPY = {
+    lastRequestFailedTitle: 'Last request failed',
+    dismissErrorAriaLabel: 'Dismiss AI error',
+} as const;
diff --git a/src/components/toolbar/ToolbarAddMenuPanel.tsx b/src/components/toolbar/ToolbarAddMenuPanel.tsx
index 06399d3..96ad1be 100644
--- a/src/components/toolbar/ToolbarAddMenuPanel.tsx
+++ b/src/components/toolbar/ToolbarAddMenuPanel.tsx
@@ -36,7 +36,7 @@ export function ToolbarAddMenuPanel({ onAddShape }: ToolbarAddMenuPanelProps): R
     const { t } = useTranslation();
 
     return (
-        <div className="absolute bottom-full left-1/2 mb-3 w-52 -translate-x-1/2 rounded-[var(--radius-lg)] border border-white/20 bg-white/95 p-1 shadow-xl ring-1 ring-black/5 backdrop-blur-md animate-in slide-in-from-bottom-4 zoom-in-95 duration-200 origin-bottom pointer-events-auto">
+        <div className="absolute bottom-full left-1/2 mb-3 w-52 -translate-x-1/2 rounded-[var(--radius-lg)] border border-white/20 bg-white/95 p-1 shadow-[var(--shadow-md)] ring-1 ring-black/5 backdrop-blur-md animate-in slide-in-from-bottom-4 zoom-in-95 duration-200 origin-bottom pointer-events-auto">
             <div className="px-3 py-2 text-[10px] font-bold uppercase tracking-wider text-slate-400">
                 {t('toolbar.shapes', 'Shapes')}
             </div>
diff --git a/src/components/top-nav/TopNavActions.tsx b/src/components/top-nav/TopNavActions.tsx
index 3a5a2be..4464720 100644
--- a/src/components/top-nav/TopNavActions.tsx
+++ b/src/components/top-nav/TopNavActions.tsx
@@ -13,6 +13,7 @@ const LazyShareModal = lazy(async () => {
 
 interface CollaborationState {
     roomId: string;
+    inviteUrl: string;
     viewerCount: number;
     status: 'realtime' | 'waiting' | 'fallback';
     cacheState: 'unavailable' | 'syncing' | 'ready' | 'hydrated';
@@ -28,13 +29,22 @@ interface CollaborationState {
 interface TopNavActionsProps {
     onPlay: () => void;
     onExportPNG: (format?: 'png' | 'jpeg') => void;
+    onCopyImage: (format?: 'png' | 'jpeg') => void;
     onExportSVG: () => void;
-    onExportAnimated: (format: 'video' | 'gif') => void;
+    onCopySVG: () => void;
+    onExportPDF: () => void;
+    onExportCinematic: (format: 'cinematic-video' | 'cinematic-gif') => void;
     onExportJSON: () => void;
+    onCopyJSON: () => void;
     onExportMermaid: () => void;
+    onDownloadMermaid: () => void;
     onExportPlantUML: () => void;
+    onDownloadPlantUML: () => void;
     onExportOpenFlowDSL: () => void;
+    onDownloadOpenFlowDSL: () => void;
     onExportFigma: () => void;
+    onDownloadFigma: () => void;
+    onShare: () => void;
     collaboration?: CollaborationState;
     isBeveled: boolean;
 }
@@ -72,9 +82,9 @@ function getCollaborationStatusLabel(
 
     switch (status) {
         case 'realtime':
-            return `${t('share.status.realtime', { defaultValue: 'Realtime peer sync' })}${cacheLabel}`;
+            return `${t('share.status.realtime', { defaultValue: 'Live collaboration ready' })}${cacheLabel}`;
         case 'waiting':
-            return `${t('share.status.waiting', { defaultValue: 'Connecting to realtime sync' })}${cacheLabel}`;
+            return `${t('share.status.waiting', { defaultValue: 'Connecting live collaboration' })}${cacheLabel}`;
         default:
             return `${t('share.status.fallback', { defaultValue: 'Local-only mode' })}${cacheLabel}`;
     }
@@ -94,27 +104,42 @@ function getCollaborationStatusDotClass(status: CollaborationState['status']): s
 export function TopNavActions({
     onPlay,
     onExportPNG,
+    onCopyImage,
     onExportSVG,
-    onExportAnimated,
+    onCopySVG,
+    onExportPDF,
+    onExportCinematic,
     onExportJSON,
+    onCopyJSON,
     onExportMermaid,
+    onDownloadMermaid,
     onExportPlantUML,
+    onDownloadPlantUML,
     onExportOpenFlowDSL,
+    onDownloadOpenFlowDSL,
     onExportFigma,
+    onDownloadFigma,
+    onShare,
     collaboration,
     isBeveled,
 }: TopNavActionsProps): React.ReactElement {
     const { t } = useTranslation();
+    const playLabel = t('common.play', 'Preview');
     const [isShareModalOpen, setIsShareModalOpen] = React.useState(false);
     const viewerCount = collaboration?.viewerCount ?? 1;
     const visibleViewerCount = Math.min(viewerCount, 4);
     const visibleParticipants = collaboration?.participants.slice(0, visibleViewerCount) ?? [];
+    const shareButtonClassName = `ml-1 h-10 w-10 rounded-[var(--radius-md)] border text-slate-600 transition-all sm:h-9 sm:w-9 ${isBeveled
+        ? 'btn-beveled-secondary'
+        : 'bg-white border-slate-200 hover:border-slate-300 shadow-sm hover:shadow'
+        }`;
+    const playButtonClassName = 'h-10 px-2.5 font-medium sm:h-9 sm:px-3';
 
     return (
-        <div className="flex items-center gap-3 min-w-[240px] justify-end">
-            <div className="flex items-center gap-2">
+        <div className="flex min-w-0 items-center justify-end gap-2 sm:gap-3">
+            <div className="flex items-center gap-1.5 sm:gap-2">
                 {collaboration && (
-                    <div className="flex items-center gap-2 mr-1 border-r border-slate-200/60 pr-3">
+                    <div className="mr-1 hidden items-center gap-2 border-r border-slate-200/60 pr-3 md:flex">
                         {/* Status Indicator */}
                         <Tooltip text={getCollaborationStatusLabel(collaboration.status, collaboration.cacheState, t)} side="bottom">
                             <div className={`w-2 h-2 rounded-full ${getCollaborationStatusDotClass(collaboration.status)}`} />
@@ -139,43 +164,51 @@ export function TopNavActions({
                             )}
                         </div>
 
-                        <Tooltip text={t('share.openDialog', 'Share dialog')} side="bottom">
+                        <Tooltip text={t('share.openDialog', 'Open sharing')} side="bottom">
                             <Button
                                 variant="icon"
                                 size="icon"
                                 onClick={() => setIsShareModalOpen(true)}
                                 data-testid="topnav-share"
-                                className={`h-8 w-8 ml-1 rounded-[var(--radius-md)] border text-slate-600 transition-all ${isBeveled
-                                    ? 'btn-beveled-secondary'
-                                    : 'bg-white border-slate-200 hover:border-slate-300 shadow-sm hover:shadow'
-                                    }`}
+                                className={shareButtonClassName}
                                 icon={<Share2 className="w-4 h-4" />}
                             />
                         </Tooltip>
                     </div>
                 )}
 
-                <Tooltip text={t('nav.playbackMode', 'Playback Mode')} side="bottom">
+                <Tooltip text={t('nav.playbackMode', 'Preview playback')} side="bottom">
                     <Button
                         variant="secondary"
+                        size="sm"
                         onClick={onPlay}
                         data-testid="topnav-play"
-                        className="h-9 px-4 text-sm font-medium"
-                        icon={<Play className="w-3.5 h-3.5 mr-1" />}
+                        aria-label={playLabel}
+                        className={playButtonClassName}
+                        icon={<Play className="h-3.5 w-3.5 sm:mr-1" />}
                     >
-                        {t('common.play', 'Play')}
+                        <span className="hidden sm:inline">{playLabel}</span>
                     </Button>
                 </Tooltip>
 
                 <ExportMenu
                     onExportPNG={onExportPNG}
+                    onCopyImage={onCopyImage}
                     onExportSVG={onExportSVG}
-                    onExportAnimated={onExportAnimated}
+                    onCopySVG={onCopySVG}
+                    onExportPDF={onExportPDF}
+                    onExportCinematic={onExportCinematic}
                     onExportJSON={onExportJSON}
+                    onCopyJSON={onCopyJSON}
                     onExportMermaid={onExportMermaid}
+                    onDownloadMermaid={onDownloadMermaid}
                     onExportPlantUML={onExportPlantUML}
+                    onDownloadPlantUML={onDownloadPlantUML}
                     onExportOpenFlowDSL={onExportOpenFlowDSL}
+                    onDownloadOpenFlowDSL={onDownloadOpenFlowDSL}
                     onExportFigma={onExportFigma}
+                    onDownloadFigma={onDownloadFigma}
+                    onShare={onShare}
                 />
             </div>
 
@@ -186,8 +219,10 @@ export function TopNavActions({
                         onClose={() => setIsShareModalOpen(false)}
                         onCopyInvite={collaboration.onCopyShareLink}
                         roomId={collaboration.roomId}
+                        inviteUrl={collaboration.inviteUrl}
                         status={collaboration.status}
                         viewerCount={viewerCount}
+                        participants={collaboration.participants}
                     />
                 </Suspense>
             ) : null}
diff --git a/src/components/top-nav/TopNavBrand.tsx b/src/components/top-nav/TopNavBrand.tsx
index ef06a74..ee45c18 100644
--- a/src/components/top-nav/TopNavBrand.tsx
+++ b/src/components/top-nav/TopNavBrand.tsx
@@ -20,7 +20,7 @@ export function TopNavBrand({ appName, logoUrl, logoStyle, ui }: TopNavBrandProp
     const showPrivacyBadge = ui.showBeta !== false;
 
     return (
-        <div className="flex items-center gap-2">
+        <div className="flex min-w-0 items-center gap-2">
             {(logoStyle === 'icon' || logoStyle === 'both') && (
                 <div className="w-9 h-9 flex items-center justify-center bg-[var(--brand-primary-50)] rounded-[var(--radius-md)] text-[var(--brand-primary)] overflow-hidden relative shrink-0">
                     {logoUrl ? (
@@ -53,14 +53,14 @@ export function TopNavBrand({ appName, logoUrl, logoStyle, ui }: TopNavBrandProp
             )}
 
             {(logoStyle === 'text' || logoStyle === 'both') && (
-                <div className="flex flex-col">
-                    <span className="font-bold text-slate-800 tracking-tight text-lg leading-none">{appName}</span>
+                <div className="min-w-0 flex flex-col">
+                    <span className="truncate text-base font-bold leading-none tracking-tight text-slate-800 sm:text-lg">{appName}</span>
                 </div>
             )}
 
             {showPrivacyBadge ? (
-                <Tooltip text={t('nav.privacyMessage', { defaultValue: 'All your diagram data is stored locally in your browser, not on our servers.' })} side="bottom">
-                    <div className="flex items-center justify-center text-[var(--brand-primary)] animate-in fade-in zoom-in-50 duration-300">
+                <Tooltip text={t('nav.privacyMessage', { defaultValue: 'Your diagrams stay with you and do not reach our servers.' })} side="bottom">
+                    <div className="hidden items-center justify-center text-[var(--brand-primary)] animate-in fade-in zoom-in-50 duration-300 sm:flex">
                         <ShieldCheck className="w-[18px] h-[18px] drop-shadow-sm text-white" fill="var(--brand-primary)" />
                     </div>
                 </Tooltip>
diff --git a/src/components/top-nav/TopNavMenu.test.tsx b/src/components/top-nav/TopNavMenu.test.tsx
new file mode 100644
index 0000000..9d1671a
--- /dev/null
+++ b/src/components/top-nav/TopNavMenu.test.tsx
@@ -0,0 +1,31 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { TopNavMenu } from './TopNavMenu';
+
+describe('TopNavMenu', () => {
+    it('closes when clicking outside', async () => {
+        const onClose = vi.fn();
+
+        render(
+            <div>
+                <TopNavMenu
+                    isOpen={true}
+                    isBeveled={false}
+                    onToggle={vi.fn()}
+                    onClose={onClose}
+                    onGoHome={vi.fn()}
+                    onOpenSettings={vi.fn()}
+                    onHistory={vi.fn()}
+                    onImportJSON={vi.fn()}
+                />
+                <button type="button">Outside</button>
+            </div>
+        );
+
+        fireEvent.pointerDown(screen.getByRole('button', { name: 'Outside' }));
+
+        await waitFor(() => {
+            expect(onClose).toHaveBeenCalled();
+        });
+    });
+});
diff --git a/src/components/top-nav/TopNavMenu.tsx b/src/components/top-nav/TopNavMenu.tsx
index 12ef592..1f32ccf 100644
--- a/src/components/top-nav/TopNavMenu.tsx
+++ b/src/components/top-nav/TopNavMenu.tsx
@@ -1,4 +1,4 @@
-import React, { Suspense, lazy } from 'react';
+import React, { Suspense, lazy, useEffect, useRef } from 'react';
 import { AlignJustify } from 'lucide-react';
 
 const LazyTopNavMenuPanel = lazy(async () => {
@@ -27,12 +27,43 @@ export function TopNavMenu({
     onHistory,
     onImportJSON,
 }: TopNavMenuProps): React.ReactElement {
+    const menuRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        if (!isOpen) {
+            return;
+        }
+
+        function handlePointerDownOutside(event: PointerEvent): void {
+            const target = event.target as Node;
+            if (menuRef.current?.contains(target)) {
+                return;
+            }
+            onClose();
+        }
+
+        function handleEscape(event: KeyboardEvent): void {
+            if (event.key === 'Escape') {
+                onClose();
+            }
+        }
+
+        document.addEventListener('pointerdown', handlePointerDownOutside, true);
+        document.addEventListener('keydown', handleEscape);
+
+        return () => {
+            document.removeEventListener('pointerdown', handlePointerDownOutside, true);
+            document.removeEventListener('keydown', handleEscape);
+        };
+    }, [isOpen, onClose]);
+
     return (
-        <div className="relative">
+        <div className="relative" ref={menuRef}>
             <button
                 onClick={onToggle}
                 data-testid="topnav-menu-toggle"
-                className={`flex items-center gap-2 px-3 py-2 rounded-[var(--radius-md)] border transition-all text-sm font-medium
+                aria-label="Open main menu"
+                className={`flex min-h-10 items-center gap-2 rounded-[var(--radius-md)] border px-3 py-2 text-sm font-medium transition-all sm:min-h-9
                     ${isOpen
                         ? 'bg-[var(--brand-primary-50)] border-[var(--brand-primary-200)] text-[var(--brand-primary)] shadow-inner'
                         : `bg-white border-slate-200 text-slate-600 hover:border-slate-300 ${isBeveled ? 'btn-beveled' : 'shadow-sm hover:shadow'}`}
diff --git a/src/components/top-nav/TopNavMenuPanel.tsx b/src/components/top-nav/TopNavMenuPanel.tsx
index 7278dd4..d2a6266 100644
--- a/src/components/top-nav/TopNavMenuPanel.tsx
+++ b/src/components/top-nav/TopNavMenuPanel.tsx
@@ -29,7 +29,7 @@ export function TopNavMenuPanel({
                 onClick={onClose}
                 aria-label="Close menu"
             />
-            <div className="absolute top-full left-0 mt-3 w-56 bg-white/90 backdrop-blur-xl rounded-[var(--radius-lg)] shadow-2xl border border-white/50 ring-1 ring-black/5 p-2 flex flex-col gap-1 z-50 animate-in fade-in zoom-in-95 duration-200 origin-top-left">
+            <div className="absolute top-full left-0 mt-3 w-56 bg-white/90 backdrop-blur-xl rounded-[var(--radius-lg)] shadow-[var(--shadow-md)] border border-white/50 ring-1 ring-black/5 p-2 flex flex-col gap-1 z-50 animate-in fade-in zoom-in-95 duration-200 origin-top-left">
                 <div className="px-3 py-2 text-xs font-bold text-slate-400 uppercase tracking-widest">
                     {t('nav.menu', 'Menu')}
                 </div>
diff --git a/src/components/top-nav/useTopNavState.ts b/src/components/top-nav/useTopNavState.ts
index d1bce3a..55a37a6 100644
--- a/src/components/top-nav/useTopNavState.ts
+++ b/src/components/top-nav/useTopNavState.ts
@@ -3,17 +3,17 @@ import { useState } from 'react';
 interface UseTopNavStateResult {
     isMenuOpen: boolean;
     isSettingsOpen: boolean;
-    activeSettingsTab: 'general' | 'shortcuts';
+    activeSettingsTab: 'general' | 'shortcuts' | 'ai';
     toggleMenu: () => void;
     closeMenu: () => void;
-    openSettings: (tab: 'general' | 'shortcuts') => void;
+    openSettings: (tab: 'general' | 'shortcuts' | 'ai') => void;
     closeSettings: () => void;
 }
 
 export function useTopNavState(): UseTopNavStateResult {
     const [isMenuOpen, setIsMenuOpen] = useState(false);
     const [isSettingsOpen, setIsSettingsOpen] = useState(false);
-    const [activeSettingsTab, setActiveSettingsTab] = useState<'general' | 'shortcuts'>('general');
+    const [activeSettingsTab, setActiveSettingsTab] = useState<'general' | 'shortcuts' | 'ai'>('general');
 
     function toggleMenu(): void {
         setIsMenuOpen((value) => !value);
@@ -23,7 +23,7 @@ export function useTopNavState(): UseTopNavStateResult {
         setIsMenuOpen(false);
     }
 
-    function openSettings(tab: 'general' | 'shortcuts'): void {
+    function openSettings(tab: 'general' | 'shortcuts' | 'ai'): void {
         setActiveSettingsTab(tab);
         setIsSettingsOpen(true);
         setIsMenuOpen(false);
diff --git a/src/components/ui/Button.tsx b/src/components/ui/Button.tsx
index 9f2716d..729bff2 100644
--- a/src/components/ui/Button.tsx
+++ b/src/components/ui/Button.tsx
@@ -23,19 +23,19 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(({
 }, ref) => {
     const isBeveled = IS_BEVELED;
 
-    const baseStyles = "inline-flex items-center justify-center font-medium transition-all focus:outline-none disabled:opacity-50 disabled:pointer-events-none active:scale-[0.98]";
+    const baseStyles = "inline-flex items-center justify-center font-medium transition-all focus:outline-none disabled:pointer-events-none disabled:shadow-none active:scale-[0.98] disabled:active:scale-100";
 
     const variants = {
         primary: `
             bg-[var(--brand-primary)] text-white 
             ${isBeveled ? 'btn-beveled-primary' : 'shadow-sm hover:shadow-md'}
-            hover:brightness-110
+            hover:brightness-110 disabled:border-[color-mix(in_srgb,var(--brand-primary),white_50%)] disabled:bg-[color-mix(in_srgb,var(--brand-primary),white_72%)] disabled:text-white
         `.replace(/\s+/g, ' ').trim(),
 
         secondary: `
             bg-white text-slate-700 border border-slate-200 
             ${isBeveled ? 'btn-beveled-secondary' : 'shadow-sm hover:shadow-md'}
-            hover:bg-[var(--brand-primary-50)] hover:text-[var(--brand-primary)] hover:border-[var(--brand-primary-200)]
+            hover:bg-[var(--brand-primary-50)] hover:text-[var(--brand-primary)] hover:border-[var(--brand-primary-200)] disabled:border-slate-200 disabled:bg-slate-100 disabled:text-slate-400
         `.replace(/\s+/g, ' ').trim(),
 
         ghost: "text-slate-500 hover:bg-[var(--brand-primary-50)] hover:text-[var(--brand-primary)] transition-colors",
@@ -44,7 +44,7 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(({
     };
 
     const sizes = {
-        sm: "h-8 px-3 text-xs gap-1.5",
+        sm: "h-9 px-3 text-xs gap-1.5",
         md: "h-10 px-4 text-sm gap-2",
         lg: "h-12 px-6 text-base gap-2.5",
         xl: "h-14 px-8 text-lg font-semibold gap-2.5",
diff --git a/src/components/ui/Input.tsx b/src/components/ui/Input.tsx
index 73db440..d3e290a 100644
--- a/src/components/ui/Input.tsx
+++ b/src/components/ui/Input.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { EDITOR_FIELD_DEFAULT_CLASS } from './editorFieldStyles';
 
 interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
     label?: string;
@@ -27,11 +28,7 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(({
             <input
                 id={inputId}
                 ref={ref}
-                className={`
-                    flex h-9 w-full rounded-[var(--brand-radius)] border bg-white px-3 py-1 text-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-slate-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand-primary)] disabled:cursor-not-allowed disabled:opacity-50
-                    ${error ? 'border-red-300 focus-visible:ring-red-500' : 'border-slate-300 shadow-sm focus:border-[var(--brand-primary-400)]'}
-                    ${className}
-                `}
+                className={`${EDITOR_FIELD_DEFAULT_CLASS} h-9 px-3 py-1 file:border-0 file:bg-transparent file:text-sm file:font-medium ${error ? 'border-red-300 focus:ring-red-500/20' : ''} ${className}`.trim()}
                 {...props}
             />
             {error && <p className="text-xs text-red-500">{error}</p>}
diff --git a/src/components/ui/SearchField.tsx b/src/components/ui/SearchField.tsx
new file mode 100644
index 0000000..5439582
--- /dev/null
+++ b/src/components/ui/SearchField.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import { Search } from 'lucide-react';
+import { EDITOR_FIELD_DEFAULT_CLASS } from './editorFieldStyles';
+
+interface SearchFieldProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
+    trailingContent?: React.ReactNode;
+    surface?: 'default' | 'subtle';
+}
+
+export const SearchField = React.forwardRef<HTMLInputElement, SearchFieldProps>(function SearchField(
+    {
+        className = '',
+        trailingContent,
+        surface = 'default',
+        ...props
+    },
+    ref
+    ): React.ReactElement {
+    const surfaceClassName = surface === 'subtle' ? 'bg-slate-50/80' : 'bg-white';
+    const trailingPaddingClassName = trailingContent ? 'pr-11' : 'pr-3';
+
+    return (
+        <div className="relative w-full">
+            <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" />
+            <input
+                ref={ref}
+                type="text"
+                className={`${EDITOR_FIELD_DEFAULT_CLASS} ${surfaceClassName} h-11 py-2.5 pl-11 ${trailingPaddingClassName} ${className}`.trim()}
+                {...props}
+            />
+            {trailingContent ? (
+                <div className="absolute right-2 top-1/2 -translate-y-1/2">
+                    {trailingContent}
+                </div>
+            ) : null}
+        </div>
+    );
+});
diff --git a/src/components/ui/SegmentedTabs.tsx b/src/components/ui/SegmentedTabs.tsx
new file mode 100644
index 0000000..4d0839d
--- /dev/null
+++ b/src/components/ui/SegmentedTabs.tsx
@@ -0,0 +1,68 @@
+import React from 'react';
+
+export interface SegmentedTabItem {
+    id: string;
+    label: React.ReactNode;
+    count?: number;
+    icon?: React.ReactNode;
+    disabled?: boolean;
+}
+
+interface SegmentedTabsProps {
+    items: SegmentedTabItem[];
+    value: string;
+    onChange: (id: string) => void;
+    className?: string;
+    listClassName?: string;
+    size?: 'sm' | 'md';
+}
+
+export function getSegmentedTabButtonClass(selected: boolean, size: 'sm' | 'md' = 'md'): string {
+    const sizeClassName = size === 'sm'
+        ? 'h-8 rounded-[var(--radius-sm)] px-3 text-xs'
+        : 'h-9 rounded-[var(--radius-sm)] px-3 text-xs';
+    return `${sizeClassName} inline-flex shrink-0 items-center gap-2 border font-semibold transition-colors`;
+}
+
+export function getSegmentedTabCountClass(selected: boolean): string {
+    return selected ? 'text-[var(--brand-primary-400)]' : 'text-slate-400';
+}
+
+export function SegmentedTabs({
+    items,
+    value,
+    onChange,
+    className = '',
+    listClassName = '',
+    size = 'md',
+}: SegmentedTabsProps): React.ReactElement {
+    return (
+        <div className={`overflow-x-auto pb-1 no-scrollbar ${className}`.trim()}>
+            <div className={`flex min-w-max gap-2 ${listClassName}`.trim()}>
+                {items.map((item) => {
+                    const selected = item.id === value;
+                    return (
+                        <button
+                            key={item.id}
+                            type="button"
+                            onClick={() => onChange(item.id)}
+                            disabled={item.disabled}
+                            className={`${getSegmentedTabButtonClass(selected, size)} ${selected
+                                ? 'border-[var(--brand-primary-200)] bg-[var(--brand-primary-50)] text-[var(--brand-primary-700)]'
+                                : 'border-slate-200 bg-white text-slate-600 hover:border-slate-300 hover:bg-slate-50 hover:text-slate-800'
+                                } ${item.disabled ? 'cursor-not-allowed opacity-50' : ''}`.trim()}
+                        >
+                            {item.icon ? <span className="flex h-3.5 w-3.5 items-center justify-center">{item.icon}</span> : null}
+                            <span>{item.label}</span>
+                            {typeof item.count === 'number' ? (
+                                <span className={`text-[10px] ${getSegmentedTabCountClass(selected)}`}>
+                                    {item.count}
+                                </span>
+                            ) : null}
+                        </button>
+                    );
+                })}
+            </div>
+        </div>
+    );
+}
diff --git a/src/components/ui/Select.test.tsx b/src/components/ui/Select.test.tsx
new file mode 100644
index 0000000..dd38ac5
--- /dev/null
+++ b/src/components/ui/Select.test.tsx
@@ -0,0 +1,56 @@
+import { fireEvent, render, screen, waitFor, within } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { Select } from './Select';
+
+describe('Select', () => {
+  it('closes when clicking outside', async () => {
+    const onChange = vi.fn();
+
+    render(
+      <div>
+        <Select
+          value="production"
+          onChange={onChange}
+          options={[
+            { value: 'production', label: 'Production' },
+            { value: 'staging', label: 'Staging' },
+          ]}
+        />
+        <button type="button">Outside</button>
+      </div>
+    );
+
+    const trigger = screen.getByRole('button', { name: 'Production' });
+
+    fireEvent.click(trigger);
+    expect(trigger.getAttribute('aria-expanded')).toBe('true');
+    fireEvent.pointerDown(screen.getByRole('button', { name: 'Outside' }));
+    await waitFor(() => {
+      expect(trigger.getAttribute('aria-expanded')).toBe('false');
+    });
+  });
+
+  it('renders options when opened and allows selecting one', async () => {
+    const onChange = vi.fn();
+
+    render(
+      <Select
+        value="production"
+        onChange={onChange}
+        options={[
+          { value: 'production', label: 'Production' },
+          { value: 'staging', label: 'Staging' },
+        ]}
+      />
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: 'Production' }));
+
+    const listbox = await screen.findByRole('listbox');
+    expect(within(listbox).getByRole('button', { name: 'Staging' })).toBeTruthy();
+
+    fireEvent.click(within(listbox).getByRole('button', { name: 'Staging' }));
+
+    expect(onChange).toHaveBeenCalledWith('staging');
+  });
+});
diff --git a/src/components/ui/Select.tsx b/src/components/ui/Select.tsx
index 076a317..9cb1ada 100644
--- a/src/components/ui/Select.tsx
+++ b/src/components/ui/Select.tsx
@@ -1,6 +1,8 @@
-import React, { useState, useRef, useEffect } from 'react';
-import { motion, AnimatePresence } from 'framer-motion';
+import React, { useState, useRef, useEffect, useLayoutEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { motion } from 'framer-motion';
 import { ChevronDown, Check } from 'lucide-react';
+import { EDITOR_FIELD_DEFAULT_CLASS } from './editorFieldStyles';
 
 export interface SelectOption {
     value: string;
@@ -18,6 +20,12 @@ interface SelectProps {
     className?: string;
 }
 
+interface MenuPosition {
+    top: number;
+    left: number;
+    width: number;
+}
+
 const GROUP_ORDER = ['Flagship', 'Reasoning', 'Speed', 'Legacy', 'Custom', 'Other'];
 
 function sortGroups(a: string, b: string): number {
@@ -32,6 +40,12 @@ function sortGroups(a: string, b: string): number {
 export function Select({ value, onChange, options, placeholder = 'Select...', className = '' }: SelectProps) {
     const [isOpen, setIsOpen] = useState(false);
     const containerRef = useRef<HTMLDivElement>(null);
+    const menuRef = useRef<HTMLDivElement>(null);
+    const [menuPosition, setMenuPosition] = useState<MenuPosition>({
+        top: 0,
+        left: 0,
+        width: 0,
+    });
 
     const selectedOption = options.find(o => o.value === value);
 
@@ -45,26 +59,78 @@ export function Select({ value, onChange, options, placeholder = 'Select...', cl
     const groups = Object.keys(groupedOptions);
     const hasGroups = groups.length > 1 || (groups.length === 1 && groups[0] !== 'Other');
     const sortedGroups = hasGroups ? [...groups].sort(sortGroups) : [];
+    const shouldRenderMenu = isOpen && typeof document !== 'undefined';
+
+    useLayoutEffect(() => {
+        if (!isOpen || !containerRef.current) {
+            return;
+        }
+
+        function updateMenuPosition() {
+            if (!containerRef.current) {
+                return;
+            }
+            const rect = containerRef.current.getBoundingClientRect();
+            setMenuPosition({
+                top: rect.bottom + 4,
+                left: rect.left,
+                width: rect.width,
+            });
+        }
+
+        updateMenuPosition();
+        window.addEventListener('resize', updateMenuPosition);
+        window.addEventListener('scroll', updateMenuPosition, true);
+
+        return () => {
+            window.removeEventListener('resize', updateMenuPosition);
+            window.removeEventListener('scroll', updateMenuPosition, true);
+        };
+    }, [isOpen]);
 
     useEffect(() => {
-        function handleClickOutside(event: MouseEvent) {
-            if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
+        function handlePointerDownOutside(event: PointerEvent) {
+            const target = event.target as Node;
+            const clickedTrigger = containerRef.current?.contains(target);
+            const clickedMenu = menuRef.current?.contains(target);
+
+            if (!clickedTrigger && !clickedMenu) {
                 setIsOpen(false);
             }
         }
-        document.addEventListener('mousedown', handleClickOutside);
-        return () => document.removeEventListener('mousedown', handleClickOutside);
+
+        function handleEscape(event: KeyboardEvent) {
+            if (event.key === 'Escape') {
+                setIsOpen(false);
+            }
+        }
+
+        document.addEventListener('pointerdown', handlePointerDownOutside, true);
+        document.addEventListener('keydown', handleEscape);
+
+        return () => {
+            document.removeEventListener('pointerdown', handlePointerDownOutside, true);
+            document.removeEventListener('keydown', handleEscape);
+        };
     }, []);
 
+    function handleToggle(): void {
+        setIsOpen((current) => !current);
+    }
+
+    function handleSelect(optionValue: string): void {
+        onChange(optionValue);
+        setIsOpen(false);
+    }
+
     return (
         <div className={`relative ${className}`} ref={containerRef}>
             <button
                 type="button"
-                onClick={() => setIsOpen(!isOpen)}
-                className={`
-                    w-full flex items-center justify-between px-3 py-2.5 bg-white border rounded-lg text-sm text-left transition-all
-                    ${isOpen ? 'border-[var(--brand-primary)] ring-1 ring-[var(--brand-primary)]/20' : 'border-slate-300 hover:border-slate-400'}
-                `}
+                onClick={handleToggle}
+                aria-expanded={isOpen}
+                aria-haspopup="listbox"
+                className={`${EDITOR_FIELD_DEFAULT_CLASS} flex items-center justify-between px-3 py-2.5 text-left ${isOpen ? 'border-[var(--brand-primary-300)] ring-1 ring-[var(--brand-primary)]/15' : 'hover:border-slate-300'}`.trim()}
             >
                 <div className="flex flex-col items-start overflow-hidden">
                     <span className={`block truncate ${selectedOption ? 'text-slate-900 font-medium' : 'text-slate-400'}`}>
@@ -79,14 +145,21 @@ export function Select({ value, onChange, options, placeholder = 'Select...', cl
                 <ChevronDown className={`w-4 h-4 text-slate-400 transition-transform duration-200 ${isOpen ? 'rotate-180' : ''}`} />
             </button>
 
-            <AnimatePresence>
-                {isOpen && (
+            {shouldRenderMenu
+                ? createPortal(
                     <motion.div
+                        ref={menuRef}
                         initial={{ opacity: 0, y: -5, scale: 0.98 }}
                         animate={{ opacity: 1, y: 0, scale: 1 }}
-                        exit={{ opacity: 0, y: -5, scale: 0.98 }}
                         transition={{ duration: 0.15, ease: "easeOut" }}
-                        className="absolute z-50 w-full mt-1 bg-white border border-slate-200 rounded-xl shadow-2xl max-h-64 overflow-y-auto no-scrollbar focus:outline-none"
+                        role="listbox"
+                        data-floating-select-root="true"
+                        className="fixed z-[1000] max-h-64 overflow-y-auto rounded-[var(--radius-lg)] border border-slate-200 bg-white shadow-[var(--shadow-md)] no-scrollbar focus:outline-none"
+                        style={{
+                            top: `${menuPosition.top}px`,
+                            left: `${menuPosition.left}px`,
+                            width: `${menuPosition.width}px`,
+                        }}
                     >
                         <div className="py-1">
                             {hasGroups ? (
@@ -103,7 +176,7 @@ export function Select({ value, onChange, options, placeholder = 'Select...', cl
                                                     key={option.value}
                                                     option={option}
                                                     isSelected={value === option.value}
-                                                    onClick={() => { onChange(option.value); setIsOpen(false); }}
+                                                    onClick={() => handleSelect(option.value)}
                                                 />
                                             ))}
                                         </div>
@@ -115,7 +188,7 @@ export function Select({ value, onChange, options, placeholder = 'Select...', cl
                                         key={option.value}
                                         option={option}
                                         isSelected={value === option.value}
-                                        onClick={() => { onChange(option.value); setIsOpen(false); }}
+                                        onClick={() => handleSelect(option.value)}
                                     />
                                 ))
                             )}
@@ -126,9 +199,9 @@ export function Select({ value, onChange, options, placeholder = 'Select...', cl
                                 </div>
                             )}
                         </div>
-                    </motion.div>
-                )}
-            </AnimatePresence>
+                    </motion.div>,
+                    document.body
+                ) : null}
         </div>
     );
 }
diff --git a/src/components/ui/SidebarItem.tsx b/src/components/ui/SidebarItem.tsx
index 079c2ef..fcdcb50 100644
--- a/src/components/ui/SidebarItem.tsx
+++ b/src/components/ui/SidebarItem.tsx
@@ -26,7 +26,7 @@ export const SidebarItem: React.FC<SidebarItemProps> = ({
     end = false,
     testId
 }) => {
-    const baseStyles = "flex items-center gap-3 px-3 py-2.5 rounded-md text-sm transition-colors w-full text-left group";
+    const baseStyles = "flex items-center gap-3 px-3 py-2.5 rounded-[var(--radius-sm)] text-sm transition-colors w-full text-left group";
     const activeStyles = "bg-[var(--brand-primary)]/10 text-[var(--brand-primary)] font-medium";
     const inactiveStyles = "text-slate-600 hover:bg-slate-50 hover:text-slate-900";
 
diff --git a/src/components/ui/ToastContext.tsx b/src/components/ui/ToastContext.tsx
index 03bae26..49982c0 100644
--- a/src/components/ui/ToastContext.tsx
+++ b/src/components/ui/ToastContext.tsx
@@ -29,7 +29,7 @@ export const useToast = () => {
 
 // Toast Component
 const ToastItem = ({ toast, onClose }: { toast: Toast; onClose: () => void }) => {
-    const { id, message, type } = toast;
+    const { message, type } = toast;
 
     // Icons & Colors
     const styles = {
diff --git a/src/components/ui/editorFieldStyles.ts b/src/components/ui/editorFieldStyles.ts
new file mode 100644
index 0000000..935701b
--- /dev/null
+++ b/src/components/ui/editorFieldStyles.ts
@@ -0,0 +1,6 @@
+export const EDITOR_FIELD_BASE_CLASS =
+    'w-full rounded-[var(--brand-radius)] border bg-white text-sm text-slate-900 transition-colors outline-none disabled:cursor-not-allowed disabled:opacity-50 placeholder:text-slate-400';
+
+export const EDITOR_FIELD_DEFAULT_CLASS = `${EDITOR_FIELD_BASE_CLASS} border-slate-200 focus:border-[var(--brand-primary-300)] focus:ring-1 focus:ring-[var(--brand-primary)]/15`;
+
+export const EDITOR_FIELD_COMPACT_CLASS = `${EDITOR_FIELD_BASE_CLASS} h-9 px-2 text-xs border-slate-200 focus:border-[var(--brand-primary-300)] focus:ring-1 focus:ring-[var(--brand-primary)]/15`;
diff --git a/src/components/useExportMenu.ts b/src/components/useExportMenu.ts
index 67b732b..350a384 100644
--- a/src/components/useExportMenu.ts
+++ b/src/components/useExportMenu.ts
@@ -1,33 +1,55 @@
 import { useEffect, useRef, useState } from 'react';
 import type { RefObject } from 'react';
+import { recordOnboardingEvent } from '@/services/onboarding/events';
 
 interface UseExportMenuParams {
     onExportPNG: (format: 'png' | 'jpeg') => void;
+    onCopyImage: (format: 'png' | 'jpeg') => void;
     onExportSVG: () => void;
-    onExportAnimated: (format: 'video' | 'gif') => void;
+    onCopySVG: () => void;
+    onExportPDF: () => void;
+    onExportCinematic: (format: 'cinematic-video' | 'cinematic-gif') => void;
     onExportJSON: () => void;
+    onCopyJSON: () => void;
     onExportMermaid: () => void;
+    onDownloadMermaid: () => void;
     onExportPlantUML: () => void;
+    onDownloadPlantUML: () => void;
     onExportOpenFlowDSL: () => void;
+    onDownloadOpenFlowDSL: () => void;
     onExportFigma: () => void;
+    onDownloadFigma: () => void;
+    onShare?: () => void;
 }
 
+type ExportActionKey = 'download' | 'copy';
+type ExportActionHandlers = Record<ExportActionKey, () => void>;
+
 interface UseExportMenuResult {
     isOpen: boolean;
     menuRef: RefObject<HTMLDivElement>;
     toggleMenu: () => void;
-    handleSelect: (key: string) => void;
+    handleSelect: (key: string, action: ExportActionKey) => void;
 }
 
 export function useExportMenu({
     onExportPNG,
+    onCopyImage,
     onExportSVG,
-    onExportAnimated,
+    onCopySVG,
+    onExportPDF,
+    onExportCinematic,
     onExportJSON,
+    onCopyJSON,
     onExportMermaid,
+    onDownloadMermaid,
     onExportPlantUML,
+    onDownloadPlantUML,
     onExportOpenFlowDSL,
+    onDownloadOpenFlowDSL,
     onExportFigma,
+    onDownloadFigma,
+    onShare: _onShare,
 }: UseExportMenuParams): UseExportMenuResult {
     const [isOpen, setIsOpen] = useState(false);
     const menuRef = useRef<HTMLDivElement>(null);
@@ -36,7 +58,15 @@ export function useExportMenu({
         if (!isOpen) return;
 
         const handleClickOutside = (event: MouseEvent) => {
-            if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
+            const target = event.target;
+            const isSelectPortalTarget = target instanceof Element
+                && target.closest('[data-floating-select-root="true"]');
+
+            if (isSelectPortalTarget) {
+                return;
+            }
+
+            if (menuRef.current && !menuRef.current.contains(target as Node)) {
                 setIsOpen(false);
             }
         };
@@ -45,25 +75,36 @@ export function useExportMenu({
         return () => document.removeEventListener('mousedown', handleClickOutside);
     }, [isOpen]);
 
-    const handlers: Record<string, () => void> = {
-        png: () => onExportPNG('png'),
-        jpeg: () => onExportPNG('jpeg'),
-        svg: onExportSVG,
-        video: () => onExportAnimated('video'),
-        gif: () => onExportAnimated('gif'),
-        json: onExportJSON,
-        openflow: onExportOpenFlowDSL,
-        mermaid: onExportMermaid,
-        plantuml: onExportPlantUML,
-        figma: onExportFigma,
+    const handlers: Record<string, ExportActionHandlers> = {
+        png: { download: () => onExportPNG('png'), copy: () => onCopyImage('png') },
+        jpeg: { download: () => onExportPNG('jpeg'), copy: () => onCopyImage('jpeg') },
+        svg: { download: onExportSVG, copy: onCopySVG },
+        pdf: { download: onExportPDF, copy: onExportPDF },
+        'cinematic-video': { download: () => onExportCinematic('cinematic-video'), copy: () => onExportCinematic('cinematic-video') },
+        'cinematic-gif': { download: () => onExportCinematic('cinematic-gif'), copy: () => onExportCinematic('cinematic-gif') },
+        json: { download: onExportJSON, copy: onCopyJSON },
+        openflow: { download: onDownloadOpenFlowDSL, copy: onExportOpenFlowDSL },
+        mermaid: { download: onDownloadMermaid, copy: onExportMermaid },
+        plantuml: { download: onDownloadPlantUML, copy: onExportPlantUML },
+        figma: { download: onDownloadFigma, copy: onExportFigma },
     };
 
     function toggleMenu(): void {
         setIsOpen((value) => !value);
     }
 
-    function handleSelect(key: string): void {
-        handlers[key]?.();
+    function recordSelection(key: string, action: ExportActionKey): void {
+        recordOnboardingEvent('first_export_completed', { format: `${key}:${action}` });
+    }
+
+    function handleSelect(key: string, action: ExportActionKey): void {
+        const actionHandler = handlers[key]?.[action];
+        if (!actionHandler) {
+            return;
+        }
+
+        actionHandler();
+        recordSelection(key, action);
         setIsOpen(false);
     }
 
diff --git a/src/config/rolloutFlags.ts b/src/config/rolloutFlags.ts
index 2ac39c5..dd5b2c1 100644
--- a/src/config/rolloutFlags.ts
+++ b/src/config/rolloutFlags.ts
@@ -1,24 +1,8 @@
 export type RolloutFlagKey =
-    | 'visualQualityV2'
-    | 'mermaidSyncV1'
-    | 'familyPluginV1'
-    | 'connectorModelV1'
     | 'relationSemanticsV1'
-    | 'stateDiagramV1'
-    | 'indexedDbStorageV1'
-    | 'canvasInteractionsV1'
-    | 'shapeLibraryV1'
-    | 'templateLibraryV1'
-    | 'collaborationV1'
-    | 'collaborationIndexedDbV1'
-    | 'animationTimelineV1'
-    | 'playbackStudioV1'
-    | 'animatedExportV1'
-    | 'importAdaptersV1'
-    | 'terraformImportV1'
-    | 'openApiImportV1'
-    | 'liveBindingsV1'
-    | 'documentModelV2';
+    | 'documentModelV2'
+    | 'collaborationEnabled'
+    | 'architectureLintEnabled';
 
 interface RolloutFlagDefinition {
     key: RolloutFlagKey;
@@ -28,126 +12,30 @@ interface RolloutFlagDefinition {
 }
 
 const ROLLOUT_FLAG_DEFINITIONS: Record<RolloutFlagKey, RolloutFlagDefinition> = {
-    visualQualityV2: {
-        key: 'visualQualityV2',
-        envVar: 'VITE_VISUAL_QUALITY_V2',
-        defaultEnabled: true,
-        description: 'Phase 0 visual quality rollout',
-    },
-    mermaidSyncV1: {
-        key: 'mermaidSyncV1',
-        envVar: 'VITE_MERMAID_SYNC_V1',
-        defaultEnabled: false,
-        description: 'Bidirectional Mermaid code panel and diagnostics',
-    },
-    familyPluginV1: {
-        key: 'familyPluginV1',
-        envVar: 'VITE_FAMILY_PLUGIN_V1',
-        defaultEnabled: false,
-        description: 'Diagram family plugin routing rollout',
-    },
-    connectorModelV1: {
-        key: 'connectorModelV1',
-        envVar: 'VITE_CONNECTOR_MODEL_V1',
-        defaultEnabled: false,
-        description: 'Unified custom renderer coverage for all regular connector styles',
-    },
     relationSemanticsV1: {
         key: 'relationSemanticsV1',
         envVar: 'VITE_RELATION_SEMANTICS_V1',
         defaultEnabled: false,
         description: 'Class/ER relation marker and routing semantics rollout',
     },
-    stateDiagramV1: {
-        key: 'stateDiagramV1',
-        envVar: 'VITE_STATE_DIAGRAM_V1',
-        defaultEnabled: true,
-        description: 'Dedicated state diagram plugin dispatch rollout',
-    },
-    indexedDbStorageV1: {
-        key: 'indexedDbStorageV1',
-        envVar: 'VITE_INDEXEDDB_STORAGE_V1',
-        defaultEnabled: true,
-        description: 'IndexedDB storage abstraction scaffold rollout',
-    },
-    canvasInteractionsV1: {
-        key: 'canvasInteractionsV1',
-        envVar: 'VITE_CANVAS_INTERACTIONS_V1',
-        defaultEnabled: true,
-        description: 'Canvas micro-interactions rollout (double-click create, drag-create/connect)',
-    },
-    shapeLibraryV1: {
-        key: 'shapeLibraryV1',
-        envVar: 'VITE_SHAPE_LIBRARY_V1',
-        defaultEnabled: true,
-        description: 'Shape library registry scaffold rollout',
-    },
-    templateLibraryV1: {
-        key: 'templateLibraryV1',
-        envVar: 'VITE_TEMPLATE_LIBRARY_V1',
-        defaultEnabled: true,
-        description: 'Template registry rollout',
-    },
-    collaborationV1: {
-        key: 'collaborationV1',
-        envVar: 'VITE_COLLABORATION_V1',
-        defaultEnabled: true,
-        description: 'Real-time collaboration scaffold rollout',
-    },
-    collaborationIndexedDbV1: {
-        key: 'collaborationIndexedDbV1',
-        envVar: 'VITE_COLLABORATION_INDEXEDDB_V1',
-        defaultEnabled: true,
-        description: 'Local IndexedDB persistence for collaboration rooms',
-    },
-    animationTimelineV1: {
-        key: 'animationTimelineV1',
-        envVar: 'VITE_ANIMATION_TIMELINE_V1',
-        defaultEnabled: true,
-        description: 'Typed playback timeline contracts and sequencing foundation',
-    },
-    playbackStudioV1: {
-        key: 'playbackStudioV1',
-        envVar: 'VITE_PLAYBACK_STUDIO_V1',
-        defaultEnabled: true,
-        description: 'Dedicated playback studio shell and authoring tools',
-    },
-    animatedExportV1: {
-        key: 'animatedExportV1',
-        envVar: 'VITE_ANIMATED_EXPORT_V1',
-        defaultEnabled: true,
-        description: 'Animated diagram export pipeline',
-    },
-    importAdaptersV1: {
-        key: 'importAdaptersV1',
-        envVar: 'VITE_IMPORT_ADAPTERS_V1',
-        defaultEnabled: false,
-        description: 'External import adapter framework',
-    },
-    terraformImportV1: {
-        key: 'terraformImportV1',
-        envVar: 'VITE_TERRAFORM_IMPORT_V1',
-        defaultEnabled: false,
-        description: 'Terraform graph and plan import pipeline',
-    },
-    openApiImportV1: {
-        key: 'openApiImportV1',
-        envVar: 'VITE_OPENAPI_IMPORT_V1',
-        defaultEnabled: false,
-        description: 'OpenAPI-driven topology import pipeline',
-    },
-    liveBindingsV1: {
-        key: 'liveBindingsV1',
-        envVar: 'VITE_LIVE_BINDINGS_V1',
-        defaultEnabled: false,
-        description: 'Read-only live bindings and runtime overlays',
-    },
     documentModelV2: {
         key: 'documentModelV2',
         envVar: 'VITE_DOCUMENT_MODEL_V2',
         defaultEnabled: false,
         description: 'Extended document metadata for scenes, exports, and bindings',
     },
+    collaborationEnabled: {
+        key: 'collaborationEnabled',
+        envVar: 'VITE_COLLABORATION_ENABLED',
+        defaultEnabled: true,
+        description: 'WebRTC peer collaboration (beta)',
+    },
+    architectureLintEnabled: {
+        key: 'architectureLintEnabled',
+        envVar: 'VITE_ARCHITECTURE_LINT_ENABLED',
+        defaultEnabled: true,
+        description: 'Architecture diagram lint rules panel',
+    },
 };
 
 function readBooleanEnvFlag(envValue: string | undefined, defaultEnabled: boolean): boolean {
@@ -162,33 +50,16 @@ function readBooleanEnvFlag(envValue: string | undefined, defaultEnabled: boolea
 
 export function isRolloutFlagEnabled(key: RolloutFlagKey): boolean {
     const definition = ROLLOUT_FLAG_DEFINITIONS[key];
+    if (!definition.envVar) {
+        return definition.defaultEnabled;
+    }
     const envValue = import.meta.env[definition.envVar as keyof ImportMetaEnv] as string | undefined;
     return readBooleanEnvFlag(envValue, definition.defaultEnabled);
 }
 
 export const ROLLOUT_FLAGS: Record<RolloutFlagKey, boolean> = {
-    visualQualityV2: isRolloutFlagEnabled('visualQualityV2'),
-    mermaidSyncV1: isRolloutFlagEnabled('mermaidSyncV1'),
-    familyPluginV1: isRolloutFlagEnabled('familyPluginV1'),
-    connectorModelV1: isRolloutFlagEnabled('connectorModelV1'),
     relationSemanticsV1: isRolloutFlagEnabled('relationSemanticsV1'),
-    stateDiagramV1: isRolloutFlagEnabled('stateDiagramV1'),
-    indexedDbStorageV1: isRolloutFlagEnabled('indexedDbStorageV1'),
-    canvasInteractionsV1: isRolloutFlagEnabled('canvasInteractionsV1'),
-    shapeLibraryV1: isRolloutFlagEnabled('shapeLibraryV1'),
-    templateLibraryV1: isRolloutFlagEnabled('templateLibraryV1'),
-    collaborationV1: isRolloutFlagEnabled('collaborationV1'),
-    collaborationIndexedDbV1: isRolloutFlagEnabled('collaborationIndexedDbV1'),
-    animationTimelineV1: isRolloutFlagEnabled('animationTimelineV1'),
-    playbackStudioV1: isRolloutFlagEnabled('playbackStudioV1'),
-    animatedExportV1: isRolloutFlagEnabled('animatedExportV1'),
-    importAdaptersV1: isRolloutFlagEnabled('importAdaptersV1'),
-    terraformImportV1: isRolloutFlagEnabled('terraformImportV1'),
-    openApiImportV1: isRolloutFlagEnabled('openApiImportV1'),
-    liveBindingsV1: isRolloutFlagEnabled('liveBindingsV1'),
     documentModelV2: isRolloutFlagEnabled('documentModelV2'),
+    collaborationEnabled: isRolloutFlagEnabled('collaborationEnabled'),
+    architectureLintEnabled: isRolloutFlagEnabled('architectureLintEnabled'),
 };
-
-export function getRolloutFlagDefinitions(): RolloutFlagDefinition[] {
-    return Object.values(ROLLOUT_FLAG_DEFINITIONS);
-}
diff --git a/src/constants.ts b/src/constants.ts
index d9258e4..3e96387 100644
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -1,5 +1,5 @@
 import { MarkerType } from '@/lib/reactflowCompat';
-import { type FlowEdge, type FlowNode, NodeType } from '@/lib/types';
+import { type FlowEdge, type FlowNode } from '@/lib/types';
 import { createId } from '@/lib/id';
 
 // --- Edge Styles (inline for reliable SVG rendering) ---
diff --git a/src/context/ArchitectureLintContext.tsx b/src/context/ArchitectureLintContext.tsx
new file mode 100644
index 0000000..4859ef2
--- /dev/null
+++ b/src/context/ArchitectureLintContext.tsx
@@ -0,0 +1,66 @@
+import React, { createContext, useContext, useEffect, useMemo, useState } from 'react';
+import type { FlowEdge, FlowNode } from '@/lib/types';
+import type { LintViolation } from '@/services/architectureLint/types';
+import { evaluateRules, parseRulesJson } from '@/services/architectureLint/ruleEngine';
+import { loadWorkspaceRules, WORKSPACE_RULES_CHANGED_EVENT } from '@/services/architectureLint/workspaceRules';
+
+interface ArchitectureLintContextValue {
+    violations: LintViolation[];
+    violatingNodeIds: ReadonlySet<string>;
+    violatingEdgeIds: ReadonlySet<string>;
+    parseError: string | null;
+}
+
+const ArchitectureLintContext = createContext<ArchitectureLintContextValue>({
+    violations: [],
+    violatingNodeIds: new Set(),
+    violatingEdgeIds: new Set(),
+    parseError: null,
+});
+
+export function useArchitectureLint(): ArchitectureLintContextValue {
+    return useContext(ArchitectureLintContext);
+}
+
+interface ArchitectureLintProviderProps {
+    nodes: FlowNode[];
+    edges: FlowEdge[];
+    rulesJson: string;
+    children: React.ReactNode;
+}
+
+export function ArchitectureLintProvider({ nodes, edges, rulesJson, children }: ArchitectureLintProviderProps): React.ReactElement {
+    const { rules: diagramRules, error: diagramParseError } = useMemo(() => parseRulesJson(rulesJson), [rulesJson]);
+
+    const [workspaceRulesJson, setWorkspaceRulesJson] = useState(() => loadWorkspaceRules());
+    useEffect(() => {
+        const refresh = () => setWorkspaceRulesJson(loadWorkspaceRules());
+        window.addEventListener(WORKSPACE_RULES_CHANGED_EVENT, refresh);
+        return () => window.removeEventListener(WORKSPACE_RULES_CHANGED_EVENT, refresh);
+    }, []);
+
+    const { rules: workspaceRules } = useMemo(() => parseRulesJson(workspaceRulesJson), [workspaceRulesJson]);
+    const rules = useMemo(() => [...workspaceRules, ...diagramRules], [workspaceRules, diagramRules]);
+
+    const violations = useMemo(
+        () => (rules.length > 0 ? evaluateRules(nodes, edges, rules) : []),
+        [nodes, edges, rules],
+    );
+
+    const violatingNodeIds = useMemo(
+        () => new Set(violations.flatMap((v) => v.nodeIds)),
+        [violations],
+    );
+
+    const violatingEdgeIds = useMemo(
+        () => new Set(violations.flatMap((v) => v.edgeIds)),
+        [violations],
+    );
+
+    const value = useMemo(
+        () => ({ violations, violatingNodeIds, violatingEdgeIds, parseError: diagramParseError }),
+        [violations, violatingNodeIds, violatingEdgeIds, diagramParseError],
+    );
+
+    return <ArchitectureLintContext.Provider value={value}>{children}</ArchitectureLintContext.Provider>;
+}
diff --git a/src/context/CinematicExportContext.tsx b/src/context/CinematicExportContext.tsx
new file mode 100644
index 0000000..2fc9a3b
--- /dev/null
+++ b/src/context/CinematicExportContext.tsx
@@ -0,0 +1,85 @@
+import React, { createContext, useContext, useMemo, useState } from 'react';
+import type { CinematicRenderState } from '@/services/export/cinematicRenderState';
+
+const EMPTY_SET = new Set<string>();
+
+function createInactiveRenderState(): CinematicRenderState {
+  return {
+    active: false,
+    backgroundMode: 'light',
+    visibleNodeIds: EMPTY_SET,
+    builtEdgeIds: EMPTY_SET,
+    visibleEdgeIds: EMPTY_SET,
+    activeNodeId: null,
+    activeNodeProgress: 0,
+    activeEdgeId: null,
+    activeEdgeProgress: 0,
+    currentSegment: null,
+  };
+}
+
+export interface CinematicExportSurfaceConfig {
+  width: number;
+  height: number;
+}
+
+interface CinematicExportContextValue {
+  renderState: CinematicRenderState;
+  surfaceConfig: CinematicExportSurfaceConfig | null;
+  setRenderState: (nextState: CinematicRenderState) => void;
+  setSurfaceConfig: (nextConfig: CinematicExportSurfaceConfig | null) => void;
+  resetRenderState: () => void;
+}
+
+const INACTIVE_CONTEXT_VALUE: CinematicExportContextValue = {
+  renderState: createInactiveRenderState(),
+  surfaceConfig: null,
+  setRenderState: () => undefined,
+  setSurfaceConfig: () => undefined,
+  resetRenderState: () => undefined,
+};
+
+const CinematicExportContext = createContext<CinematicExportContextValue>(INACTIVE_CONTEXT_VALUE);
+
+export function CinematicExportProvider({ children }: { children: React.ReactNode }): React.ReactElement {
+  const [renderState, setRenderStateState] = useState<CinematicRenderState>(() => createInactiveRenderState());
+  const [surfaceConfig, setSurfaceConfigState] = useState<CinematicExportSurfaceConfig | null>(null);
+
+  const value = useMemo<CinematicExportContextValue>(() => ({
+    renderState,
+    surfaceConfig,
+    setRenderState: (nextState) => setRenderStateState(nextState),
+    setSurfaceConfig: (nextConfig) => setSurfaceConfigState(nextConfig),
+    resetRenderState: () => {
+      setRenderStateState(createInactiveRenderState());
+      setSurfaceConfigState(null);
+    },
+  }), [renderState, surfaceConfig]);
+
+  return (
+    <CinematicExportContext.Provider value={value}>
+      {children}
+    </CinematicExportContext.Provider>
+  );
+}
+
+function useCinematicExportContext(): CinematicExportContextValue {
+  return useContext(CinematicExportContext);
+}
+
+export function useCinematicExportState(): CinematicRenderState {
+  return useCinematicExportContext().renderState;
+}
+
+export function useCinematicExportSurfaceConfig(): CinematicExportSurfaceConfig | null {
+  return useCinematicExportContext().surfaceConfig;
+}
+
+export function useCinematicExportActions(): Pick<CinematicExportContextValue, 'setRenderState' | 'setSurfaceConfig' | 'resetRenderState'> {
+  const { setRenderState, setSurfaceConfig, resetRenderState } = useCinematicExportContext();
+  return {
+    setRenderState,
+    setSurfaceConfig,
+    resetRenderState,
+  };
+}
diff --git a/src/context/DiagramDiffContext.tsx b/src/context/DiagramDiffContext.tsx
new file mode 100644
index 0000000..5c20bd2
--- /dev/null
+++ b/src/context/DiagramDiffContext.tsx
@@ -0,0 +1,53 @@
+import React, { createContext, useCallback, useContext, useMemo } from 'react';
+import type { FlowEdge, FlowNode, FlowSnapshot } from '@/lib/types';
+import { computeDiagramDiff, type DiagramDiff } from '@/services/diagramDiff/diffEngine';
+
+interface DiagramDiffContextValue {
+    isActive: boolean;
+    baselineSnapshot: FlowSnapshot | null;
+    diff: DiagramDiff | null;
+    addedNodeIds: ReadonlySet<string>;
+    changedNodeIds: ReadonlySet<string>;
+    stopCompare: () => void;
+}
+
+const DiagramDiffContext = createContext<DiagramDiffContextValue>({
+    isActive: false,
+    baselineSnapshot: null,
+    diff: null,
+    addedNodeIds: new Set(),
+    changedNodeIds: new Set(),
+    stopCompare: () => undefined,
+});
+
+export function useDiagramDiff(): DiagramDiffContextValue {
+    return useContext(DiagramDiffContext);
+}
+
+interface DiagramDiffProviderProps {
+    nodes: FlowNode[];
+    edges: FlowEdge[];
+    /** Controlled: the snapshot to compare against (null = diff mode off). */
+    baselineSnapshot: FlowSnapshot | null;
+    onStopCompare: () => void;
+    children: React.ReactNode;
+}
+
+export function DiagramDiffProvider({ nodes, edges, baselineSnapshot, onStopCompare, children }: DiagramDiffProviderProps): React.ReactElement {
+    const stopCompare = useCallback(() => onStopCompare(), [onStopCompare]);
+
+    const diff = useMemo(() => {
+        if (!baselineSnapshot) return null;
+        return computeDiagramDiff({ nodes, edges }, { nodes: baselineSnapshot.nodes, edges: baselineSnapshot.edges });
+    }, [nodes, edges, baselineSnapshot]);
+
+    const addedNodeIds = useMemo(() => new Set(diff?.addedNodeIds ?? []), [diff]);
+    const changedNodeIds = useMemo(() => new Set(diff?.changedNodeIds ?? []), [diff]);
+
+    const value = useMemo(
+        () => ({ isActive: Boolean(baselineSnapshot), baselineSnapshot, diff, addedNodeIds, changedNodeIds, stopCompare }),
+        [baselineSnapshot, diff, addedNodeIds, changedNodeIds, stopCompare],
+    );
+
+    return <DiagramDiffContext.Provider value={value}>{children}</DiagramDiffContext.Provider>;
+}
diff --git a/src/diagram-types/architecture/plugin.ts b/src/diagram-types/architecture/plugin.ts
index 69d35a7..3bb9574 100644
--- a/src/diagram-types/architecture/plugin.ts
+++ b/src/diagram-types/architecture/plugin.ts
@@ -3,9 +3,11 @@ import type { DiagramPlugin } from '@/diagram-types/core';
 import { MarkerType } from '@/lib/reactflowCompat';
 import { setNodeParent } from '@/lib/nodeParent';
 
+type ArchNodeKind = 'group' | 'service' | 'junction' | 'person' | 'system' | 'container' | 'component' | 'database_container' | 'router' | 'switch' | 'firewall' | 'load_balancer' | 'cdn' | 'dns';
+
 interface ParsedArchNode {
   id: string;
-  kind: 'group' | 'service' | 'junction';
+  kind: ArchNodeKind;
   icon?: string;
   label: string;
   parentId?: string;
@@ -48,8 +50,11 @@ function stripQuotes(value: string): string {
   return trimmed;
 }
 
+const NODE_KEYWORDS = 'group|service|junction|person|system|container|component|database_container|router|switch|firewall|load_balancer|cdn|dns';
+
 function parseNodeLine(line: string): ParsedArchNode | null {
-  const match = line.match(/^(group|service|junction)\s+([A-Za-z_][\w.-]*)(?:\(([^)]+)\))?(?:\[(.+?)\])?(?:\s+in\s+([A-Za-z_][\w.-]*))?$/i);
+  const pattern = new RegExp(`^(${NODE_KEYWORDS})\\s+([A-Za-z_][\\w.-]*)(?:\\(([^)]+)\\))?(?:\\[(.+?)\\])?(?:\\s+in\\s+([A-Za-z_][\\w.-]*))?$`, 'i');
+  const match = line.match(pattern);
   if (!match) return null;
 
   const kind = match[1].toLowerCase() as ParsedArchNode['kind'];
@@ -157,6 +162,26 @@ function parseProtocolPort(label: string | undefined): { label?: string; protoco
   };
 }
 
+function resolveArchKindColor(kind: ArchNodeKind): string {
+  const colorMap: Record<string, string> = {
+    group: 'violet', junction: 'amber', person: 'blue', system: 'slate',
+    container: 'indigo', component: 'teal', database_container: 'cyan',
+    router: 'emerald', switch: 'sky', firewall: 'red', load_balancer: 'orange',
+    cdn: 'purple', dns: 'lime',
+  };
+  return colorMap[kind] ?? 'slate';
+}
+
+function resolveArchKindIcon(kind: ArchNodeKind): string {
+  const iconMap: Record<string, string> = {
+    group: 'Layers', junction: 'GitMerge', person: 'User', system: 'Box',
+    container: 'Package', component: 'Puzzle', database_container: 'Database',
+    router: 'Route', switch: 'Network', firewall: 'Shield', load_balancer: 'Scale',
+    cdn: 'Globe', dns: 'Globe2',
+  };
+  return iconMap[kind] ?? 'Server';
+}
+
 function parseArchitecture(input: string): { nodes: FlowNode[]; edges: FlowEdge[]; error?: string; diagnostics?: string[] } {
   const lines = input.replace(/\r\n/g, '\n').split('\n');
   const parsedNodes: ParsedArchNode[] = [];
@@ -203,7 +228,7 @@ function parseArchitecture(input: string): { nodes: FlowNode[]; edges: FlowEdge[
       diagnostics.push(`Invalid architecture edge syntax at line ${lineNumber}: "${line}"`);
       continue;
     }
-    if (/^(group|service|junction)\b/i.test(line)) {
+    if (new RegExp(`^(${NODE_KEYWORDS})\\b`, 'i').test(line)) {
       diagnostics.push(`Invalid architecture node syntax at line ${lineNumber}: "${line}"`);
       continue;
     }
@@ -242,9 +267,9 @@ function parseArchitecture(input: string): { nodes: FlowNode[]; edges: FlowEdge[
       },
       data: {
         label: node.label,
-        color: node.kind === 'group' ? 'violet' : node.kind === 'junction' ? 'amber' : 'slate',
+        color: resolveArchKindColor(node.kind),
         shape: node.kind === 'group' ? 'rounded' : 'rectangle',
-        icon: node.kind === 'group' ? 'Layers' : node.kind === 'junction' ? 'GitMerge' : 'Server',
+        icon: resolveArchKindIcon(node.kind),
         archProvider: node.icon || (node.kind === 'group' ? 'group' : 'custom'),
         archResourceType: node.kind,
         archBoundaryId: node.parentId,
diff --git a/src/diagram-types/core/propertyPanels.ts b/src/diagram-types/core/propertyPanels.ts
index f0fd26a..034fa98 100644
--- a/src/diagram-types/core/propertyPanels.ts
+++ b/src/diagram-types/core/propertyPanels.ts
@@ -11,6 +11,11 @@ export interface DiagramNodePropertiesComponentProps {
   onAddMindmapSibling?: (nodeId: string) => void;
   onAddArchitectureService?: (sourceId: string) => void;
   onCreateArchitectureBoundary?: (sourceId: string) => void;
+  onApplyArchitectureTemplate?: (sourceId: string, templateId: import('@/lib/architectureTemplates').ArchitectureTemplateId) => void;
+  onGenerateEntityFields?: (nodeId: string) => Promise<void> | void;
+  onSuggestArchitectureNode?: (nodeId: string) => Promise<void> | void;
+  onConvertEntitySelectionToClassDiagram?: () => void;
+  onOpenMermaidCodeEditor?: () => void;
 }
 
 export type DiagramNodePropertiesComponent = React.ComponentType<DiagramNodePropertiesComponentProps>;
diff --git a/src/diagram-types/registerBuiltInPlugins.ts b/src/diagram-types/registerBuiltInPlugins.ts
index a4d0f67..38e8fc9 100644
--- a/src/diagram-types/registerBuiltInPlugins.ts
+++ b/src/diagram-types/registerBuiltInPlugins.ts
@@ -6,6 +6,7 @@ import { MINDMAP_PLUGIN } from '@/diagram-types/mindmap/plugin';
 import { JOURNEY_PLUGIN } from '@/diagram-types/journey/plugin';
 import { ARCHITECTURE_PLUGIN } from '@/diagram-types/architecture/plugin';
 import { STATE_DIAGRAM_PLUGIN } from '@/diagram-types/stateDiagram/plugin';
+import { SEQUENCE_PLUGIN } from '@/diagram-types/sequence/plugin';
 
 let didRegisterBuiltIns = false;
 
@@ -21,5 +22,6 @@ export function registerBuiltInDiagramPlugins(): void {
   registerDiagramPlugin(MINDMAP_PLUGIN);
   registerDiagramPlugin(JOURNEY_PLUGIN);
   registerDiagramPlugin(ARCHITECTURE_PLUGIN);
+  registerDiagramPlugin(SEQUENCE_PLUGIN);
   didRegisterBuiltIns = true;
 }
diff --git a/src/diagram-types/registerBuiltInPropertyPanels.ts b/src/diagram-types/registerBuiltInPropertyPanels.ts
index ac39697..596e956 100644
--- a/src/diagram-types/registerBuiltInPropertyPanels.ts
+++ b/src/diagram-types/registerBuiltInPropertyPanels.ts
@@ -4,6 +4,7 @@ import { ERDiagramNodeProperties } from '@/components/properties/families/ERDiag
 import { MindmapNodeProperties } from '@/components/properties/families/MindmapNodeProperties';
 import { JourneyNodeProperties } from '@/components/properties/families/JourneyNodeProperties';
 import { ArchitectureNodeProperties } from '@/components/properties/families/ArchitectureNodeProperties';
+import { SequenceNodeProperties } from '@/components/properties/families/SequenceNodeProperties';
 
 let didRegisterBuiltInPropertyPanels = false;
 
@@ -17,5 +18,6 @@ export function registerBuiltInPropertyPanels(): void {
   registerDiagramNodeProperties('mindmap', MindmapNodeProperties);
   registerDiagramNodeProperties('journey', JourneyNodeProperties);
   registerDiagramNodeProperties('architecture', ArchitectureNodeProperties);
+  registerDiagramNodeProperties('sequence', SequenceNodeProperties);
   didRegisterBuiltInPropertyPanels = true;
 }
diff --git a/src/diagram-types/sequence/plugin.test.ts b/src/diagram-types/sequence/plugin.test.ts
new file mode 100644
index 0000000..3e1e97e
--- /dev/null
+++ b/src/diagram-types/sequence/plugin.test.ts
@@ -0,0 +1,112 @@
+import { describe, expect, it } from 'vitest';
+import { SEQUENCE_PLUGIN } from './plugin';
+
+describe('SEQUENCE_PLUGIN', () => {
+  it('has correct id and displayName', () => {
+    expect(SEQUENCE_PLUGIN.id).toBe('sequence');
+    expect(SEQUENCE_PLUGIN.displayName).toBe('Sequence Diagram');
+  });
+
+  it('parses a basic sequence diagram', () => {
+    const input = `sequenceDiagram
+    participant Alice
+    participant Bob
+    Alice->>Bob: Hello
+    Bob-->>Alice: Hi back`;
+
+    const result = SEQUENCE_PLUGIN.parseMermaid(input);
+    expect(result.error).toBeUndefined();
+    expect(result.nodes).toHaveLength(2);
+    expect(result.edges).toHaveLength(2);
+    expect(result.nodes[0].data.label).toBe('Alice');
+    expect(result.nodes[1].data.label).toBe('Bob');
+    expect(result.edges[0].data?.seqMessageKind).toBe('sync');
+    expect(result.edges[1].data?.seqMessageKind).toBe('return');
+  });
+
+  it('parses actors', () => {
+    const input = `sequenceDiagram
+    actor User
+    participant API`;
+
+    const result = SEQUENCE_PLUGIN.parseMermaid(input);
+    expect(result.nodes).toHaveLength(2);
+    expect(result.nodes[0].data.seqParticipantKind).toBe('actor');
+    expect(result.nodes[1].data.seqParticipantKind).toBe('participant');
+  });
+
+  it('parses participants with aliases', () => {
+    const input = `sequenceDiagram
+    participant A as Alice
+    participant B as Bob
+    A->>B: Request`;
+
+    const result = SEQUENCE_PLUGIN.parseMermaid(input);
+    expect(result.nodes).toHaveLength(2);
+    expect(result.nodes[0].data.label).toBe('Alice');
+    expect(result.nodes[0].data.seqParticipantAlias).toBe('Alice');
+  });
+
+  it('auto-creates participants from messages', () => {
+    const input = `sequenceDiagram
+    Alice->>Bob: Hello
+    Bob->>Charlie: Hi`;
+
+    const result = SEQUENCE_PLUGIN.parseMermaid(input);
+    expect(result.nodes).toHaveLength(3);
+    expect(result.nodes.map((n) => n.data.label)).toEqual(['Alice', 'Bob', 'Charlie']);
+  });
+
+  it('handles self-messages', () => {
+    const input = `sequenceDiagram
+    participant A
+    A->>A: Think`;
+
+    const result = SEQUENCE_PLUGIN.parseMermaid(input);
+    expect(result.edges).toHaveLength(1);
+    expect(result.edges[0].data?.seqMessageKind).toBe('self');
+  });
+
+  it('returns error for missing header', () => {
+    const result = SEQUENCE_PLUGIN.parseMermaid('Alice->>Bob: Hello');
+    expect(result.error).toBe('Missing sequenceDiagram header.');
+  });
+
+  it('returns error for no participants', () => {
+    const result = SEQUENCE_PLUGIN.parseMermaid('sequenceDiagram\n%% empty');
+    expect(result.error).toBe('No participants found.');
+  });
+
+  it('positions participants horizontally', () => {
+    const input = `sequenceDiagram
+    participant A
+    participant B
+    participant C`;
+
+    const result = SEQUENCE_PLUGIN.parseMermaid(input);
+    expect(result.nodes[0].position.x).toBe(0);
+    expect(result.nodes[1].position.x).toBe(220);
+    expect(result.nodes[2].position.x).toBe(440);
+  });
+
+  it('skips control flow keywords', () => {
+    const input = `sequenceDiagram
+    participant A
+    participant B
+    loop Every minute
+    A->>B: Ping
+    end`;
+
+    const result = SEQUENCE_PLUGIN.parseMermaid(input);
+    expect(result.nodes).toHaveLength(2);
+    expect(result.edges).toHaveLength(1);
+  });
+
+  it('handles async arrows', () => {
+    const input = `sequenceDiagram
+    A-)B: async call`;
+
+    const result = SEQUENCE_PLUGIN.parseMermaid(input);
+    expect(result.edges[0].data?.seqMessageKind).toBe('async');
+  });
+});
diff --git a/src/diagram-types/sequence/plugin.ts b/src/diagram-types/sequence/plugin.ts
new file mode 100644
index 0000000..168b0ba
--- /dev/null
+++ b/src/diagram-types/sequence/plugin.ts
@@ -0,0 +1,144 @@
+import type { FlowEdge, FlowNode } from '@/lib/types';
+import type { DiagramPlugin } from '@/diagram-types/core';
+
+interface ParsedParticipant {
+  id: string;
+  label: string;
+  kind: 'participant' | 'actor';
+  alias?: string;
+}
+
+interface ParsedMessage {
+  from: string;
+  to: string;
+  label: string;
+  kind: 'sync' | 'async' | 'return' | 'self' | 'create' | 'destroy';
+}
+
+function resolveMessageKind(arrow: string): ParsedMessage['kind'] {
+  if (arrow === '-->' || arrow === '-->>' || arrow === '-->>>' || arrow === '--x') return 'return';
+  if (arrow === '-)' || arrow === '--)') return 'async';
+  if (arrow === '-x') return 'destroy';
+  return 'sync';
+}
+
+function parseSequence(input: string): { nodes: FlowNode[]; edges: FlowEdge[]; error?: string; diagnostics?: string[] } {
+  const lines = input.replace(/\r\n/g, '\n').split('\n');
+  const participants: ParsedParticipant[] = [];
+  const messages: ParsedMessage[] = [];
+  const knownIds = new Set<string>();
+  const diagnostics: string[] = [];
+  let hasHeader = false;
+
+  function ensureParticipant(name: string): void {
+    if (knownIds.has(name)) return;
+    participants.push({ id: name, label: name, kind: 'participant' });
+    knownIds.add(name);
+  }
+
+  for (const [index, rawLine] of lines.entries()) {
+    const lineNumber = index + 1;
+    const line = rawLine.trim();
+    if (!line || line.startsWith('%%') || line.startsWith('note ') || line.startsWith('Note ')) continue;
+    if (/^(loop|alt|else|opt|par|critical|break|rect|end)\b/i.test(line)) continue;
+    if (/^(activate|deactivate)\b/i.test(line)) continue;
+    if (/^title\b/i.test(line)) continue;
+    if (/^autonumber\b/i.test(line)) continue;
+
+    if (/^sequenceDiagram\b/i.test(line)) {
+      hasHeader = true;
+      continue;
+    }
+    if (!hasHeader) continue;
+
+    const participantMatch = line.match(/^(participant|actor)\s+(.+?)(?:\s+as\s+(.+))?$/i);
+    if (participantMatch) {
+      const kind = participantMatch[1].toLowerCase() as 'participant' | 'actor';
+      const rawId = participantMatch[2].trim();
+      const alias = participantMatch[3]?.trim();
+      const id = rawId;
+      if (!knownIds.has(id)) {
+        participants.push({ id, label: alias || id, kind, alias });
+        knownIds.add(id);
+      }
+      continue;
+    }
+
+    const arrowPatterns = ['-->>>', '-->>', '-->', '--x', '--)', '->>>', '->>', '->', '-x', '-)'];
+    let matched = false;
+    for (const arrow of arrowPatterns) {
+      const arrowIndex = line.indexOf(arrow);
+      if (arrowIndex <= 0) continue;
+      const from = line.slice(0, arrowIndex).trim();
+      const rest = line.slice(arrowIndex + arrow.length).trim();
+      const colonIndex = rest.indexOf(':');
+      const to = colonIndex >= 0 ? rest.slice(0, colonIndex).trim() : rest.trim();
+      const label = colonIndex >= 0 ? rest.slice(colonIndex + 1).trim() : '';
+
+      if (!from || !to) {
+        diagnostics.push(`Invalid message at line ${lineNumber}: "${line}"`);
+        matched = true;
+        break;
+      }
+
+      ensureParticipant(from);
+      ensureParticipant(to);
+
+      const isSelf = from === to;
+      const kind = isSelf ? 'self' : resolveMessageKind(arrow);
+      messages.push({ from, to, label, kind });
+      matched = true;
+      break;
+    }
+
+    if (!matched && /(->|-->|->>|-->>|-x|--x)/.test(line)) {
+      diagnostics.push(`Unrecognized message syntax at line ${lineNumber}: "${line}"`);
+    }
+  }
+
+  if (!hasHeader) {
+    return { nodes: [], edges: [], error: 'Missing sequenceDiagram header.' };
+  }
+
+  if (participants.length === 0) {
+    return { nodes: [], edges: [], error: 'No participants found.' };
+  }
+
+  const LANE_WIDTH = 220;
+  const participantKindMap = new Map(participants.map((p) => [p.id, p.kind]));
+
+  const nodes: FlowNode[] = participants.map((p, i) => ({
+    id: p.id,
+    type: 'sequence_participant',
+    position: { x: i * LANE_WIDTH, y: 0 },
+    data: {
+      label: p.label,
+      seqParticipantKind: p.kind,
+      seqParticipantAlias: p.alias,
+    },
+  }));
+
+  const edges: FlowEdge[] = messages.map((msg, i) => ({
+    id: `e-seq-${i + 1}`,
+    source: msg.from,
+    target: msg.to,
+    sourceHandle: 'top',
+    targetHandle: 'top',
+    label: msg.label || undefined,
+    type: 'sequence_message',
+    data: {
+      seqMessageKind: msg.kind,
+      seqMessageOrder: i,
+      sourceIsActor: participantKindMap.get(msg.from) === 'actor',
+      targetIsActor: participantKindMap.get(msg.to) === 'actor',
+    },
+  }));
+
+  return diagnostics.length > 0 ? { nodes, edges, diagnostics } : { nodes, edges };
+}
+
+export const SEQUENCE_PLUGIN: DiagramPlugin = {
+  id: 'sequence',
+  displayName: 'Sequence Diagram',
+  parseMermaid: parseSequence,
+};
diff --git a/src/docs/docsRoutes.ts b/src/docs/docsRoutes.ts
new file mode 100644
index 0000000..7fe7e68
--- /dev/null
+++ b/src/docs/docsRoutes.ts
@@ -0,0 +1,34 @@
+export const DEFAULT_DOCS_LANGUAGE = 'en';
+export const DOCS_SITE_ORIGIN = 'https://docs.openflowkit.com';
+
+export function resolveDocsLanguage(language?: string): string {
+    return language === 'tr' ? 'tr' : DEFAULT_DOCS_LANGUAGE;
+}
+
+export function buildDocsPath(slug: string, language?: string): string {
+    return `/docs/${resolveDocsLanguage(language)}/${slug}`;
+}
+
+export function buildDocsSitePath(slug: string, language?: string): string {
+    const resolvedLanguage = resolveDocsLanguage(language);
+
+    if (resolvedLanguage === DEFAULT_DOCS_LANGUAGE) {
+        return `/${slug}/`;
+    }
+
+    return `/${resolvedLanguage}/${slug}/`;
+}
+
+export function buildDocsSiteUrl(slug: string, language?: string): string {
+    return `${DOCS_SITE_ORIGIN}${buildDocsSitePath(slug, language)}`;
+}
+
+export function buildDocsSiteHomeUrl(language?: string): string {
+    const resolvedLanguage = resolveDocsLanguage(language);
+
+    if (resolvedLanguage === DEFAULT_DOCS_LANGUAGE) {
+        return `${DOCS_SITE_ORIGIN}/`;
+    }
+
+    return `${DOCS_SITE_ORIGIN}/${resolvedLanguage}/`;
+}
diff --git a/src/docs/publicDocsCatalog.js b/src/docs/publicDocsCatalog.js
new file mode 100644
index 0000000..d7dcd46
--- /dev/null
+++ b/src/docs/publicDocsCatalog.js
@@ -0,0 +1,103 @@
+export const PUBLIC_DOC_SECTIONS = [
+    {
+        title: 'Getting Started',
+        items: [
+            { title: 'Introduction', slug: 'introduction' },
+            { title: 'Quick Start', slug: 'quick-start' },
+            { title: 'Local-First Diagramming', slug: 'local-first-diagramming' },
+        ],
+    },
+    {
+        title: 'Editor Basics',
+        items: [
+            { title: 'Canvas Basics', slug: 'canvas-basics' },
+            { title: 'Diagram Families', slug: 'diagram-families' },
+            { title: 'Node Types', slug: 'node-types' },
+            { title: 'Properties Panel', slug: 'properties-panel' },
+            { title: 'Command Center', slug: 'command-center' },
+            { title: 'Keyboard Shortcuts', slug: 'keyboard-shortcuts' },
+        ],
+    },
+    {
+        title: 'Studio & Automation',
+        items: [
+            { title: 'Studio Overview', slug: 'studio-overview' },
+            { title: 'AI Generation', slug: 'ai-generation' },
+            { title: 'Ask Flowpilot', slug: 'ask-flowpilot' },
+            { title: 'Smart Layout', slug: 'smart-layout' },
+            { title: 'Playback & History', slug: 'playback-history' },
+            { title: 'Architecture Linting', slug: 'architecture-lint' },
+            { title: 'Diagram Diff & Compare', slug: 'diagram-diff' },
+        ],
+    },
+    {
+        title: 'Imports & Code Workflows',
+        items: [
+            { title: 'Choose an Input Mode', slug: 'choose-input-mode' },
+            { title: 'OpenFlow DSL', slug: 'openflow-dsl' },
+            { title: 'Mermaid Integration', slug: 'mermaid-integration' },
+            { title: 'Mermaid vs OpenFlow', slug: 'mermaid-vs-openflow' },
+            { title: 'Import from Structured Data', slug: 'import-from-data' },
+            { title: 'Infrastructure Sync', slug: 'infra-sync' },
+            { title: 'Figma Design Import', slug: 'figma-design-import' },
+        ],
+    },
+    {
+        title: 'Templates, Assets & Branding',
+        items: [
+            { title: 'Templates & Starter Flows', slug: 'templates-assets' },
+            { title: 'Design Systems & Branding', slug: 'design-systems-branding' },
+        ],
+    },
+    {
+        title: 'Sharing & Export',
+        items: [
+            { title: 'Collaboration & Sharing', slug: 'collaboration-sharing' },
+            { title: 'Choose an Export Format', slug: 'choose-export-format' },
+            { title: 'Exporting', slug: 'exporting' },
+            { title: 'Embed Diagrams in GitHub', slug: 'github-embed' },
+        ],
+    },
+    {
+        title: 'Workflow Guides',
+        items: [
+            { title: 'AWS Architecture', slug: 'aws-architecture' },
+            { title: 'Payment Flow', slug: 'payment-flow' },
+            { title: 'Prompting AI Agents', slug: 'prompting-agents' },
+        ],
+    },
+    {
+        title: 'Reference',
+        items: [
+            { title: 'Roadmap & Release Policy', slug: 'roadmap' },
+        ],
+    },
+];
+
+export function getPublicDocSlugs(sections = PUBLIC_DOC_SECTIONS) {
+    const seen = new Set();
+    const slugs = [];
+
+    sections.forEach((section) => {
+        section.items.forEach((item) => {
+            if (seen.has(item.slug)) {
+                return;
+            }
+
+            seen.add(item.slug);
+            slugs.push(item.slug);
+        });
+    });
+
+    return slugs;
+}
+
+export function toStarlightSidebar(sections = PUBLIC_DOC_SECTIONS) {
+    return sections.map((section) => ({
+        label: section.title,
+        items: section.items.map((item) => ({
+            label: item.title,
+            slug: item.slug,
+        })),
+    }));
+}
diff --git a/src/hooks/ai-generation/chatHistoryStorage.test.ts b/src/hooks/ai-generation/chatHistoryStorage.test.ts
new file mode 100644
index 0000000..ca0c7cd
--- /dev/null
+++ b/src/hooks/ai-generation/chatHistoryStorage.test.ts
@@ -0,0 +1,87 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import type { ChatMessage } from '@/services/aiService';
+
+const replaceChatThread = vi.fn();
+const clearChatThread = vi.fn();
+const loadChatThread = vi.fn();
+
+vi.mock('@/services/storage/localFirstRepository', () => ({
+  localFirstRepository: {
+    loadChatThread,
+    replaceChatThread,
+    clearChatThread,
+  },
+}));
+
+describe('chatHistoryStorage', () => {
+  beforeEach(() => {
+    clearChatThread.mockReset();
+    loadChatThread.mockReset();
+    replaceChatThread.mockReset();
+    localStorage.clear();
+  });
+
+  it('loads chat history from the local-first repository', async () => {
+    loadChatThread.mockResolvedValue([
+      {
+        id: 'doc-1:0:user',
+        documentId: 'doc-1',
+        role: 'user',
+        parts: [{ text: 'hello' }],
+        createdAt: '2026-01-01T00:00:00.000Z',
+      },
+    ]);
+
+    const { loadChatHistory } = await import('./chatHistoryStorage');
+
+    await expect(loadChatHistory('doc-1')).resolves.toEqual([
+      { role: 'user', parts: [{ text: 'hello' }] } satisfies ChatMessage,
+    ]);
+  });
+
+  it('falls back to legacy localStorage when repository loading fails', async () => {
+    loadChatThread.mockRejectedValue(new Error('offline'));
+    localStorage.setItem('ofk_chat_history_doc-2', JSON.stringify([
+      { role: 'model', parts: [{ text: 'stored locally' }] },
+    ] satisfies ChatMessage[]));
+
+    const { loadChatHistory } = await import('./chatHistoryStorage');
+
+    await expect(loadChatHistory('doc-2')).resolves.toEqual([
+      { role: 'model', parts: [{ text: 'stored locally' }] },
+    ]);
+  });
+
+  it('writes the full chat thread to the repository', async () => {
+    const messages: ChatMessage[] = [
+      { role: 'user', parts: [{ text: 'a' }] },
+      { role: 'model', parts: [{ text: 'b' }] },
+    ];
+    const { saveChatHistory } = await import('./chatHistoryStorage');
+
+    await saveChatHistory('doc-3', messages);
+
+    expect(replaceChatThread).toHaveBeenCalledTimes(1);
+    expect(replaceChatThread).toHaveBeenCalledWith(
+      'doc-3',
+      expect.arrayContaining([
+        expect.objectContaining({ documentId: 'doc-3', role: 'user', parts: [{ text: 'a' }] }),
+        expect.objectContaining({ documentId: 'doc-3', role: 'model', parts: [{ text: 'b' }] }),
+      ])
+    );
+  });
+
+  it('clears the repository thread and falls back to localStorage cleanup on failure', async () => {
+    clearChatThread.mockRejectedValueOnce(new Error('boom'));
+    localStorage.setItem('ofk_chat_history_doc-4', JSON.stringify([
+      { role: 'user', parts: [{ text: 'draft' }] },
+    ] satisfies ChatMessage[]));
+
+    const { clearChatHistory } = await import('./chatHistoryStorage');
+
+    await clearChatHistory('doc-4');
+
+    expect(clearChatThread).toHaveBeenCalledWith('doc-4');
+    expect(localStorage.getItem('ofk_chat_history_doc-4')).toBeNull();
+  });
+});
diff --git a/src/hooks/ai-generation/chatHistoryStorage.ts b/src/hooks/ai-generation/chatHistoryStorage.ts
new file mode 100644
index 0000000..ef04848
--- /dev/null
+++ b/src/hooks/ai-generation/chatHistoryStorage.ts
@@ -0,0 +1,78 @@
+import type { ChatMessage } from '@/services/aiService';
+import { localFirstRepository, type PersistedChatMessage } from '@/services/storage/localFirstRepository';
+
+const STORAGE_KEY_PREFIX = 'ofk_chat_history_';
+
+function storageKey(diagramId: string): string {
+  return `${STORAGE_KEY_PREFIX}${diagramId}`;
+}
+
+function toChatMessages(messages: PersistedChatMessage[]): ChatMessage[] {
+  return messages.map((message) => ({
+    role: message.role,
+    parts: message.parts,
+  }));
+}
+
+function toPersistedChatMessages(diagramId: string, messages: ChatMessage[]): PersistedChatMessage[] {
+  const startedAt = Date.now();
+
+  return messages.map((message, index) => ({
+    id: `${diagramId}:${index}:${message.role}`,
+    documentId: diagramId,
+    role: message.role,
+    parts: message.parts,
+    createdAt: new Date(startedAt + index).toISOString(),
+  }));
+}
+
+function loadLegacyChatHistory(diagramId: string): ChatMessage[] {
+  try {
+    const raw = localStorage.getItem(storageKey(diagramId));
+    if (!raw) return [];
+    return JSON.parse(raw) as ChatMessage[];
+  } catch {
+    return [];
+  }
+}
+
+function saveLegacyChatHistory(diagramId: string, messages: ChatMessage[]): void {
+  try {
+    localStorage.setItem(storageKey(diagramId), JSON.stringify(messages));
+  } catch {
+    // localStorage may be full or unavailable — fail silently
+  }
+}
+
+function clearLegacyChatHistory(diagramId: string): void {
+  try {
+    localStorage.removeItem(storageKey(diagramId));
+  } catch {
+    // fail silently
+  }
+}
+
+export async function loadChatHistory(diagramId: string): Promise<ChatMessage[]> {
+  try {
+    const messages = await localFirstRepository.loadChatThread(diagramId);
+    return toChatMessages(messages);
+  } catch {
+    return loadLegacyChatHistory(diagramId);
+  }
+}
+
+export async function saveChatHistory(diagramId: string, messages: ChatMessage[]): Promise<void> {
+  try {
+    await localFirstRepository.replaceChatThread(diagramId, toPersistedChatMessages(diagramId, messages));
+  } catch {
+    saveLegacyChatHistory(diagramId, messages);
+  }
+}
+
+export async function clearChatHistory(diagramId: string): Promise<void> {
+  try {
+    await localFirstRepository.clearChatThread(diagramId);
+  } catch {
+    clearLegacyChatHistory(diagramId);
+  }
+}
diff --git a/src/hooks/ai-generation/codeToArchitecture.ts b/src/hooks/ai-generation/codeToArchitecture.ts
new file mode 100644
index 0000000..42375e4
--- /dev/null
+++ b/src/hooks/ai-generation/codeToArchitecture.ts
@@ -0,0 +1,63 @@
+export type SupportedLanguage =
+  | 'typescript'
+  | 'javascript'
+  | 'python'
+  | 'go'
+  | 'java'
+  | 'ruby'
+  | 'csharp'
+  | 'cpp'
+  | 'rust';
+
+export const LANGUAGE_LABELS: Record<SupportedLanguage, string> = {
+  typescript: 'TypeScript',
+  javascript: 'JavaScript',
+  python: 'Python',
+  go: 'Go',
+  java: 'Java',
+  ruby: 'Ruby',
+  csharp: 'C#',
+  cpp: 'C++',
+  rust: 'Rust',
+};
+
+export const FILE_EXTENSION_TO_LANGUAGE: Record<string, SupportedLanguage> = {
+  ts: 'typescript',
+  tsx: 'typescript',
+  js: 'javascript',
+  jsx: 'javascript',
+  mjs: 'javascript',
+  py: 'python',
+  go: 'go',
+  java: 'java',
+  rb: 'ruby',
+  cs: 'csharp',
+  cpp: 'cpp',
+  cc: 'cpp',
+  cxx: 'cpp',
+  rs: 'rust',
+};
+
+export interface CodeToArchitectureOptions {
+  code: string;
+  language: SupportedLanguage;
+}
+
+export function buildCodeToArchitecturePrompt({ code, language }: CodeToArchitectureOptions): string {
+  return `Analyze this ${LANGUAGE_LABELS[language]} source code and generate a clean architecture diagram.
+
+Identify the main modules, services, classes, functions, and their dependencies. Focus on the high-level structure — not every line of code, only meaningful architectural components and relationships.
+
+Guidelines:
+- Use [system] nodes for services, classes, modules, databases, external APIs
+- Use [browser] or [mobile] nodes for frontend surfaces if present
+- Use [section] to group related components (e.g. "Frontend", "Backend", "Database Layer")
+- Use [process] nodes for key operations or workflows
+- Show data flow and dependencies as edges with clear labels
+- Add appropriate icons and colors to make the diagram readable
+
+SOURCE CODE (${LANGUAGE_LABELS[language]}):
+\`\`\`${language}
+${code}
+\`\`\``;
+}
diff --git a/src/hooks/ai-generation/graphComposer.ts b/src/hooks/ai-generation/graphComposer.ts
index ebec2a6..abb02c9 100644
--- a/src/hooks/ai-generation/graphComposer.ts
+++ b/src/hooks/ai-generation/graphComposer.ts
@@ -1,15 +1,20 @@
 import { createDefaultEdge } from '@/constants';
 import { createId } from '@/lib/id';
+import { LEGACY_DSL_CODE_FENCE_ALIASES } from '@/lib/legacyBranding';
+import { createLogger } from '@/lib/logger';
 import { parseOpenFlowDSL } from '@/lib/openFlowDSLParser';
 import type { FlowEdge, FlowNode } from '@/lib/types';
 
+const logger = createLogger({ scope: 'graphComposer' });
+
 export interface ParsedFlowResult {
   nodes: FlowNode[];
   edges: FlowEdge[];
 }
 
 export function parseDslOrThrow(dslText: string): ParsedFlowResult {
-  const cleanDsl = dslText.replace(/```(yaml|openflow|flowmind|)?/g, '').replace(/```/g, '').trim();
+  const codeFenceAliasPattern = ['yaml', 'openflow', ...LEGACY_DSL_CODE_FENCE_ALIASES].join('|');
+  const cleanDsl = dslText.replace(new RegExp(`\`\`\`(${codeFenceAliasPattern}|)?`, 'g'), '').replace(/```/g, '').trim();
   const parseResult = parseOpenFlowDSL(cleanDsl);
   if (parseResult.error) {
     throw new Error(parseResult.error);
@@ -22,21 +27,39 @@ export function parseDslOrThrow(dslText: string): ParsedFlowResult {
 
 export function buildIdMap(parsedNodes: FlowNode[], existingNodes: FlowNode[]): Map<string, string> {
   const idMap = new Map<string, string>();
+  const existingById = new Map(existingNodes.map((n) => [n.id, n]));
+
   parsedNodes.forEach((parsedNode) => {
-    const existingNode = existingNodes.find((node) => (
-      node.data.label?.toLowerCase() === parsedNode.data.label?.toLowerCase()
-    ));
-    idMap.set(parsedNode.id, existingNode ? existingNode.id : parsedNode.id);
+    // Prefer exact ID match — the AI preserved the existing node ID
+    if (existingById.has(parsedNode.id)) {
+      idMap.set(parsedNode.id, parsedNode.id);
+      return;
+    }
+    // Fall back to label match for AI responses that generated new IDs
+    const byLabel = existingNodes.find(
+      (n) => n.data.label?.toLowerCase() === parsedNode.data.label?.toLowerCase()
+    );
+    idMap.set(parsedNode.id, byLabel ? byLabel.id : parsedNode.id);
   });
+
   return idMap;
 }
 
 export function toFinalNodes(parsedNodes: FlowNode[], idMap: Map<string, string>): FlowNode[] {
-  return parsedNodes.map((node) => ({
-    ...node,
-    id: idMap.get(node.id) || node.id,
-    type: node.type || 'process',
-  }));
+  const seen = new Set<string>();
+  const result: FlowNode[] = [];
+
+  for (const node of parsedNodes) {
+    const finalId = idMap.get(node.id) ?? node.id;
+    if (seen.has(finalId)) {
+      logger.warn('Duplicate node ID after ID mapping — skipping.', { finalId });
+      continue;
+    }
+    seen.add(finalId);
+    result.push({ ...node, id: finalId, type: node.type || 'process' });
+  }
+
+  return result;
 }
 
 export function toFinalEdges(
@@ -55,7 +78,10 @@ export function toFinalEdges(
       const targetId = idMap.get(edge.target);
 
       if (!sourceId || !targetId) {
-        console.warn(`Skipping edge with missing node: ${edge.source} -> ${edge.target}`);
+        logger.warn('Skipping edge with missing node.', {
+          sourceId: edge.source,
+          targetId: edge.target,
+        });
         return null;
       }
 
diff --git a/src/hooks/ai-generation/nodeActionPrompts.test.ts b/src/hooks/ai-generation/nodeActionPrompts.test.ts
new file mode 100644
index 0000000..f8f756e
--- /dev/null
+++ b/src/hooks/ai-generation/nodeActionPrompts.test.ts
@@ -0,0 +1,49 @@
+import { describe, expect, it } from 'vitest';
+import { buildArchitectureServiceSuggestionPrompt, buildEntityFieldGenerationPrompt } from './nodeActionPrompts';
+import type { FlowNode } from '@/lib/types';
+
+function createEntityNode(): FlowNode {
+  return {
+    id: 'entity-1',
+    type: 'er_entity',
+    position: { x: 0, y: 0 },
+    data: {
+      label: 'users',
+      erFields: ['id: UUID PK', 'email: VARCHAR UNIQUE'],
+    },
+  };
+}
+
+function createArchitectureNode(): FlowNode {
+  return {
+    id: 'arch-1',
+    type: 'architecture',
+    position: { x: 0, y: 0 },
+    data: {
+      label: 'orders',
+      archProvider: 'aws',
+      archResourceType: 'service',
+      archEnvironment: 'production',
+      archZone: 'private',
+      archTrustDomain: 'internal',
+    },
+  };
+}
+
+describe('nodeActionPrompts', () => {
+  it('builds a focused entity field generation prompt with current field context', () => {
+    const prompt = buildEntityFieldGenerationPrompt(createEntityNode());
+
+    expect(prompt).toContain('selected table "users"');
+    expect(prompt).toContain('Only update the selected ER entity.');
+    expect(prompt).toContain('id: UUID PK');
+  });
+
+  it('builds a focused architecture suggestion prompt with infrastructure metadata', () => {
+    const prompt = buildArchitectureServiceSuggestionPrompt(createArchitectureNode());
+
+    expect(prompt).toContain('Provider: aws');
+    expect(prompt).toContain('Resource type: service');
+    expect(prompt).toContain('Only update the selected architecture node');
+  });
+});
diff --git a/src/hooks/ai-generation/nodeActionPrompts.ts b/src/hooks/ai-generation/nodeActionPrompts.ts
new file mode 100644
index 0000000..21dfd2e
--- /dev/null
+++ b/src/hooks/ai-generation/nodeActionPrompts.ts
@@ -0,0 +1,42 @@
+import type { FlowNode } from '@/lib/types';
+import { normalizeErFields, stringifyErField } from '@/lib/entityFields';
+
+export function buildEntityFieldGenerationPrompt(node: FlowNode): string {
+  const existingFields = normalizeErFields(node.data.erFields)
+    .map((field) => stringifyErField(field))
+    .filter(Boolean);
+
+  const fieldContext = existingFields.length > 0
+    ? `Existing fields:\n- ${existingFields.join('\n- ')}`
+    : 'There are no fields yet.';
+
+  return [
+    `Generate a realistic ER entity field list for the selected table "${node.data.label || 'Entity'}".`,
+    'Only update the selected ER entity.',
+    'Preserve all other nodes and edges exactly as they are.',
+    'Return valid OpenFlow DSL for the full updated diagram.',
+    'Use concise, production-style table fields with types and PK/FK/NN/UNIQUE markers when appropriate.',
+    'If there is an obvious created/updated timestamp pattern, include it.',
+    fieldContext,
+  ].join('\n\n');
+}
+
+export function buildArchitectureServiceSuggestionPrompt(node: FlowNode): string {
+  const context = [
+    `Selected architecture node label: ${node.data.label || 'New Service'}`,
+    `Provider: ${String(node.data.archProviderLabel || node.data.archProvider || 'custom')}`,
+    `Resource type: ${String(node.data.archResourceType || 'service')}`,
+    `Environment: ${String(node.data.archEnvironment || 'default')}`,
+    `Zone: ${String(node.data.archZone || '') || 'none'}`,
+    `Trust domain: ${String(node.data.archTrustDomain || '') || 'none'}`,
+  ].join('\n');
+
+  return [
+    'Refine the selected architecture node into a context-aware service suggestion.',
+    'Only update the selected architecture node and, if needed, its direct metadata.',
+    'Do not add unrelated nodes or edges.',
+    'Choose a more specific label, icon, provider-aligned service metadata, and a short subLabel.',
+    'Return valid OpenFlow DSL for the full updated diagram.',
+    context,
+  ].join('\n\n');
+}
diff --git a/src/hooks/ai-generation/openApiParser.test.ts b/src/hooks/ai-generation/openApiParser.test.ts
new file mode 100644
index 0000000..95992eb
--- /dev/null
+++ b/src/hooks/ai-generation/openApiParser.test.ts
@@ -0,0 +1,152 @@
+import { describe, expect, it } from 'vitest';
+import { formatOpenApiForPrompt, parseOpenApi } from './openApiParser';
+
+const minimalSpec = JSON.stringify({
+  info: { title: 'Test API', version: '1.0.0' },
+  paths: {
+    '/users': { get: { tags: ['Users'], summary: 'List users' } },
+    '/users/{id}': { delete: { tags: ['Users'], summary: 'Delete user' } },
+    '/orders': { post: { tags: ['Orders'], summary: 'Create order' } },
+  },
+});
+
+describe('parseOpenApi', () => {
+  it('returns null for invalid JSON', () => {
+    expect(parseOpenApi('not json')).toBeNull();
+    expect(parseOpenApi('')).toBeNull();
+  });
+
+  it('extracts title and version from info', () => {
+    const result = parseOpenApi(minimalSpec);
+    expect(result?.title).toBe('Test API');
+    expect(result?.version).toBe('1.0.0');
+  });
+
+  it('groups endpoints by tag', () => {
+    const result = parseOpenApi(minimalSpec);
+    expect(result?.groups).toHaveLength(2);
+    const users = result?.groups.find((g) => g.tag === 'Users');
+    expect(users?.endpoints).toHaveLength(2);
+    expect(users?.endpoints.map((e) => e.method)).toContain('GET');
+    expect(users?.endpoints.map((e) => e.method)).toContain('DELETE');
+  });
+
+  it('assigns untagged endpoints to "General" group', () => {
+    const spec = JSON.stringify({
+      info: { title: 'API' },
+      paths: { '/health': { get: { summary: 'Health check' } } },
+    });
+    const result = parseOpenApi(spec);
+    expect(result?.groups[0].tag).toBe('General');
+  });
+
+  it('detects security schemes from components', () => {
+    const spec = JSON.stringify({
+      info: { title: 'API' },
+      paths: {},
+      components: {
+        securitySchemes: {
+          bearerAuth: { type: 'http', scheme: 'bearer' },
+        },
+      },
+    });
+    const result = parseOpenApi(spec);
+    expect(result?.securitySchemes).toHaveLength(1);
+    expect(result?.securitySchemes[0]).toMatchObject({ name: 'bearerAuth', type: 'http' });
+  });
+
+  it('detects security schemes from legacy securityDefinitions', () => {
+    const spec = JSON.stringify({
+      info: { title: 'API' },
+      paths: {},
+      securityDefinitions: { apiKey: { type: 'apiKey' } },
+    });
+    const result = parseOpenApi(spec);
+    expect(result?.securitySchemes[0]).toMatchObject({ name: 'apiKey', type: 'apiKey' });
+  });
+
+  it('detects global auth flag', () => {
+    const spec = JSON.stringify({
+      info: { title: 'API' },
+      security: [{ bearerAuth: [] }],
+      paths: {},
+    });
+    const result = parseOpenApi(spec);
+    expect(result?.hasGlobalAuth).toBe(true);
+  });
+
+  it('marks per-operation auth when operation has security', () => {
+    const spec = JSON.stringify({
+      info: { title: 'API' },
+      paths: {
+        '/secret': { get: { tags: ['Secure'], security: [{ bearerAuth: [] }] } },
+        '/public': { get: { tags: ['Open'] } },
+      },
+    });
+    const result = parseOpenApi(spec);
+    const secureEndpoint = result?.groups.find((g) => g.tag === 'Secure')?.endpoints[0];
+    const openEndpoint = result?.groups.find((g) => g.tag === 'Open')?.endpoints[0];
+    expect(secureEndpoint?.requiresAuth).toBe(true);
+    expect(openEndpoint?.requiresAuth).toBe(false);
+  });
+
+  it('uses tag descriptions when available', () => {
+    const spec = JSON.stringify({
+      info: { title: 'API' },
+      tags: [{ name: 'Users', description: 'User management' }],
+      paths: { '/users': { get: { tags: ['Users'] } } },
+    });
+    const result = parseOpenApi(spec);
+    expect(result?.groups[0].description).toBe('User management');
+  });
+
+  it('handles spec with no paths', () => {
+    const spec = JSON.stringify({ info: { title: 'Empty API' } });
+    const result = parseOpenApi(spec);
+    expect(result?.groups).toHaveLength(0);
+  });
+});
+
+describe('formatOpenApiForPrompt', () => {
+  it('includes API title and version', () => {
+    const result = parseOpenApi(minimalSpec)!;
+    const output = formatOpenApiForPrompt(result);
+    expect(output).toContain('Test API v1.0.0');
+  });
+
+  it('lists resource groups', () => {
+    const result = parseOpenApi(minimalSpec)!;
+    const output = formatOpenApiForPrompt(result);
+    expect(output).toContain('Users');
+    expect(output).toContain('Orders');
+  });
+
+  it('shows up to 3 sample endpoints per group', () => {
+    const paths: Record<string, unknown> = {};
+    for (let i = 0; i < 5; i++) {
+      paths[`/items/${i}`] = { get: { tags: ['Items'] } };
+    }
+    const spec = JSON.stringify({ info: { title: 'API' }, paths });
+    const result = parseOpenApi(spec)!;
+    const output = formatOpenApiForPrompt(result);
+    expect(output).toContain('... and 2 more');
+  });
+
+  it('includes AUTH section when security schemes exist', () => {
+    const spec = JSON.stringify({
+      info: { title: 'API' },
+      paths: {},
+      components: { securitySchemes: { bearer: { type: 'http' } } },
+    });
+    const result = parseOpenApi(spec)!;
+    const output = formatOpenApiForPrompt(result);
+    expect(output).toContain('AUTH:');
+    expect(output).toContain('bearer');
+  });
+
+  it('omits AUTH section when no security schemes', () => {
+    const result = parseOpenApi(minimalSpec)!;
+    const output = formatOpenApiForPrompt(result);
+    expect(output).not.toContain('AUTH:');
+  });
+});
diff --git a/src/hooks/ai-generation/openApiParser.ts b/src/hooks/ai-generation/openApiParser.ts
new file mode 100644
index 0000000..7950f96
--- /dev/null
+++ b/src/hooks/ai-generation/openApiParser.ts
@@ -0,0 +1,129 @@
+export interface ParsedEndpoint {
+    method: string;
+    path: string;
+    summary?: string;
+    tags: string[];
+    requiresAuth: boolean;
+}
+
+export interface ParsedSecurityScheme {
+    name: string;
+    type: string;
+}
+
+export interface ParsedApiGroup {
+    tag: string;
+    description?: string;
+    endpoints: ParsedEndpoint[];
+}
+
+export interface ParsedOpenApi {
+    title: string;
+    version: string;
+    groups: ParsedApiGroup[];
+    securitySchemes: ParsedSecurityScheme[];
+    hasGlobalAuth: boolean;
+}
+
+type OpenApiDoc = {
+    info?: { title?: string; version?: string };
+    tags?: Array<{ name?: string; description?: string }>;
+    paths?: Record<string, Record<string, {
+        summary?: string;
+        tags?: string[];
+        security?: unknown[];
+    }>>;
+    components?: { securitySchemes?: Record<string, { type?: string; scheme?: string }> };
+    securityDefinitions?: Record<string, { type?: string }>;
+    security?: unknown[];
+};
+
+const HTTP_METHODS = ['get', 'post', 'put', 'patch', 'delete', 'options', 'head'];
+
+export function parseOpenApi(specText: string): ParsedOpenApi | null {
+    let doc: OpenApiDoc;
+
+    try {
+        doc = JSON.parse(specText) as OpenApiDoc;
+    } catch {
+        return null;
+    }
+
+    const title = doc.info?.title ?? 'API';
+    const version = doc.info?.version ?? '';
+
+    const securitySchemes: ParsedSecurityScheme[] = Object.entries(
+        doc.components?.securitySchemes ?? doc.securityDefinitions ?? {}
+    ).map(([name, scheme]) => ({
+        name,
+        type: scheme.type ?? 'unknown',
+    }));
+
+    const hasGlobalAuth = (doc.security?.length ?? 0) > 0;
+
+    const tagDescriptions = new Map<string, string>();
+    for (const tag of doc.tags ?? []) {
+        if (tag.name) tagDescriptions.set(tag.name, tag.description ?? '');
+    }
+
+    const groupMap = new Map<string, ParsedEndpoint[]>();
+
+    for (const [path, pathItem] of Object.entries(doc.paths ?? {})) {
+        for (const method of HTTP_METHODS) {
+            const op = pathItem[method];
+            if (!op) continue;
+
+            const tags = op.tags?.length ? op.tags : ['General'];
+            const requiresAuth = (op.security?.length ?? 0) > 0 || hasGlobalAuth;
+
+            const endpoint: ParsedEndpoint = {
+                method: method.toUpperCase(),
+                path,
+                summary: op.summary,
+                tags,
+                requiresAuth,
+            };
+
+            const primaryTag = tags[0];
+            if (!groupMap.has(primaryTag)) groupMap.set(primaryTag, []);
+            groupMap.get(primaryTag)!.push(endpoint);
+        }
+    }
+
+    const groups: ParsedApiGroup[] = [];
+    for (const [tag, endpoints] of groupMap) {
+        groups.push({
+            tag,
+            description: tagDescriptions.get(tag),
+            endpoints,
+        });
+    }
+
+    return { title, version, groups, securitySchemes, hasGlobalAuth };
+}
+
+export function formatOpenApiForPrompt(api: ParsedOpenApi): string {
+    const lines: string[] = [
+        `API: ${api.title}${api.version ? ` v${api.version}` : ''}`,
+        '',
+        'RESOURCE GROUPS (use one [system] node per group):',
+    ];
+
+    for (const group of api.groups) {
+        lines.push(`  ${group.tag}${group.description ? ` — ${group.description}` : ''}`);
+        const sample = group.endpoints.slice(0, 3);
+        for (const ep of sample) {
+            lines.push(`    ${ep.method} ${ep.path}${ep.summary ? ` — ${ep.summary}` : ''}`);
+        }
+        if (group.endpoints.length > 3) {
+            lines.push(`    ... and ${group.endpoints.length - 3} more`);
+        }
+    }
+
+    if (api.securitySchemes.length > 0) {
+        lines.push('');
+        lines.push(`AUTH: ${api.securitySchemes.map((s) => `${s.name} (${s.type})`).join(', ')}`);
+    }
+
+    return lines.join('\n');
+}
diff --git a/src/hooks/ai-generation/openApiToSequence.ts b/src/hooks/ai-generation/openApiToSequence.ts
new file mode 100644
index 0000000..590e29b
--- /dev/null
+++ b/src/hooks/ai-generation/openApiToSequence.ts
@@ -0,0 +1,27 @@
+import { formatOpenApiForPrompt, parseOpenApi } from './openApiParser';
+
+export function buildOpenApiToSequencePrompt(spec: string): string {
+    const parsed = parseOpenApi(spec);
+
+    const apiSection = parsed
+        ? formatOpenApiForPrompt(parsed)
+        : `OPENAPI SPEC (parse directly):\n\`\`\`\n${spec}\n\`\`\`\n\nNote: Spec could not be parsed as JSON — extract resource groups manually.`;
+
+    const authRule = parsed?.securitySchemes.length
+        ? '\n- Add a [system] "Auth Service" node and show the auth flow from Client → API → Auth Service'
+        : '';
+
+    return `Generate a high-level architecture overview diagram for this API.
+
+${apiSection}
+
+Rules:
+- Create a [browser] node for "Client" and a [system] node for the main "API" entry point
+- Create one [system] node per resource group listed above
+- Show 1–2 representative flows per resource group as directed edges (e.g. "GET /users", "POST /orders")
+- Do NOT map every endpoint — show only the flows that best explain each group's purpose${authRule}
+- Group related resource nodes into [section] containers by domain
+- Skip: deeply nested paths, query parameter variations, error response details, webhook callbacks
+
+Goal: a useful architecture overview a developer can understand in 30 seconds.`;
+}
diff --git a/src/hooks/ai-generation/positionPreservingApply.test.ts b/src/hooks/ai-generation/positionPreservingApply.test.ts
new file mode 100644
index 0000000..bae032a
--- /dev/null
+++ b/src/hooks/ai-generation/positionPreservingApply.test.ts
@@ -0,0 +1,110 @@
+import { describe, expect, it } from 'vitest';
+import type { FlowNode } from '@/lib/types';
+import { applyAIResultToCanvas, positionNewNodesSmartly, restoreExistingPositions } from './positionPreservingApply';
+
+function node(id: string, x = 0, y = 0): FlowNode {
+  return { id, type: 'process', position: { x, y }, data: { label: id } } as FlowNode;
+}
+
+describe('applyAIResultToCanvas', () => {
+  it('preserves existing position for matched nodes', () => {
+    const existing = [node('a', 100, 200)];
+    const idMap = new Map([['ai-a', 'a']]);
+    const { mergedNodes, newNodeIds } = applyAIResultToCanvas(
+      [node('ai-a', 0, 0)],
+      [],
+      existing,
+      idMap
+    );
+
+    expect(mergedNodes[0].id).toBe('a');
+    expect(mergedNodes[0].position).toEqual({ x: 100, y: 200 });
+    expect(newNodeIds.size).toBe(0);
+  });
+
+  it('marks unmatched nodes as new', () => {
+    const { mergedNodes, newNodeIds } = applyAIResultToCanvas(
+      [node('brand-new')],
+      [],
+      [],
+      new Map()
+    );
+
+    expect(mergedNodes[0].id).toBe('brand-new');
+    expect(newNodeIds.has('brand-new')).toBe(true);
+  });
+
+  it('handles a mix of matched and new nodes', () => {
+    const existing = [node('keep-me', 50, 60)];
+    const idMap = new Map([['ai-keep', 'keep-me'], ['ai-new', 'ai-new']]);
+    const { mergedNodes, newNodeIds } = applyAIResultToCanvas(
+      [node('ai-keep'), node('ai-new')],
+      [],
+      existing,
+      idMap
+    );
+
+    expect(mergedNodes.find((n) => n.id === 'keep-me')?.position).toEqual({ x: 50, y: 60 });
+    expect(newNodeIds.has('ai-new')).toBe(true);
+    expect(newNodeIds.has('keep-me')).toBe(false);
+  });
+});
+
+describe('positionNewNodesSmartly', () => {
+  it('places a new node between two existing neighbors near their midpoint', () => {
+    const a = node('a', 0, 0);
+    const b = node('b', 0, 400);
+    const newNode = node('new', 0, 0);
+    const edges = [
+      { id: 'e1', source: 'a', target: 'new', type: 'smoothstep', data: {} },
+      { id: 'e2', source: 'new', target: 'b', type: 'smoothstep', data: {} },
+    ];
+    const existingById = new Map([['a', a], ['b', b]]);
+    const result = positionNewNodesSmartly([a, b, newNode], edges, new Set(['new']), existingById);
+    const placed = result.find((n) => n.id === 'new')!;
+    // Should be near midpoint (0, 200) with perpendicular offset
+    expect(placed.position.y).toBeGreaterThanOrEqual(150);
+    expect(placed.position.y).toBeLessThanOrEqual(250);
+  });
+
+  it('places a new node offset from a single neighbor', () => {
+    const a = node('a', 100, 100);
+    const newNode = node('new', 0, 0);
+    const edges = [
+      { id: 'e1', source: 'a', target: 'new', type: 'smoothstep', data: {} },
+    ];
+    const existingById = new Map([['a', a]]);
+    const result = positionNewNodesSmartly([a, newNode], edges, new Set(['new']), existingById);
+    const placed = result.find((n) => n.id === 'new')!;
+    const dist = Math.sqrt(
+      (placed.position.x - 100) ** 2 + (placed.position.y - 100) ** 2
+    );
+    expect(dist).toBe(200);
+  });
+
+  it('places orphan nodes to the right of the bounding box', () => {
+    const a = node('a', 100, 100);
+    const orphan = node('orphan', 0, 0);
+    const existingById = new Map([['a', a]]);
+    const result = positionNewNodesSmartly([a, orphan], [], new Set(['orphan']), existingById);
+    const placed = result.find((n) => n.id === 'orphan')!;
+    expect(placed.position.x).toBe(180); // 100 + 80
+  });
+});
+
+describe('restoreExistingPositions', () => {
+  it('restores existing node positions after ELK, keeps ELK position for new nodes', () => {
+    const existingById = new Map([['old', node('old', 99, 88)]]);
+    const newNodeIds = new Set(['fresh']);
+
+    const elkNodes = [
+      node('old', 0, 0),   // ELK moved it — should be restored
+      node('fresh', 5, 5), // new node — keep ELK position
+    ];
+
+    const result = restoreExistingPositions(elkNodes, newNodeIds, existingById);
+
+    expect(result.find((n) => n.id === 'old')?.position).toEqual({ x: 99, y: 88 });
+    expect(result.find((n) => n.id === 'fresh')?.position).toEqual({ x: 5, y: 5 });
+  });
+});
diff --git a/src/hooks/ai-generation/positionPreservingApply.ts b/src/hooks/ai-generation/positionPreservingApply.ts
new file mode 100644
index 0000000..f110d2e
--- /dev/null
+++ b/src/hooks/ai-generation/positionPreservingApply.ts
@@ -0,0 +1,139 @@
+import type { FlowEdge, FlowNode } from '@/lib/types';
+
+export interface PositionPreservingApplyResult {
+    mergedNodes: FlowNode[];
+    mergedEdges: FlowEdge[];
+    newNodeIds: Set<string>;
+    existingById: Map<string, FlowNode>;
+}
+
+/**
+ * Merges AI-generated nodes/edges with the existing canvas state.
+ *
+ * - Nodes matched by ID (AI preserved the ID) or label → keep existing position, update data
+ * - New nodes (no match) → let the caller position them via layout
+ * - Nodes from the existing canvas omitted by the AI → excluded (treated as removed)
+ */
+export function applyAIResultToCanvas(
+    aiNodes: FlowNode[],
+    aiEdges: FlowEdge[],
+    existingNodes: FlowNode[],
+    idMap: Map<string, string>
+): PositionPreservingApplyResult {
+    const existingById = new Map(existingNodes.map((n) => [n.id, n]));
+    const newNodeIds = new Set<string>();
+
+    const mergedNodes = aiNodes.map((aiNode) => {
+        const resolvedId = idMap.get(aiNode.id) ?? aiNode.id;
+        const existing = existingById.get(resolvedId);
+
+        if (existing) {
+            return { ...aiNode, id: resolvedId, position: existing.position };
+        }
+
+        newNodeIds.add(resolvedId);
+        return { ...aiNode, id: resolvedId };
+    });
+
+    return { mergedNodes, mergedEdges: aiEdges, newNodeIds, existingById };
+}
+
+/**
+ * Position new nodes relative to their existing graph neighbors.
+ * Avoids a full ELK re-layout for simple insertions (add one node between two others).
+ */
+export function positionNewNodesSmartly(
+    mergedNodes: FlowNode[],
+    mergedEdges: FlowEdge[],
+    newNodeIds: Set<string>,
+    existingById: Map<string, FlowNode>
+): FlowNode[] {
+    const existingNodes = [...existingById.values()];
+    const bbox = computeBoundingBox(existingNodes);
+    const isHorizontal = (bbox.maxX - bbox.minX) > (bbox.maxY - bbox.minY);
+    let orphanIndex = 0;
+
+    return mergedNodes.map((node) => {
+        if (!newNodeIds.has(node.id)) return node;
+
+        const neighbors = findExistingNeighbors(node.id, mergedEdges, existingById, newNodeIds);
+
+        if (neighbors.length >= 2) {
+            const a = neighbors[0].position;
+            const b = neighbors[1].position;
+            const midX = (a.x + b.x) / 2;
+            const midY = (a.y + b.y) / 2;
+            const dx = b.x - a.x;
+            const dy = b.y - a.y;
+            const len = Math.sqrt(dx * dx + dy * dy) || 1;
+            const perpX = -dy / len;
+            const perpY = dx / len;
+            return { ...node, position: { x: Math.round(midX + perpX * 80), y: Math.round(midY + perpY * 80) } };
+        }
+
+        if (neighbors.length === 1) {
+            const n = neighbors[0].position;
+            const offset = 200;
+            const pos = isHorizontal
+                ? { x: n.x + offset, y: n.y }
+                : { x: n.x, y: n.y + offset };
+            return { ...node, position: pos };
+        }
+
+        const pos = {
+            x: bbox.maxX + 80,
+            y: bbox.minY + orphanIndex * 160,
+        };
+        orphanIndex++;
+        return { ...node, position: pos };
+    });
+}
+
+function findExistingNeighbors(
+    nodeId: string,
+    edges: FlowEdge[],
+    existingById: Map<string, FlowNode>,
+    newNodeIds: Set<string>
+): FlowNode[] {
+    const neighbors: FlowNode[] = [];
+    for (const edge of edges) {
+        let neighborId: string | null = null;
+        if (edge.source === nodeId && !newNodeIds.has(edge.target)) neighborId = edge.target;
+        if (edge.target === nodeId && !newNodeIds.has(edge.source)) neighborId = edge.source;
+        if (neighborId) {
+            const existing = existingById.get(neighborId);
+            if (existing && !neighbors.some((n) => n.id === existing.id)) {
+                neighbors.push(existing);
+            }
+        }
+    }
+    return neighbors;
+}
+
+function computeBoundingBox(nodes: FlowNode[]): { minX: number; minY: number; maxX: number; maxY: number } {
+    if (nodes.length === 0) return { minX: 0, minY: 0, maxX: 200, maxY: 200 };
+    let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+    for (const n of nodes) {
+        if (n.position.x < minX) minX = n.position.x;
+        if (n.position.y < minY) minY = n.position.y;
+        if (n.position.x > maxX) maxX = n.position.x;
+        if (n.position.y > maxY) maxY = n.position.y;
+    }
+    return { minX, minY, maxX, maxY };
+}
+
+/**
+ * After ELK has positioned all nodes (including new ones), restore the original
+ * positions for nodes that already existed. Only new nodes keep the ELK-computed position.
+ */
+export function restoreExistingPositions(
+    elkNodes: FlowNode[],
+    newNodeIds: Set<string>,
+    existingById: Map<string, FlowNode>
+): FlowNode[] {
+    return elkNodes.map((node) => {
+        if (newNodeIds.has(node.id)) return node;
+        const existing = existingById.get(node.id);
+        return existing ? { ...node, position: existing.position } : node;
+    });
+}
diff --git a/src/hooks/ai-generation/readiness.test.ts b/src/hooks/ai-generation/readiness.test.ts
new file mode 100644
index 0000000..004a62f
--- /dev/null
+++ b/src/hooks/ai-generation/readiness.test.ts
@@ -0,0 +1,55 @@
+import { describe, expect, it } from 'vitest';
+import { getAIReadinessState } from './readiness';
+
+const DEFAULT_STORAGE_MODE = 'local' as const;
+
+describe('getAIReadinessState', () => {
+  it('blocks hosted providers when the API key is missing', () => {
+    const readiness = getAIReadinessState({
+      provider: 'openai',
+      storageMode: DEFAULT_STORAGE_MODE,
+      model: 'gpt-5-mini',
+    });
+
+    expect(readiness.canGenerate).toBe(false);
+    expect(readiness.blockingIssue?.detail).toContain('OpenAI API key');
+    expect(readiness.advisory?.title).toContain('OpenAI');
+  });
+
+  it('blocks custom providers when the base URL is invalid', () => {
+    const readiness = getAIReadinessState({
+      provider: 'custom',
+      storageMode: DEFAULT_STORAGE_MODE,
+      model: 'llama3.1',
+      customBaseUrl: 'localhost:11434/v1',
+    });
+
+    expect(readiness.canGenerate).toBe(false);
+    expect(readiness.blockingIssue?.detail).toContain('http:// or https://');
+  });
+
+  it('allows browser-friendly providers when required config exists', () => {
+    const readiness = getAIReadinessState({
+      provider: 'gemini',
+      storageMode: DEFAULT_STORAGE_MODE,
+      apiKey: 'AIza-test',
+    });
+
+    expect(readiness.canGenerate).toBe(true);
+    expect(readiness.blockingIssue).toBeNull();
+    expect(readiness.advisory?.title).toContain('browser-first default');
+  });
+
+  it('allows custom endpoints with a valid URL and model', () => {
+    const readiness = getAIReadinessState({
+      provider: 'custom',
+      storageMode: DEFAULT_STORAGE_MODE,
+      customBaseUrl: 'http://localhost:11434/v1',
+      model: 'llama3.1',
+    });
+
+    expect(readiness.canGenerate).toBe(true);
+    expect(readiness.blockingIssue).toBeNull();
+    expect(readiness.advisory?.title).toBe('Custom endpoint selected');
+  });
+});
diff --git a/src/hooks/ai-generation/readiness.ts b/src/hooks/ai-generation/readiness.ts
new file mode 100644
index 0000000..77ee088
--- /dev/null
+++ b/src/hooks/ai-generation/readiness.ts
@@ -0,0 +1,139 @@
+import { PROVIDERS, PROVIDER_RISK, type ProviderMeta } from '@/config/aiProviders';
+import type { AIProvider, AISettings } from '@/store';
+
+export interface AIReadinessMessage {
+  tone: 'info' | 'warning' | 'error';
+  title: string;
+  detail: string;
+}
+
+export interface AIReadinessState {
+  canGenerate: boolean;
+  blockingIssue: AIReadinessMessage | null;
+  advisory: AIReadinessMessage | null;
+}
+
+function getProviderMeta(provider: AIProvider): ProviderMeta {
+  return PROVIDERS.find((candidate) => candidate.id === provider) ?? PROVIDERS[0];
+}
+
+function getProviderAdvisory(provider: AIProvider, providerName: string): AIReadinessMessage {
+  if (provider === 'custom') {
+    return {
+      tone: 'info',
+      title: 'Custom endpoint selected',
+      detail:
+        'Use the exact model ID and an OpenAI-compatible /chat/completions endpoint. Local setups often work without an API key, but hosted gateways may still require one.',
+    };
+  }
+
+  const risk = PROVIDER_RISK[provider];
+  if (risk === 'browser_friendly') {
+    return {
+      tone: 'info',
+      title: `${providerName} is a good browser-first default`,
+      detail:
+        'This provider usually works well from a local browser session. Keep prompts specific and prefer edits or additions over full-canvas rewrites.',
+    };
+  }
+
+  if (risk === 'proxy_likely') {
+    return {
+      tone: 'warning',
+      title: `${providerName} often needs a server-side proxy`,
+      detail:
+        'Browser-originated requests are commonly blocked or rate-limited. If generation fails immediately, route requests through your own backend.',
+    };
+  }
+
+  return {
+    tone: 'warning',
+    title: `${providerName} may need extra setup`,
+    detail:
+      'Some accounts and enterprise policies work fine in-browser, but others require a proxy or custom gateway. If requests fail fast, check your provider policy.',
+  };
+}
+
+function buildBlockingIssue(providerName: string, detail: string): AIReadinessMessage {
+  return {
+    tone: 'error',
+    title: `${providerName} is not ready yet`,
+    detail,
+  };
+}
+
+function isValidHttpUrl(value: string): boolean {
+  try {
+    const url = new URL(value);
+    return url.protocol === 'http:' || url.protocol === 'https:';
+  } catch {
+    return false;
+  }
+}
+
+export function getAIReadinessState(aiSettings: AISettings): AIReadinessState {
+  const provider = aiSettings.provider ?? 'gemini';
+  const providerMeta = getProviderMeta(provider);
+  const providerName = providerMeta.name;
+  const apiKey = aiSettings.apiKey?.trim();
+  const model = aiSettings.model?.trim();
+  const customBaseUrl = aiSettings.customBaseUrl?.trim();
+
+  if (provider === 'custom') {
+    if (!customBaseUrl) {
+      return {
+        canGenerate: false,
+        blockingIssue: buildBlockingIssue(
+          providerName,
+          'Add a custom base URL before generating. Point it at an OpenAI-compatible endpoint such as Ollama, LM Studio, or your own gateway.',
+        ),
+        advisory: getProviderAdvisory(provider, providerName),
+      };
+    }
+
+    if (!isValidHttpUrl(customBaseUrl)) {
+      return {
+        canGenerate: false,
+        blockingIssue: buildBlockingIssue(
+          providerName,
+          'The custom base URL must be a full http:// or https:// URL, for example http://localhost:11434/v1.',
+        ),
+        advisory: getProviderAdvisory(provider, providerName),
+      };
+    }
+
+    if (!model) {
+      return {
+        canGenerate: false,
+        blockingIssue: buildBlockingIssue(
+          providerName,
+          'Add the exact model ID exposed by your endpoint before generating.',
+        ),
+        advisory: getProviderAdvisory(provider, providerName),
+      };
+    }
+
+    return {
+      canGenerate: true,
+      blockingIssue: null,
+      advisory: getProviderAdvisory(provider, providerName),
+    };
+  }
+
+  if (!apiKey) {
+    return {
+      canGenerate: false,
+      blockingIssue: buildBlockingIssue(
+        providerName,
+        `Add your ${providerName} API key in Settings before generating.`,
+      ),
+      advisory: getProviderAdvisory(provider, providerName),
+    };
+  }
+
+  return {
+    canGenerate: true,
+    blockingIssue: null,
+    advisory: getProviderAdvisory(provider, providerName),
+  };
+}
diff --git a/src/hooks/ai-generation/requestLifecycle.test.ts b/src/hooks/ai-generation/requestLifecycle.test.ts
index 3d91cd1..ab6e564 100644
--- a/src/hooks/ai-generation/requestLifecycle.test.ts
+++ b/src/hooks/ai-generation/requestLifecycle.test.ts
@@ -1,4 +1,4 @@
-import { describe, expect, it, vi } from 'vitest';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 import type { ChatMessage } from '@/services/aiService';
 import { composeDiagramForDisplay } from '@/services/composeDiagramForDisplay';
 import { generateDiagramFromChat } from '@/services/aiService';
@@ -9,7 +9,7 @@ import {
 } from './requestLifecycle';
 
 vi.mock('@/services/ai/contextSerializer', () => ({
-  serializeCanvasContextForAI: vi.fn(() => '{"nodes":[],"edges":[]}'),
+  serializeCanvasContextForAI: vi.fn(() => '# Current diagram\nflow: Test\ndirection: TB'),
 }));
 
 vi.mock('@/services/aiService', () => ({
@@ -30,7 +30,13 @@ vi.mock('./graphComposer', () => ({
   toFinalEdges: vi.fn(() => [{ id: 'edge-final', source: 'existing-a', target: 'existing-a' }]),
 }));
 
+const BASE_AI_SETTINGS = { provider: 'gemini' as const, storageMode: 'local' as const, apiKey: 'key', model: 'model' };
+const BASE_EDGE_OPTIONS = { type: 'smoothstep' as const, animated: false, strokeWidth: 2 };
+
 describe('requestLifecycle', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
   it('builds and appends chat messages consistently', () => {
     const userMessage = buildUserChatMessage('Create billing flow', 'base64');
     expect(userMessage).toEqual({
@@ -46,32 +52,58 @@ describe('requestLifecycle', () => {
     ]);
   });
 
-  it('runs the AI generation pipeline and returns composed graph output', async () => {
+  it('runs full layout on an empty canvas (fresh generation)', async () => {
     vi.mocked(generateDiagramFromChat).mockResolvedValueOnce('flow: "A"');
 
     const result = await generateAIFlowResult({
       chatMessages: [],
       prompt: 'Create billing flow',
-      imageBase64: undefined,
-      nodes: [{ id: 'existing-a', type: 'process', position: { x: 0, y: 0 }, data: { label: 'A' } }],
+      nodes: [],
       edges: [],
-      aiSettings: {
-        provider: 'gemini',
-        apiKey: 'key',
-        model: 'model',
-      },
-      globalEdgeOptions: {
-        type: 'smoothstep',
-        animated: false,
-        strokeWidth: 2,
-      },
+      aiSettings: BASE_AI_SETTINGS,
+      globalEdgeOptions: BASE_EDGE_OPTIONS,
     });
 
     expect(generateDiagramFromChat).toHaveBeenCalled();
     expect(composeDiagramForDisplay).toHaveBeenCalled();
     expect(result.userMessage.role).toBe('user');
     expect(result.dslText).toBe('flow: "A"');
+  });
+
+  it('skips layout when all AI nodes are matched (pure edit — positions preserved)', async () => {
+    vi.mocked(generateDiagramFromChat).mockResolvedValueOnce('flow: "A"');
+
+    const result = await generateAIFlowResult({
+      chatMessages: [],
+      prompt: 'Make the Login node blue',
+      nodes: [{ id: 'existing-a', type: 'process', position: { x: 100, y: 200 }, data: { label: 'A' } }],
+      edges: [],
+      aiSettings: BASE_AI_SETTINGS,
+      globalEdgeOptions: BASE_EDGE_OPTIONS,
+    });
+
+    // No new nodes → layout skipped, existing position preserved
+    expect(composeDiagramForDisplay).not.toHaveBeenCalled();
     expect(result.layoutedNodes[0].id).toBe('existing-a');
+    expect(result.layoutedNodes[0].position).toEqual({ x: 100, y: 200 });
     expect(result.layoutedEdges[0].id).toBe('edge-final');
   });
+
+  it('appends selection suffix to prompt when nodes are selected', async () => {
+    vi.mocked(generateDiagramFromChat).mockResolvedValueOnce('flow: "A"');
+
+    await generateAIFlowResult({
+      chatMessages: [],
+      prompt: 'Make it blue',
+      nodes: [{ id: 'existing-a', type: 'process', position: { x: 0, y: 0 }, data: { label: 'Login' } }],
+      edges: [],
+      selectedNodeIds: ['existing-a'],
+      aiSettings: BASE_AI_SETTINGS,
+      globalEdgeOptions: BASE_EDGE_OPTIONS,
+    });
+
+    const calledPrompt = vi.mocked(generateDiagramFromChat).mock.calls[0][1];
+    expect(calledPrompt).toContain('FOCUSED EDIT');
+    expect(calledPrompt).toContain('Login');
+  });
 });
diff --git a/src/hooks/ai-generation/requestLifecycle.ts b/src/hooks/ai-generation/requestLifecycle.ts
index 0cccec7..81771fc 100644
--- a/src/hooks/ai-generation/requestLifecycle.ts
+++ b/src/hooks/ai-generation/requestLifecycle.ts
@@ -9,6 +9,7 @@ import {
   toFinalEdges,
   toFinalNodes,
 } from './graphComposer';
+import { applyAIResultToCanvas, positionNewNodesSmartly, restoreExistingPositions } from './positionPreservingApply';
 
 interface GenerateAIFlowResultParams {
   chatMessages: ChatMessage[];
@@ -16,8 +17,45 @@ interface GenerateAIFlowResultParams {
   imageBase64?: string;
   nodes: FlowNode[];
   edges: FlowEdge[];
+  selectedNodeIds?: string[];
   aiSettings: AISettings;
   globalEdgeOptions: GlobalEdgeOptions;
+  onChunk?: (delta: string) => void;
+  onRetry?: (attempt: number) => void;
+  signal?: AbortSignal;
+}
+
+const MAX_RETRIES = 3;
+const RETRY_BASE_MS = 1000;
+
+function isRetryableError(error: unknown): boolean {
+  if (error instanceof DOMException && error.name === 'AbortError') return false;
+  if (error instanceof Error) {
+    const msg = error.message.toLowerCase();
+    // Retry on rate-limit and network errors, not on auth or parse errors
+    return msg.includes('429') || msg.includes('rate') || msg.includes('network') || msg.includes('fetch');
+  }
+  return false;
+}
+
+async function withRetry<T>(
+  fn: () => Promise<T>,
+  signal: AbortSignal | undefined,
+  onRetry?: (attempt: number) => void,
+): Promise<T> {
+  for (let attempt = 0; attempt < MAX_RETRIES; attempt++) {
+    if (signal?.aborted) throw new DOMException('Aborted', 'AbortError');
+    try {
+      return await fn();
+    } catch (error) {
+      if (error instanceof DOMException && error.name === 'AbortError') throw error;
+      if (!isRetryableError(error) || attempt === MAX_RETRIES - 1) throw error;
+      onRetry?.(attempt + 1);
+      const delay = RETRY_BASE_MS * 2 ** attempt;
+      await new Promise<void>((resolve) => setTimeout(resolve, delay));
+    }
+  }
+  throw new Error('Retries exhausted');
 }
 
 export interface GenerateAIFlowResult {
@@ -39,50 +77,128 @@ export function buildUserChatMessage(prompt: string, imageBase64?: string): Chat
 export function appendChatExchange(
   previousMessages: ChatMessage[],
   userMessage: ChatMessage,
-  dslText: string
+  dslText: string,
+  editMode = false
 ): ChatMessage[] {
+  const modelText = editMode ? '[Diagram updated]' : dslText;
   return [
     ...previousMessages,
     userMessage,
-    { role: 'model', parts: [{ text: dslText }] },
+    { role: 'model', parts: [{ text: modelText }] },
   ];
 }
 
+function buildSelectionPromptSuffix(selectedNodeIds: string[], nodes: FlowNode[]): string {
+  const selectedLabels = selectedNodeIds
+    .map((id) => nodes.find((n) => n.id === id)?.data.label)
+    .filter(Boolean)
+    .join(', ');
+
+  return selectedLabels
+    ? `\n\nFOCUSED EDIT: The user has selected ${selectedNodeIds.length} node(s): ${selectedLabels}. Apply changes to these nodes and their connections. Preserve all other nodes using their exact existing IDs.`
+    : '';
+}
+
 export async function generateAIFlowResult({
   chatMessages,
   prompt,
   imageBase64,
   nodes,
   edges,
+  selectedNodeIds,
   aiSettings,
   globalEdgeOptions,
+  onChunk,
+  onRetry,
+  signal,
 }: GenerateAIFlowResultParams): Promise<GenerateAIFlowResult> {
-  const currentGraph = serializeCanvasContextForAI(nodes, edges);
-  const dslText = await generateDiagramFromChat(
-    chatMessages,
-    prompt,
-    currentGraph,
-    imageBase64,
-    aiSettings.apiKey,
-    aiSettings.model,
-    aiSettings.provider || 'gemini',
-    aiSettings.customBaseUrl
+  const hasSelection = (selectedNodeIds?.length ?? 0) > 0;
+  const currentGraph = serializeCanvasContextForAI(nodes, edges, selectedNodeIds);
+  const fullPrompt = hasSelection
+    ? prompt + buildSelectionPromptSuffix(selectedNodeIds!, nodes)
+    : prompt;
+
+  const isEditMode = nodes.length > 0;
+
+  const dslText = await withRetry(
+    () => generateDiagramFromChat(
+      chatMessages,
+      fullPrompt,
+      currentGraph,
+      imageBase64,
+      aiSettings.apiKey,
+      aiSettings.model,
+      aiSettings.provider || 'gemini',
+      aiSettings.customBaseUrl,
+      isEditMode,
+      onChunk,
+      signal,
+    ),
+    signal,
+    onRetry,
   );
 
   const parsed = parseDslOrThrow(dslText);
   const idMap = buildIdMap(parsed.nodes, nodes);
   const finalNodes = toFinalNodes(parsed.nodes, idMap);
   const finalEdges = toFinalEdges(parsed.edges, idMap, globalEdgeOptions);
-  const { nodes: layoutedNodes, edges: layoutedEdges } = await composeDiagramForDisplay(finalNodes, finalEdges, {
-    direction: 'TB',
-    algorithm: 'mrtree',
-    spacing: 'loose',
+
+  const isEmptyCanvas = nodes.length === 0;
+  if (isEmptyCanvas) {
+    const { nodes: layoutedNodes, edges: layoutedEdges } = await composeDiagramForDisplay(
+      finalNodes,
+      finalEdges,
+      { direction: 'TB', algorithm: 'mrtree', spacing: 'loose' }
+    );
+    return { dslText, userMessage: buildUserChatMessage(prompt, imageBase64), layoutedNodes, layoutedEdges };
+  }
+
+  // Position-preserving apply: matched nodes keep their positions, new nodes get ELK positions
+  const { mergedNodes, mergedEdges, newNodeIds, existingById } = applyAIResultToCanvas(
+    finalNodes,
+    finalEdges,
+    nodes,
+    idMap
+  );
+
+  if (newNodeIds.size === 0) {
+    return {
+      dslText,
+      userMessage: buildUserChatMessage(prompt, imageBase64),
+      layoutedNodes: mergedNodes,
+      layoutedEdges: mergedEdges,
+    };
+  }
+
+  // Smart placement: position new nodes near their existing neighbors
+  const smartPositioned = positionNewNodesSmartly(mergedNodes, mergedEdges, newNodeIds, existingById);
+  const unplacedIds = [...newNodeIds].filter((id) => {
+    const node = smartPositioned.find((n) => n.id === id);
+    return !node?.position || (node.position.x === 0 && node.position.y === 0);
   });
 
+  if (unplacedIds.length === 0) {
+    return {
+      dslText,
+      userMessage: buildUserChatMessage(prompt, imageBase64),
+      layoutedNodes: smartPositioned,
+      layoutedEdges: mergedEdges,
+    };
+  }
+
+  // Fallback: ELK for nodes that couldn't be placed smartly
+  const { nodes: elkNodes, edges: elkEdges } = await composeDiagramForDisplay(
+    smartPositioned,
+    mergedEdges,
+    { direction: 'TB', algorithm: 'mrtree', spacing: 'loose' }
+  );
+
+  const layoutedNodes = restoreExistingPositions(elkNodes, newNodeIds, existingById);
+
   return {
     dslText,
     userMessage: buildUserChatMessage(prompt, imageBase64),
     layoutedNodes,
-    layoutedEdges,
+    layoutedEdges: elkEdges,
   };
 }
diff --git a/src/hooks/ai-generation/sqlParser.test.ts b/src/hooks/ai-generation/sqlParser.test.ts
new file mode 100644
index 0000000..d901409
--- /dev/null
+++ b/src/hooks/ai-generation/sqlParser.test.ts
@@ -0,0 +1,142 @@
+import { describe, expect, it } from 'vitest';
+import { formatSchemaForPrompt, parseSqlDdl } from './sqlParser';
+
+describe('parseSqlDdl', () => {
+  it('parses a basic CREATE TABLE with column types', () => {
+    const sql = `
+      CREATE TABLE users (
+        id INT NOT NULL,
+        name VARCHAR(100),
+        email VARCHAR(255) NOT NULL UNIQUE
+      );
+    `;
+    const schema = parseSqlDdl(sql);
+    expect(schema.tables).toHaveLength(1);
+    const [users] = schema.tables;
+    expect(users.name).toBe('users');
+    expect(users.columns).toHaveLength(3);
+    expect(users.columns[0]).toMatchObject({ name: 'id', type: 'INT', nullable: false });
+    expect(users.columns[1]).toMatchObject({ name: 'name', nullable: true });
+    expect(users.columns[2]).toMatchObject({ name: 'email', unique: true, nullable: false });
+  });
+
+  it('detects inline PRIMARY KEY', () => {
+    const sql = `CREATE TABLE orders (id BIGINT PRIMARY KEY, total DECIMAL);`;
+    const schema = parseSqlDdl(sql);
+    const [orders] = schema.tables;
+    expect(orders.columns[0]).toMatchObject({ name: 'id', primaryKey: true });
+  });
+
+  it('detects table-level PRIMARY KEY constraint', () => {
+    const sql = `
+      CREATE TABLE products (
+        product_id INT,
+        name VARCHAR(50),
+        CONSTRAINT pk_products PRIMARY KEY (product_id)
+      );
+    `;
+    const schema = parseSqlDdl(sql);
+    const [products] = schema.tables;
+    const pk = products.columns.find((c) => c.name === 'product_id');
+    expect(pk?.primaryKey).toBe(true);
+  });
+
+  it('parses inline REFERENCES as foreign key', () => {
+    const sql = `
+      CREATE TABLE order_items (
+        id INT PRIMARY KEY,
+        order_id INT REFERENCES orders(id),
+        product_id INT REFERENCES products(product_id)
+      );
+    `;
+    const schema = parseSqlDdl(sql);
+    const [items] = schema.tables;
+    expect(items.foreignKeys).toHaveLength(2);
+    expect(items.foreignKeys[0]).toEqual({ column: 'order_id', refTable: 'orders', refColumn: 'id' });
+  });
+
+  it('parses FOREIGN KEY ... REFERENCES constraint syntax', () => {
+    const sql = `
+      CREATE TABLE order_items (
+        id INT,
+        order_id INT,
+        FOREIGN KEY (order_id) REFERENCES orders(id)
+      );
+    `;
+    const schema = parseSqlDdl(sql);
+    expect(schema.tables[0].foreignKeys).toHaveLength(1);
+    expect(schema.tables[0].foreignKeys[0]).toEqual({ column: 'order_id', refTable: 'orders', refColumn: 'id' });
+  });
+
+  it('strips SQL comments before parsing', () => {
+    const sql = `
+      -- users table
+      CREATE TABLE users (
+        id INT, /* surrogate key */
+        name VARCHAR(100)
+      );
+    `;
+    const schema = parseSqlDdl(sql);
+    expect(schema.tables).toHaveLength(1);
+    expect(schema.tables[0].columns).toHaveLength(2);
+  });
+
+  it('handles quoted identifiers', () => {
+    const sql = 'CREATE TABLE `my_table` (`id` INT PRIMARY KEY, `value` VARCHAR(50));';
+    const schema = parseSqlDdl(sql);
+    expect(schema.tables[0].name).toBe('my_table');
+    expect(schema.tables[0].columns[0].name).toBe('id');
+  });
+
+  it('handles CREATE TABLE IF NOT EXISTS', () => {
+    const sql = 'CREATE TABLE IF NOT EXISTS sessions (token VARCHAR(255), user_id INT);';
+    const schema = parseSqlDdl(sql);
+    expect(schema.tables[0].name).toBe('sessions');
+  });
+
+  it('parses multiple tables', () => {
+    const sql = `
+      CREATE TABLE users (id INT PRIMARY KEY, name VARCHAR(100));
+      CREATE TABLE posts (id INT PRIMARY KEY, user_id INT REFERENCES users(id), body TEXT);
+    `;
+    const schema = parseSqlDdl(sql);
+    expect(schema.tables).toHaveLength(2);
+    expect(schema.tables.map((t) => t.name)).toEqual(['users', 'posts']);
+  });
+
+  it('returns empty tables for empty input', () => {
+    expect(parseSqlDdl('').tables).toHaveLength(0);
+    expect(parseSqlDdl('-- just a comment').tables).toHaveLength(0);
+  });
+});
+
+describe('formatSchemaForPrompt', () => {
+  it('returns empty string for empty schema', () => {
+    expect(formatSchemaForPrompt({ tables: [] })).toBe('');
+  });
+
+  it('includes table names and PK markers', () => {
+    const schema = parseSqlDdl('CREATE TABLE users (id INT PRIMARY KEY, name VARCHAR(100));');
+    const output = formatSchemaForPrompt(schema);
+    expect(output).toContain('TABLE users');
+    expect(output).toContain('id');
+    expect(output).toContain('PK');
+  });
+
+  it('includes RELATIONSHIPS section when foreign keys exist', () => {
+    const sql = `
+      CREATE TABLE users (id INT PRIMARY KEY);
+      CREATE TABLE posts (id INT PRIMARY KEY, user_id INT REFERENCES users(id));
+    `;
+    const schema = parseSqlDdl(sql);
+    const output = formatSchemaForPrompt(schema);
+    expect(output).toContain('RELATIONSHIPS');
+    expect(output).toContain('posts.user_id → users.id');
+  });
+
+  it('omits RELATIONSHIPS section when no foreign keys exist', () => {
+    const schema = parseSqlDdl('CREATE TABLE users (id INT, name VARCHAR(100));');
+    const output = formatSchemaForPrompt(schema);
+    expect(output).not.toContain('RELATIONSHIPS');
+  });
+});
diff --git a/src/hooks/ai-generation/sqlParser.ts b/src/hooks/ai-generation/sqlParser.ts
new file mode 100644
index 0000000..5c43eac
--- /dev/null
+++ b/src/hooks/ai-generation/sqlParser.ts
@@ -0,0 +1,168 @@
+export interface ParsedColumn {
+    name: string;
+    type: string;
+    primaryKey: boolean;
+    nullable: boolean;
+    unique: boolean;
+}
+
+export interface ParsedForeignKey {
+    column: string;
+    refTable: string;
+    refColumn: string;
+}
+
+export interface ParsedTable {
+    name: string;
+    columns: ParsedColumn[];
+    foreignKeys: ParsedForeignKey[];
+}
+
+export interface ParsedSchema {
+    tables: ParsedTable[];
+}
+
+function stripComments(sql: string): string {
+    return sql
+        .replace(/--[^\n]*/g, '')
+        .replace(/\/\*[\s\S]*?\*\//g, '');
+}
+
+function unquoteIdentifier(s: string): string {
+    return s.replace(/^[`"[\]]|[`"[\]]$/g, '').trim();
+}
+
+function parseColumnDefs(body: string): { columns: ParsedColumn[]; foreignKeys: ParsedForeignKey[] } {
+    const columns: ParsedColumn[] = [];
+    const foreignKeys: ParsedForeignKey[] = [];
+    const tablePKs = new Set<string>();
+
+    const defs: string[] = [];
+    let depth = 0;
+    let start = 0;
+    for (let i = 0; i < body.length; i++) {
+        if (body[i] === '(') depth++;
+        else if (body[i] === ')') depth--;
+        else if (body[i] === ',' && depth === 0) {
+            defs.push(body.slice(start, i).trim());
+            start = i + 1;
+        }
+    }
+    defs.push(body.slice(start).trim());
+
+    for (const def of defs) {
+        if (!def) continue;
+        const upper = def.toUpperCase();
+
+        if (/^(CONSTRAINT\s+\S+\s+)?PRIMARY\s+KEY\s*\(/.test(upper)) {
+            const match = def.match(/PRIMARY\s+KEY\s*\(([^)]+)\)/i);
+            if (match) {
+                match[1].split(',').map((c) => unquoteIdentifier(c.trim())).forEach((c) => tablePKs.add(c));
+            }
+            continue;
+        }
+
+        if (/^(CONSTRAINT\s+\S+\s+)?FOREIGN\s+KEY\s*\(/.test(upper)) {
+            const match = def.match(/FOREIGN\s+KEY\s*\(([^)]+)\)\s+REFERENCES\s+([^\s(]+)\s*\(([^)]+)\)/i);
+            if (match) {
+                foreignKeys.push({
+                    column: unquoteIdentifier(match[1].trim()),
+                    refTable: unquoteIdentifier(match[2].trim()),
+                    refColumn: unquoteIdentifier(match[3].trim()),
+                });
+            }
+            continue;
+        }
+
+        if (/^(UNIQUE\s+)?INDEX\b|^CHECK\s*\(|^KEY\s+/.test(upper)) continue;
+
+        const parts = def.trim().split(/\s+/);
+        if (parts.length < 2) continue;
+        const colName = unquoteIdentifier(parts[0]);
+        const colType = parts[1].replace(/\([^)]*\)/, '');
+
+        const isPK = upper.includes('PRIMARY KEY');
+        const isNotNull = upper.includes('NOT NULL');
+        const isUnique = upper.includes('UNIQUE') && !isPK;
+
+        const refMatch = def.match(/REFERENCES\s+([^\s(]+)\s*\(([^)]+)\)/i);
+        if (refMatch) {
+            foreignKeys.push({
+                column: colName,
+                refTable: unquoteIdentifier(refMatch[1].trim()),
+                refColumn: unquoteIdentifier(refMatch[2].trim()),
+            });
+        }
+
+        columns.push({
+            name: colName,
+            type: colType.toUpperCase(),
+            primaryKey: isPK,
+            nullable: !isNotNull && !isPK,
+            unique: isUnique,
+        });
+    }
+
+    for (const col of columns) {
+        if (tablePKs.has(col.name)) col.primaryKey = true;
+    }
+
+    return { columns, foreignKeys };
+}
+
+export function parseSqlDdl(sql: string): ParsedSchema {
+    const clean = stripComments(sql);
+    const tables: ParsedTable[] = [];
+
+    // Match CREATE TABLE name ( ... ) with nesting support
+    const tableRegex = /CREATE\s+(?:TEMPORARY\s+)?TABLE\s+(?:IF\s+NOT\s+EXISTS\s+)?([^\s(]+)\s*\(/gi;
+    let match: RegExpExecArray | null;
+
+    while ((match = tableRegex.exec(clean)) !== null) {
+        const tableName = unquoteIdentifier(match[1]);
+        const bodyStart = match.index + match[0].length;
+
+        let depth = 1;
+        let i = bodyStart;
+        while (i < clean.length && depth > 0) {
+            if (clean[i] === '(') depth++;
+            else if (clean[i] === ')') depth--;
+            i++;
+        }
+        const body = clean.slice(bodyStart, i - 1);
+        const { columns, foreignKeys } = parseColumnDefs(body);
+
+        tables.push({ name: tableName, columns, foreignKeys });
+    }
+
+    return { tables };
+}
+
+export function formatSchemaForPrompt(schema: ParsedSchema): string {
+    if (schema.tables.length === 0) return '';
+
+    const lines: string[] = ['SCHEMA (parsed — use this exactly, do not invent columns or relationships):'];
+
+    for (const table of schema.tables) {
+        const cols = table.columns.map((c) => {
+            const tags: string[] = [];
+            if (c.primaryKey) tags.push('PK');
+            if (c.unique) tags.push('UNIQUE');
+            if (!c.nullable && !c.primaryKey) tags.push('NOT NULL');
+            return tags.length > 0 ? `${c.name} ${c.type} [${tags.join(', ')}]` : `${c.name} ${c.type}`;
+        }).join(', ');
+        lines.push(`TABLE ${table.name}: ${cols}`);
+    }
+
+    if (schema.tables.some((t) => t.foreignKeys.length > 0)) {
+        lines.push('');
+        lines.push('RELATIONSHIPS:');
+        for (const table of schema.tables) {
+            for (const fk of table.foreignKeys) {
+                lines.push(`  ${table.name}.${fk.column} → ${fk.refTable}.${fk.refColumn}`);
+            }
+        }
+    }
+
+    return lines.join('\n');
+}
diff --git a/src/hooks/ai-generation/sqlToErd.ts b/src/hooks/ai-generation/sqlToErd.ts
new file mode 100644
index 0000000..42cd801
--- /dev/null
+++ b/src/hooks/ai-generation/sqlToErd.ts
@@ -0,0 +1,22 @@
+import { formatSchemaForPrompt, parseSqlDdl } from './sqlParser';
+
+export function buildSqlToErdPrompt(sql: string): string {
+    const schema = parseSqlDdl(sql);
+    const structuredSchema = formatSchemaForPrompt(schema);
+
+    const schemaSection = structuredSchema
+        ? structuredSchema
+        : `SQL DDL (parse directly):\n\`\`\`sql\n${sql}\n\`\`\``;
+
+    return `Generate a clean Entity-Relationship Diagram from the following schema.
+
+${schemaSection}
+
+Rules:
+- Create exactly one [entity] node per table — use the exact table name as the label
+- List the key columns inside the node body (PK first, then FKs, then up to 3 other columns — omit the rest)
+- Draw one directed edge per foreign key relationship; label it with the FK column and cardinality (1:1, 1:N, or N:M)
+- Group related tables into [section] containers where it makes semantic sense (e.g. "User Domain", "Commerce")
+- Do NOT invent tables, columns, or relationships that are not in the schema above
+- Keep labels concise — table names as-is, column names as-is`;
+}
diff --git a/src/hooks/ai-generation/terraformToCloud.ts b/src/hooks/ai-generation/terraformToCloud.ts
new file mode 100644
index 0000000..8eade2e
--- /dev/null
+++ b/src/hooks/ai-generation/terraformToCloud.ts
@@ -0,0 +1,25 @@
+export type TerraformInputFormat = 'terraform' | 'kubernetes' | 'docker-compose';
+
+export const TERRAFORM_FORMAT_LABELS: Record<TerraformInputFormat, string> = {
+    terraform: 'Terraform / HCL',
+    kubernetes: 'Kubernetes YAML',
+    'docker-compose': 'Docker Compose',
+};
+
+export function buildTerraformToCloudPrompt(input: string, format: TerraformInputFormat): string {
+    const formatName = TERRAFORM_FORMAT_LABELS[format];
+    return `Analyze the following ${formatName} infrastructure-as-code and generate a cloud architecture diagram.
+
+Guidelines:
+- Map each resource/service to a node using [system] for services, [section] for namespaces/VPCs/environments
+- Use cloud provider icon names where applicable (e.g. aws-s3, aws-rds, aws-ec2, gcp-gke, azure-vm)
+- Show network topology: edges represent traffic flow, dependencies, or data movement
+- Label edges with protocol or relationship (e.g. "HTTPS", "depends_on", "ingress")
+- Group resources by cloud region, VPC, or namespace using [section] containers
+- Surface key config like ports, instance types, or replica counts as node subtitles
+
+${formatName.toUpperCase()}:
+\`\`\`
+${input}
+\`\`\``;
+}
diff --git a/src/hooks/edge-operations/utils.test.ts b/src/hooks/edge-operations/utils.test.ts
index 5e10568..3d3fb05 100644
--- a/src/hooks/edge-operations/utils.test.ts
+++ b/src/hooks/edge-operations/utils.test.ts
@@ -130,6 +130,39 @@ describe('edge operation utils', () => {
     });
   });
 
+  it('inherits architecture provider metadata when connector-creating a new node', () => {
+    const sourceArchitectureNode: FlowNode = {
+      id: 'arch-source',
+      type: 'architecture',
+      position: { x: 100, y: 100 },
+      data: {
+        label: 'FlowMind API',
+        archProvider: 'custom',
+        archProviderLabel: 'FlowMind',
+        customIconUrl: 'data:image/svg+xml;base64,abc',
+        archEnvironment: 'production',
+        archZone: 'ap-south-1',
+      },
+    };
+
+    const { newNode } = buildConnectedNode({
+      type: 'architecture',
+      position: { x: 350, y: 100 },
+      sourceNode: sourceArchitectureNode,
+      labels: {
+        noteLabel: 'Note',
+        noteSubLabel: 'Add comments here',
+      },
+    });
+
+    expect(newNode.type).toBe('architecture');
+    expect(newNode.data.archProvider).toBe('custom');
+    expect(newNode.data.archProviderLabel).toBe('FlowMind');
+    expect(newNode.data.customIconUrl).toBe('data:image/svg+xml;base64,abc');
+    expect(newNode.data.archEnvironment).toBe('production');
+    expect(newNode.data.archZone).toBe('ap-south-1');
+  });
+
   it('builds and relayouts a connected mindmap topic from the source branch', () => {
     const rootNode: FlowNode = {
       id: 'root',
diff --git a/src/hooks/edge-operations/utils.ts b/src/hooks/edge-operations/utils.ts
index 25307d4..6bdba86 100644
--- a/src/hooks/edge-operations/utils.ts
+++ b/src/hooks/edge-operations/utils.ts
@@ -1,5 +1,5 @@
 import type { Connection } from '@/lib/reactflowCompat';
-import type { FlowEdge, FlowNode, NodeData } from '@/lib/types';
+import type { EdgeData, FlowEdge, FlowNode, NodeData } from '@/lib/types';
 import { createMindmapEdge, DEFAULT_EDGE_OPTIONS, NODE_HEIGHT, NODE_WIDTH } from '@/constants';
 import { getNodeHandleIdForSide, handleIdToSide, type HandleSide } from '@/lib/nodeHandles';
 import { NODE_DEFAULTS } from '@/theme';
@@ -38,6 +38,12 @@ interface BuildConnectedNodeParams {
     position: { x: number; y: number };
     shape?: NodeData['shape'];
     labels: AddedNodeContentLabels;
+    sourceNode?: FlowNode;
+}
+
+export interface ConnectedEdgePreset {
+    label?: string;
+    data?: EdgeData;
 }
 
 interface BuildConnectedMindmapTopicParams {
@@ -149,6 +155,7 @@ export function buildConnectedNode({
     position,
     shape,
     labels,
+    sourceNode,
 }: BuildConnectedNodeParams): { newNode: FlowNode; isGenericShape: boolean } {
     const id = createId();
     const defaultStyle = NODE_DEFAULTS[type] || NODE_DEFAULTS.process;
@@ -176,6 +183,77 @@ export function buildConnectedNode({
         };
     }
 
+    if (type === 'class') {
+        return {
+            newNode: {
+                id,
+                type: 'class',
+                position,
+                data: {
+                    label: 'ClassName',
+                    color: 'white',
+                    shape: 'rectangle',
+                    classAttributes: ['+ attribute: Type'],
+                    classMethods: ['+ method(): void'],
+                },
+            },
+            isGenericShape: false,
+        };
+    }
+
+    if (type === 'er_entity') {
+        return {
+            newNode: {
+                id,
+                type: 'er_entity',
+                position,
+                data: {
+                    label: 'EntityName',
+                    color: 'white',
+                    shape: 'rectangle',
+                    erFields: ['id: INT PK', 'name: VARCHAR'],
+                },
+            },
+            isGenericShape: false,
+        };
+    }
+
+    if (type === 'architecture') {
+        const sourceProvider = sourceNode?.data?.archProvider || 'custom';
+        return {
+            newNode: {
+                id,
+                type: 'architecture',
+                position,
+                data: {
+                    label: 'New Service',
+                    color: 'slate',
+                    shape: 'rectangle',
+                    icon: 'Server',
+                    archProvider: sourceProvider,
+                    archProviderLabel: sourceProvider === 'custom'
+                        ? sourceNode?.data?.archProviderLabel
+                        : undefined,
+                    archResourceType: 'service',
+                    archEnvironment: sourceNode?.data?.archEnvironment || 'default',
+                    archBoundaryId: sourceNode?.data?.archBoundaryId,
+                    archZone: sourceNode?.data?.archZone,
+                    archTrustDomain: sourceNode?.data?.archTrustDomain,
+                    customIconUrl: sourceProvider === 'custom'
+                        ? sourceNode?.data?.customIconUrl
+                        : undefined,
+                    archIconPackId: sourceProvider !== 'custom'
+                        ? sourceNode?.data?.archIconPackId
+                        : undefined,
+                    archIconShapeId: sourceProvider !== 'custom'
+                        ? sourceNode?.data?.archIconShapeId
+                        : undefined,
+                },
+            },
+            isGenericShape: false,
+        };
+    }
+
     return {
         newNode: createGenericShapeNode(id, position, {
             type,
@@ -197,7 +275,8 @@ export function buildConnectedEdge(
     sourceId: string,
     targetId: string,
     sourceHandle: string | null,
-    targetHandle: string | null
+    targetHandle: string | null,
+    edgePreset?: ConnectedEdgePreset
 ): FlowEdge {
     return {
         id: `e-${sourceId}-${targetId}`,
@@ -205,6 +284,11 @@ export function buildConnectedEdge(
         sourceHandle,
         target: targetId,
         targetHandle,
+        data: {
+            connectionType: sourceHandle || targetHandle ? 'fixed' : 'dynamic',
+            ...(edgePreset?.data ?? {}),
+        },
+        ...(edgePreset?.label ? { label: edgePreset.label } : {}),
         ...DEFAULT_EDGE_OPTIONS,
     };
 }
diff --git a/src/hooks/flow-editor-actions/exportHandlers.test.ts b/src/hooks/flow-editor-actions/exportHandlers.test.ts
index 6f63651..2b868c9 100644
--- a/src/hooks/flow-editor-actions/exportHandlers.test.ts
+++ b/src/hooks/flow-editor-actions/exportHandlers.test.ts
@@ -43,7 +43,6 @@ function createTranslator(fn: (key: string, options?: Record<string, unknown>) =
 describe('exportHandlers', () => {
   beforeEach(() => {
     vi.restoreAllMocks();
-    vi.stubGlobal('alert', vi.fn());
     Object.assign(navigator, {
       clipboard: {
         writeText: vi.fn().mockResolvedValue(undefined),
@@ -51,18 +50,21 @@ describe('exportHandlers', () => {
     });
   });
 
-  it('copies Mermaid and PlantUML exports and alerts success', async () => {
+  it('copies Mermaid and PlantUML exports and shows toast feedback', async () => {
     const t = createTranslator((key: string) => key);
     const nodes = [createNode('n1')];
     const edges = [createEdge('e1', 'n1', 'n1')];
+    const addToast = vi.fn();
 
-    await exportMermaidToClipboard({ nodes, edges, t });
-    await exportPlantUMLToClipboard({ nodes, edges, t });
+    await exportMermaidToClipboard({ nodes, edges, t, addToast });
+    await exportPlantUMLToClipboard({ nodes, edges, t, addToast });
 
     expect(navigator.clipboard.writeText).toHaveBeenNthCalledWith(1, 'mermaid-export');
     expect(navigator.clipboard.writeText).toHaveBeenNthCalledWith(2, 'plantuml-export');
-    expect(alert).toHaveBeenCalledWith('flowEditor.mermaidCopied');
-    expect(alert).toHaveBeenCalledWith('flowEditor.plantUMLCopied');
+    expect(addToast).toHaveBeenCalledWith('Copying Mermaid…', 'info');
+    expect(addToast).toHaveBeenCalledWith('flowEditor.mermaidCopied', 'success');
+    expect(addToast).toHaveBeenCalledWith('Copying PlantUML…', 'info');
+    expect(addToast).toHaveBeenCalledWith('flowEditor.plantUMLCopied', 'success');
   });
 
   it('copies OpenFlow DSL and emits warning toast for skipped edges', async () => {
diff --git a/src/hooks/flow-editor-actions/exportHandlers.ts b/src/hooks/flow-editor-actions/exportHandlers.ts
index 2f0e3dc..6624d7f 100644
--- a/src/hooks/flow-editor-actions/exportHandlers.ts
+++ b/src/hooks/flow-editor-actions/exportHandlers.ts
@@ -1,16 +1,33 @@
 import type { TFunction } from 'i18next';
+import { createLogger } from '@/lib/logger';
 import type { FlowEdge, FlowNode } from '@/lib/types';
 import { toMermaid, toPlantUML } from '@/services/exportService';
 import { toFigmaSVG } from '@/services/figmaExportService';
 import { getOpenFlowDSLExportDiagnostics, toOpenFlowDSL } from '@/services/openFlowDSLExporter';
 import type { ExportSerializationMode } from '@/services/canonicalSerialization';
+import { buildExportFileName, buildVariantExportFileName } from '@/lib/exportFileName';
 import { copyTextToClipboard } from './helpers';
 
+const logger = createLogger({ scope: 'exportHandlers' });
+
 type ToastType = 'success' | 'error' | 'info' | 'warning';
 
 interface ExportFlowTextParams {
     text: string;
     successMessage: string;
+    processingMessage: string;
+    errorMessage: string;
+    addToast: (message: string, type?: ToastType, duration?: number) => void;
+}
+
+interface DownloadTextFileParams {
+    text: string;
+    fileName: string;
+    mimeType?: string;
+    processingMessage: string;
+    successMessage: string;
+    errorMessage: string;
+    addToast: (message: string, type?: ToastType, duration?: number) => void;
 }
 
 interface ExportFlowDiagramParams {
@@ -22,30 +39,78 @@ interface ExportFlowDiagramParams {
 interface ExportOpenFlowDSLParams extends ExportFlowDiagramParams {
     addToast: (message: string, type?: ToastType, duration?: number) => void;
     exportSerializationMode: ExportSerializationMode;
+    baseFileName?: string;
 }
 
 interface ExportFigmaParams extends ExportFlowDiagramParams {
     addToast: (message: string, type?: ToastType, duration?: number) => void;
+    baseFileName?: string;
 }
 
 async function exportFlowTextToClipboard({
     text,
     successMessage,
+    processingMessage,
+    errorMessage,
+    addToast,
 }: ExportFlowTextParams): Promise<void> {
+    addToast(processingMessage, 'info');
     const copied = await copyTextToClipboard(text);
     if (copied) {
-        alert(successMessage);
+        addToast(successMessage, 'success');
+        return;
     }
+
+    addToast(errorMessage, 'error');
+}
+
+function downloadTextFile({
+    text,
+    fileName,
+    mimeType = 'text/plain;charset=utf-8',
+    processingMessage,
+    successMessage,
+    addToast,
+}: DownloadTextFileParams): void {
+    addToast(processingMessage, 'info');
+    const blob = new Blob([text], { type: mimeType });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.download = fileName;
+    link.href = url;
+    link.click();
+    URL.revokeObjectURL(url);
+    addToast(successMessage, 'success');
 }
 
 export async function exportMermaidToClipboard({
     nodes,
     edges,
     t,
-}: ExportFlowDiagramParams): Promise<void> {
+    addToast,
+}: ExportFlowDiagramParams & Pick<ExportOpenFlowDSLParams, 'addToast'>): Promise<void> {
     await exportFlowTextToClipboard({
         text: toMermaid(nodes, edges),
         successMessage: t('flowEditor.mermaidCopied'),
+        processingMessage: 'Copying Mermaid…',
+        errorMessage: 'Failed to copy Mermaid.',
+        addToast,
+    });
+}
+
+export function downloadMermaidToFile({
+    nodes,
+    edges,
+    addToast,
+    baseFileName,
+}: Omit<ExportFlowDiagramParams, 't'> & Pick<ExportOpenFlowDSLParams, 'addToast' | 'baseFileName'>): void {
+    downloadTextFile({
+        text: toMermaid(nodes, edges),
+        fileName: buildExportFileName(baseFileName, 'mmd'),
+        processingMessage: 'Preparing Mermaid download…',
+        successMessage: 'Mermaid downloaded.',
+        errorMessage: 'Failed to download Mermaid.',
+        addToast,
     });
 }
 
@@ -53,10 +118,30 @@ export async function exportPlantUMLToClipboard({
     nodes,
     edges,
     t,
-}: ExportFlowDiagramParams): Promise<void> {
+    addToast,
+}: ExportFlowDiagramParams & Pick<ExportOpenFlowDSLParams, 'addToast'>): Promise<void> {
     await exportFlowTextToClipboard({
         text: toPlantUML(nodes, edges),
         successMessage: t('flowEditor.plantUMLCopied'),
+        processingMessage: 'Copying PlantUML…',
+        errorMessage: 'Failed to copy PlantUML.',
+        addToast,
+    });
+}
+
+export function downloadPlantUMLToFile({
+    nodes,
+    edges,
+    addToast,
+    baseFileName,
+}: Omit<ExportFlowDiagramParams, 't'> & Pick<ExportOpenFlowDSLParams, 'addToast' | 'baseFileName'>): void {
+    downloadTextFile({
+        text: toPlantUML(nodes, edges),
+        fileName: buildExportFileName(baseFileName, 'puml'),
+        processingMessage: 'Preparing PlantUML download…',
+        successMessage: 'PlantUML downloaded.',
+        errorMessage: 'Failed to download PlantUML.',
+        addToast,
     });
 }
 
@@ -67,6 +152,7 @@ export async function exportOpenFlowDSLToClipboard({
     t,
     exportSerializationMode,
 }: ExportOpenFlowDSLParams): Promise<void> {
+    addToast('Copying OpenFlow DSL…', 'info');
     const exportDiagnostics = getOpenFlowDSLExportDiagnostics(nodes, edges);
     const text = toOpenFlowDSL(nodes, edges, { mode: exportSerializationMode });
     const copied = await copyTextToClipboard(text);
@@ -85,6 +171,23 @@ export async function exportOpenFlowDSLToClipboard({
     addToast(t('flowEditor.dslCopyFailed'), 'error');
 }
 
+export function downloadOpenFlowDSLToFile({
+    nodes,
+    edges,
+    exportSerializationMode,
+    addToast,
+    baseFileName,
+}: Pick<ExportOpenFlowDSLParams, 'nodes' | 'edges' | 'exportSerializationMode' | 'addToast' | 'baseFileName'>): void {
+    downloadTextFile({
+        text: toOpenFlowDSL(nodes, edges, { mode: exportSerializationMode }),
+        fileName: buildExportFileName(baseFileName, 'ofk'),
+        processingMessage: 'Preparing OpenFlow DSL download…',
+        successMessage: 'OpenFlow DSL downloaded.',
+        errorMessage: 'Failed to download OpenFlow DSL.',
+        addToast,
+    });
+}
+
 export async function exportFigmaToClipboard({
     nodes,
     edges,
@@ -92,12 +195,38 @@ export async function exportFigmaToClipboard({
     t,
 }: ExportFigmaParams): Promise<void> {
     try {
+        addToast('Copying Figma SVG…', 'info');
         const svg = await toFigmaSVG(nodes, edges);
         await navigator.clipboard.writeText(svg);
         addToast(t('flowEditor.figmaCopied'), 'success');
     } catch (error: unknown) {
         const message = error instanceof Error ? error.message : String(error);
-        console.error('Failed to copy Figma SVG:', error);
+        logger.error('Failed to copy Figma SVG.', { error });
+        addToast(t('flowEditor.figmaExportFailed', { message }), 'error');
+    }
+}
+
+export async function downloadFigmaToFile({
+    nodes,
+    edges,
+    addToast,
+    t,
+    baseFileName,
+}: ExportFigmaParams): Promise<void> {
+    try {
+        const svg = await toFigmaSVG(nodes, edges);
+        downloadTextFile({
+            text: svg,
+            fileName: buildVariantExportFileName(baseFileName, 'figma', 'svg'),
+            mimeType: 'image/svg+xml;charset=utf-8',
+            processingMessage: 'Preparing Figma SVG download…',
+            successMessage: 'Figma SVG downloaded.',
+            errorMessage: 'Failed to download Figma SVG.',
+            addToast,
+        });
+    } catch (error: unknown) {
+        const message = error instanceof Error ? error.message : String(error);
+        logger.error('Failed to download Figma SVG.', { error });
         addToast(t('flowEditor.figmaExportFailed', { message }), 'error');
     }
 }
diff --git a/src/hooks/flow-editor-actions/layoutHandlers.ts b/src/hooks/flow-editor-actions/layoutHandlers.ts
index de1404b..b47f597 100644
--- a/src/hooks/flow-editor-actions/layoutHandlers.ts
+++ b/src/hooks/flow-editor-actions/layoutHandlers.ts
@@ -61,11 +61,23 @@ export function relayoutAllMindmapComponents(nodes: FlowNode[], edges: FlowEdge[
     };
 }
 
+function getLayoutHintsForDiagramType(diagramType: string | undefined): Partial<Pick<AutoLayoutParams, 'algorithm' | 'direction'>> {
+    switch (diagramType) {
+        case 'architecture':
+        case 'infrastructure':
+            return { direction: 'LR' };
+        case 'org-chart':
+            return { algorithm: 'mrtree', direction: 'TB' };
+        default:
+            return {};
+    }
+}
+
 export async function getAutoLayoutResult({
     nodes,
     edges,
-    direction = 'TB',
-    algorithm = 'layered',
+    direction,
+    algorithm,
     spacing = 'normal',
     diagramType,
 }: AutoLayoutParams): Promise<AutoLayoutResult> {
@@ -73,10 +85,11 @@ export async function getAutoLayoutResult({
         return relayoutAllMindmapComponents(nodes, edges);
     }
 
+    const hints = getLayoutHintsForDiagramType(diagramType);
     const { getElkLayout } = await import('@/services/elkLayout');
     return getElkLayout(nodes, edges, {
-        direction,
-        algorithm,
+        direction: direction ?? hints.direction ?? 'TB',
+        algorithm: algorithm ?? hints.algorithm ?? 'layered',
         spacing,
         diagramType,
     });
diff --git a/src/hooks/flow-export/diagramDocumentTransfer.test.ts b/src/hooks/flow-export/diagramDocumentTransfer.test.ts
new file mode 100644
index 0000000..1fb814b
--- /dev/null
+++ b/src/hooks/flow-export/diagramDocumentTransfer.test.ts
@@ -0,0 +1,55 @@
+import { describe, expect, it } from 'vitest';
+import type { FlowEdge, FlowNode } from '@/lib/types';
+import { buildDiagramDocumentJson, importDiagramDocumentJson } from './diagramDocumentTransfer';
+
+function createNode(id: string): FlowNode {
+  return {
+    id,
+    type: 'process',
+    position: { x: 0, y: 0 },
+    data: { label: id },
+  } as FlowNode;
+}
+
+function createEdge(id: string, source: string, target: string): FlowEdge {
+  return { id, source, target } as FlowEdge;
+}
+
+describe('diagramDocumentTransfer', () => {
+  it('builds diagram document json from the current graph', () => {
+    const json = buildDiagramDocumentJson({
+      nodes: [createNode('n1')],
+      edges: [createEdge('e1', 'n1', 'n1')],
+      exportSerializationMode: 'deterministic',
+      activeTab: { diagramType: 'flowchart' },
+    });
+
+    const parsed = JSON.parse(json) as { nodes: FlowNode[]; edges: FlowEdge[]; diagramType: string };
+    expect(parsed.diagramType).toBe('flowchart');
+    expect(parsed.nodes).toHaveLength(1);
+    expect(parsed.edges).toHaveLength(1);
+  });
+
+  it('imports diagram document json into composed nodes and edges', async () => {
+    const json = buildDiagramDocumentJson({
+      nodes: [createNode('n1')],
+      edges: [createEdge('e1', 'n1', 'n1')],
+      exportSerializationMode: 'deterministic',
+      activeTab: { diagramType: 'flowchart' },
+    });
+
+    const result = await importDiagramDocumentJson({
+      json,
+      importStart: performance.now(),
+    });
+
+    expect(result.ok).toBe(true);
+    if (!result.ok) {
+      return;
+    }
+
+    expect(result.nodes).toHaveLength(1);
+    expect(result.edges).toHaveLength(1);
+    expect(result.outcome.status).toBe('success');
+  });
+});
diff --git a/src/hooks/flow-export/diagramDocumentTransfer.ts b/src/hooks/flow-export/diagramDocumentTransfer.ts
new file mode 100644
index 0000000..543f48f
--- /dev/null
+++ b/src/hooks/flow-export/diagramDocumentTransfer.ts
@@ -0,0 +1,105 @@
+import { orderGraphForSerialization } from '@/services/canonicalSerialization';
+import type { ExportSerializationMode } from '@/services/canonicalSerialization';
+import { createDiagramDocument, parseDiagramDocumentImport } from '@/services/diagramDocument';
+import { composeDiagramForDisplay } from '@/services/composeDiagramForDisplay';
+import {
+  buildImportFidelityReport,
+  mapErrorToIssue,
+  mapWarningToIssue,
+  persistLatestImportReport,
+} from '@/services/importFidelity';
+import { createImportReportOutcome, type OperationOutcome } from '@/services/operationFeedback';
+import type { FlowEdge, FlowNode, PlaybackState, DiagramType } from '@/lib/types';
+
+interface ActiveTabDocumentState {
+  diagramType?: DiagramType;
+  playback?: PlaybackState;
+}
+
+export function buildDiagramDocumentJson(params: {
+  nodes: FlowNode[];
+  edges: FlowEdge[];
+  exportSerializationMode: ExportSerializationMode;
+  activeTab?: ActiveTabDocumentState;
+}): string {
+  const { nodes, edges, exportSerializationMode, activeTab } = params;
+  const { nodes: orderedNodes, edges: orderedEdges } = orderGraphForSerialization(
+    nodes,
+    edges,
+    exportSerializationMode,
+  );
+  const document = createDiagramDocument(orderedNodes, orderedEdges, activeTab?.diagramType, {
+    playback: activeTab?.playback,
+    extendedDocumentModel: Boolean(activeTab?.playback),
+  });
+
+  return JSON.stringify(document, null, 2);
+}
+
+export async function importDiagramDocumentJson(params: {
+  json: string;
+  importStart: number;
+}): Promise<
+  | {
+      ok: true;
+      nodes: FlowNode[];
+      edges: FlowEdge[];
+      diagramType: DiagramType | undefined;
+      playback: PlaybackState | undefined;
+      warnings: string[];
+      outcome: OperationOutcome;
+    }
+  | {
+      ok: false;
+      outcome: OperationOutcome;
+    }
+> {
+  const { json, importStart } = params;
+
+  try {
+    const raw = JSON.parse(json);
+    const parsed = parseDiagramDocumentImport(raw);
+    const { nodes, edges } = await composeDiagramForDisplay(parsed.nodes, parsed.edges, {
+      diagramType: parsed.diagramType,
+    });
+    const report = buildImportFidelityReport({
+      source: 'json',
+      nodeCount: nodes.length,
+      edgeCount: edges.length,
+      elapsedMs: Math.round(performance.now() - importStart),
+      issues: parsed.warnings.map((warning) => mapWarningToIssue(warning)),
+    });
+
+    persistLatestImportReport(report);
+    const outcome = createImportReportOutcome(report, 'Diagram loaded successfully!');
+
+    return {
+      ok: true,
+      nodes,
+      edges,
+      diagramType: parsed.diagramType,
+      playback: parsed.playback,
+      warnings: parsed.warnings,
+      outcome,
+    };
+  } catch (error) {
+    const errorMessage = error instanceof Error
+      ? error.message
+      : 'Failed to parse JSON file. Please check the format.';
+    const report = buildImportFidelityReport({
+      source: 'json',
+      nodeCount: 0,
+      edgeCount: 0,
+      elapsedMs: Math.round(performance.now() - importStart),
+      issues: [mapErrorToIssue(errorMessage)],
+    });
+
+    persistLatestImportReport(report);
+    const outcome = createImportReportOutcome(report, errorMessage);
+
+    return {
+      ok: false,
+      outcome,
+    };
+  }
+}
diff --git a/src/hooks/flow-export/exportCapture.ts b/src/hooks/flow-export/exportCapture.ts
new file mode 100644
index 0000000..0f0efdb
--- /dev/null
+++ b/src/hooks/flow-export/exportCapture.ts
@@ -0,0 +1,270 @@
+import type React from 'react';
+import { getCompatibleNodesBounds } from '@/lib/reactflowCompat';
+import type { FlowNode } from '@/lib/types';
+import { encodeGif } from '@/services/gifEncoder';
+
+export type ExportImageFormat = 'png' | 'jpeg';
+
+export interface ExportCaptureConfig {
+  maxDimension?: number;
+  pixelRatio?: number;
+}
+
+export interface CapturedFrame {
+  dataUrl: string;
+  delayMs: number;
+}
+
+export interface DecodedFrame {
+  frame: CapturedFrame;
+  image: CanvasImageSource;
+}
+
+export interface ExportCaptureOptions {
+  width: number;
+  height: number;
+  options: {
+    backgroundColor: string | null;
+    width: number;
+    height: number;
+    style: {
+      transform: string;
+      width: string;
+      height: string;
+    };
+    pixelRatio: number;
+    skipFonts: boolean;
+    filter: (node: HTMLElement) => boolean;
+  };
+}
+
+const EXPORT_CAPTURE_PADDING = 80;
+const DEFAULT_EXPORT_WIDTH = 800;
+const DEFAULT_EXPORT_HEIGHT = 600;
+const EXPORT_FILTERED_CLASS_NAMES = [
+  'react-flow__controls',
+  'react-flow__minimap',
+  'react-flow__attribution',
+  'react-flow__background',
+] as const;
+
+export function wait(ms: number): Promise<void> {
+  return new Promise((resolve) => {
+    window.setTimeout(resolve, ms);
+  });
+}
+
+export function waitForAnimationFrame(): Promise<void> {
+  return new Promise((resolve) => {
+    window.requestAnimationFrame(() => resolve());
+  });
+}
+
+export async function waitForExportRender(minDelayMs = 0): Promise<void> {
+  if (minDelayMs > 0) {
+    await wait(minDelayMs);
+  }
+
+  await waitForAnimationFrame();
+  await waitForAnimationFrame();
+}
+
+export async function waitForExportSurface(
+  surfaceRef: React.RefObject<HTMLDivElement | null> | undefined,
+  attempts = 8,
+): Promise<HTMLDivElement | null> {
+  for (let attempt = 0; attempt < attempts; attempt += 1) {
+    if (surfaceRef?.current) {
+      return surfaceRef.current;
+    }
+
+    await waitForExportRender(8);
+  }
+
+  return surfaceRef?.current ?? null;
+}
+
+export function createDownload(blob: Blob, fileName: string): void {
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement('a');
+  link.download = fileName;
+  link.href = url;
+  link.click();
+  URL.revokeObjectURL(url);
+}
+
+async function copyBlobToClipboard(blob: Blob): Promise<void> {
+  if (!navigator.clipboard?.write || typeof ClipboardItem === 'undefined') {
+    throw new Error('Clipboard image copy is not supported in this browser.');
+  }
+
+  await navigator.clipboard.write([new ClipboardItem({ [blob.type]: blob })]);
+}
+
+export async function copyDataUrlToClipboard(dataUrl: string): Promise<void> {
+  const response = await fetch(dataUrl);
+  const blob = await response.blob();
+  await copyBlobToClipboard(blob);
+}
+
+function shouldIncludeExportNode(node: HTMLElement): boolean {
+  if (!node.classList) {
+    return true;
+  }
+
+  return !EXPORT_FILTERED_CLASS_NAMES.some((className) => node.classList.contains(className));
+}
+
+export function createExportOptions(
+  nodes: FlowNode[],
+  format: ExportImageFormat,
+  config?: ExportCaptureConfig,
+): ExportCaptureOptions {
+  const bounds = getCompatibleNodesBounds(nodes);
+  const rawWidth = (bounds.width || DEFAULT_EXPORT_WIDTH) + EXPORT_CAPTURE_PADDING * 2;
+  const rawHeight = (bounds.height || DEFAULT_EXPORT_HEIGHT) + EXPORT_CAPTURE_PADDING * 2;
+  const longestSide = Math.max(rawWidth, rawHeight);
+  const maxDimension = config?.maxDimension ?? longestSide;
+  const scale = longestSide > maxDimension ? maxDimension / longestSide : 1;
+  const width = Math.max(1, Math.round(rawWidth * scale));
+  const height = Math.max(1, Math.round(rawHeight * scale));
+
+  return {
+    width,
+    height,
+    options: {
+      backgroundColor: format === 'png' ? null : '#ffffff',
+      width,
+      height,
+      style: {
+        transform: `translate(${-bounds.x + EXPORT_CAPTURE_PADDING}px, ${-bounds.y + EXPORT_CAPTURE_PADDING}px) scale(${scale})`,
+        width: `${rawWidth}px`,
+        height: `${rawHeight}px`,
+      },
+      pixelRatio: config?.pixelRatio ?? 3,
+      skipFonts: true,
+      filter: shouldIncludeExportNode,
+    },
+  };
+}
+
+function loadImage(dataUrl: string): Promise<HTMLImageElement> {
+  return new Promise((resolve, reject) => {
+    const image = new Image();
+    image.onload = () => resolve(image);
+    image.onerror = () => reject(new Error('Failed to decode exported frame.'));
+    image.src = dataUrl;
+  });
+}
+
+async function decodeCapturedFrame(dataUrl: string): Promise<CanvasImageSource> {
+  if (typeof window.createImageBitmap === 'function') {
+    const response = await fetch(dataUrl);
+    const blob = await response.blob();
+    return window.createImageBitmap(blob);
+  }
+
+  return loadImage(dataUrl);
+}
+
+export async function decodeCapturedFrames(frames: CapturedFrame[]): Promise<DecodedFrame[]> {
+  return Promise.all(
+    frames.map(async (frame) => ({
+      frame,
+      image: await decodeCapturedFrame(frame.dataUrl),
+    })),
+  );
+}
+
+function createExportCanvas(width: number, height: number): {
+  canvas: HTMLCanvasElement;
+  context: CanvasRenderingContext2D;
+} {
+  const canvas = document.createElement('canvas');
+  canvas.width = width;
+  canvas.height = height;
+  const context = canvas.getContext('2d');
+
+  if (!context) {
+    throw new Error('Canvas 2D context is unavailable.');
+  }
+
+  return { canvas, context };
+}
+
+function renderDecodedFrame(
+  context: CanvasRenderingContext2D,
+  width: number,
+  height: number,
+  image: CanvasImageSource,
+  backgroundColor?: string,
+): void {
+  if (backgroundColor) {
+    context.fillStyle = backgroundColor;
+    context.fillRect(0, 0, width, height);
+  } else {
+    context.clearRect(0, 0, width, height);
+  }
+
+  context.drawImage(image, 0, 0, width, height);
+}
+
+export async function encodeGifFromFrames(params: {
+  frames: DecodedFrame[];
+  width: number;
+  height: number;
+  backgroundColor?: string;
+}): Promise<Blob> {
+  const { frames, width, height, backgroundColor } = params;
+  const { context } = createExportCanvas(width, height);
+  const gifFrames = [];
+
+  for (const { frame, image } of frames) {
+    renderDecodedFrame(context, width, height, image, backgroundColor);
+    gifFrames.push({
+      imageData: context.getImageData(0, 0, width, height),
+      delayMs: frame.delayMs,
+    });
+  }
+
+  return encodeGif(gifFrames);
+}
+
+export async function encodeVideoFromFrames(params: {
+  frames: DecodedFrame[];
+  width: number;
+  height: number;
+  fps: number;
+  mimeType: string;
+  backgroundColor?: string;
+}): Promise<Blob> {
+  const { frames, width, height, fps, mimeType, backgroundColor } = params;
+  const { canvas, context } = createExportCanvas(width, height);
+  const stream = canvas.captureStream(fps);
+  const recorder = new MediaRecorder(stream, { mimeType });
+  const chunks: BlobPart[] = [];
+
+  recorder.ondataavailable = (event) => {
+    if (event.data.size > 0) {
+      chunks.push(event.data);
+    }
+  };
+
+  const stopped = new Promise<Blob>((resolve) => {
+    recorder.onstop = () => resolve(new Blob(chunks, { type: mimeType }));
+  });
+
+  recorder.start();
+  const frameDurationMs = Math.max(1, Math.round(1000 / fps));
+
+  for (const { frame, image } of frames) {
+    const repeatCount = Math.max(1, Math.round(frame.delayMs / frameDurationMs));
+    for (let repeatIndex = 0; repeatIndex < repeatCount; repeatIndex += 1) {
+      renderDecodedFrame(context, width, height, image, backgroundColor);
+      await wait(frameDurationMs);
+    }
+  }
+
+  recorder.stop();
+  return stopped;
+}
diff --git a/src/hooks/flowExportViewport.test.ts b/src/hooks/flowExportViewport.test.ts
new file mode 100644
index 0000000..e2bc2ba
--- /dev/null
+++ b/src/hooks/flowExportViewport.test.ts
@@ -0,0 +1,29 @@
+import { describe, expect, it } from 'vitest';
+import { resolveFlowExportViewport } from './flowExportViewport';
+
+describe('resolveFlowExportViewport', () => {
+  it('reports when the canvas wrapper is unavailable', () => {
+    expect(resolveFlowExportViewport(null)).toEqual({
+      viewport: null,
+      message: 'The canvas is not mounted yet. Try again after the editor finishes loading.',
+    });
+  });
+
+  it('reports when the viewport element is missing', () => {
+    const root = document.createElement('div');
+
+    expect(resolveFlowExportViewport(root)).toEqual({
+      viewport: null,
+      message: 'The canvas viewport could not be found. Try fitting the view or reopening the diagram.',
+    });
+  });
+
+  it('returns the viewport element when present', () => {
+    const root = document.createElement('div');
+    const viewport = document.createElement('div');
+    viewport.className = 'react-flow__viewport';
+    root.appendChild(viewport);
+
+    expect(resolveFlowExportViewport(root)).toEqual({ viewport });
+  });
+});
diff --git a/src/hooks/flowExportViewport.ts b/src/hooks/flowExportViewport.ts
new file mode 100644
index 0000000..10767ca
--- /dev/null
+++ b/src/hooks/flowExportViewport.ts
@@ -0,0 +1,23 @@
+export interface FlowExportViewportResult {
+  viewport: HTMLElement | null;
+  message?: string;
+}
+
+export function resolveFlowExportViewport(root: HTMLDivElement | null): FlowExportViewportResult {
+  if (!root) {
+    return {
+      viewport: null,
+      message: 'The canvas is not mounted yet. Try again after the editor finishes loading.',
+    };
+  }
+
+  const viewport = root.querySelector<HTMLElement>('.react-flow__viewport');
+  if (!viewport) {
+    return {
+      viewport: null,
+      message: 'The canvas viewport could not be found. Try fitting the view or reopening the diagram.',
+    };
+  }
+
+  return { viewport };
+}
diff --git a/src/hooks/mindmapTopicActionRequest.ts b/src/hooks/mindmapTopicActionRequest.ts
index 2495bc6..fd4bc29 100644
--- a/src/hooks/mindmapTopicActionRequest.ts
+++ b/src/hooks/mindmapTopicActionRequest.ts
@@ -1,9 +1,10 @@
 import { useEffect } from 'react';
+import { LEGACY_EVENT_NAMES } from '@/lib/legacyBranding';
 
 export type MindmapTopicActionType = 'child' | 'sibling';
 export type MindmapTopicSide = 'left' | 'right' | null;
 
-const MINDMAP_TOPIC_ACTION_REQUEST_EVENT = 'flowmind:mindmap-topic-action-request';
+const MINDMAP_TOPIC_ACTION_REQUEST_EVENT = LEGACY_EVENT_NAMES.mindmapTopicActionRequest;
 
 interface MindmapTopicActionRequestDetail {
   nodeId: string;
diff --git a/src/hooks/node-operations/useArchitectureNodeOperations.test.ts b/src/hooks/node-operations/useArchitectureNodeOperations.test.ts
new file mode 100644
index 0000000..486cf40
--- /dev/null
+++ b/src/hooks/node-operations/useArchitectureNodeOperations.test.ts
@@ -0,0 +1,64 @@
+import { renderHook } from '@testing-library/react';
+import { describe, expect, it, vi, beforeEach } from 'vitest';
+import { useFlowStore } from '../../store';
+import { useArchitectureNodeOperations } from './useArchitectureNodeOperations';
+
+vi.mock('../../store', () => ({
+    useFlowStore: Object.assign(vi.fn(), {
+        getState: vi.fn(),
+    }),
+}));
+
+const mockSetNodes = vi.fn();
+const mockSetEdges = vi.fn();
+const mockSetSelectedNodeId = vi.fn();
+const mockState = {
+    nodes: [],
+    edges: [],
+    activeTabId: 'tab-1',
+    activeLayerId: 'layer-1',
+    viewSettings: { smartRoutingEnabled: false },
+    updateTab: vi.fn(),
+};
+
+beforeEach(() => {
+    vi.mocked(useFlowStore).mockReturnValue({ setNodes: mockSetNodes, setEdges: mockSetEdges, setSelectedNodeId: mockSetSelectedNodeId } as never);
+    vi.mocked(useFlowStore.getState).mockReturnValue(mockState as never);
+});
+
+describe('useArchitectureNodeOperations', () => {
+    const recordHistory = vi.fn();
+
+    it('handleAddArchitectureService returns false if node not found', () => {
+        const { result } = renderHook(() => useArchitectureNodeOperations(recordHistory));
+        expect(result.current.handleAddArchitectureService('missing')).toBe(false);
+    });
+
+    it('handleAddArchitectureService returns false if node type is not architecture', () => {
+        vi.mocked(useFlowStore.getState).mockReturnValue({
+            ...mockState,
+            nodes: [{ id: 'n1', type: 'process', position: { x: 0, y: 0 }, data: {} }],
+        } as never);
+        const { result } = renderHook(() => useArchitectureNodeOperations(recordHistory));
+        expect(result.current.handleAddArchitectureService('n1')).toBe(false);
+    });
+
+    it('handleCreateArchitectureBoundary returns false if node not found', () => {
+        const { result } = renderHook(() => useArchitectureNodeOperations(recordHistory));
+        expect(result.current.handleCreateArchitectureBoundary('missing')).toBe(false);
+    });
+
+    it('handleApplyArchitectureTemplate returns false if template not found', () => {
+        vi.mocked(useFlowStore.getState).mockReturnValue({
+            ...mockState,
+            nodes: [{ id: 'n1', type: 'architecture', position: { x: 0, y: 0 }, data: { label: 'A' } }],
+        } as never);
+        const { result } = renderHook(() => useArchitectureNodeOperations(recordHistory));
+        expect(result.current.handleApplyArchitectureTemplate('n1', 'nonexistent-template' as never)).toBe(false);
+    });
+
+    it('handleConvertEntitySelectionToClassDiagram returns false when no ER nodes selected', () => {
+        const { result } = renderHook(() => useArchitectureNodeOperations(recordHistory));
+        expect(result.current.handleConvertEntitySelectionToClassDiagram()).toBe(false);
+    });
+});
diff --git a/src/hooks/node-operations/useArchitectureNodeOperations.ts b/src/hooks/node-operations/useArchitectureNodeOperations.ts
new file mode 100644
index 0000000..7179a5a
--- /dev/null
+++ b/src/hooks/node-operations/useArchitectureNodeOperations.ts
@@ -0,0 +1,182 @@
+import { useCallback } from 'react';
+import type { FlowNode } from '@/lib/types';
+import { setNodeParent } from '@/lib/nodeParent';
+import { useFlowStore } from '../../store';
+import { createId } from '../../lib/id';
+import { createDefaultEdge } from '@/constants';
+import { assignSmartHandlesWithOptions, getSmartRoutingOptionsFromViewSettings } from '../../services/smartEdgeRouting';
+import { buildArchitectureTemplate, type ArchitectureTemplateId } from '@/lib/architectureTemplates';
+import { convertSelectedErNodesToClassDiagram } from '@/lib/erToClassConversion';
+import { createArchitectureServiceNode, createSectionNode, getAbsoluteNodePosition } from './utils';
+
+export const useArchitectureNodeOperations = (recordHistory: () => void) => {
+    const { setNodes, setEdges, setSelectedNodeId } = useFlowStore();
+
+    const handleAddArchitectureService = useCallback((sourceId: string): boolean => {
+        const state = useFlowStore.getState();
+        const sourceNode = state.nodes.find((node) => node.id === sourceId);
+        if (!sourceNode || sourceNode.type !== 'architecture') {
+            return false;
+        }
+
+        const id = createId('arch');
+        const { activeLayerId, viewSettings } = state;
+        const sameBoundaryNodes = state.nodes.filter(
+            (node) => node.type === 'architecture' && node.data?.archBoundaryId === sourceNode.data?.archBoundaryId
+        );
+        const yOffset = sameBoundaryNodes.length * 90;
+
+        const newNode = createArchitectureServiceNode({
+            id,
+            position: {
+                x: sourceNode.position.x + 260,
+                y: sourceNode.position.y + yOffset,
+            },
+            sourceNode,
+            layerId: activeLayerId,
+        });
+
+        recordHistory();
+        setNodes((existingNodes) => [
+            ...existingNodes.map((node) => ({ ...node, selected: false })),
+            newNode,
+        ]);
+        setEdges((existingEdges) => {
+            const insertedEdges = existingEdges.concat(createDefaultEdge(sourceId, id));
+            if (!viewSettings.smartRoutingEnabled) {
+                return insertedEdges;
+            }
+            return assignSmartHandlesWithOptions(
+                useFlowStore.getState().nodes.concat(newNode),
+                insertedEdges,
+                getSmartRoutingOptionsFromViewSettings(viewSettings)
+            );
+        });
+        setSelectedNodeId(id);
+        return true;
+    }, [recordHistory, setNodes, setEdges, setSelectedNodeId]);
+
+    const handleCreateArchitectureBoundary = useCallback((sourceId: string): boolean => {
+        const state = useFlowStore.getState();
+        const sourceNode = state.nodes.find((node) => node.id === sourceId);
+        if (!sourceNode || sourceNode.type !== 'architecture') {
+            return false;
+        }
+        const sourceAbsolutePosition = getAbsoluteNodePosition(sourceNode, state.nodes);
+
+        const boundaryId = createId('section');
+        const { activeLayerId } = state;
+        const boundaryLabel = `${sourceNode.data?.label || 'System'} Boundary`;
+        const boundaryNode = createSectionNode(
+            boundaryId,
+            { x: sourceAbsolutePosition.x - 80, y: sourceAbsolutePosition.y - 70 },
+            boundaryLabel
+        );
+        boundaryNode.style = { width: 360, height: 260 };
+        boundaryNode.data = {
+            ...boundaryNode.data,
+            layerId: activeLayerId,
+            archBoundaryId: boundaryId,
+        };
+
+        recordHistory();
+        setNodes((existingNodes) => {
+            const nextNodes: FlowNode[] = existingNodes.map((node) => {
+                if (node.id === sourceId) {
+                    return setNodeParent({
+                        ...node,
+                        position: {
+                            x: sourceAbsolutePosition.x - boundaryNode.position.x,
+                            y: sourceAbsolutePosition.y - boundaryNode.position.y,
+                        },
+                        data: {
+                            ...node.data,
+                            archBoundaryId: boundaryId,
+                        },
+                        selected: true,
+                    }, boundaryId);
+                }
+                return { ...node, selected: false };
+            });
+            nextNodes.push({ ...boundaryNode, selected: false });
+            return nextNodes;
+        });
+        setSelectedNodeId(sourceId);
+        return true;
+    }, [recordHistory, setNodes, setSelectedNodeId]);
+
+    const handleApplyArchitectureTemplate = useCallback((sourceId: string, templateId: ArchitectureTemplateId): boolean => {
+        const state = useFlowStore.getState();
+        const sourceNode = state.nodes.find((node) => node.id === sourceId);
+        if (!sourceNode || sourceNode.type !== 'architecture') {
+            return false;
+        }
+
+        const template = buildArchitectureTemplate(
+            templateId,
+            sourceNode,
+            (key) => createId(`arch-${key}`),
+            (key) => createId(`edge-${key}`),
+        );
+        if (!template) {
+            return false;
+        }
+
+        const nextNodes: FlowNode[] = state.nodes.map((node) => {
+            if (node.id === sourceId) {
+                return {
+                    ...node,
+                    selected: true,
+                    data: {
+                        ...node.data,
+                        ...template.sourceData,
+                    },
+                };
+            }
+            return { ...node, selected: false };
+        });
+        nextNodes.push(...template.nodes);
+        const nextEdges = state.edges.concat(template.edges);
+
+        recordHistory();
+        setNodes(() => nextNodes);
+        setEdges(() => {
+            if (!state.viewSettings.smartRoutingEnabled) {
+                return nextEdges;
+            }
+
+            return assignSmartHandlesWithOptions(
+                nextNodes,
+                nextEdges,
+                getSmartRoutingOptionsFromViewSettings(state.viewSettings),
+            );
+        });
+        setSelectedNodeId(sourceId);
+        return true;
+    }, [recordHistory, setEdges, setNodes, setSelectedNodeId]);
+
+    const handleConvertEntitySelectionToClassDiagram = useCallback((): boolean => {
+        const state = useFlowStore.getState();
+        const result = convertSelectedErNodesToClassDiagram(state.nodes, state.edges);
+        if (result.changedNodeIds.length === 0) {
+            return false;
+        }
+
+        recordHistory();
+        setNodes(() => result.nodes);
+        setEdges(() => result.edges);
+
+        if (state.activeTabId) {
+            state.updateTab(state.activeTabId, { diagramType: 'classDiagram' });
+        }
+
+        return true;
+    }, [recordHistory, setEdges, setNodes]);
+
+    return {
+        handleAddArchitectureService,
+        handleCreateArchitectureBoundary,
+        handleApplyArchitectureTemplate,
+        handleConvertEntitySelectionToClassDiagram,
+    };
+};
diff --git a/src/hooks/node-operations/useMindmapNodeOperations.test.ts b/src/hooks/node-operations/useMindmapNodeOperations.test.ts
new file mode 100644
index 0000000..093cd78
--- /dev/null
+++ b/src/hooks/node-operations/useMindmapNodeOperations.test.ts
@@ -0,0 +1,62 @@
+import { renderHook } from '@testing-library/react';
+import { describe, expect, it, vi, beforeEach } from 'vitest';
+import { useFlowStore } from '../../store';
+import { useMindmapNodeOperations } from './useMindmapNodeOperations';
+
+vi.mock('../../store', () => ({
+    useFlowStore: Object.assign(vi.fn(), {
+        getState: vi.fn(),
+    }),
+}));
+
+const mockSetNodes = vi.fn();
+const mockSetEdges = vi.fn();
+const mockSetSelectedNodeId = vi.fn();
+const mockState = {
+    nodes: [],
+    edges: [],
+    activeLayerId: 'layer-1',
+    viewSettings: { smartRoutingEnabled: false },
+};
+
+beforeEach(() => {
+    vi.mocked(useFlowStore).mockReturnValue({ setNodes: mockSetNodes, setEdges: mockSetEdges, setSelectedNodeId: mockSetSelectedNodeId } as never);
+    vi.mocked(useFlowStore.getState).mockReturnValue(mockState as never);
+});
+
+describe('useMindmapNodeOperations', () => {
+    const recordHistory = vi.fn();
+
+    it('insertMindmapTopic returns false when source node not found', () => {
+        const { result } = renderHook(() => useMindmapNodeOperations(recordHistory));
+        expect(result.current.insertMindmapTopic('missing', 'child')).toBe(false);
+    });
+
+    it('insertMindmapTopic returns false when source node is not mindmap type', () => {
+        vi.mocked(useFlowStore.getState).mockReturnValue({
+            ...mockState,
+            nodes: [{ id: 'n1', type: 'process', position: { x: 0, y: 0 }, data: {} }],
+        } as never);
+        const { result } = renderHook(() => useMindmapNodeOperations(recordHistory));
+        expect(result.current.insertMindmapTopic('n1', 'child')).toBe(false);
+    });
+
+    it('insertMindmapTopic returns false for sibling when sourceNode has no mindmapParentId', () => {
+        vi.mocked(useFlowStore.getState).mockReturnValue({
+            ...mockState,
+            nodes: [{ id: 'n1', type: 'mindmap', position: { x: 0, y: 0 }, data: { mindmapDepth: 0 } }],
+        } as never);
+        const { result } = renderHook(() => useMindmapNodeOperations(recordHistory));
+        expect(result.current.insertMindmapTopic('n1', 'sibling')).toBe(false);
+    });
+
+    it('handleAddMindmapChild delegates with relationship=child (returns false for non-mindmap node)', () => {
+        const { result } = renderHook(() => useMindmapNodeOperations(recordHistory));
+        expect(result.current.handleAddMindmapChild('missing')).toBe(false);
+    });
+
+    it('handleAddMindmapSibling delegates with relationship=sibling (returns false for non-mindmap node)', () => {
+        const { result } = renderHook(() => useMindmapNodeOperations(recordHistory));
+        expect(result.current.handleAddMindmapSibling('missing')).toBe(false);
+    });
+});
diff --git a/src/hooks/node-operations/useMindmapNodeOperations.ts b/src/hooks/node-operations/useMindmapNodeOperations.ts
new file mode 100644
index 0000000..cc61e6a
--- /dev/null
+++ b/src/hooks/node-operations/useMindmapNodeOperations.ts
@@ -0,0 +1,103 @@
+import { useCallback } from 'react';
+import { useFlowStore } from '../../store';
+import { createId } from '../../lib/id';
+import { createMindmapEdge } from '@/constants';
+import { relayoutMindmapComponent, resolveMindmapBranchStyleForNode, syncMindmapEdges } from '@/lib/mindmapLayout';
+import { applyMindmapVisibility } from '@/lib/mindmapTree';
+import { assignSmartHandlesWithOptions, getSmartRoutingOptionsFromViewSettings } from '../../services/smartEdgeRouting';
+import { createMindmapTopicNode } from './utils';
+import { requestNodeLabelEdit } from '../nodeLabelEditRequest';
+import { resolveMindmapChildSide } from '@/lib/connectCreationPolicy';
+import type { MindmapTopicSide } from '../mindmapTopicActionRequest';
+
+export const useMindmapNodeOperations = (recordHistory: () => void) => {
+    const { setNodes, setEdges, setSelectedNodeId } = useFlowStore();
+
+    const insertMindmapTopic = useCallback((
+        sourceNodeId: string,
+        relationship: 'child' | 'sibling',
+        preferredSideOverride: MindmapTopicSide = null
+    ): boolean => {
+        const state = useFlowStore.getState();
+        const sourceNode = state.nodes.find((node) => node.id === sourceNodeId);
+        if (!sourceNode || sourceNode.type !== 'mindmap') {
+            return false;
+        }
+
+        const parentId = relationship === 'child' ? sourceNode.id : sourceNode.data?.mindmapParentId;
+        if (!parentId) {
+            return false;
+        }
+
+        const parentNode = state.nodes.find((node) => node.id === parentId);
+        if (!parentNode || parentNode.type !== 'mindmap') {
+            return false;
+        }
+
+        const sourceDepth = typeof sourceNode.data?.mindmapDepth === 'number' ? sourceNode.data.mindmapDepth : 0;
+        const parentDepth = typeof parentNode.data?.mindmapDepth === 'number' ? parentNode.data.mindmapDepth : 0;
+        const id = createId('mm');
+        const { activeLayerId, viewSettings } = state;
+        const inheritedSide = sourceNode.data?.mindmapSide === 'left' || sourceNode.data?.mindmapSide === 'right'
+            ? sourceNode.data.mindmapSide
+            : parentNode.data?.mindmapSide;
+        const preferredSide = preferredSideOverride ?? resolveMindmapChildSide(parentDepth, inheritedSide, null);
+        const branchStyle = resolveMindmapBranchStyleForNode(parentNode.id, state.nodes);
+
+        const newNode = createMindmapTopicNode({
+            id,
+            position: {
+                x: sourceNode.position.x + 260,
+                y: sourceNode.position.y,
+            },
+            depth: relationship === 'child' ? sourceDepth + 1 : parentDepth + 1,
+            parentId: parentNode.id,
+            side: preferredSide,
+            branchStyle,
+            layerId: activeLayerId,
+        });
+        newNode.data.color = sourceNode.data?.color || parentNode.data?.color || 'slate';
+        const insertedEdge = createMindmapEdge(parentNode, newNode, undefined, undefined, branchStyle);
+        const nextNodes = relayoutMindmapComponent(
+            [
+                ...state.nodes.map((node) => ({ ...node, selected: false })),
+                newNode,
+            ],
+            state.edges.concat(insertedEdge),
+            sourceNode.id
+        );
+        const visibilityState = applyMindmapVisibility(nextNodes, state.edges.concat(insertedEdge));
+
+        recordHistory();
+        setNodes(() => visibilityState.nodes);
+        setEdges((existingEdges) => {
+                const insertedEdges = syncMindmapEdges(visibilityState.nodes, existingEdges.concat(insertedEdge));
+                const visibleState = applyMindmapVisibility(visibilityState.nodes, insertedEdges);
+                if (!viewSettings.smartRoutingEnabled) {
+                    return visibleState.edges;
+                }
+            return assignSmartHandlesWithOptions(
+                visibleState.nodes,
+                visibleState.edges,
+                getSmartRoutingOptionsFromViewSettings(viewSettings)
+            );
+        });
+        setSelectedNodeId(id);
+        requestNodeLabelEdit(id, { replaceExisting: true });
+        return true;
+    }, [recordHistory, setEdges, setNodes, setSelectedNodeId]);
+
+    const handleAddMindmapChild = useCallback((parentId: string, preferredSide: MindmapTopicSide = null): boolean => {
+        return insertMindmapTopic(parentId, 'child', preferredSide);
+    }, [insertMindmapTopic]);
+
+    const handleAddMindmapSibling = useCallback((nodeId: string): boolean => {
+        return insertMindmapTopic(nodeId, 'sibling');
+    }, [insertMindmapTopic]);
+
+    return {
+        insertMindmapTopic,
+        handleAddMindmapChild,
+        handleAddMindmapSibling,
+    };
+};
diff --git a/src/hooks/node-operations/useNodeDragOperations.test.ts b/src/hooks/node-operations/useNodeDragOperations.test.ts
new file mode 100644
index 0000000..b703225
--- /dev/null
+++ b/src/hooks/node-operations/useNodeDragOperations.test.ts
@@ -0,0 +1,67 @@
+import { renderHook } from '@testing-library/react';
+import { describe, expect, it, vi, beforeEach } from 'vitest';
+import { useFlowStore } from '../../store';
+import { useNodeDragOperations } from './useNodeDragOperations';
+import { requestNodeLabelEdit } from '../nodeLabelEditRequest';
+import type { FlowNode } from '@/lib/types';
+
+vi.mock('../../store', () => ({
+    useFlowStore: Object.assign(vi.fn(), {
+        getState: vi.fn(),
+    }),
+}));
+
+vi.mock('../nodeLabelEditRequest', () => ({
+    requestNodeLabelEdit: vi.fn(),
+}));
+
+const mockSetNodes = vi.fn();
+const mockSetEdges = vi.fn();
+const mockSetSelectedNodeId = vi.fn();
+const mockState = {
+    nodes: [],
+    edges: [],
+    viewSettings: { smartRoutingEnabled: false },
+    setEdges: mockSetEdges,
+};
+
+beforeEach(() => {
+    vi.mocked(useFlowStore).mockReturnValue({ setNodes: mockSetNodes, setEdges: mockSetEdges, setSelectedNodeId: mockSetSelectedNodeId } as never);
+    vi.mocked(useFlowStore.getState).mockReturnValue(mockState as never);
+    vi.clearAllMocks();
+    vi.mocked(useFlowStore).mockReturnValue({ setNodes: mockSetNodes, setEdges: mockSetEdges, setSelectedNodeId: mockSetSelectedNodeId } as never);
+    vi.mocked(useFlowStore.getState).mockReturnValue(mockState as never);
+});
+
+const makeMouseEvent = (altKey = false) => ({ altKey } as React.MouseEvent);
+const makeNode = (id = 'node-1'): FlowNode => ({ id, type: 'process', position: { x: 0, y: 0 }, data: {} } as FlowNode);
+
+describe('useNodeDragOperations', () => {
+    const recordHistory = vi.fn();
+
+    it('onNodeDoubleClick calls setSelectedNodeId and requestNodeLabelEdit', () => {
+        const { result } = renderHook(() => useNodeDragOperations(recordHistory));
+        const node = makeNode();
+        result.current.onNodeDoubleClick(makeMouseEvent(), node);
+        expect(mockSetSelectedNodeId).toHaveBeenCalledWith('node-1');
+        expect(vi.mocked(requestNodeLabelEdit)).toHaveBeenCalledWith('node-1');
+    });
+
+    it('onNodeDragStart calls recordHistory', () => {
+        const { result } = renderHook(() => useNodeDragOperations(recordHistory));
+        result.current.onNodeDragStart(makeMouseEvent(), makeNode());
+        expect(recordHistory).toHaveBeenCalled();
+    });
+
+    it('onNodeDragStart with altKey=false does NOT call setNodes', () => {
+        const { result } = renderHook(() => useNodeDragOperations(recordHistory));
+        result.current.onNodeDragStart(makeMouseEvent(false), makeNode());
+        expect(mockSetNodes).not.toHaveBeenCalled();
+    });
+
+    it('onNodeDragStart with altKey=true creates a duplicate node (calls setNodes)', () => {
+        const { result } = renderHook(() => useNodeDragOperations(recordHistory));
+        result.current.onNodeDragStart(makeMouseEvent(true), makeNode());
+        expect(mockSetNodes).toHaveBeenCalled();
+    });
+});
diff --git a/src/hooks/node-operations/useNodeDragOperations.ts b/src/hooks/node-operations/useNodeDragOperations.ts
new file mode 100644
index 0000000..117d37c
--- /dev/null
+++ b/src/hooks/node-operations/useNodeDragOperations.ts
@@ -0,0 +1,183 @@
+import { useCallback, useEffect, useRef } from 'react';
+import type { FlowNode } from '@/lib/types';
+import { useFlowStore } from '../../store';
+import { createId } from '../../lib/id';
+import { assignSmartHandlesWithOptions, getSmartRoutingOptionsFromViewSettings } from '../../services/smartEdgeRouting';
+import { releaseStaleElkRoutesForNodeIds } from '@/lib/releaseStaleElkRoutes';
+import { reconcileMindmapDrop } from '@/lib/mindmapLayout';
+import { applyMindmapVisibility } from '@/lib/mindmapTree';
+import { applySectionParenting } from './utils';
+import { getDragStopReconcileDelayMs } from './dragStopReconcilePolicy';
+import { requestNodeLabelEdit } from '../nodeLabelEditRequest';
+
+export const useNodeDragOperations = (recordHistory: () => void) => {
+    const { setNodes, setEdges, setSelectedNodeId } = useFlowStore();
+    const dragStopReconcileTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+    const altDragDuplicateRef = useRef<{
+        originalNodeId: string;
+        duplicateNodeId: string;
+        originalPosition: FlowNode['position'];
+    } | null>(null);
+
+    useEffect(() => {
+        return () => {
+            if (dragStopReconcileTimerRef.current !== null) {
+                clearTimeout(dragStopReconcileTimerRef.current);
+            }
+        };
+    }, []);
+
+    const onNodeDragStart = useCallback((event: React.MouseEvent, node: FlowNode) => {
+        recordHistory();
+
+        // Alt + Drag Duplication
+        if (event.altKey) {
+            const newNodeId = createId();
+            const newNode: FlowNode = {
+                ...node,
+                id: newNodeId,
+                selected: true,
+                position: { ...node.position },
+                zIndex: (node.zIndex || 0) + 1,
+            };
+
+            altDragDuplicateRef.current = {
+                originalNodeId: node.id,
+                duplicateNodeId: newNodeId,
+                originalPosition: { ...node.position },
+            };
+            setNodes((nds) => [
+                ...nds.map((existingNode) => ({
+                    ...existingNode,
+                    selected: existingNode.id === newNodeId ? true : existingNode.id === node.id ? false : existingNode.selected,
+                })),
+                newNode,
+            ]);
+            setSelectedNodeId(newNodeId);
+        }
+    }, [recordHistory, setNodes, setSelectedNodeId]);
+
+    const onNodeDrag = useCallback((_event: React.MouseEvent, draggedNode: FlowNode, _draggedNodes: FlowNode[]) => {
+        const altDragDuplicate = altDragDuplicateRef.current;
+        if (altDragDuplicate && altDragDuplicate.originalNodeId === draggedNode.id) {
+            setNodes((currentNodes) => currentNodes.map((node) => {
+                if (node.id === altDragDuplicate.originalNodeId) {
+                    return {
+                        ...node,
+                        position: { ...altDragDuplicate.originalPosition },
+                        selected: false,
+                    };
+                }
+
+                if (node.id === altDragDuplicate.duplicateNodeId) {
+                    return {
+                        ...node,
+                        position: { ...draggedNode.position },
+                        selected: true,
+                    };
+                }
+
+                return node;
+            }));
+            setSelectedNodeId(altDragDuplicate.duplicateNodeId);
+        }
+
+        // Intentionally no smart-routing work during active drag to protect frame budget.
+        // Full reconciliation still runs on drag stop via `onNodeDragStop`.
+    }, [setNodes, setSelectedNodeId]);
+
+    const onNodeDragStop = useCallback((_event: React.MouseEvent, draggedNode: FlowNode) => {
+        const altDragDuplicate = altDragDuplicateRef.current;
+        const effectiveDraggedNode = altDragDuplicate && altDragDuplicate.originalNodeId === draggedNode.id
+            ? useFlowStore.getState().nodes.find((node) => node.id === altDragDuplicate.duplicateNodeId) ?? draggedNode
+            : draggedNode;
+        altDragDuplicateRef.current = null;
+
+        // Sequence participants must stay in their horizontal row — lock Y position.
+        if (effectiveDraggedNode.type === 'sequence_participant') {
+            const { nodes: snapNodes } = useFlowStore.getState();
+            const rowY = snapNodes.find((n) => n.type === 'sequence_participant' && n.id !== effectiveDraggedNode.id)?.position.y ?? 0;
+            setNodes((currentNodes) => currentNodes.map((node) =>
+                node.id === effectiveDraggedNode.id
+                    ? { ...node, position: { ...node.position, y: rowY } }
+                    : node
+            ));
+            return;
+        }
+
+        const { nodes: currentNodes } = useFlowStore.getState();
+        const parentedNodes = applySectionParenting(currentNodes, effectiveDraggedNode);
+        let reconciledNodes = parentedNodes;
+        let currentEdges = useFlowStore.getState().edges;
+
+        if (effectiveDraggedNode.type === 'mindmap') {
+            const mindmapDropResult = reconcileMindmapDrop(parentedNodes, currentEdges, effectiveDraggedNode.id);
+            if (mindmapDropResult.changed) {
+                const visibilityState = applyMindmapVisibility(mindmapDropResult.nodes, mindmapDropResult.edges);
+                reconciledNodes = visibilityState.nodes;
+                currentEdges = visibilityState.edges;
+                setNodes(reconciledNodes);
+                setEdges(currentEdges);
+            } else if (parentedNodes !== currentNodes) {
+                setNodes(parentedNodes);
+            }
+        } else if (parentedNodes !== currentNodes) {
+            setNodes(parentedNodes);
+        }
+
+        const runReconcile = () => {
+            const { nodes: latestNodes, edges: latestEdges, setEdges: setLatestEdges, viewSettings } = useFlowStore.getState();
+            const movedNodeIds = new Set(
+                latestNodes.filter((node) => node.selected).map((node) => node.id)
+            );
+            if (effectiveDraggedNode.id) {
+                movedNodeIds.add(effectiveDraggedNode.id);
+            }
+
+            const releasedEdges = releaseStaleElkRoutesForNodeIds(latestEdges, movedNodeIds);
+            if (!viewSettings.smartRoutingEnabled) {
+                if (releasedEdges !== latestEdges) {
+                    setLatestEdges(releasedEdges);
+                }
+                return;
+            }
+            const smartEdges = assignSmartHandlesWithOptions(
+                latestNodes,
+                releasedEdges,
+                getSmartRoutingOptionsFromViewSettings(viewSettings)
+            );
+            setLatestEdges(smartEdges);
+        };
+
+        const delayMs = getDragStopReconcileDelayMs(reconciledNodes.length, currentEdges.length);
+        if (delayMs === 0) {
+            if (dragStopReconcileTimerRef.current !== null) {
+                clearTimeout(dragStopReconcileTimerRef.current);
+                dragStopReconcileTimerRef.current = null;
+            }
+            runReconcile();
+            return;
+        }
+
+        if (dragStopReconcileTimerRef.current !== null) {
+            clearTimeout(dragStopReconcileTimerRef.current);
+        }
+        dragStopReconcileTimerRef.current = setTimeout(() => {
+            dragStopReconcileTimerRef.current = null;
+            runReconcile();
+        }, delayMs);
+
+    }, [setEdges, setNodes]);
+
+    const onNodeDoubleClick = useCallback((_event: React.MouseEvent, node: FlowNode) => {
+        setSelectedNodeId(node.id);
+        requestNodeLabelEdit(node.id);
+    }, [setSelectedNodeId]);
+
+    return {
+        onNodeDragStart,
+        onNodeDrag,
+        onNodeDragStop,
+        onNodeDoubleClick,
+    };
+};
diff --git a/src/hooks/node-operations/useNodeOperationAdders.ts b/src/hooks/node-operations/useNodeOperationAdders.ts
index ef73697..7048d76 100644
--- a/src/hooks/node-operations/useNodeOperationAdders.ts
+++ b/src/hooks/node-operations/useNodeOperationAdders.ts
@@ -196,6 +196,77 @@ export function useNodeOperationAdders({
     setSelectedNodeId(id);
   }, [nodesLength, recordHistory, setNodes, setSelectedNodeId, t]);
 
+  const handleAddClassNode = useCallback((position?: { x: number; y: number }) => {
+    recordHistory();
+    const id = createId('class');
+    const { activeLayerId } = useFlowStore.getState();
+    const newNode: FlowNode = {
+      id,
+      type: 'class',
+      position: position || getDefaultNodePosition(nodesLength, 120, 120),
+      data: {
+        label: 'ClassName',
+        color: 'white',
+        shape: 'rectangle',
+        classAttributes: ['+ attribute: Type'],
+        classMethods: ['+ method(): void'],
+        layerId: activeLayerId,
+      },
+      selected: true,
+    };
+    setNodes((nds) => nds.concat(newNode));
+    setSelectedNodeId(id);
+  }, [nodesLength, recordHistory, setNodes, setSelectedNodeId]);
+
+  const handleAddSequenceParticipant = useCallback((position?: { x: number; y: number }) => {
+    recordHistory();
+    const id = createId('seq');
+    const { activeLayerId, nodes: currentNodes } = useFlowStore.getState();
+
+    // Align with the existing participant row — place to the right of the last participant.
+    const seqNodes = currentNodes.filter((n) => n.type === 'sequence_participant');
+    const rowY = seqNodes.length > 0 ? seqNodes[0].position.y : 0;
+    const rowX = seqNodes.length > 0
+      ? Math.max(...seqNodes.map((n) => n.position.x)) + 220
+      : 0;
+
+    const newNode: FlowNode = {
+      id,
+      type: 'sequence_participant',
+      position: position ? { ...position, y: rowY } : { x: rowX, y: rowY },
+      data: {
+        label: 'Participant',
+        seqParticipantKind: 'participant',
+        layerId: activeLayerId,
+      },
+      selected: true,
+    };
+    setNodes((nds) => nds.concat(newNode));
+    setSelectedNodeId(id);
+    queueNodeLabelEditRequest(id, { replaceExisting: true });
+  }, [recordHistory, setNodes, setSelectedNodeId]);
+
+  const handleAddEntityNode = useCallback((position?: { x: number; y: number }) => {
+    recordHistory();
+    const id = createId('er');
+    const { activeLayerId } = useFlowStore.getState();
+    const newNode: FlowNode = {
+      id,
+      type: 'er_entity',
+      position: position || getDefaultNodePosition(nodesLength, 120, 120),
+      data: {
+        label: 'EntityName',
+        color: 'white',
+        shape: 'rectangle',
+        erFields: ['id: INT PK', 'name: VARCHAR'],
+        layerId: activeLayerId,
+      },
+      selected: true,
+    };
+    setNodes((nds) => nds.concat(newNode));
+    setSelectedNodeId(id);
+  }, [nodesLength, recordHistory, setNodes, setSelectedNodeId]);
+
   const handleAddWireframe = useCallback((type: 'browser' | 'mobile', position?: { x: number; y: number }) => {
     recordHistory();
     const id = createId(type);
@@ -238,6 +309,9 @@ export function useNodeOperationAdders({
     handleAddJourneyNode,
     handleAddMindmapNode,
     handleAddArchitectureNode,
+    handleAddSequenceParticipant,
+    handleAddClassNode,
+    handleAddEntityNode,
     handleAddSection,
     handleAddTextNode,
     handleAddImage,
diff --git a/src/hooks/node-operations/utils.test.ts b/src/hooks/node-operations/utils.test.ts
index 1b961ef..6741816 100644
--- a/src/hooks/node-operations/utils.test.ts
+++ b/src/hooks/node-operations/utils.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest';
-import { createProcessNode } from './utils';
+import { createArchitectureServiceNode, createProcessNode } from './utils';
 
 describe('createProcessNode', () => {
   it('creates blank generic shape content by default', () => {
@@ -12,3 +12,30 @@ describe('createProcessNode', () => {
     expect(node.height).toBeUndefined();
   });
 });
+
+describe('createArchitectureServiceNode', () => {
+  it('inherits custom provider metadata from the source node', () => {
+    const node = createArchitectureServiceNode({
+      id: 'arch-2',
+      position: { x: 50, y: 75 },
+      layerId: 'layer-1',
+      sourceNode: {
+        id: 'arch-1',
+        type: 'architecture',
+        position: { x: 0, y: 0 },
+        data: {
+          label: 'Gateway',
+          archProvider: 'custom',
+          archProviderLabel: 'Hetzner',
+          customIconUrl: 'data:image/svg+xml;base64,abc',
+          archEnvironment: 'production',
+        },
+      } as never,
+    });
+
+    expect(node.data.archProvider).toBe('custom');
+    expect(node.data.archProviderLabel).toBe('Hetzner');
+    expect(node.data.customIconUrl).toBe('data:image/svg+xml;base64,abc');
+    expect(node.data.archEnvironment).toBe('production');
+  });
+});
diff --git a/src/hooks/node-operations/utils.ts b/src/hooks/node-operations/utils.ts
index e378fd4..895567e 100644
--- a/src/hooks/node-operations/utils.ts
+++ b/src/hooks/node-operations/utils.ts
@@ -161,6 +161,8 @@ export function createArchitectureServiceNode({
     sourceNode,
     layerId,
 }: CreateArchitectureServiceNodeOptions): FlowNode {
+    const sourceProvider = sourceNode.data?.archProvider || 'custom';
+
     return {
         id,
         type: 'architecture',
@@ -170,12 +172,24 @@ export function createArchitectureServiceNode({
             color: 'slate',
             shape: 'rectangle',
             icon: 'Server',
-            archProvider: sourceNode.data?.archProvider || 'custom',
+            archProvider: sourceProvider,
+            archProviderLabel: sourceProvider === 'custom'
+                ? sourceNode.data?.archProviderLabel
+                : undefined,
             archResourceType: 'service',
             archEnvironment: sourceNode.data?.archEnvironment || 'default',
             archBoundaryId: sourceNode.data?.archBoundaryId,
             archZone: sourceNode.data?.archZone,
             archTrustDomain: sourceNode.data?.archTrustDomain,
+            customIconUrl: sourceProvider === 'custom'
+                ? sourceNode.data?.customIconUrl
+                : undefined,
+            archIconPackId: sourceProvider !== 'custom'
+                ? sourceNode.data?.archIconPackId
+                : undefined,
+            archIconShapeId: sourceProvider !== 'custom'
+                ? sourceNode.data?.archIconShapeId
+                : undefined,
             layerId,
         },
         selected: true,
diff --git a/src/hooks/nodeLabelEditRequest.ts b/src/hooks/nodeLabelEditRequest.ts
index 2bbc7a1..b431c53 100644
--- a/src/hooks/nodeLabelEditRequest.ts
+++ b/src/hooks/nodeLabelEditRequest.ts
@@ -1,8 +1,9 @@
 import { useEffect } from 'react';
+import { LEGACY_EVENT_NAMES } from '@/lib/legacyBranding';
 import { useFlowStore } from '@/store';
 import { useNodeLabelEditRequestActions, usePendingNodeLabelEditRequest } from '@/store/selectionHooks';
 
-const NODE_LABEL_EDIT_REQUEST_EVENT = 'flowmind:node-label-edit-request';
+const NODE_LABEL_EDIT_REQUEST_EVENT = LEGACY_EVENT_NAMES.nodeLabelEditRequest;
 
 interface NodeLabelEditRequestDetail {
   nodeId: string;
diff --git a/src/hooks/nodeQuickCreateRequest.test.ts b/src/hooks/nodeQuickCreateRequest.test.ts
new file mode 100644
index 0000000..c34f63a
--- /dev/null
+++ b/src/hooks/nodeQuickCreateRequest.test.ts
@@ -0,0 +1,14 @@
+import { renderHook } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { requestNodeQuickCreate, useNodeQuickCreateRequest } from './nodeQuickCreateRequest';
+
+describe('nodeQuickCreateRequest', () => {
+  it('dispatches quick create requests to listeners', () => {
+    const onRequest = vi.fn();
+    renderHook(() => useNodeQuickCreateRequest(onRequest));
+
+    requestNodeQuickCreate('node-1', 'right');
+
+    expect(onRequest).toHaveBeenCalledWith('node-1', 'right');
+  });
+});
diff --git a/src/hooks/nodeQuickCreateRequest.ts b/src/hooks/nodeQuickCreateRequest.ts
new file mode 100644
index 0000000..97369bc
--- /dev/null
+++ b/src/hooks/nodeQuickCreateRequest.ts
@@ -0,0 +1,38 @@
+import { useEffect } from 'react';
+import { LEGACY_EVENT_NAMES } from '@/lib/legacyBranding';
+
+const NODE_QUICK_CREATE_REQUEST_EVENT = LEGACY_EVENT_NAMES.nodeQuickCreateRequest;
+
+export type QuickCreateDirection = 'up' | 'right' | 'down' | 'left';
+
+interface NodeQuickCreateRequestDetail {
+  nodeId: string;
+  direction: QuickCreateDirection;
+}
+
+export function requestNodeQuickCreate(nodeId: string, direction: QuickCreateDirection): void {
+  window.dispatchEvent(
+    new CustomEvent<NodeQuickCreateRequestDetail>(NODE_QUICK_CREATE_REQUEST_EVENT, {
+      detail: { nodeId, direction },
+    })
+  );
+}
+
+export function useNodeQuickCreateRequest(
+  onRequest: (nodeId: string, direction: QuickCreateDirection) => void
+): void {
+  useEffect(() => {
+    const handleRequest = (event: Event): void => {
+      const customEvent = event as CustomEvent<NodeQuickCreateRequestDetail>;
+      if (!customEvent.detail?.nodeId) {
+        return;
+      }
+      onRequest(customEvent.detail.nodeId, customEvent.detail.direction);
+    };
+
+    window.addEventListener(NODE_QUICK_CREATE_REQUEST_EVENT, handleRequest as EventListener);
+    return () => {
+      window.removeEventListener(NODE_QUICK_CREATE_REQUEST_EVENT, handleRequest as EventListener);
+    };
+  }, [onRequest]);
+}
diff --git a/src/hooks/useAIGeneration.ts b/src/hooks/useAIGeneration.ts
index ba81d20..e27e20a 100644
--- a/src/hooks/useAIGeneration.ts
+++ b/src/hooks/useAIGeneration.ts
@@ -1,4 +1,5 @@
-import { useCallback, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { createLogger } from '@/lib/logger';
 import type { FlowEdge, FlowNode } from '@/lib/types';
 import type { ChatMessage } from '@/services/aiService';
 import { useFlowStore } from '@/store';
@@ -7,81 +8,252 @@ import { toErrorMessage } from './ai-generation/graphComposer';
 import {
   appendChatExchange,
   generateAIFlowResult,
+  type GenerateAIFlowResult,
 } from './ai-generation/requestLifecycle';
+import { buildCodeToArchitecturePrompt, type SupportedLanguage } from './ai-generation/codeToArchitecture';
+import { buildSqlToErdPrompt } from './ai-generation/sqlToErd';
+import { buildTerraformToCloudPrompt, type TerraformInputFormat } from './ai-generation/terraformToCloud';
+import { buildOpenApiToSequencePrompt } from './ai-generation/openApiToSequence';
+import { getAIReadinessState } from './ai-generation/readiness';
+import { clearChatHistory, loadChatHistory, saveChatHistory } from './ai-generation/chatHistoryStorage';
+import { notifyOperationOutcome } from '@/services/operationFeedback';
+
+const logger = createLogger({ scope: 'useAIGeneration' });
+
+export interface ImportDiff {
+  addedCount: number;
+  removedCount: number;
+  updatedCount: number;
+  result: GenerateAIFlowResult;
+}
+
+function computeImportDiff(currentNodes: FlowNode[], result: GenerateAIFlowResult): ImportDiff {
+  const currentIds = new Set(currentNodes.map((n) => n.id));
+  const newIds = new Set(result.layoutedNodes.map((n) => n.id));
+  return {
+    addedCount: result.layoutedNodes.filter((n) => !currentIds.has(n.id)).length,
+    removedCount: currentNodes.filter((n) => !newIds.has(n.id)).length,
+    updatedCount: result.layoutedNodes.filter((n) => currentIds.has(n.id)).length,
+    result,
+  };
+}
+
+function getSuccessSummary(existingNodeCount: number, focusedNodeIds?: string[]): string {
+  if ((focusedNodeIds?.length ?? 0) > 0) {
+    return 'Applied AI changes to the selected nodes.';
+  }
+
+  if (existingNodeCount > 0) {
+    return 'Applied AI changes to the current diagram.';
+  }
+
+  return 'Created a new AI diagram draft.';
+}
+
+function getFailureSummary(existingNodeCount: number, focusedNodeIds?: string[]): string {
+  if ((focusedNodeIds?.length ?? 0) > 0) {
+    return 'Could not update the selected nodes.';
+  }
+
+  if (existingNodeCount > 0) {
+    return 'Could not update the current diagram.';
+  }
+
+  return 'Could not generate the requested diagram.';
+}
 
 export function useAIGeneration(
   recordHistory: () => void,
   applyComposedGraph: (nodes: FlowNode[], edges: FlowEdge[]) => void
 ) {
-  const { nodes, edges, aiSettings, globalEdgeOptions } = useFlowStore();
-  const {
-    apiKey,
-    model,
-    provider,
-    customBaseUrl,
-  } = aiSettings;
+  const { nodes, edges, aiSettings, globalEdgeOptions, activeTabId } = useFlowStore();
+  const selectedNodeIds = nodes.filter((n) => n.selected).map((n) => n.id);
   const { addToast } = useToast();
   const [isGenerating, setIsGenerating] = useState(false);
+  const [streamingText, setStreamingText] = useState<string | null>(null);
+  const [retryCount, setRetryCount] = useState(0);
+  const [pendingDiff, setPendingDiff] = useState<ImportDiff | null>(null);
+  const abortControllerRef = useRef<AbortController | null>(null);
   const [chatMessages, setChatMessages] = useState<ChatMessage[]>([]);
 
+  useEffect(() => {
+    let isDisposed = false;
+
+    void loadChatHistory(activeTabId).then((messages) => {
+      if (!isDisposed) {
+        setChatMessages(messages);
+      }
+    });
+
+    return () => {
+      isDisposed = true;
+    };
+  }, [activeTabId]);
+  const [lastError, setLastError] = useState<string | null>(null);
+  const readiness = getAIReadinessState(aiSettings);
+
+  const cancelGeneration = useCallback(() => {
+    abortControllerRef.current?.abort();
+  }, []);
+
   const clearChat = useCallback(() => {
+    void clearChatHistory(activeTabId);
     setChatMessages([]);
+  }, [activeTabId]);
+
+  const clearLastError = useCallback(() => {
+    setLastError(null);
   }, []);
 
-  const handleAIRequest = useCallback(async (prompt: string, imageBase64?: string) => {
+  const confirmPendingDiff = useCallback(() => {
+    if (!pendingDiff) return;
     recordHistory();
+    applyComposedGraph(pendingDiff.result.layoutedNodes, pendingDiff.result.layoutedEdges);
+    notifyOperationOutcome(addToast, { status: 'success', summary: 'Import applied to canvas.' });
+    setPendingDiff(null);
+  }, [pendingDiff, applyComposedGraph, addToast, recordHistory]);
+
+  const discardPendingDiff = useCallback(() => {
+    setPendingDiff(null);
+  }, []);
+
+  const runAIRequest = useCallback(async (
+    prompt: string,
+    imageBase64?: string,
+    focusedNodeIds?: string[],
+    showPreview = false,
+  ): Promise<boolean> => {
+    if (!readiness.canGenerate && readiness.blockingIssue) {
+      setLastError(readiness.blockingIssue.detail);
+      notifyOperationOutcome(addToast, {
+        status: readiness.blockingIssue.tone,
+        summary: readiness.blockingIssue.title,
+        detail: readiness.blockingIssue.detail,
+      });
+      return false;
+    }
+
+    setLastError(null);
+    setStreamingText('');
+    setRetryCount(0);
+    if (!showPreview) recordHistory();
     setIsGenerating(true);
 
+    const controller = new AbortController();
+    abortControllerRef.current = controller;
+
     try {
-      const {
-        dslText,
-        userMessage,
-        layoutedNodes,
-        layoutedEdges,
-      } = await generateAIFlowResult({
+      const result = await generateAIFlowResult({
         chatMessages,
         prompt,
         imageBase64,
         nodes,
         edges,
-        aiSettings: {
-          ...aiSettings,
-          apiKey,
-          model,
-          provider,
-          customBaseUrl,
-        },
+        selectedNodeIds: focusedNodeIds ?? selectedNodeIds,
+        aiSettings,
         globalEdgeOptions,
+        onChunk: (delta) => setStreamingText((prev) => (prev ?? '') + delta),
+        onRetry: (attempt) => {
+          setRetryCount(attempt);
+          setStreamingText('');
+        },
+        signal: controller.signal,
       });
 
-      setChatMessages((previousMessages) => [
-        ...appendChatExchange(previousMessages, userMessage, dslText),
-      ]);
-
-      applyComposedGraph(layoutedNodes, layoutedEdges);
+      const { dslText, userMessage, layoutedNodes, layoutedEdges } = result;
+      const isEditMode = nodes.length > 0;
+      setChatMessages((previousMessages) => {
+        const next = appendChatExchange(previousMessages, userMessage, dslText, isEditMode);
+        void saveChatHistory(activeTabId, next);
+        return next;
+      });
 
-      addToast('Diagram generated successfully!', 'success');
+      if (showPreview) {
+        setPendingDiff(computeImportDiff(nodes, result));
+        notifyOperationOutcome(addToast, { status: 'success', summary: 'Import ready — review changes before applying.' });
+      } else {
+        applyComposedGraph(layoutedNodes, layoutedEdges);
+        notifyOperationOutcome(addToast, {
+          status: 'success',
+          summary: getSuccessSummary(nodes.length, focusedNodeIds),
+        });
+      }
+      return true;
     } catch (error: unknown) {
+      if (error instanceof DOMException && error.name === 'AbortError') {
+        return false;
+      }
       const errorMessage = toErrorMessage(error);
-      console.error('AI Generation failed:', error);
-      addToast(`Failed to generate: ${errorMessage}`, 'error');
+      logger.error('AI generation failed.', { error });
+      setLastError(errorMessage);
+      notifyOperationOutcome(addToast, {
+        status: 'error',
+        summary: getFailureSummary(nodes.length, focusedNodeIds),
+        detail: errorMessage,
+      });
+      return false;
     } finally {
+      abortControllerRef.current = null;
       setIsGenerating(false);
+      setStreamingText(null);
+      setRetryCount(0);
     }
   }, [
     addToast,
     aiSettings,
-    apiKey,
-    customBaseUrl,
-    model,
-    provider,
+    activeTabId,
     chatMessages,
     edges,
     globalEdgeOptions,
+    readiness,
     nodes,
+    selectedNodeIds,
     recordHistory,
     applyComposedGraph,
   ]);
 
-  return { isGenerating, handleAIRequest, chatMessages, clearChat };
+  const handleAIRequest = useCallback(async (prompt: string, imageBase64?: string): Promise<boolean> => {
+    return runAIRequest(prompt, imageBase64);
+  }, [runAIRequest]);
+
+  const handleFocusedAIRequest = useCallback(async (prompt: string, focusedNodeIds: string[], imageBase64?: string): Promise<boolean> => {
+    return runAIRequest(prompt, imageBase64, focusedNodeIds);
+  }, [runAIRequest]);
+
+  const handleCodeAnalysis = useCallback(async (code: string, language: SupportedLanguage): Promise<boolean> => {
+    return runAIRequest(buildCodeToArchitecturePrompt({ code, language }), undefined, undefined, true);
+  }, [runAIRequest]);
+
+  const handleSqlAnalysis = useCallback(async (sql: string): Promise<boolean> => {
+    return runAIRequest(buildSqlToErdPrompt(sql), undefined, undefined, true);
+  }, [runAIRequest]);
+
+  const handleTerraformAnalysis = useCallback(async (input: string, format: TerraformInputFormat): Promise<boolean> => {
+    return runAIRequest(buildTerraformToCloudPrompt(input, format), undefined, undefined, true);
+  }, [runAIRequest]);
+
+  const handleOpenApiAnalysis = useCallback(async (spec: string): Promise<boolean> => {
+    return runAIRequest(buildOpenApiToSequencePrompt(spec), undefined, undefined, true);
+  }, [runAIRequest]);
+
+  return {
+    isGenerating,
+    streamingText,
+    retryCount,
+    cancelGeneration,
+    pendingDiff,
+    confirmPendingDiff,
+    discardPendingDiff,
+    readiness,
+    lastError,
+    handleAIRequest,
+    handleFocusedAIRequest,
+    handleCodeAnalysis,
+    handleSqlAnalysis,
+    handleTerraformAnalysis,
+    handleOpenApiAnalysis,
+    chatMessages,
+    clearChat,
+    clearLastError,
+  };
 }
diff --git a/src/hooks/useClipboardOperations.ts b/src/hooks/useClipboardOperations.ts
index 7ea870d..53a322b 100644
--- a/src/hooks/useClipboardOperations.ts
+++ b/src/hooks/useClipboardOperations.ts
@@ -1,12 +1,15 @@
 import { useCallback } from 'react';
 import type { FlowEdge, FlowNode } from '@/lib/types';
 import { createId } from '../lib/id';
+import { LEGACY_STORAGE_KEYS } from '@/lib/legacyBranding';
+import { createLogger } from '@/lib/logger';
 import { clearNodeParent } from '@/lib/nodeParent';
 import { readLocalStorageString, writeLocalStorageJson } from '@/services/storage/uiLocalStorage';
 import { useCanvasActions, useCanvasState } from '@/store/canvasHooks';
 import { useSelectionActions } from '@/store/selectionHooks';
 
-const CLIPBOARD_STORAGE_KEY = 'flowmind-clipboard';
+const CLIPBOARD_STORAGE_KEY = LEGACY_STORAGE_KEYS.clipboard;
+const logger = createLogger({ scope: 'clipboard' });
 
 export const useClipboardOperations = (recordHistory: () => void) => {
     const { nodes, edges } = useCanvasState();
@@ -80,7 +83,7 @@ export const useClipboardOperations = (recordHistory: () => void) => {
 
             if (newNodes.length > 0) setSelectedNodeId(newNodes[0].id);
         } catch (error) {
-            console.error('Failed to paste from clipboard', error);
+            logger.error('Failed to paste from clipboard.', { error });
         }
     }, [setNodes, setEdges, recordHistory, setSelectedNodeId]);
 
diff --git a/src/hooks/useEdgeInteractions.ts b/src/hooks/useEdgeInteractions.ts
index 0b5ddba..aea08c0 100644
--- a/src/hooks/useEdgeInteractions.ts
+++ b/src/hooks/useEdgeInteractions.ts
@@ -17,7 +17,7 @@ import {
  *   B — toggle bidirectional
  */
 export function useEdgeInteractions() {
-    const { getEdges, setEdges, getNodes } = useReactFlow();
+    const { getEdges, setEdges } = useReactFlow();
 
     const handleKeyDown = useCallback((event: KeyboardEvent) => {
         // Skip if user is typing in an input/textarea
diff --git a/src/hooks/useEdgeOperations.ts b/src/hooks/useEdgeOperations.ts
index 04a6b83..7e9cd61 100644
--- a/src/hooks/useEdgeOperations.ts
+++ b/src/hooks/useEdgeOperations.ts
@@ -8,21 +8,27 @@ import type { DomainLibraryItem } from '@/services/domainLibrary';
 import { createDomainLibraryNode } from '@/services/domainLibrary';
 import { createId } from '@/lib/id';
 import { assignSmartHandlesWithOptions, getSmartRoutingOptionsFromViewSettings } from '../services/smartEdgeRouting';
-import { ROLLOUT_FLAGS } from '@/config/rolloutFlags';
 import { getPointerClientPosition, isPaneTarget, normalizeConnectionFromDragStart } from './edgeConnectInteractions';
 import { normalizeNodeHandleId } from '@/lib/nodeHandles';
 import { buildReconnectedEdge, shouldRespectExplicitReconnectHandles } from '@/lib/reconnectEdge';
 import { queueNodeLabelEditRequest } from './nodeLabelEditRequest';
 import { isMindmapConnectorSource } from '@/lib/connectCreationPolicy';
 import { resolveMindmapBranchStyleForNode, syncMindmapEdges } from '@/lib/mindmapLayout';
+import {
+    buildSequenceMessageEdge,
+    isSequenceConnection,
+} from '@/services/sequence/sequenceMessage';
 import {
     buildConnectedEdge,
     buildConnectedMindmapTopic,
     buildConnectedNode,
+    type ConnectedEdgePreset,
     getOppositeTargetHandle,
     isDuplicateConnection,
     resolveConnectEndAction,
 } from './edge-operations/utils';
+import { getDefaultConnectedNodeSpec } from '@/lib/connectCreationPolicy';
+import type { QuickCreateDirection } from './nodeQuickCreateRequest';
 
 export const useEdgeOperations = (
     recordHistory: () => void,
@@ -104,8 +110,22 @@ export const useEdgeOperations = (
                 );
                 return eds.concat(mindmapEdge);
             }
+
+            if (isSequenceConnection(sourceNode, targetNode, resolvedConnection)) {
+                return eds.concat(buildSequenceMessageEdge(
+                    resolvedConnection,
+                    sourceNode,
+                    targetNode,
+                    eds,
+                    t('connectionPanel.messagePlaceholder', 'Message')
+                ));
+            }
+
             const inserted = addEdge({
                 ...resolvedConnection,
+                data: {
+                    connectionType: resolvedConnection.sourceHandle || resolvedConnection.targetHandle ? 'fixed' : 'dynamic',
+                },
                 ...DEFAULT_EDGE_OPTIONS,
             }, eds);
 
@@ -122,7 +142,7 @@ export const useEdgeOperations = (
                 getSmartRoutingOptionsFromViewSettings(viewSettings)
             );
         });
-    }, [edges, nodes, setEdges, recordHistory]);
+    }, [edges, nodes, recordHistory, setEdges, t]);
 
     const onConnectStart = useCallback((_, { nodeId, handleId }: { nodeId: string | null; handleId: string | null }) => {
         connectingNodeId.current = nodeId;
@@ -130,7 +150,14 @@ export const useEdgeOperations = (
         isConnectionValid.current = false;
     }, []);
 
-    const handleAddAndConnect = useCallback((type: string, position: { x: number; y: number }, sourceId: string, sourceHandle: string | null, shape?: NodeData['shape']) => {
+    const handleAddAndConnect = useCallback((
+        type: string,
+        position: { x: number; y: number },
+        sourceId: string,
+        sourceHandle: string | null,
+        shape?: NodeData['shape'],
+        edgePreset?: ConnectedEdgePreset
+    ) => {
         recordHistory();
         const state = useFlowStore.getState();
         const sourceNode = state.nodes.find((node) => node.id === sourceId);
@@ -161,10 +188,11 @@ export const useEdgeOperations = (
             return;
         }
 
-        const { newNode, isGenericShape } = buildConnectedNode({
+        const { newNode } = buildConnectedNode({
             type,
             position,
             shape,
+            sourceNode,
             labels: {
                 noteLabel: t('nodes.note'),
                 noteSubLabel: t('nodes.addCommentsHere'),
@@ -180,7 +208,7 @@ export const useEdgeOperations = (
                 ? getOppositeTargetHandle(newNode, resolvedSourceHandle)
                 : null;
 
-            const insertedEdges = eds.concat(buildConnectedEdge(sourceId, id, resolvedSourceHandle, resolvedTargetHandle));
+            const insertedEdges = eds.concat(buildConnectedEdge(sourceId, id, resolvedSourceHandle, resolvedTargetHandle, edgePreset));
             if (!viewSettings.smartRoutingEnabled) {
                 return insertedEdges;
             }
@@ -191,11 +219,37 @@ export const useEdgeOperations = (
             );
         });
         setSelectedNodeId(id);
-        if (isGenericShape) {
-            queueNodeLabelEditRequest(id, { replaceExisting: true });
-        }
+        queueNodeLabelEditRequest(id, { replaceExisting: true });
     }, [recordHistory, setEdges, setNodes, setSelectedNodeId, t]);
 
+    const createConnectedNodeInDirection = useCallback((sourceId: string, direction: QuickCreateDirection) => {
+        const state = useFlowStore.getState();
+        const sourceNode = state.nodes.find((node) => node.id === sourceId);
+        if (!sourceNode) {
+            return;
+        }
+
+        const directionMap: Record<QuickCreateDirection, { dx: number; dy: number; handle: string }> = {
+            up: { dx: 0, dy: -180, handle: 'top' },
+            right: { dx: 260, dy: 0, handle: 'right' },
+            down: { dx: 0, dy: 180, handle: 'bottom' },
+            left: { dx: -260, dy: 0, handle: 'left' },
+        };
+        const directionConfig = directionMap[direction];
+        const defaultConnectedNode = getDefaultConnectedNodeSpec(sourceNode.type);
+
+        handleAddAndConnect(
+            defaultConnectedNode.type,
+            {
+                x: sourceNode.position.x + directionConfig.dx,
+                y: sourceNode.position.y + directionConfig.dy,
+            },
+            sourceId,
+            directionConfig.handle,
+            defaultConnectedNode.shape
+        );
+    }, [handleAddAndConnect]);
+
     const handleAddDomainLibraryItemAndConnect = useCallback((item: DomainLibraryItem, position: { x: number; y: number }, sourceId: string, sourceHandle: string | null) => {
         recordHistory();
         const state = useFlowStore.getState();
@@ -240,7 +294,7 @@ export const useEdgeOperations = (
                 position,
                 clientPosition,
                 targetIsPane: isPaneTarget(target),
-                canvasInteractionsV1Enabled: ROLLOUT_FLAGS.canvasInteractionsV1,
+                canvasInteractionsV1Enabled: true,
             });
 
             if (resolution.type === 'connect') {
@@ -279,6 +333,7 @@ export const useEdgeOperations = (
         onConnectEnd,
         onReconnect,
         handleAddAndConnect,
+        createConnectedNodeInDirection,
         handleAddDomainLibraryItemAndConnect,
     };
 };
diff --git a/src/hooks/useFlowEditorActions.ts b/src/hooks/useFlowEditorActions.ts
index a871bdc..45056e6 100644
--- a/src/hooks/useFlowEditorActions.ts
+++ b/src/hooks/useFlowEditorActions.ts
@@ -1,24 +1,35 @@
 import { useCallback, useState } from 'react';
 import type { TFunction } from 'i18next';
+import { createLogger } from '@/lib/logger';
 import type { FlowEdge, FlowNode } from '@/lib/types';
 import type { FlowTemplate } from '@/services/templates';
 import type { LayoutAlgorithm } from '@/services/elkLayout';
 import type { ExportSerializationMode } from '@/services/canonicalSerialization';
 import {
+    downloadFigmaToFile,
+    downloadMermaidToFile,
+    downloadOpenFlowDSLToFile,
+    downloadPlantUMLToFile,
     exportFigmaToClipboard,
     exportMermaidToClipboard,
     exportOpenFlowDSLToClipboard,
     exportPlantUMLToClipboard,
 } from './flow-editor-actions/exportHandlers';
+import { toOpenFlowDSL } from '@/services/openFlowDSLExporter';
+import { encodeDslForViewer } from '@/components/DiagramViewer';
 import {
     buildTemplateInsertionResult,
     getAutoLayoutResult,
     scheduleFitView,
 } from './flow-editor-actions/layoutHandlers';
+import { recordOnboardingEvent } from '@/services/onboarding/events';
+
+const logger = createLogger({ scope: 'useFlowEditorActions' });
 
 interface UseFlowEditorActionsParams {
     nodes: FlowNode[];
     edges: FlowEdge[];
+    activeTabName?: string;
     recordHistory: () => void;
     setNodes: (nodes: FlowNode[] | ((nodes: FlowNode[]) => FlowNode[])) => void;
     setEdges: (edges: FlowEdge[] | ((edges: FlowEdge[]) => FlowEdge[])) => void;
@@ -38,14 +49,22 @@ interface UseFlowEditorActionsResult {
     ) => Promise<void>;
     handleInsertTemplate: (template: FlowTemplate) => void;
     handleExportMermaid: () => Promise<void>;
+    handleDownloadMermaid: () => void;
     handleExportPlantUML: () => Promise<void>;
+    handleDownloadPlantUML: () => void;
     handleExportOpenFlowDSL: () => Promise<void>;
+    handleDownloadOpenFlowDSL: () => void;
     handleExportFigma: () => Promise<void>;
+    handleDownloadFigma: () => Promise<void>;
+    handleShare: () => void;
+    shareViewerUrl: string | null;
+    clearShareViewerUrl: () => void;
 }
 
 export function useFlowEditorActions({
     nodes,
     edges,
+    activeTabName,
     recordHistory,
     setNodes,
     setEdges,
@@ -79,7 +98,7 @@ export function useFlowEditorActions({
             setEdges(layoutedEdges);
             scheduleFitView(fitView, 800, 50);
         } catch (error) {
-            console.error('ELK layout failed:', error);
+            logger.error('ELK layout failed.', { error });
         } finally {
             setIsLayouting(false);
         }
@@ -87,6 +106,10 @@ export function useFlowEditorActions({
 
     const handleInsertTemplate = useCallback((template: FlowTemplate): void => {
         recordHistory();
+        recordOnboardingEvent('template_inserted', {
+            templateId: template.id,
+            category: template.category,
+        });
         const { nextNodes, newEdges } = buildTemplateInsertionResult({
             template,
             existingNodes: nodes,
@@ -98,12 +121,20 @@ export function useFlowEditorActions({
     }, [nodes, recordHistory, setNodes, setEdges, fitView]);
 
     const handleExportMermaid = useCallback(async (): Promise<void> => {
-        await exportMermaidToClipboard({ nodes, edges, t });
-    }, [nodes, edges, t]);
+        await exportMermaidToClipboard({ nodes, edges, t, addToast });
+    }, [nodes, edges, t, addToast]);
+
+    const handleDownloadMermaid = useCallback((): void => {
+        downloadMermaidToFile({ nodes, edges, addToast, baseFileName: activeTabName });
+    }, [nodes, edges, addToast, activeTabName]);
 
     const handleExportPlantUML = useCallback(async (): Promise<void> => {
-        await exportPlantUMLToClipboard({ nodes, edges, t });
-    }, [nodes, edges, t]);
+        await exportPlantUMLToClipboard({ nodes, edges, t, addToast });
+    }, [nodes, edges, t, addToast]);
+
+    const handleDownloadPlantUML = useCallback((): void => {
+        downloadPlantUMLToFile({ nodes, edges, addToast, baseFileName: activeTabName });
+    }, [nodes, edges, addToast, activeTabName]);
 
     const handleExportOpenFlowDSL = useCallback(async (): Promise<void> => {
         await exportOpenFlowDSLToClipboard({
@@ -115,17 +146,51 @@ export function useFlowEditorActions({
         });
     }, [nodes, edges, addToast, t, exportSerializationMode]);
 
+    const handleDownloadOpenFlowDSL = useCallback((): void => {
+        downloadOpenFlowDSLToFile({
+            nodes,
+            edges,
+            exportSerializationMode,
+            addToast,
+            baseFileName: activeTabName,
+        });
+    }, [nodes, edges, exportSerializationMode, addToast, activeTabName]);
+
     const handleExportFigma = useCallback(async (): Promise<void> => {
         await exportFigmaToClipboard({ nodes, edges, addToast, t });
     }, [nodes, edges, addToast, t]);
 
+    const handleDownloadFigma = useCallback(async (): Promise<void> => {
+        await downloadFigmaToFile({ nodes, edges, addToast, t, baseFileName: activeTabName });
+    }, [nodes, edges, addToast, t, activeTabName]);
+
+    const [shareViewerUrl, setShareViewerUrl] = useState<string | null>(null);
+
+    const handleShare = useCallback((): void => {
+        if (nodes.length === 0) return;
+        const dsl = toOpenFlowDSL(nodes, edges, { mode: exportSerializationMode });
+        const encoded = encodeDslForViewer(dsl);
+        const url = `${window.location.origin}/#/view?flow=${encoded}`;
+        setShareViewerUrl(url);
+        recordOnboardingEvent('first_share_opened', { surface: 'editor' });
+    }, [nodes, edges, exportSerializationMode]);
+
+    const clearShareViewerUrl = useCallback((): void => setShareViewerUrl(null), []);
+
     return {
         isLayouting,
         onLayout,
         handleInsertTemplate,
         handleExportMermaid,
+        handleDownloadMermaid,
         handleExportPlantUML,
+        handleDownloadPlantUML,
         handleExportOpenFlowDSL,
+        handleDownloadOpenFlowDSL,
         handleExportFigma,
+        handleDownloadFigma,
+        handleShare,
+        shareViewerUrl,
+        clearShareViewerUrl,
     };
 }
diff --git a/src/hooks/useFlowEditorCallbacks.ts b/src/hooks/useFlowEditorCallbacks.ts
index 81531a1..dd6ede6 100644
--- a/src/hooks/useFlowEditorCallbacks.ts
+++ b/src/hooks/useFlowEditorCallbacks.ts
@@ -84,7 +84,10 @@ export function useFlowEditorCallbacks({
 
     const handleCommandBarApply = useCallback((newNodes: FlowNode[], newEdges: FlowEdge[]) => {
         recordHistory();
-        setNodes(newNodes);
+        setNodes(newNodes.map((node, index) => ({
+            ...node,
+            data: { ...node.data, freshlyAdded: true, animateDelay: Math.min(index * 20, 400) },
+        })));
         setEdges(newEdges);
         setTimeout(() => fitView({ duration: 800, padding: 0.2 }), 100);
 
diff --git a/src/hooks/useFlowEditorCollaboration.test.ts b/src/hooks/useFlowEditorCollaboration.test.ts
index 35f9c4d..a00b5ee 100644
--- a/src/hooks/useFlowEditorCollaboration.test.ts
+++ b/src/hooks/useFlowEditorCollaboration.test.ts
@@ -99,11 +99,11 @@ describe('resolveCollaborationCacheState', () => {
 
   it('formats and sorts top-nav collaboration participants with the local marker', () => {
     expect(buildTopNavParticipants([
-      { clientId: 'b', name: 'Beta', color: '#222', cursor: null },
+      { clientId: 'b', name: 'Guest ED88', color: '#222', cursor: null },
       { clientId: 'a', name: 'Alpha', color: '#111', cursor: null },
     ], 'a')).toEqual([
-      { clientId: 'a', name: 'Alpha (You)', color: '#111', isLocal: true },
-      { clientId: 'b', name: 'Beta', color: '#222', isLocal: false },
+      { clientId: 'a', name: 'You', color: '#111', isLocal: true },
+      { clientId: 'b', name: 'Guest', color: '#222', isLocal: false },
     ]);
   });
 
@@ -118,7 +118,7 @@ describe('resolveCollaborationCacheState', () => {
 
   it('creates and persists a local collaboration identity from the client id', () => {
     const identity = resolveLocalCollaborationIdentity('collab-client-1234');
-    expect(identity.name).toBe('Guest 1234');
+    expect(identity.name).toBe('Guest');
     expect(identity.color).toBeTruthy();
 
     window.localStorage.setItem('flowmind:collab-identity-v1', JSON.stringify({
diff --git a/src/hooks/useFlowEditorCollaboration.ts b/src/hooks/useFlowEditorCollaboration.ts
index b7b9478..46986e3 100644
--- a/src/hooks/useFlowEditorCollaboration.ts
+++ b/src/hooks/useFlowEditorCollaboration.ts
@@ -1,16 +1,12 @@
 import { useCallback, useEffect, useMemo, useRef, useState, type RefObject } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLocation, useNavigate } from 'react-router-dom';
-import { ROLLOUT_FLAGS } from '@/config/rolloutFlags';
 import type { FlowEdge, FlowNode } from '@/lib/types';
 import type { ToastType } from '@/components/ui/ToastContext';
 import { useFlowStore } from '@/store';
-import { createCollaborationSessionBootstrap } from '@/services/collaboration/session';
 import { createCollaborationRuntimeController } from '@/services/collaboration/runtimeController';
-import { applyCollaborationDocumentStateToCanvas, createCollaborationDocumentStateFromCanvas } from '@/services/collaboration/storeBridge';
 import { buildCollaborationPresenceViewModel } from '@/services/collaboration/presenceViewModel';
 import type { CollaborationPresenceState } from '@/services/collaboration/types';
-import { createCollaborationTransportFactory } from '@/services/collaboration/transportFactory';
 import type { CollaborationCanvasSnapshot } from '@/services/collaboration/canvasDiff';
 import {
     createCollaborationRuntimeControllerBundle,
@@ -21,19 +17,20 @@ import {
 } from '@/services/collaboration/runtimeHookUtils';
 import {
     buildTopNavParticipants,
-    resolveCollaborationCacheState,
     resolveInitialCollaborationCacheState,
     resolveLocalCollaborationClientId,
     resolveLocalCollaborationIdentity,
     resolveLocalCollaborationRoomSecret,
 } from '@/services/collaboration/hookUtils';
 import { buildCollaborationInviteUrl, COLLAB_ROOM_QUERY_PARAM, COLLAB_SECRET_QUERY_PARAM, resolveCollaborationRoomId } from '@/services/collaboration/roomLink';
+import { notifyOperationOutcome } from '@/services/operationFeedback';
 
 type SetFlowNodes = (payload: FlowNode[] | ((nodes: FlowNode[]) => FlowNode[])) => void;
 type SetFlowEdges = (payload: FlowEdge[] | ((edges: FlowEdge[]) => FlowEdge[])) => void;
 
 export interface FlowEditorCollaborationTopNavState {
     roomId: string;
+    inviteUrl: string;
     viewerCount: number;
     status: 'realtime' | 'waiting' | 'fallback';
     cacheState: 'unavailable' | 'syncing' | 'ready' | 'hydrated';
@@ -82,11 +79,14 @@ export function useFlowEditorCollaboration({
     const [collaborationTransportStatus, setCollaborationTransportStatus] = useState<'realtime' | 'waiting' | 'fallback'>('fallback');
     const [collaborationCacheState, setCollaborationCacheState] = useState<'unavailable' | 'syncing' | 'ready' | 'hydrated'>(
         resolveInitialCollaborationCacheState({
-            indexedDbEnabled: ROLLOUT_FLAGS.collaborationIndexedDbV1,
+            indexedDbEnabled: true,
             indexedDbAvailable,
         })
     );
     const collaborationControllerRef = useRef<ReturnType<typeof createCollaborationRuntimeController> | null>(null);
+    const previousPresenceMapRef = useRef<Map<string, string>>(new Map());
+    const hasHydratedPresenceRef = useRef(false);
+    const previousTransportStatusRef = useRef<'realtime' | 'waiting' | 'fallback' | null>(null);
     const previousCollaborationCanvasRef = useRef<CollaborationCanvasSnapshot | null>(null);
     const applyingRemoteCollaborationStateRef = useRef(false);
     const pendingCollaborationSnapshotRef = useRef<CollaborationCanvasSnapshot | null>(null);
@@ -283,17 +283,82 @@ export function useFlowEditorCollaboration({
         });
     }, [collaborationEnabled, editorSurfaceRef]);
 
+    useEffect(() => {
+        if (!collaborationEnabled) {
+            return;
+        }
+        const selectedIds = nodes.filter((n) => n.selected).map((n) => n.id);
+        collaborationControllerRef.current?.updateLocalPresenceSelection(selectedIds);
+    }, [collaborationEnabled, nodes]);
+
+    useEffect(() => {
+        if (!collaborationEnabled) {
+            hasHydratedPresenceRef.current = false;
+            return;
+        }
+        const currentMap = new Map(collaborationPresence.map((p) => [p.clientId, p.name]));
+
+        if (!hasHydratedPresenceRef.current) {
+            previousPresenceMapRef.current = currentMap;
+            hasHydratedPresenceRef.current = true;
+            return;
+        }
+
+        previousPresenceMapRef.current = currentMap;
+    }, [collaborationEnabled, collaborationPresence]);
+
+    useEffect(() => {
+        if (!collaborationEnabled) {
+            previousTransportStatusRef.current = null;
+            return;
+        }
+
+        const previousStatus = previousTransportStatusRef.current;
+        if (previousStatus === null) {
+            previousTransportStatusRef.current = collaborationTransportStatus;
+            return;
+        }
+
+        if (previousStatus !== collaborationTransportStatus) {
+            if (collaborationTransportStatus === 'fallback') {
+                notifyOperationOutcome(addToast, {
+                    status: 'warning',
+                    summary: t('share.toast.fallbackMode', 'Realtime sync is unavailable. Continuing in local-only mode.'),
+                    duration: 4500,
+                });
+            } else if (previousStatus === 'fallback' && collaborationTransportStatus === 'realtime') {
+                notifyOperationOutcome(addToast, {
+                    status: 'success',
+                    summary: t('share.toast.reconnected', 'Realtime collaboration restored.'),
+                    duration: 3000,
+                });
+            }
+
+            previousTransportStatusRef.current = collaborationTransportStatus;
+        }
+    }, [addToast, collaborationEnabled, collaborationTransportStatus, t]);
+
     const handleCopyInvite = useCallback(async (): Promise<void> => {
         if (!collaborationRoomSecret) {
-            addToast(t('share.toast.copyFailed', 'Unable to copy share link.'), 'error');
+            notifyOperationOutcome(addToast, {
+                status: 'error',
+                summary: t('share.toast.copyFailed', 'Unable to copy share link.'),
+            });
             return;
         }
         const inviteUrl = buildCollaborationInviteUrl(window.location.href, collaborationRoomId, collaborationRoomSecret);
         try {
             await navigator.clipboard.writeText(inviteUrl);
-            addToast(t('share.toast.linkCopied', 'Collaboration link copied.'), 'success');
+            notifyOperationOutcome(addToast, {
+                status: 'success',
+                summary: t('share.toast.linkCopied', 'Collaboration link copied.'),
+            });
         } catch {
-            addToast(t('share.toast.copyFailed', 'Unable to copy share link.'), 'error');
+            notifyOperationOutcome(addToast, {
+                status: 'warning',
+                summary: t('share.toast.copyManual', 'Clipboard access is blocked. Copy the link manually from the share dialog.'),
+                duration: 4500,
+            });
         }
     }, [addToast, collaborationRoomId, collaborationRoomSecret, t]);
 
@@ -306,6 +371,7 @@ export function useFlowEditorCollaboration({
             status: collaborationTransportStatus,
             cacheState: collaborationCacheState,
             roomId: collaborationRoomId,
+            inviteUrl: buildCollaborationInviteUrl(window.location.href, collaborationRoomId, collaborationRoomSecret ?? collaborationRoomId),
             viewerCount: presenceViewModel.viewerCount,
             participants: buildTopNavParticipants(collaborationPresence, localCollaborationClientId),
             onCopyShareLink: () => {
@@ -318,6 +384,7 @@ export function useFlowEditorCollaboration({
         collaborationPresence,
         collaborationTransportStatus,
         collaborationRoomId,
+        collaborationRoomSecret,
         handleCopyInvite,
         localCollaborationClientId,
         presenceViewModel.viewerCount,
diff --git a/src/hooks/useFlowEditorUIState.ts b/src/hooks/useFlowEditorUIState.ts
index c434da6..5e70733 100644
--- a/src/hooks/useFlowEditorUIState.ts
+++ b/src/hooks/useFlowEditorUIState.ts
@@ -8,7 +8,7 @@ export type CommandBarView =
     | 'assets';
 
 export type FlowEditorMode = 'canvas' | 'studio';
-export type StudioTab = 'ai' | 'code' | 'playback';
+export type StudioTab = 'ai' | 'code' | 'playback' | 'infra' | 'lint';
 export type StudioCodeMode = 'openflow' | 'mermaid';
 
 interface UseFlowEditorUIStateResult {
diff --git a/src/hooks/useFlowExport.ts b/src/hooks/useFlowExport.ts
index b9491b5..b5852a1 100644
--- a/src/hooks/useFlowExport.ts
+++ b/src/hooks/useFlowExport.ts
@@ -1,105 +1,46 @@
 import { useCallback, useRef } from 'react';
-import { getCompatibleNodesBounds, useReactFlow } from '@/lib/reactflowCompat';
+import { createLogger } from '@/lib/logger';
+import { useReactFlow } from '@/lib/reactflowCompat';
 import { toPng, toJpeg, toSvg } from 'html-to-image';
+import { useCinematicExportActions } from '@/context/CinematicExportContext';
 import { useFlowStore } from '../store';
 import { useCanvasActions, useCanvasState } from '@/store/canvasHooks';
 import { useActiveTabId, useTabActions } from '@/store/tabHooks';
 import { useViewSettings } from '@/store/viewHooks';
-import { buildAnimatedExportPlan, getAnimatedExportFileExtension, selectSupportedVideoMimeType, type AnimatedExportKind } from '@/services/animatedExport';
-import { orderGraphForSerialization } from '@/services/canonicalSerialization';
-import { createDiagramDocument, parseDiagramDocumentImport } from '@/services/diagramDocument';
-import { composeDiagramForDisplay } from '@/services/composeDiagramForDisplay';
-import { encodeGif } from '@/services/gifEncoder';
-import { buildPlaybackSequence, buildPlaybackSequenceFromState } from '@/services/playback/contracts';
+import { getAnimatedExportFileExtension, selectSupportedVideoMimeType } from '@/services/animatedExport';
+import { buildCinematicBuildPlan, type CinematicExportKind } from '@/services/export/cinematicBuildPlan';
+import { buildCinematicTimeline, getCinematicExportPreset, resolveCinematicRenderState } from '@/services/export/cinematicRenderState';
+import { useToast } from '../components/ui/ToastContext';
+import { resolveFlowExportViewport } from './flowExportViewport';
+import { notifyOperationOutcome } from '@/services/operationFeedback';
+import { createPdfFromJpeg } from '@/services/export/pdfDocument';
+import { buildExportFileName } from '@/lib/exportFileName';
+import {
+  copyDataUrlToClipboard,
+  createDownload,
+  createExportOptions,
+  decodeCapturedFrames,
+  encodeGifFromFrames,
+  encodeVideoFromFrames,
+  waitForExportRender,
+  waitForExportSurface,
+} from './flow-export/exportCapture';
 import {
-  buildImportFidelityReport,
-  mapErrorToIssue,
-  mapWarningToIssue,
-  persistLatestImportReport,
-  summarizeImportReport,
-} from '@/services/importFidelity';
+  buildDiagramDocumentJson,
+  importDiagramDocumentJson,
+} from './flow-export/diagramDocumentTransfer';
 
-import { useToast } from '../components/ui/ToastContext';
+const logger = createLogger({ scope: 'useFlowExport' });
 
 interface AnimatedPlaybackControls {
-  jumpToStep: (stepIndex: number) => void;
   stopPlayback: () => void;
-  playbackSpeed: number;
-}
-
-function wait(ms: number): Promise<void> {
-  return new Promise((resolve) => {
-    window.setTimeout(resolve, ms);
-  });
-}
-
-function createDownload(blob: Blob, fileName: string): void {
-  const url = URL.createObjectURL(blob);
-  const link = document.createElement('a');
-  link.download = fileName;
-  link.href = url;
-  link.click();
-  URL.revokeObjectURL(url);
-}
-
-function createExportOptions(
-  nodes: ReturnType<typeof useCanvasState>['nodes'],
-  format: 'png' | 'jpeg',
-  config?: { maxDimension?: number; pixelRatio?: number }
-) {
-  const bounds = getCompatibleNodesBounds(nodes);
-  const padding = 80;
-  const rawWidth = (bounds.width || 800) + padding * 2;
-  const rawHeight = (bounds.height || 600) + padding * 2;
-  const longestSide = Math.max(rawWidth, rawHeight);
-  const maxDimension = config?.maxDimension ?? longestSide;
-  const scale = longestSide > maxDimension ? maxDimension / longestSide : 1;
-  const width = Math.max(1, Math.round(rawWidth * scale));
-  const height = Math.max(1, Math.round(rawHeight * scale));
-
-  return {
-    width,
-    height,
-    options: {
-      backgroundColor: format === 'png' ? null : '#ffffff',
-      width,
-      height,
-      style: {
-        transform: `translate(${-bounds.x + padding}px, ${-bounds.y + padding}px) scale(${scale})`,
-        width: `${rawWidth}px`,
-        height: `${rawHeight}px`,
-      },
-      pixelRatio: config?.pixelRatio ?? 3,
-      filter: (node: HTMLElement) => {
-        if (node.classList) {
-          if (
-            node.classList.contains('react-flow__controls') ||
-            node.classList.contains('react-flow__minimap') ||
-            node.classList.contains('react-flow__attribution') ||
-            node.classList.contains('react-flow__background')
-          ) {
-            return false;
-          }
-        }
-        return true;
-      },
-    },
-  };
-}
-
-async function loadImage(dataUrl: string): Promise<HTMLImageElement> {
-  return new Promise((resolve, reject) => {
-    const image = new Image();
-    image.onload = () => resolve(image);
-    image.onerror = () => reject(new Error('Failed to decode exported frame.'));
-    image.src = dataUrl;
-  });
 }
 
 export const useFlowExport = (
   recordHistory: () => void,
   reactFlowWrapper: React.RefObject<HTMLDivElement>,
-  animatedPlayback: AnimatedPlaybackControls
+  animatedPlayback: AnimatedPlaybackControls,
+  cinematicExportSurfaceRef?: React.RefObject<HTMLDivElement | null>,
 ) => {
   const tabs = useFlowStore((state) => state.tabs);
   const { nodes, edges } = useCanvasState();
@@ -108,235 +49,320 @@ export const useFlowExport = (
   const activeTabId = useActiveTabId();
   const { updateTab } = useTabActions();
   const { fitView } = useReactFlow();
+  const { setRenderState, setSurfaceConfig, resetRenderState } = useCinematicExportActions();
   const { addToast } = useToast();
   const fileInputRef = useRef<HTMLInputElement>(null);
   const activeTab = tabs.find((tab) => tab.id === activeTabId);
+  const exportBaseName = activeTab?.name;
 
   const handleExport = useCallback((format: 'png' | 'jpeg' = 'png') => {
-    if (!reactFlowWrapper.current) return;
+    const { viewport: flowViewport, message } = resolveFlowExportViewport(reactFlowWrapper.current);
+    if (!flowViewport) {
+      addToast(message ?? 'The canvas viewport could not be found.', 'error');
+      return;
+    }
+
     reactFlowWrapper.current.classList.add('exporting');
+    addToast(`Preparing ${format.toUpperCase()} download…`, 'info');
 
     setTimeout(() => {
       const { options } = createExportOptions(nodes, format);
-      const flowViewport = document.querySelector('.react-flow__viewport') as HTMLElement;
-
-      if (!flowViewport) {
-        reactFlowWrapper.current?.classList.remove('exporting');
-        return;
-      }
 
       const exportPromise = format === 'png' ? toPng(flowViewport, options) : toJpeg(flowViewport, options);
 
       exportPromise
         .then((dataUrl) => {
           const link = document.createElement('a');
-          link.download = `openflowkit-diagram.${format === 'jpeg' ? 'jpg' : 'png'}`;
+          link.download = buildExportFileName(exportBaseName, format === 'jpeg' ? 'jpg' : 'png');
           link.href = dataUrl;
           link.click();
           addToast(`Diagram exported as ${format.toUpperCase()}!`, 'success');
         })
         .catch((err) => {
-          console.error('Export failed:', err);
+          logger.error('Export failed.', { error: err, format });
           addToast('Failed to export. Please try again.', 'error');
         })
         .finally(() => {
           reactFlowWrapper.current?.classList.remove('exporting');
         });
     }, 300);
+  }, [nodes, reactFlowWrapper, addToast, exportBaseName]);
+
+  const handleCopyImage = useCallback((format: 'png' | 'jpeg' = 'png') => {
+    const { viewport: flowViewport, message } = resolveFlowExportViewport(reactFlowWrapper.current);
+    if (!flowViewport) {
+      addToast(message ?? 'The canvas viewport could not be found.', 'error');
+      return;
+    }
+
+    reactFlowWrapper.current.classList.add('exporting');
+    addToast(`Preparing ${format.toUpperCase()} copy…`, 'info');
+
+    setTimeout(() => {
+      const { options } = createExportOptions(nodes, format);
+      const exportPromise = format === 'png' ? toPng(flowViewport, options) : toJpeg(flowViewport, options);
+
+      exportPromise
+        .then(async (dataUrl) => {
+          await copyDataUrlToClipboard(dataUrl);
+          addToast(`Diagram copied as ${format.toUpperCase()}!`, 'success');
+        })
+        .catch((err) => {
+          logger.error('Clipboard image export failed.', { error: err, format });
+          addToast('Failed to copy image. Please try again.', 'error');
+        })
+        .finally(() => {
+          reactFlowWrapper.current?.classList.remove('exporting');
+        });
+    }, 300);
   }, [nodes, reactFlowWrapper, addToast]);
 
   const handleSvgExport = useCallback(() => {
-    if (!reactFlowWrapper.current) return;
+    const { viewport: flowViewport, message } = resolveFlowExportViewport(reactFlowWrapper.current);
+    if (!flowViewport) {
+      addToast(message ?? 'The canvas viewport could not be found.', 'error');
+      return;
+    }
+
     reactFlowWrapper.current.classList.add('exporting');
+    addToast('Preparing SVG download…', 'info');
 
     setTimeout(() => {
       const { options } = createExportOptions(nodes, 'png');
-      const flowViewport = document.querySelector('.react-flow__viewport') as HTMLElement;
-
-      if (!flowViewport) {
-        reactFlowWrapper.current?.classList.remove('exporting');
-        return;
-      }
 
       toSvg(flowViewport, { ...options, backgroundColor: null })
         .then((dataUrl) => {
           const link = document.createElement('a');
-          link.download = 'openflowkit-diagram.svg';
+          link.download = buildExportFileName(exportBaseName, 'svg');
           link.href = dataUrl;
           link.click();
           addToast('Diagram exported as SVG!', 'success');
         })
         .catch((err) => {
-          console.error('SVG export failed:', err);
+          logger.error('SVG export failed.', { error: err });
           addToast('Failed to export SVG. Please try again.', 'error');
         })
         .finally(() => {
           reactFlowWrapper.current?.classList.remove('exporting');
         });
     }, 300);
-  }, [nodes, reactFlowWrapper, addToast]);
+  }, [nodes, reactFlowWrapper, addToast, exportBaseName]);
 
-  const handleAnimatedExport = useCallback(async (kind: AnimatedExportKind) => {
-    if (!reactFlowWrapper.current) {
+  const handleCopySvg = useCallback(() => {
+    const { viewport: flowViewport, message } = resolveFlowExportViewport(reactFlowWrapper.current);
+    if (!flowViewport) {
+      addToast(message ?? 'The canvas viewport could not be found.', 'error');
       return;
     }
 
-    const flowViewport = document.querySelector('.react-flow__viewport') as HTMLElement | null;
+    reactFlowWrapper.current.classList.add('exporting');
+    addToast('Preparing SVG copy…', 'info');
+
+    setTimeout(() => {
+      const { options } = createExportOptions(nodes, 'png');
+
+      toSvg(flowViewport, { ...options, backgroundColor: null })
+        .then(async (dataUrl) => {
+          await copyDataUrlToClipboard(dataUrl);
+          addToast('Diagram copied as SVG!', 'success');
+        })
+        .catch((err) => {
+          logger.error('SVG clipboard export failed.', { error: err });
+          addToast('Failed to copy SVG. Please try again.', 'error');
+        })
+        .finally(() => {
+          reactFlowWrapper.current?.classList.remove('exporting');
+        });
+    }, 300);
+  }, [nodes, reactFlowWrapper, addToast]);
+
+  const handlePdfExport = useCallback(() => {
+    const { viewport: flowViewport, message } = resolveFlowExportViewport(reactFlowWrapper.current);
     if (!flowViewport) {
-      addToast('Animated export is unavailable because the canvas viewport could not be found.', 'error');
+      addToast(message ?? 'The canvas viewport could not be found.', 'error');
       return;
     }
 
-    if (nodes.length === 0) {
-      addToast('Add nodes before exporting a playback animation.', 'error');
+    reactFlowWrapper.current.classList.add('exporting');
+    addToast('Preparing PDF download…', 'info');
+
+    setTimeout(() => {
+      const { width, height, options } = createExportOptions(nodes, 'jpeg');
+
+      toJpeg(flowViewport, options)
+        .then((jpegDataUrl) => {
+          const pdfBlob = createPdfFromJpeg({
+            jpegDataUrl,
+            width,
+            height,
+            title: 'OpenFlowKit Diagram',
+          });
+          createDownload(pdfBlob, buildExportFileName(exportBaseName, 'pdf'));
+          addToast('Diagram exported as PDF!', 'success');
+        })
+        .catch((err) => {
+          logger.error('PDF export failed.', { error: err });
+          addToast('Failed to export PDF. Please try again.', 'error');
+        })
+        .finally(() => {
+          reactFlowWrapper.current?.classList.remove('exporting');
+        });
+    }, 300);
+  }, [nodes, reactFlowWrapper, addToast, exportBaseName]);
+
+  const handleCinematicExport = useCallback(async (kind: CinematicExportKind) => {
+    if (!reactFlowWrapper.current) {
+      addToast('Canvas viewport not found.', 'error');
       return;
     }
 
-    const sequence = activeTab?.playback
-      ? buildPlaybackSequenceFromState(nodes, activeTab.playback, animatedPlayback.playbackSpeed)
-      : buildPlaybackSequence(nodes, animatedPlayback.playbackSpeed);
-
-    if (sequence.steps.length === 0) {
-      addToast('Playback export needs at least one playback step.', 'error');
+    if (nodes.length === 0) {
+      addToast('Add nodes before exporting a cinematic build animation.', 'error');
       return;
     }
 
-    const { width, height } = createExportOptions(nodes, 'png');
-    const plan = buildAnimatedExportPlan({
-      kind,
-      width,
-      height,
-      sequence,
-    });
+    const plan = buildCinematicBuildPlan(nodes, edges);
+    if (plan.segments.length === 0) {
+      addToast('Could not build a cinematic export sequence.', 'error');
+      return;
+    }
 
-    if (kind === 'gif' && plan.estimatedBytes > 12_000_000) {
-      addToast('GIF export may be large. Prefer video for longer playback.', 'warning');
+    const preset = getCinematicExportPreset(kind);
+    const timeline = buildCinematicTimeline(plan, preset);
+    const totalFrames = Math.max(1, Math.ceil((timeline.totalDurationMs / 1000) * timeline.preset.fps));
+    if (kind === 'cinematic-gif' && totalFrames >= timeline.preset.maxFrames) {
+      addToast('Cinematic GIF was compressed to stay performant. Prefer video for longer flows.', 'warning');
     }
 
     reactFlowWrapper.current.classList.add('exporting');
-    addToast(kind === 'gif' ? 'Preparing playback GIF…' : 'Preparing playback video…', 'info');
+    addToast(kind === 'cinematic-gif' ? 'Preparing cinematic build GIF…' : 'Preparing cinematic build video…', 'info');
 
     try {
       const frameOptions = createExportOptions(nodes, 'png', {
-        maxDimension: Math.max(plan.frameWidth, plan.frameHeight),
-        pixelRatio: plan.preset.pixelRatio,
+        maxDimension: timeline.preset.maxDimension,
+        pixelRatio: timeline.preset.pixelRatio,
       }).options;
-
+      const frameDurationMs = Math.max(1, Math.round(1000 / timeline.preset.fps));
       const capturedFrames: Array<{ dataUrl: string; delayMs: number }> = [];
+
       animatedPlayback.stopPlayback();
 
-      for (let index = 0; index < sequence.steps.length; index += 1) {
-        animatedPlayback.jumpToStep(index);
-        await wait(140);
-        const dataUrl = await toPng(flowViewport, frameOptions);
-        capturedFrames.push({
-          dataUrl,
-          delayMs: sequence.steps[index].durationMs,
-        });
+      setSurfaceConfig({
+        width: frameOptions.width ?? 0,
+        height: frameOptions.height ?? 0,
+      });
+      const exportSurfaceTarget = await waitForExportSurface(cinematicExportSurfaceRef);
+
+      if (!exportSurfaceTarget) {
+        throw new Error('Cinematic export surface is unavailable.');
       }
 
-      animatedPlayback.stopPlayback();
+      for (let timeMs = 0; timeMs < timeline.totalDurationMs; timeMs += frameDurationMs) {
+        setRenderState(resolveCinematicRenderState(timeline, edges, timeMs));
+        await waitForExportRender(12);
+        const dataUrl = await toPng(exportSurfaceTarget, {
+          backgroundColor: null,
+          width: frameOptions.width,
+          height: frameOptions.height,
+          pixelRatio: frameOptions.pixelRatio,
+          skipFonts: true,
+          cacheBust: true,
+        });
+        capturedFrames.push({ dataUrl, delayMs: frameDurationMs });
+      }
 
-      if (kind === 'gif') {
-        const canvas = document.createElement('canvas');
-        canvas.width = plan.frameWidth;
-        canvas.height = plan.frameHeight;
-        const context = canvas.getContext('2d');
-        if (!context) {
-          throw new Error('Canvas 2D context is unavailable.');
-        }
-
-        const gifFrames = [];
-        for (const frame of capturedFrames) {
-          const image = await loadImage(frame.dataUrl);
-          context.clearRect(0, 0, canvas.width, canvas.height);
-          context.drawImage(image, 0, 0, canvas.width, canvas.height);
-          gifFrames.push({
-            imageData: context.getImageData(0, 0, canvas.width, canvas.height),
-            delayMs: frame.delayMs,
-          });
-        }
+      setRenderState(resolveCinematicRenderState(timeline, edges, timeline.totalDurationMs));
+      await waitForExportRender(12);
+      capturedFrames.push({
+        dataUrl: await toPng(exportSurfaceTarget, {
+          backgroundColor: null,
+          width: frameOptions.width,
+          height: frameOptions.height,
+          pixelRatio: frameOptions.pixelRatio,
+          skipFonts: true,
+          cacheBust: true,
+        }),
+        delayMs: Math.max(frameDurationMs, timeline.preset.finalHoldMs),
+      });
 
-        const blob = encodeGif(gifFrames);
-        createDownload(blob, 'openflowkit-playback.gif');
-        addToast('Playback GIF exported.', 'success');
+      const { width, height } = createExportOptions(nodes, 'png', {
+        maxDimension: timeline.preset.maxDimension,
+        pixelRatio: timeline.preset.pixelRatio,
+      });
+      if (kind === 'cinematic-gif') {
+        const decodedFrames = await decodeCapturedFrames(capturedFrames);
+        const blob = await encodeGifFromFrames({
+          frames: decodedFrames,
+          width,
+          height,
+        });
+        createDownload(blob, buildExportFileName(exportBaseName ?? 'openflowkit-cinematic-build', 'gif'));
+        addToast('Cinematic build GIF exported.', 'success');
         return;
       }
 
       const mimeType = selectSupportedVideoMimeType(window.MediaRecorder);
       if (!mimeType) {
-        throw new Error('This browser does not support local video recording for playback export.');
+        throw new Error('This browser does not support local video recording for cinematic export.');
       }
 
-      const canvas = document.createElement('canvas');
-      canvas.width = plan.frameWidth;
-      canvas.height = plan.frameHeight;
-      const context = canvas.getContext('2d');
-      if (!context) {
-        throw new Error('Canvas 2D context is unavailable.');
-      }
-
-      const stream = canvas.captureStream(plan.preset.fps);
-      const recorder = new MediaRecorder(stream, { mimeType });
-      const chunks: BlobPart[] = [];
-      recorder.ondataavailable = (event) => {
-        if (event.data.size > 0) {
-          chunks.push(event.data);
-        }
-      };
-
-      const stopped = new Promise<Blob>((resolve) => {
-        recorder.onstop = () => resolve(new Blob(chunks, { type: mimeType }));
+      const decodedFrames = await decodeCapturedFrames(capturedFrames);
+      const blob = await encodeVideoFromFrames({
+        frames: decodedFrames,
+        width,
+        height,
+        fps: timeline.preset.fps,
+        mimeType,
       });
-
-      recorder.start();
-      const frameDurationMs = Math.max(1, Math.round(1000 / plan.preset.fps));
-
-      for (const frame of capturedFrames) {
-        const image = await loadImage(frame.dataUrl);
-        const repeatCount = Math.max(1, Math.round(frame.delayMs / frameDurationMs));
-        for (let repeatIndex = 0; repeatIndex < repeatCount; repeatIndex += 1) {
-          context.clearRect(0, 0, canvas.width, canvas.height);
-          context.drawImage(image, 0, 0, canvas.width, canvas.height);
-          await wait(frameDurationMs);
-        }
-      }
-
-      recorder.stop();
-      const blob = await stopped;
-      const extension = getAnimatedExportFileExtension(mimeType, 'video');
-      createDownload(blob, `openflowkit-playback.${extension}`);
-      addToast(`Playback ${extension.toUpperCase()} exported.`, 'success');
+      const extension = getAnimatedExportFileExtension(mimeType);
+      createDownload(blob, buildExportFileName(exportBaseName ?? 'openflowkit-cinematic-build', extension));
+      addToast(`Cinematic build ${extension.toUpperCase()} exported.`, 'success');
     } catch (error) {
-      const message = error instanceof Error ? error.message : 'Animated export failed.';
-      console.error('Animated export failed:', error);
-      addToast(message, 'error');
+      const exportMessage = error instanceof Error ? error.message : 'Cinematic export failed.';
+      logger.error('Cinematic export failed.', { error, kind });
+      addToast(exportMessage, 'error');
     } finally {
-      animatedPlayback.stopPlayback();
+      resetRenderState();
       reactFlowWrapper.current?.classList.remove('exporting');
     }
-  }, [activeTab, addToast, animatedPlayback, nodes, reactFlowWrapper]);
+  }, [addToast, animatedPlayback, cinematicExportSurfaceRef, edges, exportBaseName, nodes, reactFlowWrapper, resetRenderState, setRenderState, setSurfaceConfig]);
 
   // --- JSON Export ---
   const handleExportJSON = useCallback(() => {
-    const { nodes: orderedNodes, edges: orderedEdges } = orderGraphForSerialization(
+    addToast('Preparing JSON download…', 'info');
+    const documentJson = buildDiagramDocumentJson({
       nodes,
       edges,
-      viewSettings.exportSerializationMode
-    );
-    // Use the outer `activeTab` derived from `tabs` — no inner redefinition needed.
-    const doc = createDiagramDocument(orderedNodes, orderedEdges, activeTab?.diagramType, {
-      playback: activeTab?.playback,
-      extendedDocumentModel: Boolean(activeTab?.playback),
+      exportSerializationMode: viewSettings.exportSerializationMode,
+      activeTab,
     });
-    const blob = new Blob([JSON.stringify(doc, null, 2)], { type: 'application/json' });
+    const blob = new Blob([documentJson], { type: 'application/json' });
     const url = URL.createObjectURL(blob);
     const link = document.createElement('a');
-    link.download = 'openflowkit-diagram.json';
+    link.download = buildExportFileName(exportBaseName, 'json');
     link.href = url;
     link.click();
     URL.revokeObjectURL(url);
-  }, [nodes, edges, viewSettings.exportSerializationMode, activeTab]);
+    addToast('Diagram JSON downloaded!', 'success');
+  }, [nodes, edges, viewSettings.exportSerializationMode, activeTab, addToast, exportBaseName]);
+
+  const handleCopyJSON = useCallback(async () => {
+    addToast('Preparing JSON copy…', 'info');
+    const documentJson = buildDiagramDocumentJson({
+      nodes,
+      edges,
+      exportSerializationMode: viewSettings.exportSerializationMode,
+      activeTab,
+    });
+
+    try {
+      await navigator.clipboard.writeText(documentJson);
+      addToast('Diagram JSON copied to clipboard!', 'success');
+    } catch (error) {
+      logger.error('JSON clipboard export failed.', { error });
+      addToast('Failed to copy JSON. Please try again.', 'error');
+    }
+  }, [nodes, edges, viewSettings.exportSerializationMode, activeTab, addToast]);
 
   // --- JSON Import ---
   const handleImportJSON = useCallback(() => {
@@ -351,45 +377,23 @@ export const useFlowExport = (
       reader.onload = (ev) => {
         const importStart = performance.now();
         void (async () => {
-          try {
-            const raw = JSON.parse(ev.target?.result as string);
-            const parsed = parseDiagramDocumentImport(raw);
-            const { nodes: composedNodes, edges: composedEdges } = await composeDiagramForDisplay(
-              parsed.nodes,
-              parsed.edges,
-              {
-                diagramType: parsed.diagramType,
-              }
-            );
+          const result = await importDiagramDocumentJson({
+            json: ev.target?.result as string,
+            importStart,
+          });
+
+          if (result.ok) {
             recordHistory();
-            setNodes(composedNodes);
-            setEdges(composedEdges);
-            updateTab(activeTabId, { diagramType: parsed.diagramType, playback: parsed.playback });
-            parsed.warnings.forEach((message) => addToast(message, 'warning'));
-            const report = buildImportFidelityReport({
-              source: 'json',
-              nodeCount: composedNodes.length,
-              edgeCount: composedEdges.length,
-              elapsedMs: Math.round(performance.now() - importStart),
-              issues: parsed.warnings.map((warning) => mapWarningToIssue(warning)),
-            });
-            persistLatestImportReport(report);
-            addToast(summarizeImportReport(report), report.summary.warningCount > 0 ? 'warning' : 'success');
-            addToast('Diagram loaded successfully!', 'success');
+            setNodes(result.nodes);
+            setEdges(result.edges);
+            updateTab(activeTabId, { diagramType: result.diagramType, playback: result.playback });
+            result.warnings.forEach((message) => addToast(message, 'warning'));
+            notifyOperationOutcome(addToast, result.outcome);
             setTimeout(() => fitView({ duration: 800, padding: 0.2 }), 100);
-          } catch (error) {
-            const message = error instanceof Error ? error.message : 'Failed to parse JSON file. Please check the format.';
-            const report = buildImportFidelityReport({
-              source: 'json',
-              nodeCount: 0,
-              edgeCount: 0,
-              elapsedMs: Math.round(performance.now() - importStart),
-              issues: [mapErrorToIssue(message)],
-            });
-            persistLatestImportReport(report);
-            addToast(summarizeImportReport(report), 'error');
-            addToast(message, 'error');
+            return;
           }
+
+          notifyOperationOutcome(addToast, result.outcome);
         })();
       };
       reader.readAsText(file);
@@ -398,5 +402,17 @@ export const useFlowExport = (
     [recordHistory, setNodes, setEdges, fitView, addToast, activeTabId, updateTab]
   );
 
-  return { fileInputRef, handleExport, handleSvgExport, handleAnimatedExport, handleExportJSON, handleImportJSON, onFileImport };
+  return {
+    fileInputRef,
+    handleExport,
+    handleCopyImage,
+    handleSvgExport,
+    handleCopySvg,
+    handlePdfExport,
+    handleCinematicExport,
+    handleExportJSON,
+    handleCopyJSON,
+    handleImportJSON,
+    onFileImport,
+  };
 };
diff --git a/src/hooks/useFlowHistory.test.ts b/src/hooks/useFlowHistory.test.ts
index b2f973c..e738f08 100644
--- a/src/hooks/useFlowHistory.test.ts
+++ b/src/hooks/useFlowHistory.test.ts
@@ -30,22 +30,6 @@ function setDualNodeState(version: string): void {
     useFlowStore.getState().setEdges([createEdge(`e-${version}`, 'n1', 'n2')]);
 }
 
-function setLargeGraphState(version: number, nodeCount = 120): void {
-    const nodes: FlowNode[] = Array.from({ length: nodeCount }, (_, index) => ({
-        id: `n${version}-${index}`,
-        type: 'process',
-        position: { x: index * 10, y: version * 5 },
-        data: { label: `Node-${version}-${index}-payload-${'x'.repeat(32)}`, subLabel: '', color: 'blue' },
-    }));
-    const edges: FlowEdge[] = Array.from({ length: Math.max(0, nodeCount - 1) }, (_, index) => ({
-        id: `e${version}-${index}`,
-        source: `n${version}-${index}`,
-        target: `n${version}-${index + 1}`,
-    }));
-    useFlowStore.getState().setNodes(nodes);
-    useFlowStore.getState().setEdges(edges);
-}
-
 function setMemoryHeavyGraphState(version: number, nodeCount = 180, payloadSize = 256): void {
     const payload = 'm'.repeat(payloadSize);
     const nodes: FlowNode[] = Array.from({ length: nodeCount }, (_, index) => ({
diff --git a/src/hooks/useFlowOperations.ts b/src/hooks/useFlowOperations.ts
index 93b44c4..7cceae6 100644
--- a/src/hooks/useFlowOperations.ts
+++ b/src/hooks/useFlowOperations.ts
@@ -2,6 +2,7 @@ import { useNodeOperations } from './useNodeOperations';
 import { useEdgeOperations } from './useEdgeOperations';
 import { useLayoutOperations } from './useLayoutOperations';
 import { useClipboardOperations } from './useClipboardOperations';
+import { useStyleClipboard } from './useStyleClipboard';
 import { useTranslation } from 'react-i18next';
 import { useFlowCoreActions } from './flow-operations/useFlowCoreActions';
 import { useCanvasActions } from '@/store/canvasHooks';
@@ -20,6 +21,7 @@ export const useFlowOperations = (
   const edgeOps = useEdgeOperations(recordHistory, onShowConnectMenu);
   const layoutOps = useLayoutOperations(recordHistory);
   const clipboardOps = useClipboardOperations(recordHistory);
+  const styleClipboardOps = useStyleClipboard(recordHistory);
   const coreOps = useFlowCoreActions({
     setSelectedNodeId,
     setSelectedEdgeId,
@@ -34,6 +36,7 @@ export const useFlowOperations = (
     ...edgeOps,
     ...layoutOps,
     ...clipboardOps,
+    ...styleClipboardOps,
     ...coreOps,
   };
 };
diff --git a/src/hooks/useInfraSync.ts b/src/hooks/useInfraSync.ts
new file mode 100644
index 0000000..1d167d8
--- /dev/null
+++ b/src/hooks/useInfraSync.ts
@@ -0,0 +1,80 @@
+import { useState, useCallback, useRef } from 'react';
+import { parseTerraformState } from '@/services/infraSync/terraformStateParser';
+import { parseKubernetesManifests } from '@/services/infraSync/kubernetesParser';
+import { parseDockerCompose } from '@/services/infraSync/dockerComposeParser';
+import { infraSyncResultToDsl } from '@/services/infraSync/infraToDsl';
+import type { InfraFormat, InfraSyncResult } from '@/services/infraSync/types';
+
+interface UseInfraSyncState {
+    result: InfraSyncResult | null;
+    dsl: string | null;
+    isParsing: boolean;
+    error: string | null;
+}
+
+interface UseInfraSyncReturn extends UseInfraSyncState {
+    parse: (input: string, format: InfraFormat) => Promise<void>;
+    refresh: () => Promise<void>;
+    reset: () => void;
+}
+
+export function useInfraSync(onHclAnalysis?: (text: string) => Promise<void>): UseInfraSyncReturn {
+    const [state, setState] = useState<UseInfraSyncState>({
+        result: null,
+        dsl: null,
+        isParsing: false,
+        error: null,
+    });
+
+    const lastInputRef = useRef<string | null>(null);
+    const lastFormatRef = useRef<InfraFormat | null>(null);
+
+    const parse = useCallback(
+        async (input: string, format: InfraFormat): Promise<void> => {
+            lastInputRef.current = input;
+            lastFormatRef.current = format;
+
+            setState((prev) => ({ ...prev, isParsing: true, error: null }));
+
+            try {
+                if (format === 'terraform-hcl') {
+                    if (onHclAnalysis) {
+                        await onHclAnalysis(input);
+                    }
+                    setState((prev) => ({ ...prev, isParsing: false }));
+                    return;
+                }
+
+                let syncResult: InfraSyncResult;
+                if (format === 'terraform-state') {
+                    syncResult = parseTerraformState(input);
+                } else if (format === 'kubernetes') {
+                    syncResult = parseKubernetesManifests(input);
+                } else {
+                    syncResult = parseDockerCompose(input);
+                }
+
+                const dsl = infraSyncResultToDsl(syncResult);
+                setState({ result: syncResult, dsl, isParsing: false, error: null });
+            } catch (err) {
+                const message = err instanceof Error ? err.message : 'Failed to parse infrastructure file';
+                setState((prev) => ({ ...prev, isParsing: false, error: message }));
+            }
+        },
+        [onHclAnalysis]
+    );
+
+    const refresh = useCallback(async (): Promise<void> => {
+        if (lastInputRef.current && lastFormatRef.current) {
+            await parse(lastInputRef.current, lastFormatRef.current);
+        }
+    }, [parse]);
+
+    const reset = useCallback((): void => {
+        lastInputRef.current = null;
+        lastFormatRef.current = null;
+        setState({ result: null, dsl: null, isParsing: false, error: null });
+    }, []);
+
+    return { ...state, parse, refresh, reset };
+}
diff --git a/src/hooks/useInlineNodeTextEdit.test.ts b/src/hooks/useInlineNodeTextEdit.test.ts
index 3fc43ff..89e7afb 100644
--- a/src/hooks/useInlineNodeTextEdit.test.ts
+++ b/src/hooks/useInlineNodeTextEdit.test.ts
@@ -6,12 +6,6 @@ import { describe, expect, it, vi } from 'vitest';
 import { useInlineNodeTextEdit } from './useInlineNodeTextEdit';
 import { requestNodeLabelEdit } from './nodeLabelEditRequest';
 
-vi.mock('@/config/rolloutFlags', () => ({
-  ROLLOUT_FLAGS: {
-    canvasInteractionsV1: true,
-  },
-}));
-
 describe('useInlineNodeTextEdit', () => {
   it('creates connected sibling when Tab is pressed while editing', () => {
     const nodeId = createId('node');
diff --git a/src/hooks/useInlineNodeTextEdit.ts b/src/hooks/useInlineNodeTextEdit.ts
index 9e8237c..d53c8d9 100644
--- a/src/hooks/useInlineNodeTextEdit.ts
+++ b/src/hooks/useInlineNodeTextEdit.ts
@@ -2,7 +2,6 @@ import { useCallback, useState } from 'react';
 import type { KeyboardEvent } from 'react';
 import { useFlowStore } from '@/store';
 import type { NodeData } from '@/lib/types';
-import { ROLLOUT_FLAGS } from '@/config/rolloutFlags';
 import { createConnectedSibling } from './node-operations/createConnectedSibling';
 import { useNodeLabelEditRequest } from './nodeLabelEditRequest';
 
@@ -30,7 +29,7 @@ export function useInlineNodeTextEdit(
   cancel: () => void;
   handleKeyDown: (event: KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
 } {
-  const { setNodes } = useFlowStore();
+  const { setNodes, recordHistoryV2 } = useFlowStore();
   const [isEditing, setIsEditing] = useState(false);
   const [draft, setDraftState] = useState(initialValue ?? '');
   const multiline = options.multiline ?? false;
@@ -52,6 +51,7 @@ export function useInlineNodeTextEdit(
 
   const commit = useCallback(() => {
     const nextValue = draft.trim();
+    recordHistoryV2();
     setNodes((nodes) =>
       nodes.map((node) =>
         node.id === nodeId
@@ -66,7 +66,7 @@ export function useInlineNodeTextEdit(
       )
     );
     setIsEditing(false);
-  }, [draft, field, nodeId, setNodes]);
+  }, [draft, field, nodeId, setNodes, recordHistoryV2]);
 
   const cancel = useCallback(() => {
     setDraftState(initialValue ?? '');
@@ -94,9 +94,7 @@ export function useInlineNodeTextEdit(
       if (event.key === 'Tab' && !event.shiftKey && allowTabCreateSibling) {
         event.preventDefault();
         commit();
-        if (ROLLOUT_FLAGS.canvasInteractionsV1) {
-          createConnectedSibling(nodeId);
-        }
+        createConnectedSibling(nodeId);
       }
     },
     [allowTabCreateSibling, cancel, commit, multiline, nodeId]
diff --git a/src/hooks/useKeyboardShortcuts.test.ts b/src/hooks/useKeyboardShortcuts.test.ts
index ab19d3e..9194ff9 100644
--- a/src/hooks/useKeyboardShortcuts.test.ts
+++ b/src/hooks/useKeyboardShortcuts.test.ts
@@ -2,12 +2,6 @@ import { renderHook } from '@testing-library/react';
 import { afterEach, describe, expect, it, vi } from 'vitest';
 import { useKeyboardShortcuts } from './useKeyboardShortcuts';
 
-vi.mock('@/config/rolloutFlags', () => ({
-  ROLLOUT_FLAGS: {
-    canvasInteractionsV1: true,
-  },
-}));
-
 function renderShortcuts(overrides: Partial<Parameters<typeof useKeyboardShortcuts>[0]> = {}): void {
   const baseHandlers = {
     selectedNodeId: 'node-1',
@@ -143,4 +137,43 @@ describe('useKeyboardShortcuts', () => {
 
     expect(deleteEdge).toHaveBeenCalledWith('edge-1');
   });
+
+  it('copies style on Cmd/Ctrl+Alt+C outside editable fields', () => {
+    const onCopyStyle = vi.fn();
+    renderShortcuts({ onCopyStyle });
+
+    window.dispatchEvent(new KeyboardEvent('keydown', { key: 'c', ctrlKey: true, altKey: true }));
+
+    expect(onCopyStyle).toHaveBeenCalledTimes(1);
+  });
+
+  it('pastes style on Cmd/Ctrl+Alt+V outside editable fields', () => {
+    const onPasteStyle = vi.fn();
+    renderShortcuts({ onPasteStyle });
+
+    window.dispatchEvent(new KeyboardEvent('keydown', { key: 'v', ctrlKey: true, altKey: true }));
+
+    expect(onPasteStyle).toHaveBeenCalledTimes(1);
+  });
+
+  it('creates a connected node on Alt+Arrow', () => {
+    const onQuickCreateShortcut = vi.fn();
+    renderShortcuts({ onQuickCreateShortcut });
+
+    window.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', altKey: true }));
+
+    expect(onQuickCreateShortcut).toHaveBeenCalledWith('right');
+  });
+
+  it('applies annotation colors with number shortcuts', () => {
+    const onAnnotationColorShortcut = vi.fn();
+    renderShortcuts({
+      selectedNodeType: 'annotation',
+      onAnnotationColorShortcut,
+    });
+
+    window.dispatchEvent(new KeyboardEvent('keydown', { key: '3' }));
+
+    expect(onAnnotationColorShortcut).toHaveBeenCalledWith('blue');
+  });
 });
diff --git a/src/hooks/useKeyboardShortcuts.ts b/src/hooks/useKeyboardShortcuts.ts
index 6cfecc3..eecfb07 100644
--- a/src/hooks/useKeyboardShortcuts.ts
+++ b/src/hooks/useKeyboardShortcuts.ts
@@ -1,5 +1,4 @@
 import { useEffect } from 'react';
-import { ROLLOUT_FLAGS } from '@/config/rolloutFlags';
 import { requestNodeLabelEdit } from './nodeLabelEditRequest';
 
 interface ShortcutHandlers {
@@ -22,6 +21,14 @@ interface ShortcutHandlers {
   onFitView?: () => void;
   onZoomIn?: () => void;
   onZoomOut?: () => void;
+  onCopy?: () => void;
+  onPaste?: () => void;
+  onCopyStyle?: () => void;
+  onPasteStyle?: () => void;
+  onQuickCreateShortcut?: (direction: 'up' | 'right' | 'down' | 'left') => void;
+  onAnnotationColorShortcut?: (color: 'yellow' | 'green' | 'blue' | 'pink' | 'violet' | 'orange') => void;
+  onClearSelection?: () => void;
+  onNudge?: (dx: number, dy: number) => void;
 }
 
 export function useKeyboardShortcuts({
@@ -44,6 +51,14 @@ export function useKeyboardShortcuts({
   onFitView,
   onZoomIn,
   onZoomOut,
+  onCopy,
+  onPaste,
+  onCopyStyle,
+  onPasteStyle,
+  onQuickCreateShortcut,
+  onAnnotationColorShortcut,
+  onClearSelection,
+  onNudge,
 }: ShortcutHandlers): void {
   useEffect(() => {
     const isEditableActiveElement = (): boolean => {
@@ -156,6 +171,39 @@ export function useKeyboardShortcuts({
         }
       }
 
+      if (!isCmdOrCtrl && e.altKey && !isEditable) {
+        if (e.key === 'ArrowUp') {
+          e.preventDefault();
+          onQuickCreateShortcut?.('up');
+          return;
+        }
+        if (e.key === 'ArrowRight') {
+          e.preventDefault();
+          onQuickCreateShortcut?.('right');
+          return;
+        }
+        if (e.key === 'ArrowDown') {
+          e.preventDefault();
+          onQuickCreateShortcut?.('down');
+          return;
+        }
+        if (e.key === 'ArrowLeft') {
+          e.preventDefault();
+          onQuickCreateShortcut?.('left');
+          return;
+        }
+      }
+
+      if (!isCmdOrCtrl && !isEditable && selectedNodeType === 'annotation') {
+        const annotationColors = ['yellow', 'green', 'blue', 'pink', 'violet', 'orange'] as const;
+        const shortcutIndex = Number(e.key) - 1;
+        if (shortcutIndex >= 0 && shortcutIndex < annotationColors.length) {
+          e.preventDefault();
+          onAnnotationColorShortcut?.(annotationColors[shortcutIndex]);
+          return;
+        }
+      }
+
       // Mindmap quick-add sibling (Enter)
       if (!isCmdOrCtrl && !isShift && e.key === 'Enter') {
         if (isEditable) return;
@@ -169,7 +217,6 @@ export function useKeyboardShortcuts({
       // Enter inline label edit for selected node (F2)
       if (e.key === 'F2') {
         if (isEditable) return;
-        if (!ROLLOUT_FLAGS.canvasInteractionsV1) return;
         if (!selectedNodeId) return;
         e.preventDefault();
         requestNodeLabelEdit(selectedNodeId);
@@ -179,7 +226,6 @@ export function useKeyboardShortcuts({
       const isPrintableCharacter = e.key.length === 1 && !isCmdOrCtrl && !e.altKey;
       if (isPrintableCharacter) {
         if (isEditable) return;
-        if (!ROLLOUT_FLAGS.canvasInteractionsV1) return;
         if (!selectedNodeId) return;
         e.preventDefault();
         requestNodeLabelEdit(selectedNodeId, {
@@ -197,6 +243,41 @@ export function useKeyboardShortcuts({
           selectAll();
         }
       }
+
+      // Copy (Cmd+C)
+      if (isCmdOrCtrl && key === 'c' && !isEditable) {
+        onCopy?.();
+        // Don't preventDefault — let browser clipboard also work
+      }
+
+      if (isCmdOrCtrl && e.altKey && key === 'c' && !isEditable) {
+        e.preventDefault();
+        onCopyStyle?.();
+      }
+
+      // Paste (Cmd+V)
+      if (isCmdOrCtrl && key === 'v' && !isEditable) {
+        onPaste?.();
+      }
+
+      if (isCmdOrCtrl && e.altKey && key === 'v' && !isEditable) {
+        e.preventDefault();
+        onPasteStyle?.();
+      }
+
+      // Escape — deselect / clear selection
+      if (e.key === 'Escape' && !isEditable) {
+        onClearSelection?.();
+      }
+
+      // Arrow key nudge (1px; Shift = 10px)
+      if (!isCmdOrCtrl && !isEditable) {
+        const nudgeDist = isShift ? 10 : 1;
+        if (e.key === 'ArrowLeft')  { e.preventDefault(); onNudge?.(-nudgeDist, 0); }
+        if (e.key === 'ArrowRight') { e.preventDefault(); onNudge?.(nudgeDist, 0); }
+        if (e.key === 'ArrowUp')    { e.preventDefault(); onNudge?.(0, -nudgeDist); }
+        if (e.key === 'ArrowDown')  { e.preventDefault(); onNudge?.(0, nudgeDist); }
+      }
     };
 
     window.addEventListener('keydown', handleKeyDown);
@@ -204,5 +285,5 @@ export function useKeyboardShortcuts({
     return () => {
       window.removeEventListener('keydown', handleKeyDown);
     };
-  }, [selectedNodeId, selectedEdgeId, selectedNodeType, deleteNode, deleteEdge, undo, redo, duplicateNode, selectAll, onAddMindmapChildShortcut, onAddMindmapSiblingShortcut, onCommandBar, onSearch, onShortcutsHelp, onSelectMode, onPanMode, onFitView, onZoomIn, onZoomOut]);
+  }, [selectedNodeId, selectedEdgeId, selectedNodeType, deleteNode, deleteEdge, undo, redo, duplicateNode, selectAll, onAddMindmapChildShortcut, onAddMindmapSiblingShortcut, onCommandBar, onSearch, onShortcutsHelp, onSelectMode, onPanMode, onFitView, onZoomIn, onZoomOut, onCopy, onPaste, onCopyStyle, onPasteStyle, onQuickCreateShortcut, onAnnotationColorShortcut, onClearSelection, onNudge]);
 }
diff --git a/src/hooks/useNodeOperations.ts b/src/hooks/useNodeOperations.ts
index a15a3cc..91a7b7d 100644
--- a/src/hooks/useNodeOperations.ts
+++ b/src/hooks/useNodeOperations.ts
@@ -1,45 +1,35 @@
-import { useCallback, useEffect, useRef } from 'react';
+import { useCallback } from 'react';
 import { useReactFlow } from '@/lib/reactflowCompat';
 import type { FlowNode, NodeData } from '@/lib/types';
-import { setNodeParent } from '@/lib/nodeParent';
 import { useFlowStore } from '../store';
-import { assignSmartHandlesWithOptions, getSmartRoutingOptionsFromViewSettings } from '../services/smartEdgeRouting';
 import { useTranslation } from 'react-i18next';
 import { createId } from '../lib/id';
-import { createDefaultEdge, createMindmapEdge } from '@/constants';
-import { releaseStaleElkRoutesForNodeIds } from '@/lib/releaseStaleElkRoutes';
-import { reconcileMindmapDrop, relayoutMindmapComponent, resolveMindmapBranchStyleForNode, syncMindmapEdges } from '@/lib/mindmapLayout';
-import {
-    applySectionParenting,
-    createArchitectureServiceNode,
-    createMindmapTopicNode,
-    createSectionNode,
-    getAbsoluteNodePosition,
-    reassignArchitectureNodeBoundary,
-} from './node-operations/utils';
-import { getDragStopReconcileDelayMs } from './node-operations/dragStopReconcilePolicy';
+import { relayoutMindmapComponent, syncMindmapEdges } from '@/lib/mindmapLayout';
+import { applyMindmapVisibility, getMindmapChildrenById, getMindmapDescendantIds } from '@/lib/mindmapTree';
+import { reassignArchitectureNodeBoundary } from './node-operations/utils';
 import { useNodeOperationAdders } from './node-operations/useNodeOperationAdders';
-import { requestNodeLabelEdit } from './nodeLabelEditRequest';
-import { resolveMindmapChildSide } from '@/lib/connectCreationPolicy';
-import type { MindmapTopicSide } from './mindmapTopicActionRequest';
+import { useMindmapNodeOperations } from './node-operations/useMindmapNodeOperations';
+import { useArchitectureNodeOperations } from './node-operations/useArchitectureNodeOperations';
+import { useNodeDragOperations } from './node-operations/useNodeDragOperations';
+import { syncSequenceEdgeParticipantKinds } from '@/services/sequence/sequenceMessage';
 
 export const useNodeOperations = (recordHistory: () => void) => {
     useTranslation();
     const { nodes, setNodes, setEdges, setSelectedNodeId } = useFlowStore();
     useReactFlow();
-    const dragStopReconcileTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-    const altDragDuplicateRef = useRef<{
-        originalNodeId: string;
-        duplicateNodeId: string;
-        originalPosition: FlowNode['position'];
-    } | null>(null);
 
-    useEffect(() => {
-        return () => {
-            if (dragStopReconcileTimerRef.current !== null) {
-                clearTimeout(dragStopReconcileTimerRef.current);
-            }
-        };
+    const mindmapOps = useMindmapNodeOperations(recordHistory);
+    const archOps = useArchitectureNodeOperations(recordHistory);
+    const dragOps = useNodeDragOperations(recordHistory);
+
+    const applyMindmapBranchColor = useCallback((nodesToUpdate: FlowNode[], nodeId: string, color: string) => {
+        const childrenById = getMindmapChildrenById(nodesToUpdate, useFlowStore.getState().edges);
+        const branchIds = new Set<string>([nodeId, ...getMindmapDescendantIds(nodeId, childrenById)]);
+        return nodesToUpdate.map((node) => (
+            branchIds.has(node.id)
+                ? { ...node, data: { ...node.data, color, ...(color === 'custom' ? {} : { customColor: undefined }) } }
+                : node
+        ));
     }, []);
 
     // --- Node Data Updates ---
@@ -50,21 +40,32 @@ export const useNodeOperations = (recordHistory: () => void) => {
             return;
         }
 
-        if (existingNode.type === 'mindmap' && typeof data.mindmapBranchStyle === 'string') {
-            const nextNodes = relayoutMindmapComponent(
-                state.nodes.map((node) => (
-                    node.id === id
-                        ? { ...node, data: { ...node.data, ...data } }
-                        : node
-                )),
-                state.edges,
-                id
-            );
-            setNodes(() => nextNodes);
-            setEdges((existingEdges) => syncMindmapEdges(nextNodes, existingEdges));
+        if (existingNode.type === 'mindmap') {
+            let nextNodes = state.nodes.map((node) => (
+                node.id === id
+                    ? { ...node, data: { ...node.data, ...data } }
+                    : node
+            ));
+
+            if (typeof data.color === 'string') {
+                nextNodes = applyMindmapBranchColor(nextNodes, id, data.color);
+            }
+
+            if (typeof data.mindmapBranchStyle === 'string' || typeof data.mindmapCollapsed === 'boolean' || typeof data.color === 'string') {
+                nextNodes = relayoutMindmapComponent(nextNodes, state.edges, id);
+            }
+
+            const nextEdges = syncMindmapEdges(nextNodes, state.edges);
+            const visibilityState = applyMindmapVisibility(nextNodes, nextEdges);
+            setNodes(() => visibilityState.nodes);
+            setEdges(() => visibilityState.edges);
             return;
         }
 
+        const updatesSequenceParticipantKind = existingNode.type === 'sequence_participant'
+            && typeof data.seqParticipantKind === 'string'
+            && data.seqParticipantKind !== existingNode.data.seqParticipantKind;
+
         setNodes((nds) => {
             return reassignArchitectureNodeBoundary({
                 nodes: nds,
@@ -72,7 +73,18 @@ export const useNodeOperations = (recordHistory: () => void) => {
                 data,
             });
         });
-    }, [setEdges, setNodes]);
+
+        if (updatesSequenceParticipantKind) {
+            setEdges((existingEdges) => {
+                const nextNodes = state.nodes.map((node) => (
+                    node.id === id
+                        ? { ...node, data: { ...node.data, ...data } }
+                        : node
+                ));
+                return syncSequenceEdgeParticipantKinds(nextNodes, existingEdges);
+            });
+        }
+    }, [applyMindmapBranchColor, setEdges, setNodes]);
 
     const applyBulkNodeData = useCallback((updates: Partial<NodeData>, labelPrefix = '', labelSuffix = '') => {
         const hasFieldUpdates = Object.keys(updates).length > 0;
@@ -157,6 +169,9 @@ export const useNodeOperations = (recordHistory: () => void) => {
         handleAddJourneyNode,
         handleAddMindmapNode,
         handleAddArchitectureNode,
+        handleAddSequenceParticipant,
+        handleAddClassNode,
+        handleAddEntityNode,
         handleAddSection,
         handleAddTextNode,
         handleAddImage,
@@ -169,314 +184,6 @@ export const useNodeOperations = (recordHistory: () => void) => {
         setSelectedNodeId,
     });
 
-    const insertMindmapTopic = useCallback((
-        sourceNodeId: string,
-        relationship: 'child' | 'sibling',
-        preferredSideOverride: MindmapTopicSide = null
-    ): boolean => {
-        const state = useFlowStore.getState();
-        const sourceNode = state.nodes.find((node) => node.id === sourceNodeId);
-        if (!sourceNode || sourceNode.type !== 'mindmap') {
-            return false;
-        }
-
-        const parentId = relationship === 'child' ? sourceNode.id : sourceNode.data?.mindmapParentId;
-        if (!parentId) {
-            return false;
-        }
-
-        const parentNode = state.nodes.find((node) => node.id === parentId);
-        if (!parentNode || parentNode.type !== 'mindmap') {
-            return false;
-        }
-
-        const sourceDepth = typeof sourceNode.data?.mindmapDepth === 'number' ? sourceNode.data.mindmapDepth : 0;
-        const parentDepth = typeof parentNode.data?.mindmapDepth === 'number' ? parentNode.data.mindmapDepth : 0;
-        const id = createId('mm');
-        const { activeLayerId, viewSettings } = state;
-        const inheritedSide = sourceNode.data?.mindmapSide === 'left' || sourceNode.data?.mindmapSide === 'right'
-            ? sourceNode.data.mindmapSide
-            : parentNode.data?.mindmapSide;
-        const preferredSide = preferredSideOverride ?? resolveMindmapChildSide(parentDepth, inheritedSide, null);
-        const branchStyle = resolveMindmapBranchStyleForNode(parentNode.id, state.nodes);
-
-        const newNode = createMindmapTopicNode({
-            id,
-            position: {
-                x: sourceNode.position.x + 260,
-                y: sourceNode.position.y,
-            },
-            depth: relationship === 'child' ? sourceDepth + 1 : parentDepth + 1,
-            parentId: parentNode.id,
-            side: preferredSide,
-            branchStyle,
-            layerId: activeLayerId,
-        });
-        const insertedEdge = createMindmapEdge(parentNode, newNode, undefined, undefined, branchStyle);
-        const nextNodes = relayoutMindmapComponent(
-            [
-                ...state.nodes.map((node) => ({ ...node, selected: false })),
-                newNode,
-            ],
-            state.edges.concat(insertedEdge),
-            sourceNode.id
-        );
-
-        recordHistory();
-        setNodes(() => nextNodes);
-        setEdges((existingEdges) => {
-                const insertedEdges = syncMindmapEdges(nextNodes, existingEdges.concat(insertedEdge));
-                if (!viewSettings.smartRoutingEnabled) {
-                    return insertedEdges;
-                }
-            return assignSmartHandlesWithOptions(
-                nextNodes,
-                insertedEdges,
-                getSmartRoutingOptionsFromViewSettings(viewSettings)
-            );
-        });
-        setSelectedNodeId(id);
-        requestNodeLabelEdit(id, { replaceExisting: true });
-        return true;
-    }, [recordHistory, setEdges, setNodes, setSelectedNodeId]);
-
-    const handleAddMindmapChild = useCallback((parentId: string, preferredSide: MindmapTopicSide = null): boolean => {
-        return insertMindmapTopic(parentId, 'child', preferredSide);
-    }, [insertMindmapTopic]);
-
-    const handleAddMindmapSibling = useCallback((nodeId: string): boolean => {
-        return insertMindmapTopic(nodeId, 'sibling');
-    }, [insertMindmapTopic]);
-
-    const handleAddArchitectureService = useCallback((sourceId: string): boolean => {
-        const state = useFlowStore.getState();
-        const sourceNode = state.nodes.find((node) => node.id === sourceId);
-        if (!sourceNode || sourceNode.type !== 'architecture') {
-            return false;
-        }
-
-        const id = createId('arch');
-        const { activeLayerId, viewSettings } = state;
-        const sameBoundaryNodes = state.nodes.filter(
-            (node) => node.type === 'architecture' && node.data?.archBoundaryId === sourceNode.data?.archBoundaryId
-        );
-        const yOffset = sameBoundaryNodes.length * 90;
-
-        const newNode = createArchitectureServiceNode({
-            id,
-            position: {
-                x: sourceNode.position.x + 260,
-                y: sourceNode.position.y + yOffset,
-            },
-            sourceNode,
-            layerId: activeLayerId,
-        });
-
-        recordHistory();
-        setNodes((existingNodes) => [
-            ...existingNodes.map((node) => ({ ...node, selected: false })),
-            newNode,
-        ]);
-        setEdges((existingEdges) => {
-            const insertedEdges = existingEdges.concat(createDefaultEdge(sourceId, id));
-            if (!viewSettings.smartRoutingEnabled) {
-                return insertedEdges;
-            }
-            return assignSmartHandlesWithOptions(
-                useFlowStore.getState().nodes.concat(newNode),
-                insertedEdges,
-                getSmartRoutingOptionsFromViewSettings(viewSettings)
-            );
-        });
-        setSelectedNodeId(id);
-        return true;
-    }, [recordHistory, setNodes, setEdges, setSelectedNodeId]);
-
-    const handleCreateArchitectureBoundary = useCallback((sourceId: string): boolean => {
-        const state = useFlowStore.getState();
-        const sourceNode = state.nodes.find((node) => node.id === sourceId);
-        if (!sourceNode || sourceNode.type !== 'architecture') {
-            return false;
-        }
-        const sourceAbsolutePosition = getAbsoluteNodePosition(sourceNode, state.nodes);
-
-        const boundaryId = createId('section');
-        const { activeLayerId } = state;
-        const boundaryLabel = `${sourceNode.data?.label || 'System'} Boundary`;
-        const boundaryNode = createSectionNode(
-            boundaryId,
-            { x: sourceAbsolutePosition.x - 80, y: sourceAbsolutePosition.y - 70 },
-            boundaryLabel
-        );
-        boundaryNode.style = { width: 360, height: 260 };
-        boundaryNode.data = {
-            ...boundaryNode.data,
-            layerId: activeLayerId,
-            archBoundaryId: boundaryId,
-        };
-
-        recordHistory();
-        setNodes((existingNodes) => {
-            const nextNodes: FlowNode[] = existingNodes.map((node) => {
-                if (node.id === sourceId) {
-                    return setNodeParent({
-                        ...node,
-                        position: {
-                            x: sourceAbsolutePosition.x - boundaryNode.position.x,
-                            y: sourceAbsolutePosition.y - boundaryNode.position.y,
-                        },
-                        data: {
-                            ...node.data,
-                            archBoundaryId: boundaryId,
-                        },
-                        selected: true,
-                    }, boundaryId);
-                }
-                return { ...node, selected: false };
-            });
-            nextNodes.push({ ...boundaryNode, selected: false });
-            return nextNodes;
-        });
-        setSelectedNodeId(sourceId);
-        return true;
-    }, [recordHistory, setNodes, setSelectedNodeId]);
-
-    // --- Drag Operations ---
-    const onNodeDragStart = useCallback((event: React.MouseEvent, node: FlowNode) => {
-        recordHistory();
-
-        // Alt + Drag Duplication
-        if (event.altKey) {
-            const newNodeId = createId();
-            const newNode: FlowNode = {
-                ...node,
-                id: newNodeId,
-                selected: true,
-                position: { ...node.position },
-                zIndex: (node.zIndex || 0) + 1,
-            };
-
-            altDragDuplicateRef.current = {
-                originalNodeId: node.id,
-                duplicateNodeId: newNodeId,
-                originalPosition: { ...node.position },
-            };
-            setNodes((nds) => [
-                ...nds.map((existingNode) => ({
-                    ...existingNode,
-                    selected: existingNode.id === newNodeId ? true : existingNode.id === node.id ? false : existingNode.selected,
-                })),
-                newNode,
-            ]);
-            setSelectedNodeId(newNodeId);
-        }
-    }, [recordHistory, setNodes, setSelectedNodeId]);
-
-    const onNodeDrag = useCallback((_event: React.MouseEvent, draggedNode: FlowNode, _draggedNodes: FlowNode[]) => {
-        const altDragDuplicate = altDragDuplicateRef.current;
-        if (altDragDuplicate && altDragDuplicate.originalNodeId === draggedNode.id) {
-            setNodes((currentNodes) => currentNodes.map((node) => {
-                if (node.id === altDragDuplicate.originalNodeId) {
-                    return {
-                        ...node,
-                        position: { ...altDragDuplicate.originalPosition },
-                        selected: false,
-                    };
-                }
-
-                if (node.id === altDragDuplicate.duplicateNodeId) {
-                    return {
-                        ...node,
-                        position: { ...draggedNode.position },
-                        selected: true,
-                    };
-                }
-
-                return node;
-            }));
-            setSelectedNodeId(altDragDuplicate.duplicateNodeId);
-        }
-
-        // Intentionally no smart-routing work during active drag to protect frame budget.
-        // Full reconciliation still runs on drag stop via `onNodeDragStop`.
-    }, [setNodes, setSelectedNodeId]);
-
-    const onNodeDragStop = useCallback((_event: React.MouseEvent, draggedNode: FlowNode) => {
-        const altDragDuplicate = altDragDuplicateRef.current;
-        const effectiveDraggedNode = altDragDuplicate && altDragDuplicate.originalNodeId === draggedNode.id
-            ? useFlowStore.getState().nodes.find((node) => node.id === altDragDuplicate.duplicateNodeId) ?? draggedNode
-            : draggedNode;
-        altDragDuplicateRef.current = null;
-
-        const { nodes: currentNodes } = useFlowStore.getState();
-        const parentedNodes = applySectionParenting(currentNodes, effectiveDraggedNode);
-        let reconciledNodes = parentedNodes;
-        let currentEdges = useFlowStore.getState().edges;
-
-        if (effectiveDraggedNode.type === 'mindmap') {
-            const mindmapDropResult = reconcileMindmapDrop(parentedNodes, currentEdges, effectiveDraggedNode.id);
-            if (mindmapDropResult.changed) {
-                reconciledNodes = mindmapDropResult.nodes;
-                currentEdges = mindmapDropResult.edges;
-                setNodes(reconciledNodes);
-                setEdges(currentEdges);
-            } else if (parentedNodes !== currentNodes) {
-                setNodes(parentedNodes);
-            }
-        } else if (parentedNodes !== currentNodes) {
-            setNodes(parentedNodes);
-        }
-
-        const runReconcile = () => {
-            const { nodes: latestNodes, edges: latestEdges, setEdges: setLatestEdges, viewSettings } = useFlowStore.getState();
-            const movedNodeIds = new Set(
-                latestNodes.filter((node) => node.selected).map((node) => node.id)
-            );
-            if (effectiveDraggedNode.id) {
-                movedNodeIds.add(effectiveDraggedNode.id);
-            }
-
-            const releasedEdges = releaseStaleElkRoutesForNodeIds(latestEdges, movedNodeIds);
-            if (!viewSettings.smartRoutingEnabled) {
-                if (releasedEdges !== latestEdges) {
-                    setLatestEdges(releasedEdges);
-                }
-                return;
-            }
-            const smartEdges = assignSmartHandlesWithOptions(
-                latestNodes,
-                releasedEdges,
-                getSmartRoutingOptionsFromViewSettings(viewSettings)
-            );
-            setLatestEdges(smartEdges);
-        };
-
-        const delayMs = getDragStopReconcileDelayMs(reconciledNodes.length, currentEdges.length);
-        if (delayMs === 0) {
-            if (dragStopReconcileTimerRef.current !== null) {
-                clearTimeout(dragStopReconcileTimerRef.current);
-                dragStopReconcileTimerRef.current = null;
-            }
-            runReconcile();
-            return;
-        }
-
-        if (dragStopReconcileTimerRef.current !== null) {
-            clearTimeout(dragStopReconcileTimerRef.current);
-        }
-        dragStopReconcileTimerRef.current = setTimeout(() => {
-            dragStopReconcileTimerRef.current = null;
-            runReconcile();
-        }, delayMs);
-
-    }, [setEdges, setNodes]);
-
-    const onNodeDoubleClick = useCallback((_event: React.MouseEvent, node: FlowNode) => {
-        setSelectedNodeId(node.id);
-        requestNodeLabelEdit(node.id);
-    }, [setSelectedNodeId]);
-
-
     return {
         updateNodeData,
         applyBulkNodeData,
@@ -490,18 +197,16 @@ export const useNodeOperations = (recordHistory: () => void) => {
         handleAddJourneyNode,
         handleAddMindmapNode,
         handleAddArchitectureNode,
+        handleAddSequenceParticipant,
+        handleAddClassNode,
+        handleAddEntityNode,
         handleAddSection,
         handleAddTextNode,
         handleAddImage,
         handleAddWireframe,
         handleAddDomainLibraryItem,
-        handleAddMindmapChild,
-        handleAddMindmapSibling,
-        handleAddArchitectureService,
-        handleCreateArchitectureBoundary,
-        onNodeDragStart,
-        onNodeDrag,
-        onNodeDragStop,
-        onNodeDoubleClick
+        ...mindmapOps,
+        ...archOps,
+        ...dragOps,
     };
 };
diff --git a/src/hooks/usePlayback.ts b/src/hooks/usePlayback.ts
index 4d1a82a..beeb633 100644
--- a/src/hooks/usePlayback.ts
+++ b/src/hooks/usePlayback.ts
@@ -1,6 +1,5 @@
 import { useState, useCallback, useEffect, useRef } from 'react';
 import { useReactFlow } from '@/lib/reactflowCompat';
-import { ROLLOUT_FLAGS } from '@/config/rolloutFlags';
 import { useFlowStore } from '../store';
 import {
     applyPlaybackStepStyles,
@@ -23,9 +22,7 @@ export function usePlayback() {
 
     const resolveSequence = useCallback(() => {
         const activeTabPlayback = tabs.find((tab) => tab.id === activeTabId)?.playback;
-        return ROLLOUT_FLAGS.animationTimelineV1
-            ? buildPlaybackSequenceFromState(nodes, activeTabPlayback, playbackSpeed)
-            : buildPlaybackSequence(nodes, playbackSpeed);
+        return buildPlaybackSequenceFromState(nodes, activeTabPlayback, playbackSpeed);
     }, [activeTabId, nodes, playbackSpeed, tabs]);
 
     const restoreStyles = useCallback(() => {
diff --git a/src/hooks/useStoragePressureGuard.ts b/src/hooks/useStoragePressureGuard.ts
index d51ad2e..78753c5 100644
--- a/src/hooks/useStoragePressureGuard.ts
+++ b/src/hooks/useStoragePressureGuard.ts
@@ -1,7 +1,6 @@
 import { useEffect, useRef } from 'react';
 import { estimateTrackedLocalStorageUsageRatio } from '@/lib/storagePressure';
 import { useToast } from '@/components/ui/ToastContext';
-import { ROLLOUT_FLAGS } from '@/config/rolloutFlags';
 
 const WARN_RATIO = 0.7;
 const RESET_RATIO = 0.6;
@@ -19,7 +18,7 @@ export function useStoragePressureGuard({ trigger, onExportJSON }: UseStoragePre
   useEffect(() => {
     if (typeof window === 'undefined') return;
     if (typeof localStorage === 'undefined') return;
-    const indexedDbBackedPersistenceActive = ROLLOUT_FLAGS.indexedDbStorageV1 && typeof indexedDB !== 'undefined';
+    const indexedDbBackedPersistenceActive = typeof indexedDB !== 'undefined';
     if (indexedDbBackedPersistenceActive) return;
 
     const ratio = estimateTrackedLocalStorageUsageRatio(localStorage);
diff --git a/src/hooks/useStructuredListEditor.ts b/src/hooks/useStructuredListEditor.ts
new file mode 100644
index 0000000..3320233
--- /dev/null
+++ b/src/hooks/useStructuredListEditor.ts
@@ -0,0 +1,106 @@
+import React from 'react';
+import { useFlowStore } from '@/store';
+import { getStructuredListNavigationAction } from '@/components/custom-nodes/structuredListNavigation';
+
+export interface StructuredListEditor {
+  editingIndex: number | null;
+  draft: string;
+  setDraft: (value: string) => void;
+  beginEdit: (index: number, value: string) => void;
+  commitEdit: () => void;
+  handleKeyDown: (event: React.KeyboardEvent<HTMLInputElement>, index: number) => void;
+}
+
+/**
+ * Shared hook for editing a list of strings stored in node data (e.g. erFields).
+ *
+ * @param nodeId     — the node being edited
+ * @param items      — the current list of display strings (from component props/data)
+ * @param applyPatch — returns a partial NodeData patch from the updated string list
+ */
+export function useStructuredListEditor(
+  nodeId: string,
+  items: string[],
+  applyPatch: (items: string[]) => Record<string, unknown>,
+): StructuredListEditor {
+  const { setNodes } = useFlowStore();
+
+  const [editingIndex, setEditingIndex] = React.useState<number | null>(null);
+  const [draft, setDraft] = React.useState('');
+
+  const beginEdit = React.useCallback((index: number, value: string) => {
+    setEditingIndex(index);
+    setDraft(value);
+  }, []);
+
+  const mutateList = React.useCallback(
+    (updater: (current: string[]) => string[]) => {
+      setNodes((nodes) =>
+        nodes.map((node) => {
+          if (node.id !== nodeId) return node;
+          return { ...node, data: { ...node.data, ...applyPatch(updater([...items])) } };
+        }),
+      );
+    },
+    [applyPatch, items, nodeId, setNodes],
+  );
+
+  const commitEdit = React.useCallback(() => {
+    if (editingIndex === null) return;
+    const trimmed = draft.trim();
+    if (trimmed) {
+      mutateList((list) => {
+        if (editingIndex >= list.length) list.push(trimmed);
+        else list[editingIndex] = trimmed;
+        return list;
+      });
+    } else if (editingIndex < items.length) {
+      mutateList((list) => { list.splice(editingIndex, 1); return list; });
+    }
+    setEditingIndex(null);
+  }, [draft, editingIndex, items.length, mutateList]);
+
+  const handleKeyDown = React.useCallback(
+    (event: React.KeyboardEvent<HTMLInputElement>, index: number) => {
+      event.stopPropagation();
+      const action = getStructuredListNavigationAction(
+        event.key,
+        { ctrlKey: event.ctrlKey, metaKey: event.metaKey, shiftKey: event.shiftKey },
+        index,
+        items.length,
+      );
+
+      if (!action) return;
+      event.preventDefault();
+
+      if (action.type === 'cancel') {
+        setEditingIndex(null);
+        return;
+      }
+
+      // Persist current value without removing empty rows during navigation
+      const trimmed = draft.trim();
+      if (trimmed) {
+        mutateList((list) => {
+          if (index >= list.length) list.push(trimmed);
+          else list[index] = trimmed;
+          return list;
+        });
+      }
+
+      if (action.type === 'insertBelow') {
+        mutateList((list) => { list.splice(action.targetIndex, 0, ''); return list; });
+        setEditingIndex(action.targetIndex);
+        setDraft('');
+        return;
+      }
+
+      const nextValue = items[action.targetIndex] ?? '';
+      setEditingIndex(action.targetIndex);
+      setDraft(nextValue);
+    },
+    [draft, items, mutateList],
+  );
+
+  return { editingIndex, draft, setDraft, beginEdit, commitEdit, handleKeyDown };
+}
diff --git a/src/hooks/useStyleClipboard.test.ts b/src/hooks/useStyleClipboard.test.ts
new file mode 100644
index 0000000..fef16af
--- /dev/null
+++ b/src/hooks/useStyleClipboard.test.ts
@@ -0,0 +1,65 @@
+import { renderHook } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { useStyleClipboard } from './useStyleClipboard';
+
+const setNodes = vi.fn();
+const nodes = [
+  {
+    id: 'node-1',
+    selected: true,
+    data: {
+      label: 'Node 1',
+      color: 'blue',
+      shape: 'rounded',
+      fontWeight: 'bold',
+    },
+  },
+  {
+    id: 'node-2',
+    selected: true,
+    data: {
+      label: 'Node 2',
+      color: 'slate',
+      shape: 'rectangle',
+    },
+  },
+];
+
+vi.mock('@/store/canvasHooks', () => ({
+  useCanvasState: () => ({ nodes }),
+  useCanvasActions: () => ({ setNodes }),
+}));
+
+const storage = new Map<string, string>();
+
+vi.mock('@/services/storage/uiLocalStorage', () => ({
+  readLocalStorageString: (key: string) => storage.get(key) ?? null,
+  writeLocalStorageJson: (key: string, value: unknown) => storage.set(key, JSON.stringify(value)),
+}));
+
+describe('useStyleClipboard', () => {
+  beforeEach(() => {
+    storage.clear();
+    setNodes.mockReset();
+  });
+
+  it('copies style data from the first selected node', () => {
+    const { result } = renderHook(() => useStyleClipboard(vi.fn()));
+
+    result.current.copyStyleSelection();
+
+    expect(storage.get('flowmind-style-clipboard')).toContain('"color":"blue"');
+    expect(storage.get('flowmind-style-clipboard')).not.toContain('"label"');
+  });
+
+  it('pastes copied style data onto all selected nodes', () => {
+    const recordHistory = vi.fn();
+    storage.set('flowmind-style-clipboard', JSON.stringify({ color: 'emerald', shape: 'capsule' }));
+    const { result } = renderHook(() => useStyleClipboard(recordHistory));
+
+    result.current.pasteStyleSelection();
+
+    expect(recordHistory).toHaveBeenCalledTimes(1);
+    expect(setNodes).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/src/hooks/useStyleClipboard.ts b/src/hooks/useStyleClipboard.ts
new file mode 100644
index 0000000..8800cc9
--- /dev/null
+++ b/src/hooks/useStyleClipboard.ts
@@ -0,0 +1,74 @@
+import { useCallback } from 'react';
+import { LEGACY_STORAGE_KEYS } from '@/lib/legacyBranding';
+import type { NodeData } from '@/lib/types';
+import { readLocalStorageString, writeLocalStorageJson } from '@/services/storage/uiLocalStorage';
+import { useCanvasActions, useCanvasState } from '@/store/canvasHooks';
+
+const STYLE_CLIPBOARD_STORAGE_KEY = LEGACY_STORAGE_KEYS.styleClipboard;
+
+const STYLE_FIELDS: Array<keyof NodeData> = [
+  'align',
+  'backgroundColor',
+  'color',
+  'colorMode',
+  'customColor',
+  'customIconUrl',
+  'fontFamily',
+  'fontSize',
+  'fontStyle',
+  'fontWeight',
+  'icon',
+  'rotation',
+  'shape',
+  'subLabel',
+  'transparency',
+  'variant',
+];
+
+function pickStyleData(data: NodeData): Partial<NodeData> {
+  return STYLE_FIELDS.reduce<Partial<NodeData>>((styleData, key) => {
+    if (typeof data[key] !== 'undefined') {
+      styleData[key] = data[key];
+    }
+    return styleData;
+  }, {});
+}
+
+export function useStyleClipboard(recordHistory: () => void) {
+  const { nodes } = useCanvasState();
+  const { setNodes } = useCanvasActions();
+
+  const copyStyleSelection = useCallback(() => {
+    const sourceNode = nodes.find((node) => node.selected);
+    if (!sourceNode) {
+      return;
+    }
+
+    writeLocalStorageJson(STYLE_CLIPBOARD_STORAGE_KEY, pickStyleData(sourceNode.data));
+  }, [nodes]);
+
+  const pasteStyleSelection = useCallback(() => {
+    const styleDataRaw = readLocalStorageString(STYLE_CLIPBOARD_STORAGE_KEY);
+    if (!styleDataRaw) {
+      return;
+    }
+
+    const selectedIds = new Set(nodes.filter((node) => node.selected).map((node) => node.id));
+    if (selectedIds.size === 0) {
+      return;
+    }
+
+    const styleData = JSON.parse(styleDataRaw) as Partial<NodeData>;
+    recordHistory();
+    setNodes((currentNodes) => currentNodes.map((node) => (
+      selectedIds.has(node.id)
+        ? { ...node, data: { ...node.data, ...styleData } }
+        : node
+    )));
+  }, [nodes, recordHistory, setNodes]);
+
+  return {
+    copyStyleSelection,
+    pasteStyleSelection,
+  };
+}
diff --git a/src/i18n/config.test.ts b/src/i18n/config.test.ts
index 427fec2..ea42461 100644
--- a/src/i18n/config.test.ts
+++ b/src/i18n/config.test.ts
@@ -6,8 +6,20 @@ describe('getTranslationFallback', () => {
     expect(getTranslationFallback('properties.title')).toBe('Properties');
   });
 
-  it('formats missing keys into readable English labels', () => {
-    expect(getTranslationFallback('propertiesPanel.someMissingKey')).toBe('Some Missing Key');
-    expect(getTranslationFallback('toolbar.add_blank_shape')).toBe('Add blank shape');
+  it('falls back to stable English copy instead of humanized key labels', () => {
+    expect(getTranslationFallback('propertiesPanel.someMissingKey')).toBe('Error');
+    expect(getTranslationFallback('toolbar.add_blank_shape')).toBe('Error');
+  });
+
+  it('recovers a unique English leaf key when the caller uses the wrong path', () => {
+    expect(getTranslationFallback('privacyMessage')).toBe('Your diagrams stay with you and do not reach our servers.');
+  });
+
+  it('recovers English copy from the best matching key suffix', () => {
+    expect(getTranslationFallback('ai.privacyTitle')).toBe('Privacy & Encryption');
+  });
+
+  it('prefers English text over prettified labels for non-ambiguous partial keys', () => {
+    expect(getTranslationFallback('toast.reconnected')).toBe('Realtime collaboration restored.');
   });
 });
diff --git a/src/i18n/config.ts b/src/i18n/config.ts
index eec6d3a..223e29e 100644
--- a/src/i18n/config.ts
+++ b/src/i18n/config.ts
@@ -10,6 +10,12 @@ import esTranslation from './locales/es/translation.json';
 import zhTranslation from './locales/zh/translation.json';
 import jaTranslation from './locales/ja/translation.json';
 
+interface TranslationEntry {
+  path: string;
+  value: string;
+  segments: string[];
+}
+
 function lookupTranslationValue(source: unknown, key: string): string | undefined {
   const segments = key.split('.');
   let current: unknown = source;
@@ -24,22 +30,109 @@ function lookupTranslationValue(source: unknown, key: string): string | undefine
   return typeof current === 'string' ? current : undefined;
 }
 
-function formatMissingKeyAsEnglishLabel(key: string): string {
-  const lastSegment = key.split('.').pop() ?? key;
-  const withSpaces = lastSegment
-    .replace(/([a-z0-9])([A-Z])/g, '$1 $2')
-    .replace(/[_-]+/g, ' ')
-    .trim();
+function collectTranslationEntries(source: unknown, prefix = '', entries: TranslationEntry[] = []) {
+  if (!source || typeof source !== 'object') {
+    return entries;
+  }
+
+  for (const [segment, value] of Object.entries(source as Record<string, unknown>)) {
+    const nextPath = prefix ? `${prefix}.${segment}` : segment;
+
+    if (typeof value === 'string') {
+      entries.push({ path: nextPath, value, segments: nextPath.split('.') });
+      continue;
+    }
+
+    collectTranslationEntries(value, nextPath, entries);
+  }
+
+  return entries;
+}
+
+const englishTranslationEntries = collectTranslationEntries(enTranslation);
+const warnedMissingKeys = new Set<string>();
+
+function shouldWarnForMissingTranslations(): boolean {
+  return typeof import.meta !== 'undefined' && Boolean(import.meta.env?.DEV);
+}
+
+function warnMissingTranslationKey(key: string) {
+  if (!shouldWarnForMissingTranslations() || warnedMissingKeys.has(key)) {
+    return;
+  }
+
+  warnedMissingKeys.add(key);
+  console.warn(`[i18n] Missing translation key: "${key}"`);
+}
+
+function getCommonEnglishFallback(): string {
+  return lookupTranslationValue(enTranslation, 'common.error') ?? 'Error';
+}
+
+function countMatchingSuffixSegments(left: string[], right: string[]): number {
+  let count = 0;
 
-  if (!withSpaces) {
-    return key;
+  while (count < left.length && count < right.length) {
+    if (left[left.length - 1 - count] !== right[right.length - 1 - count]) {
+      break;
+    }
+    count += 1;
+  }
+
+  return count;
+}
+
+function lookupBestEnglishFallbackValue(key: string): string | undefined {
+  const requestedSegments = key.split('.');
+  let bestMatches: TranslationEntry[] = [];
+  let bestScore = 0;
+  let bestLengthDelta = Number.POSITIVE_INFINITY;
+
+  for (const entry of englishTranslationEntries) {
+    const score = countMatchingSuffixSegments(requestedSegments, entry.segments);
+    if (score === 0) {
+      continue;
+    }
+
+    const lengthDelta = Math.abs(entry.segments.length - requestedSegments.length);
+
+    if (score > bestScore || (score === bestScore && lengthDelta < bestLengthDelta)) {
+      bestScore = score;
+      bestLengthDelta = lengthDelta;
+      bestMatches = [entry];
+      continue;
+    }
+
+    if (score === bestScore && lengthDelta === bestLengthDelta) {
+      bestMatches.push(entry);
+    }
+  }
+
+  if (bestMatches.length === 0) {
+    return undefined;
+  }
+
+  const distinctValues = [...new Set(bestMatches.map((entry) => entry.value))];
+  if (distinctValues.length === 1) {
+    return distinctValues[0];
   }
 
-  return withSpaces.charAt(0).toUpperCase() + withSpaces.slice(1);
+  bestMatches.sort((left, right) => {
+    if (left.segments.length !== right.segments.length) {
+      return left.segments.length - right.segments.length;
+    }
+    return left.path.localeCompare(right.path);
+  });
+
+  return bestMatches[0].value;
 }
 
 export function getTranslationFallback(key: string): string {
-  return lookupTranslationValue(enTranslation, key) ?? formatMissingKeyAsEnglishLabel(key);
+  return (
+    lookupTranslationValue(enTranslation, key) ??
+    lookupBestEnglishFallbackValue(key) ??
+    getCommonEnglishFallback()
+  );
 }
 
 i18n
@@ -48,9 +141,13 @@ i18n
   .init({
     fallbackLng: 'en',
     debug: false,
+    missingKeyHandler: (_languages, _namespace, key) => warnMissingTranslationKey(key),
     returnNull: false,
     returnEmptyString: false,
-    parseMissingKeyHandler: (key) => getTranslationFallback(key),
+    parseMissingKeyHandler: (key) => {
+      warnMissingTranslationKey(key);
+      return getTranslationFallback(key);
+    },
     interpolation: {
       escapeValue: false,
     },
diff --git a/src/i18n/locales/de/translation.json b/src/i18n/locales/de/translation.json
index 9ff48b4..948f14a 100644
--- a/src/i18n/locales/de/translation.json
+++ b/src/i18n/locales/de/translation.json
@@ -56,7 +56,8 @@
     "distributeHorizontally": "Horizontal verteilen",
     "distributeVertically": "Vertikal verteilen",
     "group": "Gruppe",
-    "upload": "Upload"
+    "upload": "Upload",
+    "rename": "Umbenennen"
   },
   "nav": {
     "home": "Startseite",
@@ -76,7 +77,8 @@
     "beta": "BETA",
     "versionHistory": "Versionsverlauf",
     "loadJSON": "JSON laden",
-    "playbackMode": "Wiedergabemodus"
+    "playbackMode": "Wiedergabemodus",
+    "privacyMessage": "Ihre Diagramme bleiben bei Ihnen und erreichen unsere Server nicht."
   },
   "menu": {
     "file": "Datei",
@@ -114,7 +116,31 @@
     "hintClipboard": "Copy to clipboard",
     "figmaEditable": "Figma Editable",
     "exportDiagram": "Export Diagram",
-    "exportAs": "Export As"
+    "exportAs": "Export As",
+    "exportOrShare": "Dieses Canvas exportieren oder teilen",
+    "svg": "Als SVG exportieren",
+    "hintSvgScalable": "Skalierbare Vektordatei",
+    "video": "Wiedergabevideo",
+    "hintPlaybackWebM": "Wiedergabe-Zeitleiste (WebM/MP4)",
+    "gif": "Wiedergabe-GIF",
+    "hintPlaybackGif": "Kurze Schleife für Doku/Social",
+    "share": "Live-Canvas teilen",
+    "hintShareViewer": "Einladungslink für diesen Raum",
+    "readmeEmbed": "README Embed",
+    "hintReadmeEmbed": "Copy Markdown snippet",
+    "sectionImage": "Image",
+    "sectionVideo": "Video & Animation",
+    "sectionCode": "Code & Data",
+    "shareSection": "Canvas teilen",
+    "revealVideo": "Reveal Video",
+    "hintRevealVideo": "Nodes fade in sequentially (WebM/MP4)",
+    "revealGif": "Reveal GIF",
+    "hintRevealGif": "Animated reveal for docs/social",
+    "cinematicVideo": "Cinematic Build Video",
+    "hintCinematicVideo": "Dark launch-style build",
+    "cinematicGif": "Cinematic Build GIF",
+    "hintCinematicGif": "Dark social-ready loop",
+    "actionDownload": "Download"
   },
   "import": {
     "title": "Importieren",
@@ -197,7 +223,25 @@
     "recentFiles": "Letzte Dateien",
     "files": "Dateien",
     "createFirstFlow": "Ersten Fluss erstellen",
-    "startFromScratch": "Von Grund auf beginnen oder ein vorhandenes Diagramm importieren."
+    "startFromScratch": "Von Grund auf beginnen oder ein vorhandenes Diagramm importieren.",
+    "currentFlow": "Aktueller Flow",
+    "autosaved": "Automatisch gespeichert",
+    "localStorageHint": "Automatisch auf diesem Gerät gespeichert. Wir laden Ihre Diagrammdaten nicht auf unsere Server hoch.",
+    "renameFlow": {
+      "title": "Flow umbenennen",
+      "description": "Aktualisieren Sie den Namen, der im Dashboard und in den Tabs angezeigt wird.",
+      "label": "Flow-Name",
+      "placeholder": "Flow-Namen eingeben",
+      "hint": "Namen sind auf dieses Browserprofil beschränkt, sofern Sie sie nicht exportieren oder anderweitig synchronisieren.",
+      "closeDialog": "Dialog zum Umbenennen des Flows schließen"
+    },
+    "deleteFlow": {
+      "title": "Flow löschen",
+      "description": "Dadurch wird der lokal automatisch gespeicherte Flow von diesem Gerät entfernt.",
+      "confirmation": "\"{{name}}\" löschen?",
+      "hint": "Dies kann nicht rückgängig gemacht werden, es sei denn, Sie haben ein exportiertes Backup oder eine weitere Kopie.",
+      "closeDialog": "Dialog zum Löschen des Flows schließen"
+    }
   },
   "settings": {
     "title": "Einstellungen",
@@ -249,7 +293,8 @@
     "model": "Modell",
     "apiKey": "API-Schlüssel",
     "placeholder": "Flussdiagramm beschreiben...",
-    "settingsSubtitle": "Configure your preferred AI provider, model, and API key below."
+    "settingsSubtitle": "Configure your preferred AI provider, model, and API key below.",
+    "generateWithFlowpilot": "Mit Flowpilot generieren"
   },
   "playback": {
     "title": "Wiedergabe",
@@ -342,9 +387,9 @@
     "description": "Das ultimative White-Label-Canvas.",
     "diagramAsCode": "Diagramm als Code",
     "diagramAsCodeDesc": "Erstklassige Unterstützung für Mermaid.js und DSL.",
-    "flowpilotAI": "Flowpilot KI",
+    "flowpilotAI": "Flowpilot",
     "aiAssistant": "KI-Assistent",
-    "flowpilotAIDesc": "Mit Ihrem Diagramm chatten.",
+    "flowpilotAIDesc": "Mit geführten KI-Bearbeitungen an Ihrem Diagramm arbeiten.",
     "addRedisCache": "Redis-Cache vor der DB hinzufügen.",
     "localPrivate": "Lokal & Privat",
     "localPrivateDesc": "Alles bleibt auf Ihrem Rechner.",
@@ -371,7 +416,7 @@
     "designDesc": "Vom Canvas kopieren und in Figma einfügen.",
     "exportShare": "Exportieren & Teilen",
     "pixelPerfectOutput": "PIXELGENAUE AUSGABE",
-    "exportShareDesc": "Als SVG, PNG oder PDF exportieren.",
+    "exportShareDesc": "Als SVG oder PNG exportieren.",
     "vectorEditable": "Vektor • In Figma bearbeitbar",
     "rasterHighRes": "Raster • Hochauflösend",
     "dataSaveRestore": "Daten • Flows speichern & wiederherstellen"
@@ -400,8 +445,7 @@
     "communityDesc": "Entwickler treffen, die auf OpenFlowKit aufbauen.",
     "roadmap": "Roadmap",
     "coreRenderer": "Core-Renderer",
-    "flowpilotAI": "Flowpilot KI",
-    "pdfExport": "PDF-Export"
+    "flowpilotAI": "Flowpilot"
   },
   "demo": {
     "livePreview": "Live-Vorschau",
@@ -474,7 +518,9 @@
       "placeholder": "Nach Bezeichnung oder ID suchen...",
       "noResults": "Keine Knoten gefunden",
       "untitled": "Unbenannter Knoten",
-      "type": "Typ"
+      "type": "Typ",
+      "showingCount": "Showing: {{count}}",
+      "totalCount": "Total on canvas: {{count}}"
     },
     "templates": {
       "title": "Vorlagen",
@@ -520,7 +566,8 @@
       "compact": "Kompakt",
       "normal": "Normal",
       "loose": "Locker",
-      "applyLayout": "Layout anwenden"
+      "applyLayout": "Layout anwenden",
+      "layoutStyle": "Layout-Stil"
     },
     "designSystem": {
       "title": "Design-Systeme",
@@ -545,17 +592,24 @@
       "intelligentRoutingDesc": "Verbindungen beim Ziehen einrasten",
       "animatedEdges": "Animierte Kanten",
       "animatedEdgesDesc": "Fließende Partikel",
-      "strokeWidth": "Strichbreite"
+      "strokeWidth": "Strichbreite",
+      "largeGraphSafety": "Große-Graph-Schutz",
+      "largeGraphSafetyAuto": "Automatisch",
+      "largeGraphSafetyOn": "Ein",
+      "largeGraphSafetyOff": "Aus",
+      "exportModeDeterministic": "Deterministisch",
+      "exportModeLegacy": "Legacy",
+      "exportMode": "Exportmodus"
     }
   },
   "settingsModal": {
     "title": "Einstellungen",
     "general": "Allgemein",
-    "flowpilotAI": "Flowpilot KI",
+    "flowpilotAI": "Flowpilot",
     "shortcuts": "Kürzel",
     "running": "{appName} wird ausgeführt",
     "generalSettings": "Allgemeine Einstellungen",
-    "flowpilotConfigurations": "Flowpilot-Konfigurationen",
+    "flowpilotConfigurations": "Flowpilot-Konfiguration",
     "keyboardShortcuts": "Tastaturkürzel",
     "canvas": {
       "title": "Canvas",
@@ -566,7 +620,15 @@
       "miniMap": "Minimap",
       "miniMapDesc": "Minimap unten rechts",
       "architectureStrictMode": "Architektur-Strict-Mode",
-      "architectureStrictModeDesc": "Blockiert den Mermaid-Import, wenn Architekturdiagnosen Wiederherstellungs-/Validierungsprobleme enthalten"
+      "architectureStrictModeDesc": "Blockiert den Mermaid-Import, wenn Architekturdiagnosen Wiederherstellungs-/Validierungsprobleme enthalten",
+      "alignmentGuides": "Alignment Guides",
+      "alignmentGuidesDesc": "Show smart guide lines while dragging nodes",
+      "routingProfile": "Routing-Profil",
+      "routingProfileStandard": "Standard",
+      "routingProfileInfrastructure": "Infrastruktur",
+      "routingProfileHint": "Der Infrastrukturmodus bevorzugt orthogonale Routen für Servicediagramme.",
+      "edgeBundling": "Parallele Kanten bündeln",
+      "edgeBundlingDesc": "Parallele Verbindungen auf gemeinsamen Spuren halten"
     },
     "ai": {
       "provider": "Anbieter",
@@ -623,7 +685,21 @@
       "customEndpointTitle": "What is a custom endpoint?",
       "privacyTitle": "Privacy & Encryption",
       "customEndpointText": "Any <1>OpenAI-compatible</1> API endpoint — local or remote. Great for:",
-      "customEndpointMustSupport": "Must support <1>POST /chat/completions</1> (OpenAI format)"
+      "customEndpointMustSupport": "Must support <1>POST /chat/completions</1> (OpenAI format)",
+      "advancedEndpointOverride": "Erweiterte Basis-URL-Überschreibung",
+      "baseUrlHint": "Leer lassen, um den Standard-Endpunkt des Anbieters zu verwenden. Nutzen Sie dies für Ihre eigene Proxy-/Worker-URL.",
+      "resetEndpoint": "Auf Standard zurücksetzen",
+      "customHeadersTitle": "Benutzerdefinierte Header",
+      "customHeadersSubtitle": "Zusätzliche Header für Auth-Proxys wie Cloudflare Access senden.",
+      "addHeader": "Header hinzufügen",
+      "cloudflarePreset": "Cloudflare-Voreinstellung verwenden",
+      "customHeadersEmpty": "Keine benutzerdefinierten Header konfiguriert.",
+      "customHeadersSecurity": "Header-Werte werden lokal in Ihrem Browserprofil gespeichert.",
+      "risk": {
+        "browserFriendly": "Browser-tauglich",
+        "proxyLikely": "Proxy wahrscheinlich",
+        "mixed": "Abhängig vom Endpunkt"
+      }
     },
     "brand": {
       "title": "Marken-Kits",
@@ -670,7 +746,11 @@
       "shareFeedback": "Feedback teilen",
       "shareFeedbackDesc": "Feedback geben, Fehler melden, Funktionen anfragen"
     },
-    "settings": "Einstellungen"
+    "settings": "Einstellungen",
+    "canvasSettings": "Canvas-Einstellungen",
+    "description": "Canvas-Einstellungen und Tastaturkürzel konfigurieren.",
+    "close": "Einstellungen schließen",
+    "closeDialog": "Einstellungsdialog schließen"
   },
   "customNodes": {
     "browserContent": "Browser-Inhalt",
@@ -685,7 +765,7 @@
   "toolbar": {
     "selectMode": "Auswahlmodus (V)",
     "panMode": "Verschiebemodus (H)",
-    "flowpilot": "Flowpilot (Cmd+K)",
+    "flowpilot": "Flowpilot",
     "templates": "Vorlagen",
     "addItem": "Element hinzufügen",
     "addToCanvas": "Zum Canvas hinzufügen",
@@ -700,7 +780,8 @@
     "autoLayout": "Auto-Layout",
     "clearCanvas": "Canvas löschen",
     "undo": "Rückgängig (Ctrl+Z)",
-    "redo": "Wiederholen (Ctrl+Y)"
+    "redo": "Wiederholen (Ctrl+Y)",
+    "commandCenter": "Command Center öffnen"
   },
   "flowEditor": {
     "cannotCloseLastTab": "Der letzte Tab kann nicht geschlossen werden.",
@@ -717,7 +798,8 @@
       "generateWithFlowpilot": "Mit Flowpilot generieren",
       "browseTemplates": "Vorlagen durchsuchen",
       "addBlankNode": "Leere Form hinzufügen"
-    }
+    },
+    "dslExportSkippedEdges": "{{count}} ungültige Kante(n) wurden beim DSL-Export übersprungen."
   },
   "annotationNode": {
     "placeholder": "*Doppelklicken zum Bearbeiten der Notiz*"
@@ -734,7 +816,8 @@
     "inputOutputDesc": "Parallelogrammform",
     "note": "Haftnotiz",
     "noteDesc": "Dokumentation",
-    "releaseToConnect": "Loslassen zum Verbinden"
+    "releaseToConnect": "Loslassen zum Verbinden",
+    "close": "Verbindungsmenü schließen"
   },
   "errorBoundary": {
     "title": "Etwas ist schiefgelaufen",
@@ -758,7 +841,12 @@
     "restoreVersion": "Version wiederherstellen",
     "deleteVersion": "Version löschen",
     "nodes": "{{count}} Knoten",
-    "edges": "{{count}} Kanten"
+    "edges": "{{count}} Kanten",
+    "close": "Versionsverlaufsleiste schließen",
+    "namedVersions": "Named Versions",
+    "noNamedSnapshots": "No named versions yet.",
+    "autosavedVersions": "Autosaved Checkpoints",
+    "noAutoSnapshots": "No autosaved checkpoints yet."
   },
   "templatesPanel": {
     "title": "Flow-Vorlagen",
@@ -790,9 +878,49 @@
     "addCommentsHere": "Add your comments here.",
     "newSection": "New Section",
     "text": "Text",
-    "image": "Image"
+    "image": "Image",
+    "mindmap": "Thema"
   },
   "actions": {
     "clearCanvasConfirm": "Are you sure you want to clear the canvas?"
+  },
+  "share": {
+    "close": "Close",
+    "title": "Share Design",
+    "betaBadge": "Beta",
+    "description": "Invite collaborators to view and edit this flow with you in real-time.",
+    "roomId": "Raum-ID",
+    "link": "Freigabelink",
+    "copied": "Copied Link!",
+    "copyLink": "Copy Link",
+    "footerNote": "Your diagram stays local unless you share this room. If copy is blocked, copy the link above manually.",
+    "closeDialog": "Close share dialog",
+    "status": {
+      "cache": {
+        "syncing": " local cache syncing",
+        "ready": " local cache ready",
+        "hydrated": " restored from local cache"
+      },
+      "realtime": "Realtime peer sync",
+      "waiting": "Connecting to realtime sync",
+      "fallback": "Local-only mode"
+    },
+    "openDialog": "Share dialog",
+    "toast": {
+      "fallbackMode": "Echtzeit-Synchronisierung ist nicht verfügbar. Es wird im Nur-lokal-Modus fortgefahren.",
+      "reconnected": "Echtzeit-Zusammenarbeit wiederhergestellt.",
+      "copyFailed": "Unable to copy share link.",
+      "linkCopied": "Collaboration link copied.",
+      "copyManual": "Der Zugriff auf die Zwischenablage ist blockiert. Kopieren Sie den Link manuell aus dem Freigabedialog."
+    }
+  },
+  "connectionPanel": {
+    "architecture": "Architecture",
+    "label": "Label",
+    "messagePlaceholder": "Nachricht",
+    "route": "Route",
+    "appearance": "Darstellung",
+    "condition": "Condition",
+    "deleteConnection": "Delete Connection"
   }
-}
\ No newline at end of file
+}
diff --git a/src/i18n/locales/en/translation.json b/src/i18n/locales/en/translation.json
index 4ab0e0e..e86239e 100644
--- a/src/i18n/locales/en/translation.json
+++ b/src/i18n/locales/en/translation.json
@@ -62,7 +62,8 @@
     "group": "Group",
     "export": "Export",
     "exportDiagram": "Export Diagram",
-    "exportAs": "Export As"
+    "exportAs": "Export As",
+    "rename": "Rename"
   },
   "nav": {
     "home": "Home",
@@ -82,7 +83,8 @@
     "beta": "BETA",
     "versionHistory": "Version History",
     "loadJSON": "Load JSON",
-    "playbackMode": "Playback Mode"
+    "playbackMode": "Playback Mode",
+    "privacyMessage": "Your diagrams stay with you and do not reach our servers."
   },
   "menu": {
     "file": "File",
@@ -107,20 +109,46 @@
     "title": "Export",
     "png": "Export as PNG",
     "jpeg": "Export as JPEG",
+    "svg": "Export as SVG",
+    "video": "Playback Video",
+    "gif": "Playback GIF",
+    "revealVideo": "Reveal Video",
+    "revealGif": "Reveal GIF",
+    "cinematicVideo": "Cinematic Build Video",
+    "cinematicGif": "Cinematic Build GIF",
     "json": "Export as JSON",
     "mermaid": "Export as Mermaid",
     "plantuml": "Export as PlantUML",
     "openflowdsl": "Export as {{appName}} DSL",
     "figma": "Export to Figma",
+    "share": "Share live canvas",
     "exportDiagram": "Export Diagram",
     "exportAs": "Export As",
+    "headingFormat": "Export Format",
+    "actionCopy": "Copy to Clipboard",
+    "actionDownload": "Download",
+    "exportOrShare": "Export or share this canvas",
+    "shareSection": "Share canvas",
     "jsonLabel": "JSON File",
     "openflowdslLabel": "{{appName}} DSL",
     "figmaEditable": "Figma Editable",
     "hintTransparent4K": "Transparent (4K)",
     "hintWhiteBg4K": "White Background (4K)",
     "hintDownload": "Download",
-    "hintClipboard": "Copy to clipboard"
+    "hintClipboard": "Copy to clipboard",
+    "hintSvgScalable": "Scalable vector file",
+    "hintPlaybackWebM": "Playback timeline (WebM/MP4)",
+    "hintPlaybackGif": "Short loop for docs/social",
+    "hintRevealVideo": "Nodes fade in sequentially (WebM/MP4)",
+    "hintRevealGif": "Animated reveal for docs/social",
+    "hintCinematicVideo": "Dark launch-style build",
+    "hintCinematicGif": "Dark social-ready loop",
+    "hintShareViewer": "Invite link for this room",
+    "readmeEmbed": "README Embed",
+    "hintReadmeEmbed": "Copy Markdown snippet",
+    "sectionImage": "Image",
+    "sectionVideo": "Video & Animation",
+    "sectionCode": "Code & Data"
   },
   "import": {
     "title": "Import",
@@ -149,7 +177,8 @@
     "items": "items",
     "database": "Database",
     "inputOutput": "Input / Output",
-    "branch": "Branch"
+    "branch": "Branch",
+    "mindmap": "Topic"
   },
   "actions": {
     "clearCanvasConfirm": "Are you sure you want to clear the canvas?"
@@ -221,7 +250,25 @@
     "recentFiles": "Recent Files",
     "files": "files",
     "createFirstFlow": "Create your first flow",
-    "startFromScratch": "Start from scratch or import an existing diagram."
+    "startFromScratch": "Start from scratch or import an existing diagram.",
+    "autosaved": "Autosaved",
+    "currentFlow": "Current flow",
+    "localStorageHint": "Autosaved on this device. We do not upload your diagram data to our servers.",
+    "renameFlow": {
+      "title": "Rename flow",
+      "description": "Update the name shown on your dashboard and tabs.",
+      "label": "Flow name",
+      "placeholder": "Enter a flow name",
+      "hint": "Names are local to this browser profile unless you export or sync them elsewhere.",
+      "closeDialog": "Close rename flow dialog"
+    },
+    "deleteFlow": {
+      "title": "Delete flow",
+      "description": "This removes the local autosaved flow from this device.",
+      "confirmation": "Delete \"{{name}}\"?",
+      "hint": "This cannot be undone unless you have an exported backup or another copy.",
+      "closeDialog": "Close delete flow dialog"
+    }
   },
   "settings": {
     "title": "Settings",
@@ -269,6 +316,7 @@
   },
   "ai": {
     "generate": "Generate with AI",
+    "generateWithFlowpilot": "Generate with Flowpilot",
     "provider": "AI Provider",
     "model": "Model",
     "apiKey": "API Key",
@@ -357,10 +405,14 @@
   },
   "share": {
     "title": "Share Design",
+    "betaBadge": "Beta",
     "description": "Invite collaborators to view and edit this flow with you in real-time.",
+    "roomId": "Room ID",
+    "link": "Share link",
     "roomLink": "Collaboration Link",
     "copyLink": "Copy Link",
     "copied": "Copied Link!",
+    "footerNote": "Your diagram stays local unless you share this room. If copy is blocked, copy the link above manually.",
     "permissionsNote": "Anyone with the link can join.",
     "permissionsNoteSecondary": "Permission controls and durable backend sync are not configured yet.",
     "close": "Close",
@@ -372,7 +424,10 @@
     },
     "toast": {
       "linkCopied": "Collaboration link copied.",
-      "copyFailed": "Unable to copy share link."
+      "copyFailed": "Unable to copy share link.",
+      "copyManual": "Clipboard access is blocked. Copy the link manually from the share dialog.",
+      "fallbackMode": "Realtime sync is unavailable. Continuing in local-only mode.",
+      "reconnected": "Realtime collaboration restored."
     },
     "status": {
       "realtime": "Realtime peer sync",
@@ -465,7 +520,7 @@
     "designDesc": "Stop rebuilding screens. Copy from the canvas and paste into Figma as editable SVG and text layers.",
     "exportShare": "Export & Share",
     "pixelPerfectOutput": "PIXEL-PERFECT OUTPUT",
-    "exportShareDesc": "Export diagrams as SVG, PNG, or PDF. Copy to clipboard and paste into Figma with editable layers. Save as JSON to share or version control.",
+    "exportShareDesc": "Export diagrams as SVG or PNG. Copy to clipboard and paste into Figma with editable layers. Save as JSON to share or version control.",
     "vectorEditable": "Vector • Editable in Figma",
     "rasterHighRes": "Raster • High-res export",
     "dataSaveRestore": "Data • Save & restore flows"
@@ -494,8 +549,7 @@
     "communityDesc": "Join developers building on OpenFlowKit.",
     "roadmap": "Roadmap",
     "coreRenderer": "Core Renderer",
-    "flowpilotAI": "Flowpilot AI",
-    "pdfExport": "PDF Export"
+    "flowpilotAI": "Flowpilot AI"
   },
   "demo": {
     "livePreview": "Live Preview",
@@ -605,6 +659,7 @@
     },
     "layout": {
       "title": "Layout Studio",
+      "layoutStyle": "Layout Style",
       "algorithm": "Algorithm",
       "layered": "Layered",
       "layeredDesc": "Hierarchical, good for flows",
@@ -648,11 +703,22 @@
       "intelligentRoutingDesc": "Auto-snap connections on drag",
       "animatedEdges": "Animated Edges",
       "animatedEdgesDesc": "Flowing particles",
-      "strokeWidth": "Stroke Width"
+      "strokeWidth": "Stroke Width",
+      "largeGraphSafety": "Large Graph Safety",
+      "largeGraphSafetyAuto": "Auto",
+      "largeGraphSafetyOn": "On",
+      "largeGraphSafetyOff": "Off",
+      "exportMode": "Export Mode",
+      "exportModeDeterministic": "Deterministic",
+      "exportModeLegacy": "Legacy"
     }
   },
   "settingsModal": {
     "title": "Settings",
+    "settings": "Settings",
+    "description": "Configure canvas preferences and keyboard shortcuts.",
+    "close": "Close settings",
+    "closeDialog": "Close settings dialog",
     "general": "General",
     "flowpilotAI": "Flowpilot AI",
     "shortcuts": "Shortcuts",
@@ -671,13 +737,22 @@
       "miniMap": "Mini Map",
       "miniMapDesc": "Show mini-map in bottom right",
       "architectureStrictMode": "Architecture Strict Mode",
-      "architectureStrictModeDesc": "Block Mermaid import when architecture diagnostics include recovery/validation issues"
+      "architectureStrictModeDesc": "Block Mermaid import when architecture diagnostics include recovery/validation issues",
+      "routingProfile": "Routing Profile",
+      "routingProfileStandard": "Standard",
+      "routingProfileInfrastructure": "Infrastructure",
+      "routingProfileHint": "Infrastructure mode biases orthogonal routes for service maps.",
+      "edgeBundling": "Bundle Sibling Edges",
+      "edgeBundlingDesc": "Keep parallel connections on shared lanes"
     },
     "ai": {
       "provider": "Provider",
       "model": "Model",
       "apiKey": "API Key",
       "customBaseUrl": "Custom Base URL",
+      "advancedEndpointOverride": "Advanced Base URL Override",
+      "baseUrlHint": "Leave empty to use provider default endpoint. Use this for your own proxy/worker URL.",
+      "resetEndpoint": "Reset to default",
       "optional": "Optional",
       "testConnection": "Test Connection",
       "testing": "Testing...",
@@ -934,6 +1009,12 @@
       },
       "customEndpointText": "Any <1>OpenAI-compatible</1> API endpoint — local or remote. Great for:",
       "customEndpointMustSupport": "Must support <1>POST /chat/completions</1> (OpenAI format)",
+      "customHeadersTitle": "Custom Headers",
+      "customHeadersSubtitle": "Send extra headers for auth proxies like Cloudflare Access.",
+      "customHeadersEmpty": "No custom headers configured.",
+      "customHeadersSecurity": "Header values are stored locally in your browser profile.",
+      "addHeader": "Add Header",
+      "cloudflarePreset": "Use Cloudflare Preset",
       "customEndpoints": {
         "ollama": {
           "name": "Ollama",
@@ -952,7 +1033,12 @@
       "pasteKeyStep": "Paste it in the field above — never shared with us",
       "customEndpointTitle": "What is a custom endpoint?",
       "customModelHint": "Enter the exact model ID for your endpoint",
-      "privacyTitle": "Privacy & Encryption"
+      "privacyTitle": "Privacy & Encryption",
+      "risk": {
+        "browserFriendly": "Browser-ready",
+        "proxyLikely": "Proxy likely",
+        "mixed": "Depends on endpoint"
+      }
     },
     "brand": {
       "title": "Brand Kits",
@@ -984,6 +1070,7 @@
       "showBetaBadgeHint": "Display the BETA chip next to logo"
     },
     "shortcutsHint": "You can also press ? to view these anytime.",
+    "canvasSettings": "Canvas Settings",
     "privacy": {
       "manifesto": "Our Privacy Manifesto",
       "manifestoText": "We believe in privacy by design and user autonomy. We don't collect your email, we don't have a login system, and we don't store your data on our servers.",
@@ -1013,7 +1100,7 @@
   "toolbar": {
     "selectMode": "Select Mode (V)",
     "panMode": "Pan Mode (H)",
-    "flowpilot": "Flowpilot (Cmd+K)",
+    "flowpilot": "Flowpilot",
     "templates": "Templates",
     "addItem": "Add Item",
     "addToCanvas": "Add to Canvas",
@@ -1028,7 +1115,8 @@
     "autoLayout": "Auto Layout",
     "clearCanvas": "Clear Canvas",
     "undo": "Undo (Ctrl+Z)",
-    "redo": "Redo (Ctrl+Y)"
+    "redo": "Redo (Ctrl+Y)",
+    "commandCenter": "Open Command Center"
   },
   "flowEditor": {
     "cannotCloseLastTab": "Cannot close the last tab.",
@@ -1036,6 +1124,7 @@
     "plantUMLCopied": "PlantUML diagram copied to clipboard!",
     "dslCopied": "OpenFlow DSL copied to clipboard!",
     "dslCopyFailed": "Failed to copy DSL",
+    "dslExportSkippedEdges": "{{count}} invalid edge(s) were skipped in DSL export.",
     "figmaCopied": "Diagram copied for Figma! You can now paste (Cmd+V) in Figma.",
     "figmaExportFailed": "Figma Export Failed: {{message}}",
     "applyingLayout": "Applying layout…",
@@ -1062,7 +1151,8 @@
     "inputOutputDesc": "Parallelogram shape",
     "note": "Sticky Note",
     "noteDesc": "Documentation",
-    "releaseToConnect": "Release to connect"
+    "releaseToConnect": "Release to connect",
+    "close": "Close connect menu"
   },
   "errorBoundary": {
     "title": "Something went wrong",
@@ -1080,6 +1170,7 @@
   },
   "snapshotsPanel": {
     "title": "Version History",
+    "close": "Close snapshots panel",
     "saveCurrentVersion": "Save Current Version",
     "versionName": "Version Name (e.g. 'Before Refactor')",
     "noSnapshots": "No snapshots saved yet.",
@@ -1106,7 +1197,10 @@
     "architecture": "Architecture",
     "condition": "Condition",
     "label": "Label",
+    "messagePlaceholder": "Message",
+    "route": "Route",
     "style": "Style",
+    "appearance": "Appearance",
     "actions": "Actions",
     "deleteConnection": "Delete Connection"
   },
@@ -1117,4 +1211,4 @@
     "closeTab": "Close Tab",
     "newFlowTab": "New Flow Tab"
   }
-}
\ No newline at end of file
+}
diff --git a/src/i18n/locales/es/translation.json b/src/i18n/locales/es/translation.json
index 12aa9e4..2d2378b 100644
--- a/src/i18n/locales/es/translation.json
+++ b/src/i18n/locales/es/translation.json
@@ -56,7 +56,8 @@
     "distributeHorizontally": "Distribuir horizontalmente",
     "distributeVertically": "Distribuir verticalmente",
     "group": "Grupo",
-    "upload": "Upload"
+    "upload": "Upload",
+    "rename": "Renombrar"
   },
   "nav": {
     "home": "Inicio",
@@ -76,7 +77,8 @@
     "beta": "BETA",
     "versionHistory": "Historial de versiones",
     "loadJSON": "Cargar JSON",
-    "playbackMode": "Modo reproducción"
+    "playbackMode": "Modo reproducción",
+    "privacyMessage": "Sus diagramas permanecen con usted y no llegan a nuestros servidores."
   },
   "menu": {
     "file": "Archivo",
@@ -114,7 +116,31 @@
     "hintClipboard": "Copy to clipboard",
     "figmaEditable": "Figma Editable",
     "exportDiagram": "Export Diagram",
-    "exportAs": "Export As"
+    "exportAs": "Export As",
+    "exportOrShare": "Exportar o compartir este lienzo",
+    "svg": "Exportar como SVG",
+    "hintSvgScalable": "Archivo vectorial escalable",
+    "video": "Video de reproducción",
+    "hintPlaybackWebM": "Línea de tiempo de reproducción (WebM/MP4)",
+    "gif": "GIF de reproducción",
+    "hintPlaybackGif": "Bucle corto para docs/redes",
+    "share": "Compartir lienzo en vivo",
+    "hintShareViewer": "Enlace de invitación para esta sala",
+    "readmeEmbed": "README Embed",
+    "hintReadmeEmbed": "Copy Markdown snippet",
+    "sectionImage": "Image",
+    "sectionVideo": "Video & Animation",
+    "sectionCode": "Code & Data",
+    "shareSection": "Compartir lienzo",
+    "revealVideo": "Reveal Video",
+    "hintRevealVideo": "Nodes fade in sequentially (WebM/MP4)",
+    "revealGif": "Reveal GIF",
+    "hintRevealGif": "Animated reveal for docs/social",
+    "cinematicVideo": "Cinematic Build Video",
+    "hintCinematicVideo": "Dark launch-style build",
+    "cinematicGif": "Cinematic Build GIF",
+    "hintCinematicGif": "Dark social-ready loop",
+    "actionDownload": "Download"
   },
   "import": {
     "title": "Importar",
@@ -197,7 +223,25 @@
     "recentFiles": "Archivos recientes",
     "files": "archivos",
     "createFirstFlow": "Crear su primer flujo",
-    "startFromScratch": "Comenzar desde cero o importar un diagrama existente."
+    "startFromScratch": "Comenzar desde cero o importar un diagrama existente.",
+    "currentFlow": "Flujo actual",
+    "autosaved": "Guardado automáticamente",
+    "localStorageHint": "Guardado automáticamente en este dispositivo. No subimos los datos de tus diagramas a nuestros servidores.",
+    "renameFlow": {
+      "title": "Renombrar flujo",
+      "description": "Actualiza el nombre que se muestra en tu panel y en las pestañas.",
+      "label": "Nombre del flujo",
+      "placeholder": "Introduce un nombre para el flujo",
+      "hint": "Los nombres son locales a este perfil del navegador, a menos que los exportes o los sincronices en otro lugar.",
+      "closeDialog": "Cerrar el diálogo de renombrar flujo"
+    },
+    "deleteFlow": {
+      "title": "Eliminar flujo",
+      "description": "Esto elimina de este dispositivo el flujo guardado automáticamente de forma local.",
+      "confirmation": "¿Eliminar \"{{name}}\"?",
+      "hint": "Esto no se puede deshacer a menos que tengas una copia exportada u otra copia.",
+      "closeDialog": "Cerrar el diálogo de eliminar flujo"
+    }
   },
   "settings": {
     "title": "Configuración",
@@ -249,7 +293,8 @@
     "model": "Modelo",
     "apiKey": "Clave API",
     "placeholder": "Describe tu diagrama...",
-    "settingsSubtitle": "Configure your preferred AI provider, model, and API key below."
+    "settingsSubtitle": "Configure your preferred AI provider, model, and API key below.",
+    "generateWithFlowpilot": "Generar con Flowpilot"
   },
   "playback": {
     "title": "Reproducción",
@@ -342,9 +387,9 @@
     "description": "El canvas white-label definitivo.",
     "diagramAsCode": "Diagrama como código",
     "diagramAsCodeDesc": "Soporte de Mermaid.js y DSL tipado.",
-    "flowpilotAI": "Flowpilot IA",
+    "flowpilotAI": "Flowpilot",
     "aiAssistant": "Asistente IA",
-    "flowpilotAIDesc": "Chatea con tu diagrama.",
+    "flowpilotAIDesc": "Trabaja en tu diagrama con ediciones guiadas por IA.",
     "addRedisCache": "Agregar caché Redis frente a la BD.",
     "localPrivate": "Local & Privado",
     "localPrivateDesc": "Todo queda en tu máquina.",
@@ -371,7 +416,7 @@
     "designDesc": "Copiar del canvas y pegar en Figma.",
     "exportShare": "Exportar & Compartir",
     "pixelPerfectOutput": "SALIDA PIXEL PERFECT",
-    "exportShareDesc": "Exportar como SVG, PNG o PDF.",
+    "exportShareDesc": "Exportar como SVG o PNG.",
     "vectorEditable": "Vector • Editable en Figma",
     "rasterHighRes": "Raster • Alta resolución",
     "dataSaveRestore": "Datos • Guardar & restaurar"
@@ -400,8 +445,7 @@
     "communityDesc": "Únete a desarrolladores que construyen con OpenFlowKit.",
     "roadmap": "Hoja de ruta",
     "coreRenderer": "Motor principal",
-    "flowpilotAI": "Flowpilot IA",
-    "pdfExport": "Exportar PDF"
+    "flowpilotAI": "Flowpilot"
   },
   "demo": {
     "livePreview": "Vista previa en vivo",
@@ -474,7 +518,9 @@
       "placeholder": "Buscar por etiqueta o ID...",
       "noResults": "No se encontraron nodos",
       "untitled": "Nodo sin título",
-      "type": "Tipo"
+      "type": "Tipo",
+      "showingCount": "Showing: {{count}}",
+      "totalCount": "Total on canvas: {{count}}"
     },
     "templates": {
       "title": "Plantillas",
@@ -520,7 +566,8 @@
       "compact": "Compacto",
       "normal": "Normal",
       "loose": "Espaciado",
-      "applyLayout": "Aplicar diseño"
+      "applyLayout": "Aplicar diseño",
+      "layoutStyle": "Estilo de diseño"
     },
     "designSystem": {
       "title": "Sistemas de diseño",
@@ -545,17 +592,24 @@
       "intelligentRoutingDesc": "Conexiones auto al arrastrar",
       "animatedEdges": "Bordes animados",
       "animatedEdgesDesc": "Partículas fluidas",
-      "strokeWidth": "Ancho de trazo"
+      "strokeWidth": "Ancho de trazo",
+      "largeGraphSafety": "Protección para grafos grandes",
+      "largeGraphSafetyAuto": "Auto",
+      "largeGraphSafetyOn": "Activado",
+      "largeGraphSafetyOff": "Desactivado",
+      "exportModeDeterministic": "Determinista",
+      "exportModeLegacy": "Heredado",
+      "exportMode": "Modo de exportación"
     }
   },
   "settingsModal": {
     "title": "Configuración",
     "general": "General",
-    "flowpilotAI": "Flowpilot IA",
+    "flowpilotAI": "Flowpilot",
     "shortcuts": "Atajos",
     "running": "{appName} en ejecución",
     "generalSettings": "Configuración general",
-    "flowpilotConfigurations": "Configuraciones de Flowpilot",
+    "flowpilotConfigurations": "Configuración de Flowpilot",
     "keyboardShortcuts": "Atajos de teclado",
     "canvas": {
       "title": "Lienzo",
@@ -566,7 +620,15 @@
       "miniMap": "Mini mapa",
       "miniMapDesc": "Mostrar mini mapa abajo a la derecha",
       "architectureStrictMode": "Modo estricto de arquitectura",
-      "architectureStrictModeDesc": "Bloquea la importación Mermaid cuando los diagnósticos de arquitectura incluyen problemas de recuperación/validación"
+      "architectureStrictModeDesc": "Bloquea la importación Mermaid cuando los diagnósticos de arquitectura incluyen problemas de recuperación/validación",
+      "alignmentGuides": "Alignment Guides",
+      "alignmentGuidesDesc": "Show smart guide lines while dragging nodes",
+      "routingProfile": "Perfil de enrutamiento",
+      "routingProfileStandard": "Estándar",
+      "routingProfileInfrastructure": "Infraestructura",
+      "routingProfileHint": "El modo infraestructura favorece rutas ortogonales para mapas de servicios.",
+      "edgeBundling": "Agrupar aristas paralelas",
+      "edgeBundlingDesc": "Mantener conexiones paralelas en carriles compartidos"
     },
     "ai": {
       "provider": "Proveedor",
@@ -623,7 +685,21 @@
       "customEndpointTitle": "What is a custom endpoint?",
       "privacyTitle": "Privacy & Encryption",
       "customEndpointText": "Any <1>OpenAI-compatible</1> API endpoint — local or remote. Great for:",
-      "customEndpointMustSupport": "Must support <1>POST /chat/completions</1> (OpenAI format)"
+      "customEndpointMustSupport": "Must support <1>POST /chat/completions</1> (OpenAI format)",
+      "advancedEndpointOverride": "Anulación avanzada de URL base",
+      "baseUrlHint": "Déjalo vacío para usar el endpoint predeterminado del proveedor. Úsalo para la URL de tu propio proxy/worker.",
+      "resetEndpoint": "Restablecer al valor predeterminado",
+      "customHeadersTitle": "Encabezados personalizados",
+      "customHeadersSubtitle": "Envía encabezados extra para proxies de autenticación como Cloudflare Access.",
+      "addHeader": "Agregar encabezado",
+      "cloudflarePreset": "Usar preajuste de Cloudflare",
+      "customHeadersEmpty": "No hay encabezados personalizados configurados.",
+      "customHeadersSecurity": "Los valores de los encabezados se almacenan localmente en tu perfil del navegador.",
+      "risk": {
+        "browserFriendly": "Listo para navegador",
+        "proxyLikely": "Probablemente requiere proxy",
+        "mixed": "Depende del endpoint"
+      }
     },
     "brand": {
       "title": "Kits de marca",
@@ -670,7 +746,11 @@
       "shareFeedback": "Compartir comentarios",
       "shareFeedbackDesc": "Dar comentarios, reportar errores, pedir características"
     },
-    "settings": "Configuración"
+    "settings": "Configuración",
+    "canvasSettings": "Configuración del lienzo",
+    "description": "Configura las preferencias del lienzo y los atajos de teclado.",
+    "close": "Cerrar configuración",
+    "closeDialog": "Cerrar diálogo de configuración"
   },
   "customNodes": {
     "browserContent": "Contenido del navegador",
@@ -685,7 +765,7 @@
   "toolbar": {
     "selectMode": "Modo selección (V)",
     "panMode": "Modo mover (H)",
-    "flowpilot": "Flowpilot (Cmd+K)",
+    "flowpilot": "Flowpilot",
     "templates": "Plantillas",
     "addItem": "Agregar elemento",
     "addToCanvas": "Agregar al lienzo",
@@ -700,7 +780,8 @@
     "autoLayout": "Diseño automático",
     "clearCanvas": "Limpiar lienzo",
     "undo": "Deshacer (Ctrl+Z)",
-    "redo": "Rehacer (Ctrl+Y)"
+    "redo": "Rehacer (Ctrl+Y)",
+    "commandCenter": "Abrir centro de comandos"
   },
   "flowEditor": {
     "cannotCloseLastTab": "No se puede cerrar la última pestaña.",
@@ -717,7 +798,8 @@
       "generateWithFlowpilot": "Generar con Flowpilot",
       "browseTemplates": "Explorar plantillas",
       "addBlankNode": "Agregar forma en blanco"
-    }
+    },
+    "dslExportSkippedEdges": "Se omitieron {{count}} arista(s) no válidas en la exportación DSL."
   },
   "annotationNode": {
     "placeholder": "*Doble clic para editar la nota*"
@@ -734,7 +816,8 @@
     "inputOutputDesc": "Forma de paralelogramo",
     "note": "Nota adhesiva",
     "noteDesc": "Documentación",
-    "releaseToConnect": "Soltar para conectar"
+    "releaseToConnect": "Soltar para conectar",
+    "close": "Cerrar menú de conexión"
   },
   "errorBoundary": {
     "title": "Algo salió mal",
@@ -758,7 +841,12 @@
     "restoreVersion": "Restaurar versión",
     "deleteVersion": "Eliminar versión",
     "nodes": "{{count}} nodos",
-    "edges": "{{count}} conexiones"
+    "edges": "{{count}} conexiones",
+    "close": "Cerrar panel de instantáneas",
+    "namedVersions": "Named Versions",
+    "noNamedSnapshots": "No named versions yet.",
+    "autosavedVersions": "Autosaved Checkpoints",
+    "noAutoSnapshots": "No autosaved checkpoints yet."
   },
   "templatesPanel": {
     "title": "Plantillas de flujo",
@@ -790,9 +878,49 @@
     "addCommentsHere": "Add your comments here.",
     "newSection": "New Section",
     "text": "Text",
-    "image": "Image"
+    "image": "Image",
+    "mindmap": "Tema"
   },
   "actions": {
     "clearCanvasConfirm": "Are you sure you want to clear the canvas?"
+  },
+  "share": {
+    "close": "Close",
+    "title": "Share Design",
+    "betaBadge": "Beta",
+    "description": "Invite collaborators to view and edit this flow with you in real-time.",
+    "roomId": "ID de la sala",
+    "link": "Enlace para compartir",
+    "copied": "Copied Link!",
+    "copyLink": "Copy Link",
+    "footerNote": "Your diagram stays local unless you share this room. If copy is blocked, copy the link above manually.",
+    "closeDialog": "Close share dialog",
+    "status": {
+      "cache": {
+        "syncing": " local cache syncing",
+        "ready": " local cache ready",
+        "hydrated": " restored from local cache"
+      },
+      "realtime": "Realtime peer sync",
+      "waiting": "Connecting to realtime sync",
+      "fallback": "Local-only mode"
+    },
+    "openDialog": "Share dialog",
+    "toast": {
+      "fallbackMode": "La sincronización en tiempo real no está disponible. Se continuará en modo solo local.",
+      "reconnected": "La colaboración en tiempo real se ha restablecido.",
+      "copyFailed": "Unable to copy share link.",
+      "linkCopied": "Collaboration link copied.",
+      "copyManual": "El acceso al portapapeles está bloqueado. Copia el enlace manualmente desde el diálogo de compartir."
+    }
+  },
+  "connectionPanel": {
+    "architecture": "Architecture",
+    "label": "Label",
+    "messagePlaceholder": "Mensaje",
+    "route": "Ruta",
+    "appearance": "Apariencia",
+    "condition": "Condition",
+    "deleteConnection": "Delete Connection"
   }
-}
\ No newline at end of file
+}
diff --git a/src/i18n/locales/fr/translation.json b/src/i18n/locales/fr/translation.json
index 8a1798b..d80f9c2 100644
--- a/src/i18n/locales/fr/translation.json
+++ b/src/i18n/locales/fr/translation.json
@@ -56,7 +56,8 @@
     "distributeHorizontally": "Distribuer horizontalement",
     "distributeVertically": "Distribuer verticalement",
     "group": "Groupe",
-    "upload": "Upload"
+    "upload": "Upload",
+    "rename": "Renommer"
   },
   "nav": {
     "home": "Accueil",
@@ -76,7 +77,8 @@
     "beta": "BÊTA",
     "versionHistory": "Historique des versions",
     "loadJSON": "Charger JSON",
-    "playbackMode": "Mode lecture"
+    "playbackMode": "Mode lecture",
+    "privacyMessage": "Vos diagrammes restent avec vous et n’atteignent pas nos serveurs."
   },
   "menu": {
     "file": "Fichier",
@@ -114,7 +116,31 @@
     "hintClipboard": "Copy to clipboard",
     "figmaEditable": "Figma Editable",
     "exportDiagram": "Export Diagram",
-    "exportAs": "Export As"
+    "exportAs": "Export As",
+    "exportOrShare": "Exporter ou partager ce canevas",
+    "svg": "Exporter en SVG",
+    "hintSvgScalable": "Fichier vectoriel redimensionnable",
+    "video": "Vidéo de lecture",
+    "hintPlaybackWebM": "Chronologie de lecture (WebM/MP4)",
+    "gif": "GIF de lecture",
+    "hintPlaybackGif": "Boucle courte pour docs/réseaux sociaux",
+    "share": "Partager le canevas en direct",
+    "hintShareViewer": "Lien d’invitation pour cette salle",
+    "readmeEmbed": "README Embed",
+    "hintReadmeEmbed": "Copy Markdown snippet",
+    "sectionImage": "Image",
+    "sectionVideo": "Video & Animation",
+    "sectionCode": "Code & Data",
+    "shareSection": "Partager le canevas",
+    "revealVideo": "Reveal Video",
+    "hintRevealVideo": "Nodes fade in sequentially (WebM/MP4)",
+    "revealGif": "Reveal GIF",
+    "hintRevealGif": "Animated reveal for docs/social",
+    "cinematicVideo": "Cinematic Build Video",
+    "hintCinematicVideo": "Dark launch-style build",
+    "cinematicGif": "Cinematic Build GIF",
+    "hintCinematicGif": "Dark social-ready loop",
+    "actionDownload": "Download"
   },
   "import": {
     "title": "Importer",
@@ -197,7 +223,25 @@
     "recentFiles": "Fichiers récents",
     "files": "fichiers",
     "createFirstFlow": "Créer votre premier flux",
-    "startFromScratch": "Commencer de zéro ou importer un diagramme existant."
+    "startFromScratch": "Commencer de zéro ou importer un diagramme existant.",
+    "currentFlow": "Flux actuel",
+    "autosaved": "Enregistré automatiquement",
+    "localStorageHint": "Enregistré automatiquement sur cet appareil. Nous n’envoyons pas les données de vos diagrammes sur nos serveurs.",
+    "renameFlow": {
+      "title": "Renommer le flux",
+      "description": "Mettez à jour le nom affiché sur votre tableau de bord et vos onglets.",
+      "label": "Nom du flux",
+      "placeholder": "Saisir un nom de flux",
+      "hint": "Les noms restent locaux à ce profil de navigateur, sauf si vous les exportez ou les synchronisez ailleurs.",
+      "closeDialog": "Fermer la boîte de dialogue de renommage du flux"
+    },
+    "deleteFlow": {
+      "title": "Supprimer le flux",
+      "description": "Cela supprime de cet appareil le flux local enregistré automatiquement.",
+      "confirmation": "Supprimer \"{{name}}\" ?",
+      "hint": "Cette action est irréversible sauf si vous avez un export de sauvegarde ou une autre copie.",
+      "closeDialog": "Fermer la boîte de dialogue de suppression du flux"
+    }
   },
   "settings": {
     "title": "Paramètres",
@@ -249,7 +293,8 @@
     "model": "Modèle",
     "apiKey": "Clé API",
     "placeholder": "Décrivez votre diagramme...",
-    "settingsSubtitle": "Configure your preferred AI provider, model, and API key below."
+    "settingsSubtitle": "Configure your preferred AI provider, model, and API key below.",
+    "generateWithFlowpilot": "Générer avec Flowpilot"
   },
   "playback": {
     "title": "Lecture",
@@ -342,9 +387,9 @@
     "description": "Le canvas white-label ultime.",
     "diagramAsCode": "Diagramme en code",
     "diagramAsCodeDesc": "Support de Mermaid.js et DSL typé.",
-    "flowpilotAI": "Flowpilot IA",
+    "flowpilotAI": "Flowpilot",
     "aiAssistant": "Assistant IA",
-    "flowpilotAIDesc": "Discutez avec votre diagramme.",
+    "flowpilotAIDesc": "Travaillez sur votre diagramme avec des modifications IA guidées.",
     "addRedisCache": "Ajouter un cache Redis devant la DB.",
     "localPrivate": "Local & Privé",
     "localPrivateDesc": "Tout reste sur votre machine.",
@@ -371,7 +416,7 @@
     "designDesc": "Copier depuis le canvas et coller dans Figma.",
     "exportShare": "Exporter & Partager",
     "pixelPerfectOutput": "SORTIE PIXEL PERFECT",
-    "exportShareDesc": "Exporter en SVG, PNG ou PDF.",
+    "exportShareDesc": "Exporter en SVG ou PNG.",
     "vectorEditable": "Vecteur • Éditable dans Figma",
     "rasterHighRes": "Raster • Haute résolution",
     "dataSaveRestore": "Données • Sauvegarder & restaurer"
@@ -400,8 +445,7 @@
     "communityDesc": "Rejoindre les développeurs qui construisent avec OpenFlowKit.",
     "roadmap": "Feuille de route",
     "coreRenderer": "Moteur principal",
-    "flowpilotAI": "Flowpilot IA",
-    "pdfExport": "Export PDF"
+    "flowpilotAI": "Flowpilot"
   },
   "demo": {
     "livePreview": "Aperçu en direct",
@@ -474,7 +518,9 @@
       "placeholder": "Rechercher par étiquette ou ID...",
       "noResults": "Aucun nœud trouvé",
       "untitled": "Nœud sans titre",
-      "type": "Type"
+      "type": "Type",
+      "showingCount": "Showing: {{count}}",
+      "totalCount": "Total on canvas: {{count}}"
     },
     "templates": {
       "title": "Modèles",
@@ -520,7 +566,8 @@
       "compact": "Compact",
       "normal": "Normal",
       "loose": "Espacé",
-      "applyLayout": "Appliquer la mise en page"
+      "applyLayout": "Appliquer la mise en page",
+      "layoutStyle": "Style de disposition"
     },
     "designSystem": {
       "title": "Systèmes de design",
@@ -545,17 +592,24 @@
       "intelligentRoutingDesc": "Connexions auto au glisser",
       "animatedEdges": "Liaisons animées",
       "animatedEdgesDesc": "Particules fluides",
-      "strokeWidth": "Épaisseur du trait"
+      "strokeWidth": "Épaisseur du trait",
+      "largeGraphSafety": "Protection grands graphes",
+      "largeGraphSafetyAuto": "Auto",
+      "largeGraphSafetyOn": "Activé",
+      "largeGraphSafetyOff": "Désactivé",
+      "exportModeDeterministic": "Déterministe",
+      "exportModeLegacy": "Hérité",
+      "exportMode": "Mode d’export"
     }
   },
   "settingsModal": {
     "title": "Paramètres",
     "general": "Général",
-    "flowpilotAI": "Flowpilot IA",
+    "flowpilotAI": "Flowpilot",
     "shortcuts": "Raccourcis",
     "running": "{appName} en cours",
     "generalSettings": "Paramètres généraux",
-    "flowpilotConfigurations": "Configurations Flowpilot",
+    "flowpilotConfigurations": "Configuration Flowpilot",
     "keyboardShortcuts": "Raccourcis clavier",
     "canvas": {
       "title": "Canevas",
@@ -566,7 +620,15 @@
       "miniMap": "Mini carte",
       "miniMapDesc": "Afficher la mini carte en bas à droite",
       "architectureStrictMode": "Mode strict d’architecture",
-      "architectureStrictModeDesc": "Bloque l’import Mermaid lorsque les diagnostics d’architecture incluent des problèmes de récupération/validation"
+      "architectureStrictModeDesc": "Bloque l’import Mermaid lorsque les diagnostics d’architecture incluent des problèmes de récupération/validation",
+      "alignmentGuides": "Alignment Guides",
+      "alignmentGuidesDesc": "Show smart guide lines while dragging nodes",
+      "routingProfile": "Profil de routage",
+      "routingProfileStandard": "Standard",
+      "routingProfileInfrastructure": "Infrastructure",
+      "routingProfileHint": "Le mode infrastructure privilégie les routes orthogonales pour les cartes de services.",
+      "edgeBundling": "Regrouper les arêtes parallèles",
+      "edgeBundlingDesc": "Conserver les connexions parallèles sur des voies partagées"
     },
     "ai": {
       "provider": "Fournisseur",
@@ -623,7 +685,21 @@
       "customEndpointTitle": "What is a custom endpoint?",
       "privacyTitle": "Privacy & Encryption",
       "customEndpointText": "Any <1>OpenAI-compatible</1> API endpoint — local or remote. Great for:",
-      "customEndpointMustSupport": "Must support <1>POST /chat/completions</1> (OpenAI format)"
+      "customEndpointMustSupport": "Must support <1>POST /chat/completions</1> (OpenAI format)",
+      "advancedEndpointOverride": "Surcharge avancée de l’URL de base",
+      "baseUrlHint": "Laissez vide pour utiliser le point de terminaison par défaut du fournisseur. Utilisez ceci pour l’URL de votre proxy/worker.",
+      "resetEndpoint": "Réinitialiser par défaut",
+      "customHeadersTitle": "En-têtes personnalisés",
+      "customHeadersSubtitle": "Envoyez des en-têtes supplémentaires pour les proxys d’authentification comme Cloudflare Access.",
+      "addHeader": "Ajouter un en-tête",
+      "cloudflarePreset": "Utiliser le préréglage Cloudflare",
+      "customHeadersEmpty": "Aucun en-tête personnalisé configuré.",
+      "customHeadersSecurity": "Les valeurs d’en-tête sont stockées localement dans votre profil de navigateur.",
+      "risk": {
+        "browserFriendly": "Compatible navigateur",
+        "proxyLikely": "Proxy probable",
+        "mixed": "Dépend du point de terminaison"
+      }
     },
     "brand": {
       "title": "Kits de marque",
@@ -670,7 +746,11 @@
       "shareFeedback": "Partager des retours",
       "shareFeedbackDesc": "Donner des retours, signaler des bugs, demander des fonctionnalités"
     },
-    "settings": "Paramètres"
+    "settings": "Paramètres",
+    "canvasSettings": "Paramètres du canevas",
+    "description": "Configurer les préférences du canevas et les raccourcis clavier.",
+    "close": "Fermer les paramètres",
+    "closeDialog": "Fermer la boîte de dialogue des paramètres"
   },
   "customNodes": {
     "browserContent": "Contenu du navigateur",
@@ -685,7 +765,7 @@
   "toolbar": {
     "selectMode": "Mode sélection (V)",
     "panMode": "Mode déplacement (H)",
-    "flowpilot": "Flowpilot (Cmd+K)",
+    "flowpilot": "Flowpilot",
     "templates": "Modèles",
     "addItem": "Ajouter un élément",
     "addToCanvas": "Ajouter au canevas",
@@ -700,7 +780,8 @@
     "autoLayout": "Mise en page auto",
     "clearCanvas": "Effacer le canevas",
     "undo": "Annuler (Ctrl+Z)",
-    "redo": "Rétablir (Ctrl+Y)"
+    "redo": "Rétablir (Ctrl+Y)",
+    "commandCenter": "Ouvrir le centre de commandes"
   },
   "flowEditor": {
     "cannotCloseLastTab": "Impossible de fermer le dernier onglet.",
@@ -717,7 +798,8 @@
       "generateWithFlowpilot": "Générer avec Flowpilot",
       "browseTemplates": "Parcourir les modèles",
       "addBlankNode": "Ajouter une forme vide"
-    }
+    },
+    "dslExportSkippedEdges": "{{count}} arête(s) invalide(s) ont été ignorée(s) lors de l’export DSL."
   },
   "annotationNode": {
     "placeholder": "*Double-cliquez pour modifier la note*"
@@ -734,7 +816,8 @@
     "inputOutputDesc": "Forme parallélogramme",
     "note": "Note adhésive",
     "noteDesc": "Documentation",
-    "releaseToConnect": "Relâcher pour connecter"
+    "releaseToConnect": "Relâcher pour connecter",
+    "close": "Fermer le menu de connexion"
   },
   "errorBoundary": {
     "title": "Quelque chose s'est mal passé",
@@ -758,7 +841,12 @@
     "restoreVersion": "Restaurer la version",
     "deleteVersion": "Supprimer la version",
     "nodes": "{{count}} nœuds",
-    "edges": "{{count}} connexions"
+    "edges": "{{count}} connexions",
+    "close": "Fermer le panneau des versions",
+    "namedVersions": "Named Versions",
+    "noNamedSnapshots": "No named versions yet.",
+    "autosavedVersions": "Autosaved Checkpoints",
+    "noAutoSnapshots": "No autosaved checkpoints yet."
   },
   "templatesPanel": {
     "title": "Modèles de flux",
@@ -790,9 +878,49 @@
     "addCommentsHere": "Add your comments here.",
     "newSection": "New Section",
     "text": "Text",
-    "image": "Image"
+    "image": "Image",
+    "mindmap": "Sujet"
   },
   "actions": {
     "clearCanvasConfirm": "Are you sure you want to clear the canvas?"
+  },
+  "share": {
+    "close": "Close",
+    "title": "Share Design",
+    "betaBadge": "Bêta",
+    "description": "Invite collaborators to view and edit this flow with you in real-time.",
+    "roomId": "ID de salle",
+    "link": "Lien de partage",
+    "copied": "Copied Link!",
+    "copyLink": "Copy Link",
+    "footerNote": "Your diagram stays local unless you share this room. If copy is blocked, copy the link above manually.",
+    "closeDialog": "Close share dialog",
+    "status": {
+      "cache": {
+        "syncing": " local cache syncing",
+        "ready": " local cache ready",
+        "hydrated": " restored from local cache"
+      },
+      "realtime": "Realtime peer sync",
+      "waiting": "Connecting to realtime sync",
+      "fallback": "Local-only mode"
+    },
+    "openDialog": "Share dialog",
+    "toast": {
+      "fallbackMode": "La synchronisation en temps réel est indisponible. Poursuite en mode local uniquement.",
+      "reconnected": "La collaboration en temps réel a été rétablie.",
+      "copyFailed": "Unable to copy share link.",
+      "linkCopied": "Collaboration link copied.",
+      "copyManual": "L’accès au presse-papiers est bloqué. Copiez le lien manuellement depuis la boîte de dialogue de partage."
+    }
+  },
+  "connectionPanel": {
+    "architecture": "Architecture",
+    "label": "Label",
+    "messagePlaceholder": "Message",
+    "route": "Trajet",
+    "appearance": "Apparence",
+    "condition": "Condition",
+    "deleteConnection": "Delete Connection"
   }
-}
\ No newline at end of file
+}
diff --git a/src/i18n/locales/ja/translation.json b/src/i18n/locales/ja/translation.json
index 5379a95..52e30a4 100644
--- a/src/i18n/locales/ja/translation.json
+++ b/src/i18n/locales/ja/translation.json
@@ -56,7 +56,8 @@
     "distributeHorizontally": "水平方向に分布",
     "distributeVertically": "垂直方向に分布",
     "group": "グループ",
-    "upload": "Upload"
+    "upload": "Upload",
+    "rename": "名前を変更"
   },
   "nav": {
     "home": "ホーム",
@@ -76,7 +77,8 @@
     "beta": "ベータ",
     "versionHistory": "バージョン履歴",
     "loadJSON": "JSONを読む",
-    "playbackMode": "再生モード"
+    "playbackMode": "再生モード",
+    "privacyMessage": "図はあなたの手元に残り、当社のサーバーには届きません。"
   },
   "menu": {
     "file": "ファイル",
@@ -114,7 +116,31 @@
     "hintClipboard": "Copy to clipboard",
     "figmaEditable": "Figma Editable",
     "exportDiagram": "Export Diagram",
-    "exportAs": "Export As"
+    "exportAs": "Export As",
+    "exportOrShare": "このキャンバスをエクスポートまたは共有",
+    "svg": "SVGとしてエクスポート",
+    "hintSvgScalable": "拡大縮小可能なベクターファイル",
+    "video": "再生動画",
+    "hintPlaybackWebM": "再生タイムライン (WebM/MP4)",
+    "gif": "再生GIF",
+    "hintPlaybackGif": "ドキュメントやSNS向けの短いループ",
+    "share": "ライブキャンバスを共有",
+    "hintShareViewer": "このルームへの招待リンク",
+    "readmeEmbed": "README Embed",
+    "hintReadmeEmbed": "Copy Markdown snippet",
+    "sectionImage": "Image",
+    "sectionVideo": "Video & Animation",
+    "sectionCode": "Code & Data",
+    "shareSection": "キャンバスを共有",
+    "revealVideo": "Reveal Video",
+    "hintRevealVideo": "Nodes fade in sequentially (WebM/MP4)",
+    "revealGif": "Reveal GIF",
+    "hintRevealGif": "Animated reveal for docs/social",
+    "cinematicVideo": "Cinematic Build Video",
+    "hintCinematicVideo": "Dark launch-style build",
+    "cinematicGif": "Cinematic Build GIF",
+    "hintCinematicGif": "Dark social-ready loop",
+    "actionDownload": "Download"
   },
   "import": {
     "title": "インポート",
@@ -197,7 +223,25 @@
     "recentFiles": "最近のファイル",
     "files": "ファイル",
     "createFirstFlow": "最初のフローを作成",
-    "startFromScratch": "一から始めるか、既存の図をインポートします。"
+    "startFromScratch": "一から始めるか、既存の図をインポートします。",
+    "currentFlow": "現在のフロー",
+    "autosaved": "自動保存済み",
+    "localStorageHint": "このデバイスに自動保存されます。図のデータを当社のサーバーにアップロードすることはありません。",
+    "renameFlow": {
+      "title": "フロー名を変更",
+      "description": "ダッシュボードとタブに表示される名前を更新します。",
+      "label": "フロー名",
+      "placeholder": "フロー名を入力",
+      "hint": "名前は、このブラウザープロファイル内でのみ保持されます。エクスポートまたは別の場所に同期した場合を除きます。",
+      "closeDialog": "フロー名変更ダイアログを閉じる"
+    },
+    "deleteFlow": {
+      "title": "フローを削除",
+      "description": "このデバイスからローカルに自動保存されたフローを削除します。",
+      "confirmation": "「{{name}}」を削除しますか？",
+      "hint": "エクスポートしたバックアップまたは別のコピーがない限り、この操作は元に戻せません。",
+      "closeDialog": "フロー削除ダイアログを閉じる"
+    }
   },
   "settings": {
     "title": "設定",
@@ -249,7 +293,8 @@
     "model": "モデル",
     "apiKey": "APIキー",
     "placeholder": "フローチャートを説明してください...",
-    "settingsSubtitle": "Configure your preferred AI provider, model, and API key below."
+    "settingsSubtitle": "Configure your preferred AI provider, model, and API key below.",
+    "generateWithFlowpilot": "Flowpilotで生成"
   },
   "playback": {
     "title": "再生",
@@ -342,9 +387,9 @@
     "description": "究極のホワイトラベルキャンバス。",
     "diagramAsCode": "コードとしての図",
     "diagramAsCodeDesc": "Mermaid.jsとDSLをサポート。",
-    "flowpilotAI": "Flowpilot AI",
+    "flowpilotAI": "Flowpilot",
     "aiAssistant": "AIアシスタント",
-    "flowpilotAIDesc": "図と対話する。",
+    "flowpilotAIDesc": "ガイド付きAI編集で図を調整します。",
     "addRedisCache": "DBの前にRedisキャッシュを追加する。",
     "localPrivate": "ローカル＆プライベート",
     "localPrivateDesc": "すべてはあなたのマシンに残ります。",
@@ -371,7 +416,7 @@
     "designDesc": "キャンバスからコピーしてFigmaに貼り付けます。",
     "exportShare": "出力と共有",
     "pixelPerfectOutput": "ピクセルパーフェクトな出力",
-    "exportShareDesc": "SVG、PNGまたはPDFとして出力します。",
+    "exportShareDesc": "SVGまたはPNGとして出力します。",
     "vectorEditable": "ベクター • Figmaで編集可能",
     "rasterHighRes": "ラスター • 高解像度出力",
     "dataSaveRestore": "データ • 保存と復元"
@@ -400,8 +445,7 @@
     "communityDesc": "OpenFlowKitを活用している開発者に参加しましょう。",
     "roadmap": "ロードマップ",
     "coreRenderer": "コアレンダラー",
-    "flowpilotAI": "Flowpilot AI",
-    "pdfExport": "PDFエクスポート"
+    "flowpilotAI": "Flowpilot"
   },
   "demo": {
     "livePreview": "ライブプレビュー",
@@ -474,7 +518,9 @@
       "placeholder": "ラベルまたはIDで検索...",
       "noResults": "ノードが見つかりません",
       "untitled": "無題のノード",
-      "type": "タイプ"
+      "type": "タイプ",
+      "showingCount": "Showing: {{count}}",
+      "totalCount": "Total on canvas: {{count}}"
     },
     "templates": {
       "title": "テンプレート",
@@ -520,7 +566,8 @@
       "compact": "コンパクト",
       "normal": "標準",
       "loose": "ゆったり",
-      "applyLayout": "レイアウトを適用"
+      "applyLayout": "レイアウトを適用",
+      "layoutStyle": "レイアウトスタイル"
     },
     "designSystem": {
       "title": "デザインシステム",
@@ -545,13 +592,20 @@
       "intelligentRoutingDesc": "ドラッグ時に自動スナップ",
       "animatedEdges": "アニメーションエッジ",
       "animatedEdgesDesc": "流れるパーティクル",
-      "strokeWidth": "線の太さ"
+      "strokeWidth": "線の太さ",
+      "largeGraphSafety": "大規模グラフ保護",
+      "largeGraphSafetyAuto": "自動",
+      "largeGraphSafetyOn": "オン",
+      "largeGraphSafetyOff": "オフ",
+      "exportModeDeterministic": "決定的",
+      "exportModeLegacy": "従来方式",
+      "exportMode": "エクスポートモード"
     }
   },
   "settingsModal": {
     "title": "設定",
     "general": "一般",
-    "flowpilotAI": "Flowpilot AI",
+    "flowpilotAI": "Flowpilot",
     "shortcuts": "ショートカット",
     "running": "{appName} 実行中",
     "generalSettings": "一般設定",
@@ -566,7 +620,15 @@
       "miniMap": "ミニマップ",
       "miniMapDesc": "右下にミニマップを表示",
       "architectureStrictMode": "アーキテクチャ厳格モード",
-      "architectureStrictModeDesc": "アーキテクチャ診断に回復/検証の問題が含まれる場合、Mermaid のインポートをブロックします"
+      "architectureStrictModeDesc": "アーキテクチャ診断に回復/検証の問題が含まれる場合、Mermaid のインポートをブロックします",
+      "alignmentGuides": "Alignment Guides",
+      "alignmentGuidesDesc": "Show smart guide lines while dragging nodes",
+      "routingProfile": "ルーティングプロファイル",
+      "routingProfileStandard": "標準",
+      "routingProfileInfrastructure": "インフラストラクチャ",
+      "routingProfileHint": "インフラストラクチャモードでは、サービスマップ向けに直交ルートを優先します。",
+      "edgeBundling": "平行エッジを束ねる",
+      "edgeBundlingDesc": "平行接続を共通レーン上に維持する"
     },
     "ai": {
       "provider": "プロバイダー",
@@ -623,7 +685,21 @@
       "customEndpointTitle": "What is a custom endpoint?",
       "privacyTitle": "Privacy & Encryption",
       "customEndpointText": "Any <1>OpenAI-compatible</1> API endpoint — local or remote. Great for:",
-      "customEndpointMustSupport": "Must support <1>POST /chat/completions</1> (OpenAI format)"
+      "customEndpointMustSupport": "Must support <1>POST /chat/completions</1> (OpenAI format)",
+      "advancedEndpointOverride": "詳細なベースURL上書き",
+      "baseUrlHint": "空欄のままにすると、プロバイダー既定のエンドポイントを使用します。独自のプロキシ/ワーカーURLに使用してください。",
+      "resetEndpoint": "既定に戻す",
+      "customHeadersTitle": "カスタムヘッダー",
+      "customHeadersSubtitle": "Cloudflare Access のような認証プロキシ向けに追加ヘッダーを送信します。",
+      "addHeader": "ヘッダーを追加",
+      "cloudflarePreset": "Cloudflareプリセットを使用",
+      "customHeadersEmpty": "カスタムヘッダーは設定されていません。",
+      "customHeadersSecurity": "ヘッダー値はブラウザープロファイル内にローカル保存されます。",
+      "risk": {
+        "browserFriendly": "ブラウザ向け",
+        "proxyLikely": "プロキシが必要な可能性",
+        "mixed": "エンドポイント次第"
+      }
     },
     "brand": {
       "title": "ブランドキット",
@@ -670,7 +746,11 @@
       "shareFeedback": "フィードバックを共有",
       "shareFeedbackDesc": "フィードバック、バグ報告、機能リクエストの送信"
     },
-    "settings": "設定"
+    "settings": "設定",
+    "canvasSettings": "キャンバス設定",
+    "description": "キャンバス設定とキーボードショートカットを構成します。",
+    "close": "設定を閉じる",
+    "closeDialog": "設定ダイアログを閉じる"
   },
   "customNodes": {
     "browserContent": "ブラウザコンテンツ",
@@ -685,7 +765,7 @@
   "toolbar": {
     "selectMode": "選択モード (V)",
     "panMode": "パンモード (H)",
-    "flowpilot": "Flowpilot (Cmd+K)",
+    "flowpilot": "Flowpilot",
     "templates": "テンプレート",
     "addItem": "アイテムを追加",
     "addToCanvas": "キャンバスに追加",
@@ -700,7 +780,8 @@
     "autoLayout": "自動レイアウト",
     "clearCanvas": "キャンバスをクリア",
     "undo": "元に戻す (Ctrl+Z)",
-    "redo": "やり直す (Ctrl+Y)"
+    "redo": "やり直す (Ctrl+Y)",
+    "commandCenter": "コマンドセンターを開く"
   },
   "flowEditor": {
     "cannotCloseLastTab": "最後のタブは閉じられません。",
@@ -717,7 +798,8 @@
       "generateWithFlowpilot": "Flowpilotで生成",
       "browseTemplates": "テンプレートを閲覧",
       "addBlankNode": "空の図形を追加"
-    }
+    },
+    "dslExportSkippedEdges": "DSL エクスポートで {{count}} 件の無効なエッジをスキップしました。"
   },
   "annotationNode": {
     "placeholder": "*ダブルクリックしてメモを編集*"
@@ -734,7 +816,8 @@
     "inputOutputDesc": "平行四辺形",
     "note": "付箋",
     "noteDesc": "ドキュメント",
-    "releaseToConnect": "接続するには離す"
+    "releaseToConnect": "接続するには離す",
+    "close": "接続メニューを閉じる"
   },
   "errorBoundary": {
     "title": "問題が発生しました",
@@ -758,7 +841,12 @@
     "restoreVersion": "バージョンを復元",
     "deleteVersion": "バージョンを削除",
     "nodes": "{{count}} ノード",
-    "edges": "{{count}} エッジ"
+    "edges": "{{count}} エッジ",
+    "close": "スナップショットパネルを閉じる",
+    "namedVersions": "Named Versions",
+    "noNamedSnapshots": "No named versions yet.",
+    "autosavedVersions": "Autosaved Checkpoints",
+    "noAutoSnapshots": "No autosaved checkpoints yet."
   },
   "templatesPanel": {
     "title": "フローテンプレート",
@@ -790,9 +878,49 @@
     "addCommentsHere": "Add your comments here.",
     "newSection": "New Section",
     "text": "Text",
-    "image": "Image"
+    "image": "Image",
+    "mindmap": "トピック"
   },
   "actions": {
     "clearCanvasConfirm": "Are you sure you want to clear the canvas?"
+  },
+  "share": {
+    "close": "Close",
+    "title": "Share Design",
+    "betaBadge": "ベータ",
+    "description": "Invite collaborators to view and edit this flow with you in real-time.",
+    "roomId": "ルームID",
+    "link": "共有リンク",
+    "copied": "Copied Link!",
+    "copyLink": "Copy Link",
+    "footerNote": "Your diagram stays local unless you share this room. If copy is blocked, copy the link above manually.",
+    "closeDialog": "Close share dialog",
+    "status": {
+      "cache": {
+        "syncing": " local cache syncing",
+        "ready": " local cache ready",
+        "hydrated": " restored from local cache"
+      },
+      "realtime": "Realtime peer sync",
+      "waiting": "Connecting to realtime sync",
+      "fallback": "Local-only mode"
+    },
+    "openDialog": "Share dialog",
+    "toast": {
+      "fallbackMode": "リアルタイム同期は利用できません。ローカル専用モードで続行します。",
+      "reconnected": "リアルタイム共同編集が復旧しました。",
+      "copyFailed": "Unable to copy share link.",
+      "linkCopied": "Collaboration link copied.",
+      "copyManual": "クリップボードへのアクセスがブロックされています。共有ダイアログからリンクを手動でコピーしてください。"
+    }
+  },
+  "connectionPanel": {
+    "architecture": "Architecture",
+    "label": "Label",
+    "messagePlaceholder": "メッセージ",
+    "route": "ルート",
+    "appearance": "外観",
+    "condition": "Condition",
+    "deleteConnection": "Delete Connection"
   }
 }
diff --git a/src/i18n/locales/tr/translation.json b/src/i18n/locales/tr/translation.json
index 85ea4ba..c1a0828 100644
--- a/src/i18n/locales/tr/translation.json
+++ b/src/i18n/locales/tr/translation.json
@@ -63,7 +63,8 @@
     "group": "Grupla",
     "export": "Dışa Aktar",
     "exportDiagram": "Diyagramı Dışa Aktar",
-    "exportAs": "Farklı Dışa Aktar"
+    "exportAs": "Farklı Dışa Aktar",
+    "rename": "Rename"
   },
   "nav": {
     "home": "Ana Sayfa",
@@ -83,7 +84,8 @@
     "beta": "BETA",
     "versionHistory": "Sürüm Geçmişi",
     "loadJSON": "JSON Yükle",
-    "playbackMode": "Oynatma Modu"
+    "playbackMode": "Oynatma Modu",
+    "privacyMessage": "Your diagrams stay with you and do not reach our servers."
   },
   "menu": {
     "file": "Dosya",
@@ -121,7 +123,31 @@
     "hintTransparent4K": "Şeffaf (4K)",
     "hintWhiteBg4K": "Beyaz Arka Plan (4K)",
     "hintDownload": "İndir",
-    "hintClipboard": "Panoya kopyala"
+    "hintClipboard": "Panoya kopyala",
+    "exportOrShare": "Export or share this canvas",
+    "svg": "Export as SVG",
+    "hintSvgScalable": "Scalable vector file",
+    "video": "Playback Video",
+    "hintPlaybackWebM": "Playback timeline (WebM/MP4)",
+    "gif": "Playback GIF",
+    "hintPlaybackGif": "Short loop for docs/social",
+    "share": "Share live canvas",
+    "hintShareViewer": "Invite link for this room",
+    "readmeEmbed": "README Embed",
+    "hintReadmeEmbed": "Copy Markdown snippet",
+    "sectionImage": "Image",
+    "sectionVideo": "Video & Animation",
+    "sectionCode": "Code & Data",
+    "shareSection": "Share canvas",
+    "revealVideo": "Reveal Video",
+    "hintRevealVideo": "Nodes fade in sequentially (WebM/MP4)",
+    "revealGif": "Reveal GIF",
+    "hintRevealGif": "Animated reveal for docs/social",
+    "cinematicVideo": "Cinematic Build Video",
+    "hintCinematicVideo": "Dark launch-style build",
+    "cinematicGif": "Cinematic Build GIF",
+    "hintCinematicGif": "Dark social-ready loop",
+    "actionDownload": "Download"
   },
   "import": {
     "title": "İçe Aktar",
@@ -150,7 +176,8 @@
     "items": "öğe",
     "database": "Veritabanı",
     "inputOutput": "Giriş / Çıkış",
-    "branch": "Dal"
+    "branch": "Dal",
+    "mindmap": "Topic"
   },
   "actions": {
     "clearCanvasConfirm": "Tuvali temizlemek istediğinizden emin misiniz?"
@@ -222,7 +249,25 @@
     "recentFiles": "Son Dosyalar",
     "files": "dosyalar",
     "createFirstFlow": "İlk akışınızı oluşturun",
-    "startFromScratch": "Sıfırdan başlayın veya mevcut bir diyagramı içe aktarın."
+    "startFromScratch": "Sıfırdan başlayın veya mevcut bir diyagramı içe aktarın.",
+    "currentFlow": "Current flow",
+    "autosaved": "Autosaved",
+    "localStorageHint": "Autosaved on this device. We do not upload your diagram data to our servers.",
+    "renameFlow": {
+      "title": "Rename flow",
+      "description": "Update the name shown on your dashboard and tabs.",
+      "label": "Flow name",
+      "placeholder": "Enter a flow name",
+      "hint": "Names are local to this browser profile unless you export or sync them elsewhere.",
+      "closeDialog": "Close rename flow dialog"
+    },
+    "deleteFlow": {
+      "title": "Delete flow",
+      "description": "This removes the local autosaved flow from this device.",
+      "confirmation": "Delete \"{{name}}\"?",
+      "hint": "This cannot be undone unless you have an exported backup or another copy.",
+      "closeDialog": "Close delete flow dialog"
+    }
   },
   "settings": {
     "title": "Ayarlar",
@@ -280,7 +325,8 @@
     "pasteKeyStep": "Yukarıdaki alana yapıştırın — asla bizimle paylaşılmaz",
     "customEndpointTitle": "Özel endpoint nedir?",
     "customModelHint": "Endpoint'iniz için tam model kimliğini girin",
-    "privacyTitle": "Gizlilik ve Şifreleme"
+    "privacyTitle": "Gizlilik ve Şifreleme",
+    "generateWithFlowpilot": "Generate with Flowpilot"
   },
   "playback": {
     "title": "Oynatma",
@@ -374,9 +420,9 @@
     "description": "Nihai beyaz etiketli tuval. Tamamen özelleştirilebilir düğümler, kenarlar ve temalar — React Flow ile güçlendirilmiş. Bu sizin markanız, nefes almak için sonsuz alan verilmiş.",
     "diagramAsCode": "Kod Olarak Diyagram",
     "diagramAsCodeDesc": "Mermaid.js ve tip güvenli DSL'imiz için birinci sınıf destek. Mimarinizi kodla tanımlayın, JSON olarak dışa aktarın ve motorun düzeni halletmesine izin verin.",
-    "flowpilotAI": "Flowpilot AI",
+    "flowpilotAI": "Flowpilot",
     "aiAssistant": "Yapay Zeka Asistanı",
-    "flowpilotAIDesc": "Diyagramınızla sohbet edin. \"Köşeleri daha yuvarlak yap\", \"Yük dengeleyici ekle\".",
+    "flowpilotAIDesc": "Yönlendirilmiş AI düzenlemeleriyle diyagramınız üzerinde çalışın. \"Köşeleri daha yuvarlak yap\", \"Yük dengeleyici ekle\".",
     "addRedisCache": "Veritabanının önüne Redis önbelleği ekle.",
     "localPrivate": "Yerel ve Özel",
     "localPrivateDesc": "Verilerinizi istemiyoruz. Her şey makinenizde kalır. Bulut kaydetme yok, izleme yok, sunucularımıza \"senkronizasyon\" yok. Tam özgürlüğe sahipsiniz.",
@@ -403,7 +449,7 @@
     "designDesc": "Ekranları yeniden oluşturmayı bırakın. Tuvalden kopyalayın ve düzenlenebilir SVG ve metin katmanları olarak Figma'ya yapıştırın.",
     "exportShare": "Dışa Aktar ve Paylaş",
     "pixelPerfectOutput": "PİKSEL MÜKEMMELİ ÇIKTI",
-    "exportShareDesc": "Diyagramları SVG, PNG veya PDF olarak dışa aktarın. Panoya kopyalayın ve düzenlenebilir katmanlarla Figma'ya yapıştırın. Paylaşmak veya sürüm kontrolü için JSON olarak kaydedin.",
+    "exportShareDesc": "Diyagramları SVG veya PNG olarak dışa aktarın. Panoya kopyalayın ve düzenlenebilir katmanlarla Figma'ya yapıştırın. Paylaşmak veya sürüm kontrolü için JSON olarak kaydedin.",
     "vectorEditable": "Vektör • Figma'da Düzenlenebilir",
     "rasterHighRes": "Raster • Yüksek çözünürlüklü dışa aktarma",
     "dataSaveRestore": "Veri • Akışları kaydet ve geri yükle"
@@ -432,8 +478,7 @@
     "communityDesc": "OpenFlowKit üzerinde çalışan geliştiricilere katılın.",
     "roadmap": "Yol Haritası",
     "coreRenderer": "Çekirdek Render",
-    "flowpilotAI": "Flowpilot AI",
-    "pdfExport": "PDF Dışa Aktarma"
+    "flowpilotAI": "Flowpilot"
   },
   "demo": {
     "livePreview": "Canlı Önizleme",
@@ -506,7 +551,9 @@
       "placeholder": "Etiket veya ID ile ara...",
       "noResults": "Düğüm bulunamadı",
       "untitled": "İsimsiz Düğüm",
-      "type": "Tür"
+      "type": "Tür",
+      "showingCount": "Showing: {{count}}",
+      "totalCount": "Total on canvas: {{count}}"
     },
     "templates": {
       "title": "Şablonlar",
@@ -552,7 +599,8 @@
       "compact": "Sıkışık",
       "normal": "Normal",
       "loose": "Geniş",
-      "applyLayout": "Düzeni Uygula"
+      "applyLayout": "Düzeni Uygula",
+      "layoutStyle": "Layout Style"
     },
     "designSystem": {
       "title": "Tasarım Sistemleri",
@@ -577,17 +625,24 @@
       "intelligentRoutingDesc": "Sürüklerken bağlantıları otomatik hizala",
       "animatedEdges": "Animasyonlu Kenarlar",
       "animatedEdgesDesc": "Akan parçacıklar",
-      "strokeWidth": "Çizgi Kalınlığı"
+      "strokeWidth": "Çizgi Kalınlığı",
+      "largeGraphSafety": "Large Graph Safety",
+      "largeGraphSafetyAuto": "Auto",
+      "largeGraphSafetyOn": "On",
+      "largeGraphSafetyOff": "Off",
+      "exportModeDeterministic": "Deterministic",
+      "exportModeLegacy": "Legacy",
+      "exportMode": "Export Mode"
     }
   },
   "settingsModal": {
     "title": "Ayarlar",
     "general": "Genel",
-    "flowpilotAI": "Flowpilot AI",
+    "flowpilotAI": "Flowpilot",
     "shortcuts": "Kısayollar",
     "running": "{appName} Çalışıyor",
     "generalSettings": "Genel Ayarlar",
-    "flowpilotConfigurations": "Flowpilot Yapılandırmaları",
+    "flowpilotConfigurations": "Flowpilot Yapılandırması",
     "keyboardShortcuts": "Klavye Kısayolları",
     "canvas": {
       "title": "Tuval",
@@ -598,7 +653,15 @@
       "miniMap": "Mini Harita",
       "miniMapDesc": "Sağ altta mini harita göster",
       "architectureStrictMode": "Mimari Katı Mod",
-      "architectureStrictModeDesc": "Mimari tanıları toparlama/doğrulama sorunları içerdiğinde Mermaid içe aktarmayı engeller"
+      "architectureStrictModeDesc": "Mimari tanıları toparlama/doğrulama sorunları içerdiğinde Mermaid içe aktarmayı engeller",
+      "alignmentGuides": "Alignment Guides",
+      "alignmentGuidesDesc": "Show smart guide lines while dragging nodes",
+      "routingProfile": "Routing Profile",
+      "routingProfileStandard": "Standard",
+      "routingProfileInfrastructure": "Infrastructure",
+      "routingProfileHint": "Infrastructure mode biases orthogonal routes for service maps.",
+      "edgeBundling": "Bundle Sibling Edges",
+      "edgeBundlingDesc": "Keep parallel connections on shared lanes"
     },
     "ai": {
       "provider": "Sağlayıcı",
@@ -879,7 +942,21 @@
       "pasteKeyStep": "Yukarıdaki alana yapıştırın — asla bizimle paylaşılmaz",
       "customEndpointTitle": "Özel endpoint nedir?",
       "customModelHint": "Endpoint'iniz için tam model kimliğini girin",
-      "privacyTitle": "Gizlilik ve Şifreleme"
+      "privacyTitle": "Gizlilik ve Şifreleme",
+      "advancedEndpointOverride": "Advanced Base URL Override",
+      "baseUrlHint": "Leave empty to use provider default endpoint. Use this for your own proxy/worker URL.",
+      "resetEndpoint": "Reset to default",
+      "customHeadersTitle": "Custom Headers",
+      "customHeadersSubtitle": "Send extra headers for auth proxies like Cloudflare Access.",
+      "addHeader": "Add Header",
+      "cloudflarePreset": "Use Cloudflare Preset",
+      "customHeadersEmpty": "No custom headers configured.",
+      "customHeadersSecurity": "Header values are stored locally in your browser profile.",
+      "risk": {
+        "browserFriendly": "Browser-ready",
+        "proxyLikely": "Proxy likely",
+        "mixed": "Depends on endpoint"
+      }
     },
     "brand": {
       "title": "Marka Kitleri",
@@ -925,7 +1002,12 @@
       "helpImprove": "Geliştirmemize Yardımcı Olun",
       "shareFeedback": "Geri Bildirim Paylaş",
       "shareFeedbackDesc": "Geri bildirim verin, hataları bildirin ve özellik isteyin"
-    }
+    },
+    "settings": "Settings",
+    "canvasSettings": "Canvas Settings",
+    "description": "Configure canvas preferences and keyboard shortcuts.",
+    "close": "Close settings",
+    "closeDialog": "Close settings dialog"
   },
   "customNodes": {
     "browserContent": "Tarayıcı İçeriği",
@@ -940,7 +1022,7 @@
   "toolbar": {
     "selectMode": "Seçim Modu (V)",
     "panMode": "Kaydırma Modu (H)",
-    "flowpilot": "Flowpilot (Cmd+K)",
+    "flowpilot": "Flowpilot",
     "templates": "Şablonlar",
     "addItem": "Öğe Ekle",
     "addToCanvas": "Tuvale Ekle",
@@ -955,7 +1037,8 @@
     "autoLayout": "Otomatik Düzen",
     "clearCanvas": "Tuvali Temizle",
     "undo": "Geri Al (Ctrl+Z)",
-    "redo": "Yinele (Ctrl+Y)"
+    "redo": "Yinele (Ctrl+Y)",
+    "commandCenter": "Open Command Center"
   },
   "flowEditor": {
     "cannotCloseLastTab": "Son sekmeyi kapatamazsınız.",
@@ -972,7 +1055,8 @@
       "generateWithFlowpilot": "Flowpilot ile Oluştur",
       "browseTemplates": "Şablonlara Gözat",
       "addBlankNode": "Boş Şekil Ekle"
-    }
+    },
+    "dslExportSkippedEdges": "{{count}} invalid edge(s) were skipped in DSL export."
   },
   "annotationNode": {
     "placeholder": "*Düzenlemek için çift tıklayın*"
@@ -989,7 +1073,8 @@
     "inputOutputDesc": "Paralelkenar şekli",
     "note": "Yapışkan Not",
     "noteDesc": "Dokümantasyon",
-    "releaseToConnect": "Bağlamak için bırak"
+    "releaseToConnect": "Bağlamak için bırak",
+    "close": "Close connect menu"
   },
   "errorBoundary": {
     "title": "Bir şeyler yanlış gitti",
@@ -1013,7 +1098,12 @@
     "restoreVersion": "Sürümü geri yükle",
     "deleteVersion": "Sürümü sil",
     "nodes": "{{count}} düğüm",
-    "edges": "{{count}} bağlantı"
+    "edges": "{{count}} bağlantı",
+    "close": "Close snapshots panel",
+    "namedVersions": "Named Versions",
+    "noNamedSnapshots": "No named versions yet.",
+    "autosavedVersions": "Autosaved Checkpoints",
+    "noAutoSnapshots": "No autosaved checkpoints yet."
   },
   "templatesPanel": {
     "title": "Akış Şablonları",
@@ -1031,5 +1121,44 @@
   "flowTabs": {
     "closeTab": "Sekmeyi Kapat",
     "newFlowTab": "Yeni Akış Sekmesi"
+  },
+  "share": {
+    "close": "Close",
+    "title": "Share Design",
+    "betaBadge": "Beta",
+    "description": "Invite collaborators to view and edit this flow with you in real-time.",
+    "roomId": "Room ID",
+    "link": "Share link",
+    "copied": "Copied Link!",
+    "copyLink": "Copy Link",
+    "footerNote": "Your diagram stays local unless you share this room. If copy is blocked, copy the link above manually.",
+    "closeDialog": "Close share dialog",
+    "status": {
+      "cache": {
+        "syncing": " local cache syncing",
+        "ready": " local cache ready",
+        "hydrated": " restored from local cache"
+      },
+      "realtime": "Realtime peer sync",
+      "waiting": "Connecting to realtime sync",
+      "fallback": "Local-only mode"
+    },
+    "openDialog": "Share dialog",
+    "toast": {
+      "fallbackMode": "Realtime sync is unavailable. Continuing in local-only mode.",
+      "reconnected": "Realtime collaboration restored.",
+      "copyFailed": "Unable to copy share link.",
+      "linkCopied": "Collaboration link copied.",
+      "copyManual": "Clipboard access is blocked. Copy the link manually from the share dialog."
+    }
+  },
+  "connectionPanel": {
+    "architecture": "Architecture",
+    "label": "Label",
+    "messagePlaceholder": "Mesaj",
+    "route": "Route",
+    "appearance": "Appearance",
+    "condition": "Condition",
+    "deleteConnection": "Delete Connection"
   }
-}
\ No newline at end of file
+}
diff --git a/src/i18n/locales/zh/translation.json b/src/i18n/locales/zh/translation.json
index b9d910c..dc3498d 100644
--- a/src/i18n/locales/zh/translation.json
+++ b/src/i18n/locales/zh/translation.json
@@ -56,7 +56,8 @@
     "distributeHorizontally": "水平分布",
     "distributeVertically": "垂直分布",
     "group": "分组",
-    "upload": "Upload"
+    "upload": "Upload",
+    "rename": "重命名"
   },
   "nav": {
     "home": "首页",
@@ -76,7 +77,8 @@
     "beta": "测试版",
     "versionHistory": "版本历史",
     "loadJSON": "加载 JSON",
-    "playbackMode": "回放模式"
+    "playbackMode": "回放模式",
+    "privacyMessage": "您的图表只留在您这里，不会发送到我们的服务器。"
   },
   "menu": {
     "file": "文件",
@@ -114,7 +116,31 @@
     "hintClipboard": "Copy to clipboard",
     "figmaEditable": "Figma Editable",
     "exportDiagram": "Export Diagram",
-    "exportAs": "Export As"
+    "exportAs": "Export As",
+    "exportOrShare": "导出或分享此画布",
+    "svg": "导出为 SVG",
+    "hintSvgScalable": "可缩放矢量文件",
+    "video": "回放视频",
+    "hintPlaybackWebM": "回放时间线（WebM/MP4）",
+    "gif": "回放 GIF",
+    "hintPlaybackGif": "适用于文档/社交媒体的短循环",
+    "share": "分享实时画布",
+    "hintShareViewer": "此房间的邀请链接",
+    "readmeEmbed": "README Embed",
+    "hintReadmeEmbed": "Copy Markdown snippet",
+    "sectionImage": "Image",
+    "sectionVideo": "Video & Animation",
+    "sectionCode": "Code & Data",
+    "shareSection": "分享画布",
+    "revealVideo": "Reveal Video",
+    "hintRevealVideo": "Nodes fade in sequentially (WebM/MP4)",
+    "revealGif": "Reveal GIF",
+    "hintRevealGif": "Animated reveal for docs/social",
+    "cinematicVideo": "Cinematic Build Video",
+    "hintCinematicVideo": "Dark launch-style build",
+    "cinematicGif": "Cinematic Build GIF",
+    "hintCinematicGif": "Dark social-ready loop",
+    "actionDownload": "Download"
   },
   "import": {
     "title": "导入",
@@ -197,7 +223,25 @@
     "recentFiles": "最近文件",
     "files": "个文件",
     "createFirstFlow": "创建您的第一个流程",
-    "startFromScratch": "从零开始或导入现有图表。"
+    "startFromScratch": "从零开始或导入现有图表。",
+    "currentFlow": "当前流程",
+    "autosaved": "已自动保存",
+    "localStorageHint": "已自动保存在此设备上。我们不会将您的图表数据上传到我们的服务器。",
+    "renameFlow": {
+      "title": "重命名流程",
+      "description": "更新仪表板和标签页中显示的名称。",
+      "label": "流程名称",
+      "placeholder": "输入流程名称",
+      "hint": "除非您将其导出或同步到其他地方，否则名称仅保存在当前浏览器配置中。",
+      "closeDialog": "关闭重命名流程对话框"
+    },
+    "deleteFlow": {
+      "title": "删除流程",
+      "description": "这会从此设备中移除本地自动保存的流程。",
+      "confirmation": "删除“{{name}}”？",
+      "hint": "除非您有导出的备份或另一份副本，否则此操作无法撤销。",
+      "closeDialog": "关闭删除流程对话框"
+    }
   },
   "settings": {
     "title": "设置",
@@ -249,7 +293,8 @@
     "model": "模型",
     "apiKey": "API 密钥",
     "placeholder": "描述你的流程图...",
-    "settingsSubtitle": "Configure your preferred AI provider, model, and API key below."
+    "settingsSubtitle": "Configure your preferred AI provider, model, and API key below.",
+    "generateWithFlowpilot": "使用 Flowpilot 生成"
   },
   "playback": {
     "title": "回放",
@@ -342,9 +387,9 @@
     "description": "终极白标画布。",
     "diagramAsCode": "代码即图表",
     "diagramAsCodeDesc": "支持 Mermaid.js 和 DSL。",
-    "flowpilotAI": "Flowpilot AI",
+    "flowpilotAI": "Flowpilot",
     "aiAssistant": "AI 助手",
-    "flowpilotAIDesc": "与你的图表对话。",
+    "flowpilotAIDesc": "通过引导式 AI 编辑来完善你的图表。",
     "addRedisCache": "在数据库前添加一个 Redis 缓存。",
     "localPrivate": "本地且私密",
     "localPrivateDesc": "一切都留在你的机器上。",
@@ -371,7 +416,7 @@
     "designDesc": "从画布复制并作为可编辑的 SVG 粘贴到 Figma 中。",
     "exportShare": "导出与分享",
     "pixelPerfectOutput": "像素级完美输出",
-    "exportShareDesc": "将图表导出为 SVG、PNG 或 PDF。",
+    "exportShareDesc": "将图表导出为 SVG 或 PNG。",
     "vectorEditable": "矢量 • 在 Figma 中可编辑",
     "rasterHighRes": "光栅 • 高分辨率导出",
     "dataSaveRestore": "数据 • 保存与恢复流程"
@@ -400,8 +445,7 @@
     "communityDesc": "加入构建者行列。",
     "roadmap": "路线图",
     "coreRenderer": "核心渲染器",
-    "flowpilotAI": "Flowpilot AI",
-    "pdfExport": "PDF 导出"
+    "flowpilotAI": "Flowpilot"
   },
   "demo": {
     "livePreview": "实时预览",
@@ -474,7 +518,9 @@
       "placeholder": "通过标签或 ID 搜索...",
       "noResults": "未找到节点",
       "untitled": "未命名节点",
-      "type": "类型"
+      "type": "类型",
+      "showingCount": "Showing: {{count}}",
+      "totalCount": "Total on canvas: {{count}}"
     },
     "templates": {
       "title": "模板",
@@ -520,7 +566,8 @@
       "compact": "紧凑",
       "normal": "正常",
       "loose": "宽松",
-      "applyLayout": "应用布局"
+      "applyLayout": "应用布局",
+      "layoutStyle": "布局样式"
     },
     "designSystem": {
       "title": "设计系统",
@@ -545,13 +592,20 @@
       "intelligentRoutingDesc": "拖动时自动吸附",
       "animatedEdges": "动画连线",
       "animatedEdgesDesc": "流动的粒子",
-      "strokeWidth": "线宽"
+      "strokeWidth": "线宽",
+      "largeGraphSafety": "大图保护",
+      "largeGraphSafetyAuto": "自动",
+      "largeGraphSafetyOn": "开启",
+      "largeGraphSafetyOff": "关闭",
+      "exportModeDeterministic": "确定性",
+      "exportModeLegacy": "旧版",
+      "exportMode": "导出模式"
     }
   },
   "settingsModal": {
     "title": "设置",
     "general": "通用",
-    "flowpilotAI": "Flowpilot AI",
+    "flowpilotAI": "Flowpilot",
     "shortcuts": "快捷键",
     "running": "正在运行 {appName}",
     "generalSettings": "通用设置",
@@ -566,7 +620,15 @@
       "miniMap": "小地图",
       "miniMapDesc": "右下角显示小地图",
       "architectureStrictMode": "架构严格模式",
-      "architectureStrictModeDesc": "当架构诊断包含恢复/校验问题时，阻止 Mermaid 导入"
+      "architectureStrictModeDesc": "当架构诊断包含恢复/校验问题时，阻止 Mermaid 导入",
+      "alignmentGuides": "Alignment Guides",
+      "alignmentGuidesDesc": "Show smart guide lines while dragging nodes",
+      "routingProfile": "路由配置",
+      "routingProfileStandard": "标准",
+      "routingProfileInfrastructure": "基础设施",
+      "routingProfileHint": "基础设施模式会优先为服务图使用正交线路。",
+      "edgeBundling": "捆绑平行边",
+      "edgeBundlingDesc": "让平行连接保持在共享通道上"
     },
     "ai": {
       "provider": "提供商",
@@ -623,7 +685,21 @@
       "customEndpointTitle": "What is a custom endpoint?",
       "privacyTitle": "Privacy & Encryption",
       "customEndpointText": "Any <1>OpenAI-compatible</1> API endpoint — local or remote. Great for:",
-      "customEndpointMustSupport": "Must support <1>POST /chat/completions</1> (OpenAI format)"
+      "customEndpointMustSupport": "Must support <1>POST /chat/completions</1> (OpenAI format)",
+      "advancedEndpointOverride": "高级基础 URL 覆盖",
+      "baseUrlHint": "留空以使用提供商默认端点。可用于您自己的代理/worker URL。",
+      "resetEndpoint": "重置为默认值",
+      "customHeadersTitle": "自定义请求头",
+      "customHeadersSubtitle": "为 Cloudflare Access 之类的认证代理发送额外请求头。",
+      "addHeader": "添加请求头",
+      "cloudflarePreset": "使用 Cloudflare 预设",
+      "customHeadersEmpty": "尚未配置自定义请求头。",
+      "customHeadersSecurity": "请求头的值会本地存储在您的浏览器配置中。",
+      "risk": {
+        "browserFriendly": "浏览器友好",
+        "proxyLikely": "可能需要代理",
+        "mixed": "取决于端点"
+      }
     },
     "brand": {
       "title": "品牌套件",
@@ -670,7 +746,11 @@
       "shareFeedback": "分享反馈",
       "shareFeedbackDesc": "提供反馈、报告错误"
     },
-    "settings": "设置"
+    "settings": "设置",
+    "canvasSettings": "画布设置",
+    "description": "配置画布偏好设置和键盘快捷键。",
+    "close": "关闭设置",
+    "closeDialog": "关闭设置对话框"
   },
   "customNodes": {
     "browserContent": "浏览器内容",
@@ -685,7 +765,7 @@
   "toolbar": {
     "selectMode": "选择模式 (V)",
     "panMode": "平移模式 (H)",
-    "flowpilot": "Flowpilot (Cmd+K)",
+    "flowpilot": "Flowpilot",
     "templates": "模板",
     "addItem": "添加元素",
     "addToCanvas": "添加到画布",
@@ -700,7 +780,8 @@
     "autoLayout": "自动布局",
     "clearCanvas": "清除画布",
     "undo": "撤销 (Ctrl+Z)",
-    "redo": "重做 (Ctrl+Y)"
+    "redo": "重做 (Ctrl+Y)",
+    "commandCenter": "打开命令中心"
   },
   "flowEditor": {
     "cannotCloseLastTab": "无法关闭最后一个标签页。",
@@ -717,7 +798,8 @@
       "generateWithFlowpilot": "使用 Flowpilot 生成",
       "browseTemplates": "浏览模板",
       "addBlankNode": "添加空白形状"
-    }
+    },
+    "dslExportSkippedEdges": "DSL 导出时跳过了 {{count}} 条无效边。"
   },
   "annotationNode": {
     "placeholder": "*双击编辑注释*"
@@ -734,7 +816,8 @@
     "inputOutputDesc": "平行四边形",
     "note": "便利贴",
     "noteDesc": "文档说明",
-    "releaseToConnect": "松开以连接"
+    "releaseToConnect": "松开以连接",
+    "close": "关闭连接菜单"
   },
   "errorBoundary": {
     "title": "出现了错误",
@@ -758,7 +841,12 @@
     "restoreVersion": "恢复版本",
     "deleteVersion": "删除版本",
     "nodes": "{{count}} 个节点",
-    "edges": "{{count}} 条边"
+    "edges": "{{count}} 条边",
+    "close": "关闭快照面板",
+    "namedVersions": "Named Versions",
+    "noNamedSnapshots": "No named versions yet.",
+    "autosavedVersions": "Autosaved Checkpoints",
+    "noAutoSnapshots": "No autosaved checkpoints yet."
   },
   "templatesPanel": {
     "title": "流程模板",
@@ -790,9 +878,49 @@
     "addCommentsHere": "Add your comments here.",
     "newSection": "New Section",
     "text": "Text",
-    "image": "Image"
+    "image": "Image",
+    "mindmap": "主题"
   },
   "actions": {
     "clearCanvasConfirm": "Are you sure you want to clear the canvas?"
+  },
+  "share": {
+    "close": "Close",
+    "title": "Share Design",
+    "betaBadge": "测试版",
+    "description": "Invite collaborators to view and edit this flow with you in real-time.",
+    "roomId": "房间 ID",
+    "link": "分享链接",
+    "copied": "Copied Link!",
+    "copyLink": "Copy Link",
+    "footerNote": "Your diagram stays local unless you share this room. If copy is blocked, copy the link above manually.",
+    "closeDialog": "Close share dialog",
+    "status": {
+      "cache": {
+        "syncing": " local cache syncing",
+        "ready": " local cache ready",
+        "hydrated": " restored from local cache"
+      },
+      "realtime": "Realtime peer sync",
+      "waiting": "Connecting to realtime sync",
+      "fallback": "Local-only mode"
+    },
+    "openDialog": "Share dialog",
+    "toast": {
+      "fallbackMode": "实时同步不可用。将继续以仅本地模式运行。",
+      "reconnected": "实时协作已恢复。",
+      "copyFailed": "Unable to copy share link.",
+      "linkCopied": "Collaboration link copied.",
+      "copyManual": "剪贴板访问被阻止。请从分享对话框中手动复制链接。"
+    }
+  },
+  "connectionPanel": {
+    "architecture": "Architecture",
+    "label": "Label",
+    "messagePlaceholder": "消息",
+    "route": "路由",
+    "appearance": "外观",
+    "condition": "Condition",
+    "deleteConnection": "Delete Connection"
   }
 }
diff --git a/src/i18n/usedLocaleCoverage.test.ts b/src/i18n/usedLocaleCoverage.test.ts
new file mode 100644
index 0000000..6d3a642
--- /dev/null
+++ b/src/i18n/usedLocaleCoverage.test.ts
@@ -0,0 +1,107 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { describe, expect, it } from 'vitest';
+
+type JsonMap = Record<string, unknown>;
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const ROOT_DIR = path.resolve(__dirname, '..', '..');
+const SRC_LOCALES_DIR = path.join(__dirname, 'locales');
+const PUBLIC_LOCALES_DIR = path.join(ROOT_DIR, 'public', 'locales');
+const SOURCE_DIR = path.join(ROOT_DIR, 'src');
+
+const LOCALES = ['en', 'de', 'es', 'fr', 'ja', 'tr', 'zh'] as const;
+
+function readJson(filePath: string): JsonMap {
+  return JSON.parse(fs.readFileSync(filePath, 'utf8').replace(/^\uFEFF/, '')) as JsonMap;
+}
+
+function isObject(value: unknown): value is JsonMap {
+  return Boolean(value) && typeof value === 'object' && !Array.isArray(value);
+}
+
+function getByPath(obj: JsonMap, dotPath: string): unknown {
+  return dotPath.split('.').reduce<unknown>((current, segment) => {
+    if (!isObject(current)) {
+      return undefined;
+    }
+
+    return current[segment];
+  }, obj);
+}
+
+function walkFiles(dir: string, out: string[] = []): string[] {
+  for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
+    const fullPath = path.join(dir, entry.name);
+
+    if (entry.isDirectory()) {
+      if (entry.name === 'dist') continue;
+      walkFiles(fullPath, out);
+      continue;
+    }
+
+    if (/\.(ts|tsx|js|jsx)$/.test(entry.name)) {
+      out.push(fullPath);
+    }
+  }
+
+  return out;
+}
+
+function extractTranslationKeys(code: string): Set<string> {
+  const keys = new Set<string>();
+  const patterns = [
+    /\bt\(\s*['"`]([^'"`]+)['"`]/g,
+    /\bi18nKey\s*=\s*['"`]([^'"`]+)['"`]/g,
+  ];
+
+  for (const pattern of patterns) {
+    let match: RegExpExecArray | null;
+    while ((match = pattern.exec(code)) !== null) {
+      const key = match[1];
+      if (!key.includes('${') && key.includes('.')) {
+        keys.add(key);
+      }
+    }
+  }
+
+  return keys;
+}
+
+function collectUsedKeys(): string[] {
+  const keys = new Set<string>();
+
+  for (const filePath of walkFiles(SOURCE_DIR)) {
+    const code = fs.readFileSync(filePath, 'utf8');
+    for (const key of extractTranslationKeys(code)) {
+      keys.add(key);
+    }
+  }
+
+  return [...keys].sort();
+}
+
+describe('used locale coverage', () => {
+  it('has every code-referenced translation key in every source locale', () => {
+    const usedKeys = collectUsedKeys();
+
+    for (const locale of LOCALES) {
+      const localePath = path.join(SRC_LOCALES_DIR, locale, 'translation.json');
+      const dict = readJson(localePath);
+      const missingKeys = usedKeys.filter((key) => typeof getByPath(dict, key) !== 'string');
+
+      expect(missingKeys, `${locale} is missing used translation keys`).toEqual([]);
+    }
+  });
+
+  it('keeps public locale mirrors in sync with source locales', () => {
+    for (const locale of LOCALES) {
+      const srcPath = path.join(SRC_LOCALES_DIR, locale, 'translation.json');
+      const publicPath = path.join(PUBLIC_LOCALES_DIR, locale, 'translation.json');
+
+      expect(readJson(publicPath), `${locale} public locale should match src locale`).toEqual(readJson(srcPath));
+    }
+  });
+});
diff --git a/src/index.css b/src/index.css
index e3f07eb..0d2c6d1 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,7 +1,95 @@
-@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;600&family=Inter:wght@400;500;600;700&family=Outfit:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,700;1,400;1,700&family=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap');
 @import "tailwindcss";
 @plugin "tailwindcss-animate";
 
+@font-face {
+  font-family: 'Inter';
+  src: url('/fonts/inter/inter-400-700-latin.woff2') format('woff2');
+  font-style: normal;
+  font-weight: 400 700;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Google Sans Flex';
+  src: url('/fonts/google-sans/google-sans-flex-400-700-latin.woff2') format('woff2');
+  font-style: normal;
+  font-weight: 400 700;
+  font-stretch: 100%;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Google Sans';
+  src: url('/fonts/google-sans/google-sans-400-latin.woff2') format('woff2');
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Google Sans';
+  src: url('/fonts/google-sans/google-sans-500-latin.woff2') format('woff2');
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Google Sans';
+  src: url('/fonts/google-sans/google-sans-600-latin.woff2') format('woff2');
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Google Sans';
+  src: url('/fonts/google-sans/google-sans-700-latin.woff2') format('woff2');
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Google Sans Text';
+  src: url('/fonts/google-sans/google-sans-text-400-latin.woff2') format('woff2');
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Google Sans Text';
+  src: url('/fonts/google-sans/google-sans-text-500-latin.woff2') format('woff2');
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Google Sans Text';
+  src: url('/fonts/google-sans/google-sans-text-700-latin.woff2') format('woff2');
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Google Sans Code';
+  src: url('/fonts/google-sans/google-sans-code-400-latin.woff2') format('woff2');
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Google Sans Code';
+  src: url('/fonts/google-sans/google-sans-code-500-latin.woff2') format('woff2');
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+}
+
 html {
   scroll-behavior: smooth;
 }
@@ -10,10 +98,10 @@ html {
   --animate-gradient-x: gradient-x 15s ease infinite;
 
   /* Typography */
-  --font-display: "Space Grotesk", sans-serif;
-  --font-serif: "Instrument Serif", serif;
-  --font-sans: "Inter", sans-serif;
-  --font-mono: "JetBrains Mono", monospace;
+  --font-display: "Inter", "Segoe UI", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
+  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", serif;
+  --font-sans: "Inter", "Segoe UI", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
+  --font-mono: "Google Sans Code", ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", monospace;
 
   --color-brand-primary: var(--brand-primary);
   --color-brand-primary-600: var(--brand-primary-600);
@@ -83,6 +171,28 @@ html {
     }
   }
 
+  @keyframes fadeIn {
+    0% {
+      opacity: 0;
+    }
+
+    100% {
+      opacity: 1;
+    }
+  }
+
+  @keyframes nodeAnimateIn {
+    0% {
+      opacity: 0;
+      transform: scale(0.85) translateY(8px);
+    }
+
+    100% {
+      opacity: 1;
+      transform: scale(1) translateY(0);
+    }
+  }
+
   @keyframes blob {
     0% {
       transform: translate(0px, 0px) scale(1);
@@ -197,18 +307,29 @@ html {
 
   /* Dimensions */
   --brand-radius: 8px;
-  --radius-sm: max(2px, calc(var(--brand-radius) - 3px));
+  --radius-xs: 4px;
+  --radius-sm: 6px;
   --radius-md: var(--brand-radius);
-  --radius-lg: calc(var(--brand-radius) + 4px);
+  --radius-lg: 12px;
+  --radius-xl: 16px;
+  --radius-2xl: 24px;
+  --radius-3xl: 32px;
   --brand-border-width: 1px;
 
   /* Typography */
-  --brand-font-family: 'Inter', sans-serif;
+  --brand-font-family: var(--font-sans);
 
   /* UI Effects */
   --brand-glass-blur: 12px;
   --brand-glass-opacity: 0.7;
   --brand-glass-bg: rgba(255, 255, 255, 0.7);
+
+  /* App Shadows */
+  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.03), 0 1px 1px rgba(15, 23, 42, 0.02);
+  --shadow-sm: 0 4px 10px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.03);
+  --shadow-md: 0 10px 24px rgba(15, 23, 42, 0.07), 0 3px 8px rgba(15, 23, 42, 0.04);
+  --shadow-lg: 0 16px 36px rgba(15, 23, 42, 0.09), 0 6px 16px rgba(15, 23, 42, 0.05);
+  --shadow-overlay: 0 22px 48px rgba(15, 23, 42, 0.11), 0 8px 20px rgba(15, 23, 42, 0.05);
 }
 
 body {
@@ -220,17 +341,37 @@ body {
 .flow-handle-hitarea.react-flow__handle::after {
   content: '';
   position: absolute;
-  inset: -4px;
+  inset: -10px;
   border-radius: 9999px;
   pointer-events: none;
 }
 
+/* Handle base size — larger dots are easier to grab */
+.react-flow__handle {
+  width: 10px !important;
+  height: 10px !important;
+  border: 2px solid white !important;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.2) !important;
+  transition: transform 0.1s, opacity 0.15s !important;
+}
+
+/* Pop the handle on hover so it's obviously clickable */
+.react-flow__handle:hover {
+  transform: translate(-50%, -50%) scale(1.35) !important;
+}
+
 /* Hide connection handles during active node drag to reduce visual noise. */
 .react-flow__node.dragging .react-flow__handle {
   opacity: 0 !important;
   pointer-events: none !important;
 }
 
+/* When connecting, make all other nodes' handles glow to invite connection */
+.is-connecting .react-flow__node:not(.selected) .react-flow__handle {
+  opacity: 1 !important;
+  transform: translate(-50%, -50%) scale(1.2) !important;
+}
+
 /* ===== Node Resizer Bounding Box (Miro/Figma style) ===== */
 .flow-node-resizer-line {
   border-color: var(--brand-primary) !important;
@@ -338,7 +479,7 @@ body {
 }
 
 .font-inter {
-  font-family: 'Inter', sans-serif;
+  font-family: var(--font-sans);
 }
 
 /* Global Noise Texture */
@@ -359,19 +500,19 @@ body {
 }
 
 .font-roboto {
-  font-family: 'Roboto', sans-serif;
+  font-family: var(--font-sans);
 }
 
 .font-playfair {
-  font-family: 'Playfair Display', serif;
+  font-family: var(--font-serif);
 }
 
 .font-fira {
-  font-family: 'Fira Code', monospace;
+  font-family: var(--font-mono);
 }
 
 .font-outfit {
-  font-family: 'Outfit', sans-serif;
+  font-family: var(--font-sans);
 }
 
 
@@ -476,6 +617,13 @@ body {
   cursor: grabbing !important;
 }
 
+/* ===== Selection marquee — Figma style ===== */
+.react-flow__selection {
+  background: rgba(233, 84, 32, 0.06);
+  border: 1px solid var(--brand-primary, #e95420);
+  border-radius: 2px;
+}
+
 /* React Flow defaults to pointer in selection mode; keep arrow cursor for select mode panes. */
 .flow-canvas-select-mode .react-flow__pane {
   cursor: default;
@@ -683,4 +831,11 @@ body {
   .btn-beveled:active {
     box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.1);
   }
+
+  .btn-beveled-primary:disabled,
+  .btn-beveled-secondary:disabled,
+  .btn-beveled:disabled {
+    box-shadow: none;
+    transform: none;
+  }
 }
diff --git a/src/index.tsx b/src/index.tsx
index e9c1e52..7c6e5bf 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -2,11 +2,15 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App';
 import { ErrorBoundary } from './components/ErrorBoundary';
+import { RouteLoadingFallback } from './components/app/RouteLoadingFallback';
 import { ToastProvider } from './components/ui/ToastContext';
+import { ensureLocalFirstPersistenceReady } from './services/storage/localFirstRuntime';
 import { installStorageTelemetrySink } from './services/storage/storageTelemetrySink';
+import { registerAppShellServiceWorker } from './services/offline/registerAppShellServiceWorker';
 import './index.css';
 
 installStorageTelemetrySink();
+registerAppShellServiceWorker();
 
 const rootElement = document.getElementById('root');
 if (!rootElement) {
@@ -14,11 +18,43 @@ if (!rootElement) {
 }
 
 const root = ReactDOM.createRoot(rootElement);
+
+function BootstrapApp(): React.ReactElement {
+  const [isReady, setIsReady] = React.useState(false);
+
+  React.useEffect(() => {
+    let isDisposed = false;
+
+    void ensureLocalFirstPersistenceReady()
+      .catch(() => undefined)
+      .finally(() => {
+        if (!isDisposed) {
+          setIsReady(true);
+        }
+      });
+
+    return () => {
+      isDisposed = true;
+    };
+  }, []);
+
+  if (!isReady) {
+    return (
+      <RouteLoadingFallback
+        title="Restoring your workspace"
+        description="Loading your diagrams, chat history, and local settings."
+      />
+    );
+  }
+
+  return <App />;
+}
+
 root.render(
   <React.StrictMode>
     <ErrorBoundary>
       <ToastProvider>
-        <App />
+        <BootstrapApp />
       </ToastProvider>
     </ErrorBoundary>
   </React.StrictMode>
diff --git a/src/lib/analytics.ts b/src/lib/analytics.ts
deleted file mode 100644
index 700b645..0000000
--- a/src/lib/analytics.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-// Analytics removed — all calls are no-ops
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-export function trackEvent(_event: string, _properties?: Record<string, unknown>): void {}
-
-export function initAnalytics(): void {}
diff --git a/src/lib/architectureTemplates.test.ts b/src/lib/architectureTemplates.test.ts
new file mode 100644
index 0000000..54f3c08
--- /dev/null
+++ b/src/lib/architectureTemplates.test.ts
@@ -0,0 +1,91 @@
+import { describe, expect, it } from 'vitest';
+import { buildArchitectureTemplate, getArchitectureTemplateOptions } from './architectureTemplates';
+import type { FlowNode } from './types';
+
+function createSourceNode(): FlowNode {
+  return {
+    id: 'arch-root',
+    type: 'architecture',
+    position: { x: 100, y: 200 },
+    data: {
+      label: 'Entry',
+      color: 'slate',
+      archProvider: 'aws',
+      archEnvironment: 'production',
+      archBoundaryId: 'section-1',
+      archZone: 'public',
+      archTrustDomain: 'external',
+    },
+    selected: true,
+  };
+}
+
+describe('architectureTemplates', () => {
+  it('lists the available starter layouts', () => {
+    expect(getArchitectureTemplateOptions().map((option) => option.id)).toEqual([
+      'three-tier-web',
+      'microservices',
+      'event-driven',
+      'c4-system-context',
+      'network-edge-security',
+    ]);
+  });
+
+  it('builds a template anchored to the selected architecture node', () => {
+    const template = buildArchitectureTemplate(
+      'three-tier-web',
+      createSourceNode(),
+      (key) => `node-${key}`,
+      (key) => `edge-${key}`,
+    );
+
+    expect(template).not.toBeNull();
+    expect(template?.sourceData.label).toBe('Web App');
+    expect(template?.nodes).toHaveLength(3);
+    expect(template?.nodes[0].data.archProvider).toBe('aws');
+    expect(template?.nodes[0].data.archBoundaryId).toBe('section-1');
+    expect(template?.edges.map((edge) => `${edge.source}:${edge.target}`)).toEqual([
+      'arch-root:node-api',
+      'node-api:node-cache',
+      'node-api:node-database',
+    ]);
+  });
+
+  it('builds the C4 system context template with C4 resource types', () => {
+    const template = buildArchitectureTemplate(
+      'c4-system-context',
+      createSourceNode(),
+      (key) => `node-${key}`,
+      (key) => `edge-${key}`,
+    );
+
+    expect(template).not.toBeNull();
+    expect(template?.sourceData.archResourceType).toBe('system');
+    expect(template?.nodes.map((node) => node.data.archResourceType)).toEqual([
+      'person',
+      'container',
+      'container',
+      'database_container',
+    ]);
+  });
+
+  it('builds the network edge security template with network resource types', () => {
+    const template = buildArchitectureTemplate(
+      'network-edge-security',
+      createSourceNode(),
+      (key) => `node-${key}`,
+      (key) => `edge-${key}`,
+    );
+
+    expect(template).not.toBeNull();
+    expect(template?.sourceData.archResourceType).toBe('dns');
+    expect(template?.nodes.map((node) => node.data.archResourceType)).toEqual([
+      'cdn',
+      'firewall',
+      'load_balancer',
+      'service',
+      'service',
+    ]);
+    expect(template?.edges.map((edge) => edge.label)).toContain('allows 443');
+  });
+});
diff --git a/src/lib/architectureTemplates.ts b/src/lib/architectureTemplates.ts
new file mode 100644
index 0000000..ddfb945
--- /dev/null
+++ b/src/lib/architectureTemplates.ts
@@ -0,0 +1,490 @@
+import type { EdgeData, FlowEdge, FlowNode, NodeData } from './types';
+
+export type ArchitectureTemplateId =
+  | 'three-tier-web'
+  | 'microservices'
+  | 'event-driven'
+  | 'c4-system-context'
+  | 'network-edge-security';
+
+interface TemplateNodeSpec {
+  key: string;
+  offsetX: number;
+  offsetY: number;
+  data: Partial<NodeData> & Pick<NodeData, 'label'>;
+}
+
+interface TemplateEdgeSpec {
+  source: string;
+  target: string;
+  label?: string;
+  data?: Partial<EdgeData>;
+}
+
+interface ArchitectureTemplateDefinition {
+  id: ArchitectureTemplateId;
+  label: string;
+  description: string;
+  anchor: Partial<NodeData> & Pick<NodeData, 'label'>;
+  nodes: TemplateNodeSpec[];
+  edges: TemplateEdgeSpec[];
+}
+
+type InheritedArchitectureData = Pick<
+  NodeData,
+  'archProvider' | 'archEnvironment' | 'archBoundaryId' | 'archZone' | 'archTrustDomain'
+>;
+
+export interface ArchitectureTemplateOption {
+  id: ArchitectureTemplateId;
+  label: string;
+  description: string;
+}
+
+export interface BuiltArchitectureTemplate {
+  sourceData: Partial<NodeData>;
+  nodes: FlowNode[];
+  edges: FlowEdge[];
+}
+
+const TEMPLATE_DEFINITIONS: ArchitectureTemplateDefinition[] = [
+  {
+    id: 'three-tier-web',
+    label: '3-tier web',
+    description: 'Presentation, application, and data services.',
+    anchor: {
+      label: 'Web App',
+      subLabel: 'Presentation tier',
+      archProvider: 'custom',
+      archResourceType: 'service',
+      icon: 'Monitor',
+      color: 'blue',
+    },
+    nodes: [
+      {
+        key: 'api',
+        offsetX: 260,
+        offsetY: 0,
+        data: {
+          label: 'API Layer',
+          subLabel: 'Business logic',
+          icon: 'Server',
+          color: 'violet',
+          archResourceType: 'service',
+        },
+      },
+      {
+        key: 'cache',
+        offsetX: 520,
+        offsetY: -90,
+        data: {
+          label: 'Cache',
+          subLabel: 'Session and query cache',
+          icon: 'Zap',
+          color: 'amber',
+          archResourceType: 'service',
+        },
+      },
+      {
+        key: 'database',
+        offsetX: 520,
+        offsetY: 90,
+        data: {
+          label: 'Primary Database',
+          subLabel: 'Persistent storage',
+          icon: 'Database',
+          color: 'emerald',
+          archResourceType: 'database',
+        },
+      },
+    ],
+    edges: [
+      { source: 'source', target: 'api', label: 'HTTPS' },
+      { source: 'api', target: 'cache', label: 'read/write' },
+      { source: 'api', target: 'database', label: 'SQL' },
+    ],
+  },
+  {
+    id: 'microservices',
+    label: 'Microservices',
+    description: 'Gateway, services, and async processing.',
+    anchor: {
+      label: 'API Gateway',
+      subLabel: 'Ingress and routing',
+      archProvider: 'custom',
+      archResourceType: 'service',
+      icon: 'Network',
+      color: 'blue',
+    },
+    nodes: [
+      {
+        key: 'auth',
+        offsetX: 250,
+        offsetY: -120,
+        data: {
+          label: 'Auth Service',
+          subLabel: 'Identity and tokens',
+          icon: 'Lock',
+          color: 'violet',
+          archResourceType: 'service',
+        },
+      },
+      {
+        key: 'orders',
+        offsetX: 250,
+        offsetY: 0,
+        data: {
+          label: 'Orders Service',
+          subLabel: 'Checkout orchestration',
+          icon: 'Package',
+          color: 'violet',
+          archResourceType: 'service',
+        },
+      },
+      {
+        key: 'notifications',
+        offsetX: 250,
+        offsetY: 120,
+        data: {
+          label: 'Notifications',
+          subLabel: 'Email and alerts',
+          icon: 'Bell',
+          color: 'blue',
+          archResourceType: 'service',
+        },
+      },
+      {
+        key: 'queue',
+        offsetX: 520,
+        offsetY: 60,
+        data: {
+          label: 'Event Queue',
+          subLabel: 'Async delivery',
+          icon: 'MessageSquare',
+          color: 'amber',
+          archResourceType: 'queue',
+        },
+      },
+    ],
+    edges: [
+      { source: 'source', target: 'auth', label: 'auth' },
+      { source: 'source', target: 'orders', label: 'REST' },
+      { source: 'orders', target: 'queue', label: 'publish' },
+      { source: 'queue', target: 'notifications', label: 'consume' },
+    ],
+  },
+  {
+    id: 'event-driven',
+    label: 'Event-driven',
+    description: 'Producer, broker, and consumer layout.',
+    anchor: {
+      label: 'Event Producer',
+      subLabel: 'Application domain event',
+      archProvider: 'custom',
+      archResourceType: 'service',
+      icon: 'Send',
+      color: 'blue',
+    },
+    nodes: [
+      {
+        key: 'broker',
+        offsetX: 270,
+        offsetY: 0,
+        data: {
+          label: 'Event Broker',
+          subLabel: 'Topic routing',
+          icon: 'GitBranch',
+          color: 'amber',
+          archResourceType: 'queue',
+        },
+      },
+      {
+        key: 'consumer-a',
+        offsetX: 540,
+        offsetY: -110,
+        data: {
+          label: 'Consumer A',
+          subLabel: 'Realtime processing',
+          icon: 'Zap',
+          color: 'violet',
+          archResourceType: 'service',
+        },
+      },
+      {
+        key: 'consumer-b',
+        offsetX: 540,
+        offsetY: 0,
+        data: {
+          label: 'Consumer B',
+          subLabel: 'Analytics pipeline',
+          icon: 'BarChart3',
+          color: 'blue',
+          archResourceType: 'service',
+        },
+      },
+      {
+        key: 'storage',
+        offsetX: 540,
+        offsetY: 110,
+        data: {
+          label: 'Event Store',
+          subLabel: 'Durable retention',
+          icon: 'Database',
+          color: 'emerald',
+          archResourceType: 'database',
+        },
+      },
+    ],
+    edges: [
+      { source: 'source', target: 'broker', label: 'publish' },
+      { source: 'broker', target: 'consumer-a', label: 'subscribe' },
+      { source: 'broker', target: 'consumer-b', label: 'fan out' },
+      { source: 'broker', target: 'storage', label: 'persist' },
+    ],
+  },
+  {
+    id: 'c4-system-context',
+    label: 'C4 system context',
+    description: 'People, platform boundary, and supporting systems.',
+    anchor: {
+      label: 'OpenFlowKit Platform',
+      subLabel: 'Primary software system',
+      archProvider: 'custom',
+      archResourceType: 'system',
+      icon: 'Box',
+      color: 'slate',
+    },
+    nodes: [
+      {
+        key: 'developer',
+        offsetX: -280,
+        offsetY: 0,
+        data: {
+          label: 'Developer',
+          subLabel: 'Creates and updates diagrams',
+          icon: 'User',
+          color: 'blue',
+          archResourceType: 'person',
+        },
+      },
+      {
+        key: 'docs',
+        offsetX: 280,
+        offsetY: -120,
+        data: {
+          label: 'Docs Site',
+          subLabel: 'Embeds published diagrams',
+          icon: 'BookOpen',
+          color: 'violet',
+          archResourceType: 'container',
+        },
+      },
+      {
+        key: 'repo',
+        offsetX: 280,
+        offsetY: 120,
+        data: {
+          label: 'Source Repo',
+          subLabel: 'Versioned diagram definitions',
+          icon: 'GitBranch',
+          color: 'emerald',
+          archResourceType: 'container',
+        },
+      },
+      {
+        key: 'database',
+        offsetX: 540,
+        offsetY: 120,
+        data: {
+          label: 'Project Data',
+          subLabel: 'Snapshots and exports',
+          icon: 'Database',
+          color: 'cyan',
+          archResourceType: 'database_container',
+        },
+      },
+    ],
+    edges: [
+      { source: 'developer', target: 'source', label: 'edits' },
+      { source: 'source', target: 'docs', label: 'publishes views' },
+      { source: 'source', target: 'repo', label: 'exports JSON / Mermaid' },
+      { source: 'repo', target: 'database', label: 'stores artifacts' },
+    ],
+  },
+  {
+    id: 'network-edge-security',
+    label: 'Network edge security',
+    description: 'DNS, CDN, firewall, and private service tiers.',
+    anchor: {
+      label: 'Public DNS',
+      subLabel: 'Traffic entrypoint',
+      archProvider: 'custom',
+      archResourceType: 'dns',
+      icon: 'Globe2',
+      color: 'lime',
+    },
+    nodes: [
+      {
+        key: 'cdn',
+        offsetX: 240,
+        offsetY: 0,
+        data: {
+          label: 'CDN Edge',
+          subLabel: 'Cache and TLS termination',
+          icon: 'Globe',
+          color: 'violet',
+          archResourceType: 'cdn',
+        },
+      },
+      {
+        key: 'firewall',
+        offsetX: 500,
+        offsetY: 0,
+        data: {
+          label: 'WAF / Firewall',
+          subLabel: 'Ingress filtering',
+          icon: 'Shield',
+          color: 'red',
+          archResourceType: 'firewall',
+        },
+      },
+      {
+        key: 'load-balancer',
+        offsetX: 760,
+        offsetY: 0,
+        data: {
+          label: 'Load Balancer',
+          subLabel: 'Traffic distribution',
+          icon: 'Scale',
+          color: 'orange',
+          archResourceType: 'load_balancer',
+        },
+      },
+      {
+        key: 'services',
+        offsetX: 1020,
+        offsetY: -100,
+        data: {
+          label: 'Application Services',
+          subLabel: 'Private app tier',
+          icon: 'ServerCog',
+          color: 'blue',
+          archResourceType: 'service',
+        },
+      },
+      {
+        key: 'vpn',
+        offsetX: 1020,
+        offsetY: 100,
+        data: {
+          label: 'VPN Access',
+          subLabel: 'Operator private path',
+          icon: 'Cable',
+          color: 'violet',
+          archResourceType: 'service',
+        },
+      },
+    ],
+    edges: [
+      { source: 'source', target: 'cdn', label: 'resolves' },
+      { source: 'cdn', target: 'firewall', label: 'forwards' },
+      { source: 'firewall', target: 'load-balancer', label: 'allows 443' },
+      { source: 'load-balancer', target: 'services', label: 'routes HTTPS' },
+      { source: 'vpn', target: 'services', label: 'private ops' },
+    ],
+  },
+];
+
+export function getArchitectureTemplateOptions(): ArchitectureTemplateOption[] {
+  return TEMPLATE_DEFINITIONS.map(({ id, label, description }) => ({ id, label, description }));
+}
+
+function resolveInheritedArchitectureData(
+  sourceNode: FlowNode,
+  anchor: Partial<NodeData>,
+): InheritedArchitectureData {
+  return {
+    archProvider: sourceNode.data.archProvider || anchor.archProvider || 'custom',
+    archEnvironment: sourceNode.data.archEnvironment || 'default',
+    archBoundaryId: sourceNode.data.archBoundaryId,
+    archZone: sourceNode.data.archZone,
+    archTrustDomain: sourceNode.data.archTrustDomain,
+  };
+}
+
+function createTemplateEdge(
+  id: string,
+  source: string,
+  target: string,
+  label: string | undefined,
+  data: Partial<EdgeData> | undefined,
+): FlowEdge {
+  return {
+    id,
+    source,
+    target,
+    label,
+    type: 'default',
+    animated: false,
+    data,
+  };
+}
+
+export function buildArchitectureTemplate(
+  templateId: ArchitectureTemplateId,
+  sourceNode: FlowNode,
+  createNodeId: (key: string) => string,
+  createEdgeId: (key: string) => string,
+): BuiltArchitectureTemplate | null {
+  const template = TEMPLATE_DEFINITIONS.find((candidate) => candidate.id === templateId);
+  if (!template) {
+    return null;
+  }
+
+  const inheritedData = resolveInheritedArchitectureData(sourceNode, template.anchor);
+  const nodeIdByKey = new Map<string, string>([['source', sourceNode.id]]);
+  const nodes = template.nodes.map((definition) => {
+    const id = createNodeId(definition.key);
+    nodeIdByKey.set(definition.key, id);
+
+    return {
+      id,
+      type: 'architecture',
+      position: {
+        x: sourceNode.position.x + definition.offsetX,
+        y: sourceNode.position.y + definition.offsetY,
+      },
+      data: {
+        ...sourceNode.data,
+        ...definition.data,
+        ...inheritedData,
+      },
+      selected: false,
+    } satisfies FlowNode;
+  });
+
+  const edges = template.edges.map((definition, index) => {
+    const source = nodeIdByKey.get(definition.source);
+    const target = nodeIdByKey.get(definition.target);
+    if (!source || !target) {
+      throw new Error(`Architecture template "${templateId}" has an invalid edge definition at index ${index}.`);
+    }
+
+    return createTemplateEdge(
+      createEdgeId(`${definition.source}-${definition.target}`),
+      source,
+      target,
+      definition.label,
+      definition.data,
+    );
+  });
+
+  return {
+    sourceData: {
+      ...template.anchor,
+      ...inheritedData,
+    },
+    nodes,
+    edges,
+  };
+}
diff --git a/src/lib/brand.ts b/src/lib/brand.ts
index 2927b0a..6b5a984 100644
--- a/src/lib/brand.ts
+++ b/src/lib/brand.ts
@@ -1,3 +1,6 @@
 export const APP_NAME = 'OpenFlowKit';
+export const FLOWPILOT_NAME = 'Flowpilot';
+export const APP_DOCS_NAME = `${APP_NAME} Docs`;
+export const APP_ONE_LINE_DESCRIPTION = 'Local-first diagramming with AI-assisted generation, structured editing, and export built in.';
 export const FAVICON_URL = '/Logo_openflowkit.svg';
 export const IS_BEVELED = true;
diff --git a/src/lib/classMembers.ts b/src/lib/classMembers.ts
new file mode 100644
index 0000000..b00091e
--- /dev/null
+++ b/src/lib/classMembers.ts
@@ -0,0 +1,59 @@
+export type ClassVisibility = 'public' | 'private' | 'protected' | 'package';
+
+export interface ParsedClassMember {
+  visibility: ClassVisibility;
+  symbol: '+' | '-' | '#' | '~';
+  signature: string;
+}
+
+const VISIBILITY_TO_SYMBOL: Record<ClassVisibility, ParsedClassMember['symbol']> = {
+  public: '+',
+  private: '-',
+  protected: '#',
+  package: '~',
+};
+
+const SYMBOL_TO_VISIBILITY: Record<ParsedClassMember['symbol'], ClassVisibility> = {
+  '+': 'public',
+  '-': 'private',
+  '#': 'protected',
+  '~': 'package',
+};
+
+export function parseClassMember(input: string): ParsedClassMember {
+  const trimmed = input.trim();
+  const firstCharacter = trimmed.charAt(0) as ParsedClassMember['symbol'];
+  if (firstCharacter in SYMBOL_TO_VISIBILITY) {
+    return {
+      visibility: SYMBOL_TO_VISIBILITY[firstCharacter],
+      symbol: firstCharacter,
+      signature: trimmed.slice(1).trim(),
+    };
+  }
+
+  return {
+    visibility: 'public',
+    symbol: '+',
+    signature: trimmed,
+  };
+}
+
+export function stringifyClassMember(member: ParsedClassMember): string {
+  const signature = member.signature.trim();
+  const symbol = VISIBILITY_TO_SYMBOL[member.visibility];
+  return signature ? `${symbol} ${signature}` : symbol;
+}
+
+export function getClassVisibilityTone(visibility: ClassVisibility): string {
+  switch (visibility) {
+    case 'private':
+      return 'text-rose-500';
+    case 'protected':
+      return 'text-amber-500';
+    case 'package':
+      return 'text-violet-500';
+    case 'public':
+    default:
+      return 'text-emerald-500';
+  }
+}
diff --git a/src/lib/connectCreationPolicy.test.ts b/src/lib/connectCreationPolicy.test.ts
index 90b35e6..0aa6029 100644
--- a/src/lib/connectCreationPolicy.test.ts
+++ b/src/lib/connectCreationPolicy.test.ts
@@ -15,6 +15,14 @@ describe('connectCreationPolicy', () => {
     });
   });
 
+  it('propagates structured node families through connector creation', () => {
+    expect(getDefaultConnectedNodeSpec('class')).toEqual({ type: 'class' });
+    expect(getDefaultConnectedNodeSpec('er_entity')).toEqual({ type: 'er_entity' });
+    expect(getDefaultConnectedNodeSpec('architecture')).toEqual({ type: 'architecture' });
+    expect(getDefaultConnectedNodeSpec('journey')).toEqual({ type: 'journey' });
+    expect(getDefaultConnectedNodeSpec('annotation')).toEqual({ type: 'annotation' });
+  });
+
   it('defaults mindmap connectors to a mindmap topic', () => {
     expect(getDefaultConnectedNodeSpec('mindmap')).toEqual({
       type: 'mindmap',
diff --git a/src/lib/connectCreationPolicy.ts b/src/lib/connectCreationPolicy.ts
index bc3d01f..df20389 100644
--- a/src/lib/connectCreationPolicy.ts
+++ b/src/lib/connectCreationPolicy.ts
@@ -6,6 +6,18 @@ export interface ConnectedNodeSpec {
   shape?: NodeData['shape'];
 }
 
+const SELF_PROPAGATING_TYPES: Record<string, ConnectedNodeSpec> = {
+  annotation: { type: 'annotation' },
+  architecture: { type: 'architecture' },
+  class: { type: 'class' },
+  er_entity: { type: 'er_entity' },
+  journey: { type: 'journey' },
+  sequence_participant: { type: 'sequence_participant' },
+  start: { type: 'process', shape: 'rounded' },
+  end: { type: 'process', shape: 'rounded' },
+  decision: { type: 'process', shape: 'rounded' },
+};
+
 export function isMindmapConnectorSource(sourceNodeType?: string | null): boolean {
   return sourceNodeType === 'mindmap';
 }
@@ -15,10 +27,7 @@ export function getDefaultConnectedNodeSpec(sourceNodeType?: string | null): Con
     return { type: 'mindmap' };
   }
 
-  return {
-    type: 'process',
-    shape: 'rounded',
-  };
+  return SELF_PROPAGATING_TYPES[sourceNodeType ?? ''] ?? { type: 'process', shape: 'rounded' };
 }
 
 export function shouldBypassConnectMenu(sourceNodeType?: string | null): boolean {
diff --git a/src/lib/entityFields.ts b/src/lib/entityFields.ts
new file mode 100644
index 0000000..e4e9303
--- /dev/null
+++ b/src/lib/entityFields.ts
@@ -0,0 +1,107 @@
+import type { ErField } from '@/lib/types';
+
+const PRIMARY_KEY_TOKENS = new Set(['PK', 'PRIMARY']);
+const FOREIGN_KEY_TOKENS = new Set(['FK', 'FOREIGN']);
+const NOT_NULL_TOKENS = new Set(['NN', 'NOTNULL']);
+const UNIQUE_TOKENS = new Set(['UNIQUE', 'UQ']);
+
+export function createDefaultErField(): ErField {
+  return {
+    name: '',
+    dataType: '',
+    isPrimaryKey: false,
+    isForeignKey: false,
+    isNotNull: false,
+    isUnique: false,
+  };
+}
+
+function isErField(value: unknown): value is ErField {
+  return Boolean(value) && typeof value === 'object' && 'name' in (value as Record<string, unknown>);
+}
+
+export function parseErField(input: string): ErField {
+  const normalizedInput = input.trim();
+  if (!normalizedInput) {
+    return createDefaultErField();
+  }
+
+  const [namePart, remainder = ''] = normalizedInput.split(':', 2);
+  const tokens = remainder.trim().split(/\s+/).filter(Boolean);
+  const dataTypeTokens: string[] = [];
+  let isPrimaryKey = false;
+  let isForeignKey = false;
+  let isNotNull = false;
+  let isUnique = false;
+
+  tokens.forEach((token) => {
+    const normalizedToken = token.toUpperCase();
+    if (PRIMARY_KEY_TOKENS.has(normalizedToken)) {
+      isPrimaryKey = true;
+      return;
+    }
+    if (FOREIGN_KEY_TOKENS.has(normalizedToken)) {
+      isForeignKey = true;
+      return;
+    }
+    if (NOT_NULL_TOKENS.has(normalizedToken)) {
+      isNotNull = true;
+      return;
+    }
+    if (UNIQUE_TOKENS.has(normalizedToken)) {
+      isUnique = true;
+      return;
+    }
+    dataTypeTokens.push(token);
+  });
+
+  return {
+    name: namePart.trim(),
+    dataType: dataTypeTokens.join(' ').trim(),
+    isPrimaryKey,
+    isForeignKey,
+    isNotNull,
+    isUnique,
+  };
+}
+
+export function normalizeErField(value: string | ErField): ErField {
+  if (isErField(value)) {
+    return {
+      ...createDefaultErField(),
+      ...value,
+      name: typeof value.name === 'string' ? value.name : '',
+      dataType: typeof value.dataType === 'string' ? value.dataType : '',
+    };
+  }
+
+  return parseErField(String(value));
+}
+
+export function normalizeErFields(values: Array<string | ErField> | undefined): ErField[] {
+  return Array.isArray(values) ? values.map(normalizeErField) : [];
+}
+
+export function stringifyErField(field: ErField): string {
+  const segments: string[] = [];
+  const normalizedName = field.name.trim();
+  const normalizedType = field.dataType.trim();
+  if (normalizedType) {
+    segments.push(`${normalizedName || 'field'}: ${normalizedType}`);
+  } else {
+    segments.push(normalizedName || 'field');
+  }
+  if (field.isPrimaryKey) segments.push('PK');
+  if (field.isForeignKey) segments.push('FK');
+  if (field.isNotNull) segments.push('NN');
+  if (field.isUnique) segments.push('UNIQUE');
+  return segments.join(' ').trim();
+}
+
+export function formatErFieldLabel(field: ErField): string {
+  const parts = [field.name.trim() || 'field'];
+  if (field.dataType.trim()) {
+    parts.push(field.dataType.trim());
+  }
+  return parts.join(': ');
+}
diff --git a/src/lib/erToClassConversion.test.ts b/src/lib/erToClassConversion.test.ts
new file mode 100644
index 0000000..9338d84
--- /dev/null
+++ b/src/lib/erToClassConversion.test.ts
@@ -0,0 +1,74 @@
+import { describe, expect, it } from 'vitest';
+import { convertSelectedErNodesToClassDiagram } from './erToClassConversion';
+import type { FlowEdge, FlowNode } from './types';
+
+function createNodes(): FlowNode[] {
+  return [
+    {
+      id: 'user',
+      type: 'er_entity',
+      selected: true,
+      position: { x: 0, y: 0 },
+      data: {
+        label: 'User',
+        erFields: ['id: UUID PK', 'teamId: UUID FK', 'email: VARCHAR UNIQUE'],
+      },
+    },
+    {
+      id: 'team',
+      type: 'er_entity',
+      selected: true,
+      position: { x: 300, y: 0 },
+      data: {
+        label: 'Team',
+        erFields: ['id: UUID PK', 'name: VARCHAR'],
+      },
+    },
+    {
+      id: 'note',
+      type: 'annotation',
+      selected: false,
+      position: { x: 0, y: 0 },
+      data: { label: 'Keep me' },
+    },
+  ];
+}
+
+function createEdges(): FlowEdge[] {
+  return [
+    {
+      id: 'edge-1',
+      source: 'team',
+      target: 'user',
+      data: {
+        erRelation: '||--o{',
+        erRelationLabel: 'contains',
+      },
+    },
+  ];
+}
+
+describe('convertSelectedErNodesToClassDiagram', () => {
+  it('converts selected ER entities into class nodes and remaps their edges', () => {
+    const result = convertSelectedErNodesToClassDiagram(createNodes(), createEdges());
+
+    expect(result.changedNodeIds).toEqual(['user', 'team']);
+    expect(result.changedEdgeIds).toEqual(['edge-1']);
+    expect(result.nodes[0].type).toBe('class');
+    expect(result.nodes[0].data.classAttributes).toContain('+ id: UUID {PK}');
+    expect(result.nodes[0].data.classAttributes).toContain('+ teamId: UUID {FK}');
+    expect(result.edges[0].data?.classRelation).toBe('-->');
+    expect(result.edges[0].data?.classRelationLabel).toBe('contains (1 to 0..*)');
+    expect(result.edges[0].data?.erRelation).toBeUndefined();
+  });
+
+  it('returns the original graph when no ER entity is selected', () => {
+    const nodes = createNodes().map((node) => ({ ...node, selected: false }));
+    const edges = createEdges();
+    const result = convertSelectedErNodesToClassDiagram(nodes, edges);
+
+    expect(result.changedNodeIds).toHaveLength(0);
+    expect(result.nodes).toBe(nodes);
+    expect(result.edges).toBe(edges);
+  });
+});
diff --git a/src/lib/erToClassConversion.ts b/src/lib/erToClassConversion.ts
new file mode 100644
index 0000000..83a1701
--- /dev/null
+++ b/src/lib/erToClassConversion.ts
@@ -0,0 +1,127 @@
+import { normalizeErFields } from './entityFields';
+import { DEFAULT_CLASS_RELATION } from './relationSemantics';
+import type { FlowEdge, FlowNode } from './types';
+
+function toClassAttribute(field: ReturnType<typeof normalizeErFields>[number]): string {
+  const segments = [field.name.trim() || 'field'];
+  if (field.dataType.trim()) {
+    segments.push(`: ${field.dataType.trim()}`);
+  }
+  if (field.isPrimaryKey) {
+    segments.push(' {PK}');
+  }
+  if (field.isForeignKey) {
+    segments.push(' {FK}');
+  }
+  return `+ ${segments.join('')}`.trim();
+}
+
+function describeERCardinality(token: string | undefined): string | null {
+  switch (token) {
+    case '||':
+    case '}|':
+      return '1';
+    case 'o{':
+    case '}o':
+      return '0..*';
+    case '|{':
+      return '1..*';
+    default:
+      return null;
+  }
+}
+
+function buildConvertedEdgeLabel(edge: FlowEdge): string | undefined {
+  const explicitLabel = typeof edge.data?.erRelationLabel === 'string' && edge.data.erRelationLabel.trim().length > 0
+    ? edge.data.erRelationLabel.trim()
+    : typeof edge.label === 'string' && edge.label.trim().length > 0
+      ? edge.label.trim()
+      : '';
+  const relation = typeof edge.data?.erRelation === 'string' ? edge.data.erRelation : '';
+  const start = describeERCardinality(relation.slice(0, 2));
+  const end = describeERCardinality(relation.slice(-2));
+  const multiplicityLabel = start && end ? `${start} to ${end}` : '';
+
+  if (explicitLabel && multiplicityLabel) {
+    return `${explicitLabel} (${multiplicityLabel})`;
+  }
+  return explicitLabel || multiplicityLabel || undefined;
+}
+
+export interface ConvertErSelectionResult {
+  changedNodeIds: string[];
+  changedEdgeIds: string[];
+  nodes: FlowNode[];
+  edges: FlowEdge[];
+}
+
+export function convertSelectedErNodesToClassDiagram(
+  nodes: FlowNode[],
+  edges: FlowEdge[],
+): ConvertErSelectionResult {
+  const selectedEntityIds = new Set(
+    nodes
+      .filter((node) => node.selected && node.type === 'er_entity')
+      .map((node) => node.id),
+  );
+
+  if (selectedEntityIds.size === 0) {
+    return {
+      changedNodeIds: [],
+      changedEdgeIds: [],
+      nodes,
+      edges,
+    };
+  }
+
+  const changedNodeIds: string[] = [];
+  const changedEdgeIds: string[] = [];
+
+  const convertedNodes = nodes.map((node) => {
+    if (!selectedEntityIds.has(node.id)) {
+      return node;
+    }
+
+    changedNodeIds.push(node.id);
+    const nextNode: FlowNode = {
+      ...node,
+      type: 'class',
+      data: {
+        ...node.data,
+        classAttributes: normalizeErFields(node.data.erFields).map(toClassAttribute),
+        classMethods: Array.isArray(node.data.classMethods) ? node.data.classMethods : [],
+        erFields: undefined,
+        color: node.data.color || 'white',
+        shape: 'rectangle',
+      },
+    };
+    return nextNode;
+  });
+
+  const convertedEdges = edges.map((edge) => {
+    if (!selectedEntityIds.has(edge.source) || !selectedEntityIds.has(edge.target)) {
+      return edge;
+    }
+
+    changedEdgeIds.push(edge.id);
+    const nextEdge: FlowEdge = {
+      ...edge,
+      label: buildConvertedEdgeLabel(edge),
+      data: {
+        ...edge.data,
+        classRelation: DEFAULT_CLASS_RELATION,
+        classRelationLabel: buildConvertedEdgeLabel(edge),
+        erRelation: undefined,
+        erRelationLabel: undefined,
+      },
+    };
+    return nextEdge;
+  });
+
+  return {
+    changedNodeIds,
+    changedEdgeIds,
+    nodes: convertedNodes,
+    edges: convertedEdges,
+  };
+}
diff --git a/src/lib/exportFileName.test.ts b/src/lib/exportFileName.test.ts
new file mode 100644
index 0000000..3353b7d
--- /dev/null
+++ b/src/lib/exportFileName.test.ts
@@ -0,0 +1,20 @@
+import { describe, expect, it } from 'vitest';
+import {
+    buildExportFileName,
+    buildVariantExportFileName,
+    sanitizeExportBaseName,
+} from './exportFileName';
+
+describe('exportFileName', () => {
+    it('sanitizes tab names into safe export base names', () => {
+        expect(sanitizeExportBaseName('Auth Service / API V2')).toBe('auth-service-api-v2');
+    });
+
+    it('falls back to the default export base name when the source is empty', () => {
+        expect(buildExportFileName('', 'png')).toBe('openflowkit-diagram.png');
+    });
+
+    it('builds variant filenames for specialized exports', () => {
+        expect(buildVariantExportFileName('Checkout Flow', 'figma', 'svg')).toBe('checkout-flow-figma.svg');
+    });
+});
diff --git a/src/lib/exportFileName.ts b/src/lib/exportFileName.ts
new file mode 100644
index 0000000..4ce3eb2
--- /dev/null
+++ b/src/lib/exportFileName.ts
@@ -0,0 +1,33 @@
+const DEFAULT_EXPORT_BASENAME = 'openflowkit-diagram';
+const MAX_EXPORT_BASENAME_LENGTH = 80;
+
+export function sanitizeExportBaseName(value?: string | null): string {
+    const normalized = (value ?? '')
+        .trim()
+        .toLowerCase()
+        .replace(/[^a-z0-9]+/g, '-')
+        .replace(/^-+|-+$/g, '')
+        .slice(0, MAX_EXPORT_BASENAME_LENGTH)
+        .replace(/-+$/g, '');
+
+    return normalized || DEFAULT_EXPORT_BASENAME;
+}
+
+export function buildExportFileName(baseName: string | null | undefined, extension: string): string {
+    return `${sanitizeExportBaseName(baseName)}.${extension}`;
+}
+
+export function buildVariantExportFileName(
+    baseName: string | null | undefined,
+    variant: string,
+    extension: string
+): string {
+    const sanitizedBaseName = sanitizeExportBaseName(baseName);
+    const sanitizedVariant = sanitizeExportBaseName(variant);
+
+    if (sanitizedVariant === DEFAULT_EXPORT_BASENAME) {
+        return `${sanitizedBaseName}.${extension}`;
+    }
+
+    return `${sanitizedBaseName}-${sanitizedVariant}.${extension}`;
+}
diff --git a/src/lib/flowmindDSLParserV2.test.ts b/src/lib/flowmindDSLParserV2.test.ts
index dd3497d..ca1685a 100644
--- a/src/lib/flowmindDSLParserV2.test.ts
+++ b/src/lib/flowmindDSLParserV2.test.ts
@@ -1,8 +1,8 @@
 
 import { describe, it, expect } from 'vitest';
-import { parseFlowMindDSL } from './flowmindDSLParserV2';
+import { parseOpenFlowDslV2 } from './openFlowDslParserV2';
 
-describe('FlowMind DSL V2 Parser', () => {
+describe('OpenFlow DSL V2 Parser', () => {
     it('parses basic nodes and edges', () => {
         const input = `
             [start] Start
@@ -11,7 +11,7 @@ describe('FlowMind DSL V2 Parser', () => {
             Start -> Step 1
             Step 1 -> End
         `;
-        const result = parseFlowMindDSL(input);
+        const result = parseOpenFlowDslV2(input);
         expect(result.nodes).toHaveLength(3);
         expect(result.edges).toHaveLength(2);
 
@@ -26,7 +26,7 @@ describe('FlowMind DSL V2 Parser', () => {
             [process] p2: Process Two
             p1 -> p2
         `;
-        const result = parseFlowMindDSL(input);
+        const result = parseOpenFlowDslV2(input);
         expect(result.nodes).toHaveLength(2);
 
         const p1 = result.nodes.find(n => n.id === 'p1');
@@ -43,7 +43,7 @@ describe('FlowMind DSL V2 Parser', () => {
             [process] p1: Configured Node { color: "red", icon: "settings" }
             p1 -> p2 { style: "dashed", label: "async" }
         `;
-        const result = parseFlowMindDSL(input);
+        const result = parseOpenFlowDslV2(input);
 
         const p1 = result.nodes.find(n => n.id === 'p1');
         expect(p1?.data.color).toBe('red');
@@ -66,7 +66,7 @@ describe('FlowMind DSL V2 Parser', () => {
         const input = `
             [process] p1: Configured Node { icon: "server, api", note: "http://svc:8080/path", enabled: true, retries: 3, quote: "say \\"hello\\"" }
         `;
-        const result = parseFlowMindDSL(input);
+        const result = parseOpenFlowDslV2(input);
 
         const p1 = result.nodes.find((node) => node.id === 'p1');
         expect(p1?.data.icon).toBe('server, api');
@@ -84,13 +84,9 @@ describe('FlowMind DSL V2 Parser', () => {
                 api -> db
             }
         `;
-        const result = parseFlowMindDSL(input);
+        const result = parseOpenFlowDslV2(input);
         expect(result.nodes).toHaveLength(3); // api, db, Backend group
 
-        const group = result.nodes.find(n => n.type === 'group' || n.type === 'container'); // I used 'group' in DSLNode type but might need 'container' mapping
-        // implementation: type: 'group' in DSLNode
-        // finalNodes: type: n.type
-
         const api = result.nodes.find(n => n.id === 'api');
         expect(api?.parentId).toBeDefined();
     });
diff --git a/src/lib/flowmindDSLParserV2.ts b/src/lib/flowmindDSLParserV2.ts
index 49b77b7..59eba78 100644
--- a/src/lib/flowmindDSLParserV2.ts
+++ b/src/lib/flowmindDSLParserV2.ts
@@ -168,7 +168,7 @@ function parseAttributes(text: string): Record<string, DSLAttributeValue> {
 
 // --- Parser ---
 
-export function parseFlowMindDSL(input: string): DSLResult {
+export function parseOpenFlowDslV2(input: string): DSLResult {
     const dslNodes: DSLNode[] = [];
     const dslEdges: DSLEdge[] = [];
     const metadata: Record<string, string> = { direction: 'TB' };
@@ -410,3 +410,5 @@ export function parseFlowMindDSL(input: string): DSLResult {
         errors
     };
 };
+
+export const parseFlowMindDSL = parseOpenFlowDslV2;
diff --git a/src/lib/legacyBranding.ts b/src/lib/legacyBranding.ts
new file mode 100644
index 0000000..dc60266
--- /dev/null
+++ b/src/lib/legacyBranding.ts
@@ -0,0 +1,22 @@
+const LEGACY_FLOWMIND_NAMESPACE = 'flowmind';
+
+export const LEGACY_STORAGE_KEYS = {
+    clipboard: `${LEGACY_FLOWMIND_NAMESPACE}-clipboard`,
+    styleClipboard: `${LEGACY_FLOWMIND_NAMESPACE}-style-clipboard`,
+    snapshots: `${LEGACY_FLOWMIND_NAMESPACE}_snapshots`,
+} as const;
+
+export const LEGACY_EVENT_NAMES = {
+    nodeLabelEditRequest: `${LEGACY_FLOWMIND_NAMESPACE}:node-label-edit-request`,
+    nodeQuickCreateRequest: `${LEGACY_FLOWMIND_NAMESPACE}:node-quick-create-request`,
+    mindmapTopicActionRequest: `${LEGACY_FLOWMIND_NAMESPACE}:mindmap-topic-action-request`,
+} as const;
+
+export const LEGACY_COLLABORATION_KEYS = {
+    identity: `${LEGACY_FLOWMIND_NAMESPACE}:collab-identity-v1`,
+    roomSecretPrefix: `${LEGACY_FLOWMIND_NAMESPACE}:collab-room-secret:`,
+    clientIdPrefix: `${LEGACY_FLOWMIND_NAMESPACE}:collab-client-id:`,
+    indexedDbPrefix: `${LEGACY_FLOWMIND_NAMESPACE}-collab:`,
+} as const;
+
+export const LEGACY_DSL_CODE_FENCE_ALIASES = ['flowmind'] as const;
diff --git a/src/lib/logger.ts b/src/lib/logger.ts
new file mode 100644
index 0000000..a1e8c79
--- /dev/null
+++ b/src/lib/logger.ts
@@ -0,0 +1,62 @@
+export type LogLevel = 'debug' | 'info' | 'warn' | 'error';
+
+export interface LogMetadata {
+  error?: unknown;
+  [key: string]: unknown;
+}
+
+type ConsoleMethodName = 'debug' | 'info' | 'warn' | 'error';
+
+interface LoggerOptions {
+  scope?: string;
+}
+
+function getConsoleMethod(level: LogLevel): ConsoleMethodName {
+  switch (level) {
+    case 'debug':
+      return 'debug';
+    case 'info':
+      return 'info';
+    case 'warn':
+      return 'warn';
+    case 'error':
+      return 'error';
+  }
+}
+
+function buildLogPrefix(scope?: string): string {
+  return scope ? `[${scope}]` : '[app]';
+}
+
+function emitLog(level: LogLevel, message: string, metadata?: LogMetadata, options?: LoggerOptions): void {
+  if (typeof console === 'undefined') {
+    return;
+  }
+
+  const consoleMethod = console[getConsoleMethod(level)];
+  const prefix = buildLogPrefix(options?.scope);
+  if (!metadata || Object.keys(metadata).length === 0) {
+    consoleMethod(`${prefix} ${message}`);
+    return;
+  }
+
+  consoleMethod(`${prefix} ${message}`, metadata);
+}
+
+export interface Logger {
+  debug: (message: string, metadata?: LogMetadata) => void;
+  info: (message: string, metadata?: LogMetadata) => void;
+  warn: (message: string, metadata?: LogMetadata) => void;
+  error: (message: string, metadata?: LogMetadata) => void;
+}
+
+export function createLogger(options: LoggerOptions = {}): Logger {
+  return {
+    debug: (message, metadata) => emitLog('debug', message, metadata, options),
+    info: (message, metadata) => emitLog('info', message, metadata, options),
+    warn: (message, metadata) => emitLog('warn', message, metadata, options),
+    error: (message, metadata) => emitLog('error', message, metadata, options),
+  };
+}
+
+export const logger = createLogger();
diff --git a/src/lib/mermaidParser.ts b/src/lib/mermaidParser.ts
index 72b8918..fc6c73f 100644
--- a/src/lib/mermaidParser.ts
+++ b/src/lib/mermaidParser.ts
@@ -1,5 +1,4 @@
 import { MarkerType } from '@/lib/reactflowCompat';
-import { ROLLOUT_FLAGS } from '@/config/rolloutFlags';
 import type React from 'react';
 import { createId } from './id';
 import { setNodeParent } from './nodeParent';
@@ -18,16 +17,14 @@ import {
 } from './mermaidParserHelpers';
 import type { FlowEdge, FlowNode } from './types';
 
-const EDGE_STYLE: React.CSSProperties = ROLLOUT_FLAGS.visualQualityV2
-    ? { stroke: '#64748b', strokeWidth: 1.5 }
-    : { stroke: '#94a3b8', strokeWidth: 2 };
+const EDGE_STYLE: React.CSSProperties = { stroke: '#64748b', strokeWidth: 1.5 };
 const EDGE_LABEL_STYLE: React.CSSProperties = { fill: '#334155', fontWeight: 500, fontSize: 12 };
 const EDGE_LABEL_BG_STYLE: React.CSSProperties = { fill: '#ffffff', stroke: '#cbd5e1', strokeWidth: 1 };
 
 const DEFAULT_EDGE_OPTIONS = {
     type: 'smoothstep' as const,
     markerEnd: { type: MarkerType.ArrowClosed },
-    animated: !ROLLOUT_FLAGS.visualQualityV2,
+    animated: false,
     style: EDGE_STYLE,
     labelStyle: EDGE_LABEL_STYLE,
     labelBgStyle: EDGE_LABEL_BG_STYLE,
diff --git a/src/lib/mindmapLayout.ts b/src/lib/mindmapLayout.ts
index 64c2531..f04a3bb 100644
--- a/src/lib/mindmapLayout.ts
+++ b/src/lib/mindmapLayout.ts
@@ -1,5 +1,6 @@
 import { createMindmapEdge } from '@/constants';
 import type { FlowEdge, FlowNode, NodeData } from '@/lib/types';
+import { getMindmapChildrenById, getMindmapDescendantIds } from '@/lib/mindmapTree';
 
 const ROOT_CHILD_HORIZONTAL_GAP = 280;
 const BRANCH_HORIZONTAL_GAP = 220;
@@ -16,42 +17,6 @@ function isMindmapNode(node: FlowNode | undefined): node is FlowNode {
   return Boolean(node) && node.type === 'mindmap';
 }
 
-function getMindmapChildrenById(nodes: FlowNode[], edges: FlowEdge[]): Map<string, string[]> {
-  const nodeIds = new Set(nodes.filter(isMindmapNode).map((node) => node.id));
-  const childrenById = new Map<string, string[]>();
-  const connectedTargets = new Set<string>();
-
-  edges.forEach((edge) => {
-    if (!nodeIds.has(edge.source) || !nodeIds.has(edge.target)) {
-      return;
-    }
-
-    const children = childrenById.get(edge.source) ?? [];
-    children.push(edge.target);
-    childrenById.set(edge.source, children);
-    connectedTargets.add(edge.target);
-  });
-
-  nodes.filter(isMindmapNode).forEach((node) => {
-    const parentId = typeof node.data.mindmapParentId === 'string' ? node.data.mindmapParentId : '';
-    if (!parentId || !nodeIds.has(parentId) || connectedTargets.has(node.id)) {
-      return;
-    }
-
-    const children = childrenById.get(parentId) ?? [];
-    if (!children.includes(node.id)) {
-      children.push(node.id);
-    }
-    childrenById.set(parentId, children);
-  });
-
-  childrenById.forEach((children) => {
-    children.sort((left, right) => left.localeCompare(right));
-  });
-
-  return childrenById;
-}
-
 function getConnectedMindmapComponent(nodeId: string, nodes: FlowNode[], edges: FlowEdge[]): Set<string> {
   const mindmapNodeIds = new Set(nodes.filter(isMindmapNode).map((node) => node.id));
   const pending = [nodeId];
@@ -77,22 +42,6 @@ function getConnectedMindmapComponent(nodeId: string, nodes: FlowNode[], edges:
   return visited;
 }
 
-function getMindmapDescendantIds(nodeId: string, childrenById: Map<string, string[]>): Set<string> {
-  const descendants = new Set<string>();
-  const pending = [...(childrenById.get(nodeId) ?? [])];
-
-  while (pending.length > 0) {
-    const currentId = pending.pop();
-    if (!currentId || descendants.has(currentId)) {
-      continue;
-    }
-    descendants.add(currentId);
-    pending.push(...(childrenById.get(currentId) ?? []));
-  }
-
-  return descendants;
-}
-
 function findMindmapRootId(componentIds: Set<string>, edges: FlowEdge[]): string | null {
   const incomingIds = new Set<string>();
   edges.forEach((edge) => {
@@ -106,10 +55,6 @@ function findMindmapRootId(componentIds: Set<string>, edges: FlowEdge[]): string
   return roots[0] ?? null;
 }
 
-function getNodeDepth(node: FlowNode): number {
-  return typeof node.data.mindmapDepth === 'number' ? node.data.mindmapDepth : 0;
-}
-
 function getNodeSide(node: FlowNode): MindmapSide | null {
   return node.data.mindmapSide === 'left' || node.data.mindmapSide === 'right'
     ? node.data.mindmapSide
diff --git a/src/lib/mindmapTree.ts b/src/lib/mindmapTree.ts
new file mode 100644
index 0000000..589141d
--- /dev/null
+++ b/src/lib/mindmapTree.ts
@@ -0,0 +1,92 @@
+import type { FlowEdge, FlowNode } from '@/lib/types';
+
+function isMindmapNode(node: FlowNode | undefined): node is FlowNode {
+  return Boolean(node) && node.type === 'mindmap';
+}
+
+export function getMindmapChildrenById(nodes: FlowNode[], edges: FlowEdge[]): Map<string, string[]> {
+  const nodeIds = new Set(nodes.filter(isMindmapNode).map((node) => node.id));
+  const childrenById = new Map<string, string[]>();
+  const connectedTargets = new Set<string>();
+
+  edges.forEach((edge) => {
+    if (!nodeIds.has(edge.source) || !nodeIds.has(edge.target)) {
+      return;
+    }
+
+    const children = childrenById.get(edge.source) ?? [];
+    children.push(edge.target);
+    childrenById.set(edge.source, children);
+    connectedTargets.add(edge.target);
+  });
+
+  nodes.filter(isMindmapNode).forEach((node) => {
+    const parentId = typeof node.data.mindmapParentId === 'string' ? node.data.mindmapParentId : '';
+    if (!parentId || !nodeIds.has(parentId) || connectedTargets.has(node.id)) {
+      return;
+    }
+
+    const children = childrenById.get(parentId) ?? [];
+    if (!children.includes(node.id)) {
+      children.push(node.id);
+    }
+    childrenById.set(parentId, children);
+  });
+
+  childrenById.forEach((children) => {
+    children.sort((left, right) => left.localeCompare(right));
+  });
+
+  return childrenById;
+}
+
+export function getMindmapDescendantIds(nodeId: string, childrenById: Map<string, string[]>): Set<string> {
+  const descendants = new Set<string>();
+  const pending = [...(childrenById.get(nodeId) ?? [])];
+
+  while (pending.length > 0) {
+    const currentId = pending.pop();
+    if (!currentId || descendants.has(currentId)) {
+      continue;
+    }
+    descendants.add(currentId);
+    pending.push(...(childrenById.get(currentId) ?? []));
+  }
+
+  return descendants;
+}
+
+export function countVisibleMindmapChildren(nodeId: string, childrenById: Map<string, string[]>): number {
+  return (childrenById.get(nodeId) ?? []).length;
+}
+
+export function applyMindmapVisibility(nodes: FlowNode[], edges: FlowEdge[]): { nodes: FlowNode[]; edges: FlowEdge[] } {
+  const childrenById = getMindmapChildrenById(nodes, edges);
+  const hiddenNodeIds = new Set<string>();
+  const mindmapNodeIds = new Set(nodes.filter((node) => node.type === 'mindmap').map((node) => node.id));
+
+  nodes.forEach((node) => {
+    if (node.type !== 'mindmap' || node.data.mindmapCollapsed !== true) {
+      return;
+    }
+    getMindmapDescendantIds(node.id, childrenById).forEach((descendantId) => {
+      hiddenNodeIds.add(descendantId);
+    });
+  });
+
+  return {
+    nodes: nodes.map((node) => (
+      node.type === 'mindmap'
+        ? { ...node, hidden: hiddenNodeIds.has(node.id) }
+        : node
+    )),
+    edges: edges.map((edge) => (
+      mindmapNodeIds.has(edge.source) && mindmapNodeIds.has(edge.target)
+        ? {
+            ...edge,
+            hidden: hiddenNodeIds.has(edge.source) || hiddenNodeIds.has(edge.target),
+          }
+        : edge
+    )),
+  };
+}
diff --git a/src/lib/openFlowDSLParser.ts b/src/lib/openFlowDSLParser.ts
index c236d26..663c7fe 100644
--- a/src/lib/openFlowDSLParser.ts
+++ b/src/lib/openFlowDSLParser.ts
@@ -1,5 +1,5 @@
 
-import { parseFlowMindDSL } from './flowmindDSLParserV2';
+import { parseOpenFlowDslV2 } from './openFlowDslParserV2';
 import type { FlowEdge, FlowNode } from './types';
 
 export interface ParseDiagnostic {
@@ -27,7 +27,14 @@ function buildDiagnosticFromError(rawError: string, inputLines: string[]): Parse
     const message = lineMatch[2];
     const snippet = inputLines[line - 1]?.trim();
     let hint: string | undefined;
-    if (message.startsWith('Unexpected')) {
+    const hasSpaceInId = snippet && /^\[?\w+\]?\s+\w+\s+\w/.test(snippet) && !snippet.includes(':');
+    if (hasSpaceInId) {
+        hint = 'Node IDs cannot contain spaces. Use underscores: my_node';
+    } else if (snippet && /->/.test(snippet) && message.startsWith('Unexpected')) {
+        hint = 'Edge syntax: source -> target or source -> target |label|';
+    } else if (message.includes('expected identifier') || message.includes('Expected identifier')) {
+        hint = 'Node format: [type] id: Label';
+    } else if (message.startsWith('Unexpected')) {
         hint = 'Check block delimiters and remove extra closing braces.';
     } else if (message.startsWith('Unrecognized syntax')) {
         hint = 'Use DSL forms like `[type] id: Label`, `A -> B`, or `group "Name" { ... }`.';
@@ -49,7 +56,7 @@ function formatDiagnosticsError(diagnostics: ParseDiagnostic[]): string {
  * Ensures backward compatibility with the existing UI components.
  */
 export const parseOpenFlowDSL = (input: string): ParseResult => {
-    const result = parseFlowMindDSL(input);
+    const result = parseOpenFlowDslV2(input);
     const inputLines = input.split('\n');
     const diagnostics = result.errors.map((error) => buildDiagnosticFromError(error, inputLines));
 
diff --git a/src/lib/openFlowDslParserV2.ts b/src/lib/openFlowDslParserV2.ts
new file mode 100644
index 0000000..976ae1d
--- /dev/null
+++ b/src/lib/openFlowDslParserV2.ts
@@ -0,0 +1 @@
+export { parseFlowMindDSL, parseOpenFlowDslV2 } from './flowmindDSLParserV2';
diff --git a/src/lib/reactflowCompat.ts b/src/lib/reactflowCompat.ts
index 4e3c15f..ec54f2a 100644
--- a/src/lib/reactflowCompat.ts
+++ b/src/lib/reactflowCompat.ts
@@ -18,6 +18,14 @@ import {
 } from '@xyflow/react';
 import * as ReactFlowCompatRuntime from '@xyflow/react';
 
+interface ReactFlowRuntimeWithBounds {
+  getNodesBounds?: (input: LegacyNode[]) => ReactFlowRect;
+}
+
+function hasGetNodesBounds(runtime: unknown): runtime is Required<Pick<ReactFlowRuntimeWithBounds, 'getNodesBounds'>> {
+  return typeof (runtime as ReactFlowRuntimeWithBounds).getNodesBounds === 'function';
+}
+
 export type LegacyNode<
   TData extends Record<string, unknown> = Record<string, unknown>,
   TType extends string = string
@@ -73,12 +81,8 @@ export function getCompatibleNodesBounds<
   TData extends Record<string, unknown> = Record<string, unknown>,
   TType extends string = string
 >(nodes: LegacyNode<TData, TType>[]): ReactFlowRect {
-  const reactFlowCompat = (ReactFlowCompatRuntime as unknown as {
-    getNodesBounds?: (input: LegacyNode[]) => ReactFlowRect;
-  });
-
-  if (typeof reactFlowCompat.getNodesBounds === 'function') {
-    return reactFlowCompat.getNodesBounds(nodes);
+  if (hasGetNodesBounds(ReactFlowCompatRuntime)) {
+    return ReactFlowCompatRuntime.getNodesBounds(nodes);
   }
 
   return { x: 0, y: 0, width: 0, height: 0 };
diff --git a/src/lib/result.ts b/src/lib/result.ts
new file mode 100644
index 0000000..d2aff7f
--- /dev/null
+++ b/src/lib/result.ts
@@ -0,0 +1,19 @@
+export type Result<T, E> =
+  | { ok: true; value: T }
+  | { ok: false; error: E };
+
+export function ok<T>(value: T): Result<T, never> {
+  return { ok: true, value };
+}
+
+export function err<E>(error: E): Result<never, E> {
+  return { ok: false, error };
+}
+
+export function unwrapResult<T, E>(result: Result<T, E>, mapError: (error: E) => Error): T {
+  if (result.ok === true) {
+    return result.value;
+  }
+
+  throw mapError(result.error);
+}
diff --git a/src/lib/types.ts b/src/lib/types.ts
index 35b31dd..312d0d0 100644
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@@ -1,6 +1,17 @@
 import { type LegacyEdge, type LegacyNode } from '@/lib/reactflowCompat';
 import type { ClassRelationToken, ERRelationToken } from '@/lib/relationSemantics';
 
+export interface ErField {
+  name: string;
+  dataType: string;
+  isPrimaryKey: boolean;
+  isForeignKey: boolean;
+  isNotNull?: boolean;
+  isUnique?: boolean;
+  referencesTable?: string;
+  referencesField?: string;
+}
+
 export const DIAGRAM_TYPES = [
   'flowchart',
   'stateDiagram',
@@ -10,6 +21,7 @@ export const DIAGRAM_TYPES = [
   'mindmap',
   'journey',
   'architecture',
+  'sequence',
 ] as const;
 
 export type DiagramType = (typeof DIAGRAM_TYPES)[number];
@@ -34,6 +46,8 @@ export enum NodeType {
   GROUP = 'group',
   SWIMLANE = 'swimlane',
   IMAGE = 'image',
+  SEQUENCE_PARTICIPANT = 'sequence_participant',
+  SEQUENCE_MESSAGE = 'sequence_message',
 }
 
 export interface NodeData {
@@ -63,7 +77,7 @@ export interface NodeData {
   classStereotype?: string;
   classAttributes?: string[];
   classMethods?: string[];
-  erFields?: string[];
+  erFields?: Array<string | ErField>;
   journeySection?: string;
   journeyActor?: string;
   journeyTask?: string;
@@ -72,7 +86,9 @@ export interface NodeData {
   mindmapParentId?: string;
   mindmapSide?: 'left' | 'right';
   mindmapBranchStyle?: 'curved' | 'straight';
+  mindmapCollapsed?: boolean;
   archProvider?: string;
+  archProviderLabel?: string;
   archResourceType?: string;
   archEnvironment?: string;
   archBoundaryId?: string;
@@ -83,6 +99,12 @@ export interface NodeData {
   assetPresentation?: 'icon';
   assetProvider?: string;
   assetCategory?: string;
+  seqParticipantKind?: 'participant' | 'actor';
+  seqParticipantAlias?: string;
+  seqMessageKind?: 'sync' | 'async' | 'return' | 'self' | 'create' | 'destroy';
+  seqMessageFrom?: string;
+  seqMessageTo?: string;
+  seqMessageOrder?: number;
 }
 
 export interface AIRequestParams {
@@ -116,6 +138,8 @@ export interface EdgeData {
     y: number;
   }[];
   mindmapBranchKind?: 'root' | 'branch';
+  seqMessageKind?: 'sync' | 'async' | 'return' | 'self' | 'create' | 'destroy';
+  connectionType?: 'fixed' | 'dynamic';
   waypoint?: {
     x: number;
     y: number;
diff --git a/src/services/ai/contextSerializer.test.ts b/src/services/ai/contextSerializer.test.ts
index ec9b642..31c93d5 100644
--- a/src/services/ai/contextSerializer.test.ts
+++ b/src/services/ai/contextSerializer.test.ts
@@ -23,22 +23,27 @@ function createEdge(id: string, source: string, target: string, label?: string):
 }
 
 describe('serializeCanvasContextForAI', () => {
-  it('serializes nodes/edges with deterministic summary fields', () => {
+  it('returns empty string for empty canvas', () => {
+    expect(serializeCanvasContextForAI([], [])).toBe('');
+  });
+
+  it('serializes nodes/edges as OpenFlow DSL with header comment', () => {
     const nodes = [createNode('n1', 'process', 'A'), createNode('n2', 'decision', 'B')];
     const edges = [createEdge('e1', 'n1', 'n2', 'yes')];
 
     const serialized = serializeCanvasContextForAI(nodes, edges);
-    const parsed = JSON.parse(serialized) as {
-      summary: { nodeCount: number; edgeCount: number; nodeTypes: Record<string, number> };
-      nodes: Array<{ id: string; label: string }>;
-      edges: Array<{ source: string; target: string; label?: string }>;
-    };
-
-    expect(parsed.summary.nodeCount).toBe(2);
-    expect(parsed.summary.edgeCount).toBe(1);
-    expect(parsed.summary.nodeTypes.process).toBe(1);
-    expect(parsed.summary.nodeTypes.decision).toBe(1);
-    expect(parsed.nodes[0].id).toBe('n1');
-    expect(parsed.edges[0].label).toBe('yes');
+
+    expect(serialized).toContain('# Current diagram');
+    expect(serialized).toContain('n1');
+    expect(serialized).toContain('n2');
+    expect(serialized).toContain('A');
+    expect(serialized).toContain('B');
+  });
+
+  it('appends focused node IDs when selectedNodeIds are provided', () => {
+    const nodes = [createNode('n1', 'process', 'A')];
+    const serialized = serializeCanvasContextForAI(nodes, [], ['n1']);
+
+    expect(serialized).toContain('# Focused nodes: [n1]');
   });
 });
diff --git a/src/services/ai/contextSerializer.ts b/src/services/ai/contextSerializer.ts
index 9eb0223..3b318b6 100644
--- a/src/services/ai/contextSerializer.ts
+++ b/src/services/ai/contextSerializer.ts
@@ -1,61 +1,19 @@
 import type { FlowEdge, FlowNode } from '@/lib/types';
+import { toOpenFlowDSL } from '@/services/openFlowDSLExporter';
 
-interface SimplifiedNode {
-  id: string;
-  type?: string;
-  label?: string;
-  subLabel?: string;
-  x: number;
-  y: number;
-}
-
-interface ContextGraphPayload {
-  nodes: SimplifiedNode[];
-  edges: Array<{
-    source: string;
-    target: string;
-    label?: string;
-  }>;
-  summary: {
-    nodeCount: number;
-    edgeCount: number;
-    nodeTypes: Record<string, number>;
-  };
-}
+export function serializeCanvasContextForAI(
+  nodes: FlowNode[],
+  edges: FlowEdge[],
+  selectedNodeIds?: string[]
+): string {
+  if (nodes.length === 0) return '';
 
-function simplifyNodes(nodes: FlowNode[]): SimplifiedNode[] {
-  return nodes.map((node) => ({
-    id: node.id,
-    type: node.type,
-    label: node.data.label,
-    subLabel: typeof node.data.subLabel === 'string' ? node.data.subLabel : undefined,
-    x: node.position.x,
-    y: node.position.y,
-  }));
-}
-
-function summarizeNodeTypes(nodes: FlowNode[]): Record<string, number> {
-  return nodes.reduce<Record<string, number>>((acc, node) => {
-    const type = node.type ?? 'unknown';
-    acc[type] = (acc[type] ?? 0) + 1;
-    return acc;
-  }, {});
-}
+  const dsl = toOpenFlowDSL(nodes, edges);
+  let context = `# Current diagram — preserve node IDs for unchanged nodes\n${dsl}`;
 
-export function serializeCanvasContextForAI(nodes: FlowNode[], edges: FlowEdge[]): string {
-  const payload: ContextGraphPayload = {
-    nodes: simplifyNodes(nodes),
-    edges: edges.map((edge) => ({
-      source: edge.source,
-      target: edge.target,
-      label: typeof edge.label === 'string' ? edge.label : undefined,
-    })),
-    summary: {
-      nodeCount: nodes.length,
-      edgeCount: edges.length,
-      nodeTypes: summarizeNodeTypes(nodes),
-    },
-  };
+  if (selectedNodeIds && selectedNodeIds.length > 0) {
+    context += `\n# Focused nodes: [${selectedNodeIds.join(', ')}]`;
+  }
 
-  return JSON.stringify(payload);
+  return context;
 }
diff --git a/src/services/aiService.test.ts b/src/services/aiService.test.ts
new file mode 100644
index 0000000..c185aea
--- /dev/null
+++ b/src/services/aiService.test.ts
@@ -0,0 +1,38 @@
+import { describe, expect, it } from 'vitest';
+import { parseClaudeContent, parseOpenAICompatibleContent } from './aiService';
+
+describe('aiService response parsing', () => {
+  it('returns the message content for OpenAI-compatible responses', () => {
+    const result = parseOpenAICompatibleContent({
+      choices: [{ message: { content: 'flow: Test' } }],
+    });
+
+    expect(result).toEqual({ ok: true, value: 'flow: Test' });
+  });
+
+  it('returns a typed error when OpenAI-compatible content is missing', () => {
+    const result = parseOpenAICompatibleContent({ choices: [] });
+
+    expect(result.ok).toBe(false);
+    if (result.ok === false) {
+      expect(result.error.code).toBe('bad_response');
+    }
+  });
+
+  it('returns the text content for Claude responses', () => {
+    const result = parseClaudeContent({
+      content: [{ text: 'flow: Claude' }],
+    });
+
+    expect(result).toEqual({ ok: true, value: 'flow: Claude' });
+  });
+
+  it('returns a typed error when Claude content is missing', () => {
+    const result = parseClaudeContent({ content: [] });
+
+    expect(result.ok).toBe(false);
+    if (result.ok === false) {
+      expect(result.error.code).toBe('bad_response');
+    }
+  });
+});
diff --git a/src/services/aiService.ts b/src/services/aiService.ts
index b54b034..22b99bc 100644
--- a/src/services/aiService.ts
+++ b/src/services/aiService.ts
@@ -1,10 +1,22 @@
 import { getSystemInstruction, ChatMessage, generateDiagramFromChat as generateDiagramFromChatGemini, chatWithDocsGemini } from './geminiService';
 import { DEFAULT_MODELS, PROVIDER_BASE_URLS } from '@/config/aiProviders';
+import { err, ok, type Result } from '@/lib/result';
 
 export type AIProvider = 'gemini' | 'openai' | 'claude' | 'groq' | 'nvidia' | 'cerebras' | 'mistral' | 'openrouter' | 'custom';
 
+interface AiServiceError {
+    code:
+        | 'missing_api_key'
+        | 'unknown_provider'
+        | 'network_error'
+        | 'bad_response';
+    message: string;
+    status?: number;
+}
+
+type TextMessage = { role: string; content: string };
+
 function getEnvApiKey(provider: AIProvider): string | undefined {
-    // Vite uses import.meta.env
     switch (provider) {
         case 'gemini': return import.meta.env.VITE_GEMINI_API_KEY;
         case 'openai': return import.meta.env.VITE_OPENAI_API_KEY;
@@ -19,21 +31,166 @@ function getEnvApiKey(provider: AIProvider): string | undefined {
     }
 }
 
-/** Convert FlowMind chat history to OpenAI-compatible message format */
-function historyToMessages(history: ChatMessage[]): { role: string; content: string }[] {
+function historyToMessages(history: ChatMessage[]): TextMessage[] {
     return history.map(h => ({
         role: h.role === 'model' ? 'assistant' : 'user',
         content: h.parts.map(p => p.text || '').join(''),
     }));
 }
 
-// --- OpenAI-compatible REST call (used by OpenAI, Groq, NVIDIA, Cerebras, Mistral, Custom) ---
+function resolveApiKey(provider: AIProvider, apiKeySetting?: string): string {
+    const apiKey = apiKeySetting || getEnvApiKey(provider);
+    if (!apiKey) {
+        throw new Error('API key is missing. Add it in Settings → AI or in your .env.local file.');
+    }
+    return apiKey;
+}
+
+function resolveModelId(provider: AIProvider, modelIdSetting?: string): string | undefined {
+    return modelIdSetting || (provider === 'custom' ? import.meta.env.VITE_CUSTOM_AI_MODEL : undefined);
+}
+
+function resolveOpenAICompatibleBaseUrl(provider: AIProvider, customBaseUrlSetting?: string): string {
+    if (provider === 'custom') {
+        return customBaseUrlSetting || import.meta.env.VITE_CUSTOM_AI_BASE_URL || PROVIDER_BASE_URLS.openai;
+    }
+
+    const baseUrl = PROVIDER_BASE_URLS[provider as keyof typeof PROVIDER_BASE_URLS];
+    if (!baseUrl) {
+        throw new Error(`Unknown provider: ${provider}`);
+    }
+    return baseUrl;
+}
+
+function toAiServiceError(error: AiServiceError): Error {
+    return new Error(error.message);
+}
+
+function parseOpenAICompatibleContent(data: unknown): Result<string, AiServiceError> {
+    const text = (data as { choices?: Array<{ message?: { content?: unknown } }> })?.choices?.[0]?.message?.content;
+    if (typeof text !== 'string' || text.trim().length === 0) {
+        return err({
+            code: 'bad_response',
+            message: 'No content in response from AI provider.',
+        });
+    }
+
+    return ok(text);
+}
+
+function parseClaudeContent(data: unknown): Result<string, AiServiceError> {
+    const text = (data as { content?: Array<{ text?: unknown }> })?.content?.[0]?.text;
+    if (typeof text !== 'string' || text.trim().length === 0) {
+        return err({
+            code: 'bad_response',
+            message: 'No content in Anthropic response.',
+        });
+    }
+
+    return ok(text);
+}
+
+async function parseFailedResponse(response: Response, prefix: string): Promise<AiServiceError> {
+    const errorText = await response.text();
+    return {
+        code: 'network_error',
+        status: response.status,
+        message: `${prefix} (${response.status}): ${errorText}`,
+    };
+}
+
+async function readSSEStream(
+    response: Response,
+    extractDelta: (data: string) => string | undefined,
+    onChunk: (delta: string) => void,
+): Promise<string> {
+    const reader = response.body!.getReader();
+    const decoder = new TextDecoder();
+    let fullText = '';
+    let buffer = '';
+    let done = false;
+
+    while (!done) {
+        const chunk = await reader.read();
+        done = chunk.done;
+        if (chunk.value) buffer += decoder.decode(chunk.value, { stream: true });
+        const lines = buffer.split('\n');
+        buffer = lines.pop() ?? '';
+        for (const line of lines) {
+            if (!line.startsWith('data: ')) continue;
+            const data = line.slice(6).trim();
+            if (data === '[DONE]') return fullText;
+            try {
+                const delta = extractDelta(data);
+                if (delta) {
+                    fullText += delta;
+                    onChunk(delta);
+                }
+            } catch { /* skip malformed SSE lines */ }
+        }
+    }
+    return fullText;
+}
+
+function extractOpenAIDelta(data: string): string | undefined {
+    return (JSON.parse(data) as { choices?: Array<{ delta?: { content?: string } }> })
+        ?.choices?.[0]?.delta?.content || undefined;
+}
+
+function extractClaudeDelta(data: string): string | undefined {
+    const parsed = JSON.parse(data) as { type?: string; delta?: { type?: string; text?: string } };
+    if (parsed.type === 'content_block_delta' && parsed.delta?.type === 'text_delta') {
+        return parsed.delta.text || undefined;
+    }
+    return undefined;
+}
+
+function extractImageParts(imageBase64: string): { mimeType: string; cleanBase64: string } {
+    const match = imageBase64.match(/^data:image\/([^;]+);base64,/);
+    return {
+        mimeType: match ? `image/${match[1]}` : 'image/png',
+        cleanBase64: imageBase64.replace(/^data:image\/[^;]+;base64,/, ''),
+    };
+}
+
+function withOpenAIImage(messages: TextMessage[], imageBase64: string): unknown[] {
+    const { mimeType, cleanBase64 } = extractImageParts(imageBase64);
+    return messages.map((m, i) => {
+        if (i !== messages.length - 1 || m.role !== 'user') return m;
+        return {
+            role: 'user',
+            content: [
+                { type: 'image_url', image_url: { url: `data:${mimeType};base64,${cleanBase64}` } },
+                { type: 'text', text: m.content },
+            ],
+        };
+    });
+}
+
+function withClaudeImage(messages: TextMessage[], imageBase64: string): unknown[] {
+    const { mimeType, cleanBase64 } = extractImageParts(imageBase64);
+    return messages.map((m, i) => {
+        if (i !== messages.length - 1 || m.role !== 'user') return m;
+        return {
+            role: 'user',
+            content: [
+                { type: 'image', source: { type: 'base64', media_type: mimeType, data: cleanBase64 } },
+                { type: 'text', text: m.content },
+            ],
+        };
+    });
+}
+
 async function callOpenAICompatible(
     baseUrl: string,
     apiKey: string,
     model: string,
-    messages: { role: string; content: string }[]
+    messages: TextMessage[],
+    onChunk?: (delta: string) => void,
+    signal?: AbortSignal,
+    imageBase64?: string,
 ): Promise<string> {
+    const body = imageBase64 ? withOpenAIImage(messages, imageBase64) : messages;
     const response = await fetch(`${baseUrl}/chat/completions`, {
         method: 'POST',
         headers: {
@@ -42,29 +199,31 @@ async function callOpenAICompatible(
         },
         body: JSON.stringify({
             model,
-            messages,
+            messages: body,
             temperature: 0.2,
             max_tokens: 4096,
+            stream: true,
         }),
+        signal,
     });
 
     if (!response.ok) {
-        const err = await response.text();
-        throw new Error(`API error (${response.status}): ${err}`);
+        throw toAiServiceError(await parseFailedResponse(response, 'API error'));
     }
 
-    const data = await response.json();
-    const text = data.choices?.[0]?.message?.content;
-    if (!text) throw new Error('No content in response from AI provider.');
-    return text;
+    return readSSEStream(response, extractOpenAIDelta, onChunk ?? (() => undefined));
 }
 
-// --- Anthropic Claude REST call ---
 async function callClaude(
     apiKey: string,
     model: string,
-    messages: { role: string; content: string }[]
+    messages: TextMessage[],
+    systemInstruction: string,
+    onChunk?: (delta: string) => void,
+    signal?: AbortSignal,
+    imageBase64?: string,
 ): Promise<string> {
+    const body = imageBase64 ? withClaudeImage(messages, imageBase64) : messages;
     const response = await fetch('https://api.anthropic.com/v1/messages', {
         method: 'POST',
         headers: {
@@ -74,24 +233,21 @@ async function callClaude(
         },
         body: JSON.stringify({
             model,
-            system: getSystemInstruction(),
-            messages,
+            system: systemInstruction,
+            messages: body,
             max_tokens: 4096,
+            stream: true,
         }),
+        signal,
     });
 
     if (!response.ok) {
-        const err = await response.text();
-        throw new Error(`Anthropic API error (${response.status}): ${err}`);
+        throw toAiServiceError(await parseFailedResponse(response, 'Anthropic API error'));
     }
 
-    const data = await response.json();
-    const text = data.content?.[0]?.text;
-    if (!text) throw new Error('No content in Anthropic response.');
-    return text;
+    return readSSEStream(response, extractClaudeDelta, onChunk ?? (() => undefined));
 }
 
-// --- Primary exported function ---
 export async function generateDiagramFromChat(
     history: ChatMessage[],
     newMessage: string,
@@ -100,49 +256,49 @@ export async function generateDiagramFromChat(
     apiKeySetting?: string,
     modelIdSetting?: string,
     provider: AIProvider = 'gemini',
-    customBaseUrlSetting?: string
+    customBaseUrlSetting?: string,
+    isEditMode = false,
+    onChunk?: (delta: string) => void,
+    signal?: AbortSignal,
 ): Promise<string> {
-    const apiKey = apiKeySetting || getEnvApiKey(provider);
-    if (!apiKey) {
-        throw new Error("API Key is missing. Please add it in Settings → Flowpilot AI or in your .env.local file.");
-    }
-
-    const modelId = modelIdSetting || (provider === 'custom' ? import.meta.env.VITE_CUSTOM_AI_MODEL : undefined);
+    const apiKey = resolveApiKey(provider, apiKeySetting);
+    const modelId = resolveModelId(provider, modelIdSetting);
 
-    const userPrompt = `User Request: ${newMessage}${currentDSL ? `\n\nCURRENT CANVAS CONTEXT (JSON):\n${currentDSL}` : ''}\n\nGenerate or update the FlowMind DSL based on this request. If context exists, extend/modify that structure instead of resetting from scratch unless user explicitly asks for replacement.`;
+    const userPrompt = isEditMode && currentDSL
+        ? `User Request: ${newMessage}\n\nCURRENT DIAGRAM — output the complete updated OpenFlow DSL:\n${currentDSL}\n\nIMPORTANT: Preserve ALL unchanged node IDs and attributes exactly. Only modify what was requested.`
+        : `User Request: ${newMessage}\n\nGenerate a new OpenFlow DSL diagram.`;
 
-    // Gemini uses its own SDK with different prompt structure — delegate directly
     if (provider === 'gemini') {
-        return generateDiagramFromChatGemini(history, newMessage, currentDSL, imageBase64, apiKey, modelId);
+        return generateDiagramFromChatGemini(history, newMessage, currentDSL, imageBase64, apiKey, modelId, isEditMode, onChunk, signal);
     }
 
-    // Claude uses Anthropic's message format
+    const systemInstruction = getSystemInstruction(isEditMode ? 'edit' : 'create');
+
     if (provider === 'claude') {
-        const messages = [
+        const messages: TextMessage[] = [
             ...historyToMessages(history),
             { role: 'user', content: userPrompt },
         ];
-        return callClaude(apiKey, modelId || DEFAULT_MODELS.claude, messages);
+        return callClaude(apiKey, modelId || DEFAULT_MODELS.claude, messages, systemInstruction, onChunk, signal, imageBase64);
     }
 
-    // All remaining providers (OpenAI, Groq, NVIDIA, Cerebras, Mistral, Custom) share the OpenAI wire format
-    let baseUrl = PROVIDER_BASE_URLS[provider as keyof typeof PROVIDER_BASE_URLS];
-    if (provider === 'custom') {
-        baseUrl = customBaseUrlSetting || import.meta.env.VITE_CUSTOM_AI_BASE_URL || PROVIDER_BASE_URLS.openai;
-    }
-
-    if (!baseUrl) throw new Error(`Unknown provider: ${provider}`);
-
-    const messages = [
-        { role: 'system', content: getSystemInstruction() },
+    const messages: TextMessage[] = [
+        { role: 'system', content: systemInstruction },
         ...historyToMessages(history),
         { role: 'user', content: userPrompt },
     ];
 
-    return callOpenAICompatible(baseUrl, apiKey, modelId || DEFAULT_MODELS[provider], messages);
+    return callOpenAICompatible(
+        resolveOpenAICompatibleBaseUrl(provider, customBaseUrlSetting),
+        apiKey,
+        modelId || DEFAULT_MODELS[provider],
+        messages,
+        onChunk,
+        signal,
+        imageBase64,
+    );
 }
 
-// --- Chat with Docs Function ---
 export async function chatWithDocs(
     history: ChatMessage[],
     newMessage: string,
@@ -152,12 +308,8 @@ export async function chatWithDocs(
     provider: AIProvider = 'gemini',
     customBaseUrlSetting?: string
 ): Promise<string> {
-    const apiKey = apiKeySetting || getEnvApiKey(provider);
-    if (!apiKey) {
-        throw new Error("API Key is missing. Please add it in Settings → Flowpilot AI or in your .env.local file.");
-    }
-
-    const modelId = modelIdSetting || (provider === 'custom' ? import.meta.env.VITE_CUSTOM_AI_MODEL : undefined);
+    const apiKey = resolveApiKey(provider, apiKeySetting);
+    const modelId = resolveModelId(provider, modelIdSetting);
 
     if (provider === 'gemini') {
         return chatWithDocsGemini(history, newMessage, docsContext, apiKey, modelId);
@@ -176,54 +328,25 @@ ${docsContext}
 `;
 
     if (provider === 'claude') {
-        const messages = [
+        const messages: TextMessage[] = [
             ...historyToMessages(history),
             { role: 'user', content: newMessage },
         ];
-
-        // Custom Claude call since it needs docs in system prompt, but we reuse callClaude logic loosely:
-        // Actually, callClaude hardcodes getSystemInstruction(), so let's inline a quick Claude call here for docs.
-        const response = await fetch('https://api.anthropic.com/v1/messages', {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-                'x-api-key': apiKey,
-                'anthropic-version': '2023-06-01',
-            },
-            body: JSON.stringify({
-                model: modelId || DEFAULT_MODELS.claude,
-                system: systemInstruction,
-                messages,
-                max_tokens: 4096,
-            }),
-        });
-
-        if (!response.ok) {
-            const err = await response.text();
-            throw new Error(`Anthropic API error (${response.status}): ${err}`);
-        }
-
-        const data = await response.json();
-        const text = data.content?.[0]?.text;
-        if (!text) throw new Error('No content in Anthropic response.');
-        return text;
+        return callClaude(apiKey, modelId || DEFAULT_MODELS.claude, messages, systemInstruction);
     }
 
-    let baseUrl = PROVIDER_BASE_URLS[provider as keyof typeof PROVIDER_BASE_URLS];
-    if (provider === 'custom') {
-        baseUrl = customBaseUrlSetting || import.meta.env.VITE_CUSTOM_AI_BASE_URL || PROVIDER_BASE_URLS.openai;
-    }
-
-    if (!baseUrl) throw new Error(`Unknown provider: ${provider}`);
-
-    const messages = [
+    const messages: TextMessage[] = [
         { role: 'system', content: systemInstruction },
         ...historyToMessages(history),
         { role: 'user', content: newMessage },
     ];
 
-    return callOpenAICompatible(baseUrl, apiKey, modelId || DEFAULT_MODELS[provider], messages);
+    return callOpenAICompatible(
+        resolveOpenAICompatibleBaseUrl(provider, customBaseUrlSetting),
+        apiKey,
+        modelId || DEFAULT_MODELS[provider],
+        messages
+    );
 }
-
-// Re-export for compatibility
 export type { ChatMessage };
+export { parseClaudeContent, parseOpenAICompatibleContent };
diff --git a/src/services/animatedExport.test.ts b/src/services/animatedExport.test.ts
index d90b16c..4ee3b0a 100644
--- a/src/services/animatedExport.test.ts
+++ b/src/services/animatedExport.test.ts
@@ -1,44 +1,18 @@
 import { describe, expect, it } from 'vitest';
-import { buildAnimatedExportPlan, getAnimatedExportFileExtension, scaleToFitBounds, selectSupportedVideoMimeType } from './animatedExport';
-import type { PlaybackSequence } from './playback/contracts';
-
-const sequence: PlaybackSequence = {
-  version: 1,
-  steps: [
-    {
-      id: 'step-1',
-      nodeId: 'node-1',
-      durationMs: 1000,
-      viewport: { duration: 800, padding: 2, minZoom: 0.5, maxZoom: 1.5 },
-    },
-  ],
-};
+import { getAnimatedExportFileExtension, selectSupportedVideoMimeType } from './animatedExport';
 
 describe('animated export helpers', () => {
-  it('scales large frames down to the preset maximum dimension', () => {
-    expect(scaleToFitBounds(2000, 1000, 1000)).toEqual({ width: 1000, height: 500 });
-  });
-
-  it('builds a GIF export plan with estimated size', () => {
-    const plan = buildAnimatedExportPlan({
-      kind: 'gif',
-      width: 1800,
-      height: 900,
-      sequence,
-    });
-
-    expect(plan.preset.kind).toBe('gif');
-    expect(plan.frameWidth).toBeLessThanOrEqual(960);
-    expect(plan.estimatedBytes).toBeGreaterThan(0);
-  });
-
-  it('chooses the first supported recorder mime type and derives file extension', () => {
+  it('chooses the first supported recorder mime type', () => {
     const mimeType = selectSupportedVideoMimeType({
       isTypeSupported: (candidate) => candidate === 'video/webm;codecs=vp8',
     });
 
     expect(mimeType).toBe('video/webm;codecs=vp8');
-    expect(getAnimatedExportFileExtension(mimeType, 'video')).toBe('webm');
-    expect(getAnimatedExportFileExtension('video/mp4', 'video')).toBe('mp4');
+  });
+
+  it('derives a video file extension from the recorder mime type', () => {
+    expect(getAnimatedExportFileExtension('video/webm;codecs=vp8')).toBe('webm');
+    expect(getAnimatedExportFileExtension('video/mp4')).toBe('mp4');
+    expect(getAnimatedExportFileExtension(null)).toBe('webm');
   });
 });
diff --git a/src/services/animatedExport.ts b/src/services/animatedExport.ts
index 61c116a..270e246 100644
--- a/src/services/animatedExport.ts
+++ b/src/services/animatedExport.ts
@@ -1,23 +1,3 @@
-import type { PlaybackSequence } from './playback/contracts';
-
-export type AnimatedExportKind = 'video' | 'gif';
-
-export interface AnimatedExportPreset {
-  id: 'social-gif' | 'docs-loop' | 'presentation-video';
-  label: string;
-  kind: AnimatedExportKind;
-  fps: number;
-  maxDimension: number;
-  pixelRatio: number;
-}
-
-export interface AnimatedExportPlan {
-  preset: AnimatedExportPreset;
-  frameWidth: number;
-  frameHeight: number;
-  estimatedBytes: number;
-}
-
 const VIDEO_MIME_TYPES = [
   'video/webm;codecs=vp9',
   'video/webm;codecs=vp8',
@@ -25,88 +5,8 @@ const VIDEO_MIME_TYPES = [
   'video/mp4',
 ] as const;
 
-export function getAnimatedExportPreset(kind: AnimatedExportKind): AnimatedExportPreset {
-  if (kind === 'gif') {
-    return {
-      id: 'social-gif',
-      label: 'Social GIF',
-      kind: 'gif',
-      fps: 8,
-      maxDimension: 960,
-      pixelRatio: 1,
-    };
-  }
-
-  return {
-    id: 'presentation-video',
-    label: 'Presentation Video',
-    kind: 'video',
-    fps: 12,
-    maxDimension: 1440,
-    pixelRatio: 1.5,
-  };
-}
-
-export function scaleToFitBounds(
-  width: number,
-  height: number,
-  maxDimension: number
-): { width: number; height: number } {
-  const safeWidth = Math.max(1, Math.round(width));
-  const safeHeight = Math.max(1, Math.round(height));
-  const longestSide = Math.max(safeWidth, safeHeight);
-  if (longestSide <= maxDimension) {
-    return {
-      width: safeWidth,
-      height: safeHeight,
-    };
-  }
-
-  const scale = maxDimension / longestSide;
-  return {
-    width: Math.max(1, Math.round(safeWidth * scale)),
-    height: Math.max(1, Math.round(safeHeight * scale)),
-  };
-}
-
-export function estimateAnimatedExportBytes(plan: {
-  kind: AnimatedExportKind;
-  width: number;
-  height: number;
-  sequence: PlaybackSequence;
-  fps: number;
-}): number {
-  const totalDurationMs = plan.sequence.steps.reduce((total, step) => total + step.durationMs, 0);
-  const totalFrames = Math.max(1, Math.round((totalDurationMs / 1000) * plan.fps));
-  const pixelsPerFrame = plan.width * plan.height;
-  const bytesPerPixel = plan.kind === 'gif' ? 1.15 : 0.18;
-  return Math.round(totalFrames * pixelsPerFrame * bytesPerPixel);
-}
-
-export function buildAnimatedExportPlan(params: {
-  kind: AnimatedExportKind;
-  width: number;
-  height: number;
-  sequence: PlaybackSequence;
-}): AnimatedExportPlan {
-  const preset = getAnimatedExportPreset(params.kind);
-  const scaled = scaleToFitBounds(params.width, params.height, preset.maxDimension);
-  return {
-    preset,
-    frameWidth: scaled.width,
-    frameHeight: scaled.height,
-    estimatedBytes: estimateAnimatedExportBytes({
-      kind: params.kind,
-      width: scaled.width,
-      height: scaled.height,
-      sequence: params.sequence,
-      fps: preset.fps,
-    }),
-  };
-}
-
 export function selectSupportedVideoMimeType(
-  recorderRef: Pick<typeof MediaRecorder, 'isTypeSupported'> | undefined
+  recorderRef: Pick<typeof MediaRecorder, 'isTypeSupported'> | undefined,
 ): string | null {
   if (!recorderRef || typeof recorderRef.isTypeSupported !== 'function') {
     return null;
@@ -121,11 +21,7 @@ export function selectSupportedVideoMimeType(
   return null;
 }
 
-export function getAnimatedExportFileExtension(mimeType: string | null, kind: AnimatedExportKind): string {
-  if (kind === 'gif') {
-    return 'gif';
-  }
-
+export function getAnimatedExportFileExtension(mimeType: string | null): string {
   if (mimeType?.includes('mp4')) {
     return 'mp4';
   }
diff --git a/src/services/architectureLint/defaultRules.ts b/src/services/architectureLint/defaultRules.ts
new file mode 100644
index 0000000..cf04526
--- /dev/null
+++ b/src/services/architectureLint/defaultRules.ts
@@ -0,0 +1,29 @@
+/** Example rules shown when a user opens the Lint panel for the first time. */
+export const EXAMPLE_LINT_RULES = `{
+  "rules": [
+    {
+      "id": "no-direct-db-call",
+      "description": "Services must not call databases directly — use a data layer",
+      "severity": "error",
+      "type": "cannot-connect",
+      "from": { "labelContains": "service" },
+      "to":   { "labelContains": "database" }
+    },
+    {
+      "id": "no-frontend-to-db",
+      "description": "Frontend components cannot connect directly to databases",
+      "severity": "error",
+      "type": "cannot-connect",
+      "from": { "nodeType": "custom", "labelContains": "frontend" },
+      "to":   { "labelContains": "db" }
+    },
+    {
+      "id": "api-must-reach-auth",
+      "description": "Any API gateway must connect to an Auth service",
+      "severity": "warning",
+      "type": "must-connect",
+      "from": { "labelContains": "api gateway" },
+      "to":   { "labelContains": "auth" }
+    }
+  ]
+}`;
diff --git a/src/services/architectureLint/ruleEngine.test.ts b/src/services/architectureLint/ruleEngine.test.ts
new file mode 100644
index 0000000..1f37f33
--- /dev/null
+++ b/src/services/architectureLint/ruleEngine.test.ts
@@ -0,0 +1,179 @@
+import { describe, expect, it } from 'vitest';
+import type { FlowEdge, FlowNode } from '@/lib/types';
+import type { LintRule } from './types';
+import { evaluateRules, parseRulesJson } from './ruleEngine';
+
+function node(id: string, label: string, type = 'process'): FlowNode {
+  return { id, type, position: { x: 0, y: 0 }, data: { label } };
+}
+
+function edge(id: string, source: string, target: string, label?: string, edgeType?: string): FlowEdge {
+  return { id, source, target, ...(label !== undefined ? { label } : {}), ...(edgeType !== undefined ? { type: edgeType } : {}) } as FlowEdge;
+}
+
+describe('evaluateRules — cannot-connect', () => {
+  const rule: LintRule = {
+    id: 'r1', severity: 'error', type: 'cannot-connect',
+    from: { labelContains: 'ui' }, to: { labelContains: 'db' },
+  };
+
+  it('flags a direct UI → DB connection', () => {
+    const nodes = [node('ui', 'UI Layer'), node('db', 'DB Layer')];
+    const edges = [edge('e1', 'ui', 'db')];
+    const violations = evaluateRules(nodes, edges, [rule]);
+    expect(violations).toHaveLength(1);
+    expect(violations[0].edgeIds).toContain('e1');
+  });
+
+  it('does not flag when no matching connection', () => {
+    const nodes = [node('api', 'API'), node('db', 'DB Layer')];
+    const edges = [edge('e1', 'api', 'db')];
+    const violations = evaluateRules(nodes, edges, [rule]);
+    expect(violations).toHaveLength(0);
+  });
+
+  it('uses edge matcher to restrict which edges trigger the rule', () => {
+    const ruleWithEdge: LintRule = {
+      ...rule, edge: { labelContains: 'direct' },
+    };
+    const nodes = [node('ui', 'UI Layer'), node('db', 'DB Layer')];
+    const proxiedEdge = edge('e1', 'ui', 'db', 'via cache');
+    const directEdge = edge('e2', 'ui', 'db', 'direct write');
+    const violations = evaluateRules(nodes, [proxiedEdge, directEdge], [ruleWithEdge]);
+    expect(violations).toHaveLength(1);
+    expect(violations[0].edgeIds).toContain('e2');
+  });
+});
+
+describe('evaluateRules — must-connect', () => {
+  const rule: LintRule = {
+    id: 'r2', severity: 'warning', type: 'must-connect',
+    from: { labelContains: 'service' }, to: { labelContains: 'db' },
+  };
+
+  it('flags a service node with no DB connection', () => {
+    const nodes = [node('svc', 'UserService'), node('db', 'DB Layer')];
+    const violations = evaluateRules(nodes, [], [rule]);
+    expect(violations).toHaveLength(1);
+    expect(violations[0].nodeIds).toContain('svc');
+  });
+
+  it('passes when service has a DB connection', () => {
+    const nodes = [node('svc', 'UserService'), node('db', 'DB Layer')];
+    const edges = [edge('e1', 'svc', 'db')];
+    const violations = evaluateRules(nodes, edges, [rule]);
+    expect(violations).toHaveLength(0);
+  });
+});
+
+describe('evaluateRules — forbidden-cycle', () => {
+  const rule: LintRule = {
+    id: 'r3', severity: 'error', type: 'forbidden-cycle',
+  };
+
+  it('detects a direct cycle (A → B → A)', () => {
+    const nodes = [node('a', 'A'), node('b', 'B')];
+    const edges = [edge('e1', 'a', 'b'), edge('e2', 'b', 'a')];
+    const violations = evaluateRules(nodes, edges, [rule]);
+    expect(violations).toHaveLength(1);
+    expect(violations[0].nodeIds).toEqual(expect.arrayContaining(['a', 'b']));
+  });
+
+  it('detects a longer cycle (A → B → C → A)', () => {
+    const nodes = [node('a', 'A'), node('b', 'B'), node('c', 'C')];
+    const edges = [edge('e1', 'a', 'b'), edge('e2', 'b', 'c'), edge('e3', 'c', 'a')];
+    const violations = evaluateRules(nodes, edges, [rule]);
+    expect(violations).toHaveLength(1);
+  });
+
+  it('returns no violations for a DAG', () => {
+    const nodes = [node('a', 'A'), node('b', 'B'), node('c', 'C')];
+    const edges = [edge('e1', 'a', 'b'), edge('e2', 'b', 'c')];
+    const violations = evaluateRules(nodes, edges, [rule]);
+    expect(violations).toHaveLength(0);
+  });
+
+  it('only checks nodes matching the from matcher', () => {
+    const rule2: LintRule = { ...rule, from: { labelContains: 'layer' } };
+    const nodes = [node('a', 'Layer A'), node('b', 'Service B'), node('c', 'Layer C')];
+    // cycle between b and c, but only a and c are in scope
+    const edges = [edge('e1', 'b', 'c'), edge('e2', 'c', 'b')];
+    // b is not in scope so c→b edge is ignored; no cycle in scoped nodes
+    const violations = evaluateRules(nodes, edges, [rule2]);
+    expect(violations).toHaveLength(0);
+  });
+});
+
+describe('evaluateRules — must-have-node', () => {
+  const rule: LintRule = {
+    id: 'r4', severity: 'warning', type: 'must-have-node',
+    from: { nodeType: 'database' },
+  };
+
+  it('flags when no matching node exists', () => {
+    const nodes = [node('api', 'API', 'process')];
+    const violations = evaluateRules(nodes, [], [rule]);
+    expect(violations).toHaveLength(1);
+    expect(violations[0].ruleId).toBe('r4');
+  });
+
+  it('passes when at least one matching node exists', () => {
+    const nodes = [node('api', 'API', 'process'), node('db', 'DB', 'database')];
+    const violations = evaluateRules(nodes, [], [rule]);
+    expect(violations).toHaveLength(0);
+  });
+});
+
+describe('evaluateRules — node-count', () => {
+  const nodes = [
+    node('s1', 'Service A', 'process'),
+    node('s2', 'Service B', 'process'),
+    node('s3', 'Service C', 'process'),
+  ];
+
+  it('flags when count is below min', () => {
+    const rule: LintRule = { id: 'r5', severity: 'error', type: 'node-count', from: { nodeType: 'process' }, min: 5 };
+    const violations = evaluateRules(nodes, [], [rule]);
+    expect(violations).toHaveLength(1);
+  });
+
+  it('flags when count exceeds max', () => {
+    const rule: LintRule = { id: 'r6', severity: 'warning', type: 'node-count', from: { nodeType: 'process' }, max: 2 };
+    const violations = evaluateRules(nodes, [], [rule]);
+    expect(violations).toHaveLength(1);
+  });
+
+  it('passes when count is within range', () => {
+    const rule: LintRule = { id: 'r7', severity: 'error', type: 'node-count', from: { nodeType: 'process' }, min: 2, max: 4 };
+    const violations = evaluateRules(nodes, [], [rule]);
+    expect(violations).toHaveLength(0);
+  });
+});
+
+describe('parseRulesJson', () => {
+  it('returns empty rules for empty/null/undefined input', () => {
+    expect(parseRulesJson('').rules).toHaveLength(0);
+    expect(parseRulesJson(null).rules).toHaveLength(0);
+    expect(parseRulesJson(undefined).rules).toHaveLength(0);
+  });
+
+  it('returns error for invalid JSON', () => {
+    const { error } = parseRulesJson('{bad json}');
+    expect(error).toBeTruthy();
+  });
+
+  it('returns error when rules key is missing', () => {
+    const { error } = parseRulesJson('{"foo": []}');
+    expect(error).toContain('rules');
+  });
+
+  it('parses valid rules JSON', () => {
+    const json = JSON.stringify({
+      rules: [{ id: 'r1', severity: 'error', type: 'cannot-connect' }],
+    });
+    const { rules, error } = parseRulesJson(json);
+    expect(error).toBeNull();
+    expect(rules).toHaveLength(1);
+    expect(rules[0].id).toBe('r1');
+  });
+});
diff --git a/src/services/architectureLint/ruleEngine.ts b/src/services/architectureLint/ruleEngine.ts
new file mode 100644
index 0000000..c3ec9db
--- /dev/null
+++ b/src/services/architectureLint/ruleEngine.ts
@@ -0,0 +1,229 @@
+import type { FlowEdge, FlowNode } from '@/lib/types';
+import type { EdgeMatcher, LintRule, LintViolation, NodeMatcher } from './types';
+
+function matchesNode(node: FlowNode, matcher: NodeMatcher | undefined): boolean {
+    if (!matcher) return true;
+
+    if (matcher.id !== undefined && node.id !== matcher.id) return false;
+
+    const label = typeof node.data.label === 'string' ? node.data.label : '';
+
+    if (matcher.labelEquals !== undefined && label.toLowerCase() !== matcher.labelEquals.toLowerCase()) return false;
+
+    if (matcher.labelContains !== undefined && !label.toLowerCase().includes(matcher.labelContains.toLowerCase())) return false;
+
+    if (matcher.nodeType !== undefined && node.type !== matcher.nodeType) return false;
+
+    return true;
+}
+
+function matchesEdge(edge: FlowEdge, matcher: EdgeMatcher | undefined): boolean {
+    if (!matcher) return true;
+
+    const label = typeof edge.label === 'string' ? edge.label : '';
+
+    if (matcher.labelEquals !== undefined && label.toLowerCase() !== matcher.labelEquals.toLowerCase()) return false;
+
+    if (matcher.labelContains !== undefined && !label.toLowerCase().includes(matcher.labelContains.toLowerCase())) return false;
+
+    if (matcher.edgeType !== undefined && edge.type !== matcher.edgeType) return false;
+
+    return true;
+}
+
+function evaluateCannotConnect(rule: LintRule, nodes: FlowNode[], edges: FlowEdge[]): LintViolation[] {
+    const violations: LintViolation[] = [];
+    const nodeMap = new Map(nodes.map((n) => [n.id, n]));
+
+    for (const edge of edges) {
+        const source = nodeMap.get(edge.source);
+        const target = nodeMap.get(edge.target);
+        if (!source || !target) continue;
+        if (matchesNode(source, rule.from) && matchesNode(target, rule.to) && matchesEdge(edge, rule.edge)) {
+            const fromLabel = source.data.label || source.id;
+            const toLabel = target.data.label || target.id;
+            violations.push({
+                ruleId: rule.id,
+                message: rule.description ?? `"${fromLabel}" cannot connect to "${toLabel}"`,
+                severity: rule.severity,
+                nodeIds: [source.id, target.id],
+                edgeIds: [edge.id],
+            });
+        }
+    }
+
+    return violations;
+}
+
+function evaluateMustConnect(rule: LintRule, nodes: FlowNode[], edges: FlowEdge[]): LintViolation[] {
+    const violations: LintViolation[] = [];
+    const fromNodes = nodes.filter((n) => matchesNode(n, rule.from));
+
+    for (const fromNode of fromNodes) {
+        const hasConnection = edges.some((edge) => {
+            if (edge.source !== fromNode.id) return false;
+            const target = nodes.find((n) => n.id === edge.target);
+            return target ? matchesNode(target, rule.to) : false;
+        });
+
+        if (!hasConnection) {
+            const fromLabel = fromNode.data.label || fromNode.id;
+            violations.push({
+                ruleId: rule.id,
+                message: rule.description ?? `"${fromLabel}" must connect to a matching node`,
+                severity: rule.severity,
+                nodeIds: [fromNode.id],
+                edgeIds: [],
+            });
+        }
+    }
+
+    return violations;
+}
+
+function evaluateForbiddenCycle(rule: LintRule, nodes: FlowNode[], edges: FlowEdge[]): LintViolation[] {
+    const scopedNodes = nodes.filter((n) => matchesNode(n, rule.from));
+    const scopedIds = new Set(scopedNodes.map((n) => n.id));
+
+    const adj = new Map<string, string[]>();
+    const edgeBySourceTarget = new Map<string, string>();
+    for (const node of scopedNodes) adj.set(node.id, []);
+
+    for (const edge of edges) {
+        if (!scopedIds.has(edge.source) || !scopedIds.has(edge.target)) continue;
+        adj.get(edge.source)!.push(edge.target);
+        edgeBySourceTarget.set(`${edge.source}->${edge.target}`, edge.id);
+    }
+
+    const visited = new Set<string>();
+    const inStack = new Set<string>();
+    const parent = new Map<string, string>();
+
+    function dfs(nodeId: string): string[] | null {
+        visited.add(nodeId);
+        inStack.add(nodeId);
+
+        for (const neighbor of adj.get(nodeId) ?? []) {
+            if (!visited.has(neighbor)) {
+                parent.set(neighbor, nodeId);
+                const cycle = dfs(neighbor);
+                if (cycle) return cycle;
+            } else if (inStack.has(neighbor)) {
+                const cyclePath: string[] = [neighbor, nodeId];
+                let cur = nodeId;
+                while (cur !== neighbor && parent.has(cur)) {
+                    cur = parent.get(cur)!;
+                    cyclePath.push(cur);
+                }
+                return cyclePath;
+            }
+        }
+
+        inStack.delete(nodeId);
+        return null;
+    }
+
+    for (const node of scopedNodes) {
+        if (!visited.has(node.id)) {
+            const cycle = dfs(node.id);
+            if (cycle) {
+                const cycleEdgeIds: string[] = [];
+                for (let i = 0; i < cycle.length - 1; i++) {
+                    const eid = edgeBySourceTarget.get(`${cycle[i + 1]}->${cycle[i]}`);
+                    if (eid) cycleEdgeIds.push(eid);
+                }
+                return [{
+                    ruleId: rule.id,
+                    message: rule.description ?? 'Circular dependency detected',
+                    severity: rule.severity,
+                    nodeIds: [...new Set(cycle)],
+                    edgeIds: cycleEdgeIds,
+                }];
+            }
+        }
+    }
+
+    return [];
+}
+
+function evaluateMustHaveNode(rule: LintRule, nodes: FlowNode[]): LintViolation[] {
+    const matching = nodes.filter((n) => matchesNode(n, rule.from));
+    if (matching.length > 0) return [];
+
+    return [{
+        ruleId: rule.id,
+        message: rule.description ?? 'Diagram is missing a required node type',
+        severity: rule.severity,
+        nodeIds: [],
+        edgeIds: [],
+    }];
+}
+
+function evaluateNodeCount(rule: LintRule, nodes: FlowNode[]): LintViolation[] {
+    const matching = nodes.filter((n) => matchesNode(n, rule.from));
+    const count = matching.length;
+    const { min, max } = rule;
+
+    if (min !== undefined && count < min) {
+        return [{
+            ruleId: rule.id,
+            message: rule.description ?? `Expected at least ${min} matching node(s), found ${count}`,
+            severity: rule.severity,
+            nodeIds: matching.map((n) => n.id),
+            edgeIds: [],
+        }];
+    }
+
+    if (max !== undefined && count > max) {
+        return [{
+            ruleId: rule.id,
+            message: rule.description ?? `Expected at most ${max} matching node(s), found ${count}`,
+            severity: rule.severity,
+            nodeIds: matching.map((n) => n.id),
+            edgeIds: [],
+        }];
+    }
+
+    return [];
+}
+
+export function evaluateRules(nodes: FlowNode[], edges: FlowEdge[], rules: LintRule[]): LintViolation[] {
+    const violations: LintViolation[] = [];
+
+    for (const rule of rules) {
+        switch (rule.type) {
+            case 'cannot-connect':
+                violations.push(...evaluateCannotConnect(rule, nodes, edges));
+                break;
+            case 'must-connect':
+                violations.push(...evaluateMustConnect(rule, nodes, edges));
+                break;
+            case 'forbidden-cycle':
+                violations.push(...evaluateForbiddenCycle(rule, nodes, edges));
+                break;
+            case 'must-have-node':
+                violations.push(...evaluateMustHaveNode(rule, nodes));
+                break;
+            case 'node-count':
+                violations.push(...evaluateNodeCount(rule, nodes));
+                break;
+        }
+    }
+
+    return violations;
+}
+
+export function parseRulesJson(json: string | undefined | null): { rules: LintRule[]; error: string | null } {
+    if (!json?.trim()) return { rules: [], error: null };
+
+    try {
+        const parsed: unknown = JSON.parse(json);
+        if (typeof parsed !== 'object' || parsed === null || !Array.isArray((parsed as { rules?: unknown }).rules)) {
+            return { rules: [], error: 'Expected { "rules": [...] }' };
+        }
+        const rules = (parsed as { rules: LintRule[] }).rules;
+        return { rules, error: null };
+    } catch (e) {
+        return { rules: [], error: e instanceof Error ? e.message : 'Invalid JSON' };
+    }
+}
diff --git a/src/services/architectureLint/ruleLibrary.ts b/src/services/architectureLint/ruleLibrary.ts
new file mode 100644
index 0000000..a138f28
--- /dev/null
+++ b/src/services/architectureLint/ruleLibrary.ts
@@ -0,0 +1,214 @@
+import type { LintRule } from './types';
+
+export interface RuleTemplate {
+    id: string;
+    name: string;
+    description: string;
+    rules: LintRule[];
+}
+
+export const RULE_LIBRARY: RuleTemplate[] = [
+    {
+        id: 'clean-architecture',
+        name: 'Clean Architecture',
+        description: 'Enforce dependency rules: UI → Application → Domain ← Infrastructure',
+        rules: [
+            {
+                id: 'no-domain-to-infra',
+                description: 'Domain layer must not depend on Infrastructure',
+                severity: 'error',
+                type: 'cannot-connect',
+                from: { labelContains: 'domain' },
+                to: { labelContains: 'infra' },
+            },
+            {
+                id: 'no-domain-to-ui',
+                description: 'Domain layer must not depend on UI',
+                severity: 'error',
+                type: 'cannot-connect',
+                from: { labelContains: 'domain' },
+                to: { labelContains: 'ui' },
+            },
+            {
+                id: 'no-direct-db-call',
+                description: 'Services must not call databases directly — use a repository',
+                severity: 'error',
+                type: 'cannot-connect',
+                from: { labelContains: 'service' },
+                to: { labelContains: 'database' },
+            },
+        ],
+    },
+    {
+        id: 'hexagonal',
+        name: 'Hexagonal Architecture',
+        description: 'Ports & Adapters: domain core isolated from external systems',
+        rules: [
+            {
+                id: 'no-core-to-adapter',
+                description: 'Core domain must not depend on adapters directly',
+                severity: 'error',
+                type: 'cannot-connect',
+                from: { labelContains: 'core' },
+                to: { labelContains: 'adapter' },
+            },
+            {
+                id: 'no-core-to-infra',
+                description: 'Core domain must not depend on infrastructure',
+                severity: 'error',
+                type: 'cannot-connect',
+                from: { labelContains: 'core' },
+                to: { labelContains: 'infra' },
+            },
+            {
+                id: 'core-must-exist',
+                description: 'Diagram must include a core/domain component',
+                severity: 'warning',
+                type: 'must-have-node',
+                from: { labelContains: 'core' },
+            },
+        ],
+    },
+    {
+        id: 'microservices',
+        name: 'Microservices Governance',
+        description: 'No direct service-to-service DB sharing, no circular dependencies',
+        rules: [
+            {
+                id: 'no-circular-services',
+                description: 'Circular dependencies between services are not allowed',
+                severity: 'error',
+                type: 'forbidden-cycle',
+                from: { labelContains: 'service' },
+            },
+            {
+                id: 'no-shared-db',
+                description: 'Services must not share a database directly',
+                severity: 'warning',
+                type: 'cannot-connect',
+                from: { labelContains: 'service' },
+                to: { labelContains: 'database' },
+            },
+            {
+                id: 'gateway-must-exist',
+                description: 'Microservice architectures should have an API gateway',
+                severity: 'warning',
+                type: 'must-have-node',
+                from: { labelContains: 'gateway' },
+            },
+        ],
+    },
+    {
+        id: 'aws-well-architected',
+        name: 'AWS Well-Architected',
+        description: 'Common AWS architecture best practices',
+        rules: [
+            {
+                id: 'no-direct-internet-to-db',
+                description: 'Databases must not be directly accessible from the internet',
+                severity: 'error',
+                type: 'cannot-connect',
+                from: { labelContains: 'internet' },
+                to: { labelContains: 'rds' },
+            },
+            {
+                id: 'no-direct-internet-to-ec2',
+                description: 'EC2 instances should sit behind a load balancer',
+                severity: 'warning',
+                type: 'cannot-connect',
+                from: { labelContains: 'internet' },
+                to: { labelContains: 'ec2' },
+            },
+            {
+                id: 'alb-must-exist',
+                description: 'Architecture should include a load balancer',
+                severity: 'info',
+                type: 'must-have-node',
+                from: { labelContains: 'load balancer' },
+            },
+        ],
+    },
+    {
+        id: 'frontend-backend',
+        name: 'Frontend / Backend Separation',
+        description: 'Prevent frontend from bypassing the API layer',
+        rules: [
+            {
+                id: 'no-frontend-to-db',
+                description: 'Frontend must not connect directly to a database',
+                severity: 'error',
+                type: 'cannot-connect',
+                from: { labelContains: 'frontend' },
+                to: { labelContains: 'database' },
+            },
+            {
+                id: 'no-frontend-to-service',
+                description: 'Frontend must go through an API, not call services directly',
+                severity: 'warning',
+                type: 'cannot-connect',
+                from: { labelContains: 'frontend' },
+                to: { labelContains: 'service' },
+            },
+            {
+                id: 'api-must-reach-auth',
+                description: 'API must connect to an Auth service',
+                severity: 'warning',
+                type: 'must-connect',
+                from: { labelContains: 'api' },
+                to: { labelContains: 'auth' },
+            },
+        ],
+    },
+    {
+        id: 'c4-model',
+        name: 'C4 Model',
+        description: 'Enforce C4 layering: Person → System → Container → Component',
+        rules: [
+            {
+                id: 'no-component-to-system',
+                description: 'Components must not bypass containers to reach systems directly',
+                severity: 'error',
+                type: 'cannot-connect',
+                from: { labelContains: 'component' },
+                to: { labelContains: 'system' },
+            },
+            {
+                id: 'no-person-to-component',
+                description: 'People should interact with systems or containers, not components directly',
+                severity: 'warning',
+                type: 'cannot-connect',
+                from: { labelContains: 'person' },
+                to: { labelContains: 'component' },
+            },
+            {
+                id: 'system-must-exist',
+                description: 'C4 diagram should have at least one system boundary',
+                severity: 'info',
+                type: 'must-have-node',
+                from: { labelContains: 'system' },
+            },
+        ],
+    },
+    {
+        id: 'network-security',
+        name: 'Network Security',
+        description: 'Basic network security: traffic must flow through firewall/load balancer',
+        rules: [
+            {
+                id: 'no-direct-to-server',
+                description: 'External traffic must go through a load balancer or firewall',
+                severity: 'warning',
+                type: 'cannot-connect',
+                from: { labelContains: 'internet' },
+                to: { labelContains: 'server' },
+            },
+            {
+                id: 'firewall-must-exist',
+                description: 'Network should include a firewall',
+                severity: 'info',
+                type: 'must-have-node',
+                from: { labelContains: 'firewall' },
+            },
+        ],
+    },
+];
diff --git a/src/services/architectureLint/types.ts b/src/services/architectureLint/types.ts
new file mode 100644
index 0000000..4c542e9
--- /dev/null
+++ b/src/services/architectureLint/types.ts
@@ -0,0 +1,54 @@
+export type LintSeverity = 'error' | 'warning' | 'info';
+
+export type LintRuleType = 'cannot-connect' | 'must-connect' | 'forbidden-cycle' | 'must-have-node' | 'node-count';
+
+export interface NodeMatcher {
+    /** Matches node.id exactly */
+    id?: string;
+    /** Matches node.data.label (case-insensitive contains) */
+    labelContains?: string;
+    /** Matches node.data.label (case-insensitive exact) */
+    labelEquals?: string;
+    /** Matches the React Flow node type (e.g. 'process', 'decision', 'start', 'end', 'section', 'group') */
+    nodeType?: string;
+}
+
+export interface EdgeMatcher {
+    /** Matches edge.label (case-insensitive contains) */
+    labelContains?: string;
+    /** Matches edge.label (case-insensitive exact) */
+    labelEquals?: string;
+    /** Matches edge.type (e.g. 'default', 'step', 'smoothstep') */
+    edgeType?: string;
+}
+
+export interface LintRule {
+    id: string;
+    description?: string;
+    severity: LintSeverity;
+    type: LintRuleType;
+    /** For cannot-connect / must-connect / forbidden-cycle: the source node matcher */
+    from?: NodeMatcher;
+    /** For cannot-connect / must-connect: the target node matcher */
+    to?: NodeMatcher;
+    /** For cannot-connect: optional edge matcher to further filter which edges are checked */
+    edge?: EdgeMatcher;
+    /** For node-count: minimum number of matching nodes required (inclusive) */
+    min?: number;
+    /** For node-count: maximum number of matching nodes allowed (inclusive) */
+    max?: number;
+}
+
+export interface LintRuleFile {
+    rules: LintRule[];
+}
+
+export interface LintViolation {
+    ruleId: string;
+    message: string;
+    severity: LintSeverity;
+    /** IDs of nodes implicated in this violation */
+    nodeIds: string[];
+    /** IDs of edges implicated in this violation */
+    edgeIds: string[];
+}
diff --git a/src/services/architectureLint/workspaceRules.ts b/src/services/architectureLint/workspaceRules.ts
new file mode 100644
index 0000000..f0db1e3
--- /dev/null
+++ b/src/services/architectureLint/workspaceRules.ts
@@ -0,0 +1,32 @@
+const WORKSPACE_RULES_KEY = 'openflowkit:workspace-lint-rules';
+export const WORKSPACE_RULES_CHANGED_EVENT = 'openflowkit:workspace-lint-rules-changed';
+
+export function loadWorkspaceRules(): string {
+    try {
+        return localStorage.getItem(WORKSPACE_RULES_KEY) ?? '';
+    } catch {
+        return '';
+    }
+}
+
+function notifyWorkspaceRulesChanged(): void {
+    window.dispatchEvent(new CustomEvent(WORKSPACE_RULES_CHANGED_EVENT));
+}
+
+export function saveWorkspaceRules(json: string): void {
+    try {
+        if (json.trim()) {
+            localStorage.setItem(WORKSPACE_RULES_KEY, json);
+        } else {
+            localStorage.removeItem(WORKSPACE_RULES_KEY);
+        }
+    } catch { /* storage unavailable */ }
+    notifyWorkspaceRulesChanged();
+}
+
+export function clearWorkspaceRules(): void {
+    try {
+        localStorage.removeItem(WORKSPACE_RULES_KEY);
+    } catch { /* storage unavailable */ }
+    notifyWorkspaceRulesChanged();
+}
diff --git a/src/services/collaboration/hookUtils.ts b/src/services/collaboration/hookUtils.ts
index c19ea9c..98c670a 100644
--- a/src/services/collaboration/hookUtils.ts
+++ b/src/services/collaboration/hookUtils.ts
@@ -1,16 +1,26 @@
 import { createId } from '@/lib/id';
+import { LEGACY_COLLABORATION_KEYS } from '@/lib/legacyBranding';
 import type { CollaborationPresenceState } from './types';
 
 const COLLABORATION_CURSOR_PUBLISH_DISTANCE = 6;
-const LOCAL_COLLABORATION_IDENTITY_STORAGE_KEY = 'flowmind:collab-identity-v1';
+const LOCAL_COLLABORATION_IDENTITY_STORAGE_KEY = LEGACY_COLLABORATION_KEYS.identity;
 const LOCAL_COLLABORATION_COLORS = ['#2563eb', '#db2777', '#059669', '#7c3aed', '#ea580c', '#0f766e'];
-const LOCAL_COLLABORATION_ROOM_SECRET_STORAGE_PREFIX = 'flowmind:collab-room-secret:';
+const LOCAL_COLLABORATION_ROOM_SECRET_STORAGE_PREFIX = LEGACY_COLLABORATION_KEYS.roomSecretPrefix;
 
 interface LocalCollaborationIdentity {
     name: string;
     color: string;
 }
 
+function normalizeCollaborationDisplayName(name: string, isLocal: boolean): string {
+    if (isLocal) {
+        return 'You';
+    }
+
+    const isGeneratedGuestName = /^Guest [A-Z0-9]{4}$/u.test(name);
+    return isGeneratedGuestName ? 'Guest' : name;
+}
+
 export function resolveCollaborationCacheState(input: {
     indexedDbEnabled: boolean;
     indexedDbAvailable: boolean;
@@ -80,12 +90,15 @@ export function buildTopNavParticipants(
     return collaborationPresence
         .slice()
         .sort((left, right) => left.clientId.localeCompare(right.clientId))
-        .map((presence) => ({
-            clientId: presence.clientId,
-            name: presence.clientId === localCollaborationClientId ? `${presence.name} (You)` : presence.name,
-            color: presence.color,
-            isLocal: presence.clientId === localCollaborationClientId,
-        }));
+        .map((presence) => {
+            const isLocal = presence.clientId === localCollaborationClientId;
+            return {
+                clientId: presence.clientId,
+                name: normalizeCollaborationDisplayName(presence.name, isLocal),
+                color: presence.color,
+                isLocal,
+            };
+        });
 }
 
 export function resolveLocalCollaborationClientId(collaborationEnabled: boolean, roomId: string): string | null {
@@ -93,7 +106,7 @@ export function resolveLocalCollaborationClientId(collaborationEnabled: boolean,
         return null;
     }
 
-    const storageKey = `flowmind:collab-client-id:${roomId}`;
+    const storageKey = `${LEGACY_COLLABORATION_KEYS.clientIdPrefix}${roomId}`;
     const existingClientId = window.sessionStorage.getItem(storageKey);
     if (existingClientId) {
         return existingClientId;
@@ -136,7 +149,7 @@ export function resolveLocalCollaborationIdentity(clientId: string | null): Loca
     }
 
     const nextIdentity = {
-        name: `Guest ${clientId.slice(-4).toUpperCase()}`,
+        name: 'Guest',
         color: LOCAL_COLLABORATION_COLORS[hashString(clientId) % LOCAL_COLLABORATION_COLORS.length],
     };
     window.localStorage.setItem(LOCAL_COLLABORATION_IDENTITY_STORAGE_KEY, JSON.stringify(nextIdentity));
diff --git a/src/services/collaboration/roomConfig.ts b/src/services/collaboration/roomConfig.ts
index 0edf7a3..a33ac2c 100644
--- a/src/services/collaboration/roomConfig.ts
+++ b/src/services/collaboration/roomConfig.ts
@@ -1,6 +1,7 @@
 import type { CollaborationRoomConfig } from './types';
 
-const DEFAULT_SIGNALING_SERVERS = ['wss://signaling.yjs.dev'];
+const SIGNALING_SERVER = import.meta.env.VITE_SIGNALING_SERVER as string | undefined;
+const DEFAULT_SIGNALING_SERVERS = [SIGNALING_SERVER || 'wss://signaling.yjs.dev'];
 
 export function createCollaborationRoomConfig(roomId: string, clientId: string, password: string): CollaborationRoomConfig {
   return {
diff --git a/src/services/collaboration/runtimeController.ts b/src/services/collaboration/runtimeController.ts
index 710974a..a69f494 100644
--- a/src/services/collaboration/runtimeController.ts
+++ b/src/services/collaboration/runtimeController.ts
@@ -33,6 +33,7 @@ export interface CollaborationRuntimeController {
   getPresenceState: () => CollaborationPresenceState[];
   submitLocalOperation: (input: LocalCollaborationOperationInput) => CollaborationOperationEnvelope | null;
   updateLocalPresenceCursor: (x: number, y: number) => void;
+  updateLocalPresenceSelection: (selectedNodeIds: string[]) => void;
 }
 
 export function createCollaborationRuntimeController(
@@ -150,5 +151,17 @@ export function createCollaborationRuntimeController(
       notifyPresenceChange();
       transport.publishPresence(localPresence);
     },
+    updateLocalPresenceSelection: (selectedNodeIds) => {
+      if (!running) {
+        return;
+      }
+      localPresence = {
+        ...localPresence,
+        selectedNodeIds,
+      };
+      presenceState = mergePresenceSnapshot(presenceState, [localPresence]);
+      notifyPresenceChange();
+      transport.publishPresence(localPresence);
+    },
   };
 }
diff --git a/src/services/collaboration/runtimeHookUtils.ts b/src/services/collaboration/runtimeHookUtils.ts
index bb46943..2cecc40 100644
--- a/src/services/collaboration/runtimeHookUtils.ts
+++ b/src/services/collaboration/runtimeHookUtils.ts
@@ -1,5 +1,4 @@
 import type { FlowEdge, FlowNode } from '@/lib/types';
-import { ROLLOUT_FLAGS } from '@/config/rolloutFlags';
 import { createCollaborationSessionBootstrap } from './session';
 import { createCollaborationRuntimeController, type CollaborationRuntimeController } from './runtimeController';
 import { computeCollaborationOperationsFromCanvasChange, type CollaborationCanvasSnapshot } from './canvasDiff';
@@ -90,7 +89,7 @@ export function seedCollaborationDocumentIfEmpty({
 }: SeedCollaborationDocumentIfEmptyParams): void {
     const documentState = runtimeController.getDocumentState();
     setCollaborationCacheState(resolveCollaborationCacheState({
-        indexedDbEnabled: ROLLOUT_FLAGS.collaborationIndexedDbV1,
+        indexedDbEnabled: true,
         indexedDbAvailable,
         hasPersistedDocumentContent: documentState.nodes.length > 0 || documentState.edges.length > 0,
     }));
@@ -133,7 +132,7 @@ export function resetCollaborationRuntimeState({
 }: ResetCollaborationRuntimeStateParams): void {
     setCollaborationPresence([]);
     setCollaborationCacheState(resolveInitialCollaborationCacheState({
-        indexedDbEnabled: ROLLOUT_FLAGS.collaborationIndexedDbV1,
+        indexedDbEnabled: true,
         indexedDbAvailable,
     }));
     previousCollaborationCanvasRef.current = null;
diff --git a/src/services/collaboration/session.test.ts b/src/services/collaboration/session.test.ts
index 3d7b971..3806afa 100644
--- a/src/services/collaboration/session.test.ts
+++ b/src/services/collaboration/session.test.ts
@@ -32,6 +32,7 @@ describe('collaboration session bootstrap', () => {
       name: 'Varun',
       color: '#6366f1',
       cursor: { x: 0, y: 0 },
+      selectedNodeIds: [],
     });
   });
 
diff --git a/src/services/collaboration/session.ts b/src/services/collaboration/session.ts
index 3284653..893a9ef 100644
--- a/src/services/collaboration/session.ts
+++ b/src/services/collaboration/session.ts
@@ -1,4 +1,3 @@
-import { ROLLOUT_FLAGS } from '@/config/rolloutFlags';
 import { isCollaborationPresenceState } from './contracts';
 import { createCollaborationRoomConfig } from './roomConfig';
 import type { CollaborationPresenceState, CollaborationRoomConfig } from './types';
@@ -27,6 +26,7 @@ export function createLocalPresence(
     name,
     color,
     cursor: { x: 0, y: 0 },
+    selectedNodeIds: [],
   };
 }
 
@@ -34,7 +34,7 @@ export function createCollaborationSessionBootstrap(
   params: CollaborationSessionParams
 ): CollaborationSessionBootstrap {
   return {
-    enabled: ROLLOUT_FLAGS.collaborationV1,
+    enabled: true,
     room: createCollaborationRoomConfig(params.roomId, params.clientId, params.roomPassword),
     localPresence: createLocalPresence(params.clientId, params.name, params.color),
   };
diff --git a/src/services/collaboration/types.ts b/src/services/collaboration/types.ts
index b59fa6b..5b0675f 100644
--- a/src/services/collaboration/types.ts
+++ b/src/services/collaboration/types.ts
@@ -37,6 +37,7 @@ export interface CollaborationPresenceState {
     x: number;
     y: number;
   };
+  selectedNodeIds?: string[];
 }
 
 export interface CollaborationParticipantState {
diff --git a/src/services/collaboration/yjsPeerTransport.ts b/src/services/collaboration/yjsPeerTransport.ts
index f7115dc..84bbe40 100644
--- a/src/services/collaboration/yjsPeerTransport.ts
+++ b/src/services/collaboration/yjsPeerTransport.ts
@@ -1,4 +1,4 @@
-import { ROLLOUT_FLAGS } from '@/config/rolloutFlags';
+import { LEGACY_COLLABORATION_KEYS } from '@/lib/legacyBranding';
 import { isCollaborationOperationEnvelope } from './contracts';
 import { mapPresenceFromAwarenessState } from './session';
 import type { CollaborationOperationEnvelope, CollaborationPresenceState, CollaborationRoomConfig } from './types';
@@ -68,6 +68,26 @@ interface YArrayChangeEvent {
   };
 }
 
+function isStatusEvent(value: unknown): value is { connected?: unknown; status?: unknown } {
+  return typeof value === 'object' && value !== null;
+}
+
+function isSyncedEvent(value: unknown): value is { synced?: unknown } {
+  return typeof value === 'object' && value !== null;
+}
+
+function isPeersEvent(value: unknown): value is { webrtcPeers?: unknown[]; bcPeers?: unknown[] } {
+  return typeof value === 'object' && value !== null;
+}
+
+function readAwarenessPresence(value: unknown): CollaborationPresenceState | null {
+  if (typeof value !== 'object' || value === null) {
+    return null;
+  }
+
+  return mapPresenceFromAwarenessState((value as { presence?: unknown }).presence);
+}
+
 function createDefaultProvider(
   roomId: string,
   doc: Y.Doc,
@@ -92,8 +112,8 @@ export function createYjsPeerCollaborationTransport(
   const createProvider = options.createProvider ?? createDefaultProvider;
   const createDoc = options.createDoc ?? (() => new Y.Doc());
   const createPersistence = options.createPersistence ?? (
-    ROLLOUT_FLAGS.collaborationIndexedDbV1 && typeof indexedDB !== 'undefined'
-      ? ((roomId: string, doc: Y.Doc) => new IndexeddbPersistence(`flowmind-collab:${roomId}`, doc))
+    typeof indexedDB !== 'undefined'
+      ? ((roomId: string, doc: Y.Doc) => new IndexeddbPersistence(`${LEGACY_COLLABORATION_KEYS.indexedDbPrefix}${roomId}`, doc))
       : null
   );
 
@@ -245,12 +265,18 @@ export function createYjsPeerCollaborationTransport(
           .then(() => {
             emitOperationArraySnapshot(config, onEvent);
           })
-          .catch(() => undefined)
+          .catch((err: unknown) => {
+            if (import.meta.env.DEV) {
+              console.warn('[yjsPeerTransport] IndexedDB persistence sync error (non-fatal):', err);
+            }
+          })
         : Promise.resolve();
 
       statusListener = (event) => {
-        const candidate = event as { connected?: unknown; status?: unknown };
-        const connected = candidate.connected === true || candidate.status === 'connected';
+        if (!isStatusEvent(event)) {
+          return;
+        }
+        const connected = event.connected === true || event.status === 'connected';
         setStatusPatch({
           connected,
         });
@@ -262,20 +288,21 @@ export function createYjsPeerCollaborationTransport(
           });
           return;
         }
-        const candidate = event as { synced?: unknown };
-        if (typeof candidate.synced !== 'boolean') {
+        if (!isSyncedEvent(event) || typeof event.synced !== 'boolean') {
           return;
         }
         setStatusPatch({
-          synced: candidate.synced,
+          synced: event.synced,
         });
       };
       peersListener = (event) => {
-        const candidate = event as { webrtcPeers?: unknown[]; bcPeers?: unknown[] };
-        const webrtcPeerCount = Array.isArray(candidate.webrtcPeers) ? candidate.webrtcPeers.length : 0;
-        const broadcastChannelPeerCount = Array.isArray(candidate.bcPeers) ? candidate.bcPeers.length : 0;
+        if (!isPeersEvent(event)) {
+          return;
+        }
+        const webrtcPeerCount = Array.isArray(event.webrtcPeers) ? event.webrtcPeers.length : 0;
+        const broadcastChannelPeerCount = Array.isArray(event.bcPeers) ? event.bcPeers.length : 0;
         const peerCount = webrtcPeerCount + broadcastChannelPeerCount;
-        if (peerCount === 0 && !Array.isArray(candidate.webrtcPeers) && !Array.isArray(candidate.bcPeers)) {
+        if (peerCount === 0 && !Array.isArray(event.webrtcPeers) && !Array.isArray(event.bcPeers)) {
           return;
         }
         setStatusPatch({
@@ -301,11 +328,7 @@ export function createYjsPeerCollaborationTransport(
         }
         const snapshot: CollaborationPresenceState[] = [];
         for (const [peerId, awarenessState] of states.entries()) {
-          if (typeof awarenessState !== 'object' || awarenessState === null) {
-            continue;
-          }
-          const rawPresence = (awarenessState as { presence?: unknown }).presence;
-          const presence = mapPresenceFromAwarenessState(rawPresence);
+          const presence = readAwarenessPresence(awarenessState);
           if (!presence || presence.clientId === config.clientId) {
             continue;
           }
@@ -314,12 +337,7 @@ export function createYjsPeerCollaborationTransport(
         }
         let originClientId = config.clientId;
         for (const peerId of [...event.added, ...event.updated]) {
-          const awarenessState = states.get(peerId);
-          if (typeof awarenessState !== 'object' || awarenessState === null) {
-            continue;
-          }
-          const rawPresence = (awarenessState as { presence?: unknown }).presence;
-          const presence = mapPresenceFromAwarenessState(rawPresence);
+          const presence = readAwarenessPresence(states.get(peerId));
           if (!presence || presence.clientId === config.clientId) {
             continue;
           }
diff --git a/src/services/diagramDiff/diffEngine.ts b/src/services/diagramDiff/diffEngine.ts
new file mode 100644
index 0000000..2ec38cb
--- /dev/null
+++ b/src/services/diagramDiff/diffEngine.ts
@@ -0,0 +1,107 @@
+import type { FlowEdge, FlowNode } from '@/lib/types';
+
+export type NodeDiffStatus = 'added' | 'removed' | 'changed' | 'unchanged';
+export type EdgeDiffStatus = 'added' | 'removed' | 'unchanged';
+
+export interface NodeDiff {
+    status: NodeDiffStatus;
+    /** The node in the current diagram (undefined if removed) */
+    current?: FlowNode;
+    /** The node in the baseline snapshot (undefined if added) */
+    baseline?: FlowNode;
+}
+
+export interface EdgeDiff {
+    status: EdgeDiffStatus;
+    current?: FlowEdge;
+    baseline?: FlowEdge;
+}
+
+export interface DiagramDiff {
+    nodes: Map<string, NodeDiff>;
+    edges: Map<string, EdgeDiff>;
+    addedNodeIds: string[];
+    removedNodes: FlowNode[];
+    changedNodeIds: string[];
+    addedEdgeIds: string[];
+    removedEdges: FlowEdge[];
+    totalChanges: number;
+}
+
+/** Returns true if any meaningful node data changed (not position — position changes are separate). */
+function nodeDataChanged(a: FlowNode, b: FlowNode): boolean {
+    // Label change
+    if (a.data.label !== b.data.label) return true;
+    // Node type change
+    if (a.type !== b.type) return true;
+    // Sub-label change
+    if (a.data.subLabel !== b.data.subLabel) return true;
+    // Color
+    if (a.data.color !== b.data.color) return true;
+    return false;
+}
+
+/** Returns true if the node moved significantly (> 20px in any direction). */
+function nodeMoved(a: FlowNode, b: FlowNode): boolean {
+    const dx = (a.position?.x ?? 0) - (b.position?.x ?? 0);
+    const dy = (a.position?.y ?? 0) - (b.position?.y ?? 0);
+    return Math.abs(dx) > 20 || Math.abs(dy) > 20;
+}
+
+export function computeDiagramDiff(current: { nodes: FlowNode[]; edges: FlowEdge[] }, baseline: { nodes: FlowNode[]; edges: FlowEdge[] }): DiagramDiff {
+    const currentNodeMap = new Map(current.nodes.map((n) => [n.id, n]));
+    const baselineNodeMap = new Map(baseline.nodes.map((n) => [n.id, n]));
+    const currentEdgeMap = new Map(current.edges.map((e) => [e.id, e]));
+    const baselineEdgeMap = new Map(baseline.edges.map((e) => [e.id, e]));
+
+    const nodeDiffs = new Map<string, NodeDiff>();
+    const addedNodeIds: string[] = [];
+    const removedNodes: FlowNode[] = [];
+    const changedNodeIds: string[] = [];
+
+    // Nodes in current: added or changed/unchanged
+    for (const node of current.nodes) {
+        const base = baselineNodeMap.get(node.id);
+        if (!base) {
+            nodeDiffs.set(node.id, { status: 'added', current: node });
+            addedNodeIds.push(node.id);
+        } else if (nodeDataChanged(node, base) || nodeMoved(node, base)) {
+            nodeDiffs.set(node.id, { status: 'changed', current: node, baseline: base });
+            changedNodeIds.push(node.id);
+        } else {
+            nodeDiffs.set(node.id, { status: 'unchanged', current: node, baseline: base });
+        }
+    }
+
+    // Nodes only in baseline: removed
+    for (const node of baseline.nodes) {
+        if (!currentNodeMap.has(node.id)) {
+            nodeDiffs.set(node.id, { status: 'removed', baseline: node });
+            removedNodes.push(node);
+        }
+    }
+
+    const edgeDiffs = new Map<string, EdgeDiff>();
+    const addedEdgeIds: string[] = [];
+    const removedEdges: FlowEdge[] = [];
+
+    for (const edge of current.edges) {
+        if (!baselineEdgeMap.has(edge.id)) {
+            edgeDiffs.set(edge.id, { status: 'added', current: edge });
+            addedEdgeIds.push(edge.id);
+        } else {
+            edgeDiffs.set(edge.id, { status: 'unchanged', current: edge });
+        }
+    }
+
+    for (const edge of baseline.edges) {
+        if (!currentEdgeMap.has(edge.id)) {
+            edgeDiffs.set(edge.id, { status: 'removed', baseline: edge });
+            removedEdges.push(edge);
+        }
+    }
+
+    const totalChanges = addedNodeIds.length + removedNodes.length + changedNodeIds.length + addedEdgeIds.length + removedEdges.length;
+
+    return { nodes: nodeDiffs, edges: edgeDiffs, addedNodeIds, removedNodes, changedNodeIds, addedEdgeIds, removedEdges, totalChanges };
+}
diff --git a/src/services/diagramDocument.test.ts b/src/services/diagramDocument.test.ts
index 1e5ed5a..b658334 100644
--- a/src/services/diagramDocument.test.ts
+++ b/src/services/diagramDocument.test.ts
@@ -26,7 +26,7 @@ describe('diagramDocument', () => {
   it('creates export document with version metadata', () => {
     const doc = createDiagramDocument([createNode('n1')], [createEdge('e1', 'n1', 'n1')], DEFAULT_DIAGRAM_TYPE, { extendedDocumentModel: false });
     expect(doc.version).toBe(DIAGRAM_DOCUMENT_VERSION);
-    expect(doc.name).toBe('FlowMind Diagram');
+    expect(doc.name).toBe('OpenFlowKit Diagram');
     expect(doc.diagramType).toBe(DEFAULT_DIAGRAM_TYPE);
     expect(typeof doc.createdAt).toBe('string');
   });
diff --git a/src/services/diagramDocument.ts b/src/services/diagramDocument.ts
index 89f853e..f147edc 100644
--- a/src/services/diagramDocument.ts
+++ b/src/services/diagramDocument.ts
@@ -5,7 +5,7 @@ import { sanitizePlaybackState } from './playback/model';
 export const LEGACY_DIAGRAM_DOCUMENT_VERSION = '1.0';
 export const EXTENDED_DIAGRAM_DOCUMENT_VERSION = '1.1';
 export const DIAGRAM_DOCUMENT_VERSION = LEGACY_DIAGRAM_DOCUMENT_VERSION;
-const DIAGRAM_DOCUMENT_NAME = 'FlowMind Diagram';
+const DIAGRAM_DOCUMENT_NAME = 'OpenFlowKit Diagram';
 export const DEFAULT_DIAGRAM_TYPE: DiagramType = 'flowchart';
 
 export interface DiagramDocumentV1 {
diff --git a/src/services/domainLibrary.test.ts b/src/services/domainLibrary.test.ts
index 6740e76..3027b78 100644
--- a/src/services/domainLibrary.test.ts
+++ b/src/services/domainLibrary.test.ts
@@ -12,9 +12,10 @@ describe('domainLibrary', () => {
         expect(categories.has('cncf')).toBe(true);
         expect(categories.has('network')).toBe(true);
         expect(categories.has('security')).toBe(true);
+        expect(categories.has('c4')).toBe(true);
     });
 
-    it('creates process nodes from generic library items', () => {
+    it('creates architecture nodes for network/c4 library items', () => {
         const item = DOMAIN_LIBRARY_ITEMS.find((entry) => entry.id === 'sec-firewall');
         expect(item).toBeDefined();
         const node = createDomainLibraryNode(
@@ -23,10 +24,26 @@ describe('domainLibrary', () => {
             { x: 120, y: 200 },
             'default'
         );
-        expect(node.type).toBe('process');
+        // sec-firewall maps to an architecture node with archResourceType 'firewall'
+        expect(node.type).toBe('architecture');
         expect(node.data.label).toBe('Firewall');
         expect(node.data.color).toBe('red');
         expect(node.data.layerId).toBe('default');
+        expect((node.data as { archResourceType?: string }).archResourceType).toBe('firewall');
+    });
+
+    it('creates process nodes from generic items without nodeType', () => {
+        const item = DOMAIN_LIBRARY_ITEMS.find((entry) => entry.id === 'sec-waf');
+        expect(item).toBeDefined();
+        const node = createDomainLibraryNode(
+            item!,
+            'lib-1',
+            { x: 120, y: 200 },
+            'default'
+        );
+        expect(node.type).toBe('process');
+        expect(node.data.label).toBe('WAF');
+        expect(node.data.layerId).toBe('default');
     });
 
     it('creates icon-first custom nodes for provider svg assets', () => {
diff --git a/src/services/domainLibrary.ts b/src/services/domainLibrary.ts
index 9fd32d6..c20a925 100644
--- a/src/services/domainLibrary.ts
+++ b/src/services/domainLibrary.ts
@@ -1,7 +1,7 @@
 import type { Node } from '@/lib/reactflowCompat';
 import type { NodeData } from '@/lib/types';
 
-export type DomainLibraryCategory = 'aws' | 'azure' | 'gcp' | 'cncf' | 'network' | 'security' | 'icons';
+export type DomainLibraryCategory = 'aws' | 'azure' | 'gcp' | 'cncf' | 'network' | 'security' | 'c4' | 'icons';
 
 export interface DomainLibraryItem {
     id: string;
@@ -12,6 +12,7 @@ export interface DomainLibraryItem {
     color: string;
     shape?: NodeData['shape'];
     nodeType?: 'process' | 'architecture' | 'custom';
+    archResourceType?: string;
     previewUrl?: string;
     providerShapeCategory?: string;
     archIconPackId?: string;
@@ -41,19 +42,26 @@ export const DOMAIN_LIBRARY_ITEMS: DomainLibraryItem[] = [
     { id: 'k8s-ingress', category: 'cncf', label: 'Ingress', description: 'HTTP edge routing', icon: 'Route', color: 'cyan' },
     { id: 'k8s-configmap', category: 'cncf', label: 'ConfigMap', description: 'Runtime configuration', icon: 'SlidersHorizontal', color: 'cyan' },
 
-    { id: 'net-lb', category: 'network', label: 'Load Balancer', description: 'Traffic distribution', icon: 'Network', color: 'violet' },
-    { id: 'net-router', category: 'network', label: 'Router', description: 'Layer 3 routing', icon: 'Route', color: 'violet' },
-    { id: 'net-switch', category: 'network', label: 'Switch', description: 'Layer 2 switching', icon: 'GitFork', color: 'violet' },
-    { id: 'net-vpn', category: 'network', label: 'VPN Gateway', description: 'Private tunnel gateway', icon: 'Cable', color: 'violet' },
-    { id: 'net-cdn', category: 'network', label: 'CDN Edge', description: 'Content delivery edge', icon: 'Globe', color: 'violet' },
-    { id: 'net-dns', category: 'network', label: 'DNS Service', description: 'Domain name resolution', icon: 'Network', color: 'violet' },
+    { id: 'net-lb', category: 'network', label: 'Load Balancer', description: 'Traffic distribution', icon: 'Scale', color: 'orange', nodeType: 'architecture', archResourceType: 'load_balancer' },
+    { id: 'net-router', category: 'network', label: 'Router', description: 'Layer 3 routing', icon: 'Route', color: 'emerald', nodeType: 'architecture', archResourceType: 'router' },
+    { id: 'net-switch', category: 'network', label: 'Switch', description: 'Layer 2 switching', icon: 'Network', color: 'sky', nodeType: 'architecture', archResourceType: 'switch' },
+    { id: 'net-cdn', category: 'network', label: 'CDN Edge', description: 'Content delivery edge', icon: 'Globe', color: 'purple', nodeType: 'architecture', archResourceType: 'cdn' },
+    { id: 'net-dns', category: 'network', label: 'DNS Service', description: 'Domain name resolution', icon: 'Globe2', color: 'lime', nodeType: 'architecture', archResourceType: 'dns' },
+    { id: 'net-vpn', category: 'network', label: 'VPN Gateway', description: 'Private tunnel gateway', icon: 'Cable', color: 'violet', nodeType: 'architecture', archResourceType: 'service' },
 
-    { id: 'sec-firewall', category: 'security', label: 'Firewall', description: 'Ingress/egress filtering', icon: 'Shield', color: 'red' },
+    { id: 'sec-firewall', category: 'security', label: 'Firewall', description: 'Ingress/egress filtering', icon: 'Shield', color: 'red', nodeType: 'architecture', archResourceType: 'firewall' },
     { id: 'sec-waf', category: 'security', label: 'WAF', description: 'Web application firewall', icon: 'ShieldCheck', color: 'red' },
     { id: 'sec-iam', category: 'security', label: 'IAM Service', description: 'Identity and access control', icon: 'Users', color: 'red' },
     { id: 'sec-kms', category: 'security', label: 'KMS', description: 'Encryption key management', icon: 'KeyRound', color: 'red' },
     { id: 'sec-secrets', category: 'security', label: 'Secrets Manager', description: 'Secret storage and rotation', icon: 'LockKeyhole', color: 'red' },
     { id: 'sec-siem', category: 'security', label: 'SIEM', description: 'Security event analytics', icon: 'Radar', color: 'red' },
+
+    { id: 'c4-person', category: 'c4', label: 'Person', description: 'A user or role that interacts with the system', icon: 'User', color: 'blue', nodeType: 'architecture', archResourceType: 'person' },
+    { id: 'c4-system', category: 'c4', label: 'System', description: 'Top-level software system boundary', icon: 'Box', color: 'slate', nodeType: 'architecture', archResourceType: 'system' },
+    { id: 'c4-container', category: 'c4', label: 'Container', description: 'Deployable unit (app, microservice, DB)', icon: 'Package', color: 'indigo', nodeType: 'architecture', archResourceType: 'container' },
+    { id: 'c4-component', category: 'c4', label: 'Component', description: 'Logical grouping inside a container', icon: 'Puzzle', color: 'teal', nodeType: 'architecture', archResourceType: 'component' },
+    { id: 'c4-database', category: 'c4', label: 'Database', description: 'Persistent data store container', icon: 'Database', color: 'cyan', nodeType: 'architecture', archResourceType: 'database_container' },
+    { id: 'c4-group', category: 'c4', label: 'Boundary', description: 'System or enterprise boundary group', icon: 'Layers', color: 'violet', nodeType: 'architecture', archResourceType: 'group' },
 ];
 
 export function createDomainLibraryNode(
@@ -85,7 +93,7 @@ export function createDomainLibraryNode(
         };
     }
 
-    if (item.nodeType === 'architecture' && item.archIconPackId && item.archIconShapeId) {
+    if (item.nodeType === 'architecture') {
         return {
             id,
             type: 'architecture',
@@ -97,10 +105,10 @@ export function createDomainLibraryNode(
                 shape: item.shape || 'rectangle',
                 icon: item.icon,
                 archProvider: item.category,
-                archResourceType: 'service',
+                archResourceType: item.archResourceType || 'service',
                 archEnvironment: 'default',
-                archIconPackId: item.archIconPackId,
-                archIconShapeId: item.archIconShapeId,
+                ...(item.archIconPackId ? { archIconPackId: item.archIconPackId } : {}),
+                ...(item.archIconShapeId ? { archIconShapeId: item.archIconShapeId } : {}),
                 layerId,
             },
         };
diff --git a/src/services/elk-layout/options.ts b/src/services/elk-layout/options.ts
index e852f4a..861b98c 100644
--- a/src/services/elk-layout/options.ts
+++ b/src/services/elk-layout/options.ts
@@ -62,21 +62,25 @@ function getAlgorithmOptions(algorithm: LayoutAlgorithm, layerSpacing: number):
             options['elk.algorithm'] = `org.eclipse.elk.${algorithm}`;
     }
     if (algorithm === 'layered') {
+        const edgeNodeSpacing = String(Math.round(layerSpacing * 0.33));
         Object.assign(options, {
             'elk.layered.crossingMinimization.strategy': 'LAYER_SWEEP',
-            'elk.layered.crossingMinimization.thoroughness': '30',
+            'elk.layered.crossingMinimization.thoroughness': '64',
             'elk.layered.nodePlacement.strategy': 'NETWORK_SIMPLEX',
             'elk.layered.nodePlacement.favorStraightEdges': 'true',
             'elk.layered.mergeEdges': 'true',
             'elk.layered.unnecessaryBendpoints': 'true',
             'elk.edgeRouting': 'ORTHOGONAL',
-            'elk.portConstraints': 'FIXED_SIDE', // Lock to centers to force centralized trunk grouping
-            'elk.layered.spacing.edgeNodeBetweenLayers': '50',
-            'elk.layered.spacing.edgeEdgeBetweenLayers': '30', // Increased from 20 for cleaner multi-edge separation
-            'elk.spacing.edgeEdge': '12',                      // Minimum gap between parallel edges
+            'elk.portConstraints': 'FIXED_SIDE',
+            'elk.layered.spacing.edgeNodeBetweenLayers': edgeNodeSpacing,
+            'elk.layered.spacing.edgeEdgeBetweenLayers': '30',
+            'elk.spacing.edgeEdge': '12',
             'elk.separateConnectedComponents': 'true',
             'elk.layered.considerModelOrder.strategy': 'NODES_AND_EDGES',
             'elk.layered.compaction.postCompaction.strategy': 'EDGE_LENGTH',
+            'elk.layered.highDegreeNode.treatment': 'true',
+            'elk.layered.highDegreeNode.threshold': '4',
+            'elk.layered.highDegreeNode.treeHeight': '2',
         });
     } else if (algorithm === 'mrtree') {
         Object.assign(options, {
diff --git a/src/services/elkLayout.ts b/src/services/elkLayout.ts
index fbde44c..9bf7e64 100644
--- a/src/services/elkLayout.ts
+++ b/src/services/elkLayout.ts
@@ -1,5 +1,6 @@
 import type { ElkExtendedEdge, ElkNode } from 'elkjs/lib/elk.bundled.js';
 import { NODE_HEIGHT, NODE_WIDTH } from '@/constants';
+import { createLogger } from '@/lib/logger';
 import type { FlowEdge, FlowNode } from '@/lib/types';
 import { handleIdToSide } from '@/lib/nodeHandles';
 import { assignSmartHandlesWithOptions } from './smartEdgeRouting';
@@ -11,8 +12,13 @@ interface ElkLayoutEngine {
     layout: (graph: ElkNode) => Promise<ElkNode>;
 }
 
+interface ElkModuleLike {
+    default?: new () => unknown;
+}
+
 let elkInstancePromise: Promise<ElkLayoutEngine> | null = null;
 const ELK_BOUNDARY_FANOUT_MIN_GROUP_SIZE = 2;
+const logger = createLogger({ scope: 'elkLayout' });
 
 /** Reset the cached ELK instance — useful in tests or when the instance may have become stale. */
 export function resetElkInstance(): void {
@@ -49,7 +55,17 @@ function getClampedBoundaryFanoutSpacing(
 async function getElkInstance(): Promise<ElkLayoutEngine> {
     if (!elkInstancePromise) {
         elkInstancePromise = import('elkjs/lib/elk.bundled.js').then((module) => {
-            return new module.default() as unknown as ElkLayoutEngine;
+            const elkModule = module as ElkModuleLike;
+            if (typeof elkModule.default !== 'function') {
+                throw new Error('ELK module did not expose a constructor.');
+            }
+
+            const candidate = new elkModule.default();
+            if (!candidate || typeof (candidate as ElkLayoutEngine).layout !== 'function') {
+                throw new Error('ELK instance does not implement layout().');
+            }
+
+            return candidate as ElkLayoutEngine;
         });
     }
     return elkInstancePromise;
@@ -350,6 +366,27 @@ export function resolveLayoutedEdgeHandles(nodes: FlowNode[], edges: FlowEdge[])
     });
 }
 
+/**
+ * Re-routes all edges using smart handle assignment, clearing any stale ELK waypoints.
+ * Use this after manual node moves to clean up all edges without re-running the full layout.
+ */
+export function rerouteEdges(nodes: FlowNode[], edges: FlowEdge[]): FlowEdge[] {
+    return resolveLayoutedEdgeHandles(nodes, edges).map((edge) => ({
+        ...edge,
+        data: {
+            ...edge.data,
+            routingMode: 'auto' as const,
+            elkPoints: undefined,
+        },
+    }));
+}
+
+function isSparseDiagram(nodeCount: number, edgeCount: number): boolean {
+    if (nodeCount <= 20) return true;
+    const avgDegree = nodeCount > 0 ? (edgeCount * 2) / nodeCount : 0;
+    return avgDegree <= 2.5;
+}
+
 export async function getElkLayout(
     nodes: FlowNode[],
     edges: FlowEdge[],
@@ -418,14 +455,23 @@ export async function getElkLayout(
             };
         });
         const reroutedEdges = resolveLayoutedEdgeHandles(laidOutNodes, sortedEdges);
-        const normalizedElkPointsMap = normalizeElkEdgeBoundaryFanout(
-            reroutedEdges,
-            laidOutNodes,
-            positionMap,
-            edgePointsMap
-        );
+        const sparse = isSparseDiagram(nodes.length, sortedEdges.length);
+
+        const normalizedElkPointsMap = sparse
+            ? new Map<string, { x: number; y: number }[]>()
+            : normalizeElkEdgeBoundaryFanout(reroutedEdges, laidOutNodes, positionMap, edgePointsMap);
 
         const laidOutEdges = reroutedEdges.map((edge) => {
+            if (sparse) {
+                return {
+                    ...edge,
+                    data: {
+                        ...edge.data,
+                        routingMode: edge.data?.routingMode === 'manual' ? ('manual' as const) : ('auto' as const),
+                        elkPoints: undefined,
+                    },
+                };
+            }
             const points = normalizedElkPointsMap.get(edge.id) ?? edgePointsMap.get(edge.id);
             if (points) {
                 return {
@@ -442,7 +488,7 @@ export async function getElkLayout(
 
         return { nodes: laidOutNodes, edges: laidOutEdges };
     } catch (err) {
-        console.error('ELK Layout Error:', err);
+        logger.error('ELK layout error.', { error: err });
         return { nodes, edges };
     }
 }
diff --git a/src/services/export/cinematicBuildPlan.test.ts b/src/services/export/cinematicBuildPlan.test.ts
new file mode 100644
index 0000000..9b4afef
--- /dev/null
+++ b/src/services/export/cinematicBuildPlan.test.ts
@@ -0,0 +1,64 @@
+import { describe, expect, it } from 'vitest';
+import type { FlowEdge, FlowNode } from '@/lib/types';
+import { buildCinematicBuildPlan } from './cinematicBuildPlan';
+
+function createNode(id: string, x: number, y: number): FlowNode {
+  return {
+    id,
+    type: 'process',
+    position: { x, y },
+    data: { label: id },
+  } as FlowNode;
+}
+
+function createEdge(id: string, source: string, target: string): FlowEdge {
+  return {
+    id,
+    source,
+    target,
+  } as FlowEdge;
+}
+
+describe('buildCinematicBuildPlan', () => {
+  it('builds the expected linear sequence for a simple chain', () => {
+    const nodes = [
+      createNode('a', 0, 0),
+      createNode('b', 200, 0),
+      createNode('c', 400, 0),
+      createNode('d', 600, 0),
+    ];
+    const edges = [
+      createEdge('ab', 'a', 'b'),
+      createEdge('bc', 'b', 'c'),
+      createEdge('cd', 'c', 'd'),
+    ];
+
+    const plan = buildCinematicBuildPlan(nodes, edges);
+
+    expect(plan.orderedNodeIds).toEqual(['a', 'b', 'c', 'd']);
+    expect(plan.segments.map((segment) => [segment.sourceNodeId, segment.leadEdgeId, segment.targetNodeId])).toEqual([
+      [null, null, 'a'],
+      ['a', 'ab', 'b'],
+      ['b', 'bc', 'c'],
+      ['c', 'cd', 'd'],
+    ]);
+  });
+
+  it('falls back safely for cyclic graphs', () => {
+    const nodes = [
+      createNode('a', 0, 0),
+      createNode('b', 200, 0),
+      createNode('c', 400, 0),
+    ];
+    const edges = [
+      createEdge('ab', 'a', 'b'),
+      createEdge('bc', 'b', 'c'),
+      createEdge('ca', 'c', 'a'),
+    ];
+
+    const plan = buildCinematicBuildPlan(nodes, edges);
+
+    expect(plan.hasTopologyFallback).toBe(true);
+    expect(plan.orderedNodeIds).toEqual(['a', 'b', 'c']);
+  });
+});
diff --git a/src/services/export/cinematicBuildPlan.ts b/src/services/export/cinematicBuildPlan.ts
new file mode 100644
index 0000000..7aef988
--- /dev/null
+++ b/src/services/export/cinematicBuildPlan.ts
@@ -0,0 +1,236 @@
+import type { FlowEdge, FlowNode } from '@/lib/types';
+
+export type CinematicExportKind = 'cinematic-video' | 'cinematic-gif';
+
+export interface CinematicBuildSegment {
+  id: string;
+  componentIndex: number;
+  sourceNodeId: string | null;
+  leadEdgeId: string | null;
+  targetNodeId: string;
+  hasTopologyFallback: boolean;
+}
+
+export interface CinematicBuildPlan {
+  version: 1;
+  orderedNodeIds: string[];
+  segments: CinematicBuildSegment[];
+  hasTopologyFallback: boolean;
+}
+
+type Orientation = 'TB' | 'LR';
+
+function inferOrientation(nodes: FlowNode[]): Orientation {
+  if (nodes.length <= 1) {
+    return 'TB';
+  }
+
+  const xs = nodes.map((node) => node.position.x);
+  const ys = nodes.map((node) => node.position.y);
+  const width = Math.max(...xs) - Math.min(...xs);
+  const height = Math.max(...ys) - Math.min(...ys);
+  return width > height ? 'LR' : 'TB';
+}
+
+function createNodeComparator(nodes: FlowNode[]): (leftId: string, rightId: string) => number {
+  const nodesById = new Map(nodes.map((node) => [node.id, node]));
+  const orientation = inferOrientation(nodes);
+
+  return (leftId, rightId) => {
+    const left = nodesById.get(leftId);
+    const right = nodesById.get(rightId);
+    if (!left || !right) {
+      return leftId.localeCompare(rightId);
+    }
+
+    if (orientation === 'LR') {
+      const xDiff = left.position.x - right.position.x;
+      if (Math.abs(xDiff) > 10) {
+        return xDiff;
+      }
+
+      return left.position.y - right.position.y || leftId.localeCompare(rightId);
+    }
+
+    const yDiff = left.position.y - right.position.y;
+    if (Math.abs(yDiff) > 10) {
+      return yDiff;
+    }
+
+    return left.position.x - right.position.x || leftId.localeCompare(rightId);
+  };
+}
+
+interface GraphModel {
+  indegree: Map<string, number>;
+  outgoingEdgeIdsByNodeId: Map<string, string[]>;
+  incomingEdgeIdsByNodeId: Map<string, string[]>;
+}
+
+function buildGraphModel(nodes: FlowNode[], edges: FlowEdge[]): GraphModel {
+  const nodeIds = new Set(nodes.map((node) => node.id));
+  const indegree = new Map<string, number>();
+  const outgoingEdgeIdsByNodeId = new Map<string, string[]>();
+  const incomingEdgeIdsByNodeId = new Map<string, string[]>();
+
+  nodes.forEach((node) => {
+    indegree.set(node.id, 0);
+    outgoingEdgeIdsByNodeId.set(node.id, []);
+    incomingEdgeIdsByNodeId.set(node.id, []);
+  });
+
+  edges.forEach((edge) => {
+    if (!nodeIds.has(edge.source) || !nodeIds.has(edge.target) || edge.source === edge.target) {
+      return;
+    }
+
+    outgoingEdgeIdsByNodeId.get(edge.source)?.push(edge.id);
+    incomingEdgeIdsByNodeId.get(edge.target)?.push(edge.id);
+    indegree.set(edge.target, (indegree.get(edge.target) ?? 0) + 1);
+  });
+
+  return {
+    indegree,
+    outgoingEdgeIdsByNodeId,
+    incomingEdgeIdsByNodeId,
+  };
+}
+
+function buildOrderedNodeIds(nodes: FlowNode[], edges: FlowEdge[]): { orderedNodeIds: string[]; hasTopologyFallback: boolean } {
+  const compareNodes = createNodeComparator(nodes);
+  const { indegree, outgoingEdgeIdsByNodeId } = buildGraphModel(nodes, edges);
+  const edgeById = new Map(edges.map((edge) => [edge.id, edge]));
+
+  const queue = nodes
+    .map((node) => node.id)
+    .filter((nodeId) => (indegree.get(nodeId) ?? 0) === 0)
+    .sort(compareNodes);
+  const orderedNodeIds: string[] = [];
+
+  while (queue.length > 0) {
+    const nextNodeId = queue.shift()!;
+    orderedNodeIds.push(nextNodeId);
+
+    for (const edgeId of outgoingEdgeIdsByNodeId.get(nextNodeId) ?? []) {
+      const edge = edgeById.get(edgeId);
+      if (!edge) {
+        continue;
+      }
+
+      const nextIndegree = (indegree.get(edge.target) ?? 1) - 1;
+      indegree.set(edge.target, nextIndegree);
+      if (nextIndegree === 0) {
+        queue.push(edge.target);
+        queue.sort(compareNodes);
+      }
+    }
+  }
+
+  if (orderedNodeIds.length === nodes.length) {
+    return {
+      orderedNodeIds,
+      hasTopologyFallback: false,
+    };
+  }
+
+  return {
+    orderedNodeIds: [...nodes.map((node) => node.id)].sort(compareNodes),
+    hasTopologyFallback: true,
+  };
+}
+
+function createComponentOrderMap(orderedNodeIds: string[], edges: FlowEdge[]): Map<string, number> {
+  const visible = new Set<string>();
+  const componentIndexByNodeId = new Map<string, number>();
+  const edgeByTargetId = new Map<string, FlowEdge[]>();
+
+  edges.forEach((edge) => {
+    const current = edgeByTargetId.get(edge.target) ?? [];
+    current.push(edge);
+    edgeByTargetId.set(edge.target, current);
+  });
+
+  let currentComponentIndex = -1;
+
+  orderedNodeIds.forEach((nodeId) => {
+    const incomingEdges = edgeByTargetId.get(nodeId) ?? [];
+    const hasVisibleSource = incomingEdges.some((edge) => visible.has(edge.source) && edge.source !== edge.target);
+
+    if (!hasVisibleSource) {
+      currentComponentIndex += 1;
+    }
+
+    componentIndexByNodeId.set(nodeId, currentComponentIndex);
+    visible.add(nodeId);
+  });
+
+  return componentIndexByNodeId;
+}
+
+function resolveLeadEdgeForNode(
+  nodeId: string,
+  orderedNodeIds: string[],
+  edges: FlowEdge[],
+  compareNodes: (leftId: string, rightId: string) => number,
+): FlowEdge | null {
+  const visibleIndexByNodeId = new Map(orderedNodeIds.map((id, index) => [id, index]));
+  const candidateEdges = edges.filter((edge) => {
+    if (edge.target !== nodeId || edge.source === edge.target) {
+      return false;
+    }
+
+    const sourceIndex = visibleIndexByNodeId.get(edge.source);
+    const targetIndex = visibleIndexByNodeId.get(edge.target);
+    return typeof sourceIndex === 'number' && typeof targetIndex === 'number' && sourceIndex < targetIndex;
+  });
+
+  if (candidateEdges.length === 0) {
+    return null;
+  }
+
+  candidateEdges.sort((left, right) => {
+    const sourceOrder = compareNodes(left.source, right.source);
+    if (sourceOrder !== 0) {
+      return sourceOrder;
+    }
+
+    return left.id.localeCompare(right.id);
+  });
+
+  return candidateEdges[0];
+}
+
+export function buildCinematicBuildPlan(nodes: FlowNode[], edges: FlowEdge[]): CinematicBuildPlan {
+  if (nodes.length === 0) {
+    return {
+      version: 1,
+      orderedNodeIds: [],
+      segments: [],
+      hasTopologyFallback: false,
+    };
+  }
+
+  const { orderedNodeIds, hasTopologyFallback } = buildOrderedNodeIds(nodes, edges);
+  const compareNodes = createNodeComparator(nodes);
+  const componentIndexByNodeId = createComponentOrderMap(orderedNodeIds, edges);
+
+  const segments = orderedNodeIds.map<CinematicBuildSegment>((targetNodeId) => {
+    const leadEdge = resolveLeadEdgeForNode(targetNodeId, orderedNodeIds, edges, compareNodes);
+
+    return {
+      id: `segment:${targetNodeId}`,
+      componentIndex: componentIndexByNodeId.get(targetNodeId) ?? 0,
+      sourceNodeId: leadEdge?.source ?? null,
+      leadEdgeId: leadEdge?.id ?? null,
+      targetNodeId,
+      hasTopologyFallback,
+    };
+  });
+
+  return {
+    version: 1,
+    orderedNodeIds,
+    segments,
+    hasTopologyFallback,
+  };
+}
diff --git a/src/services/export/cinematicRenderState.test.ts b/src/services/export/cinematicRenderState.test.ts
new file mode 100644
index 0000000..5d57059
--- /dev/null
+++ b/src/services/export/cinematicRenderState.test.ts
@@ -0,0 +1,43 @@
+import { describe, expect, it } from 'vitest';
+import type { FlowEdge } from '@/lib/types';
+import { buildCinematicBuildPlan } from './cinematicBuildPlan';
+import { buildCinematicTimeline, getCinematicExportPreset, resolveCinematicRenderState } from './cinematicRenderState';
+
+const nodes = [
+  { id: 'a', type: 'process', position: { x: 0, y: 0 }, data: { label: 'A' } },
+  { id: 'b', type: 'process', position: { x: 200, y: 0 }, data: { label: 'B' } },
+  { id: 'c', type: 'process', position: { x: 400, y: 0 }, data: { label: 'C' } },
+] as const;
+
+const edges = [
+  { id: 'ab', source: 'a', target: 'b' },
+  { id: 'bc', source: 'b', target: 'c' },
+] as FlowEdge[];
+
+describe('cinematic render state', () => {
+  it('keeps the screen empty during the intro hold', () => {
+    const plan = buildCinematicBuildPlan([...nodes], edges);
+    const timeline = buildCinematicTimeline(plan, getCinematicExportPreset('cinematic-video'));
+
+    const state = resolveCinematicRenderState(timeline, edges, 0);
+
+    expect(state.visibleNodeIds.size).toBe(0);
+    expect(state.activeEdgeId).toBeNull();
+    expect(state.backgroundMode).toBe('light');
+  });
+
+  it('activates the lead edge before the target node fade', () => {
+    const plan = buildCinematicBuildPlan([...nodes], edges);
+    const timeline = buildCinematicTimeline(plan, getCinematicExportPreset('cinematic-video'));
+    const secondSegment = timeline.segments[1];
+    const midpoint = Math.round(((secondSegment.edgeGrowStartMs ?? 0) + (secondSegment.edgeGrowEndMs ?? 0)) / 2);
+
+    const state = resolveCinematicRenderState(timeline, edges, midpoint);
+
+    expect(state.activeEdgeId).toBe('ab');
+    expect(state.activeEdgeProgress).toBeGreaterThan(0.5);
+    expect(state.activeNodeId).toBeNull();
+    expect(state.visibleNodeIds.has('a')).toBe(true);
+    expect(state.visibleNodeIds.has('b')).toBe(false);
+  });
+});
diff --git a/src/services/export/cinematicRenderState.ts b/src/services/export/cinematicRenderState.ts
new file mode 100644
index 0000000..1192e0b
--- /dev/null
+++ b/src/services/export/cinematicRenderState.ts
@@ -0,0 +1,257 @@
+import type { FlowEdge } from '@/lib/types';
+import type { CinematicBuildPlan, CinematicBuildSegment, CinematicExportKind } from './cinematicBuildPlan';
+
+export interface CinematicExportPreset {
+  kind: CinematicExportKind;
+  fps: number;
+  maxDimension: number;
+  pixelRatio: number;
+  introHoldMs: number;
+  rootNodeFadeMs: number;
+  edgeGrowMs: number;
+  targetNodeFadeMs: number;
+  settleMs: number;
+  finalHoldMs: number;
+  maxFrames: number;
+}
+
+export interface CinematicRenderState {
+  active: boolean;
+  backgroundMode: 'light';
+  visibleNodeIds: ReadonlySet<string>;
+  builtEdgeIds: ReadonlySet<string>;
+  visibleEdgeIds: ReadonlySet<string>;
+  activeNodeId: string | null;
+  activeNodeProgress: number;
+  activeEdgeId: string | null;
+  activeEdgeProgress: number;
+  currentSegment: CinematicBuildSegment | null;
+}
+
+interface CinematicTimelineSegment {
+  segment: CinematicBuildSegment;
+  startMs: number;
+  endMs: number;
+  edgeGrowStartMs: number | null;
+  edgeGrowEndMs: number | null;
+  nodeFadeStartMs: number;
+  nodeFadeEndMs: number;
+}
+
+export interface CinematicTimeline {
+  preset: CinematicExportPreset;
+  plan: CinematicBuildPlan;
+  totalDurationMs: number;
+  segments: CinematicTimelineSegment[];
+}
+
+const EMPTY_SET = new Set<string>();
+const LIGHT_BACKGROUND_MODE = 'light' as const;
+
+function clamp01(value: number): number {
+  return Math.max(0, Math.min(1, value));
+}
+
+function easeOutCubic(value: number): number {
+  const clampedValue = clamp01(value);
+  return 1 - Math.pow(1 - clampedValue, 3);
+}
+
+function easeOutQuart(value: number): number {
+  const clampedValue = clamp01(value);
+  return 1 - Math.pow(1 - clampedValue, 4);
+}
+
+function createInactiveSegmentRenderState(): CinematicRenderState {
+  return {
+    active: true,
+    backgroundMode: LIGHT_BACKGROUND_MODE,
+    visibleNodeIds: EMPTY_SET,
+    builtEdgeIds: EMPTY_SET,
+    visibleEdgeIds: EMPTY_SET,
+    activeNodeId: null,
+    activeNodeProgress: 0,
+    activeEdgeId: null,
+    activeEdgeProgress: 0,
+    currentSegment: null,
+  };
+}
+
+export function getCinematicExportPreset(kind: CinematicExportKind): CinematicExportPreset {
+  if (kind === 'cinematic-gif') {
+    return {
+      kind,
+      fps: 8,
+      maxDimension: 960,
+      pixelRatio: 1,
+      introHoldMs: 180,
+      rootNodeFadeMs: 260,
+      edgeGrowMs: 360,
+      targetNodeFadeMs: 240,
+      settleMs: 120,
+      finalHoldMs: 480,
+      maxFrames: 140,
+    };
+  }
+
+  return {
+    kind,
+    fps: 20,
+    maxDimension: 1600,
+    pixelRatio: 1.5,
+    introHoldMs: 200,
+    rootNodeFadeMs: 300,
+    edgeGrowMs: 500,
+    targetNodeFadeMs: 260,
+    settleMs: 150,
+    finalHoldMs: 640,
+    maxFrames: 280,
+  };
+}
+
+function estimateRawDurationMs(plan: CinematicBuildPlan, preset: CinematicExportPreset): number {
+  return plan.segments.reduce((total, segment) => {
+    if (!segment.leadEdgeId) {
+      return total + preset.rootNodeFadeMs + preset.settleMs;
+    }
+
+    return total + preset.edgeGrowMs + preset.targetNodeFadeMs + preset.settleMs;
+  }, preset.introHoldMs + preset.finalHoldMs);
+}
+
+function scalePresetForFrameBudget(plan: CinematicBuildPlan, preset: CinematicExportPreset): CinematicExportPreset {
+  const rawDurationMs = estimateRawDurationMs(plan, preset);
+  const rawFrames = Math.max(1, Math.ceil((rawDurationMs / 1000) * preset.fps));
+  if (rawFrames <= preset.maxFrames) {
+    return preset;
+  }
+
+  const ratio = preset.maxFrames / rawFrames;
+
+  return {
+    ...preset,
+    introHoldMs: Math.max(120, Math.round(preset.introHoldMs * ratio)),
+    rootNodeFadeMs: Math.max(140, Math.round(preset.rootNodeFadeMs * ratio)),
+    edgeGrowMs: Math.max(180, Math.round(preset.edgeGrowMs * ratio)),
+    targetNodeFadeMs: Math.max(140, Math.round(preset.targetNodeFadeMs * ratio)),
+    settleMs: Math.max(40, Math.round(preset.settleMs * ratio)),
+    finalHoldMs: Math.max(180, Math.round(preset.finalHoldMs * ratio)),
+  };
+}
+
+export function buildCinematicTimeline(plan: CinematicBuildPlan, basePreset: CinematicExportPreset): CinematicTimeline {
+  const preset = scalePresetForFrameBudget(plan, basePreset);
+  let currentMs = preset.introHoldMs;
+
+  const segments = plan.segments.map<CinematicTimelineSegment>((segment) => {
+    const startMs = currentMs;
+    const edgeGrowStartMs = segment.leadEdgeId ? currentMs : null;
+    const edgeGrowEndMs = segment.leadEdgeId ? currentMs + preset.edgeGrowMs : null;
+    const nodeFadeStartMs = edgeGrowEndMs ?? currentMs;
+    const nodeFadeEndMs = nodeFadeStartMs + (segment.leadEdgeId ? preset.targetNodeFadeMs : preset.rootNodeFadeMs);
+    const endMs = nodeFadeEndMs + preset.settleMs;
+
+    currentMs = endMs;
+
+    return {
+      segment,
+      startMs,
+      endMs,
+      edgeGrowStartMs,
+      edgeGrowEndMs,
+      nodeFadeStartMs,
+      nodeFadeEndMs,
+    };
+  });
+
+  return {
+    preset,
+    plan,
+    totalDurationMs: currentMs + preset.finalHoldMs,
+    segments,
+  };
+}
+
+function buildVisibleEdgeIds(visibleNodeIds: Set<string>, edges: FlowEdge[]): Set<string> {
+  return new Set(
+    edges
+      .filter((edge) => visibleNodeIds.has(edge.source) && visibleNodeIds.has(edge.target))
+      .map((edge) => edge.id),
+  );
+}
+
+export function resolveCinematicRenderState(
+  timeline: CinematicTimeline,
+  edges: FlowEdge[],
+  timeMs: number,
+): CinematicRenderState {
+  if (timeline.plan.segments.length === 0) {
+    return createInactiveSegmentRenderState();
+  }
+
+  const clampedTimeMs = Math.max(0, Math.min(timeMs, timeline.totalDurationMs));
+  const visibleNodeIds = new Set<string>();
+
+  let activeNodeId: string | null = null;
+  let activeNodeProgress = 0;
+  let activeEdgeId: string | null = null;
+  let activeEdgeProgress = 0;
+  let currentSegment: CinematicBuildSegment | null = null;
+
+  if (clampedTimeMs < timeline.preset.introHoldMs) {
+    return {
+      ...createInactiveSegmentRenderState(),
+      visibleNodeIds,
+    };
+  }
+
+  for (const segmentEntry of timeline.segments) {
+    const { segment } = segmentEntry;
+
+    if (clampedTimeMs >= segmentEntry.endMs) {
+      visibleNodeIds.add(segment.targetNodeId);
+      continue;
+    }
+
+    currentSegment = segment;
+    if (segmentEntry.edgeGrowStartMs !== null && segmentEntry.edgeGrowEndMs !== null && clampedTimeMs < segmentEntry.edgeGrowEndMs) {
+      visibleNodeIds.add(segment.sourceNodeId ?? segment.targetNodeId);
+      activeEdgeId = segment.leadEdgeId;
+      activeEdgeProgress = easeOutQuart((clampedTimeMs - segmentEntry.edgeGrowStartMs) / (segmentEntry.edgeGrowEndMs - segmentEntry.edgeGrowStartMs));
+      break;
+    }
+
+    if (segment.sourceNodeId) {
+      visibleNodeIds.add(segment.sourceNodeId);
+    }
+
+    activeNodeId = segment.targetNodeId;
+    activeNodeProgress = easeOutCubic((clampedTimeMs - segmentEntry.nodeFadeStartMs) / (segmentEntry.nodeFadeEndMs - segmentEntry.nodeFadeStartMs));
+    if (activeNodeProgress > 0) {
+      visibleNodeIds.add(segment.targetNodeId);
+    }
+    break;
+  }
+
+  if (!currentSegment && clampedTimeMs >= timeline.totalDurationMs - timeline.preset.finalHoldMs) {
+    timeline.plan.orderedNodeIds.forEach((nodeId) => visibleNodeIds.add(nodeId));
+  }
+
+  const visibleEdgeIds = buildVisibleEdgeIds(visibleNodeIds, edges);
+  if (activeEdgeId) {
+    visibleEdgeIds.delete(activeEdgeId);
+  }
+
+  return {
+    active: true,
+    backgroundMode: LIGHT_BACKGROUND_MODE,
+    visibleNodeIds,
+    builtEdgeIds: new Set(visibleEdgeIds),
+    visibleEdgeIds: activeEdgeId ? new Set([...visibleEdgeIds, activeEdgeId]) : visibleEdgeIds,
+    activeNodeId,
+    activeNodeProgress,
+    activeEdgeId,
+    activeEdgeProgress,
+    currentSegment,
+  };
+}
diff --git a/src/services/export/mermaidBuilder.test.ts b/src/services/export/mermaidBuilder.test.ts
new file mode 100644
index 0000000..85cf090
--- /dev/null
+++ b/src/services/export/mermaidBuilder.test.ts
@@ -0,0 +1,138 @@
+import { describe, expect, it } from 'vitest';
+import { toMermaid } from './mermaidBuilder';
+import type { FlowNode, FlowEdge } from '@/lib/types';
+import { SEQUENCE_PLUGIN } from '@/diagram-types/sequence/plugin';
+
+const node = (id: string, type: string, label: string, extra = {}): FlowNode =>
+    ({ id, type, position: { x: 0, y: 0 }, data: { label, ...extra } } as FlowNode);
+const edge = (id: string, source: string, target: string): FlowEdge =>
+    ({ id, source, target } as FlowEdge);
+
+describe('toMermaid', () => {
+    it('flowchart — two process nodes with edge starts with flowchart TD and contains node IDs', () => {
+        const result = toMermaid(
+            [node('a', 'process', 'A'), node('b', 'process', 'B')],
+            [edge('e1', 'a', 'b')]
+        );
+        expect(result).toMatch(/^flowchart TD/);
+        expect(result).toContain('a');
+        expect(result).toContain('b');
+    });
+
+    it('architecture — two architecture nodes starts with architecture-beta and contains service', () => {
+        const result = toMermaid(
+            [
+                node('svc1', 'architecture', 'ServiceA', { archResourceType: 'service' }),
+                node('svc2', 'architecture', 'ServiceB', { archResourceType: 'service' }),
+            ],
+            [edge('e1', 'svc1', 'svc2')]
+        );
+        expect(result).toMatch(/^architecture-beta/);
+        expect(result).toContain('service');
+    });
+
+    it('mindmap — two mindmap nodes starts with mindmap', () => {
+        const result = toMermaid(
+            [
+                node('root', 'mindmap', 'Root', { mindmapDepth: 0 }),
+                node('child', 'mindmap', 'Topic', { mindmapDepth: 1 }),
+            ],
+            [edge('e1', 'root', 'child')]
+        );
+        expect(result).toMatch(/^mindmap/);
+    });
+
+    it('class diagram — two class nodes starts with classDiagram', () => {
+        const result = toMermaid(
+            [node('ClassA', 'class', 'ClassA'), node('ClassB', 'class', 'ClassB')],
+            []
+        );
+        expect(result).toMatch(/^classDiagram/);
+    });
+
+    it('ER diagram — two entity nodes starts with erDiagram', () => {
+        const result = toMermaid(
+            [node('User', 'er_entity', 'User'), node('Order', 'er_entity', 'Order')],
+            []
+        );
+        expect(result).toMatch(/^erDiagram/);
+    });
+
+    it('sequence diagram — participants and messages export to sequenceDiagram syntax', () => {
+        const result = toMermaid(
+            [
+                { ...node('client', 'sequence_participant', 'Client', { seqParticipantKind: 'actor' }), position: { x: 0, y: 0 } },
+                { ...node('api', 'sequence_participant', 'API', { seqParticipantKind: 'participant' }), position: { x: 220, y: 0 } },
+            ],
+            [
+                {
+                    id: 'seq-1',
+                    source: 'client',
+                    target: 'api',
+                    type: 'sequence_message',
+                    label: 'POST /checkout',
+                    data: { seqMessageKind: 'sync', seqMessageOrder: 0 },
+                } as FlowEdge,
+                {
+                    id: 'seq-2',
+                    source: 'api',
+                    target: 'client',
+                    type: 'sequence_message',
+                    label: '202 Accepted',
+                    data: { seqMessageKind: 'return', seqMessageOrder: 1 },
+                } as FlowEdge,
+            ]
+        );
+        expect(result).toMatch(/^sequenceDiagram/);
+        expect(result).toContain('actor client as Client');
+        expect(result).toContain('participant api as API');
+        expect(result).toContain('client->>api: POST /checkout');
+        expect(result).toContain('api-->>client: 202 Accepted');
+    });
+
+    it('sequence diagram — exported Mermaid round-trips through the sequence parser', () => {
+        const mermaid = toMermaid(
+            [
+                { ...node('client', 'sequence_participant', 'Client', { seqParticipantKind: 'actor' }), position: { x: 0, y: 0 } },
+                { ...node('api', 'sequence_participant', 'API', { seqParticipantKind: 'participant' }), position: { x: 220, y: 0 } },
+                { ...node('db', 'sequence_participant', 'Postgres', { seqParticipantKind: 'participant' }), position: { x: 440, y: 0 } },
+            ],
+            [
+                {
+                    id: 'seq-1',
+                    source: 'client',
+                    target: 'api',
+                    type: 'sequence_message',
+                    label: 'POST /checkout',
+                    data: { seqMessageKind: 'sync', seqMessageOrder: 0 },
+                } as FlowEdge,
+                {
+                    id: 'seq-2',
+                    source: 'api',
+                    target: 'db',
+                    type: 'sequence_message',
+                    label: 'insert order',
+                    data: { seqMessageKind: 'async', seqMessageOrder: 1 },
+                } as FlowEdge,
+            ]
+        );
+        const parsed = SEQUENCE_PLUGIN.parseMermaid(mermaid);
+
+        expect(parsed.error).toBeUndefined();
+        expect(parsed.nodes.map((entry) => entry.data.label)).toEqual(['Client', 'API', 'Postgres']);
+        expect(parsed.edges.map((entry) => entry.data?.seqMessageKind)).toEqual(['sync', 'async']);
+    });
+
+    it('empty — no nodes returns a string without throwing', () => {
+        const result = toMermaid([], []);
+        expect(typeof result).toBe('string');
+    });
+
+    it('node label sanitization — label with spaces is included in output', () => {
+        const result = toMermaid(
+            [node('n1', 'process', 'Hello World & More')],
+            []
+        );
+        expect(result).toContain('Hello World');
+    });
+});
diff --git a/src/services/export/mermaidBuilder.ts b/src/services/export/mermaidBuilder.ts
index 2318636..4149db9 100644
--- a/src/services/export/mermaidBuilder.ts
+++ b/src/services/export/mermaidBuilder.ts
@@ -1,5 +1,6 @@
 import type { FlowEdge, FlowNode } from '@/lib/types';
 import { getNodeParentId } from '@/lib/nodeParent';
+import { normalizeErFields, stringifyErField } from '@/lib/entityFields';
 import {
   DEFAULT_CLASS_RELATION,
   DEFAULT_ER_RELATION,
@@ -283,7 +284,7 @@ function toERDiagramMermaid(nodes: FlowNode[], edges: FlowEdge[]): string {
   const lines: string[] = ['erDiagram'];
   sortNodesByPosition(nodes).forEach((node) => {
     lines.push(`    ${node.id} {`);
-    const fields = Array.isArray(node.data.erFields) ? node.data.erFields.map((entry) => String(entry).trim()).filter(Boolean) : [];
+    const fields = normalizeErFields(node.data.erFields).map((entry) => stringifyErField(entry).trim()).filter(Boolean);
     fields.forEach((field) => lines.push(`      ${field}`));
     lines.push('    }');
   });
@@ -453,6 +454,48 @@ function resolveFlowchartConnector(edge: FlowEdge): string {
   return body;
 }
 
+function resolveSequenceArrow(kind: string | undefined): string {
+  if (kind === 'async') return '-)';
+  if (kind === 'return') return '-->>';
+  if (kind === 'destroy') return '-x';
+  return '->>';
+}
+
+function toSequenceMermaid(nodes: FlowNode[], edges: FlowEdge[]): string {
+  const lines: string[] = ['sequenceDiagram'];
+  const participantIdByNodeId = new Map<string, string>();
+  sortNodesByPosition(nodes).forEach((node) => {
+    const kind = node.data.seqParticipantKind || 'participant';
+    const label = String(node.data.label || node.id).trim() || node.id;
+    const explicitAlias = typeof node.data.seqParticipantAlias === 'string' ? node.data.seqParticipantAlias.trim() : '';
+    const participantId = sanitizeId(node.id);
+    participantIdByNodeId.set(node.id, participantId);
+
+    if (explicitAlias) {
+      lines.push(`    ${kind} ${participantId} as ${sanitizeLabel(label)}`);
+      return;
+    }
+
+    if (participantId !== label) {
+      lines.push(`    ${kind} ${participantId} as ${sanitizeLabel(label)}`);
+      return;
+    }
+
+    lines.push(`    ${kind} ${participantId}`);
+  });
+
+  edges.forEach((edge) => {
+    const arrow = resolveSequenceArrow(edge.data?.seqMessageKind);
+    const label = typeof edge.label === 'string' ? edge.label.trim() : '';
+    const suffix = label ? `: ${label}` : '';
+    const source = participantIdByNodeId.get(edge.source) ?? sanitizeId(edge.source);
+    const target = participantIdByNodeId.get(edge.target) ?? sanitizeId(edge.target);
+    lines.push(`    ${source}${arrow}${target}${suffix}`);
+  });
+
+  return `${lines.join('\n')}\n`;
+}
+
 export function toMermaid(nodes: FlowNode[], edges: FlowEdge[]): string {
   const architectureNodeCount = nodes.filter((node) => node.type === 'architecture').length;
   if (nodes.length > 0 && architectureNodeCount === nodes.length) {
@@ -479,6 +522,11 @@ export function toMermaid(nodes: FlowNode[], edges: FlowEdge[]): string {
     return toERDiagramMermaid(nodes, edges);
   }
 
+  const seqNodeCount = nodes.filter((node) => node.type === 'sequence_participant').length;
+  if (nodes.length > 0 && seqNodeCount === nodes.length) {
+    return toSequenceMermaid(nodes, edges);
+  }
+
   if (looksLikeStateDiagram(nodes)) {
     return toStateDiagramMermaid(nodes, edges);
   }
diff --git a/src/services/export/pdfDocument.test.ts b/src/services/export/pdfDocument.test.ts
new file mode 100644
index 0000000..803a540
--- /dev/null
+++ b/src/services/export/pdfDocument.test.ts
@@ -0,0 +1,28 @@
+import { describe, expect, it } from 'vitest';
+import { createPdfFromJpeg } from './pdfDocument';
+
+const TINY_JPEG_DATA_URL =
+  'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBxAQEBUQEBAVFRUVFRUVFRUVFRUVFRUVFRUWFhUVFRUYHSggGBolHRUVITEhJSkrLi4uFx8zODMsNygtLisBCgoKDg0OGhAQGy0lICUtLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLf/AABEIAAEAAQMBIgACEQEDEQH/xAAXAAEBAQEAAAAAAAAAAAAAAAAAAQID/8QAFBABAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEAMQAAAB6gD/xAAXEAEBAQEAAAAAAAAAAAAAAAABEQAh/9oACAEBAAEFApJrj//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//Z';
+
+describe('createPdfFromJpeg', () => {
+  it('builds a PDF blob from a JPEG data URL', async () => {
+    const pdfBlob = createPdfFromJpeg({
+      jpegDataUrl: TINY_JPEG_DATA_URL,
+      width: 320,
+      height: 180,
+      title: 'OpenFlowKit Diagram',
+    });
+
+    expect(pdfBlob.type).toBe('application/pdf');
+    expect(pdfBlob.size).toBeGreaterThan(100);
+    expect(String(pdfBlob)).toContain('Blob');
+  });
+
+  it('rejects non-JPEG data URLs', () => {
+    expect(() => createPdfFromJpeg({
+      jpegDataUrl: 'data:image/png;base64,abc123',
+      width: 320,
+      height: 180,
+    })).toThrow('PDF export requires a JPEG data URL.');
+  });
+});
diff --git a/src/services/export/pdfDocument.ts b/src/services/export/pdfDocument.ts
new file mode 100644
index 0000000..426e7cc
--- /dev/null
+++ b/src/services/export/pdfDocument.ts
@@ -0,0 +1,102 @@
+function encodePdfText(value: string): Uint8Array {
+  return new TextEncoder().encode(value);
+}
+
+function concatenatePdfParts(parts: Uint8Array[]): Uint8Array {
+  const totalLength = parts.reduce((sum, part) => sum + part.length, 0);
+  const output = new Uint8Array(totalLength);
+  let offset = 0;
+
+  for (const part of parts) {
+    output.set(part, offset);
+    offset += part.length;
+  }
+
+  return output;
+}
+
+function base64ToUint8Array(base64Value: string): Uint8Array {
+  const binaryValue = atob(base64Value);
+  const output = new Uint8Array(binaryValue.length);
+
+  for (let index = 0; index < binaryValue.length; index += 1) {
+    output[index] = binaryValue.charCodeAt(index);
+  }
+
+  return output;
+}
+
+function extractJpegBytes(jpegDataUrl: string): Uint8Array {
+  const match = jpegDataUrl.match(/^data:image\/jpeg;base64,(.+)$/);
+  if (!match) {
+    throw new Error('PDF export requires a JPEG data URL.');
+  }
+
+  return base64ToUint8Array(match[1]);
+}
+
+function buildPdfObject(objectId: number, body: Uint8Array): Uint8Array {
+  const header = encodePdfText(`${objectId} 0 obj\n`);
+  const footer = encodePdfText('\nendobj\n');
+  return concatenatePdfParts([header, body, footer]);
+}
+
+function buildXrefTable(objectOffsets: number[], startOffset: number): Uint8Array {
+  const lines = [
+    'xref',
+    `0 ${objectOffsets.length + 1}`,
+    '0000000000 65535 f ',
+    ...objectOffsets.map((offset) => `${offset.toString().padStart(10, '0')} 00000 n `),
+    'trailer',
+    `<< /Size ${objectOffsets.length + 1} /Root 1 0 R >>`,
+    'startxref',
+    String(startOffset),
+    '%%EOF',
+  ];
+
+  return encodePdfText(`${lines.join('\n')}\n`);
+}
+
+export function createPdfFromJpeg(params: {
+  jpegDataUrl: string;
+  width: number;
+  height: number;
+  title?: string;
+}): Blob {
+  const jpegBytes = extractJpegBytes(params.jpegDataUrl);
+  const width = Math.max(1, Math.round(params.width));
+  const height = Math.max(1, Math.round(params.height));
+  const pageCommands = `q\n${width} 0 0 ${height} 0 0 cm\n/Im0 Do\nQ`;
+  const escapedTitle = params.title?.replace(/[()\\]/g, '\\$&');
+  const objectBodies: Uint8Array[] = [
+    encodePdfText('<< /Type /Catalog /Pages 2 0 R >>'),
+    encodePdfText('<< /Type /Pages /Count 1 /Kids [3 0 R] >>'),
+    encodePdfText(`<< /Type /Page /Parent 2 0 R /MediaBox [0 0 ${width} ${height}] /Resources << /XObject << /Im0 4 0 R >> >> /Contents 5 0 R >>`),
+    concatenatePdfParts([
+      encodePdfText(`<< /Type /XObject /Subtype /Image /Width ${width} /Height ${height} /ColorSpace /DeviceRGB /BitsPerComponent 8 /Filter /DCTDecode /Length ${jpegBytes.length} >>\nstream\n`),
+      jpegBytes,
+      encodePdfText('\nendstream'),
+    ]),
+    encodePdfText(`<< /Length ${pageCommands.length} >>\nstream\n${pageCommands}\nendstream`),
+  ];
+
+  if (escapedTitle) {
+    objectBodies.push(encodePdfText(`<< /Title (${escapedTitle}) >>`));
+  }
+
+  const header = encodePdfText('%PDF-1.4\n%\xFF\xFF\xFF\xFF\n');
+  const parts: Uint8Array[] = [header];
+  const objectOffsets: number[] = [];
+  let currentOffset = header.length;
+
+  for (let index = 0; index < objectBodies.length; index += 1) {
+    const objectBytes = buildPdfObject(index + 1, objectBodies[index]);
+    objectOffsets.push(currentOffset);
+    parts.push(objectBytes);
+    currentOffset += objectBytes.length;
+  }
+
+  parts.push(buildXrefTable(objectOffsets, currentOffset));
+
+  return new Blob([concatenatePdfParts(parts)], { type: 'application/pdf' });
+}
diff --git a/src/services/figmaImport/figmaApiClient.ts b/src/services/figmaImport/figmaApiClient.ts
new file mode 100644
index 0000000..8921d7b
--- /dev/null
+++ b/src/services/figmaImport/figmaApiClient.ts
@@ -0,0 +1,118 @@
+/** Figma REST API — browser-side, read-only personal access token. */
+
+export interface FigmaColor {
+    r: number; // 0–1
+    g: number; // 0–1
+    b: number; // 0–1
+    a: number; // 0–1
+}
+
+export interface FigmaStyle {
+    key: string;
+    name: string;
+    styleType: 'FILL' | 'TEXT' | 'EFFECT' | 'GRID';
+    node_id: string;
+}
+
+export interface FigmaFill {
+    type: string;
+    color?: FigmaColor;
+}
+
+export interface FigmaTypographyStyle {
+    fontFamily?: string;
+    fontSize?: number;
+    fontWeight?: number;
+}
+
+export interface FigmaExtractedStyle {
+    name: string;
+    type: 'color' | 'text';
+    hex?: string;
+    fontFamily?: string;
+    fontSize?: number;
+}
+
+/** Parse a Figma file URL and return the file key. */
+export function parseFigmaFileKey(url: string): string | null {
+    // https://www.figma.com/file/FILEKEY/...
+    // https://www.figma.com/design/FILEKEY/...
+    const match = url.match(/figma\.com\/(?:file|design)\/([A-Za-z0-9]+)/);
+    return match?.[1] ?? null;
+}
+
+function rgbToHex(r: number, g: number, b: number): string {
+    const toHex = (v: number): string => Math.round(v * 255).toString(16).padStart(2, '0');
+    return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+}
+
+export interface FigmaImportResult {
+    name: string;
+    colors: FigmaExtractedStyle[];
+    fonts: FigmaExtractedStyle[];
+}
+
+export async function fetchFigmaStyles(fileKey: string, token: string): Promise<FigmaImportResult> {
+    const headers = { 'X-Figma-Token': token };
+
+    // Step 1: get file metadata + styles list
+    const fileRes = await fetch(`https://api.figma.com/v1/files/${fileKey}?depth=1`, { headers });
+    if (!fileRes.ok) {
+        if (fileRes.status === 403) throw new Error('Invalid Figma token or no access to this file.');
+        if (fileRes.status === 404) throw new Error('Figma file not found. Check the URL.');
+        throw new Error(`Figma API error: ${fileRes.status}`);
+    }
+    const fileData = (await fileRes.json()) as { name: string; styles: Record<string, FigmaStyle> };
+    const fileName = fileData.name;
+
+    const styleEntries = Object.values(fileData.styles ?? {});
+    const colorStyles = styleEntries.filter((s) => s.styleType === 'FILL');
+    const textStyles = styleEntries.filter((s) => s.styleType === 'TEXT');
+
+    const allNodeIds = [...colorStyles, ...textStyles].map((s) => s.node_id);
+    if (allNodeIds.length === 0) {
+        return { name: fileName, colors: [], fonts: [] };
+    }
+
+    // Step 2: fetch the actual node data to get fill/type values
+    const nodeIds = allNodeIds.slice(0, 50).join(','); // cap to avoid huge requests
+    const nodesRes = await fetch(`https://api.figma.com/v1/files/${fileKey}/nodes?ids=${encodeURIComponent(nodeIds)}`, { headers });
+    if (!nodesRes.ok) throw new Error(`Figma API error fetching nodes: ${nodesRes.status}`);
+
+    const nodesData = (await nodesRes.json()) as {
+        nodes: Record<string, { document: { fills?: FigmaFill[]; style?: FigmaTypographyStyle } }>;
+    };
+
+    const styleById = new Map(styleEntries.map((s) => [s.node_id, s]));
+
+    const colors: FigmaExtractedStyle[] = [];
+    const fonts: FigmaExtractedStyle[] = [];
+
+    for (const [nodeId, nodeWrapper] of Object.entries(nodesData.nodes ?? {})) {
+        const style = styleById.get(nodeId);
+        if (!style || !nodeWrapper?.document) continue;
+
+        if (style.styleType === 'FILL') {
+            const fill = nodeWrapper.document.fills?.[0];
+            if (fill?.type === 'SOLID' && fill.color) {
+                colors.push({
+                    name: style.name,
+                    type: 'color',
+                    hex: rgbToHex(fill.color.r, fill.color.g, fill.color.b),
+                });
+            }
+        } else if (style.styleType === 'TEXT') {
+            const typStyle = nodeWrapper.document.style;
+            if (typStyle?.fontFamily) {
+                fonts.push({
+                    name: style.name,
+                    type: 'text',
+                    fontFamily: typStyle.fontFamily,
+                    fontSize: typStyle.fontSize,
+                });
+            }
+        }
+    }
+
+    return { name: fileName, colors, fonts };
+}
diff --git a/src/services/geminiService.ts b/src/services/geminiService.ts
index ab0d350..eeaedff 100644
--- a/src/services/geminiService.ts
+++ b/src/services/geminiService.ts
@@ -1,4 +1,4 @@
-import { GoogleGenAI, Type } from "@google/genai";
+import { GoogleGenAI } from "@google/genai";
 
 /** Default Gemini model — keep in sync with DEFAULT_MODELS in aiService.ts */
 const GEMINI_DEFAULT_MODEL = 'gemini-2.5-flash-lite';
@@ -8,18 +8,35 @@ export interface ChatMessage {
   parts: { text?: string; inlineData?: { mimeType: string; data: string } }[];
 }
 
-export function getSystemInstruction(): string {
-  return `
-# FlowMind DSL Generation System
+const EDIT_MODE_PREAMBLE = `
+## EDIT MODE — MODIFYING AN EXISTING DIAGRAM
 
-You are an expert diagram assistant that converts plain language into **FlowMind DSL**.
+A CURRENT DIAGRAM block will be provided in OpenFlow DSL. You MUST:
+1. Output the COMPLETE updated diagram in OpenFlow DSL — not just the changed parts
+2. Preserve every node that should remain — copy its id, type, label, icon, color, and all attributes EXACTLY as they appear in CURRENT DIAGRAM
+3. Use the EXACT same node id for every unchanged node (e.g. if CURRENT DIAGRAM has \`node-abc123: Login Service\`, your output must also use \`node-abc123\`)
+4. Only change what the user explicitly requested
+5. New nodes should have short descriptive IDs (e.g. \`redis_cache\`, \`auth_v2\`)
+6. Do NOT re-layout or restructure nodes not affected by the change
+7. When inserting a node "between" two existing nodes, include edges to both neighbors
+
+---
+
+`;
+
+export function getSystemInstruction(mode: 'create' | 'edit' = 'create'): string {
+  const preamble = mode === 'edit' ? EDIT_MODE_PREAMBLE : '';
+  return `${preamble}
+# OpenFlow DSL Generation System
+
+You are an expert diagram assistant that converts plain language into **OpenFlow DSL**.
 
 Your job:
 - Read any description of a process, system, or flow — casual or technical.
 - Use conversation history for context and refinements.
-- If an image is provided, convert the diagram/sketch into FlowMind DSL.
+- If an image is provided, convert the diagram/sketch into OpenFlow DSL.
 - Infer obvious missing steps.
-- Always output **only valid FlowMind DSL** — no prose, no explanations, no markdown wrappers.
+- Always output **only valid OpenFlow DSL** — no prose, no explanations, no markdown wrappers.
 
 ---
 
@@ -130,6 +147,14 @@ Syntax: \`[type] id: Label { icon: "IconName", color: "color", subLabel: "option
     - If the label is simple (e.g., "Login"), you can use it as the ID: \`[process] Login { icon: "LogIn" }\`.
     - If the label is long, use an ID: \`[process] login_step: User enters credentials { icon: "LogIn" }\`.
 
+14. **Iterative editing — preserve existing IDs**:
+    - When a CURRENT CONTENT block is provided, it includes each node's exact \`id\` (e.g. \`"id": "node-abc123"\`).
+    - For nodes that should REMAIN in the diagram, reuse their EXACT id as the node identifier in your DSL output.
+    - Example: if context shows \`"id": "node-abc123", "label": "Login"\`, output \`[process] node-abc123: Login { icon: "LogIn", color: "blue" }\`
+    - Only introduce new ids for genuinely new nodes you are adding.
+    - Omit nodes that should be removed — do not output them at all.
+    - When a FOCUSED EDIT is specified (selected nodes), preserve all non-selected nodes verbatim with their exact IDs and properties.
+
 ---
 
 ## Examples
@@ -224,23 +249,26 @@ export async function generateDiagramFromChat(
   currentDSL?: string,
   imageBase64?: string,
   userApiKey?: string,
-  modelId?: string
+  modelId?: string,
+  isEditMode = false,
+  onChunk?: (delta: string) => void,
+  signal?: AbortSignal,
 ): Promise<string> {
   const apiKey = userApiKey;
 
   if (!apiKey) {
-    throw new Error("API Key is missing. Please add it in Settings → Flowpilot AI.");
+    throw new Error("API key is missing. Please add it in Settings → AI.");
   }
 
   const ai = new GoogleGenAI({ apiKey });
 
+  const userText = isEditMode && currentDSL
+    ? `User Request: ${newMessage}\n\nCURRENT DIAGRAM — output the complete updated OpenFlow DSL:\n${currentDSL}`
+    : `User Request: ${newMessage}\n\nGenerate a new OpenFlow DSL diagram.`;
+
   const newMessageContent = {
     role: 'user' as const,
-    parts: [
-      {
-        text: `User Request: ${newMessage}${currentDSL ? `\nCURRENT CONTENT (The user wants to update this):\n${currentDSL}` : ''}\n\nGenerate or update the FlowMind DSL based on this request.`
-      }
-    ] as { text?: string; inlineData?: { mimeType: string; data: string } }[]
+    parts: [{ text: userText }] as { text?: string; inlineData?: { mimeType: string; data: string } }[]
   };
 
   if (imageBase64) {
@@ -250,18 +278,28 @@ export async function generateDiagramFromChat(
 
   const contents = [...history, newMessageContent];
 
-  const response = await ai.models.generateContent({
+  const stream = await ai.models.generateContentStream({
     model: modelId || GEMINI_DEFAULT_MODEL,
     contents,
     config: {
-      systemInstruction: getSystemInstruction(),
+      systemInstruction: getSystemInstruction(isEditMode ? 'edit' : 'create'),
       responseMimeType: "text/plain",
-    }
+    },
   });
 
-  if (!response.text) throw new Error("No response from AI");
+  let fullText = '';
+  for await (const chunk of stream) {
+    if (signal?.aborted) throw new DOMException('Aborted', 'AbortError');
+    const delta = chunk.text ?? '';
+    if (delta) {
+      fullText += delta;
+      onChunk?.(delta);
+    }
+  }
 
-  return response.text;
+  if (!fullText) throw new Error("No response from AI");
+
+  return fullText;
 }
 
 export async function generateDiagramFromPrompt(
diff --git a/src/services/infraSync/dockerComposeParser.test.ts b/src/services/infraSync/dockerComposeParser.test.ts
new file mode 100644
index 0000000..48c9598
--- /dev/null
+++ b/src/services/infraSync/dockerComposeParser.test.ts
@@ -0,0 +1,64 @@
+import { describe, it, expect } from 'vitest';
+import { parseDockerCompose } from './dockerComposeParser';
+
+const SIMPLE_COMPOSE = `
+version: "3.8"
+services:
+  web:
+    image: nginx
+    depends_on:
+      - api
+  api:
+    image: node:18
+`;
+
+const COMPOSE_WITH_NETWORKS = `
+version: "3.8"
+services:
+  frontend:
+    image: nginx
+    networks:
+      - public
+  backend:
+    image: node:18
+    networks:
+      - public
+      - private
+networks:
+  public:
+  private:
+`;
+
+describe('parseDockerCompose', () => {
+    it('parses two services with depends_on and creates an edge', () => {
+        const result = parseDockerCompose(SIMPLE_COMPOSE);
+        const webNode = result.nodes.find((n) => n.resourceName === 'web');
+        const apiNode = result.nodes.find((n) => n.resourceName === 'api');
+        expect(webNode).toBeDefined();
+        expect(apiNode).toBeDefined();
+        expect(webNode!.nodeType).toBe('system');
+        expect(result.provider).toBe('docker-compose');
+
+        const edge = result.edges.find(
+            (e) => e.from === webNode!.id && e.to === apiNode!.id
+        );
+        expect(edge).toBeDefined();
+        expect(edge!.label).toBe('depends_on');
+    });
+
+    it('parses services with networks and links them to network section nodes', () => {
+        const result = parseDockerCompose(COMPOSE_WITH_NETWORKS);
+        const netNodes = result.nodes.filter((n) => n.nodeType === 'section');
+        expect(netNodes.length).toBeGreaterThanOrEqual(1);
+
+        const frontendNode = result.nodes.find((n) => n.resourceName === 'frontend');
+        const publicNet = result.nodes.find((n) => n.resourceName === 'public');
+        expect(frontendNode).toBeDefined();
+        expect(publicNet).toBeDefined();
+
+        const netEdge = result.edges.find(
+            (e) => e.from === frontendNode!.id && e.to === publicNet!.id
+        );
+        expect(netEdge).toBeDefined();
+    });
+});
diff --git a/src/services/infraSync/dockerComposeParser.ts b/src/services/infraSync/dockerComposeParser.ts
new file mode 100644
index 0000000..68ce5a6
--- /dev/null
+++ b/src/services/infraSync/dockerComposeParser.ts
@@ -0,0 +1,246 @@
+import type { InfraSyncResult, ParsedInfraEdge, ParsedInfraNode } from './types';
+
+function sanitizeId(raw: string): string {
+    return raw.replace(/[^a-zA-Z0-9_]/g, '_');
+}
+
+function isRecord(val: unknown): val is Record<string, unknown> {
+    return typeof val === 'object' && val !== null && !Array.isArray(val);
+}
+
+function parseYamlSimple(text: string): Record<string, unknown> {
+    const result: Record<string, unknown> = {};
+    const lines = text.split('\n');
+    const stack: Array<{ indent: number; obj: Record<string, unknown> }> = [{ indent: -1, obj: result }];
+
+    for (const rawLine of lines) {
+        if (rawLine.trim() === '' || rawLine.trim().startsWith('#')) continue;
+        const indent = rawLine.length - rawLine.trimStart().length;
+        const trimmed = rawLine.trim();
+
+        // List item
+        if (trimmed.startsWith('- ')) {
+            const value = trimmed.slice(2).trim();
+            const parent = stack[stack.length - 1].obj;
+            const parentKey = Object.keys(parent)[Object.keys(parent).length - 1];
+            if (parentKey && Array.isArray(parent[parentKey])) {
+                (parent[parentKey] as unknown[]).push(value);
+            }
+            continue;
+        }
+
+        const colonIdx = trimmed.indexOf(':');
+        if (colonIdx === -1) continue;
+
+        const key = trimmed.slice(0, colonIdx).trim();
+        const valueRaw = trimmed.slice(colonIdx + 1).trim();
+
+        while (stack.length > 1 && stack[stack.length - 1].indent >= indent) {
+            stack.pop();
+        }
+
+        const parent = stack[stack.length - 1].obj;
+
+        if (valueRaw === '' || valueRaw === '|' || valueRaw === '>') {
+            const childObj: Record<string, unknown> = {};
+            parent[key] = childObj;
+            stack.push({ indent, obj: childObj });
+        } else {
+            parent[key] = valueRaw;
+        }
+    }
+
+    return result;
+}
+
+function extractListItems(text: string, sectionKey: string): string[] {
+    const items: string[] = [];
+    const lines = text.split('\n');
+    let inSection = false;
+    let sectionIndent = -1;
+
+    for (const line of lines) {
+        if (line.trim() === '' || line.trim().startsWith('#')) continue;
+        const indent = line.length - line.trimStart().length;
+        const trimmed = line.trim();
+
+        if (trimmed === `${sectionKey}:` || trimmed.startsWith(`${sectionKey}:`)) {
+            inSection = true;
+            sectionIndent = indent;
+            continue;
+        }
+
+        if (inSection) {
+            if (indent <= sectionIndent && trimmed.length > 0 && !trimmed.startsWith('-')) {
+                inSection = false;
+                continue;
+            }
+            if (trimmed.startsWith('- ')) {
+                items.push(trimmed.slice(2).trim());
+            } else if (trimmed.startsWith('-')) {
+                items.push(trimmed.slice(1).trim());
+            }
+        }
+    }
+
+    return items;
+}
+
+interface ServiceInfo {
+    name: string;
+    dependsOn: string[];
+    networks: string[];
+}
+
+function extractServices(text: string): ServiceInfo[] {
+    const services: ServiceInfo[] = [];
+    const lines = text.split('\n');
+    let inServices = false;
+    let currentService: ServiceInfo | null = null;
+    let currentSection = '';
+    const serviceIndent = 2;
+
+    for (const line of lines) {
+        if (line.trim() === '' || line.trim().startsWith('#')) continue;
+        const indent = line.length - line.trimStart().length;
+        const trimmed = line.trim();
+
+        if (trimmed === 'services:') {
+            inServices = true;
+            continue;
+        }
+
+        if (inServices) {
+            // Top-level key at indent 0 ending services block
+            if (indent === 0 && !trimmed.startsWith('-')) {
+                inServices = false;
+                if (currentService) services.push(currentService);
+                currentService = null;
+                continue;
+            }
+
+            // Service name at indent 2
+            if (indent === serviceIndent && trimmed.endsWith(':') && !trimmed.startsWith('-')) {
+                if (currentService) services.push(currentService);
+                currentService = { name: trimmed.slice(0, -1), dependsOn: [], networks: [] };
+                currentSection = '';
+                continue;
+            }
+
+            if (!currentService) continue;
+
+            if (indent === serviceIndent + 2 && trimmed.endsWith(':') && !trimmed.startsWith('-')) {
+                currentSection = trimmed.slice(0, -1);
+                continue;
+            }
+
+            if (currentSection === 'depends_on' && trimmed.startsWith('- ')) {
+                currentService.dependsOn.push(trimmed.slice(2).trim());
+            }
+
+            if (currentSection === 'networks' && trimmed.startsWith('- ')) {
+                currentService.networks.push(trimmed.slice(2).trim());
+            }
+        }
+    }
+
+    if (currentService) services.push(currentService);
+    return services;
+}
+
+export function parseDockerCompose(input: string): InfraSyncResult {
+    const raw = parseYamlSimple(input);
+    const nodes: ParsedInfraNode[] = [];
+    const edges: ParsedInfraEdge[] = [];
+    const addedEdges = new Set<string>();
+
+    function addEdge(from: string, to: string, label?: string): void {
+        const key = `${from}->${to}`;
+        if (!addedEdges.has(key) && from !== to) {
+            addedEdges.add(key);
+            edges.push({ from, to, label });
+        }
+    }
+
+    // Parse network names from top-level networks key
+    const networkSection = raw['networks'];
+    if (isRecord(networkSection)) {
+        for (const netName of Object.keys(networkSection)) {
+            const nodeId = sanitizeId(`net_${netName}`);
+            nodes.push({
+                id: nodeId,
+                label: netName,
+                nodeType: 'section',
+                provider: 'docker-compose',
+                resourceType: 'network',
+                resourceName: netName,
+            });
+        }
+    }
+
+    // Extract services with their depends_on and network connections
+    const services = extractServices(input);
+
+    // Also extract top-level network names from the yaml if not extracted above
+    const networkNames = new Set(
+        nodes.filter((n) => n.resourceType === 'network').map((n) => n.resourceName)
+    );
+
+    // Extract any network names referenced by services but not declared
+    for (const svc of services) {
+        for (const net of svc.networks) {
+            if (!networkNames.has(net)) {
+                networkNames.add(net);
+                const nodeId = sanitizeId(`net_${net}`);
+                nodes.push({
+                    id: nodeId,
+                    label: net,
+                    nodeType: 'section',
+                    provider: 'docker-compose',
+                    resourceType: 'network',
+                    resourceName: net,
+                });
+            }
+        }
+    }
+
+    // Collect network names from yaml text as fallback
+    const topLevelNetworkNames = extractListItems(input, 'networks');
+    for (const net of topLevelNetworkNames) {
+        if (!networkNames.has(net)) {
+            networkNames.add(net);
+        }
+    }
+
+    for (const svc of services) {
+        const nodeId = sanitizeId(`svc_${svc.name}`);
+        nodes.push({
+            id: nodeId,
+            label: svc.name,
+            nodeType: 'system',
+            provider: 'docker-compose',
+            resourceType: 'service',
+            resourceName: svc.name,
+        });
+    }
+
+    for (const svc of services) {
+        const nodeId = sanitizeId(`svc_${svc.name}`);
+        for (const dep of svc.dependsOn) {
+            const depId = sanitizeId(`svc_${dep}`);
+            addEdge(nodeId, depId, 'depends_on');
+        }
+        for (const net of svc.networks) {
+            const netId = sanitizeId(`net_${net}`);
+            addEdge(nodeId, netId);
+        }
+    }
+
+    return {
+        nodes,
+        edges,
+        resourceCount: nodes.length,
+        provider: 'docker-compose',
+        lastParsed: Date.now(),
+    };
+}
diff --git a/src/services/infraSync/infraToDsl.test.ts b/src/services/infraSync/infraToDsl.test.ts
new file mode 100644
index 0000000..b3f45bd
--- /dev/null
+++ b/src/services/infraSync/infraToDsl.test.ts
@@ -0,0 +1,76 @@
+import { describe, it, expect } from 'vitest';
+import { infraSyncResultToDsl } from './infraToDsl';
+import type { InfraSyncResult } from './types';
+
+function makeResult(overrides: Partial<InfraSyncResult> = {}): InfraSyncResult {
+    return {
+        nodes: [],
+        edges: [],
+        resourceCount: 0,
+        provider: 'aws',
+        lastParsed: Date.now(),
+        ...overrides,
+    };
+}
+
+describe('infraSyncResultToDsl', () => {
+    it('renders nodes and edges as valid DSL', () => {
+        const result = makeResult({
+            nodes: [
+                { id: 'lb_main', label: 'Main LB', nodeType: 'system', provider: 'aws', resourceType: 'aws_lb', resourceName: 'main' },
+                { id: 'ec2_web', label: 'Web Server', nodeType: 'system', provider: 'aws', resourceType: 'aws_instance', resourceName: 'web' },
+            ],
+            edges: [{ from: 'lb_main', to: 'ec2_web' }],
+        });
+        const dsl = infraSyncResultToDsl(result);
+        expect(dsl).toContain('[system] lb_main: Main LB');
+        expect(dsl).toContain('[system] ec2_web: Web Server');
+        expect(dsl).toContain('lb_main -> ec2_web');
+    });
+
+    it('renders section nodes with indented children', () => {
+        const result = makeResult({
+            nodes: [
+                { id: 'vpc_main', label: 'Production VPC', nodeType: 'section', provider: 'aws', resourceType: 'aws_vpc', resourceName: 'main' },
+                { id: 'ec2_web', label: 'Web Server', nodeType: 'system', provider: 'aws', resourceType: 'aws_instance', resourceName: 'web' },
+            ],
+            edges: [{ from: 'vpc_main', to: 'ec2_web' }],
+        });
+        const dsl = infraSyncResultToDsl(result);
+        expect(dsl).toContain('[section] vpc_main: Production VPC');
+        // child should be indented
+        expect(dsl).toMatch(/\s+\[system\] ec2_web:/);
+        // section->child edge should NOT be rendered as an explicit edge line
+        expect(dsl).not.toContain('vpc_main -> ec2_web');
+    });
+
+    it('renders edge labels with |label| syntax', () => {
+        const result = makeResult({
+            nodes: [
+                { id: 'svc_web', label: 'web', nodeType: 'system', provider: 'docker-compose', resourceType: 'service', resourceName: 'web' },
+                { id: 'svc_api', label: 'api', nodeType: 'system', provider: 'docker-compose', resourceType: 'service', resourceName: 'api' },
+            ],
+            edges: [{ from: 'svc_web', to: 'svc_api', label: 'depends_on' }],
+        });
+        const dsl = infraSyncResultToDsl(result);
+        expect(dsl).toContain('svc_web -> svc_api |depends_on|');
+    });
+
+    it('sanitizes node IDs — replaces non-alphanumeric chars with underscore', () => {
+        const result = makeResult({
+            nodes: [
+                { id: 'aws-instance.web', label: 'web', nodeType: 'system', provider: 'aws', resourceType: 'aws_instance', resourceName: 'web' },
+            ],
+            edges: [],
+        });
+        const dsl = infraSyncResultToDsl(result);
+        expect(dsl).not.toContain('aws-instance.web');
+        expect(dsl).toContain('aws_instance_web');
+    });
+
+    it('uses provided flow title', () => {
+        const result = makeResult();
+        const dsl = infraSyncResultToDsl(result, 'My Cloud');
+        expect(dsl).toContain('flow: "My Cloud"');
+    });
+});
diff --git a/src/services/infraSync/infraToDsl.ts b/src/services/infraSync/infraToDsl.ts
new file mode 100644
index 0000000..933cf30
--- /dev/null
+++ b/src/services/infraSync/infraToDsl.ts
@@ -0,0 +1,111 @@
+import type { InfraSyncResult, ParsedInfraEdge, ParsedInfraNode } from './types';
+
+function sanitizeNodeId(id: string): string {
+    return id.replace(/[^a-zA-Z0-9_]/g, '_');
+}
+
+export function infraSyncResultToDsl(result: InfraSyncResult, flowTitle?: string): string {
+    const title = flowTitle ?? 'Infrastructure';
+    const lines: string[] = [];
+
+    lines.push(`flow: "${title}"`);
+    lines.push('direction: LR');
+    lines.push('');
+
+    const sectionNodes = result.nodes.filter((n) => n.nodeType === 'section');
+    const nonSectionNodes = result.nodes.filter((n) => n.nodeType !== 'section');
+
+    // Build a set of children per section: non-section nodes that have an edge FROM a section TO them
+    const sectionEdges = new Map<string, Set<string>>();
+    for (const section of sectionNodes) {
+        sectionEdges.set(section.id, new Set());
+    }
+
+    const sectionEdgeSet = new Set<string>();
+    for (const edge of result.edges) {
+        const fromNode = result.nodes.find((n) => n.id === edge.from);
+        const toNode = result.nodes.find((n) => n.id === edge.to);
+        if (fromNode?.nodeType === 'section' && toNode) {
+            const children = sectionEdges.get(fromNode.id);
+            if (children) {
+                children.add(toNode.id);
+                sectionEdgeSet.add(`${edge.from}->${edge.to}`);
+            }
+        }
+    }
+
+    // Render section nodes with their children
+    const renderedNodeIds = new Set<string>();
+
+    for (const section of sectionNodes) {
+        const sectionId = sanitizeNodeId(section.id);
+        lines.push(`[section] ${sectionId}: ${section.label}`);
+        renderedNodeIds.add(section.id);
+
+        const children = sectionEdges.get(section.id) ?? new Set();
+        for (const childId of children) {
+            const child = result.nodes.find((n) => n.id === childId);
+            if (!child) continue;
+            const childNodeId = sanitizeNodeId(child.id);
+            lines.push(`  [${child.nodeType}] ${childNodeId}: ${child.label}`);
+            renderedNodeIds.add(child.id);
+        }
+
+        lines.push('');
+    }
+
+    // Render remaining non-section nodes that haven't been rendered yet
+    const remaining = nonSectionNodes.filter((n) => !renderedNodeIds.has(n.id));
+    for (const node of remaining) {
+        const nodeId = sanitizeNodeId(node.id);
+        lines.push(`[${node.nodeType}] ${nodeId}: ${node.label}`);
+        renderedNodeIds.add(node.id);
+    }
+
+    if (remaining.length > 0) {
+        lines.push('');
+    }
+
+    // Render edges, skipping section→child edges (already implied by indentation)
+    const edgeLines: string[] = [];
+    for (const edge of result.edges) {
+        const edgeKey = `${edge.from}->${edge.to}`;
+        if (sectionEdgeSet.has(edgeKey)) continue;
+
+        const from = sanitizeNodeId(edge.from);
+        const to = sanitizeNodeId(edge.to);
+        if (edge.label) {
+            edgeLines.push(`${from} -> ${to} |${edge.label}|`);
+        } else {
+            edgeLines.push(`${from} -> ${to}`);
+        }
+    }
+
+    if (edgeLines.length > 0) {
+        lines.push(...edgeLines);
+    }
+
+    return lines.join('\n').trimEnd();
+}
+
+export function infraSyncResultSummary(result: InfraSyncResult): string {
+    const typeCounts = new Map<string, number>();
+    for (const node of result.nodes) {
+        const count = typeCounts.get(node.resourceType) ?? 0;
+        typeCounts.set(node.resourceType, count + 1);
+    }
+
+    const parts: string[] = [];
+    for (const [type, count] of typeCounts) {
+        const shortType = type.split('_').slice(-1)[0];
+        parts.push(`${count} ${shortType}${count > 1 ? 's' : ''}`);
+    }
+
+    if (parts.length === 0) return 'No resources detected';
+    if (parts.length === 1) return parts[0];
+    if (parts.length === 2) return `${parts[0]} and ${parts[1]}`;
+    const last = parts.pop();
+    return `${parts.slice(0, 4).join(', ')}, and ${last}`;
+}
+
+export type { ParsedInfraNode, ParsedInfraEdge };
diff --git a/src/services/infraSync/kubernetesParser.test.ts b/src/services/infraSync/kubernetesParser.test.ts
new file mode 100644
index 0000000..6100f4a
--- /dev/null
+++ b/src/services/infraSync/kubernetesParser.test.ts
@@ -0,0 +1,111 @@
+import { describe, it, expect } from 'vitest';
+import { parseKubernetesManifests } from './kubernetesParser';
+
+const DEPLOYMENT = `
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  name: api-server
+  namespace: production
+spec:
+  selector:
+    matchLabels:
+      app: api
+  template:
+    metadata:
+      labels:
+        app: api
+`;
+
+const SERVICE = `
+apiVersion: v1
+kind: Service
+metadata:
+  name: api-svc
+  namespace: production
+spec:
+  selector:
+    matchLabels:
+      app: api
+  type: ClusterIP
+`;
+
+const INGRESS = `
+apiVersion: networking.k8s.io/v1
+kind: Ingress
+metadata:
+  name: main-ingress
+  namespace: production
+spec:
+  rules:
+    - http:
+        paths:
+          - backend:
+              service:
+                name: api-svc
+`;
+
+const NAMESPACE = `
+apiVersion: v1
+kind: Namespace
+metadata:
+  name: staging
+`;
+
+const CONFIGMAP = `
+apiVersion: v1
+kind: ConfigMap
+metadata:
+  name: app-config
+  namespace: production
+`;
+
+describe('parseKubernetesManifests', () => {
+    it('parses a single Deployment into a [system] node', () => {
+        const result = parseKubernetesManifests(DEPLOYMENT);
+        expect(result.nodes).toHaveLength(1);
+        expect(result.nodes[0].nodeType).toBe('system');
+        expect(result.nodes[0].resourceType).toBe('Deployment');
+        expect(result.nodes[0].label).toBe('api-server');
+        expect(result.provider).toBe('kubernetes');
+    });
+
+    it('parses an Ingress into a [browser] node', () => {
+        const result = parseKubernetesManifests(INGRESS);
+        expect(result.nodes[0].nodeType).toBe('browser');
+    });
+
+    it('parses a Namespace into a [section] node', () => {
+        const result = parseKubernetesManifests(NAMESPACE);
+        expect(result.nodes[0].nodeType).toBe('section');
+    });
+
+    it('skips ConfigMap manifests', () => {
+        const result = parseKubernetesManifests(CONFIGMAP);
+        expect(result.nodes).toHaveLength(0);
+    });
+
+    it('creates edge from Service to Deployment when selector labels match', () => {
+        const input = `${DEPLOYMENT}\n---\n${SERVICE}`;
+        const result = parseKubernetesManifests(input);
+        expect(result.nodes).toHaveLength(2);
+        expect(result.edges).toHaveLength(1);
+        const svcNode = result.nodes.find((n) => n.resourceType === 'Service');
+        const depNode = result.nodes.find((n) => n.resourceType === 'Deployment');
+        expect(svcNode).toBeDefined();
+        expect(depNode).toBeDefined();
+        expect(result.edges[0].from).toBe(svcNode!.id);
+        expect(result.edges[0].to).toBe(depNode!.id);
+    });
+
+    it('creates edge from Ingress to Service via backend service name', () => {
+        const input = `${SERVICE}\n---\n${INGRESS}`;
+        const result = parseKubernetesManifests(input);
+        const ingressNode = result.nodes.find((n) => n.resourceType === 'Ingress');
+        const svcNode = result.nodes.find((n) => n.resourceType === 'Service');
+        expect(ingressNode).toBeDefined();
+        expect(svcNode).toBeDefined();
+        const edge = result.edges.find((e) => e.from === ingressNode!.id && e.to === svcNode!.id);
+        expect(edge).toBeDefined();
+    });
+});
diff --git a/src/services/infraSync/kubernetesParser.ts b/src/services/infraSync/kubernetesParser.ts
new file mode 100644
index 0000000..beda52f
--- /dev/null
+++ b/src/services/infraSync/kubernetesParser.ts
@@ -0,0 +1,277 @@
+import type { InfraSyncResult, ParsedInfraEdge, ParsedInfraNode } from './types';
+
+const SKIP_KINDS = new Set([
+    'ConfigMap',
+    'Secret',
+    'ServiceAccount',
+    'Role',
+    'ClusterRole',
+    'RoleBinding',
+    'ClusterRoleBinding',
+]);
+
+function getNodeType(kind: string): string {
+    switch (kind) {
+        case 'Deployment':
+        case 'StatefulSet':
+        case 'DaemonSet':
+        case 'Pod':
+        case 'PersistentVolumeClaim':
+        case 'PersistentVolume':
+        case 'Service':
+            return 'system';
+        case 'Ingress':
+        case 'IngressClass':
+            return 'browser';
+        case 'Namespace':
+            return 'section';
+        case 'CronJob':
+        case 'Job':
+            return 'process';
+        default:
+            return 'system';
+    }
+}
+
+function sanitizeId(raw: string): string {
+    return raw.replace(/[^a-zA-Z0-9_]/g, '_');
+}
+
+interface SimpleK8sMetadata {
+    name?: string;
+    namespace?: string;
+    labels?: Record<string, string>;
+}
+
+interface SimpleK8sSpec {
+    selector?: {
+        matchLabels?: Record<string, string>;
+    };
+    template?: {
+        metadata?: {
+            labels?: Record<string, string>;
+        };
+    };
+    type?: string;
+    rules?: SimpleK8sIngressRule[];
+}
+
+interface SimpleK8sIngressRule {
+    http?: {
+        paths?: SimpleK8sIngressPath[];
+    };
+}
+
+interface SimpleK8sIngressPath {
+    backend?: {
+        service?: {
+            name?: string;
+        };
+    };
+}
+
+interface SimpleK8sManifest {
+    kind: string;
+    metadata: SimpleK8sMetadata;
+    spec?: SimpleK8sSpec;
+}
+
+function isRecord(val: unknown): val is Record<string, unknown> {
+    return typeof val === 'object' && val !== null && !Array.isArray(val);
+}
+
+function isStringRecord(val: unknown): val is Record<string, string> {
+    if (!isRecord(val)) return false;
+    return Object.values(val).every((v) => typeof v === 'string');
+}
+
+function parseYamlSimple(text: string): Record<string, unknown> {
+    const result: Record<string, unknown> = {};
+    const lines = text.split('\n');
+    const stack: Array<{ indent: number; obj: Record<string, unknown>; key: string | null }> = [
+        { indent: -1, obj: result, key: null },
+    ];
+
+    for (const line of lines) {
+        if (line.trim() === '' || line.trim().startsWith('#')) continue;
+        const indent = line.length - line.trimStart().length;
+        const trimmed = line.trim();
+
+        const colonIdx = trimmed.indexOf(':');
+        if (colonIdx === -1) continue;
+
+        const key = trimmed.slice(0, colonIdx).trim();
+        const valueRaw = trimmed.slice(colonIdx + 1).trim();
+
+        while (stack.length > 1 && stack[stack.length - 1].indent >= indent) {
+            stack.pop();
+        }
+
+        const parent = stack[stack.length - 1].obj;
+
+        if (valueRaw === '' || valueRaw === '|' || valueRaw === '>') {
+            const childObj: Record<string, unknown> = {};
+            parent[key] = childObj;
+            stack.push({ indent, obj: childObj, key });
+        } else {
+            parent[key] = valueRaw;
+        }
+    }
+
+    return result;
+}
+
+function extractManifest(raw: Record<string, unknown>): SimpleK8sManifest | null {
+    if (typeof raw['kind'] !== 'string') return null;
+    if (!isRecord(raw['metadata'])) return null;
+
+    const meta = raw['metadata'];
+    const metadata: SimpleK8sMetadata = {
+        name: typeof meta['name'] === 'string' ? meta['name'] : undefined,
+        namespace: typeof meta['namespace'] === 'string' ? meta['namespace'] : undefined,
+        labels: isStringRecord(meta['labels']) ? meta['labels'] : undefined,
+    };
+
+    let spec: SimpleK8sSpec | undefined;
+    if (isRecord(raw['spec'])) {
+        const rawSpec = raw['spec'];
+        spec = {};
+
+        if (isRecord(rawSpec['selector'])) {
+            const sel = rawSpec['selector'];
+            spec.selector = {
+                matchLabels: isStringRecord(sel['matchLabels']) ? sel['matchLabels'] : undefined,
+            };
+        }
+
+        if (typeof rawSpec['type'] === 'string') {
+            spec.type = rawSpec['type'];
+        }
+
+        if (isRecord(rawSpec['template']) && isRecord((rawSpec['template'] as Record<string, unknown>)['metadata'])) {
+            const tmpl = rawSpec['template'] as Record<string, unknown>;
+            const tmplMeta = tmpl['metadata'] as Record<string, unknown>;
+            spec.template = {
+                metadata: {
+                    labels: isStringRecord(tmplMeta['labels']) ? tmplMeta['labels'] : undefined,
+                },
+            };
+        }
+    }
+
+    return { kind: raw['kind'], metadata, spec };
+}
+
+interface ManifestWithSource {
+    manifest: SimpleK8sManifest;
+    rawDoc: string;
+}
+
+function extractIngressBackendServiceNames(rawDoc: string): string[] {
+    const names: string[] = [];
+    // Match `service:\n    name: <value>` or `service:\r?\n\s+name: <value>`
+    const re = /service:\s*\n\s+name:\s*(\S+)/g;
+    let match: RegExpExecArray | null;
+    while ((match = re.exec(rawDoc)) !== null) {
+        names.push(match[1]);
+    }
+    return names;
+}
+
+export function parseKubernetesManifests(input: string): InfraSyncResult {
+    const docs = input.split(/^---/m).filter((d) => d.trim().length > 0);
+    const manifestsWithSource: ManifestWithSource[] = [];
+
+    for (const doc of docs) {
+        try {
+            const raw = parseYamlSimple(doc);
+            const manifest = extractManifest(raw);
+            if (manifest) manifestsWithSource.push({ manifest, rawDoc: doc });
+        } catch {
+            // skip unparseable docs
+        }
+    }
+
+    const manifests = manifestsWithSource.map((m) => m.manifest);
+
+    const nodes: ParsedInfraNode[] = [];
+    const nodeIdByNameNs = new Map<string, string>();
+
+    for (const manifest of manifests) {
+        const { kind, metadata } = manifest;
+        if (SKIP_KINDS.has(kind)) continue;
+        if (!metadata.name) continue;
+
+        const ns = metadata.namespace ?? 'default';
+        const rawId = `${kind.toLowerCase()}_${ns}_${metadata.name}`;
+        const nodeId = sanitizeId(rawId);
+
+        let label = metadata.name;
+        if (kind === 'Service' && manifest.spec?.type === 'LoadBalancer') {
+            label = `${metadata.name} (LB)`;
+        }
+
+        nodes.push({
+            id: nodeId,
+            label,
+            nodeType: getNodeType(kind),
+            provider: 'kubernetes',
+            resourceType: kind,
+            resourceName: metadata.name,
+        });
+
+        nodeIdByNameNs.set(`${kind.toLowerCase()}:${ns}:${metadata.name}`, nodeId);
+        nodeIdByNameNs.set(`${kind.toLowerCase()}::${metadata.name}`, nodeId);
+    }
+
+    const edges: ParsedInfraEdge[] = [];
+    const addedEdges = new Set<string>();
+
+    function addEdge(from: string, to: string, label?: string): void {
+        const key = `${from}->${to}`;
+        if (!addedEdges.has(key) && from !== to) {
+            addedEdges.add(key);
+            edges.push({ from, to, label });
+        }
+    }
+
+    for (const { manifest, rawDoc } of manifestsWithSource) {
+        const { kind, metadata, spec } = manifest;
+        if (!metadata.name) continue;
+        const ns = metadata.namespace ?? 'default';
+
+        if (kind === 'Service' && spec?.selector) {
+            const selectorLabels = spec.selector.matchLabels ?? {};
+            for (const depManifest of manifests) {
+                if (!['Deployment', 'StatefulSet', 'DaemonSet'].includes(depManifest.kind)) continue;
+                const podLabels = depManifest.spec?.template?.metadata?.labels ?? {};
+                const matches = Object.entries(selectorLabels).every(([k, v]) => podLabels[k] === v);
+                if (matches && depManifest.metadata.name) {
+                    const depNs = depManifest.metadata.namespace ?? 'default';
+                    const svcNodeId = sanitizeId(`service_${ns}_${metadata.name}`);
+                    const depNodeId = sanitizeId(`${depManifest.kind.toLowerCase()}_${depNs}_${depManifest.metadata.name}`);
+                    addEdge(svcNodeId, depNodeId);
+                }
+            }
+        }
+
+        if (kind === 'Ingress') {
+            const ingressNodeId = sanitizeId(`ingress_${ns}_${metadata.name}`);
+            const backendServiceNames = extractIngressBackendServiceNames(rawDoc);
+            for (const svcName of backendServiceNames) {
+                const svcNodeId =
+                    nodeIdByNameNs.get(`service:${ns}:${svcName}`) ??
+                    nodeIdByNameNs.get(`service::${svcName}`);
+                if (svcNodeId) addEdge(ingressNodeId, svcNodeId);
+            }
+        }
+    }
+
+    return {
+        nodes,
+        edges,
+        resourceCount: nodes.length,
+        provider: 'kubernetes',
+        lastParsed: Date.now(),
+    };
+}
diff --git a/src/services/infraSync/terraformStateParser.test.ts b/src/services/infraSync/terraformStateParser.test.ts
new file mode 100644
index 0000000..b57a60b
--- /dev/null
+++ b/src/services/infraSync/terraformStateParser.test.ts
@@ -0,0 +1,96 @@
+import { describe, it, expect } from 'vitest';
+import { parseTerraformState } from './terraformStateParser';
+
+function makeTfState(resources: unknown[]): string {
+    return JSON.stringify({ version: 4, resources });
+}
+
+function makeResource(type: string, name: string, attributes: Record<string, unknown> = {}) {
+    return {
+        type,
+        name,
+        provider: `provider["registry.terraform.io/hashicorp/aws"]`,
+        instances: [{ attributes: { id: `${type}-${name}-id`, ...attributes } }],
+    };
+}
+
+describe('parseTerraformState', () => {
+    it('returns empty result for empty resources array', () => {
+        const result = parseTerraformState(makeTfState([]));
+        expect(result.nodes).toHaveLength(0);
+        expect(result.edges).toHaveLength(0);
+        expect(result.resourceCount).toBe(0);
+    });
+
+    it('parses a single aws_instance into a [system] node', () => {
+        const result = parseTerraformState(makeTfState([makeResource('aws_instance', 'web')]));
+        expect(result.nodes).toHaveLength(1);
+        expect(result.nodes[0].nodeType).toBe('system');
+        expect(result.nodes[0].provider).toContain('aws');
+        expect(result.provider).toBe('aws');
+    });
+
+    it('parses aws_lambda_function into a [process] node', () => {
+        const result = parseTerraformState(makeTfState([makeResource('aws_lambda_function', 'handler')]));
+        expect(result.nodes[0].nodeType).toBe('process');
+    });
+
+    it('uses tags.Name as label when present', () => {
+        const resource = makeResource('aws_instance', 'web', { tags: { Name: 'My Web Server' } });
+        const result = parseTerraformState(makeTfState([resource]));
+        expect(result.nodes[0].label).toBe('My Web Server');
+    });
+
+    it('falls back to type+name label when no tags.Name', () => {
+        const result = parseTerraformState(makeTfState([makeResource('aws_instance', 'app')]));
+        expect(result.nodes[0].label).toContain('app');
+    });
+
+    it('parses aws_vpc into a [section] node', () => {
+        const result = parseTerraformState(makeTfState([makeResource('aws_vpc', 'main')]));
+        expect(result.nodes[0].nodeType).toBe('section');
+    });
+
+    it('creates edge from vpc to instance via vpc_id attribute', () => {
+        const vpcId = 'vpc-abc123';
+        const vpc = {
+            type: 'aws_vpc',
+            name: 'main',
+            provider: 'provider["registry.terraform.io/hashicorp/aws"]',
+            instances: [{ attributes: { id: vpcId } }],
+        };
+        const instance = {
+            type: 'aws_instance',
+            name: 'web',
+            provider: 'provider["registry.terraform.io/hashicorp/aws"]',
+            instances: [{ attributes: { id: 'i-123', vpc_id: vpcId } }],
+        };
+        const result = parseTerraformState(makeTfState([vpc, instance]));
+        expect(result.nodes).toHaveLength(2);
+        expect(result.edges).toHaveLength(1);
+        expect(result.edges[0].from).toBe('aws_vpc_main');
+        expect(result.edges[0].to).toBe('aws_instance_web');
+    });
+
+    it('skips aws_security_group resources', () => {
+        const result = parseTerraformState(makeTfState([makeResource('aws_security_group', 'sg')]));
+        expect(result.nodes).toHaveLength(0);
+    });
+
+    it('returns empty result for invalid JSON', () => {
+        const result = parseTerraformState('not json');
+        expect(result.nodes).toHaveLength(0);
+    });
+
+    it('detects mixed provider when aws and azure resources coexist', () => {
+        const aws = makeResource('aws_instance', 'web');
+        const azure = {
+            type: 'azurerm_linux_virtual_machine',
+            name: 'vm',
+            provider: 'provider["registry.terraform.io/hashicorp/azurerm"]',
+            instances: [{ attributes: { id: 'vm-id' } }],
+        };
+        const result = parseTerraformState(makeTfState([aws, azure]));
+        expect(result.provider).toBe('mixed');
+    });
+});
diff --git a/src/services/infraSync/terraformStateParser.ts b/src/services/infraSync/terraformStateParser.ts
new file mode 100644
index 0000000..7e48edc
--- /dev/null
+++ b/src/services/infraSync/terraformStateParser.ts
@@ -0,0 +1,276 @@
+import type { InfraProvider, InfraSyncResult, ParsedInfraEdge, ParsedInfraNode } from './types';
+
+interface TfStateResourceAttributes {
+    id?: string;
+    tags?: Record<string, string>;
+    vpc_id?: string;
+    load_balancer_arn?: string;
+    load_balancer_arns?: string[];
+    cluster_id?: string;
+    cluster_arn?: string;
+    db_instance_identifier?: string;
+    [key: string]: unknown;
+}
+
+interface TfStateResourceInstance {
+    attributes: TfStateResourceAttributes;
+}
+
+interface TfStateResource {
+    type: string;
+    name: string;
+    provider: string;
+    instances: TfStateResourceInstance[];
+}
+
+interface TfState {
+    version: number;
+    resources: TfStateResource[];
+}
+
+function isTfStateResourceAttributes(val: unknown): val is TfStateResourceAttributes {
+    return typeof val === 'object' && val !== null;
+}
+
+function isTfStateResourceInstance(val: unknown): val is TfStateResourceInstance {
+    if (typeof val !== 'object' || val === null) return false;
+    const obj = val as Record<string, unknown>;
+    return isTfStateResourceAttributes(obj['attributes']);
+}
+
+function isTfStateResource(val: unknown): val is TfStateResource {
+    if (typeof val !== 'object' || val === null) return false;
+    const obj = val as Record<string, unknown>;
+    return (
+        typeof obj['type'] === 'string' &&
+        typeof obj['name'] === 'string' &&
+        typeof obj['provider'] === 'string' &&
+        Array.isArray(obj['instances'])
+    );
+}
+
+function isTfState(val: unknown): val is TfState {
+    if (typeof val !== 'object' || val === null) return false;
+    const obj = val as Record<string, unknown>;
+    return typeof obj['version'] === 'number' && Array.isArray(obj['resources']);
+}
+
+const SKIP_TYPES = new Set([
+    'aws_security_group',
+    'aws_iam_role',
+    'aws_iam_policy',
+    'aws_iam_role_policy',
+    'aws_iam_role_policy_attachment',
+    'aws_iam_instance_profile',
+    'aws_route_table',
+    'aws_route_table_association',
+    'aws_route',
+    'aws_subnet',
+    'aws_internet_gateway',
+    'aws_nat_gateway',
+    'aws_eip',
+]);
+
+function getNodeType(resourceType: string): string {
+    switch (resourceType) {
+        case 'aws_instance':
+        case 'google_compute_instance':
+        case 'azurerm_linux_virtual_machine':
+            return 'system';
+        case 'aws_lambda_function':
+        case 'google_cloudfunctions_function':
+        case 'azurerm_function_app':
+            return 'process';
+        case 'aws_rds_instance':
+        case 'aws_rds_cluster':
+        case 'aws_dynamodb_table':
+        case 'google_sql_database_instance':
+        case 'azurerm_sql_server':
+            return 'system';
+        case 'aws_s3_bucket':
+        case 'google_storage_bucket':
+        case 'azurerm_storage_account':
+            return 'system';
+        case 'aws_vpc':
+        case 'google_compute_network':
+        case 'azurerm_virtual_network':
+            return 'section';
+        case 'aws_lb':
+        case 'aws_alb':
+        case 'aws_elb':
+        case 'google_compute_forwarding_rule':
+        case 'azurerm_lb':
+            return 'system';
+        case 'aws_ecs_cluster':
+        case 'aws_eks_cluster':
+        case 'google_container_cluster':
+        case 'azurerm_kubernetes_cluster':
+            return 'section';
+        case 'aws_ecs_service':
+        case 'aws_eks_node_group':
+            return 'system';
+        case 'aws_api_gateway_rest_api':
+        case 'aws_apigatewayv2_api':
+        case 'google_api_gateway_api':
+            return 'system';
+        case 'aws_cloudfront_distribution':
+        case 'google_compute_global_forwarding_rule':
+            return 'browser';
+        case 'kubernetes_deployment':
+        case 'kubernetes_pod':
+        case 'kubernetes_service':
+            return 'system';
+        case 'kubernetes_ingress':
+        case 'kubernetes_ingress_v1':
+            return 'browser';
+        case 'aws_elasticache_cluster':
+        case 'aws_elasticache_replication_group':
+            return 'system';
+        case 'aws_sqs_queue':
+        case 'google_pubsub_topic':
+        case 'azurerm_servicebus_queue':
+        case 'aws_sns_topic':
+        case 'aws_step_functions_state_machine':
+        case 'aws_sfn_state_machine':
+            return 'process';
+        case 'aws_waf_web_acl':
+        case 'aws_wafv2_web_acl':
+        case 'aws_route53_zone':
+        case 'aws_route53_record':
+        case 'aws_cognito_user_pool':
+        case 'aws_opensearch_domain':
+        case 'aws_elasticsearch_domain':
+            return 'system';
+        case 'google_compute_instance_group':
+            return 'section';
+        case 'azurerm_app_service':
+        case 'azurerm_app_service_plan':
+            return 'system';
+        default:
+            return 'system';
+    }
+}
+
+function sanitizeId(raw: string): string {
+    return raw.replace(/[^a-zA-Z0-9_]/g, '_');
+}
+
+function detectProvider(resources: TfStateResource[]): InfraProvider {
+    const types = resources.map((r) => r.type);
+    const hasAws = types.some((t) => t.startsWith('aws_'));
+    const hasGcp = types.some((t) => t.startsWith('google_') || t.startsWith('gcp_'));
+    const hasAzure = types.some((t) => t.startsWith('azurerm_'));
+    const count = [hasAws, hasGcp, hasAzure].filter(Boolean).length;
+    if (count > 1) return 'mixed';
+    if (hasAws) return 'aws';
+    if (hasGcp) return 'gcp';
+    if (hasAzure) return 'azure';
+    return 'mixed';
+}
+
+export function parseTerraformState(input: string): InfraSyncResult {
+    let parsed: unknown;
+    try {
+        parsed = JSON.parse(input) as unknown;
+    } catch {
+        return { nodes: [], edges: [], resourceCount: 0, provider: 'mixed', lastParsed: Date.now() };
+    }
+
+    if (!isTfState(parsed)) {
+        return { nodes: [], edges: [], resourceCount: 0, provider: 'mixed', lastParsed: Date.now() };
+    }
+
+    const validResources = parsed.resources.filter(isTfStateResource);
+    const filtered = validResources.filter((r) => !SKIP_TYPES.has(r.type) && !r.type.startsWith('aws_iam_'));
+
+    const nodes: ParsedInfraNode[] = [];
+    const attrIdToNodeId = new Map<string, string>();
+
+    for (const resource of filtered) {
+        const rawId = `${resource.type}_${resource.name}`;
+        const nodeId = sanitizeId(rawId);
+        const firstInstance = resource.instances[0];
+        const attrs = firstInstance && isTfStateResourceInstance(firstInstance) ? firstInstance.attributes : undefined;
+
+        const tagName = attrs?.tags?.['Name'];
+        const attrName = typeof attrs?.name === 'string' ? attrs.name : undefined;
+        const attrFunctionName = typeof attrs?.function_name === 'string' ? attrs.function_name : undefined;
+        const attrDbIdentifier = typeof attrs?.db_instance_identifier === 'string' ? attrs.db_instance_identifier : undefined;
+        const fallbackLabel = `${resource.type.split('_').slice(1).join(' ')}: ${resource.name}`;
+        const label = tagName ?? attrName ?? attrFunctionName ?? attrDbIdentifier ?? fallbackLabel;
+
+        nodes.push({
+            id: nodeId,
+            label,
+            nodeType: getNodeType(resource.type),
+            provider: resource.provider,
+            resourceType: resource.type,
+            resourceName: resource.name,
+        });
+
+        if (attrs?.id && typeof attrs.id === 'string') {
+            attrIdToNodeId.set(attrs.id, nodeId);
+        }
+    }
+
+    const edges: ParsedInfraEdge[] = [];
+    const addedEdges = new Set<string>();
+
+    function addEdge(from: string, to: string, label?: string): void {
+        const key = `${from}->${to}`;
+        if (!addedEdges.has(key) && from !== to) {
+            addedEdges.add(key);
+            edges.push({ from, to, label });
+        }
+    }
+
+    for (const resource of filtered) {
+        const rawId = `${resource.type}_${resource.name}`;
+        const nodeId = sanitizeId(rawId);
+        const firstInstance = resource.instances[0];
+        if (!firstInstance || !isTfStateResourceInstance(firstInstance)) continue;
+        const attrs = firstInstance.attributes;
+
+        if (typeof attrs.vpc_id === 'string') {
+            const target = attrIdToNodeId.get(attrs.vpc_id);
+            if (target) addEdge(target, nodeId);
+        }
+
+        if (typeof attrs.load_balancer_arn === 'string') {
+            const target = attrIdToNodeId.get(attrs.load_balancer_arn);
+            if (target) addEdge(target, nodeId);
+        }
+
+        if (Array.isArray(attrs.load_balancer_arns)) {
+            for (const arn of attrs.load_balancer_arns) {
+                if (typeof arn === 'string') {
+                    const target = attrIdToNodeId.get(arn);
+                    if (target) addEdge(target, nodeId);
+                }
+            }
+        }
+
+        if (typeof attrs.cluster_id === 'string') {
+            const target = attrIdToNodeId.get(attrs.cluster_id);
+            if (target) addEdge(target, nodeId);
+        }
+
+        if (typeof attrs.cluster_arn === 'string') {
+            const target = attrIdToNodeId.get(attrs.cluster_arn);
+            if (target) addEdge(target, nodeId);
+        }
+
+        if (typeof attrs.db_instance_identifier === 'string') {
+            const target = attrIdToNodeId.get(attrs.db_instance_identifier);
+            if (target) addEdge(target, nodeId);
+        }
+    }
+
+    return {
+        nodes,
+        edges,
+        resourceCount: nodes.length,
+        provider: detectProvider(validResources),
+        lastParsed: Date.now(),
+    };
+}
diff --git a/src/services/infraSync/types.ts b/src/services/infraSync/types.ts
new file mode 100644
index 0000000..0a7deca
--- /dev/null
+++ b/src/services/infraSync/types.ts
@@ -0,0 +1,25 @@
+export type InfraProvider = 'aws' | 'gcp' | 'azure' | 'kubernetes' | 'docker-compose' | 'mixed';
+export type InfraFormat = 'terraform-state' | 'kubernetes' | 'docker-compose' | 'terraform-hcl';
+
+export interface ParsedInfraNode {
+    id: string;
+    label: string;
+    nodeType: string;
+    provider: string;
+    resourceType: string;
+    resourceName: string;
+}
+
+export interface ParsedInfraEdge {
+    from: string;
+    to: string;
+    label?: string;
+}
+
+export interface InfraSyncResult {
+    nodes: ParsedInfraNode[];
+    edges: ParsedInfraEdge[];
+    resourceCount: number;
+    provider: InfraProvider;
+    lastParsed: number;
+}
diff --git a/src/services/mermaid/parseMermaidByType.ts b/src/services/mermaid/parseMermaidByType.ts
index 23c479e..e20d21b 100644
--- a/src/services/mermaid/parseMermaidByType.ts
+++ b/src/services/mermaid/parseMermaidByType.ts
@@ -1,6 +1,5 @@
 import type { DiagramType } from '@/lib/types';
 import { parseMermaid, type ParseResult } from '@/lib/mermaidParser';
-import { ROLLOUT_FLAGS } from '@/config/rolloutFlags';
 import { getDiagramPlugin } from '@/diagram-types/core';
 import { registerBuiltInDiagramPlugins } from '@/diagram-types/registerBuiltInPlugins';
 import { detectMermaidDiagramType } from './detectDiagramType';
@@ -84,7 +83,7 @@ export function parseMermaidByType(
     };
   }
 
-  const canUsePluginDispatch = detectedType !== 'stateDiagram' || ROLLOUT_FLAGS.stateDiagramV1;
+  const canUsePluginDispatch = true;
   if (canUsePluginDispatch) {
     const plugin = getDiagramPlugin(detectedType);
     if (plugin) {
diff --git a/src/services/offline/registerAppShellServiceWorker.test.ts b/src/services/offline/registerAppShellServiceWorker.test.ts
new file mode 100644
index 0000000..d2ddd20
--- /dev/null
+++ b/src/services/offline/registerAppShellServiceWorker.test.ts
@@ -0,0 +1,10 @@
+import { describe, expect, it } from 'vitest';
+import { offlineRegistrationInternals } from './registerAppShellServiceWorker';
+
+describe('registerAppShellServiceWorker', () => {
+  it('resolves the service worker path from the Vite base URL', () => {
+    expect(offlineRegistrationInternals.resolveServiceWorkerUrl('/')).toBe('/sw.js');
+    expect(offlineRegistrationInternals.resolveServiceWorkerUrl('./')).toBe('./sw.js');
+    expect(offlineRegistrationInternals.resolveServiceWorkerUrl('/app')).toBe('/app/sw.js');
+  });
+});
diff --git a/src/services/offline/registerAppShellServiceWorker.ts b/src/services/offline/registerAppShellServiceWorker.ts
new file mode 100644
index 0000000..33d2f96
--- /dev/null
+++ b/src/services/offline/registerAppShellServiceWorker.ts
@@ -0,0 +1,35 @@
+function resolveServiceWorkerUrl(baseUrl: string): string {
+  const normalizedBaseUrl = baseUrl.endsWith('/') ? baseUrl : `${baseUrl}/`;
+  return `${normalizedBaseUrl}sw.js`;
+}
+
+function shouldRegisterServiceWorker(): boolean {
+  return typeof window !== 'undefined'
+    && typeof navigator !== 'undefined'
+    && 'serviceWorker' in navigator
+    && import.meta.env.PROD;
+}
+
+export function registerAppShellServiceWorker(): void {
+  if (!shouldRegisterServiceWorker()) {
+    return;
+  }
+
+  const serviceWorkerUrl = resolveServiceWorkerUrl(import.meta.env.BASE_URL);
+  const register = (): void => {
+    void navigator.serviceWorker.register(serviceWorkerUrl, {
+      scope: import.meta.env.BASE_URL,
+    });
+  };
+
+  if (document.readyState === 'complete') {
+    register();
+    return;
+  }
+
+  window.addEventListener('load', register, { once: true });
+}
+
+export const offlineRegistrationInternals = {
+  resolveServiceWorkerUrl,
+};
diff --git a/src/services/onboarding/config.ts b/src/services/onboarding/config.ts
new file mode 100644
index 0000000..f49dda2
--- /dev/null
+++ b/src/services/onboarding/config.ts
@@ -0,0 +1,41 @@
+export interface OnboardingImportOption {
+  id: 'mermaid' | 'sql' | 'openapi' | 'json-openflow';
+  label: string;
+  description: string;
+}
+
+export const RECOMMENDED_STARTER_TEMPLATE_LABELS = [
+  'CI/CD release train',
+  'AWS event-driven API',
+  'API handoff sequence',
+  'Engineering strategy mind map',
+] as const;
+
+export const RECOMMENDED_IMPORT_OPTIONS: OnboardingImportOption[] = [
+  {
+    id: 'mermaid',
+    label: 'Mermaid',
+    description: 'Paste a flowchart, state, class, ER, or sequence diagram.',
+  },
+  {
+    id: 'sql',
+    label: 'SQL',
+    description: 'Turn DDL into an editable ER diagram.',
+  },
+  {
+    id: 'openapi',
+    label: 'OpenAPI',
+    description: 'Generate a sequence or API flow from a spec.',
+  },
+  {
+    id: 'json-openflow',
+    label: 'JSON / OpenFlow',
+    description: 'Reopen a saved workspace or portable DSL file.',
+  },
+];
+
+export const RECOMMENDED_BUILDER_PROMPTS = [
+  'Generate a microservices checkout architecture with API Gateway, auth, orders, payments, Redis, and Postgres.',
+  'Model a CI/CD pipeline from pull request to canary release with rollback checks.',
+  'Create a sequence diagram for an API request that validates auth, calls a worker, and stores the result.',
+] as const;
diff --git a/src/services/onboarding/events.test.ts b/src/services/onboarding/events.test.ts
new file mode 100644
index 0000000..7cff25c
--- /dev/null
+++ b/src/services/onboarding/events.test.ts
@@ -0,0 +1,28 @@
+import { beforeEach, describe, expect, it } from 'vitest';
+import { clearOnboardingEvents, getOnboardingEvents, recordOnboardingEvent } from './events';
+
+describe('onboarding events', () => {
+  beforeEach(() => {
+    localStorage.clear();
+    clearOnboardingEvents();
+  });
+
+  it('marks the first occurrence of an event type', () => {
+    const first = recordOnboardingEvent('welcome_template_selected', { source: 'welcome-modal' });
+    const second = recordOnboardingEvent('welcome_template_selected', { source: 'home-empty' });
+
+    expect(first.first).toBe(true);
+    expect(second.first).toBe(false);
+    expect(getOnboardingEvents()).toHaveLength(2);
+  });
+
+  it('stores event detail for lightweight local instrumentation', () => {
+    recordOnboardingEvent('first_export_completed', { format: 'cinematic-video' });
+
+    expect(getOnboardingEvents()[0]).toMatchObject({
+      name: 'first_export_completed',
+      first: true,
+      detail: { format: 'cinematic-video' },
+    });
+  });
+});
diff --git a/src/services/onboarding/events.ts b/src/services/onboarding/events.ts
new file mode 100644
index 0000000..3c83bf7
--- /dev/null
+++ b/src/services/onboarding/events.ts
@@ -0,0 +1,107 @@
+export type OnboardingEventName =
+  | 'welcome_template_selected'
+  | 'welcome_import_selected'
+  | 'welcome_blank_selected'
+  | 'welcome_prompt_selected'
+  | 'template_inserted'
+  | 'ai_key_saved'
+  | 'first_export_completed'
+  | 'first_share_opened';
+
+export interface OnboardingEvent {
+  name: OnboardingEventName;
+  at: string;
+  first: boolean;
+  detail?: Record<string, string | number | boolean>;
+}
+
+const EVENT_LOG_STORAGE_KEY = 'openflowkit_onboarding_events';
+const EVENT_FIRST_SEEN_STORAGE_KEY = 'openflowkit_onboarding_event_firsts';
+const MAX_STORED_EVENTS = 100;
+
+function readStorageValue(key: string): string | null {
+  if (typeof window === 'undefined') return null;
+  try {
+    return window.localStorage.getItem(key);
+  } catch {
+    return null;
+  }
+}
+
+function writeStorageValue(key: string, value: string): void {
+  if (typeof window === 'undefined') return;
+  try {
+    window.localStorage.setItem(key, value);
+  } catch {
+    // Ignore local-only instrumentation failures.
+  }
+}
+
+function readEventLog(): OnboardingEvent[] {
+  const raw = readStorageValue(EVENT_LOG_STORAGE_KEY);
+  if (!raw) return [];
+
+  try {
+    const parsed = JSON.parse(raw);
+    return Array.isArray(parsed) ? (parsed as OnboardingEvent[]) : [];
+  } catch {
+    return [];
+  }
+}
+
+function readFirstSeenMap(): Partial<Record<OnboardingEventName, true>> {
+  const raw = readStorageValue(EVENT_FIRST_SEEN_STORAGE_KEY);
+  if (!raw) return {};
+
+  try {
+    const parsed = JSON.parse(raw);
+    return parsed && typeof parsed === 'object'
+      ? (parsed as Partial<Record<OnboardingEventName, true>>)
+      : {};
+  } catch {
+    return {};
+  }
+}
+
+export function recordOnboardingEvent(
+  name: OnboardingEventName,
+  detail?: Record<string, string | number | boolean>
+): OnboardingEvent {
+  const firstSeen = readFirstSeenMap();
+  const event: OnboardingEvent = {
+    name,
+    at: new Date().toISOString(),
+    first: firstSeen[name] !== true,
+    detail,
+  };
+
+  const events = readEventLog();
+  const nextEvents = [...events, event].slice(-MAX_STORED_EVENTS);
+  writeStorageValue(EVENT_LOG_STORAGE_KEY, JSON.stringify(nextEvents));
+
+  if (event.first) {
+    writeStorageValue(
+      EVENT_FIRST_SEEN_STORAGE_KEY,
+      JSON.stringify({
+        ...firstSeen,
+        [name]: true,
+      })
+    );
+  }
+
+  return event;
+}
+
+export function getOnboardingEvents(): OnboardingEvent[] {
+  return readEventLog();
+}
+
+export function clearOnboardingEvents(): void {
+  if (typeof window === 'undefined') return;
+  try {
+    window.localStorage.removeItem(EVENT_LOG_STORAGE_KEY);
+    window.localStorage.removeItem(EVENT_FIRST_SEEN_STORAGE_KEY);
+  } catch {
+    // Ignore cleanup failures in local-only instrumentation.
+  }
+}
diff --git a/src/services/openFlowDSLExporter.ts b/src/services/openFlowDSLExporter.ts
index 6ebf207..35d7bba 100644
--- a/src/services/openFlowDSLExporter.ts
+++ b/src/services/openFlowDSLExporter.ts
@@ -40,6 +40,7 @@ const NODE_ATTRIBUTE_KEYS = [
     'mindmapSide',
     'mindmapBranchStyle',
     'archProvider',
+    'archProviderLabel',
     'archResourceType',
     'archEnvironment',
     'archBoundaryId',
@@ -63,10 +64,11 @@ const EDGE_ATTRIBUTE_KEYS = [
     'classRelationLabel',
     'erRelation',
     'erRelationLabel',
+    'connectionType',
 ] as const;
 
 /**
- * Export FlowMind nodes/edges to our custom DSL V2 text format.
+ * Export nodes and edges to the OpenFlow DSL V2 text format.
  */
 export interface OpenFlowDSLExportOptions {
     mode?: ExportSerializationMode;
diff --git a/src/services/operationFeedback.ts b/src/services/operationFeedback.ts
new file mode 100644
index 0000000..cfd56be
--- /dev/null
+++ b/src/services/operationFeedback.ts
@@ -0,0 +1,44 @@
+import type { ImportFidelityReport } from '@/services/importFidelity';
+import { summarizeImportReport } from '@/services/importFidelity';
+
+export type OperationToastType = 'success' | 'error' | 'info' | 'warning';
+
+export type OperationToast = (
+  message: string,
+  type?: OperationToastType,
+  duration?: number
+) => void;
+
+export interface OperationOutcome {
+  status: OperationToastType;
+  summary: string;
+  detail?: string;
+  duration?: number;
+}
+
+export function notifyOperationOutcome(
+  addToast: OperationToast,
+  outcome: OperationOutcome
+): void {
+  addToast(outcome.summary, outcome.status, outcome.duration);
+  if (outcome.detail && outcome.detail !== outcome.summary) {
+    addToast(outcome.detail, outcome.status, outcome.duration);
+  }
+}
+
+export function createImportReportOutcome(
+  report: ImportFidelityReport,
+  detail?: string
+): OperationOutcome {
+  const status: OperationToastType = report.summary.errorCount > 0
+    ? 'error'
+    : report.summary.warningCount > 0
+      ? 'warning'
+      : 'success';
+
+  return {
+    status,
+    summary: summarizeImportReport(report),
+    detail,
+  };
+}
diff --git a/src/services/sequence/sequenceMessage.test.ts b/src/services/sequence/sequenceMessage.test.ts
new file mode 100644
index 0000000..f50defe
--- /dev/null
+++ b/src/services/sequence/sequenceMessage.test.ts
@@ -0,0 +1,115 @@
+import { describe, expect, it } from 'vitest';
+import type { Connection } from '@/lib/reactflowCompat';
+import type { FlowEdge, FlowNode } from '@/lib/types';
+import {
+  buildSequenceMessageEdge,
+  DEFAULT_SEQUENCE_MESSAGE_LABEL,
+  getNextSequenceMessageOrder,
+  isSequenceConnection,
+  syncSequenceEdgeParticipantKinds,
+} from './sequenceMessage';
+
+function createParticipantNode(
+  id: string,
+  kind: 'participant' | 'actor' = 'participant'
+): FlowNode {
+  return {
+    id,
+    type: 'sequence_participant',
+    position: { x: 0, y: 0 },
+    data: {
+      label: id,
+      seqParticipantKind: kind,
+    },
+  } as FlowNode;
+}
+
+function createSequenceEdge(
+  id: string,
+  source: string,
+  target: string,
+  order: number,
+  sourceIsActor = false,
+  targetIsActor = false
+): FlowEdge {
+  return {
+    id,
+    source,
+    target,
+    type: 'sequence_message',
+    label: 'Message',
+    data: {
+      seqMessageKind: 'sync',
+      seqMessageOrder: order,
+      sourceIsActor,
+      targetIsActor,
+    },
+  } as FlowEdge;
+}
+
+describe('sequenceMessage helpers', () => {
+  it('builds a default labeled sequence message with the next stable order', () => {
+    const connection: Connection = {
+      source: 'client',
+      target: 'api',
+      sourceHandle: null,
+      targetHandle: null,
+    };
+    const existingEdges = [
+      createSequenceEdge('e-1', 'a', 'b', 0),
+      createSequenceEdge('e-2', 'b', 'c', 3),
+    ];
+
+    const edge = buildSequenceMessageEdge(
+      connection,
+      createParticipantNode('client', 'actor'),
+      createParticipantNode('api'),
+      existingEdges,
+    );
+
+    expect(edge.label).toBe(DEFAULT_SEQUENCE_MESSAGE_LABEL);
+    expect(edge.data?.seqMessageOrder).toBe(4);
+    expect(edge.data?.sourceIsActor).toBe(true);
+    expect(edge.data?.targetIsActor).toBe(false);
+    expect(edge.sourceHandle).toBe('top');
+    expect(edge.targetHandle).toBe('top');
+  });
+
+  it('detects valid sequence participant connections only', () => {
+    expect(isSequenceConnection(
+      createParticipantNode('a'),
+      createParticipantNode('b'),
+      { source: 'a', target: 'b', sourceHandle: null, targetHandle: null },
+    )).toBe(true);
+
+    expect(isSequenceConnection(
+      createParticipantNode('a'),
+      { id: 'b', type: 'process', position: { x: 0, y: 0 }, data: { label: 'B' } } as FlowNode,
+      { source: 'a', target: 'b', sourceHandle: null, targetHandle: null },
+    )).toBe(false);
+  });
+
+  it('returns the next order after the highest existing sequence order', () => {
+    expect(getNextSequenceMessageOrder([
+      createSequenceEdge('e-1', 'a', 'b', 2),
+      { id: 'other', source: 'x', target: 'y', type: 'default' } as FlowEdge,
+      createSequenceEdge('e-2', 'b', 'c', 7),
+    ])).toBe(8);
+  });
+
+  it('syncs edge actor flags when participant kinds change', () => {
+    const nodes = [
+      createParticipantNode('client', 'actor'),
+      createParticipantNode('api', 'participant'),
+    ];
+    const edges = [
+      createSequenceEdge('seq-1', 'client', 'api', 0, false, true),
+    ];
+
+    const nextEdges = syncSequenceEdgeParticipantKinds(nodes, edges);
+
+    expect(nextEdges).not.toBe(edges);
+    expect(nextEdges[0].data?.sourceIsActor).toBe(true);
+    expect(nextEdges[0].data?.targetIsActor).toBe(false);
+  });
+});
diff --git a/src/services/sequence/sequenceMessage.ts b/src/services/sequence/sequenceMessage.ts
new file mode 100644
index 0000000..10ba1cf
--- /dev/null
+++ b/src/services/sequence/sequenceMessage.ts
@@ -0,0 +1,100 @@
+import type { Connection } from '@/lib/reactflowCompat';
+import type { FlowEdge, FlowNode } from '@/lib/types';
+
+export const DEFAULT_SEQUENCE_MESSAGE_LABEL = 'Message';
+
+function isSequenceParticipantNode(node: FlowNode | undefined): node is FlowNode {
+  return node?.type === 'sequence_participant';
+}
+
+function isSequenceMessageEdge(edge: FlowEdge): boolean {
+  return edge.type === 'sequence_message';
+}
+
+function getSequenceParticipantKind(node: FlowNode | undefined): 'participant' | 'actor' {
+  return node?.data.seqParticipantKind === 'actor' ? 'actor' : 'participant';
+}
+
+export function getNextSequenceMessageOrder(edges: FlowEdge[]): number {
+  return edges.reduce((maxOrder, edge) => {
+    if (!isSequenceMessageEdge(edge)) {
+      return maxOrder;
+    }
+
+    const order = typeof edge.data?.seqMessageOrder === 'number' ? edge.data.seqMessageOrder : -1;
+    return Math.max(maxOrder, order);
+  }, -1) + 1;
+}
+
+export function isSequenceConnection(
+  sourceNode: FlowNode | undefined,
+  targetNode: FlowNode | undefined,
+  connection: Connection
+): boolean {
+  return Boolean(
+    isSequenceParticipantNode(sourceNode)
+      && isSequenceParticipantNode(targetNode)
+      && connection.source
+      && connection.target
+  );
+}
+
+export function buildSequenceMessageEdge(
+  connection: Connection,
+  sourceNode: FlowNode,
+  targetNode: FlowNode,
+  existingEdges: FlowEdge[],
+  defaultLabel = DEFAULT_SEQUENCE_MESSAGE_LABEL
+): FlowEdge {
+  const nextOrder = getNextSequenceMessageOrder(existingEdges);
+
+  return {
+    id: `e-seq-${connection.source}-${connection.target}-${nextOrder}`,
+    source: connection.source!,
+    target: connection.target!,
+    sourceHandle: 'top',
+    targetHandle: 'top',
+    type: 'sequence_message',
+    label: defaultLabel,
+    data: {
+      seqMessageKind: 'sync',
+      seqMessageOrder: nextOrder,
+      sourceIsActor: getSequenceParticipantKind(sourceNode) === 'actor',
+      targetIsActor: getSequenceParticipantKind(targetNode) === 'actor',
+    },
+  } as FlowEdge;
+}
+
+export function syncSequenceEdgeParticipantKinds(nodes: FlowNode[], edges: FlowEdge[]): FlowEdge[] {
+  const nodeById = new Map(nodes.map((node) => [node.id, node]));
+  let changed = false;
+
+  const nextEdges = edges.map((edge) => {
+    if (!isSequenceMessageEdge(edge)) {
+      return edge;
+    }
+
+    const sourceKind = getSequenceParticipantKind(nodeById.get(edge.source));
+    const targetKind = getSequenceParticipantKind(nodeById.get(edge.target));
+    const nextData = {
+      ...edge.data,
+      sourceIsActor: sourceKind === 'actor',
+      targetIsActor: targetKind === 'actor',
+    };
+
+    if (
+      edge.data?.sourceIsActor === nextData.sourceIsActor
+      && edge.data?.targetIsActor === nextData.targetIsActor
+    ) {
+      return edge;
+    }
+
+    changed = true;
+    return {
+      ...edge,
+      data: nextData,
+    };
+  });
+
+  return changed ? nextEdges : edges;
+}
diff --git a/src/services/shapeLibrary/bootstrap.test.ts b/src/services/shapeLibrary/bootstrap.test.ts
index badbb68..d003684 100644
--- a/src/services/shapeLibrary/bootstrap.test.ts
+++ b/src/services/shapeLibrary/bootstrap.test.ts
@@ -6,13 +6,8 @@ import {
 } from './bootstrap';
 
 describe('shape library bootstrap', () => {
-    it('returns an empty runtime registry when flag is disabled', () => {
-        const registry = createRuntimeShapePackRegistry(false);
-        expect(registry.listPacks()).toEqual([]);
-    });
-
-    it('returns starter packs when flag is enabled', () => {
-        const registry = createRuntimeShapePackRegistry(true);
+    it('returns starter packs from the runtime registry', () => {
+        const registry = createRuntimeShapePackRegistry();
         const packIds = registry.listPacks().map((pack) => pack.id);
 
         expect(packIds).toEqual(['starter-core-v1']);
diff --git a/src/services/shapeLibrary/bootstrap.ts b/src/services/shapeLibrary/bootstrap.ts
index e6a7ab7..2d60165 100644
--- a/src/services/shapeLibrary/bootstrap.ts
+++ b/src/services/shapeLibrary/bootstrap.ts
@@ -1,19 +1,15 @@
-import { ROLLOUT_FLAGS } from '@/config/rolloutFlags';
 import { createShapePackRegistry, type ShapePackRegistry } from './registry';
 import { STARTER_SHAPE_PACKS } from './starterPacks';
 
 let runtimeRegistry: ShapePackRegistry | null = null;
 
-export function createRuntimeShapePackRegistry(shapeLibraryEnabled: boolean): ShapePackRegistry {
-    if (!shapeLibraryEnabled) {
-        return createShapePackRegistry();
-    }
+export function createRuntimeShapePackRegistry(): ShapePackRegistry {
     return createShapePackRegistry(STARTER_SHAPE_PACKS);
 }
 
 export function getRuntimeShapePackRegistry(): ShapePackRegistry {
     if (!runtimeRegistry) {
-        runtimeRegistry = createRuntimeShapePackRegistry(ROLLOUT_FLAGS.shapeLibraryV1);
+        runtimeRegistry = createRuntimeShapePackRegistry();
     }
     return runtimeRegistry;
 }
diff --git a/src/services/smartEdgeRouting.ts b/src/services/smartEdgeRouting.ts
index e2ab61b..0d03eba 100644
--- a/src/services/smartEdgeRouting.ts
+++ b/src/services/smartEdgeRouting.ts
@@ -143,7 +143,7 @@ function resolveAutoHandleSides(
     return { sourceHandleSide: 'left', targetHandleSide: 'right' };
 }
 
-function buildRoutingContext(nodes: FlowNode[], edges: FlowEdge[]): RoutingContext {
+function buildRoutingContext(nodes: FlowNode[], _edges: FlowEdge[]): RoutingContext {
     const nodeMap = new Map<string, FlowNode>();
     for (const node of nodes) {
         nodeMap.set(node.id, node);
diff --git a/src/services/storage/flowPersistStorage.test.ts b/src/services/storage/flowPersistStorage.test.ts
index fb91a69..fa64983 100644
--- a/src/services/storage/flowPersistStorage.test.ts
+++ b/src/services/storage/flowPersistStorage.test.ts
@@ -1,5 +1,4 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-import { ROLLOUT_FLAGS } from '@/config/rolloutFlags';
 import { createFlowPersistStorage } from './flowPersistStorage';
 import { ensureFlowPersistenceSchema } from './indexedDbSchema';
 
@@ -8,7 +7,6 @@ vi.mock('./indexedDbSchema', () => ({
 }));
 
 describe('flowPersistStorage', () => {
-  const originalFlag = ROLLOUT_FLAGS.indexedDbStorageV1;
   const originalIndexedDb = globalThis.indexedDB;
   const originalLocalStorage = globalThis.localStorage;
 
@@ -18,7 +16,6 @@ describe('flowPersistStorage', () => {
 
   afterEach(() => {
     vi.useRealTimers();
-    ROLLOUT_FLAGS.indexedDbStorageV1 = originalFlag;
     vi.mocked(ensureFlowPersistenceSchema).mockClear();
     if (typeof originalIndexedDb === 'undefined') {
       // `delete` is required to restore the undefined global.
@@ -29,9 +26,8 @@ describe('flowPersistStorage', () => {
     globalThis.localStorage = originalLocalStorage;
   });
 
-  it('uses localStorage storage path when indexedDbStorageV1 is disabled', () => {
-    ROLLOUT_FLAGS.indexedDbStorageV1 = false;
-    globalThis.indexedDB = {} as IDBFactory;
+  it('uses localStorage storage path when IndexedDB is unavailable', () => {
+    delete (globalThis as { indexedDB?: IDBFactory }).indexedDB;
 
     const storage = createFlowPersistStorage();
 
@@ -40,8 +36,7 @@ describe('flowPersistStorage', () => {
     expect(ensureFlowPersistenceSchema).not.toHaveBeenCalled();
   });
 
-  it('attempts IndexedDB schema init when indexedDbStorageV1 is enabled', () => {
-    ROLLOUT_FLAGS.indexedDbStorageV1 = true;
+  it('attempts IndexedDB schema init when IndexedDB is available', () => {
     globalThis.indexedDB = {} as IDBFactory;
 
     createFlowPersistStorage();
@@ -50,7 +45,6 @@ describe('flowPersistStorage', () => {
   });
 
   it('does not attempt schema init when IndexedDB is unavailable', () => {
-    ROLLOUT_FLAGS.indexedDbStorageV1 = true;
     delete (globalThis as { indexedDB?: IDBFactory }).indexedDB;
 
     createFlowPersistStorage();
@@ -59,7 +53,7 @@ describe('flowPersistStorage', () => {
   });
 
   it('debounces rapid writes before hitting the underlying storage', async () => {
-    ROLLOUT_FLAGS.indexedDbStorageV1 = false;
+    delete (globalThis as { indexedDB?: IDBFactory }).indexedDB;
     const setItem = vi.fn();
     globalThis.localStorage = {
       getItem: vi.fn(() => null),
@@ -84,7 +78,7 @@ describe('flowPersistStorage', () => {
   });
 
   it('flushes a pending write before reading the same key', async () => {
-    ROLLOUT_FLAGS.indexedDbStorageV1 = false;
+    delete (globalThis as { indexedDB?: IDBFactory }).indexedDB;
     const setItem = vi.fn();
     const getItem = vi.fn(() => '{"state":{"activeTabId":"tab-2"},"version":1}');
     globalThis.localStorage = {
diff --git a/src/services/storage/flowPersistStorage.ts b/src/services/storage/flowPersistStorage.ts
index 289bac3..5bbf606 100644
--- a/src/services/storage/flowPersistStorage.ts
+++ b/src/services/storage/flowPersistStorage.ts
@@ -1,4 +1,3 @@
-import { ROLLOUT_FLAGS } from '@/config/rolloutFlags';
 import { createJSONStorage, type PersistStorage, type StateStorage } from 'zustand/middleware';
 import type { PersistedFlowStateSlice } from '@/store/persistence';
 import { ensureFlowPersistenceSchema } from './indexedDbSchema';
@@ -126,7 +125,7 @@ function resolveStateStorage(): StateStorage {
   const localStorageRef = typeof localStorage === 'undefined' ? null : localStorage;
   const indexedDbFactory = getBrowserIndexedDbFactory();
 
-  if (!ROLLOUT_FLAGS.indexedDbStorageV1 || !indexedDbFactory) {
+  if (!indexedDbFactory) {
     return getBrowserLocalStorage();
   }
 
@@ -137,7 +136,6 @@ function resolveStateStorage(): StateStorage {
 }
 
 export function initializeIndexedDbSchemaScaffold(): void {
-  if (!ROLLOUT_FLAGS.indexedDbStorageV1) return;
   const indexedDbFactory = getBrowserIndexedDbFactory();
   if (!indexedDbFactory) return;
 
diff --git a/src/services/storage/indexedDbSchema.test.ts b/src/services/storage/indexedDbSchema.test.ts
index e25c67b..8853370 100644
--- a/src/services/storage/indexedDbSchema.test.ts
+++ b/src/services/storage/indexedDbSchema.test.ts
@@ -1,7 +1,15 @@
 import { describe, expect, it, vi } from 'vitest';
 import {
+  AI_SETTINGS_PERSISTENT_STORE_NAME,
+  ASSETS_STORE_NAME,
+  CHAT_MESSAGES_STORE_NAME,
+  CHAT_THREADS_STORE_NAME,
+  DOCUMENT_SESSIONS_STORE_NAME,
   FLOW_DOCUMENT_STORE_NAME,
   FLOW_METADATA_STORE_NAME,
+  PERSISTED_DOCUMENTS_STORE_NAME,
+  PREFERENCES_STORE_NAME,
+  WORKSPACE_META_STORE_NAME,
   ensureFlowPersistenceSchema,
 } from './indexedDbSchema';
 
@@ -60,11 +68,30 @@ describe('indexedDbSchema', () => {
 
     expect(mock.createObjectStore).toHaveBeenCalledWith(FLOW_DOCUMENT_STORE_NAME, { keyPath: 'id' });
     expect(mock.createObjectStore).toHaveBeenCalledWith(FLOW_METADATA_STORE_NAME, { keyPath: 'id' });
+    expect(mock.createObjectStore).toHaveBeenCalledWith(PERSISTED_DOCUMENTS_STORE_NAME, { keyPath: 'id' });
+    expect(mock.createObjectStore).toHaveBeenCalledWith(DOCUMENT_SESSIONS_STORE_NAME, { keyPath: 'id' });
+    expect(mock.createObjectStore).toHaveBeenCalledWith(CHAT_THREADS_STORE_NAME, { keyPath: 'id' });
+    expect(mock.createObjectStore).toHaveBeenCalledWith(CHAT_MESSAGES_STORE_NAME, { keyPath: 'id' });
+    expect(mock.createObjectStore).toHaveBeenCalledWith(WORKSPACE_META_STORE_NAME, { keyPath: 'id' });
+    expect(mock.createObjectStore).toHaveBeenCalledWith(AI_SETTINGS_PERSISTENT_STORE_NAME, { keyPath: 'id' });
+    expect(mock.createObjectStore).toHaveBeenCalledWith(PREFERENCES_STORE_NAME, { keyPath: 'id' });
+    expect(mock.createObjectStore).toHaveBeenCalledWith(ASSETS_STORE_NAME, { keyPath: 'id' });
     expect(mock.close).toHaveBeenCalledTimes(1);
   });
 
   it('does not recreate stores that already exist', async () => {
-    const mock = createMockIndexedDbFactory([FLOW_DOCUMENT_STORE_NAME, FLOW_METADATA_STORE_NAME]);
+    const mock = createMockIndexedDbFactory([
+      FLOW_DOCUMENT_STORE_NAME,
+      FLOW_METADATA_STORE_NAME,
+      PERSISTED_DOCUMENTS_STORE_NAME,
+      DOCUMENT_SESSIONS_STORE_NAME,
+      CHAT_THREADS_STORE_NAME,
+      CHAT_MESSAGES_STORE_NAME,
+      WORKSPACE_META_STORE_NAME,
+      AI_SETTINGS_PERSISTENT_STORE_NAME,
+      PREFERENCES_STORE_NAME,
+      ASSETS_STORE_NAME,
+    ]);
 
     await ensureFlowPersistenceSchema(mock.factory);
 
diff --git a/src/services/storage/indexedDbSchema.ts b/src/services/storage/indexedDbSchema.ts
index b82f733..3e0d295 100644
--- a/src/services/storage/indexedDbSchema.ts
+++ b/src/services/storage/indexedDbSchema.ts
@@ -1,7 +1,15 @@
 export const FLOW_PERSISTENCE_DB_NAME = 'openflowkit-persistence';
-export const FLOW_PERSISTENCE_DB_VERSION = 1;
+export const FLOW_PERSISTENCE_DB_VERSION = 2;
 export const FLOW_DOCUMENT_STORE_NAME = 'flowDocuments';
 export const FLOW_METADATA_STORE_NAME = 'flowMetadata';
+export const PERSISTED_DOCUMENTS_STORE_NAME = 'documents';
+export const DOCUMENT_SESSIONS_STORE_NAME = 'documentSessions';
+export const CHAT_THREADS_STORE_NAME = 'chatThreads';
+export const CHAT_MESSAGES_STORE_NAME = 'chatMessages';
+export const WORKSPACE_META_STORE_NAME = 'workspaceMeta';
+export const AI_SETTINGS_PERSISTENT_STORE_NAME = 'aiSettingsPersistent';
+export const PREFERENCES_STORE_NAME = 'preferences';
+export const ASSETS_STORE_NAME = 'assets';
 
 function ensureObjectStore(database: IDBDatabase, storeName: string): void {
   if (!database.objectStoreNames.contains(storeName)) {
@@ -21,6 +29,14 @@ export function openFlowPersistenceDatabase(indexedDbFactory: IDBFactory): Promi
       const database = request.result;
       ensureObjectStore(database, FLOW_DOCUMENT_STORE_NAME);
       ensureObjectStore(database, FLOW_METADATA_STORE_NAME);
+      ensureObjectStore(database, PERSISTED_DOCUMENTS_STORE_NAME);
+      ensureObjectStore(database, DOCUMENT_SESSIONS_STORE_NAME);
+      ensureObjectStore(database, CHAT_THREADS_STORE_NAME);
+      ensureObjectStore(database, CHAT_MESSAGES_STORE_NAME);
+      ensureObjectStore(database, WORKSPACE_META_STORE_NAME);
+      ensureObjectStore(database, AI_SETTINGS_PERSISTENT_STORE_NAME);
+      ensureObjectStore(database, PREFERENCES_STORE_NAME);
+      ensureObjectStore(database, ASSETS_STORE_NAME);
     };
 
     request.onsuccess = () => {
diff --git a/src/services/storage/localFirstRepository.ts b/src/services/storage/localFirstRepository.ts
new file mode 100644
index 0000000..b8699a1
--- /dev/null
+++ b/src/services/storage/localFirstRepository.ts
@@ -0,0 +1,534 @@
+import type { FlowTab } from '@/lib/types';
+import type { ChatMessage } from '@/services/aiService';
+import {
+  AI_SETTINGS_PERSISTENT_STORE_NAME,
+  CHAT_MESSAGES_STORE_NAME,
+  CHAT_THREADS_STORE_NAME,
+  DOCUMENT_SESSIONS_STORE_NAME,
+  PERSISTED_DOCUMENTS_STORE_NAME,
+  WORKSPACE_META_STORE_NAME,
+  openFlowPersistenceDatabase,
+} from './indexedDbSchema';
+import { readLocalStorageJson, readLocalStorageString, removeLocalStorageKey, writeLocalStorageJson, writeLocalStorageString } from './uiLocalStorage';
+import { reportStorageTelemetry } from './storageTelemetry';
+
+const WORKSPACE_META_ID = 'workspace';
+const AI_SETTINGS_STORAGE_KEY = 'openflowkit-ai-settings';
+const DOCUMENTS_FALLBACK_KEY = 'openflowkit-documents-fallback';
+const WORKSPACE_META_FALLBACK_KEY = 'openflowkit-workspace-meta-fallback';
+const CHAT_HISTORY_STORAGE_KEY_PREFIX = 'ofk_chat_history_';
+const PERSISTENT_AI_SETTINGS_RECORD_ID = 'default';
+
+export interface PersistedDocumentContent {
+  nodes: FlowTab['nodes'];
+  edges: FlowTab['edges'];
+  playback?: FlowTab['playback'];
+  history: FlowTab['history'];
+}
+
+export interface PersistedDocument {
+  id: string;
+  name: string;
+  diagramType?: FlowTab['diagramType'];
+  content: PersistedDocumentContent;
+  createdAt: string;
+  updatedAt: string;
+  deletedAt: string | null;
+}
+
+export interface PersistedDocumentSession {
+  id: string;
+  documentId: string;
+  camera?: unknown;
+  viewport?: unknown;
+  lastOpenedPanel?: string;
+  lastOpenedAt: string;
+}
+
+export interface PersistedChatThread {
+  id: string;
+  documentId: string;
+  updatedAt: string;
+}
+
+export interface PersistedChatMessage {
+  id: string;
+  documentId: string;
+  role: ChatMessage['role'];
+  parts: ChatMessage['parts'];
+  createdAt: string;
+}
+
+export interface WorkspaceMeta {
+  id: typeof WORKSPACE_META_ID;
+  activeDocumentId: string | null;
+  documentOrder: string[];
+  lastOpenedAt: string;
+}
+
+export interface PersistedAISettingsRecord {
+  id: 'default';
+  value: string;
+}
+
+export interface LoadedDocument {
+  document: PersistedDocument | null;
+  documents: PersistedDocument[];
+  workspaceMeta: WorkspaceMeta;
+}
+
+export interface PersistenceRepository {
+  loadActiveDocument(): Promise<LoadedDocument>;
+  saveDocument(documentId: string, content: PersistedDocumentContent): Promise<void>;
+  saveWorkspace(tabs: FlowTab[], activeDocumentId: string | null): Promise<void>;
+  deleteDocument(documentId: string): Promise<void>;
+  loadDocumentSession(documentId: string): Promise<PersistedDocumentSession | null>;
+  saveDocumentSession(session: PersistedDocumentSession): Promise<void>;
+  loadChatThread(documentId: string): Promise<PersistedChatMessage[]>;
+  saveChatMessage(documentId: string, message: PersistedChatMessage): Promise<void>;
+  replaceChatThread(documentId: string, messages: PersistedChatMessage[]): Promise<void>;
+  clearChatThread(documentId: string): Promise<void>;
+  loadPersistentAISettings(): Promise<string | null>;
+  savePersistentAISettings(serialized: string): Promise<void>;
+}
+
+type StoredRecord = { id: string };
+
+function requestToPromise<T>(request: IDBRequest<T>): Promise<T> {
+  return new Promise((resolve, reject) => {
+    request.onsuccess = () => resolve(request.result);
+    request.onerror = () => reject(request.error ?? new Error('IndexedDB request failed.'));
+  });
+}
+
+function getIndexedDbFactory(): IDBFactory | null {
+  if (typeof indexedDB === 'undefined') return null;
+  return indexedDB;
+}
+
+function createDefaultWorkspaceMeta(documentOrder: string[] = [], activeDocumentId: string | null = null): WorkspaceMeta {
+  return {
+    id: WORKSPACE_META_ID,
+    activeDocumentId,
+    documentOrder,
+    lastOpenedAt: new Date().toISOString(),
+  };
+}
+
+function getNowIso(): string {
+  return new Date().toISOString();
+}
+
+function toDocumentRecord(tab: FlowTab): PersistedDocument {
+  const nowIso = getNowIso();
+  return {
+    id: tab.id,
+    name: tab.name,
+    diagramType: tab.diagramType,
+    content: {
+      nodes: tab.nodes,
+      edges: tab.edges,
+      playback: tab.playback,
+      history: tab.history,
+    },
+    createdAt: tab.updatedAt ?? nowIso,
+    updatedAt: tab.updatedAt ?? nowIso,
+    deletedAt: null,
+  };
+}
+
+function toFlowTab(document: PersistedDocument): FlowTab {
+  return {
+    id: document.id,
+    name: document.name,
+    diagramType: document.diagramType,
+    updatedAt: document.updatedAt,
+    nodes: document.content.nodes,
+    edges: document.content.edges,
+    playback: document.content.playback,
+    history: document.content.history,
+  };
+}
+
+async function withDatabase<T>(handler: (database: IDBDatabase) => Promise<T>): Promise<T> {
+  const indexedDbFactory = getIndexedDbFactory();
+  if (!indexedDbFactory) {
+    throw new Error('IndexedDB is not available.');
+  }
+
+  const database = await openFlowPersistenceDatabase(indexedDbFactory);
+  try {
+    return await handler(database);
+  } finally {
+    database.close();
+  }
+}
+
+async function getAllRecords<T extends StoredRecord>(database: IDBDatabase, storeName: string): Promise<T[]> {
+  const transaction = database.transaction(storeName, 'readonly');
+  const store = transaction.objectStore(storeName);
+  const request = store.getAll() as IDBRequest<T[]>;
+  return requestToPromise(request);
+}
+
+async function getRecord<T>(database: IDBDatabase, storeName: string, id: string): Promise<T | null> {
+  const transaction = database.transaction(storeName, 'readonly');
+  const store = transaction.objectStore(storeName);
+  const request = store.get(id) as IDBRequest<T | undefined>;
+  const result = await requestToPromise(request);
+  return result ?? null;
+}
+
+async function putRecord<T>(database: IDBDatabase, storeName: string, value: T): Promise<void> {
+  const transaction = database.transaction(storeName, 'readwrite');
+  const store = transaction.objectStore(storeName);
+  await requestToPromise(store.put(value));
+}
+
+async function deleteRecord(database: IDBDatabase, storeName: string, id: string): Promise<void> {
+  const transaction = database.transaction(storeName, 'readwrite');
+  const store = transaction.objectStore(storeName);
+  await requestToPromise(store.delete(id));
+}
+
+async function deleteWhereDocumentId(
+  database: IDBDatabase,
+  storeName: string,
+  documentId: string,
+): Promise<void> {
+  const transaction = database.transaction(storeName, 'readwrite');
+  const store = transaction.objectStore(storeName);
+  const allRequest = store.getAll() as IDBRequest<Array<{ id: string; documentId?: string }>>;
+  const existing = await requestToPromise(allRequest);
+  await Promise.all(
+    existing
+      .filter((record) => record.documentId === documentId)
+      .map((record) => requestToPromise(store.delete(record.id)))
+  );
+}
+
+function loadFallbackDocuments(): PersistedDocument[] {
+  return readLocalStorageJson<PersistedDocument[]>(DOCUMENTS_FALLBACK_KEY, []);
+}
+
+function saveFallbackDocuments(documents: PersistedDocument[]): void {
+  writeLocalStorageJson(DOCUMENTS_FALLBACK_KEY, documents);
+}
+
+function loadFallbackWorkspaceMeta(): WorkspaceMeta {
+  return readLocalStorageJson<WorkspaceMeta>(WORKSPACE_META_FALLBACK_KEY, createDefaultWorkspaceMeta());
+}
+
+function saveFallbackWorkspaceMeta(workspaceMeta: WorkspaceMeta): void {
+  writeLocalStorageJson(WORKSPACE_META_FALLBACK_KEY, workspaceMeta);
+}
+
+function readLegacyChatHistory(documentId: string): ChatMessage[] {
+  return readLocalStorageJson<ChatMessage[]>(`${CHAT_HISTORY_STORAGE_KEY_PREFIX}${documentId}`, []);
+}
+
+function removeLegacyChatHistory(documentId: string): void {
+  removeLocalStorageKey(`${CHAT_HISTORY_STORAGE_KEY_PREFIX}${documentId}`);
+}
+
+function writeLegacyChatHistory(documentId: string, messages: ChatMessage[]): void {
+  writeLocalStorageJson(`${CHAT_HISTORY_STORAGE_KEY_PREFIX}${documentId}`, messages);
+}
+
+function toPersistedChatMessages(documentId: string, messages: ChatMessage[]): PersistedChatMessage[] {
+  const startedAt = Date.now();
+
+  return messages.map((message, index) => ({
+    id: `${documentId}:${index}`,
+    documentId,
+    role: message.role,
+    parts: message.parts,
+    createdAt: new Date(startedAt + index).toISOString(),
+  }));
+}
+
+async function migrateLegacyChatHistory(documentId: string): Promise<void> {
+  const legacyMessages = readLegacyChatHistory(documentId);
+  if (legacyMessages.length === 0) {
+    return;
+  }
+
+  await localFirstRepository.replaceChatThread(documentId, toPersistedChatMessages(documentId, legacyMessages));
+  removeLegacyChatHistory(documentId);
+}
+
+export const localFirstRepository: PersistenceRepository = {
+  async loadActiveDocument(): Promise<LoadedDocument> {
+    try {
+      const loaded = await withDatabase(async (database) => {
+        const documents = (await getAllRecords<PersistedDocument>(database, PERSISTED_DOCUMENTS_STORE_NAME))
+          .filter((document) => document.deletedAt === null);
+        const workspaceMeta = (await getRecord<WorkspaceMeta>(database, WORKSPACE_META_STORE_NAME, WORKSPACE_META_ID))
+          ?? createDefaultWorkspaceMeta(documents.map((document) => document.id), documents[0]?.id ?? null);
+        const orderedDocuments = workspaceMeta.documentOrder
+          .map((documentId) => documents.find((document) => document.id === documentId))
+          .filter((document): document is PersistedDocument => Boolean(document));
+        const remainingDocuments = documents.filter((document) => !workspaceMeta.documentOrder.includes(document.id));
+        const nextDocuments = [...orderedDocuments, ...remainingDocuments];
+        const activeDocument = nextDocuments.find((document) => document.id === workspaceMeta.activeDocumentId) ?? nextDocuments[0] ?? null;
+
+        return {
+          document: activeDocument,
+          documents: nextDocuments,
+          workspaceMeta: {
+            ...workspaceMeta,
+            activeDocumentId: activeDocument?.id ?? null,
+            documentOrder: nextDocuments.map((document) => document.id),
+          },
+        };
+      });
+
+      return loaded;
+    } catch {
+      const fallbackDocuments = loadFallbackDocuments().filter((document) => document.deletedAt === null);
+      const fallbackWorkspaceMeta = loadFallbackWorkspaceMeta();
+      const activeDocument = fallbackDocuments.find((document) => document.id === fallbackWorkspaceMeta.activeDocumentId)
+        ?? fallbackDocuments[0]
+        ?? null;
+
+      reportStorageTelemetry({
+        area: 'schema',
+        code: 'LOCAL_FIRST_LOAD_FALLBACK_LOCAL',
+        severity: 'warning',
+        message: 'Local-first repository load failed; falling back to localStorage compatibility data.',
+      });
+
+      return {
+        document: activeDocument,
+        documents: fallbackDocuments,
+        workspaceMeta: {
+          ...fallbackWorkspaceMeta,
+          activeDocumentId: activeDocument?.id ?? null,
+          documentOrder: fallbackDocuments.map((document) => document.id),
+        },
+      };
+    }
+  },
+
+  async saveDocument(documentId: string, content: PersistedDocumentContent): Promise<void> {
+    const loaded = await this.loadActiveDocument();
+    const targetDocument = loaded.documents.find((document) => document.id === documentId);
+    if (!targetDocument) {
+      return;
+    }
+
+    const updatedDocument: PersistedDocument = {
+      ...targetDocument,
+      content,
+      updatedAt: getNowIso(),
+    };
+
+    try {
+      await withDatabase(async (database) => {
+        await putRecord(database, PERSISTED_DOCUMENTS_STORE_NAME, updatedDocument);
+      });
+    } catch {
+      const nextDocuments = loaded.documents.map((document) => (document.id === documentId ? updatedDocument : document));
+      saveFallbackDocuments(nextDocuments);
+    }
+  },
+
+  async saveWorkspace(tabs: FlowTab[], activeDocumentId: string | null): Promise<void> {
+    const nowIso = getNowIso();
+    const documents = tabs.map(toDocumentRecord);
+    const workspaceMeta = createDefaultWorkspaceMeta(
+      documents.map((document) => document.id),
+      activeDocumentId ?? documents[0]?.id ?? null,
+    );
+
+    try {
+      await withDatabase(async (database) => {
+        const existingDocuments = await getAllRecords<PersistedDocument>(database, PERSISTED_DOCUMENTS_STORE_NAME);
+        const nextIds = new Set(documents.map((document) => document.id));
+
+        await Promise.all(documents.map((document) => putRecord(database, PERSISTED_DOCUMENTS_STORE_NAME, {
+          ...document,
+          createdAt: existingDocuments.find((existing) => existing.id === document.id)?.createdAt ?? document.createdAt ?? nowIso,
+          updatedAt: document.updatedAt ?? nowIso,
+          deletedAt: null,
+        } satisfies PersistedDocument)));
+
+        await Promise.all(
+          existingDocuments
+            .filter((document) => !nextIds.has(document.id))
+            .map(async (document) => {
+              await deleteRecord(database, PERSISTED_DOCUMENTS_STORE_NAME, document.id);
+              await deleteRecord(database, DOCUMENT_SESSIONS_STORE_NAME, document.id);
+              await deleteRecord(database, CHAT_THREADS_STORE_NAME, document.id);
+              await deleteWhereDocumentId(database, CHAT_MESSAGES_STORE_NAME, document.id);
+            })
+        );
+
+        await putRecord(database, WORKSPACE_META_STORE_NAME, workspaceMeta);
+      });
+    } catch {
+      reportStorageTelemetry({
+        area: 'persist',
+        code: 'LOCAL_FIRST_SAVE_FALLBACK_LOCAL',
+        severity: 'warning',
+        message: 'IndexedDB workspace save failed; writing localStorage compatibility backup.',
+      });
+      saveFallbackDocuments(documents.map((document) => ({
+        ...document,
+        createdAt: document.createdAt ?? nowIso,
+        updatedAt: document.updatedAt ?? nowIso,
+        deletedAt: null,
+      })));
+      saveFallbackWorkspaceMeta(workspaceMeta);
+    }
+  },
+
+  async deleteDocument(documentId: string): Promise<void> {
+    try {
+      await withDatabase(async (database) => {
+        await deleteRecord(database, PERSISTED_DOCUMENTS_STORE_NAME, documentId);
+        await deleteRecord(database, DOCUMENT_SESSIONS_STORE_NAME, documentId);
+        await deleteRecord(database, CHAT_THREADS_STORE_NAME, documentId);
+        await deleteWhereDocumentId(database, CHAT_MESSAGES_STORE_NAME, documentId);
+      });
+    } catch {
+      const nextDocuments = loadFallbackDocuments().filter((document) => document.id !== documentId);
+      saveFallbackDocuments(nextDocuments);
+      removeLegacyChatHistory(documentId);
+    }
+  },
+
+  async loadDocumentSession(documentId: string): Promise<PersistedDocumentSession | null> {
+    try {
+      return await withDatabase((database) => getRecord<PersistedDocumentSession>(database, DOCUMENT_SESSIONS_STORE_NAME, documentId));
+    } catch {
+      return null;
+    }
+  },
+
+  async saveDocumentSession(session: PersistedDocumentSession): Promise<void> {
+    try {
+      await withDatabase(async (database) => {
+        await putRecord(database, DOCUMENT_SESSIONS_STORE_NAME, session);
+      });
+    } catch {
+      reportStorageTelemetry({
+        area: 'persist',
+        code: 'DOCUMENT_SESSION_SAVE_FAILED',
+        severity: 'warning',
+        message: `Document session save failed for "${session.documentId}".`,
+      });
+    }
+  },
+
+  async loadChatThread(documentId: string): Promise<PersistedChatMessage[]> {
+    try {
+      const messages = await withDatabase(async (database) => {
+        const allMessages = await getAllRecords<PersistedChatMessage>(database, CHAT_MESSAGES_STORE_NAME);
+        return allMessages
+          .filter((message) => message.documentId === documentId)
+          .sort((left, right) => left.createdAt.localeCompare(right.createdAt));
+      });
+
+      if (messages.length === 0) {
+        await migrateLegacyChatHistory(documentId);
+        return await this.loadChatThread(documentId);
+      }
+
+      return messages;
+    } catch {
+      const legacyMessages = readLegacyChatHistory(documentId);
+      return toPersistedChatMessages(documentId, legacyMessages);
+    }
+  },
+
+  async saveChatMessage(documentId: string, message: PersistedChatMessage): Promise<void> {
+    try {
+      await withDatabase(async (database) => {
+        await putRecord(database, CHAT_MESSAGES_STORE_NAME, message);
+        await putRecord(database, CHAT_THREADS_STORE_NAME, {
+          id: documentId,
+          documentId,
+          updatedAt: message.createdAt,
+        } satisfies PersistedChatThread);
+      });
+    } catch {
+      const existingMessages = readLegacyChatHistory(documentId);
+      writeLegacyChatHistory(documentId, [
+        ...existingMessages,
+        { role: message.role, parts: message.parts } satisfies ChatMessage,
+      ]);
+    }
+  },
+
+  async replaceChatThread(documentId: string, messages: PersistedChatMessage[]): Promise<void> {
+    try {
+      await withDatabase(async (database) => {
+        await deleteWhereDocumentId(database, CHAT_MESSAGES_STORE_NAME, documentId);
+        await Promise.all(messages.map((message) => putRecord(database, CHAT_MESSAGES_STORE_NAME, message)));
+        if (messages.length === 0) {
+          await deleteRecord(database, CHAT_THREADS_STORE_NAME, documentId);
+        } else {
+          await putRecord(database, CHAT_THREADS_STORE_NAME, {
+            id: documentId,
+            documentId,
+            updatedAt: messages[messages.length - 1]?.createdAt ?? getNowIso(),
+          } satisfies PersistedChatThread);
+        }
+      });
+      removeLegacyChatHistory(documentId);
+    } catch {
+      writeLegacyChatHistory(
+        documentId,
+        messages.map((message) => ({ role: message.role, parts: message.parts } satisfies ChatMessage))
+      );
+    }
+  },
+
+  async clearChatThread(documentId: string): Promise<void> {
+    try {
+      await withDatabase(async (database) => {
+        await deleteRecord(database, CHAT_THREADS_STORE_NAME, documentId);
+        await deleteWhereDocumentId(database, CHAT_MESSAGES_STORE_NAME, documentId);
+      });
+      removeLegacyChatHistory(documentId);
+    } catch {
+      removeLegacyChatHistory(documentId);
+    }
+  },
+
+  async loadPersistentAISettings(): Promise<string | null> {
+    try {
+      const record = await withDatabase((database) => getRecord<PersistedAISettingsRecord>(
+        database,
+        AI_SETTINGS_PERSISTENT_STORE_NAME,
+        PERSISTENT_AI_SETTINGS_RECORD_ID,
+      ));
+      if (record?.value) {
+        return record.value;
+      }
+    } catch {
+      // Fall through to compatibility storage.
+    }
+
+    return readLocalStorageString(AI_SETTINGS_STORAGE_KEY);
+  },
+
+  async savePersistentAISettings(serialized: string): Promise<void> {
+    try {
+      await withDatabase(async (database) => {
+        await putRecord(database, AI_SETTINGS_PERSISTENT_STORE_NAME, {
+          id: PERSISTENT_AI_SETTINGS_RECORD_ID,
+          value: serialized,
+        } satisfies PersistedAISettingsRecord);
+      });
+      removeLocalStorageKey(AI_SETTINGS_STORAGE_KEY);
+    } catch {
+      writeLocalStorageString(AI_SETTINGS_STORAGE_KEY, serialized);
+    }
+  },
+};
+
+export function convertPersistedDocumentsToTabs(documents: PersistedDocument[]): FlowTab[] {
+  return documents.map(toFlowTab);
+}
diff --git a/src/services/storage/localFirstRuntime.ts b/src/services/storage/localFirstRuntime.ts
new file mode 100644
index 0000000..f02392c
--- /dev/null
+++ b/src/services/storage/localFirstRuntime.ts
@@ -0,0 +1,170 @@
+import { DEFAULT_AI_SETTINGS } from '@/store';
+import { sanitizeAISettings } from '@/store/aiSettings';
+import { clearPersistedAISettings, loadPersistedAISettings } from '@/store/aiSettingsPersistence';
+import { sanitizePersistedTab } from '@/store/persistence';
+import type { FlowStoreState } from '@/store';
+import { useFlowStore } from '@/store';
+import { convertPersistedDocumentsToTabs, localFirstRepository, type PersistedChatMessage } from './localFirstRepository';
+
+const STORE_SUBSCRIPTION_DEBOUNCE_MS = 250;
+
+type StoreWithPersist = typeof useFlowStore & {
+  persist?: {
+    hasHydrated: () => boolean;
+    rehydrate: () => Promise<void>;
+    onFinishHydration: (listener: () => void) => () => void;
+  };
+};
+
+async function waitForStoreHydration(): Promise<void> {
+  const persistedStore = useFlowStore as StoreWithPersist;
+  const persistApi = persistedStore.persist;
+
+  if (!persistApi) {
+    return;
+  }
+
+  await persistApi.rehydrate();
+  if (persistApi.hasHydrated()) {
+    return;
+  }
+
+  await new Promise<void>((resolve) => {
+    const unsubscribe = persistApi.onFinishHydration(() => {
+      unsubscribe();
+      resolve();
+    });
+  });
+}
+
+function buildChatMessageId(documentId: string, index: number): string {
+  return `${documentId}:${index}`;
+}
+
+function toPersistedChatMessages(documentId: string, serialized: string | null): PersistedChatMessage[] {
+  if (!serialized) {
+    return [];
+  }
+
+  try {
+    const parsed = JSON.parse(serialized) as Array<{ role: PersistedChatMessage['role']; parts: PersistedChatMessage['parts'] }>;
+    const startedAt = Date.now();
+    return parsed.map((message, index) => ({
+      id: buildChatMessageId(documentId, index),
+      documentId,
+      role: message.role,
+      parts: message.parts,
+      createdAt: new Date(startedAt + index).toISOString(),
+    }));
+  } catch {
+    return [];
+  }
+}
+
+async function migrateLegacyStoreIntoRepositoryIfNeeded(): Promise<void> {
+  const currentState = useFlowStore.getState();
+  const loaded = await localFirstRepository.loadActiveDocument();
+  if (loaded.documents.length > 0) {
+    return;
+  }
+
+  const tabs = currentState.tabs.map(sanitizePersistedTab);
+  if (tabs.length === 0) {
+    return;
+  }
+
+  await localFirstRepository.saveWorkspace(tabs, currentState.activeTabId);
+
+  await Promise.all(
+    tabs.map(async (tab) => {
+      const legacyChatRaw = localStorage.getItem(`ofk_chat_history_${tab.id}`);
+      const persistedMessages = toPersistedChatMessages(tab.id, legacyChatRaw);
+      if (persistedMessages.length > 0) {
+        await localFirstRepository.replaceChatThread(tab.id, persistedMessages);
+      }
+    })
+  );
+
+  const persistedAiSettings = loadPersistedAISettings();
+  if (persistedAiSettings.storageMode === 'local') {
+    await localFirstRepository.savePersistentAISettings(JSON.stringify(persistedAiSettings));
+    clearPersistedAISettings();
+  }
+}
+
+async function hydrateStoreFromRepository(): Promise<void> {
+  const loaded = await localFirstRepository.loadActiveDocument();
+  const tabs = convertPersistedDocumentsToTabs(loaded.documents);
+  if (tabs.length === 0) {
+    return;
+  }
+
+  const activeTabId = loaded.document?.id ?? loaded.workspaceMeta.activeDocumentId ?? tabs[0].id;
+  const activeTab = tabs.find((tab) => tab.id === activeTabId) ?? tabs[0];
+  const persistentAiSettings = await localFirstRepository.loadPersistentAISettings();
+  const aiSettings = persistentAiSettings
+    ? sanitizeAISettings(JSON.parse(persistentAiSettings) as Partial<FlowStoreState['aiSettings']>, DEFAULT_AI_SETTINGS)
+    : loadPersistedAISettings();
+
+  useFlowStore.setState((currentState) => ({
+    ...currentState,
+    tabs,
+    activeTabId: activeTab.id,
+    nodes: activeTab.nodes,
+    edges: activeTab.edges,
+    aiSettings,
+  }));
+}
+
+function persistStoreSnapshot(): void {
+  const nextState = useFlowStore.getState();
+
+  void localFirstRepository.saveWorkspace(nextState.tabs.map(sanitizePersistedTab), nextState.activeTabId);
+
+  if (nextState.aiSettings.storageMode === 'local') {
+    void localFirstRepository.savePersistentAISettings(JSON.stringify(nextState.aiSettings));
+  }
+}
+
+let syncStopper: (() => void) | null = null;
+let initializationPromise: Promise<void> | null = null;
+
+export async function initializeLocalFirstPersistence(): Promise<void> {
+  await waitForStoreHydration();
+  await migrateLegacyStoreIntoRepositoryIfNeeded();
+  await hydrateStoreFromRepository();
+
+  if (syncStopper) {
+    return;
+  }
+
+  let debounceTimer: ReturnType<typeof setTimeout> | null = null;
+  syncStopper = useFlowStore.subscribe((state, previousState) => {
+    const tabsChanged = state.tabs !== previousState.tabs;
+    const activeDocumentChanged = state.activeTabId !== previousState.activeTabId;
+    const aiSettingsChanged = state.aiSettings !== previousState.aiSettings;
+
+    if (!tabsChanged && !activeDocumentChanged && !aiSettingsChanged) {
+      return;
+    }
+
+    if (debounceTimer) {
+      clearTimeout(debounceTimer);
+    }
+
+    debounceTimer = setTimeout(() => {
+      persistStoreSnapshot();
+    }, STORE_SUBSCRIPTION_DEBOUNCE_MS);
+  });
+}
+
+export function ensureLocalFirstPersistenceReady(): Promise<void> {
+  if (!initializationPromise) {
+    initializationPromise = initializeLocalFirstPersistence().catch((error) => {
+      initializationPromise = null;
+      throw error;
+    });
+  }
+
+  return initializationPromise;
+}
diff --git a/src/services/storage/snapshotStorage.ts b/src/services/storage/snapshotStorage.ts
index 3c98635..9f7447e 100644
--- a/src/services/storage/snapshotStorage.ts
+++ b/src/services/storage/snapshotStorage.ts
@@ -1,4 +1,5 @@
 import type { FlowSnapshot } from '@/lib/types';
+import { LEGACY_STORAGE_KEYS } from '@/lib/legacyBranding';
 import { FLOW_DOCUMENT_STORE_NAME, openFlowPersistenceDatabase } from './indexedDbSchema';
 import {
   readLocalStorageString,
@@ -7,7 +8,7 @@ import {
 } from './uiLocalStorage';
 import { reportStorageTelemetry } from './storageTelemetry';
 
-const SNAPSHOT_STORAGE_KEY = 'flowmind_snapshots';
+const SNAPSHOT_STORAGE_KEY = LEGACY_STORAGE_KEYS.snapshots;
 
 type SnapshotRecord = {
   id: string;
diff --git a/src/services/templateLibrary/starterTemplates.test.ts b/src/services/templateLibrary/starterTemplates.test.ts
index dd99c0b..e112f4c 100644
--- a/src/services/templateLibrary/starterTemplates.test.ts
+++ b/src/services/templateLibrary/starterTemplates.test.ts
@@ -2,38 +2,41 @@ import { describe, expect, it } from 'vitest';
 import { createStarterTemplateRegistry, STARTER_TEMPLATE_MANIFESTS } from './starterTemplates';
 
 describe('starter template manifests', () => {
-    it('includes the curated 20-template starter catalog', () => {
-        const ids = STARTER_TEMPLATE_MANIFESTS.map((template) => template.id);
+  it('includes the curated launch starter catalog', () => {
+    const ids = STARTER_TEMPLATE_MANIFESTS.map((template) => template.id);
 
-        expect(ids).toHaveLength(20);
-        expect(ids).toContain('aws-event-api');
-        expect(ids).toContain('azure-ai-platform');
-        expect(ids).toContain('cncf-gitops');
-        expect(ids).toContain('mindmap-product-discovery');
-        expect(ids).toContain('wireframe-saas-starter');
-    });
+    expect(ids).toHaveLength(23);
+    expect(ids).toContain('aws-event-api');
+    expect(ids).toContain('architecture-c4-context');
+    expect(ids).toContain('architecture-network-edge');
+    expect(ids).toContain('azure-ai-platform');
+    expect(ids).toContain('cncf-gitops');
+    expect(ids).toContain('mindmap-product-discovery');
+    expect(ids).toContain('wireframe-saas-starter');
+  });
 
-    it('has deterministic graph integrity for every starter template', () => {
-        STARTER_TEMPLATE_MANIFESTS.forEach((template) => {
-            const nodeIds = new Set(template.graph.nodes.map((node) => node.id));
-            const edgeIds = new Set(template.graph.edges.map((edge) => edge.id));
+  it('has deterministic graph integrity for every starter template', () => {
+    STARTER_TEMPLATE_MANIFESTS.forEach((template) => {
+      const nodeIds = new Set(template.graph.nodes.map((node) => node.id));
+      const edgeIds = new Set(template.graph.edges.map((edge) => edge.id));
 
-            expect(nodeIds.size).toBe(template.graph.nodes.length);
-            expect(edgeIds.size).toBe(template.graph.edges.length);
+      expect(nodeIds.size).toBe(template.graph.nodes.length);
+      expect(edgeIds.size).toBe(template.graph.edges.length);
 
-            template.graph.edges.forEach((edge) => {
-                expect(nodeIds.has(edge.source)).toBe(true);
-                expect(nodeIds.has(edge.target)).toBe(true);
-            });
-        });
+      template.graph.edges.forEach((edge) => {
+        expect(nodeIds.has(edge.source)).toBe(true);
+        expect(nodeIds.has(edge.target)).toBe(true);
+      });
     });
+  });
 
-    it('is consumable by template registry scaffold', () => {
-        const registry = createStarterTemplateRegistry();
+  it('is consumable by template registry scaffold', () => {
+    const registry = createStarterTemplateRegistry();
 
-        expect(registry.listTemplates()).toHaveLength(20);
-        expect(registry.getTemplate('flow-subscription-upgrade')?.graph.nodes).toHaveLength(7);
-        expect(registry.getTemplate('aws-event-api')?.graph.nodes).toHaveLength(7);
-        expect(registry.getTemplate('mindmap-product-discovery')?.graph.nodes).toHaveLength(9);
-    });
+    expect(registry.listTemplates()).toHaveLength(23);
+    expect(registry.getTemplate('flow-subscription-upgrade')?.graph.nodes).toHaveLength(7);
+    expect(registry.getTemplate('aws-event-api')?.graph.nodes).toHaveLength(7);
+    expect(registry.getTemplate('architecture-c4-context')?.graph.nodes).toHaveLength(5);
+    expect(registry.getTemplate('mindmap-product-discovery')?.graph.nodes).toHaveLength(9);
+  });
 });
diff --git a/src/services/templateLibrary/starterTemplates.ts b/src/services/templateLibrary/starterTemplates.ts
index e23be65..4db0379 100644
--- a/src/services/templateLibrary/starterTemplates.ts
+++ b/src/services/templateLibrary/starterTemplates.ts
@@ -3,7 +3,16 @@ import { NodeType, type FlowNode, type NodeData } from '@/lib/types';
 import { createTemplateRegistry, type TemplateRegistry } from './registry';
 import type { TemplateManifest } from './types';
 
-type TemplateCategory = 'flowchart' | 'aws' | 'azure' | 'cncf' | 'mindmap' | 'journey' | 'wireframe';
+type TemplateCategory =
+    | 'flowchart'
+    | 'architecture'
+    | 'aws'
+    | 'azure'
+    | 'cncf'
+    | 'mindmap'
+    | 'journey'
+    | 'wireframe'
+    | 'sequence';
 type ProviderKey = 'aws' | 'azure' | 'cncf';
 
 const PROVIDER_PACK_IDS: Record<ProviderKey, string> = {
@@ -59,6 +68,32 @@ function createAssetNode(
     };
 }
 
+function createArchitectureNode(
+    id: string,
+    label: string,
+    resourceType: string,
+    icon: string,
+    color: string,
+    x: number,
+    y: number,
+    subLabel: string,
+): FlowNode {
+    return {
+        id,
+        type: NodeType.ARCHITECTURE,
+        position: { x, y },
+        data: {
+            label,
+            subLabel,
+            icon,
+            color,
+            archProvider: 'custom',
+            archEnvironment: 'default',
+            archResourceType: resourceType,
+        },
+    };
+}
+
 function createMindmapNode(
     id: string,
     label: string,
@@ -133,6 +168,7 @@ function createTemplate(
     tags: string[],
     nodes: FlowNode[],
     edges = [] as ReturnType<typeof createDefaultEdge>[],
+    metadata: Pick<TemplateManifest, 'audience' | 'useCase' | 'launchPriority'> = {},
 ): TemplateManifest {
     return {
         id,
@@ -140,6 +176,7 @@ function createTemplate(
         description,
         category,
         tags,
+        ...metadata,
         graph: { nodes, edges },
     };
 }
@@ -217,6 +254,7 @@ export const STARTER_TEMPLATE_MANIFESTS: TemplateManifest[] = [
             createDefaultEdge('rel-4', 'rel-5'),
             createDefaultEdge('rel-5', 'rel-6'),
         ],
+        { audience: 'developers', useCase: 'Ship software safely', launchPriority: 10 },
     ),
     createTemplate(
         'flow-payment-recovery',
@@ -270,6 +308,50 @@ export const STARTER_TEMPLATE_MANIFESTS: TemplateManifest[] = [
             createDefaultEdge('sup-6', 'sup-7'),
         ],
     ),
+    createTemplate(
+        'architecture-c4-context',
+        'C4 System Context',
+        'A developer-facing system context with users, platform boundaries, and adjacent systems.',
+        'architecture',
+        ['c4', 'architecture', 'docs'],
+        [
+            createArchitectureNode('c4-user', 'Developer', 'person', 'User', 'blue', -260, 180, 'Uses the platform'),
+            createArchitectureNode('c4-system', 'OpenFlowKit', 'system', 'Box', 'slate', 80, 180, 'Primary system'),
+            createArchitectureNode('c4-docs', 'Docs Site', 'container', 'BookOpen', 'violet', 420, 40, 'Embeds diagrams'),
+            createArchitectureNode('c4-repo', 'Source Repo', 'container', 'GitBranch', 'emerald', 420, 180, 'Versioned definitions'),
+            createArchitectureNode('c4-db', 'Project Data', 'database_container', 'Database', 'cyan', 420, 320, 'Snapshots and exports'),
+        ],
+        [
+            createDefaultEdge('c4-user', 'c4-system', 'creates'),
+            createDefaultEdge('c4-system', 'c4-docs', 'publishes views'),
+            createDefaultEdge('c4-system', 'c4-repo', 'exports JSON / Mermaid'),
+            createDefaultEdge('c4-repo', 'c4-db', 'stores artifacts'),
+        ],
+        { audience: 'developers', useCase: 'Communicate C4 context without redrawing from scratch', launchPriority: 10 },
+    ),
+    createTemplate(
+        'architecture-network-edge',
+        'Network Edge Security',
+        'A perimeter flow with DNS, CDN, firewall, load balancing, and private service access.',
+        'architecture',
+        ['network', 'security', 'infra'],
+        [
+            createArchitectureNode('net-dns', 'Public DNS', 'dns', 'Globe2', 'lime', 0, 180, 'Traffic entrypoint'),
+            createArchitectureNode('net-cdn', 'CDN Edge', 'cdn', 'Globe', 'violet', 260, 180, 'Caching and TLS'),
+            createArchitectureNode('net-firewall', 'WAF / Firewall', 'firewall', 'Shield', 'red', 520, 180, 'Ingress filtering'),
+            createArchitectureNode('net-lb', 'Load Balancer', 'load_balancer', 'Scale', 'orange', 780, 180, 'Traffic distribution'),
+            createArchitectureNode('net-services', 'Application Services', 'service', 'ServerCog', 'blue', 1040, 90, 'Private app tier'),
+            createArchitectureNode('net-vpn', 'VPN Access', 'service', 'Cable', 'violet', 1040, 270, 'Operator access'),
+        ],
+        [
+            createDefaultEdge('net-dns', 'net-cdn', 'resolves'),
+            createDefaultEdge('net-cdn', 'net-firewall', 'forwards'),
+            createDefaultEdge('net-firewall', 'net-lb', 'allows 443'),
+            createDefaultEdge('net-lb', 'net-services', 'routes HTTPS'),
+            createDefaultEdge('net-vpn', 'net-services', 'private ops'),
+        ],
+        { audience: 'builders', useCase: 'Explain ingress, perimeter, and private access clearly', launchPriority: 9 },
+    ),
     createTemplate(
         'aws-event-api',
         'AWS Event-Driven API',
@@ -293,6 +375,93 @@ export const STARTER_TEMPLATE_MANIFESTS: TemplateManifest[] = [
             createDefaultEdge('aws-api-4', 'aws-api-6'),
             createDefaultEdge('aws-api-6', 'aws-api-7'),
         ],
+        { audience: 'developers', useCase: 'Map event-driven cloud architecture', launchPriority: 10 },
+    ),
+    createTemplate(
+        'sequence-api-handoff',
+        'API Request Handoff',
+        'Sequence starter for authentication, worker dispatch, persistence, and response.',
+        'sequence',
+        ['sequence', 'api', 'backend'],
+        [
+            {
+                id: 'seq-client',
+                type: NodeType.SEQUENCE_PARTICIPANT,
+                position: { x: 0, y: 0 },
+                data: { label: 'Client', seqParticipantKind: 'actor' },
+            },
+            {
+                id: 'seq-api',
+                type: NodeType.SEQUENCE_PARTICIPANT,
+                position: { x: 220, y: 0 },
+                data: { label: 'API', seqParticipantKind: 'participant' },
+            },
+            {
+                id: 'seq-worker',
+                type: NodeType.SEQUENCE_PARTICIPANT,
+                position: { x: 440, y: 0 },
+                data: { label: 'Worker', seqParticipantKind: 'participant' },
+            },
+            {
+                id: 'seq-db',
+                type: NodeType.SEQUENCE_PARTICIPANT,
+                position: { x: 660, y: 0 },
+                data: { label: 'Postgres', seqParticipantKind: 'participant' },
+            },
+        ],
+        [
+            {
+                id: 'seq-edge-1',
+                source: 'seq-client',
+                target: 'seq-api',
+                sourceHandle: 'top',
+                targetHandle: 'top',
+                label: 'POST /checkout',
+                type: 'sequence_message',
+                data: { seqMessageKind: 'sync', seqMessageOrder: 0 },
+            },
+            {
+                id: 'seq-edge-2',
+                source: 'seq-api',
+                target: 'seq-worker',
+                sourceHandle: 'top',
+                targetHandle: 'top',
+                label: 'enqueue job',
+                type: 'sequence_message',
+                data: { seqMessageKind: 'async', seqMessageOrder: 1 },
+            },
+            {
+                id: 'seq-edge-3',
+                source: 'seq-worker',
+                target: 'seq-db',
+                sourceHandle: 'top',
+                targetHandle: 'top',
+                label: 'persist order',
+                type: 'sequence_message',
+                data: { seqMessageKind: 'sync', seqMessageOrder: 2 },
+            },
+            {
+                id: 'seq-edge-4',
+                source: 'seq-db',
+                target: 'seq-worker',
+                sourceHandle: 'top',
+                targetHandle: 'top',
+                label: 'ok',
+                type: 'sequence_message',
+                data: { seqMessageKind: 'return', seqMessageOrder: 3 },
+            },
+            {
+                id: 'seq-edge-5',
+                source: 'seq-api',
+                target: 'seq-client',
+                sourceHandle: 'top',
+                targetHandle: 'top',
+                label: '202 Accepted',
+                type: 'sequence_message',
+                data: { seqMessageKind: 'return', seqMessageOrder: 4 },
+            },
+        ],
+        { audience: 'developers', useCase: 'Communicate backend request flow', launchPriority: 9 },
     ),
     createTemplate(
         'aws-data-lake',
diff --git a/src/services/templateLibrary/types.ts b/src/services/templateLibrary/types.ts
index 32790a2..551eba6 100644
--- a/src/services/templateLibrary/types.ts
+++ b/src/services/templateLibrary/types.ts
@@ -1,15 +1,18 @@
 import type { FlowEdge, FlowNode } from '@/lib/types';
 
 export interface TemplateGraphSnapshot {
-    nodes: FlowNode[];
-    edges: FlowEdge[];
+  nodes: FlowNode[];
+  edges: FlowEdge[];
 }
 
 export interface TemplateManifest {
-    id: string;
-    name: string;
-    description: string;
-    category: string;
-    tags: string[];
-    graph: TemplateGraphSnapshot;
+  id: string;
+  name: string;
+  description: string;
+  category: string;
+  tags: string[];
+  audience?: 'developers' | 'builders';
+  useCase?: string;
+  launchPriority?: number;
+  graph: TemplateGraphSnapshot;
 }
diff --git a/src/services/templates.selector.test.ts b/src/services/templates.selector.test.ts
index a867a8f..71d8d52 100644
--- a/src/services/templates.selector.test.ts
+++ b/src/services/templates.selector.test.ts
@@ -2,17 +2,16 @@ import { describe, expect, it } from 'vitest';
 import { FLOW_TEMPLATES, getFlowTemplates } from './templates';
 
 describe('template selector', () => {
-    it('returns the curated registry-backed templates when the feature flag path is disabled', () => {
-        expect(getFlowTemplates(false)).toEqual(FLOW_TEMPLATES);
-    });
+  it('returns the curated registry-backed templates', () => {
+    const templates = getFlowTemplates();
+    const ids = templates.map((template) => template.id);
 
-    it('returns the curated registry-backed templates when the feature flag path is enabled', () => {
-        const templates = getFlowTemplates(true);
-        const ids = templates.map((template) => template.id);
-
-        expect(ids).toHaveLength(20);
-        expect(ids).toContain('flow-release-train');
-        expect(ids).toContain('aws-security-lake');
-        expect(ids).toContain('azure-data-estate');
-    });
+    expect(templates).toEqual(FLOW_TEMPLATES);
+    expect(ids).toHaveLength(23);
+    expect(ids).toContain('flow-release-train');
+    expect(ids).toContain('architecture-c4-context');
+    expect(ids).toContain('architecture-network-edge');
+    expect(ids).toContain('aws-security-lake');
+    expect(ids).toContain('azure-data-estate');
+  });
 });
diff --git a/src/services/templates.ts b/src/services/templates.ts
index 1ab427a..bf475fc 100644
--- a/src/services/templates.ts
+++ b/src/services/templates.ts
@@ -1,4 +1,3 @@
-import { ROLLOUT_FLAGS } from '@/config/rolloutFlags';
 import { Layout, Cloud, GitBranch, Monitor, Route, ShipWheel } from 'lucide-react';
 import type { LucideIcon } from 'lucide-react';
 import type { FlowEdge, FlowNode } from '@/lib/types';
@@ -13,6 +12,9 @@ export interface FlowTemplate {
   msg: string;
   category: string;
   tags: string[];
+  audience?: 'developers' | 'builders';
+  useCase?: string;
+  launchPriority?: number;
   nodes: FlowNode[];
   edges: FlowEdge[];
 }
@@ -22,9 +24,12 @@ function getTemplateIcon(category: string): LucideIcon {
     case 'aws':
     case 'azure':
       return Cloud;
+    case 'architecture':
+      return Layout;
     case 'cncf':
       return ShipWheel;
     case 'mindmap':
+    case 'sequence':
       return GitBranch;
     case 'journey':
       return Route;
@@ -45,18 +50,30 @@ function mapTemplateManifestToFlowTemplate(template: TemplateManifest): FlowTemp
     msg: template.category,
     category: template.category,
     tags: [...template.tags],
+    audience: template.audience,
+    useCase: template.useCase,
+    launchPriority: template.launchPriority,
     nodes: template.graph.nodes,
     edges: template.graph.edges,
   };
 }
 
+function compareTemplates(left: FlowTemplate, right: FlowTemplate): number {
+  const priorityDelta = (right.launchPriority ?? 0) - (left.launchPriority ?? 0);
+  if (priorityDelta !== 0) {
+    return priorityDelta;
+  }
+
+  return left.name.localeCompare(right.name);
+}
+
 function listRegistryTemplates(): FlowTemplate[] {
   const registry = createStarterTemplateRegistry();
-  return registry.listTemplates().map(mapTemplateManifestToFlowTemplate);
+  return registry.listTemplates().map(mapTemplateManifestToFlowTemplate).sort(compareTemplates);
 }
 
 export const FLOW_TEMPLATES: FlowTemplate[] = listRegistryTemplates();
 
-export function getFlowTemplates(_templateLibraryEnabled: boolean = ROLLOUT_FLAGS.templateLibraryV1): FlowTemplate[] {
+export function getFlowTemplates(): FlowTemplate[] {
   return FLOW_TEMPLATES;
 }
diff --git a/src/store.test.ts b/src/store.test.ts
index 4829e2b..13d6cec 100644
--- a/src/store.test.ts
+++ b/src/store.test.ts
@@ -1,6 +1,7 @@
 import { beforeEach, describe, expect, it } from 'vitest';
 import type { FlowEdge, FlowNode, FlowTab } from '@/lib/types';
 import { useFlowStore } from './store';
+import { sanitizePersistedTab } from './store/persistence';
 
 function createNode(id: string, label: string): FlowNode {
     return {
@@ -205,7 +206,7 @@ describe('flow store tab actions', () => {
         expect(afterTab1?.nodes[0]?.id).toBe(beforeTab1NodeId);
     });
 
-    it('recovers tabs and active tab from persisted autosave snapshot', () => {
+    it('does not persist durable tab state in the main zustand slice', () => {
         const tab2 = createTab('tab-2', 'Tab 2', [createNode('n2', 'Recovered Tab 2')], [createEdge('e2', 'n2', 'n2')]);
 
         useFlowStore.setState((state) => ({
@@ -215,38 +216,12 @@ describe('flow store tab actions', () => {
             edges: tab2.edges,
         }));
 
-        const persistedSlice = useFlowStore.persist.getOptions().partialize(useFlowStore.getState());
-
-        // Simulate cold start before hydration.
-        useFlowStore.setState({
-            nodes: [],
-            edges: [],
-            tabs: [],
-            activeTabId: 'tab-1',
-        });
-
-        // Simulate hydration merge from persisted autosave payload.
-        useFlowStore.setState(persistedSlice as Partial<ReturnType<typeof useFlowStore.getState>>);
-
-        // Recovery path: pull active tab payload from hydrated tabs and rehydrate canvas.
-        const hydrated = useFlowStore.getState();
-        const activeTab = hydrated.tabs.find((tab) => tab.id === hydrated.activeTabId);
-        expect(activeTab).toBeDefined();
-
-        useFlowStore.setState({
-            nodes: activeTab?.nodes ?? [],
-            edges: activeTab?.edges ?? [],
-        });
-
-        const state = useFlowStore.getState();
-        expect(state.activeTabId).toBe('tab-2');
-        expect(state.tabs).toHaveLength(2);
-        expect(state.nodes[0].id).toBe('n2');
-        expect(state.nodes[0].data.label).toBe('Recovered Tab 2');
-        expect(state.edges[0].id).toBe('e2');
+        const persistedSlice = useFlowStore.persist.getOptions().partialize(useFlowStore.getState()) as Record<string, unknown>;
+        expect('tabs' in persistedSlice).toBe(false);
+        expect('activeTabId' in persistedSlice).toBe(false);
     });
 
-    it('strips transient canvas fields from persisted autosave tabs', () => {
+    it('strips transient canvas fields from sanitized tab payloads', () => {
         const tab2 = createTab(
             'tab-2',
             'Tab 2',
@@ -269,10 +244,7 @@ describe('flow store tab actions', () => {
             edges: tab2.edges,
         }));
 
-        const persistedSlice = useFlowStore.persist.getOptions().partialize(useFlowStore.getState()) as {
-            tabs: FlowTab[];
-        };
-        const persistedTab = persistedSlice.tabs.find((tab) => tab.id === 'tab-2');
+        const persistedTab = sanitizePersistedTab(tab2);
         const persistedNode = persistedTab?.nodes[0] as FlowNode & {
             measured?: unknown;
             positionAbsolute?: unknown;
diff --git a/src/store.ts b/src/store.ts
index b948fa5..5cdcb25 100644
--- a/src/store.ts
+++ b/src/store.ts
@@ -26,6 +26,7 @@ export {
 export type {
     AIProvider,
     AISettings,
+    AISettingsStorageMode,
     CustomHeaderConfig,
     FlowState as FlowStoreState,
     ViewSettings,
@@ -46,7 +47,7 @@ export const useFlowStore = create<FlowState>()(
         {
             name: 'openflowkit-storage',
             storage: createFlowPersistStorage(),
-            version: 1,
+            version: 2,
             migrate: (persistedState) => migratePersistedFlowState(persistedState),
             partialize: (state) => partializePersistedFlowState(state),
         }
diff --git a/src/store/actions/createAIAndSelectionActions.ts b/src/store/actions/createAIAndSelectionActions.ts
index d72e82c..3816c1e 100644
--- a/src/store/actions/createAIAndSelectionActions.ts
+++ b/src/store/actions/createAIAndSelectionActions.ts
@@ -1,3 +1,6 @@
+import { DEFAULT_AI_SETTINGS } from '../defaults';
+import { sanitizeAISettings } from '../aiSettings';
+import { persistAISettings } from '../aiSettingsPersistence';
 import type { FlowState } from '../types';
 
 type SetFlowState = (partial: Partial<FlowState> | ((state: FlowState) => Partial<FlowState>)) => void;
@@ -13,9 +16,13 @@ export function createAIAndSelectionActions(set: SetFlowState): Pick<
     | 'clearMermaidDiagnostics'
 > {
     return {
-        setAISettings: (settings) => set((state) => ({
-            aiSettings: { ...state.aiSettings, ...settings },
-        })),
+        setAISettings: (settings) => set((state) => {
+            const nextAISettings = sanitizeAISettings({ ...state.aiSettings, ...settings }, DEFAULT_AI_SETTINGS);
+            persistAISettings(nextAISettings);
+            return {
+                aiSettings: nextAISettings,
+            };
+        }),
 
         setSelectedNodeId: (id) => set({ selectedNodeId: id }),
         setSelectedEdgeId: (id) => set({ selectedEdgeId: id }),
diff --git a/src/store/actions/createLayerActions.ts b/src/store/actions/createLayerActions.ts
index a4ddb58..2de2216 100644
--- a/src/store/actions/createLayerActions.ts
+++ b/src/store/actions/createLayerActions.ts
@@ -8,7 +8,7 @@ function ensureLayerExists(state: FlowState, layerId: string): boolean {
     return state.layers.some((layer) => layer.id === layerId);
 }
 
-export function createLayerActions(set: SetFlowState, get: GetFlowState): Pick<
+export function createLayerActions(set: SetFlowState, _get: GetFlowState): Pick<
     FlowState,
     | 'addLayer'
     | 'renameLayer'
diff --git a/src/store/actions/createTabActions.ts b/src/store/actions/createTabActions.ts
index 7b62bd5..9442d0c 100644
--- a/src/store/actions/createTabActions.ts
+++ b/src/store/actions/createTabActions.ts
@@ -121,7 +121,7 @@ export function createTabActions(set: SetFlowState, get: GetFlowState): Pick<
         },
 
         duplicateTab: (id) => {
-            const { tabs, activeTabId } = get();
+            const { tabs } = get();
             const syncedTabs = syncActiveTabContent(tabs);
             const sourceTab = syncedTabs.find((tab) => tab.id === id);
             if (!sourceTab) return null;
diff --git a/src/store/aiSettings.test.ts b/src/store/aiSettings.test.ts
new file mode 100644
index 0000000..420bc6e
--- /dev/null
+++ b/src/store/aiSettings.test.ts
@@ -0,0 +1,114 @@
+import { afterEach, describe, expect, it } from 'vitest';
+import { sanitizeAISettings } from './aiSettings';
+import { clearPersistedAISettings, loadPersistedAISettings, persistAISettings } from './aiSettingsPersistence';
+import { DEFAULT_AI_SETTINGS } from './defaults';
+
+describe('aiSettings', () => {
+  afterEach(() => {
+    localStorage.removeItem('openflowkit-ai-settings');
+    sessionStorage.removeItem('openflowkit-ai-settings');
+  });
+
+  it('falls back to defaults for invalid provider values', () => {
+    const sanitized = sanitizeAISettings(
+      {
+        provider: 'not-a-provider' as never,
+        apiKey: '  secret  ',
+        model: '  gemini-2.5-pro  ',
+        customBaseUrl: '  https://example.com  ',
+      },
+      DEFAULT_AI_SETTINGS
+    );
+
+    expect(sanitized.provider).toBe(DEFAULT_AI_SETTINGS.provider);
+    expect(sanitized.storageMode).toBe(DEFAULT_AI_SETTINGS.storageMode);
+    expect(sanitized.apiKey).toBe('secret');
+    expect(sanitized.model).toBe('gemini-2.5-pro');
+    expect(sanitized.customBaseUrl).toBe('https://example.com');
+  });
+
+  it('keeps only valid custom headers', () => {
+    const sanitized = sanitizeAISettings(
+      {
+        provider: 'custom',
+        storageMode: 'session',
+        customHeaders: [
+          { key: ' Authorization ', value: 'Bearer token', enabled: true },
+          { key: '', value: 'skip-me' },
+          { key: 'X-Empty', value: 10 as never },
+        ],
+      },
+      DEFAULT_AI_SETTINGS
+    );
+
+    expect(sanitized.customHeaders).toEqual([
+      { key: 'Authorization', value: 'Bearer token', enabled: true },
+    ]);
+    expect(sanitized.storageMode).toBe('session');
+  });
+
+  it('persists and reloads sanitized AI settings from local storage by default', () => {
+    persistAISettings({
+      provider: 'custom',
+      storageMode: 'local',
+      apiKey: '  secret  ',
+      model: '  model-1  ',
+      customBaseUrl: '  https://example.com  ',
+      customHeaders: [{ key: ' Authorization ', value: 'Bearer token', enabled: true }],
+    });
+
+    expect(loadPersistedAISettings()).toEqual({
+      provider: 'custom',
+      storageMode: 'local',
+      apiKey: 'secret',
+      model: 'model-1',
+      customBaseUrl: 'https://example.com',
+      customHeaders: [{ key: 'Authorization', value: 'Bearer token', enabled: true }],
+    });
+  });
+
+  it('persists session-only AI settings in sessionStorage and clears local copy', () => {
+    localStorage.setItem('openflowkit-ai-settings', JSON.stringify({
+      provider: 'gemini',
+      storageMode: 'local',
+      apiKey: 'local-secret',
+    }));
+
+    persistAISettings({
+      provider: 'openai',
+      storageMode: 'session',
+      apiKey: ' session-secret ',
+      model: ' gpt-4o ',
+      customBaseUrl: undefined,
+      customHeaders: [],
+    });
+
+    expect(localStorage.getItem('openflowkit-ai-settings')).toBeNull();
+    expect(JSON.parse(sessionStorage.getItem('openflowkit-ai-settings') ?? '{}')).toMatchObject({
+      provider: 'openai',
+      storageMode: 'session',
+      apiKey: 'session-secret',
+      model: 'gpt-4o',
+    });
+    expect(loadPersistedAISettings().storageMode).toBe('session');
+  });
+
+  it('can clear persisted AI settings from both storage buckets', () => {
+    localStorage.setItem('openflowkit-ai-settings', JSON.stringify({
+      provider: 'gemini',
+      storageMode: 'local',
+      apiKey: 'local-secret',
+    }));
+    sessionStorage.setItem('openflowkit-ai-settings', JSON.stringify({
+      provider: 'openai',
+      storageMode: 'session',
+      apiKey: 'session-secret',
+    }));
+
+    clearPersistedAISettings();
+
+    expect(localStorage.getItem('openflowkit-ai-settings')).toBeNull();
+    expect(sessionStorage.getItem('openflowkit-ai-settings')).toBeNull();
+    expect(loadPersistedAISettings()).toEqual(DEFAULT_AI_SETTINGS);
+  });
+});
diff --git a/src/store/aiSettings.ts b/src/store/aiSettings.ts
new file mode 100644
index 0000000..ecf5958
--- /dev/null
+++ b/src/store/aiSettings.ts
@@ -0,0 +1,60 @@
+import type { AIProvider, AISettings, AISettingsStorageMode, CustomHeaderConfig } from './types';
+
+export const AI_PROVIDERS = [
+  'gemini',
+  'openai',
+  'claude',
+  'groq',
+  'nvidia',
+  'cerebras',
+  'mistral',
+  'openrouter',
+  'custom',
+] as const satisfies readonly AIProvider[];
+
+function isNonEmptyString(value: unknown): value is string {
+  return typeof value === 'string' && value.trim().length > 0;
+}
+
+function sanitizeCustomHeaders(value: unknown): CustomHeaderConfig[] {
+  if (!Array.isArray(value)) {
+    return [];
+  }
+
+  return value
+    .filter((entry) => entry && typeof entry === 'object')
+    .map((entry) => entry as Record<string, unknown>)
+    .filter((entry) => isNonEmptyString(entry.key) && isNonEmptyString(entry.value))
+    .map((entry) => {
+      const key = String(entry.key).trim();
+      const headerValue = String(entry.value).trim();
+
+      return {
+        key,
+        value: headerValue,
+        enabled: typeof entry.enabled === 'boolean' ? entry.enabled : undefined,
+      };
+    });
+}
+
+function isAISettingsStorageMode(value: unknown): value is AISettingsStorageMode {
+  return value === 'local' || value === 'session';
+}
+
+export function isAIProvider(value: unknown): value is AIProvider {
+  return typeof value === 'string' && AI_PROVIDERS.includes(value as AIProvider);
+}
+
+export function sanitizeAISettings(
+  input: Partial<AISettings> | undefined,
+  fallback: AISettings
+): AISettings {
+  return {
+    provider: isAIProvider(input?.provider) ? input.provider : fallback.provider,
+    storageMode: isAISettingsStorageMode(input?.storageMode) ? input.storageMode : fallback.storageMode,
+    apiKey: isNonEmptyString(input?.apiKey) ? input.apiKey.trim() : undefined,
+    model: isNonEmptyString(input?.model) ? input.model.trim() : undefined,
+    customBaseUrl: isNonEmptyString(input?.customBaseUrl) ? input.customBaseUrl.trim() : undefined,
+    customHeaders: sanitizeCustomHeaders(input?.customHeaders),
+  };
+}
diff --git a/src/store/aiSettingsPersistence.ts b/src/store/aiSettingsPersistence.ts
new file mode 100644
index 0000000..c6d78c0
--- /dev/null
+++ b/src/store/aiSettingsPersistence.ts
@@ -0,0 +1,77 @@
+import { DEFAULT_AI_SETTINGS } from './defaults';
+import { sanitizeAISettings } from './aiSettings';
+import type { AISettings } from './types';
+
+const AI_SETTINGS_STORAGE_KEY = 'openflowkit-ai-settings';
+
+function getStorageSafe(storageType: 'local' | 'session'): Storage | null {
+    if (typeof window === 'undefined') {
+        return null;
+    }
+
+    return storageType === 'local' ? window.localStorage : window.sessionStorage;
+}
+
+function removeStoredAISettings(storageType: 'local' | 'session'): void {
+    const storage = getStorageSafe(storageType);
+    if (!storage) {
+        return;
+    }
+
+    try {
+        storage.removeItem(AI_SETTINGS_STORAGE_KEY);
+    } catch {
+        // Ignore storage cleanup failures so editor state remains usable.
+    }
+}
+
+function readStoredAISettings(storageType: 'local' | 'session'): AISettings | null {
+    const storage = getStorageSafe(storageType);
+    if (!storage) {
+        return null;
+    }
+
+    try {
+        const rawValue = storage.getItem(AI_SETTINGS_STORAGE_KEY);
+        if (!rawValue) {
+            return null;
+        }
+
+        const parsed = JSON.parse(rawValue) as Partial<AISettings>;
+        return sanitizeAISettings(parsed, {
+            ...DEFAULT_AI_SETTINGS,
+            storageMode: storageType,
+        });
+    } catch {
+        return null;
+    }
+}
+
+export function loadPersistedAISettings(): AISettings {
+    const sessionSettings = readStoredAISettings('session');
+    if (sessionSettings) {
+        return sessionSettings;
+    }
+
+    return readStoredAISettings('local') ?? DEFAULT_AI_SETTINGS;
+}
+
+export function persistAISettings(settings: AISettings): void {
+    const sanitizedSettings = sanitizeAISettings(settings, DEFAULT_AI_SETTINGS);
+    const storage = getStorageSafe(sanitizedSettings.storageMode);
+    if (!storage) {
+        return;
+    }
+
+    try {
+        storage.setItem(AI_SETTINGS_STORAGE_KEY, JSON.stringify(sanitizedSettings));
+        removeStoredAISettings(sanitizedSettings.storageMode === 'local' ? 'session' : 'local');
+    } catch {
+        // Ignore settings persistence failures so editor state remains usable.
+    }
+}
+
+export function clearPersistedAISettings(): void {
+    removeStoredAISettings('local');
+    removeStoredAISettings('session');
+}
diff --git a/src/store/defaults.ts b/src/store/defaults.ts
index 8aaafc3..fe61be0 100644
--- a/src/store/defaults.ts
+++ b/src/store/defaults.ts
@@ -1,5 +1,5 @@
 import type { DesignSystem, GlobalEdgeOptions } from '@/lib/types';
-import { ROLLOUT_FLAGS } from '@/config/rolloutFlags';
+import { sanitizeAISettings } from './aiSettings';
 import type { AISettings, Layer, ViewSettings } from './types';
 
 export const DEFAULT_DESIGN_SYSTEM: DesignSystem = {
@@ -35,7 +35,7 @@ export const DEFAULT_DESIGN_SYSTEM: DesignSystem = {
         node: {
             borderRadius: '8px',
             borderWidth: '1px',
-            boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
+            boxShadow: '0 1px 3px 0 rgb(0 0 0 / 0.08), 0 4px 8px -2px rgb(0 0 0 / 0.1), 0 0 0 1px rgb(0 0 0 / 0.04)',
             padding: '1rem',
         },
         edge: {
@@ -44,13 +44,17 @@ export const DEFAULT_DESIGN_SYSTEM: DesignSystem = {
     },
 };
 
-export const DEFAULT_AI_SETTINGS: AISettings = {
-    provider: 'gemini',
-    apiKey: undefined,
-    model: undefined,
-    customBaseUrl: undefined,
-    customHeaders: [],
-};
+export const DEFAULT_AI_SETTINGS: AISettings = sanitizeAISettings(
+    { provider: 'gemini' },
+    {
+        provider: 'gemini',
+        storageMode: 'local',
+        apiKey: undefined,
+        model: undefined,
+        customBaseUrl: undefined,
+        customHeaders: [],
+    }
+);
 
 export const INITIAL_VIEW_SETTINGS: ViewSettings = {
     showGrid: true,
@@ -66,12 +70,13 @@ export const INITIAL_VIEW_SETTINGS: ViewSettings = {
     largeGraphSafetyProfile: 'balanced',
     exportSerializationMode: 'deterministic',
     language: 'en',
+    lintRules: '',
 };
 
 export const INITIAL_GLOBAL_EDGE_OPTIONS: GlobalEdgeOptions = {
     type: 'smoothstep',
-    animated: !ROLLOUT_FLAGS.visualQualityV2,
-    strokeWidth: ROLLOUT_FLAGS.visualQualityV2 ? 1.5 : 2,
+    animated: false,
+    strokeWidth: 1.5,
 };
 
 export const INITIAL_LAYERS: Layer[] = [
diff --git a/src/store/persistence.test.ts b/src/store/persistence.test.ts
index 5f0ac1b..fa8cc8b 100644
--- a/src/store/persistence.test.ts
+++ b/src/store/persistence.test.ts
@@ -1,10 +1,12 @@
-import { describe, expect, it } from 'vitest';
+import { describe, expect, it, vi } from 'vitest';
 import type { FlowEdge, FlowNode, FlowTab } from '@/lib/types';
 import {
     createInitialFlowState,
     migratePersistedFlowState,
     partializePersistedFlowState,
+    sanitizePersistedTab,
 } from './persistence';
+import * as aiSettingsPersistence from './aiSettingsPersistence';
 
 function createNode(id: string, label: string): FlowNode {
     return {
@@ -32,15 +34,27 @@ function createTab(id: string, name: string, nodes: FlowNode[], edges: FlowEdge[
 
 describe('store persistence helpers', () => {
     it('creates the expected initial persisted runtime slice', () => {
+        const loadPersistedAISettingsSpy = vi.spyOn(aiSettingsPersistence, 'loadPersistedAISettings').mockReturnValue({
+            provider: 'openai',
+            storageMode: 'local',
+            apiKey: 'persisted-key',
+            model: 'gpt-test',
+            customBaseUrl: undefined,
+            customHeaders: [],
+        });
         const state = createInitialFlowState();
 
         expect(state.activeTabId).toBe('tab-1');
         expect(state.tabs).toHaveLength(1);
         expect(state.layers[0]?.id).toBe('default');
         expect(state.designSystems[0]?.id).toBe('default');
+        expect(state.aiSettings.provider).toBe('openai');
+        expect(state.aiSettings.apiKey).toBe('persisted-key');
+
+        loadPersistedAISettingsSpy.mockRestore();
     });
 
-    it('partializes store state while stripping transient canvas fields from tabs', () => {
+    it('sanitizes tab content while stripping transient canvas fields', () => {
         const tab = createTab(
             'tab-2',
             'Tab 2',
@@ -55,21 +69,12 @@ describe('store persistence helpers', () => {
             ],
             [{ ...createEdge('e2', 'n2', 'n2'), selected: true }]
         );
-        const state = {
-            ...createInitialFlowState(),
-            tabs: [createInitialFlowState().tabs[0], tab],
-            activeTabId: 'tab-2',
-            nodes: tab.nodes,
-            edges: tab.edges,
-        };
-
-        const persistedSlice = partializePersistedFlowState(state as never);
-        const persistedTab = persistedSlice.tabs.find((entry) => entry.id === 'tab-2');
-        const persistedNode = persistedTab?.nodes[0] as FlowNode & {
+        const persistedTab = sanitizePersistedTab(tab);
+        const persistedNode = persistedTab.nodes[0] as FlowNode & {
             measured?: unknown;
             positionAbsolute?: unknown;
         };
-        const persistedEdge = persistedTab?.edges[0];
+        const persistedEdge = persistedTab.edges[0];
 
         expect(persistedNode.selected).toBeUndefined();
         expect(persistedNode.dragging).toBeUndefined();
@@ -88,18 +93,12 @@ describe('store persistence helpers', () => {
             defaultStepDurationMs: 1500,
         };
 
-        const persistedSlice = partializePersistedFlowState({
-            ...createInitialFlowState(),
-            tabs: [tab],
-            activeTabId: 'tab-2',
-            nodes: tab.nodes,
-            edges: tab.edges,
-        } as never);
+        const persistedTab = sanitizePersistedTab(tab);
 
-        expect(persistedSlice.tabs[0].playback?.timeline[0]?.nodeId).toBe('n2');
+        expect(persistedTab.playback?.timeline[0]?.nodeId).toBe('n2');
 
         const migrated = migratePersistedFlowState({
-            tabs: [persistedSlice.tabs[0]],
+            tabs: [persistedTab],
             activeTabId: 'tab-2',
         }) as {
             tabs: FlowTab[];
@@ -148,4 +147,74 @@ describe('store persistence helpers', () => {
         expect(migrated.viewSettings.showGrid).toBe(false);
         expect(migrated.viewSettings.snapToGrid).toBe(true);
     });
+
+    it('sanitizes persisted ai settings during migration', () => {
+        const loadPersistedAISettingsSpy = vi.spyOn(aiSettingsPersistence, 'loadPersistedAISettings').mockReturnValue({
+            provider: 'gemini',
+            storageMode: 'local',
+            apiKey: undefined,
+            model: undefined,
+            customBaseUrl: undefined,
+            customHeaders: [],
+        });
+        const persistAISettingsSpy = vi.spyOn(aiSettingsPersistence, 'persistAISettings').mockImplementation(() => undefined);
+        const migrated = migratePersistedFlowState({
+            tabs: [
+                {
+                    id: 'tab-a',
+                    name: 'A',
+                    nodes: [createNode('na', 'A')],
+                    edges: [],
+                    history: { past: [], future: [] },
+                },
+            ],
+            activeTabId: 'tab-a',
+            aiSettings: {
+                provider: 'invalid-provider',
+                apiKey: '  secret  ',
+                customHeaders: [
+                    { key: ' Authorization ', value: 'Bearer token', enabled: true },
+                    { key: '', value: 'skip-me' },
+                ],
+            },
+        }) as {
+            aiSettings: {
+                provider: string;
+                apiKey?: string;
+                customHeaders?: Array<{ key: string; value: string; enabled?: boolean }>;
+            };
+        };
+
+        expect(migrated.aiSettings.provider).toBe('gemini');
+        expect(migrated.aiSettings.apiKey).toBe('secret');
+        expect(migrated.aiSettings.customHeaders).toEqual([
+            { key: 'Authorization', value: 'Bearer token', enabled: true },
+        ]);
+        expect(persistAISettingsSpy).toHaveBeenCalledWith({
+            provider: 'gemini',
+            storageMode: 'local',
+            apiKey: 'secret',
+            model: undefined,
+            customBaseUrl: undefined,
+            customHeaders: [
+                { key: 'Authorization', value: 'Bearer token', enabled: true },
+            ],
+        });
+
+        loadPersistedAISettingsSpy.mockRestore();
+        persistAISettingsSpy.mockRestore();
+    });
+
+    it('does not include aiSettings in the main persisted flow slice', () => {
+        const persistedSlice = partializePersistedFlowState(createInitialFlowState() as never);
+
+        expect('aiSettings' in persistedSlice).toBe(false);
+    });
+
+    it('does not include durable document state in the main persisted flow slice', () => {
+        const persistedSlice = partializePersistedFlowState(createInitialFlowState() as never);
+
+        expect('tabs' in persistedSlice).toBe(false);
+        expect('activeTabId' in persistedSlice).toBe(false);
+    });
 });
diff --git a/src/store/persistence.ts b/src/store/persistence.ts
index d83c47a..1818b99 100644
--- a/src/store/persistence.ts
+++ b/src/store/persistence.ts
@@ -3,8 +3,9 @@ import { DEFAULT_DIAGRAM_TYPE } from '@/services/diagramDocument';
 import { clonePlaybackState, sanitizePlaybackState } from '@/services/playback/model';
 import type { FlowTab } from '@/lib/types';
 import { isDiagramType } from '@/lib/types';
+import { sanitizeAISettings } from './aiSettings';
+import { loadPersistedAISettings, persistAISettings } from './aiSettingsPersistence';
 import {
-    DEFAULT_AI_SETTINGS,
     DEFAULT_DESIGN_SYSTEM,
     INITIAL_GLOBAL_EDGE_OPTIONS,
     INITIAL_LAYERS,
@@ -14,13 +15,10 @@ import type { FlowState } from './types';
 
 export type PersistedFlowStateSlice = Pick<
     FlowState,
-    | 'tabs'
-    | 'activeTabId'
     | 'designSystems'
     | 'activeDesignSystemId'
     | 'viewSettings'
     | 'globalEdgeOptions'
-    | 'aiSettings'
     | 'layers'
     | 'activeLayerId'
 >;
@@ -147,6 +145,14 @@ export function migratePersistedFlowState(persistedState: unknown): unknown {
     const layers = persistedLayers.some((layer) => layer.id === 'default')
         ? persistedLayers
         : [...INITIAL_LAYERS, ...persistedLayers];
+    const persistedAiSettings =
+        state.aiSettings && typeof state.aiSettings === 'object'
+            ? (state.aiSettings as Partial<FlowState['aiSettings']>)
+            : undefined;
+    const migratedAISettings = sanitizeAISettings(persistedAiSettings, loadPersistedAISettings());
+    if (persistedAiSettings) {
+        persistAISettings(migratedAISettings);
+    }
 
     return {
         ...state,
@@ -164,18 +170,16 @@ export function migratePersistedFlowState(persistedState: unknown): unknown {
             ...INITIAL_VIEW_SETTINGS,
             ...persistedViewSettings,
         },
+        aiSettings: migratedAISettings,
     };
 }
 
 export function partializePersistedFlowState(state: FlowState): PersistedFlowStateSlice {
     return {
-        tabs: state.tabs.map(sanitizePersistedTab),
-        activeTabId: state.activeTabId,
         designSystems: state.designSystems,
         activeDesignSystemId: state.activeDesignSystemId,
         viewSettings: state.viewSettings,
         globalEdgeOptions: state.globalEdgeOptions,
-        aiSettings: state.aiSettings,
         layers: state.layers,
         activeLayerId: state.activeLayerId,
     };
@@ -208,7 +212,7 @@ export function createInitialFlowState(): Pick<
         activeDesignSystemId: 'default',
         viewSettings: INITIAL_VIEW_SETTINGS,
         globalEdgeOptions: INITIAL_GLOBAL_EDGE_OPTIONS,
-        aiSettings: DEFAULT_AI_SETTINGS,
+        aiSettings: loadPersistedAISettings(),
         layers: INITIAL_LAYERS,
         activeLayerId: 'default',
         selectedNodeId: null,
diff --git a/src/store/types.ts b/src/store/types.ts
index 84f2ee0..b92c45b 100644
--- a/src/store/types.ts
+++ b/src/store/types.ts
@@ -23,6 +23,7 @@ export interface ViewSettings {
     largeGraphSafetyProfile: 'performance' | 'balanced' | 'quality';
     exportSerializationMode: ExportSerializationMode;
     language: string;
+    lintRules: string;
 }
 
 export type AIProvider =
@@ -36,6 +37,8 @@ export type AIProvider =
     | 'openrouter'
     | 'custom';
 
+export type AISettingsStorageMode = 'local' | 'session';
+
 export interface CustomHeaderConfig {
     key: string;
     value: string;
@@ -44,6 +47,7 @@ export interface CustomHeaderConfig {
 
 export interface AISettings {
     provider: AIProvider;
+    storageMode: AISettingsStorageMode;
     apiKey?: string;
     model?: string;
     customBaseUrl?: string;
diff --git a/tsconfig.tsbuildinfo b/tsconfig.tsbuildinfo
index 241be9a..d8b108e 100644
--- a/tsconfig.tsbuildinfo
+++ b/tsconfig.tsbuildinfo
@@ -1 +1 @@
-{"root":["./src/app.tsx","./src/constants.test.ts","./src/constants.ts","./src/index.tsx","./src/store.test.ts","./src/store.ts","./src/theme.ts","./src/app/routestate.test.ts","./src/app/routestate.ts","./src/components/annotationnode.tsx","./src/components/commandbar.test.tsx","./src/components/commandbar.tsx","./src/components/connectmenu.test.tsx","./src/components/connectmenu.tsx","./src/components/contextmenu.tsx","./src/components/customconnectionline.tsx","./src/components/customedge.tsx","./src/components/customnode.handleinteraction.test.tsx","./src/components/customnode.tsx","./src/components/designsystem.integration.test.tsx","./src/components/errorboundary.tsx","./src/components/exportmenu.tsx","./src/components/exportmenupanel.tsx","./src/components/flowcanvas.tsx","./src/components/floweditor.tsx","./src/components/floweditoremptystate.tsx","./src/components/floweditorlayoutoverlay.tsx","./src/components/floweditorpanels.test.tsx","./src/components/floweditorpanels.tsx","./src/components/flowtabs.tsx","./src/components/groupnode.tsx","./src/components/homepage.integration.test.tsx","./src/components/homepage.tsx","./src/components/iconmap.test.tsx","./src/components/iconmap.ts","./src/components/imagenode.tsx","./src/components/inlinetexteditsurface.test.tsx","./src/components/inlinetexteditsurface.tsx","./src/components/keyboardshortcutsmodal.tsx","./src/components/landingpage.tsx","./src/components/languageselector.tsx","./src/components/markdownrenderer.tsx","./src/components/memoizedmarkdown.tsx","./src/components/navigationcontrols.tsx","./src/components/nodechrome.tsx","./src/components/nodetransformcontrols.tsx","./src/components/playbackcontrols.tsx","./src/components/propertiespanel.tsx","./src/components/rightrail.tsx","./src/components/sectionnode.tsx","./src/components/sharemodal.test.tsx","./src/components/sharemodal.tsx","./src/components/sidebarshell.tsx","./src/components/snapshotspanel.tsx","./src/components/studioaipanel.tsx","./src/components/studiocodepanel.test.tsx","./src/components/studiocodepanel.tsx","./src/components/studiopanel.tsx","./src/components/studioplaybackpanel.test.tsx","./src/components/studioplaybackpanel.tsx","./src/components/swimlanenode.tsx","./src/components/textnode.tsx","./src/components/toolbar.tsx","./src/components/tooltip.tsx","./src/components/topnav.tsx","./src/components/welcomemodal.tsx","./src/components/container-nodes.handleinteraction.test.tsx","./src/components/handleinteraction.test.ts","./src/components/handleinteraction.ts","./src/components/handleinteractionusage.test.ts","./src/components/lightweight-nodes.handleinteraction.test.tsx","./src/components/markdownsyntax.ts","./src/components/transformdiagnostics.test.ts","./src/components/transformdiagnostics.ts","./src/components/useactivenodeselection.ts","./src/components/useexportmenu.ts","./src/components/settingsmodal/aisettings.tsx","./src/components/settingsmodal/generalsettings.tsx","./src/components/settingsmodal/privacysettings.tsx","./src/components/settingsmodal/settingsmodal.test.tsx","./src/components/settingsmodal/settingsmodal.tsx","./src/components/settingsmodal/shortcutssettings.tsx","./src/components/settingsmodal/ai/advancedendpointsection.tsx","./src/components/settingsmodal/ai/customheaderseditor.tsx","./src/components/settingsmodal/ai/privacysection.tsx","./src/components/settingsmodal/ai/providericon.tsx","./src/components/settingsmodal/ai/providersection.tsx","./src/components/settingsmodal/ai/step.tsx","./src/components/app/routeloadingfallback.test.tsx","./src/components/app/routeloadingfallback.tsx","./src/components/command-bar/assetsview.test.tsx","./src/components/command-bar/assetsview.tsx","./src/components/command-bar/designsystemeditor.tsx","./src/components/command-bar/designsystemview.tsx","./src/components/command-bar/layersview.tsx","./src/components/command-bar/layoutview.tsx","./src/components/command-bar/pagesview.tsx","./src/components/command-bar/rootview.tsx","./src/components/command-bar/searchview.tsx","./src/components/command-bar/templatesview.tsx","./src/components/command-bar/viewheader.tsx","./src/components/command-bar/visualsview.tsx","./src/components/command-bar/applycodechanges.ts","./src/components/command-bar/searchquery.test.ts","./src/components/command-bar/searchquery.ts","./src/components/command-bar/types.ts","./src/components/command-bar/useaiviewstate.ts","./src/components/command-bar/usecommandbarcommands.test.tsx","./src/components/command-bar/usecommandbarcommands.tsx","./src/components/custom-edge/customedgewrapper.tsx","./src/components/custom-edge/animatededgepresentation.test.ts","./src/components/custom-edge/animatededgepresentation.ts","./src/components/custom-edge/classrelationsemantics.test.ts","./src/components/custom-edge/classrelationsemantics.ts","./src/components/custom-edge/edgerendermode.ts","./src/components/custom-edge/pathutils.test.ts","./src/components/custom-edge/pathutils.ts","./src/components/custom-edge/relationroutingsemantics.test.ts","./src/components/custom-edge/relationroutingsemantics.ts","./src/components/custom-edge/standardedgemarkers.test.ts","./src/components/custom-edge/standardedgemarkers.ts","./src/components/custom-nodes/architecturenode.handleinteraction.test.tsx","./src/components/custom-nodes/architecturenode.tsx","./src/components/custom-nodes/browsernode.tsx","./src/components/custom-nodes/classentitynode.handleinteraction.test.tsx","./src/components/custom-nodes/classnode.tsx","./src/components/custom-nodes/entitynode.tsx","./src/components/custom-nodes/journeynode.tsx","./src/components/custom-nodes/mindmapnode.tsx","./src/components/custom-nodes/mobilenode.tsx","./src/components/custom-nodes/visualnodes.handleinteraction.test.tsx","./src/components/docs/callout.tsx","./src/components/docs/docsbreadcrumbs.tsx","./src/components/docs/docschatbot.test.tsx","./src/components/docs/docschatbot.tsx","./src/components/docs/docsfooter.tsx","./src/components/docs/docslayout.tsx","./src/components/docs/docspage.tsx","./src/components/docs/docssidebar.tsx","./src/components/docs/docstoc.tsx","./src/components/docs/markdowncomponents.tsx","./src/components/docs/syntaxcodeblock.tsx","./src/components/docs/docscontentindex.ts","./src/components/docs/docsdata.ts","./src/components/docs/docsmarkdownloaders.test.ts","./src/components/docs/docsmarkdownloaders.ts","./src/components/docs/docspageutils.ts","./src/components/docs/usedocscontent.ts","./src/components/docs/usedocslayoutstate.ts","./src/components/docs/usedocsnavigation.ts","./src/components/docs/usedocspagemodel.ts","./src/components/docs/chatbot/usedocschatbotstate.ts","./src/components/flow-canvas/flowcanvasalignmentguidesoverlay.tsx","./src/components/flow-canvas/flowcanvasoverlays.tsx","./src/components/flow-canvas/alignmentguides.test.ts","./src/components/flow-canvas/alignmentguides.ts","./src/components/flow-canvas/flowcanvastypes.test.ts","./src/components/flow-canvas/flowcanvastypes.tsx","./src/components/flow-canvas/largegraphsafetymode.test.ts","./src/components/flow-canvas/largegraphsafetymode.ts","./src/components/flow-canvas/nodechromecoverage.test.ts","./src/components/flow-canvas/pastehelpers.test.ts","./src/components/flow-canvas/pastehelpers.ts","./src/components/flow-canvas/useflowcanvasalignmentguides.ts","./src/components/flow-canvas/useflowcanvasconnectionstate.ts","./src/components/flow-canvas/useflowcanvascontextactions.ts","./src/components/flow-canvas/useflowcanvasdragdrop.ts","./src/components/flow-canvas/useflowcanvasinteractionlod.ts","./src/components/flow-canvas/useflowcanvasmenus.ts","./src/components/flow-canvas/useflowcanvasmenusandactions.test.tsx","./src/components/flow-canvas/useflowcanvasmenusandactions.ts","./src/components/flow-canvas/useflowcanvasnodedraghandlers.ts","./src/components/flow-canvas/useflowcanvaspaste.ts","./src/components/flow-canvas/useflowcanvasreactflowconfig.test.ts","./src/components/flow-canvas/useflowcanvasreactflowconfig.ts","./src/components/flow-canvas/useflowcanvasselectiontools.test.tsx","./src/components/flow-canvas/useflowcanvasselectiontools.ts","./src/components/flow-canvas/useflowcanvasviewstate.test.ts","./src/components/flow-canvas/useflowcanvasviewstate.ts","./src/components/flow-canvas/useflowcanvaszoomlod.ts","./src/components/flow-editor/collaborationpresenceoverlay.test.tsx","./src/components/flow-editor/collaborationpresenceoverlay.tsx","./src/components/flow-editor/panelprops.test.ts","./src/components/flow-editor/panelprops.ts","./src/components/flow-editor/shouldexitstudioonselection.test.ts","./src/components/flow-editor/shouldexitstudioonselection.ts","./src/components/flow-editor/usefloweditorshellcontroller.test.tsx","./src/components/flow-editor/usefloweditorshellcontroller.ts","./src/components/flow-editor/usefloweditorstudiocontroller.test.tsx","./src/components/flow-editor/usefloweditorstudiocontroller.ts","./src/components/home/homedashboard.tsx","./src/components/home/homeflowdialogs.tsx","./src/components/home/homesettingsview.tsx","./src/components/home/homesidebar.tsx","./src/components/home/welcomemodalstate.ts","./src/components/icons/assetsicon.tsx","./src/components/icons/openflowlogo.tsx","./src/components/landing/button.tsx","./src/components/landing/codedemo.tsx","./src/components/landing/figmasection.tsx","./src/components/landing/finalctasection.tsx","./src/components/landing/footer.tsx","./src/components/landing/herosection.tsx","./src/components/landing/navbar.tsx","./src/components/landing/pricingsection.tsx","./src/components/landing/problemsection.tsx","./src/components/landing/solutionsection.tsx","./src/components/landing/testimonials.tsx","./src/components/landing/usecases.tsx","./src/components/properties/bulknodeproperties.tsx","./src/components/properties/colorpicker.test.tsx","./src/components/properties/colorpicker.tsx","./src/components/properties/customcolorpopover.tsx","./src/components/properties/diagramnodepropertiesrouter.test.ts","./src/components/properties/diagramnodepropertiesrouter.tsx","./src/components/properties/edgeproperties.tsx","./src/components/properties/iconpicker.tsx","./src/components/properties/imageupload.tsx","./src/components/properties/inspectorprimitives.tsx","./src/components/properties/nodeactionbuttons.tsx","./src/components/properties/nodecontentsection.tsx","./src/components/properties/nodeimagesettingssection.tsx","./src/components/properties/nodeproperties.tsx","./src/components/properties/nodetextstylesection.tsx","./src/components/properties/nodewireframevariantsection.tsx","./src/components/properties/propertysliderrow.tsx","./src/components/properties/segmentedchoice.tsx","./src/components/properties/shapeselector.tsx","./src/components/properties/swatchpicker.tsx","./src/components/properties/colorpickerutils.ts","./src/components/properties/edge/architectureedgesemanticssection.tsx","./src/components/properties/edge/edgecolorsection.tsx","./src/components/properties/edge/edgeconditionsection.tsx","./src/components/properties/edge/edgelabelsection.tsx","./src/components/properties/edge/edgeroutesection.test.tsx","./src/components/properties/edge/edgeroutesection.tsx","./src/components/properties/edge/edgestylesection.tsx","./src/components/properties/edge/architecturesemantics.test.ts","./src/components/properties/edge/architecturesemantics.ts","./src/components/properties/families/architecturenodeproperties.tsx","./src/components/properties/families/classdiagramnodeproperties.tsx","./src/components/properties/families/erdiagramnodeproperties.tsx","./src/components/properties/families/journeynodeproperties.tsx","./src/components/properties/families/mindmapnodeproperties.test.tsx","./src/components/properties/families/mindmapnodeproperties.tsx","./src/components/studio-code-panel/usestudiocodepanelcontroller.test.tsx","./src/components/studio-code-panel/usestudiocodepanelcontroller.ts","./src/components/toolbar/toolbaraddmenu.tsx","./src/components/toolbar/toolbaraddmenupanel.tsx","./src/components/toolbar/toolbarhistorycontrols.tsx","./src/components/toolbar/toolbarmodecontrols.tsx","./src/components/toolbar/toolbarbuttonstyles.ts","./src/components/top-nav/topnavactions.tsx","./src/components/top-nav/topnavbrand.tsx","./src/components/top-nav/topnavmenu.tsx","./src/components/top-nav/topnavmenupanel.tsx","./src/components/top-nav/usetopnavstate.ts","./src/components/ui/button.tsx","./src/components/ui/collapsiblesection.tsx","./src/components/ui/input.tsx","./src/components/ui/label.tsx","./src/components/ui/select.tsx","./src/components/ui/sidebaritem.tsx","./src/components/ui/slider.tsx","./src/components/ui/switch.tsx","./src/components/ui/textarea.tsx","./src/components/ui/toastcontext.tsx","./src/config/aiproviders.test.ts","./src/config/aiproviders.ts","./src/config/rolloutflags.ts","./src/diagram-types/registerbuiltinplugins.test.ts","./src/diagram-types/registerbuiltinplugins.ts","./src/diagram-types/registerbuiltinpropertypanels.test.ts","./src/diagram-types/registerbuiltinpropertypanels.ts","./src/diagram-types/architecture/fuzzcorpus.test.ts","./src/diagram-types/architecture/plugin.test.ts","./src/diagram-types/architecture/plugin.ts","./src/diagram-types/classdiagram/fuzzcorpus.test.ts","./src/diagram-types/classdiagram/plugin.test.ts","./src/diagram-types/classdiagram/plugin.ts","./src/diagram-types/core/contracts.ts","./src/diagram-types/core/index.ts","./src/diagram-types/core/propertypanels.test.ts","./src/diagram-types/core/propertypanels.ts","./src/diagram-types/core/registry.ts","./src/diagram-types/erdiagram/fuzzcorpus.test.ts","./src/diagram-types/erdiagram/plugin.test.ts","./src/diagram-types/erdiagram/plugin.ts","./src/diagram-types/flowchart/plugin.ts","./src/diagram-types/journey/fuzzcorpus.test.ts","./src/diagram-types/journey/plugin.test.ts","./src/diagram-types/journey/plugin.ts","./src/diagram-types/mindmap/fuzzcorpus.test.ts","./src/diagram-types/mindmap/plugin.test.ts","./src/diagram-types/mindmap/plugin.ts","./src/diagram-types/statediagram/plugin.test.ts","./src/diagram-types/statediagram/plugin.ts","./src/hooks/edgeconnectinteractions.test.ts","./src/hooks/edgeconnectinteractions.ts","./src/hooks/mindmaptopicactionrequest.ts","./src/hooks/nodelabeleditrequest.test.ts","./src/hooks/nodelabeleditrequest.ts","./src/hooks/snapshotpolicy.test.ts","./src/hooks/snapshotpolicy.ts","./src/hooks/useaigeneration.ts","./src/hooks/useanimatededgeperformancewarning.test.ts","./src/hooks/useanimatededgeperformancewarning.ts","./src/hooks/useclipboardoperations.ts","./src/hooks/usedesignsystem.ts","./src/hooks/useedgeinteractions.ts","./src/hooks/useedgeoperations.ts","./src/hooks/usefloweditoractions.test.ts","./src/hooks/usefloweditoractions.ts","./src/hooks/usefloweditorcallbacks.ts","./src/hooks/usefloweditorcollaboration.test.ts","./src/hooks/usefloweditorcollaboration.ts","./src/hooks/usefloweditoruistate.ts","./src/hooks/useflowexport.ts","./src/hooks/useflowhistory.test.ts","./src/hooks/useflowhistory.ts","./src/hooks/useflowoperations.ts","./src/hooks/useinlinenodetextedit.test.ts","./src/hooks/useinlinenodetextedit.ts","./src/hooks/usekeyboardshortcuts.test.ts","./src/hooks/usekeyboardshortcuts.ts","./src/hooks/uselayoutoperations.ts","./src/hooks/usemarkdowneditor.ts","./src/hooks/usemodifierkeys.test.ts","./src/hooks/usemodifierkeys.ts","./src/hooks/usenodeoperations.ts","./src/hooks/useplayback.ts","./src/hooks/usesnapshots.ts","./src/hooks/usestoragepressureguard.ts","./src/hooks/ai-generation/graphcomposer.test.ts","./src/hooks/ai-generation/graphcomposer.ts","./src/hooks/ai-generation/requestlifecycle.test.ts","./src/hooks/ai-generation/requestlifecycle.ts","./src/hooks/edge-operations/utils.test.ts","./src/hooks/edge-operations/utils.ts","./src/hooks/flow-editor-actions/exporthandlers.test.ts","./src/hooks/flow-editor-actions/exporthandlers.ts","./src/hooks/flow-editor-actions/helpers.ts","./src/hooks/flow-editor-actions/layouthandlers.test.ts","./src/hooks/flow-editor-actions/layouthandlers.ts","./src/hooks/flow-operations/useflowcoreactions.ts","./src/hooks/node-operations/createconnectedsibling.ts","./src/hooks/node-operations/dragstopreconcilepolicy.test.ts","./src/hooks/node-operations/dragstopreconcilepolicy.ts","./src/hooks/node-operations/routingduringdrag.test.ts","./src/hooks/node-operations/routingduringdrag.ts","./src/hooks/node-operations/usenodeoperationadders.ts","./src/hooks/node-operations/utils.test.ts","./src/hooks/node-operations/utils.ts","./src/i18n/config.test.ts","./src/i18n/config.ts","./src/i18n/strictmodelocalecoverage.test.ts","./src/lib/analytics.ts","./src/lib/brand.ts","./src/lib/connectcreationpolicy.test.ts","./src/lib/connectcreationpolicy.ts","./src/lib/devperformance.ts","./src/lib/flowminddslparserv2.test.ts","./src/lib/flowminddslparserv2.ts","./src/lib/genericshapepolicy.ts","./src/lib/id.ts","./src/lib/index.ts","./src/lib/mermaidparser.ts","./src/lib/mermaidparserhelpers.ts","./src/lib/mindmaplayout.test.ts","./src/lib/mindmaplayout.ts","./src/lib/nodehandles.ts","./src/lib/nodeparent.ts","./src/lib/openflowdslparser.ts","./src/lib/reactflowcompat.ts","./src/lib/reconnectedge.test.ts","./src/lib/reconnectedge.ts","./src/lib/relationsemantics.test.ts","./src/lib/relationsemantics.ts","./src/lib/releasestaleelkroutes.test.ts","./src/lib/releasestaleelkroutes.ts","./src/lib/storagepressure.test.ts","./src/lib/storagepressure.ts","./src/lib/types.ts","./src/services/aligndistribute.ts","./src/services/aiservice.ts","./src/services/animatedexport.test.ts","./src/services/animatedexport.ts","./src/services/architectureroundtrip.test.ts","./src/services/canonicalserialization.test.ts","./src/services/canonicalserialization.ts","./src/services/composediagramfordisplay.test.ts","./src/services/composediagramfordisplay.ts","./src/services/diagramdocument.test.ts","./src/services/diagramdocument.ts","./src/services/domainlibrary.test.ts","./src/services/domainlibrary.ts","./src/services/elklayout.test.ts","./src/services/elklayout.ts","./src/services/exportservice.test.ts","./src/services/exportservice.ts","./src/services/figmaexportservice.ts","./src/services/flowchartroundtrip.test.ts","./src/services/geminiservice.ts","./src/services/gifencoder.test.ts","./src/services/gifencoder.ts","./src/services/iconassetcatalog.ts","./src/services/importfidelity.test.ts","./src/services/importfidelity.ts","./src/services/mermaidparser.test.ts","./src/services/openflowdslexporter.test.ts","./src/services/openflowdslexporter.ts","./src/services/openflowdslparser.test.ts","./src/services/openflowroundtripgolden.test.ts","./src/services/openflowroundtripgoldenfixtures.ts","./src/services/remainingfamiliesroundtrip.test.ts","./src/services/smartedgerouting.test.ts","./src/services/smartedgerouting.ts","./src/services/statediagramroundtrip.test.ts","./src/services/templates.selector.test.ts","./src/services/templates.ts","./src/services/ai/contextserializer.test.ts","./src/services/ai/contextserializer.ts","./src/services/collaboration/canvasdiff.test.ts","./src/services/collaboration/canvasdiff.ts","./src/services/collaboration/comments.test.ts","./src/services/collaboration/comments.ts","./src/services/collaboration/contracts.test.ts","./src/services/collaboration/contracts.ts","./src/services/collaboration/hookutils.ts","./src/services/collaboration/presenceviewmodel.test.ts","./src/services/collaboration/presenceviewmodel.ts","./src/services/collaboration/reducer.test.ts","./src/services/collaboration/reducer.ts","./src/services/collaboration/roomconfig.ts","./src/services/collaboration/roomlink.test.ts","./src/services/collaboration/roomlink.ts","./src/services/collaboration/runtimecontroller.test.ts","./src/services/collaboration/runtimecontroller.ts","./src/services/collaboration/runtimehookutils.test.ts","./src/services/collaboration/runtimehookutils.ts","./src/services/collaboration/session.test.ts","./src/services/collaboration/session.ts","./src/services/collaboration/storebridge.test.ts","./src/services/collaboration/storebridge.ts","./src/services/collaboration/transport.test.ts","./src/services/collaboration/transport.ts","./src/services/collaboration/transportfactory.test.ts","./src/services/collaboration/transportfactory.ts","./src/services/collaboration/types.ts","./src/services/collaboration/versioning.test.ts","./src/services/collaboration/versioning.ts","./src/services/collaboration/yjspeertransport.test.ts","./src/services/collaboration/yjspeertransport.ts","./src/services/elk-layout/determinism.ts","./src/services/elk-layout/options.ts","./src/services/elk-layout/types.ts","./src/services/export/formatting.ts","./src/services/export/mermaidbuilder.ts","./src/services/export/plantumlbuilder.ts","./src/services/figma/edgehelpers.ts","./src/services/figma/iconhelpers.ts","./src/services/figma/nodelayers.ts","./src/services/figma/themehelpers.ts","./src/services/mermaid/detectdiagramtype.test.ts","./src/services/mermaid/detectdiagramtype.ts","./src/services/mermaid/diagnosticformatting.test.ts","./src/services/mermaid/diagnosticformatting.ts","./src/services/mermaid/parsemermaidbytype.test.ts","./src/services/mermaid/parsemermaidbytype.ts","./src/services/mermaid/strictmodediagnosticspresentation.test.ts","./src/services/mermaid/strictmodediagnosticspresentation.ts","./src/services/mermaid/strictmodeguidance.test.ts","./src/services/mermaid/strictmodeguidance.ts","./src/services/mermaid/strictmodeuxregression.test.ts","./src/services/playback/contracts.test.ts","./src/services/playback/contracts.ts","./src/services/playback/model.test.ts","./src/services/playback/model.ts","./src/services/playback/studio.test.ts","./src/services/playback/studio.ts","./src/services/shapelibrary/bootstrap.test.ts","./src/services/shapelibrary/bootstrap.ts","./src/services/shapelibrary/ingestionpipeline.test.ts","./src/services/shapelibrary/ingestionpipeline.ts","./src/services/shapelibrary/manifestvalidation.test.ts","./src/services/shapelibrary/manifestvalidation.ts","./src/services/shapelibrary/providercatalog.test.ts","./src/services/shapelibrary/providercatalog.ts","./src/services/shapelibrary/registry.test.ts","./src/services/shapelibrary/registry.ts","./src/services/shapelibrary/starterpacks.ts","./src/services/shapelibrary/types.ts","./src/services/storage/flowpersiststorage.test.ts","./src/services/storage/flowpersiststorage.ts","./src/services/storage/indexeddbschema.test.ts","./src/services/storage/indexeddbschema.ts","./src/services/storage/indexeddbstatestorage.test.ts","./src/services/storage/indexeddbstatestorage.ts","./src/services/storage/snapshotstorage.test.ts","./src/services/storage/snapshotstorage.ts","./src/services/storage/storagetelemetry.test.ts","./src/services/storage/storagetelemetry.ts","./src/services/storage/storagetelemetrysink.test.ts","./src/services/storage/storagetelemetrysink.ts","./src/services/storage/uilocalstorage.test.ts","./src/services/storage/uilocalstorage.ts","./src/services/templatelibrary/registry.test.ts","./src/services/templatelibrary/registry.ts","./src/services/templatelibrary/startertemplates.assets.test.ts","./src/services/templatelibrary/startertemplates.test.ts","./src/services/templatelibrary/startertemplates.ts","./src/services/templatelibrary/types.ts","./src/store/canvashooks.ts","./src/store/defaults.ts","./src/store/designsystemhooks.ts","./src/store/historyhooks.ts","./src/store/persistence.test.ts","./src/store/persistence.ts","./src/store/selectionhooks.ts","./src/store/tabhooks.ts","./src/store/types.ts","./src/store/viewhooks.ts","./src/store/actions/createaiandselectionactions.ts","./src/store/actions/createcanvasactions.ts","./src/store/actions/createdesignsystemactions.ts","./src/store/actions/createhistoryactions.ts","./src/store/actions/createlayeractions.ts","./src/store/actions/createtabactions.ts","./src/store/actions/createviewactions.ts"],"version":"5.8.3"}
\ No newline at end of file
+{"root":["./src/app.tsx","./src/constants.test.ts","./src/constants.ts","./src/index.tsx","./src/store.test.ts","./src/store.ts","./src/theme.ts","./src/app/routestate.test.ts","./src/app/routestate.ts","./src/components/annotationnode.tsx","./src/components/commandbar.test.tsx","./src/components/commandbar.tsx","./src/components/connectmenu.test.tsx","./src/components/connectmenu.tsx","./src/components/contextmenu.tsx","./src/components/customconnectionline.tsx","./src/components/customedge.tsx","./src/components/customnode.handleinteraction.test.tsx","./src/components/customnode.tsx","./src/components/designsystem.integration.test.tsx","./src/components/diagramviewer.tsx","./src/components/errorboundary.tsx","./src/components/exportmenu.tsx","./src/components/exportmenupanel.test.tsx","./src/components/exportmenupanel.tsx","./src/components/flowcanvas.tsx","./src/components/floweditor.tsx","./src/components/floweditoremptystate.tsx","./src/components/floweditorlayoutoverlay.tsx","./src/components/floweditorpanels.test.tsx","./src/components/floweditorpanels.tsx","./src/components/flowtabs.tsx","./src/components/groupnode.tsx","./src/components/homepage.integration.test.tsx","./src/components/homepage.tsx","./src/components/iconmap.test.tsx","./src/components/iconmap.ts","./src/components/imagenode.tsx","./src/components/inlinetexteditsurface.test.tsx","./src/components/inlinetexteditsurface.tsx","./src/components/keyboardshortcutsmodal.tsx","./src/components/languageselector.tsx","./src/components/markdownrenderer.tsx","./src/components/memoizedmarkdown.tsx","./src/components/navigationcontrols.tsx","./src/components/nodechrome.tsx","./src/components/nodequickcreatebuttons.tsx","./src/components/nodetransformcontrols.tsx","./src/components/playbackcontrols.tsx","./src/components/propertiespanel.tsx","./src/components/rightrail.tsx","./src/components/sectionnode.tsx","./src/components/shareembedmodal.tsx","./src/components/sharemodal.test.tsx","./src/components/sharemodal.tsx","./src/components/sidebarshell.tsx","./src/components/snapshotspanel.tsx","./src/components/studioaipanel.test.tsx","./src/components/studioaipanel.tsx","./src/components/studiocodepanel.test.tsx","./src/components/studiocodepanel.tsx","./src/components/studiopanel.test.tsx","./src/components/studiopanel.tsx","./src/components/studioplaybackpanel.test.tsx","./src/components/studioplaybackpanel.tsx","./src/components/swimlanenode.tsx","./src/components/textnode.tsx","./src/components/toolbar.tsx","./src/components/tooltip.tsx","./src/components/topnav.tsx","./src/components/welcomemodal.tsx","./src/components/annotationtheme.ts","./src/components/container-nodes.handleinteraction.test.tsx","./src/components/editorsurfacetiers.ts","./src/components/handleinteraction.test.ts","./src/components/handleinteraction.ts","./src/components/handleinteractionusage.test.ts","./src/components/lightweight-nodes.handleinteraction.test.tsx","./src/components/markdownsyntax.ts","./src/components/sharemodalcontent.ts","./src/components/studioaicopy.ts","./src/components/transformdiagnostics.test.ts","./src/components/transformdiagnostics.ts","./src/components/useactivenodeselection.ts","./src/components/useexportmenu.ts","./src/components/settingsmodal/aisettings.tsx","./src/components/settingsmodal/generalsettings.tsx","./src/components/settingsmodal/privacysettings.tsx","./src/components/settingsmodal/settingsmodal.test.tsx","./src/components/settingsmodal/settingsmodal.tsx","./src/components/settingsmodal/shortcutssettings.tsx","./src/components/settingsmodal/ai/advancedendpointsection.tsx","./src/components/settingsmodal/ai/customheaderseditor.tsx","./src/components/settingsmodal/ai/privacysection.tsx","./src/components/settingsmodal/ai/providericon.tsx","./src/components/settingsmodal/ai/providersection.tsx","./src/components/settingsmodal/ai/step.tsx","./src/components/app/docssiteredirect.test.tsx","./src/components/app/docssiteredirect.tsx","./src/components/app/mobileworkspacegate.test.tsx","./src/components/app/mobileworkspacegate.tsx","./src/components/app/routeloadingfallback.test.tsx","./src/components/app/routeloadingfallback.tsx","./src/components/app/mobileworkspacegatecopy.ts","./src/components/app/routeloadingcopy.ts","./src/components/architecture-lint/lintrulespanel.tsx","./src/components/command-bar/assetsview.test.tsx","./src/components/command-bar/assetsview.tsx","./src/components/command-bar/designsystemeditor.tsx","./src/components/command-bar/designsystemview.tsx","./src/components/command-bar/figmaimportpanel.tsx","./src/components/command-bar/importview.tsx","./src/components/command-bar/layersview.tsx","./src/components/command-bar/layoutview.tsx","./src/components/command-bar/pagesview.tsx","./src/components/command-bar/rootview.test.tsx","./src/components/command-bar/rootview.tsx","./src/components/command-bar/searchview.tsx","./src/components/command-bar/templatesview.tsx","./src/components/command-bar/viewheader.tsx","./src/components/command-bar/visualsview.tsx","./src/components/command-bar/applycodechanges.ts","./src/components/command-bar/assetsviewconstants.ts","./src/components/command-bar/searchquery.test.ts","./src/components/command-bar/searchquery.ts","./src/components/command-bar/types.ts","./src/components/command-bar/useaiviewstate.test.tsx","./src/components/command-bar/useaiviewstate.ts","./src/components/command-bar/usecloudassetcatalog.ts","./src/components/command-bar/usecommandbarcommands.test.tsx","./src/components/command-bar/usecommandbarcommands.tsx","./src/components/custom-edge/customedgewrapper.tsx","./src/components/custom-edge/sequencemessageedge.test.tsx","./src/components/custom-edge/sequencemessageedge.tsx","./src/components/custom-edge/animatededgepresentation.test.ts","./src/components/custom-edge/animatededgepresentation.ts","./src/components/custom-edge/classrelationsemantics.test.ts","./src/components/custom-edge/classrelationsemantics.ts","./src/components/custom-edge/edgerendermode.ts","./src/components/custom-edge/pathutils.test.ts","./src/components/custom-edge/pathutils.ts","./src/components/custom-edge/pathutilsgeometry.ts","./src/components/custom-edge/pathutilssiblingrouting.ts","./src/components/custom-edge/pathutilstypes.ts","./src/components/custom-edge/relationroutingsemantics.test.ts","./src/components/custom-edge/relationroutingsemantics.ts","./src/components/custom-edge/standardedgemarkers.test.ts","./src/components/custom-edge/standardedgemarkers.ts","./src/components/custom-nodes/architecturenode.handleinteraction.test.tsx","./src/components/custom-nodes/architecturenode.tsx","./src/components/custom-nodes/browsernode.tsx","./src/components/custom-nodes/classentitynode.handleinteraction.test.tsx","./src/components/custom-nodes/classnode.tsx","./src/components/custom-nodes/entitynode.tsx","./src/components/custom-nodes/journeynode.tsx","./src/components/custom-nodes/mindmapnode.tsx","./src/components/custom-nodes/mobilenode.tsx","./src/components/custom-nodes/sequenceparticipantnode.tsx","./src/components/custom-nodes/structurednodehandles.tsx","./src/components/custom-nodes/visualnodes.handleinteraction.test.tsx","./src/components/custom-nodes/browservariantrenderer.tsx","./src/components/custom-nodes/mobilevariantrenderer.tsx","./src/components/custom-nodes/structuredlistnavigation.test.ts","./src/components/custom-nodes/structuredlistnavigation.ts","./src/components/diagram-diff/diffmodebanner.tsx","./src/components/export/cinematicexportsurface.tsx","./src/components/flow-canvas/flowcanvasalignmentguidesoverlay.tsx","./src/components/flow-canvas/flowcanvasoverlays.tsx","./src/components/flow-canvas/alignmentguides.test.ts","./src/components/flow-canvas/alignmentguides.ts","./src/components/flow-canvas/flowcanvasreactflowcontracts.ts","./src/components/flow-canvas/flowcanvastypes.test.ts","./src/components/flow-canvas/flowcanvastypes.tsx","./src/components/flow-canvas/largegraphsafetymode.test.ts","./src/components/flow-canvas/largegraphsafetymode.ts","./src/components/flow-canvas/nodechromecoverage.test.ts","./src/components/flow-canvas/pastehelpers.test.ts","./src/components/flow-canvas/pastehelpers.ts","./src/components/flow-canvas/useflowcanvasalignmentguides.ts","./src/components/flow-canvas/useflowcanvasconnectionstate.ts","./src/components/flow-canvas/useflowcanvascontextactions.ts","./src/components/flow-canvas/useflowcanvasdragdrop.ts","./src/components/flow-canvas/useflowcanvasinteractionlod.ts","./src/components/flow-canvas/useflowcanvasmenus.ts","./src/components/flow-canvas/useflowcanvasmenusandactions.test.tsx","./src/components/flow-canvas/useflowcanvasmenusandactions.ts","./src/components/flow-canvas/useflowcanvasnodedraghandlers.ts","./src/components/flow-canvas/useflowcanvaspaste.ts","./src/components/flow-canvas/useflowcanvasreactflowconfig.test.ts","./src/components/flow-canvas/useflowcanvasreactflowconfig.ts","./src/components/flow-canvas/useflowcanvasselectiontools.test.tsx","./src/components/flow-canvas/useflowcanvasselectiontools.ts","./src/components/flow-canvas/useflowcanvasviewstate.test.ts","./src/components/flow-canvas/useflowcanvasviewstate.ts","./src/components/flow-canvas/useflowcanvaszoomlod.ts","./src/components/flow-editor/collaborationpresenceoverlay.test.tsx","./src/components/flow-editor/collaborationpresenceoverlay.tsx","./src/components/flow-editor/floweditorchrome.tsx","./src/components/flow-editor/buildfloweditorcontrollerparams.ts","./src/components/flow-editor/buildfloweditorscreencontrollerparams.ts","./src/components/flow-editor/floweditorchromeprops.ts","./src/components/flow-editor/infradslapply.test.ts","./src/components/flow-editor/infradslapply.ts","./src/components/flow-editor/panelprops.test.ts","./src/components/flow-editor/panelprops.ts","./src/components/flow-editor/shouldexitstudioonselection.test.ts","./src/components/flow-editor/shouldexitstudioonselection.ts","./src/components/flow-editor/usecollaborationnodepositions.ts","./src/components/flow-editor/usefloweditorcontroller.ts","./src/components/flow-editor/usefloweditorinteractionbindings.ts","./src/components/flow-editor/usefloweditorpanelactions.ts","./src/components/flow-editor/usefloweditorpanelprops.ts","./src/components/flow-editor/usefloweditorruntime.ts","./src/components/flow-editor/usefloweditorscreenbehavior.ts","./src/components/flow-editor/usefloweditorscreenmodel.ts","./src/components/flow-editor/usefloweditorscreenstate.ts","./src/components/flow-editor/usefloweditorshellcontroller.test.tsx","./src/components/flow-editor/usefloweditorshellcontroller.ts","./src/components/flow-editor/usefloweditorstudiocontroller.test.tsx","./src/components/flow-editor/usefloweditorstudiocontroller.ts","./src/components/flow-editor/useinfradslapply.ts","./src/components/home/homedashboard.tsx","./src/components/home/homeflowdialogs.tsx","./src/components/home/homesettingsview.tsx","./src/components/home/homesidebar.tsx","./src/components/home/welcomemodalstate.ts","./src/components/icons/assetsicon.tsx","./src/components/icons/openflowlogo.tsx","./src/components/infra-sync/infrasyncpanel.test.tsx","./src/components/infra-sync/infrasyncpanel.tsx","./src/components/journey/journeyscorecontrol.test.tsx","./src/components/journey/journeyscorecontrol.tsx","./src/components/properties/bulknodeproperties.tsx","./src/components/properties/colorpicker.test.tsx","./src/components/properties/colorpicker.tsx","./src/components/properties/customcolorpopover.tsx","./src/components/properties/diagramnodepropertiesrouter.test.ts","./src/components/properties/diagramnodepropertiesrouter.tsx","./src/components/properties/edgeproperties.tsx","./src/components/properties/iconpicker.tsx","./src/components/properties/icontilepickerprimitives.tsx","./src/components/properties/imageupload.tsx","./src/components/properties/inspectorprimitives.tsx","./src/components/properties/nodeactionbuttons.tsx","./src/components/properties/nodecontentsection.tsx","./src/components/properties/nodeimagesettingssection.tsx","./src/components/properties/nodeproperties.tsx","./src/components/properties/nodetextstylesection.tsx","./src/components/properties/nodewireframevariantsection.tsx","./src/components/properties/propertysliderrow.tsx","./src/components/properties/segmentedchoice.tsx","./src/components/properties/shapeselector.tsx","./src/components/properties/swatchpicker.tsx","./src/components/properties/colorpickerutils.ts","./src/components/properties/propertyinputbehavior.test.ts","./src/components/properties/propertyinputbehavior.ts","./src/components/properties/wireframevariants.ts","./src/components/properties/edge/architectureedgesemanticssection.tsx","./src/components/properties/edge/edgecolorsection.tsx","./src/components/properties/edge/edgeconditionsection.tsx","./src/components/properties/edge/edgelabelsection.tsx","./src/components/properties/edge/edgerelationsection.test.tsx","./src/components/properties/edge/edgerelationsection.tsx","./src/components/properties/edge/edgeroutesection.test.tsx","./src/components/properties/edge/edgeroutesection.tsx","./src/components/properties/edge/edgestylesection.tsx","./src/components/properties/edge/sequencemessagesection.tsx","./src/components/properties/edge/architecturesemantics.test.ts","./src/components/properties/edge/architecturesemantics.ts","./src/components/properties/edge/edgelabelmodel.test.ts","./src/components/properties/edge/edgelabelmodel.ts","./src/components/properties/edge/errelationoptions.ts","./src/components/properties/families/architecturenodeproperties.test.tsx","./src/components/properties/families/architecturenodeproperties.tsx","./src/components/properties/families/architecturenodesection.tsx","./src/components/properties/families/classdiagramnodeproperties.tsx","./src/components/properties/families/classmemberlisteditor.tsx","./src/components/properties/families/classnodesection.tsx","./src/components/properties/families/erdiagramnodeproperties.tsx","./src/components/properties/families/entityfieldlisteditor.tsx","./src/components/properties/families/entitynodesection.tsx","./src/components/properties/families/journeynodeproperties.tsx","./src/components/properties/families/journeynodesection.tsx","./src/components/properties/families/mindmapnodeproperties.test.tsx","./src/components/properties/families/mindmapnodeproperties.tsx","./src/components/properties/families/sequencenodeproperties.tsx","./src/components/properties/families/sequencenodesection.tsx","./src/components/properties/families/structuredtextlisteditor.tsx","./src/components/studio-code-panel/usestudiocodepanelcontroller.test.tsx","./src/components/studio-code-panel/usestudiocodepanelcontroller.ts","./src/components/toolbar/toolbaraddmenu.tsx","./src/components/toolbar/toolbaraddmenupanel.tsx","./src/components/toolbar/toolbarhistorycontrols.tsx","./src/components/toolbar/toolbarmodecontrols.tsx","./src/components/toolbar/toolbarbuttonstyles.ts","./src/components/top-nav/topnavactions.tsx","./src/components/top-nav/topnavbrand.tsx","./src/components/top-nav/topnavmenu.test.tsx","./src/components/top-nav/topnavmenu.tsx","./src/components/top-nav/topnavmenupanel.tsx","./src/components/top-nav/usetopnavstate.ts","./src/components/ui/button.tsx","./src/components/ui/collapsiblesection.tsx","./src/components/ui/input.tsx","./src/components/ui/label.tsx","./src/components/ui/searchfield.tsx","./src/components/ui/segmentedtabs.tsx","./src/components/ui/select.test.tsx","./src/components/ui/select.tsx","./src/components/ui/sidebaritem.tsx","./src/components/ui/slider.tsx","./src/components/ui/switch.tsx","./src/components/ui/textarea.tsx","./src/components/ui/toastcontext.tsx","./src/components/ui/editorfieldstyles.ts","./src/config/aiproviders.test.ts","./src/config/aiproviders.ts","./src/config/rolloutflags.ts","./src/context/architecturelintcontext.tsx","./src/context/cinematicexportcontext.tsx","./src/context/diagramdiffcontext.tsx","./src/diagram-types/registerbuiltinplugins.test.ts","./src/diagram-types/registerbuiltinplugins.ts","./src/diagram-types/registerbuiltinpropertypanels.test.ts","./src/diagram-types/registerbuiltinpropertypanels.ts","./src/diagram-types/architecture/fuzzcorpus.test.ts","./src/diagram-types/architecture/plugin.test.ts","./src/diagram-types/architecture/plugin.ts","./src/diagram-types/classdiagram/fuzzcorpus.test.ts","./src/diagram-types/classdiagram/plugin.test.ts","./src/diagram-types/classdiagram/plugin.ts","./src/diagram-types/core/contracts.ts","./src/diagram-types/core/index.ts","./src/diagram-types/core/propertypanels.test.ts","./src/diagram-types/core/propertypanels.ts","./src/diagram-types/core/registry.ts","./src/diagram-types/erdiagram/fuzzcorpus.test.ts","./src/diagram-types/erdiagram/plugin.test.ts","./src/diagram-types/erdiagram/plugin.ts","./src/diagram-types/flowchart/plugin.ts","./src/diagram-types/journey/fuzzcorpus.test.ts","./src/diagram-types/journey/plugin.test.ts","./src/diagram-types/journey/plugin.ts","./src/diagram-types/mindmap/fuzzcorpus.test.ts","./src/diagram-types/mindmap/plugin.test.ts","./src/diagram-types/mindmap/plugin.ts","./src/diagram-types/sequence/plugin.test.ts","./src/diagram-types/sequence/plugin.ts","./src/diagram-types/statediagram/plugin.test.ts","./src/diagram-types/statediagram/plugin.ts","./src/docs/docsroutes.ts","./src/docs/publicdocscatalog.js","./src/hooks/edgeconnectinteractions.test.ts","./src/hooks/edgeconnectinteractions.ts","./src/hooks/flowexportviewport.test.ts","./src/hooks/flowexportviewport.ts","./src/hooks/mindmaptopicactionrequest.ts","./src/hooks/nodelabeleditrequest.test.ts","./src/hooks/nodelabeleditrequest.ts","./src/hooks/nodequickcreaterequest.test.ts","./src/hooks/nodequickcreaterequest.ts","./src/hooks/snapshotpolicy.test.ts","./src/hooks/snapshotpolicy.ts","./src/hooks/useaigeneration.ts","./src/hooks/useanimatededgeperformancewarning.test.ts","./src/hooks/useanimatededgeperformancewarning.ts","./src/hooks/useclipboardoperations.ts","./src/hooks/usedesignsystem.ts","./src/hooks/useedgeinteractions.ts","./src/hooks/useedgeoperations.ts","./src/hooks/usefloweditoractions.test.ts","./src/hooks/usefloweditoractions.ts","./src/hooks/usefloweditorcallbacks.ts","./src/hooks/usefloweditorcollaboration.test.ts","./src/hooks/usefloweditorcollaboration.ts","./src/hooks/usefloweditoruistate.ts","./src/hooks/useflowexport.ts","./src/hooks/useflowhistory.test.ts","./src/hooks/useflowhistory.ts","./src/hooks/useflowoperations.ts","./src/hooks/useinfrasync.ts","./src/hooks/useinlinenodetextedit.test.ts","./src/hooks/useinlinenodetextedit.ts","./src/hooks/usekeyboardshortcuts.test.ts","./src/hooks/usekeyboardshortcuts.ts","./src/hooks/uselayoutoperations.ts","./src/hooks/usemarkdowneditor.ts","./src/hooks/usemodifierkeys.test.ts","./src/hooks/usemodifierkeys.ts","./src/hooks/usenodeoperations.ts","./src/hooks/useplayback.ts","./src/hooks/usesnapshots.ts","./src/hooks/usestoragepressureguard.ts","./src/hooks/usestructuredlisteditor.ts","./src/hooks/usestyleclipboard.test.ts","./src/hooks/usestyleclipboard.ts","./src/hooks/ai-generation/chathistorystorage.test.ts","./src/hooks/ai-generation/chathistorystorage.ts","./src/hooks/ai-generation/codetoarchitecture.ts","./src/hooks/ai-generation/graphcomposer.test.ts","./src/hooks/ai-generation/graphcomposer.ts","./src/hooks/ai-generation/nodeactionprompts.test.ts","./src/hooks/ai-generation/nodeactionprompts.ts","./src/hooks/ai-generation/openapiparser.test.ts","./src/hooks/ai-generation/openapiparser.ts","./src/hooks/ai-generation/openapitosequence.ts","./src/hooks/ai-generation/positionpreservingapply.test.ts","./src/hooks/ai-generation/positionpreservingapply.ts","./src/hooks/ai-generation/readiness.test.ts","./src/hooks/ai-generation/readiness.ts","./src/hooks/ai-generation/requestlifecycle.test.ts","./src/hooks/ai-generation/requestlifecycle.ts","./src/hooks/ai-generation/sqlparser.test.ts","./src/hooks/ai-generation/sqlparser.ts","./src/hooks/ai-generation/sqltoerd.ts","./src/hooks/ai-generation/terraformtocloud.ts","./src/hooks/edge-operations/utils.test.ts","./src/hooks/edge-operations/utils.ts","./src/hooks/flow-editor-actions/exporthandlers.test.ts","./src/hooks/flow-editor-actions/exporthandlers.ts","./src/hooks/flow-editor-actions/helpers.ts","./src/hooks/flow-editor-actions/layouthandlers.test.ts","./src/hooks/flow-editor-actions/layouthandlers.ts","./src/hooks/flow-export/diagramdocumenttransfer.test.ts","./src/hooks/flow-export/diagramdocumenttransfer.ts","./src/hooks/flow-export/exportcapture.ts","./src/hooks/flow-operations/useflowcoreactions.ts","./src/hooks/node-operations/createconnectedsibling.ts","./src/hooks/node-operations/dragstopreconcilepolicy.test.ts","./src/hooks/node-operations/dragstopreconcilepolicy.ts","./src/hooks/node-operations/routingduringdrag.test.ts","./src/hooks/node-operations/routingduringdrag.ts","./src/hooks/node-operations/usearchitecturenodeoperations.test.ts","./src/hooks/node-operations/usearchitecturenodeoperations.ts","./src/hooks/node-operations/usemindmapnodeoperations.test.ts","./src/hooks/node-operations/usemindmapnodeoperations.ts","./src/hooks/node-operations/usenodedragoperations.test.ts","./src/hooks/node-operations/usenodedragoperations.ts","./src/hooks/node-operations/usenodeoperationadders.ts","./src/hooks/node-operations/utils.test.ts","./src/hooks/node-operations/utils.ts","./src/i18n/config.test.ts","./src/i18n/config.ts","./src/i18n/strictmodelocalecoverage.test.ts","./src/i18n/usedlocalecoverage.test.ts","./src/lib/architecturetemplates.test.ts","./src/lib/architecturetemplates.ts","./src/lib/brand.ts","./src/lib/classmembers.ts","./src/lib/connectcreationpolicy.test.ts","./src/lib/connectcreationpolicy.ts","./src/lib/devperformance.ts","./src/lib/entityfields.ts","./src/lib/ertoclassconversion.test.ts","./src/lib/ertoclassconversion.ts","./src/lib/exportfilename.test.ts","./src/lib/exportfilename.ts","./src/lib/flowminddslparserv2.test.ts","./src/lib/flowminddslparserv2.ts","./src/lib/genericshapepolicy.ts","./src/lib/id.ts","./src/lib/index.ts","./src/lib/legacybranding.ts","./src/lib/logger.ts","./src/lib/mermaidparser.ts","./src/lib/mermaidparserhelpers.ts","./src/lib/mindmaplayout.test.ts","./src/lib/mindmaplayout.ts","./src/lib/mindmaptree.ts","./src/lib/nodehandles.ts","./src/lib/nodeparent.ts","./src/lib/openflowdslparser.ts","./src/lib/openflowdslparserv2.ts","./src/lib/reactflowcompat.ts","./src/lib/reconnectedge.test.ts","./src/lib/reconnectedge.ts","./src/lib/relationsemantics.test.ts","./src/lib/relationsemantics.ts","./src/lib/releasestaleelkroutes.test.ts","./src/lib/releasestaleelkroutes.ts","./src/lib/result.ts","./src/lib/storagepressure.test.ts","./src/lib/storagepressure.ts","./src/lib/types.ts","./src/services/aligndistribute.ts","./src/services/aiservice.test.ts","./src/services/aiservice.ts","./src/services/animatedexport.test.ts","./src/services/animatedexport.ts","./src/services/architectureroundtrip.test.ts","./src/services/canonicalserialization.test.ts","./src/services/canonicalserialization.ts","./src/services/composediagramfordisplay.test.ts","./src/services/composediagramfordisplay.ts","./src/services/diagramdocument.test.ts","./src/services/diagramdocument.ts","./src/services/domainlibrary.test.ts","./src/services/domainlibrary.ts","./src/services/elklayout.test.ts","./src/services/elklayout.ts","./src/services/exportservice.test.ts","./src/services/exportservice.ts","./src/services/figmaexportservice.ts","./src/services/flowchartroundtrip.test.ts","./src/services/geminiservice.ts","./src/services/gifencoder.test.ts","./src/services/gifencoder.ts","./src/services/iconassetcatalog.ts","./src/services/importfidelity.test.ts","./src/services/importfidelity.ts","./src/services/mermaidparser.test.ts","./src/services/openflowdslexporter.test.ts","./src/services/openflowdslexporter.ts","./src/services/openflowdslparser.test.ts","./src/services/openflowroundtripgolden.test.ts","./src/services/openflowroundtripgoldenfixtures.ts","./src/services/operationfeedback.ts","./src/services/remainingfamiliesroundtrip.test.ts","./src/services/smartedgerouting.test.ts","./src/services/smartedgerouting.ts","./src/services/statediagramroundtrip.test.ts","./src/services/templates.selector.test.ts","./src/services/templates.ts","./src/services/ai/contextserializer.test.ts","./src/services/ai/contextserializer.ts","./src/services/architecturelint/defaultrules.ts","./src/services/architecturelint/ruleengine.test.ts","./src/services/architecturelint/ruleengine.ts","./src/services/architecturelint/rulelibrary.ts","./src/services/architecturelint/types.ts","./src/services/architecturelint/workspacerules.ts","./src/services/collaboration/canvasdiff.test.ts","./src/services/collaboration/canvasdiff.ts","./src/services/collaboration/comments.test.ts","./src/services/collaboration/comments.ts","./src/services/collaboration/contracts.test.ts","./src/services/collaboration/contracts.ts","./src/services/collaboration/hookutils.ts","./src/services/collaboration/presenceviewmodel.test.ts","./src/services/collaboration/presenceviewmodel.ts","./src/services/collaboration/reducer.test.ts","./src/services/collaboration/reducer.ts","./src/services/collaboration/roomconfig.ts","./src/services/collaboration/roomlink.test.ts","./src/services/collaboration/roomlink.ts","./src/services/collaboration/runtimecontroller.test.ts","./src/services/collaboration/runtimecontroller.ts","./src/services/collaboration/runtimehookutils.test.ts","./src/services/collaboration/runtimehookutils.ts","./src/services/collaboration/session.test.ts","./src/services/collaboration/session.ts","./src/services/collaboration/storebridge.test.ts","./src/services/collaboration/storebridge.ts","./src/services/collaboration/transport.test.ts","./src/services/collaboration/transport.ts","./src/services/collaboration/transportfactory.test.ts","./src/services/collaboration/transportfactory.ts","./src/services/collaboration/types.ts","./src/services/collaboration/versioning.test.ts","./src/services/collaboration/versioning.ts","./src/services/collaboration/yjspeertransport.test.ts","./src/services/collaboration/yjspeertransport.ts","./src/services/diagramdiff/diffengine.ts","./src/services/elk-layout/determinism.ts","./src/services/elk-layout/options.ts","./src/services/elk-layout/types.ts","./src/services/export/cinematicbuildplan.test.ts","./src/services/export/cinematicbuildplan.ts","./src/services/export/cinematicrenderstate.test.ts","./src/services/export/cinematicrenderstate.ts","./src/services/export/formatting.ts","./src/services/export/mermaidbuilder.test.ts","./src/services/export/mermaidbuilder.ts","./src/services/export/pdfdocument.test.ts","./src/services/export/pdfdocument.ts","./src/services/export/plantumlbuilder.ts","./src/services/figma/edgehelpers.ts","./src/services/figma/iconhelpers.ts","./src/services/figma/nodelayers.ts","./src/services/figma/themehelpers.ts","./src/services/figmaimport/figmaapiclient.ts","./src/services/infrasync/dockercomposeparser.test.ts","./src/services/infrasync/dockercomposeparser.ts","./src/services/infrasync/infratodsl.test.ts","./src/services/infrasync/infratodsl.ts","./src/services/infrasync/kubernetesparser.test.ts","./src/services/infrasync/kubernetesparser.ts","./src/services/infrasync/terraformstateparser.test.ts","./src/services/infrasync/terraformstateparser.ts","./src/services/infrasync/types.ts","./src/services/mermaid/detectdiagramtype.test.ts","./src/services/mermaid/detectdiagramtype.ts","./src/services/mermaid/diagnosticformatting.test.ts","./src/services/mermaid/diagnosticformatting.ts","./src/services/mermaid/parsemermaidbytype.test.ts","./src/services/mermaid/parsemermaidbytype.ts","./src/services/mermaid/strictmodediagnosticspresentation.test.ts","./src/services/mermaid/strictmodediagnosticspresentation.ts","./src/services/mermaid/strictmodeguidance.test.ts","./src/services/mermaid/strictmodeguidance.ts","./src/services/mermaid/strictmodeuxregression.test.ts","./src/services/offline/registerappshellserviceworker.test.ts","./src/services/offline/registerappshellserviceworker.ts","./src/services/onboarding/config.ts","./src/services/onboarding/events.test.ts","./src/services/onboarding/events.ts","./src/services/playback/contracts.test.ts","./src/services/playback/contracts.ts","./src/services/playback/model.test.ts","./src/services/playback/model.ts","./src/services/playback/studio.test.ts","./src/services/playback/studio.ts","./src/services/sequence/sequencemessage.test.ts","./src/services/sequence/sequencemessage.ts","./src/services/shapelibrary/bootstrap.test.ts","./src/services/shapelibrary/bootstrap.ts","./src/services/shapelibrary/ingestionpipeline.test.ts","./src/services/shapelibrary/ingestionpipeline.ts","./src/services/shapelibrary/manifestvalidation.test.ts","./src/services/shapelibrary/manifestvalidation.ts","./src/services/shapelibrary/providercatalog.test.ts","./src/services/shapelibrary/providercatalog.ts","./src/services/shapelibrary/registry.test.ts","./src/services/shapelibrary/registry.ts","./src/services/shapelibrary/starterpacks.ts","./src/services/shapelibrary/types.ts","./src/services/storage/flowpersiststorage.test.ts","./src/services/storage/flowpersiststorage.ts","./src/services/storage/indexeddbschema.test.ts","./src/services/storage/indexeddbschema.ts","./src/services/storage/indexeddbstatestorage.test.ts","./src/services/storage/indexeddbstatestorage.ts","./src/services/storage/localfirstrepository.ts","./src/services/storage/localfirstruntime.ts","./src/services/storage/snapshotstorage.test.ts","./src/services/storage/snapshotstorage.ts","./src/services/storage/storagetelemetry.test.ts","./src/services/storage/storagetelemetry.ts","./src/services/storage/storagetelemetrysink.test.ts","./src/services/storage/storagetelemetrysink.ts","./src/services/storage/uilocalstorage.test.ts","./src/services/storage/uilocalstorage.ts","./src/services/templatelibrary/registry.test.ts","./src/services/templatelibrary/registry.ts","./src/services/templatelibrary/startertemplates.assets.test.ts","./src/services/templatelibrary/startertemplates.test.ts","./src/services/templatelibrary/startertemplates.ts","./src/services/templatelibrary/types.ts","./src/store/aisettings.test.ts","./src/store/aisettings.ts","./src/store/aisettingspersistence.ts","./src/store/canvashooks.ts","./src/store/defaults.ts","./src/store/designsystemhooks.ts","./src/store/historyhooks.ts","./src/store/persistence.test.ts","./src/store/persistence.ts","./src/store/selectionhooks.ts","./src/store/tabhooks.ts","./src/store/types.ts","./src/store/viewhooks.ts","./src/store/actions/createaiandselectionactions.ts","./src/store/actions/createcanvasactions.ts","./src/store/actions/createdesignsystemactions.ts","./src/store/actions/createhistoryactions.ts","./src/store/actions/createlayeractions.ts","./src/store/actions/createtabactions.ts","./src/store/actions/createviewactions.ts"],"version":"5.8.3"}
\ No newline at end of file
diff --git a/vite.config.ts b/vite.config.ts
index 09f3cf5..99a4af6 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -2,7 +2,7 @@ import path from 'path';
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 
-export default defineConfig(({ mode }) => {
+export default defineConfig(() => {
   return {
     server: {
       port: 3000,
@@ -72,6 +72,8 @@ export default defineConfig(({ mode }) => {
       globals: true,
       environment: 'jsdom',
       setupFiles: './vitest.setup.ts',
+      testTimeout: 10000,
+      maxWorkers: 2,
       exclude: ['e2e/**', 'node_modules/**', 'dist/**'],
     },
   };
diff --git a/vitest.setup.ts b/vitest.setup.ts
index 9612867..75371d2 100644
--- a/vitest.setup.ts
+++ b/vitest.setup.ts
@@ -39,8 +39,29 @@ class InMemoryStorage implements Storage {
   }
 }
 
-// Only install if the native implementation is missing or broken (no setItem).
-if (typeof globalThis.localStorage?.setItem !== 'function') {
+function hasWorkingStorage(storageName: 'localStorage' | 'sessionStorage'): boolean {
+  const descriptor = Object.getOwnPropertyDescriptor(globalThis, storageName);
+  if (!descriptor) {
+    return false;
+  }
+
+  if ('value' in descriptor) {
+    return typeof descriptor.value?.setItem === 'function';
+  }
+
+  if (typeof descriptor.get !== 'function') {
+    return false;
+  }
+
+  try {
+    const storage = descriptor.get.call(globalThis) as Storage | undefined;
+    return typeof storage?.setItem === 'function';
+  } catch {
+    return false;
+  }
+}
+
+if (!hasWorkingStorage('localStorage')) {
   Object.defineProperty(globalThis, 'localStorage', {
     value: new InMemoryStorage(),
     writable: true,
@@ -48,7 +69,7 @@ if (typeof globalThis.localStorage?.setItem !== 'function') {
   });
 }
 
-if (typeof globalThis.sessionStorage?.setItem !== 'function') {
+if (!hasWorkingStorage('sessionStorage')) {
   Object.defineProperty(globalThis, 'sessionStorage', {
     value: new InMemoryStorage(),
     writable: true,
diff --git a/web/.astro/types.d.ts b/web/.astro/types.d.ts
index 03d7cc4..f964fe0 100644
--- a/web/.astro/types.d.ts
+++ b/web/.astro/types.d.ts
@@ -1,2 +1 @@
 /// <reference types="astro/client" />
-/// <reference path="content.d.ts" />
\ No newline at end of file
diff --git a/web/_headers b/web/_headers
index 2d74e76..904f9dc 100644
--- a/web/_headers
+++ b/web/_headers
@@ -3,3 +3,4 @@
   X-Content-Type-Options: nosniff
   Referrer-Policy: strict-origin-when-cross-origin
   Permissions-Policy: camera=(), microphone=(), geolocation=()
+  Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; connect-src 'self'; img-src 'self' data: https:; font-src 'self' data:; frame-ancestors 'none';
diff --git a/web/public/styles/global.css b/web/public/styles/global.css
index 3629f27..ebcf37a 100644
--- a/web/public/styles/global.css
+++ b/web/public/styles/global.css
@@ -6,7 +6,14 @@
   --border: #2a2a2a;
   --text: #f5f5f5;
   --text-muted: #999;
-  --radius: 10px;
+  --radius-xs: 4px;
+  --radius-sm: 6px;
+  --radius: 8px;
+  --radius-md: var(--radius);
+  --radius-lg: 12px;
+  --radius-xl: 16px;
+  --radius-2xl: 24px;
+  --radius-3xl: 32px;
   --max-w: 1120px;
 }
 
diff --git a/web/src/components/Layout.astro b/web/src/components/Layout.astro
index 0676727..abd95e7 100644
--- a/web/src/components/Layout.astro
+++ b/web/src/components/Layout.astro
@@ -7,6 +7,8 @@ interface Props {
 }
 
 const { title, description } = Astro.props;
+const siteUrl = 'https://openflowkit.com';
+const ogImage = `${siteUrl}/og-image.png`;
 ---
 
 <!doctype html>
@@ -16,10 +18,29 @@ const { title, description } = Astro.props;
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>{title}</title>
     <meta name="description" content={description} />
+    <link rel="canonical" href={siteUrl} />
     <meta property="og:title" content={title} />
     <meta property="og:description" content={description} />
     <meta property="og:type" content="website" />
+    <meta property="og:url" content={siteUrl} />
+    <meta property="og:image" content={ogImage} />
+    <meta property="og:image:width" content="1200" />
+    <meta property="og:image:height" content="630" />
     <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:title" content={title} />
+    <meta name="twitter:description" content={description} />
+    <meta name="twitter:image" content={ogImage} />
+    <script type="application/ld+json" set:html={JSON.stringify({
+      "@context": "https://schema.org",
+      "@type": "SoftwareApplication",
+      "name": "OpenFlowKit",
+      "description": description,
+      "url": siteUrl,
+      "applicationCategory": "DesignApplication",
+      "operatingSystem": "Web",
+      "offers": { "@type": "Offer", "price": "0", "priceCurrency": "USD" },
+      "license": "https://opensource.org/licenses/MIT"
+    })} />
     <link rel="icon" type="image/svg+xml" href="/Logo_openflowkit.svg" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
diff --git a/web/src/components/landing/ArchitectureExploded.tsx b/web/src/components/landing/ArchitectureExploded.tsx
new file mode 100644
index 0000000..b527d30
--- /dev/null
+++ b/web/src/components/landing/ArchitectureExploded.tsx
@@ -0,0 +1,174 @@
+import React from 'react';
+import { Layers, Orbit, Server, WandSparkles, Palette } from 'lucide-react';
+
+export function ArchitectureExploded(): React.ReactElement {
+    return (
+        <section className="py-32 bg-[#08090A] relative overflow-hidden border-y border-white/5 font-sans">
+            
+            {/* Ambient Background Glows */}
+            <div className="absolute top-0 left-0 w-[500px] h-[500px] bg-brand-blue/10 rounded-full blur-[150px] pointer-events-none -translate-y-1/2 -translate-x-1/2"></div>
+            <div className="absolute bottom-0 right-0 w-[600px] h-[600px] bg-purple-500/5 rounded-full blur-[150px] pointer-events-none translate-y-1/2 translate-x-1/2"></div>
+
+            <div className="container mx-auto px-6 relative z-10 flex flex-col lg:flex-row items-center gap-12 xl:gap-24">
+                
+                {/* Left Side: Copy & Legend */}
+                <div className="lg:w-7/12 xl:w-1/2">
+                    <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/5 border border-white/10 text-white/50 mb-8 font-mono text-[10px] uppercase tracking-widest font-bold shadow-sm">
+                        <Layers className="w-3 h-3" />
+                        <span>The Architecture</span>
+                    </div>
+                    <h2 className="text-4xl lg:text-4xl xl:text-6xl 2xl:text-7xl font-bold tracking-tighter mb-6 text-white leading-[1.1]">
+                        Not just a wrapper. <br className="hidden sm:block" />
+                        <span className="font-serif italic font-normal text-white/50">A 4-Layer Engine.</span>
+                    </h2>
+                    <p className="text-base lg:text-sm xl:text-lg text-white/50 leading-relaxed font-medium mb-8 lg:mb-10 max-w-sm lg:max-w-xs xl:max-w-md">
+                        By aggressively decoupling state, layout, and rendering, OpenFlowKit delivers native performance without the bloat.
+                    </p>
+
+                    <div className="flex flex-col gap-4 lg:gap-4 xl:gap-6">
+                        {/* Layer 1 Legend */}
+                        <div className="flex items-start gap-3 group">
+                            <div className="w-8 h-8 lg:w-8 lg:h-8 xl:w-10 xl:h-10 rounded-lg bg-pink-500/10 border border-pink-500/20 flex items-center justify-center shrink-0 text-pink-400 group-hover:scale-110 group-hover:bg-pink-500/20 transition-all duration-300 shadow-[0_0_15px_rgba(236,72,153,0)] group-hover:shadow-[0_0_15px_rgba(236,72,153,0.3)]">
+                                <Palette className="w-4 h-4 xl:w-5 xl:h-5" />
+                            </div>
+                            <div>
+                                <h4 className="text-white text-xs lg:text-sm xl:text-base font-bold mb-0.5 group-hover:text-pink-400 transition-colors">1. React Display Layer</h4>
+                                <p className="text-xs text-white/40 leading-snug">
+                                    A pure, stateless render layer strictly responsible for drawing nodes as fast as possible.
+                                </p>
+                            </div>
+                        </div>
+
+                        {/* Layer 2 Legend */}
+                        <div className="flex items-start gap-3 group">
+                            <div className="w-8 h-8 lg:w-8 lg:h-8 xl:w-10 xl:h-10 rounded-lg bg-cyan-500/10 border border-cyan-500/20 flex items-center justify-center shrink-0 text-cyan-400 group-hover:scale-110 group-hover:bg-cyan-500/20 transition-all duration-300">
+                                <Orbit className="w-4 h-4 xl:w-5 xl:h-5" />
+                            </div>
+                            <div>
+                                <h4 className="text-white text-xs lg:text-sm xl:text-base font-bold mb-0.5 group-hover:text-cyan-400 transition-colors">2. Collaboration Mesh</h4>
+                                <p className="text-xs text-white/40 leading-snug">
+                                    A robust, low-latency CRDT network powered by Yjs and WebRTC.
+                                </p>
+                            </div>
+                        </div>
+
+                        {/* Layer 3 Legend */}
+                        <div className="flex items-start gap-3 group">
+                            <div className="w-8 h-8 xl:w-10 xl:h-10 rounded-lg bg-green-500/10 border border-green-500/20 flex items-center justify-center shrink-0 text-green-400 group-hover:scale-110 group-hover:bg-green-500/20 transition-all duration-300">
+                                <Server className="w-4 h-4 xl:w-5 xl:h-5" />
+                            </div>
+                            <div>
+                                <h4 className="text-white text-xs lg:text-sm xl:text-base font-bold mb-0.5 group-hover:text-green-400 transition-colors">3. Headless Engine Core</h4>
+                                <p className="text-xs text-white/40 leading-snug">
+                                    The true source of logic. Headless DSL parsing, type validation, and ELK.js routing.
+                                </p>
+                            </div>
+                        </div>
+
+                        {/* Layer 4 Legend */}
+                        <div className="flex items-start gap-4 lg:gap-3 group">
+                            <div className="w-10 h-10 lg:w-8 lg:h-8 rounded-lg bg-purple-500/10 border border-purple-500/20 flex items-center justify-center shrink-0 text-purple-400 group-hover:scale-110 group-hover:bg-purple-500/20 transition-all duration-300 shadow-[0_0_15px_rgba(168,85,247,0)] group-hover:shadow-[0_0_15px_rgba(168,85,247,0.3)]">
+                                <WandSparkles className="w-5 h-5 lg:w-4 lg:h-4" />
+                            </div>
+                            <div>
+                                <h4 className="text-white text-sm lg:text-xs font-bold mb-1 group-hover:text-purple-400 transition-colors">4. LLM Bridge</h4>
+                                <p className="text-sm lg:text-[10px] text-white/40 leading-relaxed">
+                                    Your private BYOK pipeline parsing natural language into strictly-typed TypeScript commands.
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                {/* Right Side: The 3D Hover Stack */}
+                <div className="lg:w-5/12 xl:w-1/2 w-full h-[480px] lg:h-[500px] xl:h-[600px] flex items-center justify-center group perspective-[2000px] xl:pl-16">
+                    <style dangerouslySetInnerHTML={{__html: `
+                        .engine-stack {
+                            transform: rotateX(55deg) rotateY(0deg) rotateZ(-45deg);
+                            transition: transform 1s cubic-bezier(0.25, 1, 0.5, 1);
+                            transform-style: preserve-3d;
+                        }
+                        .group:hover .engine-stack {
+                            transform: rotateX(50deg) rotateY(0deg) rotateZ(-35deg) scale(1.1);
+                        }
+                        .layer-1, .layer-2, .layer-3, .layer-4 { 
+                            transition: all 1s cubic-bezier(0.25, 1, 0.5, 1);
+                            position: absolute; inset: 0; border-radius: 1rem; backdrop-filter: blur(8px);
+                        }
+                        .layer-1 { transform: translateZ(120px); box-shadow: 0 20px 50px rgba(0,0,0,0.8); }
+                        .group:hover .layer-1 { transform: translateZ(240px); box-shadow: 0 50px 100px rgba(236,72,153,0.2); border-color: rgba(236,72,153,1); }
+                        
+                        .layer-2 { transform: translateZ(40px); box-shadow: 0 0 30px rgba(6,182,212,0.1); }
+                        .group:hover .layer-2 { transform: translateZ(80px); box-shadow: 0 40px 80px rgba(6,182,212,0.3); border-color: rgba(6,182,212,1); }
+                        
+                        .layer-3 { transform: translateZ(-40px); box-shadow: 0 0 30px rgba(34,197,94,0.1); }
+                        .group:hover .layer-3 { transform: translateZ(-80px); box-shadow: 0 40px 80px rgba(34,197,94,0.3); border-color: rgba(34,197,94,1); }
+                        
+                        .layer-4 { transform: translateZ(-120px); box-shadow: 0 0 50px rgba(168,85,247,0.15); }
+                        .group:hover .layer-4 { transform: translateZ(-240px); box-shadow: 0 50px 120px rgba(168,85,247,0.5); border-color: rgba(168,85,247,1); }
+                    `}} />
+
+                    <div className="relative w-[340px] h-[340px] engine-stack md:scale-100 scale-75">
+                        
+                        {/* Layer 1: React UI (Top) */}
+                        <div className="layer-1 bg-black/40 border-2 border-pink-500/60 flex flex-col p-4 overflow-hidden z-40">
+                            <div className="flex items-center justify-between border-b border-pink-500/20 pb-2 mb-4">
+                                <div className="text-[10px] font-mono text-pink-400 font-bold uppercase tracking-widest">Client Canvas</div>
+                                <div className="flex gap-1.5"><div className="w-2 h-2 rounded-full bg-pink-500/40"></div><div className="w-2 h-2 rounded-full bg-pink-500/40"></div><div className="w-2 h-2 rounded-full bg-pink-500/40"></div></div>
+                            </div>
+                            <div className="flex gap-4 items-center justify-center flex-1 relative">
+                                <div className="w-16 h-8 bg-pink-500/20 border border-pink-500/40 rounded text-[6px] text-pink-200 flex items-center justify-center font-bold">NODE A</div>
+                                <div className="w-12 h-px bg-pink-500/50 relative"><div className="absolute right-0 top-1/2 -translate-y-1/2 w-1.5 h-1.5 border-t border-r border-pink-500/80 rotate-45 transform translate-x-1"></div></div>
+                                <div className="w-16 h-8 bg-pink-500/20 border border-pink-500/40 rounded text-[6px] text-pink-200 flex items-center justify-center font-bold">NODE B</div>
+                                {/* Cursor indicator */}
+                                <svg width="24" height="24" viewBox="0 0 24 24" fill="#EC4899" xmlns="http://www.w3.org/2000/svg" className="absolute top-1/2 right-1/4 drop-shadow-lg transform -translate-y-1/2 scale-150 animate-pulse"><path d="M4.34315 2.15685L21.3137 19.1274C21.9056 19.7193 21.4862 20.7322 20.6482 20.7322H14.1252L9.88289 24.9745C9.28913 25.5683 8.27435 25.1473 8.27435 24.3075V2.85257C8.27435 2.01633 9.28659 1.59477 9.88045 2.18863L4.34315 2.15685Z" /></svg>
+                            </div>
+                            <div className="absolute inset-0 bg-pink-500/0 hover:bg-pink-500/5 transition-colors duration-1000"></div>
+                        </div>
+
+                        {/* Layer 2: Collaboration Mesh */}
+                        <div className="layer-2 bg-black/60 border-2 border-cyan-500/50 flex flex-col p-4 overflow-hidden z-30">
+                            <div className="text-[10px] font-mono text-cyan-400 font-bold uppercase tracking-widest mb-4">CRDT WebRTC</div>
+                            <div className="flex-1 relative overflow-hidden">
+                                <div className="absolute inset-0 bg-[radial-gradient(#06b6d440_1.5px,transparent_1.5px)] [background-size:24px_24px]"></div>
+                                <div className="absolute top-1/4 left-1/4 w-3.5 h-3.5 bg-cyan-400 rounded-full shadow-[0_0_20px_#22d3ee] animate-pulse"></div>
+                                <div className="absolute bottom-1/3 right-1/3 w-2.5 h-2.5 bg-cyan-400 rounded-full shadow-[0_0_15px_#22d3ee] animate-pulse [animation-delay:200ms]"></div>
+                                <div className="absolute top-1/2 right-1/4 w-2 h-2 bg-cyan-400 rounded-full shadow-[0_0_10px_#22d3ee] animate-pulse [animation-delay:400ms]"></div>
+                                {/* Connecting lines between nodes */}
+                                <svg className="absolute inset-0 w-full h-full" style={{strokeWidth: 1, stroke: 'rgba(34, 211, 238, 0.4)'}}>
+                                    <line x1="25%" y1="25%" x2="66%" y2="66%" />
+                                    <line x1="66%" y1="66%" x2="75%" y2="50%" />
+                                </svg>
+                            </div>
+                        </div>
+
+                        {/* Layer 3: Headless Core */}
+                        <div className="layer-3 bg-[#0d1117]/80 border-2 border-green-500/50 flex flex-col p-6 overflow-hidden z-20">
+                            <div className="text-[10px] font-mono text-green-400 font-bold uppercase tracking-widest border-b border-green-500/30 pb-3 mb-3">@openflowkit/core</div>
+                            <div className="flex-1 font-mono text-[8.5px] text-green-500/80 space-y-1.5 leading-relaxed">
+                                <div><span className="text-purple-400">class</span> Engine {'{'}</div>
+                                <div className="pl-3"><span className="text-blue-400">validate</span>(nodes: <span className="text-yellow-600">Node</span>[]): <span className="text-blue-400">boolean</span> {'{'}</div>
+                                <div className="pl-6">return nodes.<span className="text-blue-400">every</span>(n =<span className="text-white">&gt;</span> n.id);</div>
+                                <div className="pl-3">{'}'}</div>
+                                <div className="pl-3"><span className="text-blue-400">export</span>(): <span className="text-yellow-600">JSON</span> {'{'}</div>
+                                <div className="pl-6">return <span className="text-yellow-400">JSON</span>.<span className="text-blue-400">stringify</span>(this);</div>
+                                <div className="pl-3">{'}'}</div>
+                                <div>{'}'}</div>
+                            </div>
+                        </div>
+
+                        {/* Layer 4: AI Bridge (Bottom) */}
+                        <div className="layer-4 bg-black border-2 border-purple-500/60 flex flex-col items-center justify-center p-4 overflow-hidden z-10">
+                            <div className="absolute inset-0 bg-gradient-to-br from-purple-500/10 to-transparent"></div>
+                            <div className="text-[10px] font-mono text-purple-400 font-bold uppercase tracking-widest absolute top-4 left-6">LLM Proxy</div>
+                            <WandSparkles className="w-16 h-16 text-purple-500/60 animate-pulse mt-4" />
+                            <div className="mt-6 text-[8px] font-mono text-purple-200 bg-purple-500/20 px-3 py-1.5 rounded-md border border-purple-500/30 shadow-inner">Prompt: &quot;Add auth layer...&quot;</div>
+                        </div>
+
+                    </div>
+                </div>
+
+            </div>
+        </section>
+    );
+}
diff --git a/web/src/components/landing/FinalCTASection.tsx b/web/src/components/landing/FinalCTASection.tsx
index 9ea6834..9c153d5 100644
--- a/web/src/components/landing/FinalCTASection.tsx
+++ b/web/src/components/landing/FinalCTASection.tsx
@@ -1,126 +1,156 @@
-import React, { useState, useEffect } from 'react';
-import { Copy, ArrowRight, CheckCircle2 } from 'lucide-react';
+import React, { useEffect, useState } from 'react';
+import { ArrowRight, CheckCircle2, Copy } from 'lucide-react';
 import { Button } from './Button';
+import { DOCS_URL, GITHUB_REPO_SLUG, GITHUB_REPO_URL, ROADMAP_URL } from './constants';
 
 interface FinalCTASectionProps {
-    onLaunch: () => void;
+  onLaunch: () => void;
 }
 
+const TERMINAL_STEPS = 4;
+const CLONE_COMMAND = `gh repo clone ${GITHUB_REPO_SLUG}`;
+
 export function FinalCTASection({ onLaunch }: FinalCTASectionProps): React.ReactElement {
-    const [copied, setCopied] = useState(false);
-    const [terminalStep, setTerminalStep] = useState(0);
-
-    // Simple typing simulation for the terminal
-    useEffect(() => {
-        const interval = setInterval(() => {
-            setTerminalStep((prev) => (prev + 1) % 4);
-        }, 2000);
-        return () => clearInterval(interval);
-    }, []);
-
-    const handleCopy = () => {
-        navigator.clipboard.writeText('gh repo clone Vrun-design/openflowkit');
-        setCopied(true);
-        setTimeout(() => setCopied(false), 2000);
-    };
-
-    return (
-        <section className="py-32 bg-white relative overflow-hidden border-t border-brand-border">
-
-            {/* Cyber Grid Background - Light */}
-            <div className="absolute inset-0 bg-[linear-gradient(rgba(0,0,0,0.02)_1px,transparent_1px),linear-gradient(90deg,rgba(0,0,0,0.02)_1px,transparent_1px)] bg-[size:64px_64px] [mask-image:radial-gradient(ellipse_80%_80%_at_50%_50%,#000_70%,transparent_100%)] pointer-events-none"></div>
-
-            <div className="container mx-auto px-6 relative z-10">
-                <div className="flex flex-col items-center text-center">
-
-                    {/* Floating "Bevel" Badge - Light */}
-                    <div className="mb-10 animate-float">
-                        <div className="bg-white text-brand-dark px-6 py-2 rounded-full border border-gray-100 shadow-[inset_0px_1px_0px_0px_rgba(255,255,255,1),0px_10px_20px_-5px_rgba(0,0,0,0.05)] flex items-center gap-3">
-                            <div className="w-2 h-2 rounded-full bg-green-500 animate-pulse"></div>
-                            <span className="font-mono text-xs tracking-widest uppercase text-brand-secondary">Ready to use</span>
-                        </div>
-                    </div>
-
-                    <h2 className="text-6xl md:text-8xl font-bold text-brand-dark mb-8 tracking-tighter leading-[0.9] text-balance">
-                        Build diagrams that <br />
-                        <span className="font-serif italic font-light text-brand-primary">don&apos;t look generic.</span>
-                    </h2>
-
-                    <p className="text-xl text-brand-secondary mb-10 max-w-xl mx-auto leading-relaxed">
-                        Join us in building the next generation of visual tools. Open source, local-first, and forever free.
-                    </p>
-
-                    {/* Final CTA Button above the block */}
-                    <div className="animate-slide-up opacity-0 [animation-delay:300ms] mb-12">
-                        <Button size="xl" className="transform hover:-translate-y-1 transition-all active:scale-95" onClick={onLaunch}>
-                            Get Started Now <ArrowRight className="w-4 h-4 ml-2" />
-                        </Button>
-                    </div>
-
-                    {/* The "Command Center" Interaction */}
-                    <div className="w-full max-w-2xl relative group">
-
-                        {/* Glow behind terminal */}
-                        <div className="absolute -inset-1 bg-gradient-to-r from-brand-primary via-purple-500 to-pink-500 rounded-xl blur-lg opacity-10 group-hover:opacity-30 transition-opacity duration-1000"></div>
-
-                        {/* Terminal Window */}
-                        <div className="relative bg-[#1E1E1E] rounded-xl border border-black/5 p-2 shadow-2xl ring-1 ring-black/5">
-                            {/* Window Chrome */}
-                            <div className="flex items-center px-4 py-2 border-b border-white/5 bg-white/[0.02]">
-                                <div className="flex gap-2">
-                                    <div className="w-3 h-3 rounded-full bg-[#FF5F57]"></div>
-                                    <div className="w-3 h-3 rounded-full bg-[#FEBC2E]"></div>
-                                    <div className="w-3 h-3 rounded-full bg-[#28C840]"></div>
-                                </div>
-                                <div className="mx-auto text-[10px] font-mono text-white/30">bash — 80x24</div>
-                            </div>
-
-                            {/* Terminal Content */}
-                            <div className="p-6 font-mono text-left text-sm md:text-base h-[140px] flex flex-col justify-center">
-                                <div className="flex items-center gap-3 text-white/90">
-                                    <span className="text-green-400">➜</span>
-                                    <span className="text-blue-400">~</span>
-                                    <span className="typing-effect">gh repo clone openflowkit</span>
-                                </div>
-
-                                {/* Simulated Output Steps */}
-                                <div className="mt-4 space-y-1 text-xs md:text-sm text-white/50">
-                                    <div className={`transition-opacity duration-300 ${terminalStep >= 1 ? 'opacity-100' : 'opacity-0'}`}>
-                                        <span className="text-gray-500">✔</span> Cloning into &apos;openflowkit&apos;...
-                                    </div>
-                                    <div className={`transition-opacity duration-300 ${terminalStep >= 2 ? 'opacity-100' : 'opacity-0'}`}>
-                                        <span className="text-gray-500">✔</span> Remote: Enumerating objects...
-                                    </div>
-                                    <div className={`transition-opacity duration-300 ${terminalStep >= 3 ? 'opacity-100' : 'opacity-0'} text-green-400`}>
-                                        <span className="text-green-500">✔</span> Receiving objects: 100% done.
-                                    </div>
-                                </div>
-                            </div>
-
-                            {/* Overlay Action */}
-                            <div className="absolute bottom-6 right-6 flex items-center gap-4">
-                                <button
-                                    onClick={handleCopy}
-                                    className="text-xs font-mono text-white/40 hover:text-white transition-colors flex items-center gap-2"
-                                >
-                                    {copied ? <CheckCircle2 className="w-4 h-4 text-green-400" /> : <Copy className="w-4 h-4" />}
-                                    {copied ? 'Copied' : 'Copy'}
-                                </button>
-                            </div>
-                        </div>
-                    </div>
-
-                    {/* Footer Links - Light Mode */}
-                    <div className="mt-12 flex items-center gap-6 text-sm text-brand-secondary">
-                        <a href="https://docs.openflowkit.com" className="hover:text-brand-primary transition-colors">Documentation</a>
-                        <span className="opacity-30">•</span>
-                        <a href="https://github.com/Vrun-design/FlowMind" target="_blank" rel="noreferrer" className="hover:text-brand-primary transition-colors">GitHub</a>
-                        <span className="opacity-30">•</span>
-                        <a href="https://docs.openflowkit.com/roadmap" className="hover:text-brand-primary transition-colors">Roadmap</a>
-                    </div>
+  const [copied, setCopied] = useState(false);
+  const [terminalStep, setTerminalStep] = useState(0);
+
+  useEffect(() => {
+    const interval = window.setInterval(() => {
+      setTerminalStep((prev) => (prev + 1) % TERMINAL_STEPS);
+    }, 2000);
+
+    return () => window.clearInterval(interval);
+  }, []);
+
+  const handleCopy = () => {
+    navigator.clipboard.writeText(CLONE_COMMAND);
+    setCopied(true);
+    window.setTimeout(() => setCopied(false), 2000);
+  };
+
+  return (
+    <section className="py-32 bg-white relative overflow-hidden border-t border-brand-border">
+      {/* Cyber Grid Background - Light */}
+      <div className="absolute inset-0 bg-[linear-gradient(rgba(0,0,0,0.02)_1px,transparent_1px),linear-gradient(90deg,rgba(0,0,0,0.02)_1px,transparent_1px)] bg-[size:64px_64px] [mask-image:radial-gradient(ellipse_80%_80%_at_50%_50%,#000_70%,transparent_100%)] pointer-events-none"></div>
+
+      <div className="container mx-auto px-6 relative z-10">
+        <div className="flex flex-col items-center text-center">
+          {/* Floating "Bevel" Badge - Light */}
+          <div className="mb-10 animate-float">
+            <div className="bg-white text-brand-dark px-6 py-2 rounded-full border border-gray-100 shadow-[inset_0px_1px_0px_0px_rgba(255,255,255,1),0px_10px_20px_-5px_rgba(0,0,0,0.05)] flex items-center gap-3">
+              <div className="w-2 h-2 rounded-full bg-green-500 animate-pulse"></div>
+              <span className="font-mono text-xs tracking-widest uppercase text-brand-secondary">
+                Ready to use
+              </span>
+            </div>
+          </div>
+
+          <h2 className="text-6xl md:text-8xl font-bold text-brand-dark mb-8 tracking-tighter leading-[0.9] text-balance">
+            Build diagrams that <br />
+            <span className="font-serif italic font-light text-brand-primary">
+              don&apos;t look generic.
+            </span>
+          </h2>
+
+          <p className="text-xl text-brand-secondary mb-10 max-w-xl mx-auto leading-relaxed">
+            Join us in building the next generation of visual tools. Open source, local-first, and
+            forever free.
+          </p>
+
+          {/* Final CTA Button above the block */}
+          <div className="animate-slide-up opacity-0 [animation-delay:300ms] mb-12">
+            <Button
+              size="xl"
+              className="transform hover:-translate-y-1 transition-all active:scale-95"
+              onClick={onLaunch}
+            >
+              Get Started Now <ArrowRight className="w-4 h-4 ml-2" />
+            </Button>
+          </div>
+
+          {/* The "Command Center" Interaction */}
+          <div className="w-full max-w-2xl relative group">
+            {/* Glow behind terminal */}
+            <div className="absolute -inset-1 bg-gradient-to-r from-brand-primary via-purple-500 to-pink-500 rounded-xl blur-lg opacity-10 group-hover:opacity-30 transition-opacity duration-1000"></div>
+
+            {/* Terminal Window */}
+            <div className="relative bg-[#1E1E1E] rounded-xl border border-black/5 p-2 shadow-2xl ring-1 ring-black/5">
+              {/* Window Chrome */}
+              <div className="flex items-center px-4 py-2 border-b border-white/5 bg-white/[0.02]">
+                <div className="flex gap-2">
+                  <div className="w-3 h-3 rounded-full bg-[#FF5F57]"></div>
+                  <div className="w-3 h-3 rounded-full bg-[#FEBC2E]"></div>
+                  <div className="w-3 h-3 rounded-full bg-[#28C840]"></div>
+                </div>
+                <div className="mx-auto text-[10px] font-mono text-white/30">bash — 80x24</div>
+              </div>
+
+              {/* Terminal Content */}
+              <div className="p-6 font-mono text-left text-sm md:text-base h-[140px] flex flex-col justify-center">
+                <div className="flex items-center gap-3 text-white/90">
+                  <span className="text-green-400">➜</span>
+                  <span className="text-blue-400">~</span>
+                  <span className="typing-effect">{CLONE_COMMAND}</span>
+                </div>
 
+                {/* Simulated Output Steps */}
+                <div className="mt-4 space-y-1 text-xs md:text-sm text-white/50">
+                  <div
+                    className={`transition-opacity duration-300 ${terminalStep >= 1 ? 'opacity-100' : 'opacity-0'}`}
+                  >
+                    <span className="text-gray-500">✔</span> Cloning into &apos;openflowkit&apos;...
+                  </div>
+                  <div
+                    className={`transition-opacity duration-300 ${terminalStep >= 2 ? 'opacity-100' : 'opacity-0'}`}
+                  >
+                    <span className="text-gray-500">✔</span> Remote: Enumerating objects...
+                  </div>
+                  <div
+                    className={`transition-opacity duration-300 ${terminalStep >= 3 ? 'opacity-100' : 'opacity-0'} text-green-400`}
+                  >
+                    <span className="text-green-500">✔</span> Receiving objects: 100% done.
+                  </div>
                 </div>
+              </div>
+
+              {/* Overlay Action */}
+              <div className="absolute bottom-6 right-6 flex items-center gap-4">
+                <button
+                  onClick={handleCopy}
+                  className="text-xs font-mono text-white/40 hover:text-white transition-colors flex items-center gap-2"
+                >
+                  {copied ? (
+                    <CheckCircle2 className="w-4 h-4 text-green-400" />
+                  ) : (
+                    <Copy className="w-4 h-4" />
+                  )}
+                  {copied ? 'Copied' : 'Copy'}
+                </button>
+              </div>
             </div>
-        </section>
-    );
+          </div>
+
+          {/* Footer Links - Light Mode */}
+          <div className="mt-12 flex items-center gap-6 text-sm text-brand-secondary">
+            <a href={DOCS_URL} className="hover:text-brand-primary transition-colors">
+              Documentation
+            </a>
+            <span className="opacity-30">•</span>
+            <a
+              href={GITHUB_REPO_URL}
+              target="_blank"
+              rel="noreferrer"
+              className="hover:text-brand-primary transition-colors"
+            >
+              GitHub
+            </a>
+            <span className="opacity-30">•</span>
+            <a href={ROADMAP_URL} className="hover:text-brand-primary transition-colors">
+              Roadmap
+            </a>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
 }
diff --git a/web/src/components/landing/Footer.tsx b/web/src/components/landing/Footer.tsx
index 08f8fdc..0e9b372 100644
--- a/web/src/components/landing/Footer.tsx
+++ b/web/src/components/landing/Footer.tsx
@@ -1,50 +1,81 @@
 import React from 'react';
 import { Github } from 'lucide-react';
 import { OpenFlowLogo } from '../icons/OpenFlowLogo';
+import { GITHUB_REPO_URL } from './constants';
+import { useGithubStars } from './useGithubStars';
 
 interface FooterProps {
   onLaunch: () => void;
 }
 
 export function Footer({ onLaunch }: FooterProps): React.ReactElement {
+  const stars = useGithubStars();
+
   return (
     <footer className="bg-white border-t border-brand-border py-12 select-none">
-      <div className="container mx-auto px-6 flex flex-col md:flex-row items-center justify-between gap-6">
+      <div className="container mx-auto px-6">
+        <div className="flex flex-col md:flex-row items-center justify-between gap-8">
+          {/* Brand & Legal */}
+          <div className="flex flex-col items-center md:items-start gap-2 md:w-1/3">
+            <button
+              type="button"
+              onClick={onLaunch}
+              className="flex items-center gap-2 cursor-pointer group"
+              aria-label="Open OpenFlowKit"
+            >
+              <div className="w-6 h-6 bg-brand-primary rounded flex items-center justify-center text-white shadow-sm transition-transform group-hover:rotate-6">
+                <OpenFlowLogo className="w-4 h-4 text-white" />
+              </div>
+              <span className="font-bold text-brand-primary text-sm tracking-tight">
+                OpenFlowKit
+              </span>
+            </button>
+            <div className="flex items-center gap-2 text-xs text-brand-secondary font-medium mt-1">
+              <span>MIT Licensed</span>
+              <span className="w-1 h-1 rounded-full bg-brand-secondary/30" />
+              <span>© {new Date().getFullYear()}</span>
+            </div>
+          </div>
 
-        <button
-          type="button"
-          onClick={onLaunch}
-          className="flex items-center gap-2.5 cursor-pointer group"
-          aria-label="Open OpenFlowKit"
-        >
-          <div className="w-6 h-6 bg-brand-primary rounded flex items-center justify-center text-white shadow-sm transition-transform group-hover:rotate-6">
-            <OpenFlowLogo className="w-4 h-4 text-white" />
+          {/* Product Hunt Badge */}
+          <div className="flex justify-center md:w-1/3">
+            <a
+              href="https://www.producthunt.com/products/openflowkit?embed=true&utm_source=badge-top-post-topic-badge&utm_medium=badge&utm_campaign=badge-openflowkit"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="hover:opacity-90 transition-opacity transform hover:scale-105 duration-300"
+            >
+              <img
+                alt="Product Hunt"
+                width="200"
+                height="43"
+                src="https://api.producthunt.com/widgets/embed-image/v1/top-post-topic-badge.svg?post_id=1081019&theme=light&period=weekly&topic_id=44&t=1772031326630"
+                className="h-10 w-auto shadow-sm rounded border border-gray-100"
+              />
+            </a>
           </div>
-          <span className="font-bold text-brand-primary text-sm tracking-tight">OpenFlowKit</span>
-          <span className="text-brand-border mx-2">/</span>
-          <span className="text-brand-secondary text-xs font-medium">MIT Licensed</span>
-        </button>
 
-        <div className="flex items-center gap-6">
-          <a
-            href="https://www.producthunt.com/products/openflowkit?embed=true&utm_source=badge-top-post-topic-badge&utm_medium=badge&utm_campaign=badge-openflowkit"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="hidden sm:block hover:opacity-90 transition-opacity"
-          >
-            <img
-              alt="Product Hunt"
-              width="180"
-              height="39"
-              src="https://api.producthunt.com/widgets/embed-image/v1/top-post-topic-badge.svg?post_id=1081019&theme=light&period=weekly&topic_id=44&t=1772031326630"
-              className="h-8 w-auto"
-            />
-          </a>
-          <a href="https://github.com/Vrun-design/openflowkit" target="_blank" rel="noreferrer" className="text-brand-secondary hover:text-brand-primary transition-colors group" aria-label="GitHub">
-            <Github className="w-4 h-4 group-hover:scale-110 transition-transform" />
-          </a>
+          {/* GitHub Stars */}
+          <div className="flex items-center justify-center md:justify-end md:w-1/3">
+            <a
+              href={GITHUB_REPO_URL}
+              target="_blank"
+              rel="noreferrer"
+              className="flex items-center gap-3 px-5 py-2.5 bg-[#24292e] text-white rounded-xl hover:bg-[#2f363d] transition-colors shadow-sm group"
+              aria-label="GitHub"
+            >
+              <Github className="w-5 h-5 group-hover:rotate-12 transition-transform" />
+              <div className="flex items-center gap-2 border-l border-white/20 pl-3">
+                <span className="text-sm font-semibold">Star us</span>
+                {stars !== null && (
+                  <span className="text-sm font-mono bg-white/10 px-2 py-0.5 rounded font-bold tracking-tight">
+                    {stars.toLocaleString()}
+                  </span>
+                )}
+              </div>
+            </a>
+          </div>
         </div>
-
       </div>
     </footer>
   );
diff --git a/web/src/components/landing/HeroSection.tsx b/web/src/components/landing/HeroSection.tsx
index 04c7390..7e2fa99 100644
--- a/web/src/components/landing/HeroSection.tsx
+++ b/web/src/components/landing/HeroSection.tsx
@@ -1,6 +1,9 @@
-import React, { useState, useEffect } from 'react';
-import { Play, Copy, GitBranch, Terminal, Check } from 'lucide-react';
+import React, { useEffect, useState } from 'react';
+import { GitBranch, Play } from 'lucide-react';
 import { Button } from './Button';
+import { GITHUB_REPO_URL } from './constants';
+
+const ROTATING_WORDS = ['thinks', 'draws', 'builds', 'ships'] as const;
 
 interface HeroSectionProps {
   onLaunch: () => void;
@@ -9,73 +12,76 @@ interface HeroSectionProps {
 export function HeroSection({ onLaunch }: HeroSectionProps): React.ReactElement {
   const [index, setIndex] = useState(0);
   const [isExiting, setIsExiting] = useState(false);
-
-  const ROTATING_WORDS = ['thinks', 'draws', 'builds', 'ships'];
-  const rotatingWordsLength = ROTATING_WORDS.length;
+  const currentWord = ROTATING_WORDS[index];
+  const wordAnimationClass = isExiting
+    ? '[animation:text-exit_0.5s_ease-in_forwards]'
+    : '[animation:text-reveal_0.5s_ease-out_forwards]';
 
   useEffect(() => {
-    const timer = setInterval(() => {
+    let exitTimer: number | undefined;
+
+    const interval = window.setInterval(() => {
       setIsExiting(true);
-      setTimeout(() => {
-        setIndex((prev) => (prev + 1) % rotatingWordsLength);
+
+      exitTimer = window.setTimeout(() => {
+        setIndex((previousIndex) => (previousIndex + 1) % ROTATING_WORDS.length);
         setIsExiting(false);
       }, 500);
     }, 3000);
 
-    return () => clearInterval(timer);
-  }, [rotatingWordsLength]);
+    return () => {
+      window.clearInterval(interval);
 
-  const [copied, setCopied] = useState(false);
+      if (exitTimer !== undefined) {
+        window.clearTimeout(exitTimer);
+      }
+    };
+  }, []);
 
-  const handleCopy = () => {
-    navigator.clipboard.writeText('gh repo clone Vrun-design/openflowkit');
-    setCopied(true);
-    setTimeout(() => setCopied(false), 2000);
-  };
+  function openGithub(): void {
+    window.open(GITHUB_REPO_URL, '_blank');
+  }
 
   return (
-    <section className="relative pt-24 pb-12 md:pt-36 md:pb-24 overflow-hidden select-none bg-brand-canvas">
-      {/* Background Ambience with Dissolve Transition */}
-      <div className="absolute inset-0 pointer-events-none [mask-image:linear-gradient(to_bottom,black_0%,black_20%,rgba(0,0,0,0.8)_40%,rgba(0,0,0,0.4)_70%,transparent_100%)]">
-        {/* Layered Primary Grid */}
-        <div className="absolute inset-0 bg-[linear-gradient(to_right,#80808008_1px,transparent_1px),linear-gradient(to_bottom,#80808008_1px,transparent_1px)] bg-[size:40px_40px]"></div>
+    <section className="relative pt-32 pb-16 md:pt-44 md:pb-32 overflow-hidden select-none bg-[#FAFAFA]">
+      {/* Premium Multi-Layered Mesh Background */}
+      <div className="absolute inset-0 pointer-events-none">
+        <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top,#fff_0%,transparent_100%)] z-0"></div>
 
-        {/* Secondary Fine Grid */}
-        <div className="absolute inset-0 bg-[linear-gradient(to_right,#80808004_1px,transparent_1px),linear-gradient(to_bottom,#80808004_1px,transparent_1px)] bg-[size:10px_10px]"></div>
+        {/* Crisp Developer Grid */}
+        <div className="absolute inset-0 bg-[linear-gradient(to_right,#00000006_1px,transparent_1px),linear-gradient(to_bottom,#00000006_1px,transparent_1px)] bg-[size:24px_24px] [mask-image:linear-gradient(to_bottom,black_20%,transparent_100%)] z-0"></div>
 
-        {/* Architectural Intersection Dots */}
-        <div className="absolute inset-0 bg-[radial-gradient(#8080800C_1px,transparent_1px)] bg-[size:40px_40px] [background-position:center_center]"></div>
-
-        {/* Ambient Orbs */}
-        <div className="absolute top-[-20%] left-[-10%] w-[70vw] h-[70vw] bg-brand-blue/[0.015] rounded-full blur-[120px] animate-pulse-slow"></div>
-        <div className="absolute bottom-[-10%] right-[-10%] w-[60vw] h-[60vw] bg-purple-500/[0.015] rounded-full blur-[120px] animate-pulse-slow [animation-delay:2s]"></div>
+        {/* Ethereal Glows */}
+        <div className="absolute top-[-20%] left-[20%] w-[50vw] h-[50vw] bg-brand-blue/[0.03] rounded-full blur-[100px] animate-pulse-slow mix-blend-multiply z-0"></div>
+        <div className="absolute top-[10%] right-[10%] w-[40vw] h-[40vw] bg-purple-500/[0.03] rounded-full blur-[100px] animate-pulse-slow [animation-delay:2s] mix-blend-multiply z-0"></div>
+        <div className="absolute bottom-[20%] left-[30%] w-[60vw] h-[60vw] bg-indigo-500/[0.02] rounded-full blur-[120px] animate-pulse-slow [animation-delay:4s] mix-blend-multiply z-0"></div>
       </div>
 
       <div className="container mx-auto px-4 md:px-6 relative z-10 flex flex-col items-center text-center">
         {/* Badge */}
         <div className="animate-slide-up opacity-0 [animation-delay:0ms] inline-flex items-center gap-2 px-3 py-1 rounded-full bg-brand-primary/5 border border-brand-primary/10 text-brand-primary/60 mb-6 font-mono text-[10px] uppercase tracking-widest font-bold ring-1 ring-brand-primary/5">
-          <Terminal className="w-3 h-3" />
-          <span>v1.0 Public Beta</span>
+          <span>100% Free & Open Source</span>
         </div>
 
-        {/* Headline */}
-        <h1 className="animate-slide-up opacity-0 [animation-delay:100ms] text-5xl sm:text-6xl md:text-[88px] font-bold tracking-[-0.04em] text-brand-dark mb-6 md:mb-8 max-w-5xl mx-auto leading-[1.1] text-balance">
-          The diagram engine <br />
-          <span className="font-serif italic font-normal text-brand-primary inline-flex items-center gap-[0.2em]">
+        {/* Razor-Sharp Headline */}
+        <h1 className="animate-slide-up opacity-0 [animation-delay:100ms] text-5xl sm:text-6xl md:text-[88px] font-bold tracking-[-0.04em] text-brand-dark mb-6 md:mb-8 max-w-[1000px] mx-auto leading-[1.05] text-balance">
+          The diagram studio <br />
+          <span className="font-serif italic font-normal text-brand-primary inline-flex flex-wrap justify-center items-center gap-[0.2em]">
             that
             <span
-              key={ROTATING_WORDS[index]}
-              className={`inline-block ${isExiting ? '[animation:text-exit_0.5s_ease-in_forwards]' : '[animation:text-reveal_0.5s_ease-out_forwards]'}`}
+              key={currentWord}
+              className={`inline-block ${wordAnimationClass}`}
             >
-              {ROTATING_WORDS[index]}
+              {currentWord}
             </span>
             like you.
           </span>
         </h1>
 
-        {/* Subhead */}
-        <p className="animate-slide-up opacity-0 [animation-delay:200ms] text-lg md:text-xl text-brand-secondary mb-8 md:mb-10 max-w-2xl mx-auto leading-relaxed text-balance font-medium tracking-tight px-4 opacity-80">
-          100% free, open-source diagram tool for builders. Write code or drag and drop — get beautiful results either way.
+        {/* Polished Subhead */}
+        <p className="animate-slide-up opacity-0 [animation-delay:200ms] text-lg md:text-xl text-gray-500 mb-10 md:mb-12 max-w-2xl mx-auto leading-relaxed text-balance font-medium tracking-tight">
+          100% free, open-source diagram tool for builders. Write code or drag and drop — get
+          beautiful results either way.
         </p>
 
         {/* CTAs */}
@@ -83,43 +89,96 @@ export function HeroSection({ onLaunch }: HeroSectionProps): React.ReactElement
           <Button
             size="lg"
             className="w-full sm:w-auto h-14 px-10 transition-all active:scale-95 text-[15px]"
-            onClick={() => {
-              window.open("https://github.com/Vrun-design/FlowMind", "_blank");
-            }}
+            onClick={onLaunch}
           >
-            <GitBranch className="w-4 h-4 mr-2" />
-            Fork on GitHub
+            Get Started
+            <Play className="w-3.5 h-3.5 fill-current ml-2" />
           </Button>
           <Button
             variant="secondary"
             size="lg"
-            icon={<Play className="w-3.5 h-3.5 fill-current" />}
             className="w-full sm:w-auto h-14 px-10 transition-all active:scale-95 text-[15px]"
-            onClick={onLaunch}
+            onClick={openGithub}
           >
-            Get Started
+            <GitBranch className="w-4 h-4 mr-2" />
+            Fork on GitHub
           </Button>
         </div>
-        {/* Install Block */}
-        <div
-          className="animate-slide-up opacity-0 [animation-delay:400ms] group cursor-pointer w-fit max-w-full mx-auto"
-          onClick={handleCopy}
-        >
-          <div className="relative flex items-center justify-between md:justify-center gap-2 px-4 py-3 bg-white/60 backdrop-blur-sm rounded-xl border border-brand-border/60 hover:border-brand-primary/20 transition-all shadow-sm ring-1 ring-transparent hover:ring-brand-primary/10">
-            <span className="font-mono text-xs md:text-sm text-brand-secondary select-all truncate">gh repo clone openflowkit</span>
-            <div className="hidden md:block w-px h-4 bg-brand-secondary/20"></div>
-            {copied ? (
-              <Check className="w-3.5 h-3.5 text-green-500 shrink-0" />
-            ) : (
-              <Copy className="w-3.5 h-3.5 text-brand-muted hover:text-brand-primary transition-colors shrink-0" />
-            )}
-          </div>
-          <div className="mt-4 text-[10px] font-mono text-brand-muted uppercase tracking-widest opacity-60 flex items-center justify-center gap-3">
-            <span>MIT Licensed</span>
-            <span className="w-1 h-1 rounded-full bg-brand-muted/30"></span>
-            <span>Local First</span>
-            <span className="w-1 h-1 rounded-full bg-brand-muted/30"></span>
-            <span>No Auth</span>
+
+        {/* Minimalist Trust Block */}
+        <div className="animate-slide-up opacity-0 [animation-delay:400ms] w-full max-w-3xl mx-auto pt-10 border-t border-gray-200/60">
+          <p className="text-xs font-mono text-gray-400 uppercase tracking-widest mb-6">
+            Built for developer workflows
+          </p>
+          <div className="flex flex-wrap items-center justify-center gap-x-10 gap-y-4">
+            <div className="flex items-center gap-2 text-gray-500">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="16"
+                height="16"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              >
+                <path d="M12 2v20" />
+                <path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" />
+              </svg>
+              <span className="text-sm font-medium tracking-tight">100% Free Open Source</span>
+            </div>
+            <div className="flex items-center gap-2 text-gray-500">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="16"
+                height="16"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              >
+                <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10" />
+              </svg>
+              <span className="text-sm font-medium tracking-tight">MIT Licensed</span>
+            </div>
+            <div className="flex items-center gap-2 text-gray-500">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="16"
+                height="16"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              >
+                <path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z" />
+                <circle cx="12" cy="10" r="3" />
+              </svg>
+              <span className="text-sm font-medium tracking-tight">Zero Tracking</span>
+            </div>
+            <div className="flex items-center gap-2 text-gray-500">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="16"
+                height="16"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              >
+                <circle cx="12" cy="12" r="10" />
+                <line x1="2" x2="22" y1="12" y2="12" />
+                <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" />
+              </svg>
+              <span className="text-sm font-medium tracking-tight">Local-First Storage</span>
+            </div>
           </div>
         </div>
       </div>
diff --git a/web/src/components/landing/LandingPage.tsx b/web/src/components/landing/LandingPage.tsx
index af19474..fc8e23a 100644
--- a/web/src/components/landing/LandingPage.tsx
+++ b/web/src/components/landing/LandingPage.tsx
@@ -1,63 +1,52 @@
-import React, { useState, useEffect } from 'react';
-import { Navbar } from './Navbar';
+import React, { useEffect, useState } from 'react';
+import { ArchitectureExploded } from './ArchitectureExploded';
+import { APP_URL } from './constants';
+import { FinalCTASection } from './FinalCTASection';
+import { FigmaSection } from './FigmaSection';
+import { Footer } from './Footer';
 import { HeroSection } from './HeroSection';
+import { Navbar } from './Navbar';
+import { PricingSection } from './PricingSection';
 import { ProblemSection } from './ProblemSection';
 import { SolutionSection } from './SolutionSection';
-import { UseCases } from './UseCases';
-import { FigmaSection } from './FigmaSection';
-import { CodeDemo } from './CodeDemo';
 import { Testimonials } from './Testimonials';
-import { PricingSection } from './PricingSection';
-import { FinalCTASection } from './FinalCTASection';
-import { Footer } from './Footer';
-
-const APP_URL = 'https://app.openflowkit.com';
+import { UseCases } from './UseCases';
 
 export function LandingPage(): React.ReactElement {
   const [isScrolled, setIsScrolled] = useState(false);
+  const sectionBackgroundClassName =
+    'relative overflow-hidden bg-[linear-gradient(180deg,#f8fafc_0%,#f8fafc_35%,#f4f7fb_100%)]';
 
   useEffect(() => {
-    const handleScroll = () => {
+    function handleScroll(): void {
       setIsScrolled(window.scrollY > 20);
-    };
+    }
+
     window.addEventListener('scroll', handleScroll);
+
     return () => window.removeEventListener('scroll', handleScroll);
   }, []);
 
-  const handleLaunch = () => {
+  function handleLaunch(): void {
     window.open(APP_URL, '_blank');
-  };
+  }
 
   return (
     <div className="min-h-screen bg-brand-canvas">
       <Navbar isScrolled={isScrolled} onLaunch={handleLaunch} />
       <HeroSection onLaunch={handleLaunch} />
       <ProblemSection />
-      <SolutionSection />
 
-      {/* Code Demo Section */}
-      <section className="py-24 bg-brand-canvas border-t border-brand-border/60">
-        <div className="container mx-auto px-6">
-          <div className="text-center mb-16">
-            <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-brand-primary/5 border border-brand-primary/10 text-brand-primary/60 mb-6 font-mono text-[10px] uppercase tracking-widest font-bold">
-              Live Preview
-            </div>
-            <h2 className="text-5xl md:text-7xl font-bold text-brand-dark tracking-tighter leading-[0.9] mb-6">
-              Simple for sketching. <br />
-              <span className="font-serif italic font-normal text-brand-primary">Ready for production.</span>
-            </h2>
-            <p className="text-xl text-brand-secondary max-w-2xl mx-auto font-medium">
-              Sketch your ideas fast. Export them production-ready.
-            </p>
-          </div>
-          <CodeDemo />
-        </div>
-      </section>
+      <div className={sectionBackgroundClassName}>
+        <div className="absolute inset-x-0 top-0 h-40 bg-[radial-gradient(circle_at_top,rgba(233,84,32,0.08),transparent_65%)] pointer-events-none" />
+        <SolutionSection />
+        <UseCases />
+        <FigmaSection />
+      </div>
 
-      <FigmaSection />
-      <UseCases />
-      <Testimonials />
+      <ArchitectureExploded />
       <PricingSection onLaunch={handleLaunch} />
+      <Testimonials />
       <FinalCTASection onLaunch={handleLaunch} />
       <Footer onLaunch={handleLaunch} />
     </div>
diff --git a/web/src/components/landing/Navbar.tsx b/web/src/components/landing/Navbar.tsx
index 0347969..38a428a 100644
--- a/web/src/components/landing/Navbar.tsx
+++ b/web/src/components/landing/Navbar.tsx
@@ -1,8 +1,9 @@
-import React, { useState, useEffect } from 'react';
-import { Github, Menu, X, ChevronRight, WandSparkles } from 'lucide-react';
-import { Button } from './Button';
+import React, { useEffect, useState } from 'react';
+import { ChevronRight, Github, Menu, WandSparkles, X } from 'lucide-react';
 import { OpenFlowLogo } from '../icons/OpenFlowLogo';
-
+import { Button } from './Button';
+import { GITHUB_REPO_URL, NAV_LINKS } from './constants';
+import { useGithubStars } from './useGithubStars';
 
 interface NavbarProps {
   isScrolled: boolean;
@@ -11,30 +12,46 @@ interface NavbarProps {
 
 export function Navbar({ isScrolled, onLaunch }: NavbarProps): React.ReactElement {
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+  const stars = useGithubStars();
 
-  // Lock body scroll when mobile menu is open
   useEffect(() => {
-    if (isMobileMenuOpen) {
-      document.body.style.overflow = 'hidden';
-    } else {
+    document.body.style.overflow = isMobileMenuOpen ? 'hidden' : 'unset';
+
+    return () => {
       document.body.style.overflow = 'unset';
-    }
+    };
   }, [isMobileMenuOpen]);
 
-  const handleNavClick = (e: React.MouseEvent<HTMLAnchorElement>, id: string) => {
-    e.preventDefault();
+  function handleNavClick(event: React.MouseEvent<HTMLAnchorElement>, id: string): void {
+    event.preventDefault();
     const element = document.getElementById(id.replace('#', ''));
-    if (element) {
+
+    if (element !== null) {
       element.scrollIntoView({ behavior: 'smooth' });
     }
-  };
+  }
+
+  function closeMobileMenu(): void {
+    setIsMobileMenuOpen(false);
+  }
+
+  function toggleMobileMenu(): void {
+    setIsMobileMenuOpen((previousValue) => !previousValue);
+  }
+
+  function handleMobileLaunch(): void {
+    closeMobileMenu();
+    onLaunch();
+  }
+
+  function handleMobileNavClick(event: React.MouseEvent<HTMLAnchorElement>, id: string): void {
+    closeMobileMenu();
+    handleNavClick(event, id);
+  }
 
-  const navLinks = [
-    { name: 'Features', href: '#architecture' },
-    { name: 'Figma', href: '#figma' },
-    { name: 'Use Cases', href: '#workflows' },
-    { name: 'Pricing', href: '#pricing' },
-  ];
+  function openGithub(): void {
+    window.open(GITHUB_REPO_URL, '_blank');
+  }
 
   const navContainerClasses = isMobileMenuOpen
     ? 'bg-white border-transparent shadow-none ring-0'
@@ -63,16 +80,18 @@ export function Navbar({ isScrolled, onLaunch }: NavbarProps): React.ReactElemen
             <div className="w-8 h-8 bg-brand-primary rounded-lg flex items-center justify-center text-white shadow-lg shadow-brand-primary/20 transition-transform duration-500 group-hover:rotate-12 group-hover:scale-105 ring-1 ring-white/20 shrink-0">
               <OpenFlowLogo className="w-5 h-5 text-white" />
             </div>
-            <span className="text-lg font-bold tracking-tight text-brand-primary font-sans group-hover:opacity-80 transition-opacity whitespace-nowrap">OpenFlowKit</span>
+            <span className="text-lg font-bold tracking-tight text-brand-primary font-sans group-hover:opacity-80 transition-opacity whitespace-nowrap">
+              OpenFlowKit
+            </span>
           </button>
 
           {/* Links - Desktop */}
           <div className="hidden md:flex items-center gap-8">
-            {navLinks.map((item) => (
+            {NAV_LINKS.map((item) => (
               <a
                 key={item.name}
                 href={item.href}
-                onClick={(e) => handleNavClick(e, item.href)}
+                onClick={(event) => handleNavClick(event, item.href)}
                 className="text-[13px] font-medium text-brand-secondary hover:text-brand-primary transition-colors relative group tracking-wide"
               >
                 {item.name}
@@ -86,11 +105,18 @@ export function Navbar({ isScrolled, onLaunch }: NavbarProps): React.ReactElemen
               <Button
                 variant="secondary"
                 size="sm"
-                className="h-9 px-4"
-                onClick={() => window.open("https://github.com/Vrun-design/openflowkit", "_blank")}
+                className="h-9 px-3 gap-1.5"
+                onClick={openGithub}
               >
-                <Github className="w-4 h-4 mr-2" />
-                <span>Github</span>
+                <Github className="w-4 h-4 text-brand-secondary group-hover:text-brand-dark transition-colors" />
+                <span className="font-medium text-[13px] text-brand-dark">Star</span>
+                {stars !== null && (
+                  <div className="flex items-center gap-1.5 pl-1.5 ml-0.5 border-l border-brand-border/60">
+                    <span className="text-[12px] font-mono font-medium text-brand-secondary tracking-tight">
+                      {stars.toLocaleString()}
+                    </span>
+                  </div>
+                )}
               </Button>
             </div>
 
@@ -107,8 +133,10 @@ export function Navbar({ isScrolled, onLaunch }: NavbarProps): React.ReactElemen
 
             {/* Mobile Menu Toggle */}
             <button
+              type="button"
               className="md:hidden p-2 text-brand-primary hover:bg-black/5 rounded-full transition-colors active:scale-90"
-              onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
+              onClick={toggleMobileMenu}
+              aria-label={isMobileMenuOpen ? 'Close navigation menu' : 'Open navigation menu'}
             >
               {isMobileMenuOpen ? <X className="w-5 h-5" /> : <Menu className="w-5 h-5" />}
             </button>
@@ -121,16 +149,13 @@ export function Navbar({ isScrolled, onLaunch }: NavbarProps): React.ReactElemen
         className={`fixed inset-0 bg-white z-[55] transition-all duration-500 md:hidden flex flex-col pt-24 px-6 overflow-y-auto ${mobileMenuClasses}`}
       >
         <div className="flex flex-col gap-2">
-          {navLinks.map((item, i) => (
+          {NAV_LINKS.map((item, index) => (
             <a
               key={item.name}
               href={item.href}
-              onClick={(e) => {
-                setIsMobileMenuOpen(false);
-                handleNavClick(e, item.href);
-              }}
+              onClick={(event) => handleMobileNavClick(event, item.href)}
               className="text-3xl font-bold text-brand-primary py-4 border-b border-brand-border/40 flex items-center justify-between group"
-              style={{ transitionDelay: `${i * 50}ms` }}
+              style={{ transitionDelay: `${index * 50}ms` }}
             >
               {item.name}
               <ChevronRight className="w-6 h-6 opacity-0 -translate-x-4 group-hover:translate-x-0 group-hover:opacity-100 transition-all text-brand-muted" />
@@ -140,10 +165,7 @@ export function Navbar({ isScrolled, onLaunch }: NavbarProps): React.ReactElemen
             <Button
               size="lg"
               className="w-full justify-between h-14 text-base shadow-none"
-              onClick={() => {
-                setIsMobileMenuOpen(false);
-                onLaunch();
-              }}
+              onClick={handleMobileLaunch}
             >
               <span>Get Started</span>
               <WandSparkles className="w-4 h-4" />
@@ -152,7 +174,7 @@ export function Navbar({ isScrolled, onLaunch }: NavbarProps): React.ReactElemen
               size="lg"
               variant="secondary"
               className="w-full justify-center h-14 text-base bg-gray-50 border-gray-200"
-              onClick={() => window.open("https://github.com/Vrun-design/openflowkit", "_blank")}
+              onClick={openGithub}
             >
               <Github className="w-5 h-5 mr-2" />
               View on GitHub
diff --git a/web/src/components/landing/PricingSection.tsx b/web/src/components/landing/PricingSection.tsx
index 7629e83..5e849a1 100644
--- a/web/src/components/landing/PricingSection.tsx
+++ b/web/src/components/landing/PricingSection.tsx
@@ -1,111 +1,115 @@
 import React from 'react';
-import { Check, ArrowRight, Heart, Code2 } from 'lucide-react';
+import { ArrowRight, Check, Code2, Heart } from 'lucide-react';
 import { Button } from './Button';
+import { GITHUB_REPO_URL, PRICING_FEATURES } from './constants';
 
 interface PricingSectionProps {
-    onLaunch: () => void;
+  onLaunch: () => void;
 }
 
 export function PricingSection({ onLaunch }: PricingSectionProps): React.ReactElement {
-    return (
-        <section id="pricing" className="py-24 md:py-32 bg-white relative overflow-hidden">
-            <div className="container mx-auto px-6">
+  return (
+    <section id="pricing" className="py-24 md:py-32 bg-white relative overflow-hidden">
+      <div className="container mx-auto px-6">
+        <div className="max-w-4xl mx-auto">
+          {/* Header */}
+          <div className="text-center mb-16">
+            <h2 className="text-5xl md:text-7xl font-bold text-brand-dark mb-6 tracking-tighter leading-[0.9]">
+              Premium features.
+              <br />
+              <span className="font-serif italic font-normal text-brand-primary">
+                Zero dollar price tag.
+              </span>
+            </h2>
+            <p className="text-xl text-brand-secondary max-w-xl mx-auto font-medium">
+              OpenFlowKit is 100% open source. There is no &quot;Enterprise Edition&quot; hidden
+              behind a sales call.
+            </p>
+          </div>
 
-                <div className="max-w-4xl mx-auto">
-                    {/* Header */}
-                    <div className="text-center mb-16">
-                        <h2 className="text-5xl md:text-7xl font-bold text-brand-dark mb-6 tracking-tighter leading-[0.9]">
-                            Premium features.<br />
-                            <span className="font-serif italic font-normal text-brand-primary">Zero dollar price tag.</span>
-                        </h2>
-                        <p className="text-xl text-brand-secondary max-w-xl mx-auto font-medium">
-                            OpenFlowKit is 100% open source. There is no &quot;Enterprise Edition&quot; hidden behind a sales call.
-                        </p>
-                    </div>
-
-                    {/* The Pricing Card */}
-                    <div className="relative group">
-                        {/* Glow Effect */}
-                        <div className="absolute -inset-[1px] bg-gradient-to-r from-brand-blue/30 via-purple-500/30 to-pink-500/30 rounded-[2.1rem] blur-xl opacity-30 group-hover:opacity-50 transition-opacity duration-1000"></div>
-
-                        <div className="relative bg-white rounded-[2rem] border border-brand-border/80 shadow-2xl overflow-hidden ring-1 ring-black/5">
-                            <div className="grid grid-cols-1 md:grid-cols-2">
-
-                                {/* Left: The "Price" */}
-                                <div className="p-8 md:p-14 bg-brand-canvas border-b md:border-b-0 md:border-r border-brand-border flex flex-col justify-between relative overflow-hidden">
-                                    {/* Background pattern */}
-                                    <div className="absolute inset-0 bg-[radial-gradient(#00000008_1px,transparent_1px)] [background-size:16px_16px]"></div>
-
-                                    <div className="relative z-10">
-                                        <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-black text-white text-[11px] font-bold uppercase tracking-wider mb-6 ring-1 ring-white/20">
-                                            <Code2 className="w-3 h-3" />
-                                            MIT License
-                                        </div>
-                                        <h3 className="text-2xl font-bold text-brand-dark mb-2">Free Forever.</h3>
-                                        <p className="text-brand-secondary text-sm leading-relaxed mb-8">
-                                            Full access to the core engine. <br />Host it anywhere. Modify it freely.
-                                        </p>
-                                    </div>
-
-                                    <div className="relative z-10">
-                                        <div className="flex items-baseline gap-2 mb-2">
-                                            <span className="text-7xl font-bold text-brand-dark tracking-tighter">$0</span>
-                                        </div>
-                                        <p className="text-xs font-mono text-brand-muted uppercase tracking-wider mb-8">Unlimited Usage</p>
+          {/* The Pricing Card */}
+          <div className="relative group">
+            {/* Glow Effect */}
+            <div className="absolute -inset-[1px] bg-gradient-to-r from-brand-blue/30 via-purple-500/30 to-pink-500/30 rounded-[calc(var(--radius-3xl)+2px)] blur-xl opacity-30 group-hover:opacity-50 transition-opacity duration-1000"></div>
 
-                                        <Button
-                                            className="w-full h-12 text-sm flex items-center justify-center gap-2 group"
-                                            onClick={onLaunch}
-                                        >
-                                            <span>Get Started</span>
-                                            <ArrowRight className="w-4 h-4 opacity-50 group-hover:translate-x-1 transition-transform" />
-                                        </Button>
-                                        <p className="text-center text-[10px] text-brand-muted mt-4">
-                                            No account or credit card required
-                                        </p>
-                                    </div>
-                                </div>
+            <div className="relative bg-white rounded-[var(--radius-3xl)] border border-brand-border/80 shadow-2xl overflow-hidden ring-1 ring-black/5">
+              <div className="grid grid-cols-1 md:grid-cols-2">
+                {/* Left: The "Price" */}
+                <div className="p-8 md:p-14 bg-brand-canvas border-b md:border-b-0 md:border-r border-brand-border flex flex-col justify-between relative overflow-hidden">
+                  {/* Background pattern */}
+                  <div className="absolute inset-0 bg-[radial-gradient(#00000008_1px,transparent_1px)] [background-size:16px_16px]"></div>
 
-                                {/* Right: The List */}
-                                <div className="p-8 md:p-14 bg-white flex flex-col justify-center">
-                                    <h4 className="text-sm font-bold text-brand-dark uppercase tracking-widest mb-8 text-opacity-80">Everything Included</h4>
-                                    <ul className="space-y-5">
-                                        {[
-                                            'Unlimited diagrams & projects',
-                                            'Save locally, your data stays on your device',
-                                            'White-Label Branding',
-                                            'One-click auto-layout',
-                                            'Export to SVG, PNG, JPG',
-                                            'Figma Export',
-                                            'Mermaid.js Support',
-                                            'AI diagram generation (bring your own API key)'
-                                        ].map((item, i) => (
-                                            <li key={i} className="flex items-center gap-3 group">
-                                                <div className="w-5 h-5 rounded-full bg-green-50 flex items-center justify-center border border-green-100 group-hover:scale-110 transition-transform shadow-sm">
-                                                    <Check className="w-3 h-3 text-green-600" />
-                                                </div>
-                                                <span className="text-brand-secondary text-[15px] font-medium group-hover:text-brand-primary transition-colors">
-                                                    {item}
-                                                </span>
-                                            </li>
-                                        ))}
-                                    </ul>
-                                </div>
-
-                            </div>
-                        </div>
+                  <div className="relative z-10">
+                    <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-black text-white text-[11px] font-bold uppercase tracking-wider mb-6 ring-1 ring-white/20">
+                      <Code2 className="w-3 h-3" />
+                      MIT License
                     </div>
+                    <h3 className="text-2xl font-bold text-brand-dark mb-2">Free Forever.</h3>
+                    <p className="text-brand-secondary text-sm leading-relaxed mb-8">
+                      Full access to the core engine. <br />
+                      Host it anywhere. Modify it freely.
+                    </p>
+                  </div>
 
-                    {/* Sponsor CTA */}
-                    <div className="mt-12 text-center">
-                        <a href="https://github.com/Vrun-design/FlowMind" target="_blank" rel="noreferrer" className="inline-flex items-center gap-2 text-brand-muted hover:text-brand-primary transition-colors text-sm font-medium">
-                            <Heart className="w-4 h-4 fill-current text-pink-500" />
-                            Support development on GitHub
-                        </a>
+                  <div className="relative z-10">
+                    <div className="flex items-baseline gap-2 mb-2">
+                      <span className="text-7xl font-bold text-brand-dark tracking-tighter">
+                        $0
+                      </span>
                     </div>
+                    <p className="text-xs font-mono text-brand-muted uppercase tracking-wider mb-8">
+                      Unlimited Usage
+                    </p>
+
+                    <Button
+                      className="w-full h-12 text-sm flex items-center justify-center gap-2 group"
+                      onClick={onLaunch}
+                    >
+                      <span>Get Started</span>
+                      <ArrowRight className="w-4 h-4 opacity-50 group-hover:translate-x-1 transition-transform" />
+                    </Button>
+                    <p className="text-center text-[10px] text-brand-muted mt-4">
+                      No account or credit card required
+                    </p>
+                  </div>
+                </div>
 
+                {/* Right: The List */}
+                <div className="p-8 md:p-14 bg-white flex flex-col justify-center">
+                  <h4 className="text-sm font-bold text-brand-dark uppercase tracking-widest mb-8 text-opacity-80">
+                    Everything Included
+                  </h4>
+                  <ul className="space-y-5">
+                    {PRICING_FEATURES.map((item) => (
+                      <li key={item} className="flex items-center gap-3 group">
+                        <div className="w-5 h-5 rounded-full bg-green-50 flex items-center justify-center border border-green-100 group-hover:scale-110 transition-transform shadow-sm">
+                          <Check className="w-3 h-3 text-green-600" />
+                        </div>
+                        <span className="text-brand-secondary text-[15px] font-medium group-hover:text-brand-primary transition-colors">
+                          {item}
+                        </span>
+                      </li>
+                    ))}
+                  </ul>
                 </div>
+              </div>
             </div>
-        </section>
-    );
+          </div>
+
+          {/* Sponsor CTA */}
+          <div className="mt-12 text-center">
+            <a
+              href={GITHUB_REPO_URL}
+              target="_blank"
+              rel="noreferrer"
+              className="inline-flex items-center gap-2 text-brand-muted hover:text-brand-primary transition-colors text-sm font-medium"
+            >
+              <Heart className="w-4 h-4 fill-current text-pink-500" />
+              Support development on GitHub
+            </a>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
 }
diff --git a/web/src/components/landing/SolutionSection.tsx b/web/src/components/landing/SolutionSection.tsx
index 4a9caa8..1ad435b 100644
--- a/web/src/components/landing/SolutionSection.tsx
+++ b/web/src/components/landing/SolutionSection.tsx
@@ -1,18 +1,5 @@
 import React from 'react';
-import { WandSparkles, FileCode, Palette, ShieldCheck, HardDrive, Layers, Lock } from 'lucide-react';
-
-function getFlagCode(country: string): string {
-    switch (country) {
-        case 'UK':
-            return 'gb';
-        case 'CN':
-            return 'cn';
-        case 'JP':
-            return 'jp';
-        default:
-            return country.toLowerCase();
-    }
-}
+import { WandSparkles, FileCode, ShieldCheck, HardDrive, Layers, Lock, Key } from 'lucide-react';
 
 export function SolutionSection(): React.ReactElement {
     return (
@@ -42,8 +29,8 @@ export function SolutionSection(): React.ReactElement {
             <div className="container mx-auto px-6 relative z-10">
                 <div className="grid grid-cols-1 md:grid-cols-12 gap-6 auto-rows-[minmax(340px,auto)]">
 
-                    {/* Card 1: Advanced Diagram as Code (Span 7) */}
-                    <div className="md:col-span-7 bg-white rounded-[2.5rem] border border-brand-border p-8 md:p-12 relative overflow-hidden group hover:shadow-2xl hover:shadow-brand-blue/5 transition-all duration-700 flex flex-col justify-between">
+                    {/* Card 1: Advanced Diagram as Code (Span 8) */}
+                    <div className="col-span-1 md:col-span-12 lg:col-span-8 order-1 bg-white rounded-[var(--radius-3xl)] border border-brand-border p-8 md:p-12 relative overflow-hidden group hover:shadow-2xl hover:shadow-brand-blue/5 transition-all duration-700 flex flex-col justify-between">
 
                         <div className="absolute top-0 right-0 w-[60%] h-full bg-gradient-to-l from-gray-50 to-transparent pointer-events-none"></div>
 
@@ -52,8 +39,8 @@ export function SolutionSection(): React.ReactElement {
                                 <FileCode className="w-6 h-6" />
                             </div>
                             <h3 className="text-3xl font-bold text-brand-dark mb-4 tracking-tight">Diagram as Code</h3>
-                            <p className="text-brand-secondary text-lg leading-relaxed">
-                                First-class support for Mermaid.js and our type-safe DSL. Define your architecture in code, export as JSON, and let the engine handle the layout.
+                            <p className="text-brand-secondary text-lg leading-relaxed pr-8">
+                                First-class support for our type-safe DSL. Define nodes in code and let the engine handle the layout.
                             </p>
                         </div>
 
@@ -90,7 +77,7 @@ export function SolutionSection(): React.ReactElement {
                     </div>
 
                     {/* Card 2: Flowpilot AI (Span 5) */}
-                    <div className="md:col-span-5 bg-[#0A0A0A] rounded-[2.5rem] p-8 md:p-12 flex flex-col relative overflow-hidden group border border-white/10 shadow-2xl min-h-[400px]">
+                    <div className="col-span-1 md:col-span-6 lg:col-span-5 order-3 bg-[#0A0A0A] rounded-[var(--radius-3xl)] p-8 md:p-12 flex flex-col relative overflow-hidden group border border-white/10 shadow-2xl min-h-[400px]">
                         <div className="absolute inset-0 bg-[radial-gradient(circle_at_top_right,#222_0%,transparent_60%)]"></div>
 
                         {/* Content Top */}
@@ -101,7 +88,7 @@ export function SolutionSection(): React.ReactElement {
                             </div>
                             <h3 className="text-3xl font-bold text-white mb-2 tracking-tight">Flowpilot AI</h3>
                             <p className="text-white/60 text-base leading-relaxed">
-                                Chat with your diagram. &quot;Make the corners rounder&quot;, &quot;Add a load balancer&quot;.
+                                Chat with your diagram in natural language to build and style blocks instantly.
                             </p>
                         </div>
 
@@ -144,7 +131,7 @@ export function SolutionSection(): React.ReactElement {
                     </div>
 
                     {/* Card 3: Local First (Span 4) */}
-                    <div className="md:col-span-4 bg-white rounded-[2.5rem] border border-brand-border p-8 md:p-12 flex flex-col justify-between group hover:border-brand-primary/20 transition-all relative overflow-hidden min-h-[320px]">
+                    <div className="col-span-1 md:col-span-6 lg:col-span-4 order-2 bg-white rounded-[var(--radius-3xl)] border border-brand-border p-8 md:p-12 flex flex-col justify-between group hover:border-brand-primary/20 transition-all relative overflow-hidden min-h-[320px]">
                         <div className="absolute right-0 top-0 p-12 opacity-[0.03] group-hover:opacity-[0.08] transition-opacity transform group-hover:scale-110 duration-700 pointer-events-none">
                             <ShieldCheck className="w-64 h-64" />
                         </div>
@@ -154,98 +141,164 @@ export function SolutionSection(): React.ReactElement {
                                 <Lock className="w-6 h-6" />
                             </div>
                             <h3 className="text-2xl font-bold text-brand-dark mb-3">Local &amp; Private</h3>
-                            <p className="text-brand-secondary text-lg leading-relaxed">
-                                We don&apos;t want your data. Everything stays on your machine. No cloud saves, no tracking, no &quot;syncing&quot; to our servers. You have full freedom.
+                            <p className="text-brand-secondary text-base leading-relaxed">
+                                Everything stays on your machine. No cloud tracking, no forced syncing. You have full freedom.
                             </p>
                         </div>
 
-                        <div className="relative z-10 mt-8 flex items-center gap-4">
-                            <div className="flex items-center gap-2 px-3 py-1.5 bg-gray-50 rounded-full border border-gray-100 text-[11px] font-mono text-gray-600 font-medium">
+                        <div className="relative z-10 mt-8 flex flex-wrap items-center gap-3">
+                            <div className="flex items-center gap-2 px-3 py-1.5 bg-gray-50 rounded-full border border-gray-100 text-[11px] font-mono text-gray-600 font-medium whitespace-nowrap">
                                 <div className="w-1.5 h-1.5 rounded-full bg-green-500"></div>
                                 Offline Ready
                             </div>
-                            <div className="flex items-center gap-2 px-3 py-1.5 bg-gray-50 rounded-full border border-gray-100 text-[11px] font-mono text-gray-600 font-medium">
+                            <div className="flex items-center gap-2 px-3 py-1.5 bg-gray-50 rounded-full border border-gray-100 text-[11px] font-mono text-gray-600 font-medium whitespace-nowrap">
                                 <HardDrive className="w-3 h-3" />
                                 Local File System
                             </div>
                         </div>
                     </div>
 
-                    {/* Card 4: Aesthetics (Span 4) */}
-                    <div className="md:col-span-4 bg-gradient-to-br from-gray-50 via-white to-purple-50/30 rounded-[2.5rem] border border-brand-border p-8 md:p-12 flex flex-col justify-between group hover:border-purple-200 transition-all relative overflow-hidden min-h-[320px]">
+                    {/* Card 4: BYOK (Span 4) */}
+                    <div className="col-span-1 md:col-span-6 lg:col-span-4 order-5 bg-gradient-to-br from-gray-50 via-white to-emerald-50/30 rounded-[var(--radius-3xl)] border border-brand-border p-8 md:p-12 flex flex-col justify-between group hover:border-emerald-200 transition-all relative overflow-hidden min-h-[320px]">
                         {/* Decorative Background */}
                         <div className="absolute inset-0 bg-[radial-gradient(#e5e7eb_1px,transparent_1px)] [background-size:20px_20px] opacity-30"></div>
-                        <div className="absolute -right-20 -top-20 w-64 h-64 bg-gradient-to-br from-brand-blue/20 to-purple-500/20 rounded-full blur-[60px] opacity-0 group-hover:opacity-100 transition-opacity duration-1000"></div>
+                        <div className="absolute -right-20 -top-20 w-64 h-64 bg-gradient-to-br from-brand-blue/20 to-emerald-500/20 rounded-full blur-[60px] opacity-0 group-hover:opacity-100 transition-opacity duration-1000"></div>
 
                         <div className="relative z-10 max-w-md">
-                            <div className="w-12 h-12 rounded-2xl bg-purple-50 flex items-center justify-center text-purple-600 mb-6 group-hover:scale-110 transition-transform border border-purple-100/50">
-                                <Palette className="w-6 h-6" />
+                            <div className="w-12 h-12 rounded-2xl bg-emerald-50 flex items-center justify-center text-emerald-600 mb-6 group-hover:scale-110 transition-transform border border-emerald-100/50">
+                                <Key className="w-6 h-6" />
                             </div>
-                            <h3 className="text-2xl font-bold text-brand-dark mb-3">Amazing Aesthetics</h3>
-                            <p className="text-brand-secondary text-lg leading-relaxed">
-                                Break free from &quot;Enterprise Beige&quot;. Fully customizable fonts, colors, and shapes. Create diagrams that look like art, not documentation.
+                            <h3 className="text-2xl font-bold text-brand-dark mb-3">Bring Your Own Key</h3>
+                            <p className="text-brand-secondary text-base leading-relaxed">
+                                Plug in your own OpenAI or Anthropic keys. Stored securely on your device, avoiding all vendor lock-ins.
                             </p>
                         </div>
 
-                        {/* Visual: Interactive Palette */}
-                        <div className="relative z-10 mt-8">
-                            <div className="flex items-center gap-3">
-                                {/* Swatch 1 */}
-                                <div className="group/swatch relative cursor-pointer">
-                                    <div className="w-10 h-10 rounded-full bg-[#FF5F57] shadow-sm ring-2 ring-white hover:scale-110 transition-transform"></div>
-                                    <div className="absolute -top-8 left-1/2 -translate-x-1/2 bg-black text-white text-[9px] px-2 py-1 rounded opacity-0 group-hover/swatch:opacity-100 transition-opacity whitespace-nowrap">Sunset Red</div>
+                        {/* Visual: API Key Input */}
+                        <div className="relative z-10 mt-8 w-full max-w-[280px]">
+                            <div className="bg-white rounded-xl shadow-lg border border-gray-200 p-3 flex items-center gap-3 transform group-hover:-translate-y-1 transition-transform">
+                                <div className="w-6 h-6 rounded-full bg-emerald-100 flex items-center justify-center shrink-0">
+                                    <svg viewBox="0 0 24 24" fill="none" className="w-3.5 h-3.5 text-emerald-600" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
                                 </div>
-                                {/* Swatch 2 */}
-                                <div className="group/swatch relative cursor-pointer">
-                                    <div className="w-10 h-10 rounded-full bg-[#FEBC2E] shadow-sm ring-2 ring-white hover:scale-110 transition-transform delay-75"></div>
-                                    <div className="absolute -top-8 left-1/2 -translate-x-1/2 bg-black text-white text-[9px] px-2 py-1 rounded opacity-0 group-hover/swatch:opacity-100 transition-opacity whitespace-nowrap">Amber Warning</div>
+                                <div className="flex-1 overflow-hidden">
+                                    <div className="text-[10px] font-bold text-gray-500 mb-1 uppercase tracking-wider">OpenAI API Key</div>
+                                    <div className="flex items-center gap-1.5">
+                                        <div className="flex gap-0.5">
+                                            {[...Array(12)].map((_, i) => (
+                                                <div key={i} className="w-1.5 h-1.5 rounded-full bg-gray-300"></div>
+                                            ))}
+                                        </div>
+                                        <span className="text-xs font-mono text-gray-600 ml-1">v4X9</span>
+                                    </div>
                                 </div>
-                                {/* Swatch 3 */}
-                                <div className="group/swatch relative cursor-pointer">
-                                    <div className="w-10 h-10 rounded-full bg-[#28C840] shadow-sm ring-2 ring-white hover:scale-110 transition-transform delay-100"></div>
-                                    <div className="absolute -top-8 left-1/2 -translate-x-1/2 bg-black text-white text-[9px] px-2 py-1 rounded opacity-0 group-hover/swatch:opacity-100 transition-opacity whitespace-nowrap">Success Green</div>
+                            </div>
+                        </div>
+                    </div>
+
+                    {/* Card 5: Export Everywhere (Span 7) */}
+                    <div className="col-span-1 md:col-span-12 lg:col-span-7 order-4 bg-[#0A0A0A] rounded-[var(--radius-3xl)] p-8 md:p-12 flex flex-col justify-between relative overflow-hidden group shadow-2xl min-h-[380px]">
+                        <div className="relative z-20 max-w-lg mb-8">
+                            <div className="w-12 h-12 rounded-2xl bg-white/5 flex items-center justify-center text-white mb-6 border border-white/10 group-hover:scale-110 group-hover:-rotate-3 transition-transform duration-500">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="lucide lucide-download-cloud"><path d="M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242" /><path d="M12 12v9" /><path d="m8 17 4 4 4-4" /></svg>
+                            </div>
+                            <h3 className="text-3xl font-bold text-white mb-3 tracking-tight">Export Everywhere</h3>
+                            <p className="text-white/60 text-lg leading-relaxed">
+                                Export to native Figma vector layers, pristine SVG, PNG, or JSON. Your diagrams are instantly portable.
+                            </p>
+                        </div>
+                        
+                        {/* Polished Visual: Format Dock */}
+                        <div className="relative z-10 mt-auto flex items-center p-3 rounded-2xl bg-white/5 border border-white/10 backdrop-blur-md self-start group-hover:-translate-y-2 transition-transform duration-500 shadow-2xl shadow-black/50 overflow-hidden">
+                            <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/5 to-transparent translate-x-[-100%] group-hover:translate-x-[100%] transition-transform duration-1000 ease-in-out"></div>
+                            <div className="flex items-center gap-2">
+                                <div className="flex items-center justify-center px-4 py-2 rounded-xl bg-white/10 border border-white/5 gap-2">
+                                    <div className="w-2 h-2 rounded-full bg-pink-400"></div><span className="text-xs font-mono font-medium text-white/90">.fig</span>
                                 </div>
-                                {/* Swatch 4 */}
-                                <div className="group/swatch relative cursor-pointer">
-                                    <div className="w-10 h-10 rounded-full bg-brand-blue shadow-sm ring-2 ring-white hover:scale-110 transition-transform delay-150"></div>
-                                    <div className="absolute -top-8 left-1/2 -translate-x-1/2 bg-black text-white text-[9px] px-2 py-1 rounded opacity-0 group-hover/swatch:opacity-100 transition-opacity whitespace-nowrap">Klein Blue</div>
+                                <div className="flex items-center justify-center px-4 py-2 rounded-xl bg-white/10 border border-white/5 gap-2">
+                                    <div className="w-2 h-2 rounded-full bg-blue-400"></div><span className="text-xs font-mono font-medium text-white/90">.svg</span>
                                 </div>
-
-                                <div className="w-px h-8 bg-brand-border mx-2"></div>
-
-                                <div className="text-xs font-mono text-brand-secondary bg-white border border-brand-border px-3 py-2 rounded-lg">
-                                    font-family: &apos;Inter&apos;, sans-serif;
+                                <div className="flex items-center justify-center px-4 py-2 rounded-xl bg-white/10 border border-white/5 gap-2">
+                                    <div className="w-2 h-2 rounded-full bg-green-400"></div><span className="text-xs font-mono font-medium text-white/90">.png</span>
+                                </div>
+                                <div className="w-px h-6 bg-white/10 mx-1"></div>
+                                <div className="flex items-center justify-center px-4 py-2 rounded-xl bg-transparent border border-white/5 border-dashed gap-2 text-white/40 group-hover:text-white/70 transition-colors">
+                                    <span className="text-xs font-mono font-medium">+.json</span>
                                 </div>
                             </div>
                         </div>
                     </div>
 
-                    {/* Card 5: Localization (Span 4) */}
-                    <div className="md:col-span-4 bg-white rounded-[2.5rem] border border-brand-border p-8 md:p-12 flex flex-col justify-between group hover:border-green-200 transition-all relative overflow-hidden min-h-[320px]">
-                        <div className="absolute right-0 bottom-0 p-8 opacity-[0.03] group-hover:opacity-[0.08] transition-opacity transform group-hover:-translate-y-2 duration-700 pointer-events-none">
-                            <svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" className="lucide lucide-globe"><circle cx="12" cy="12" r="10" /><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" /><path d="M2 12h20" /></svg>
+
+
+                    {/* Card 7: Auto-Layout (Span 4) */}
+                    <div className="col-span-1 md:col-span-6 lg:col-span-4 order-6 bg-white rounded-[var(--radius-3xl)] border border-brand-border p-8 md:p-12 flex flex-col justify-between group hover:border-gray-300 transition-all min-h-[380px] overflow-hidden">
+                        <div className="relative z-20">
+                            <div className="w-12 h-12 rounded-2xl bg-gray-50 flex items-center justify-center text-gray-700 mb-6 border border-gray-200 group-hover:scale-110 transition-transform duration-500">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="lucide lucide-git-merge"><circle cx="18" cy="18" r="3" /><circle cx="6" cy="6" r="3" /><path d="M6 21V9a9 9 0 0 0 9 9" /></svg>
+                            </div>
+                            <h3 className="text-2xl font-bold text-brand-dark mb-3 tracking-tight">Smart Auto-Layout</h3>
+                            <p className="text-brand-secondary text-base leading-relaxed">
+                                Powered by ELK.js to automatically route edges and perfectly snap nodes into alignment.
+                            </p>
                         </div>
+                        
+                        {/* Polished Visual: Orthogonal Node Tree */}
+                        <div className="relative z-10 mt-12 w-full flex justify-center items-center h-28">
+                            <div className="relative w-[180px] h-[100px] border-t border-r border-brand-primary/20 rounded-tr-xl transform group-hover:-translate-y-2 transition-transform duration-500">
+                                {/* Flow line glow effect */}
+                                <div className="absolute top-0 right-0 w-0 h-px bg-brand-primary shadow-[0_0_8px_brand-primary] group-hover:w-full transition-all duration-1000 ease-out"></div>
+                                
+                                {/* Node 1 (Root, Left) */}
+                                <div className="absolute top-[-14px] left-[-28px] w-[56px] h-[28px] bg-white border shadow-sm rounded-lg flex items-center justify-center text-[8px] font-bold text-gray-700 ring-4 ring-white">APP</div>
+                                
+                                {/* Node 2 (Branch, Right Top) */}
+                                <div className="absolute top-[-14px] right-[-28px] w-[56px] h-[28px] bg-brand-primary border-brand-primary shadow-md shadow-brand-primary/20 rounded-lg flex items-center justify-center text-[8px] font-bold text-white ring-4 ring-white">API</div>
+                                
+                                {/* SVG Line down to Database */}
+                                <svg className="absolute top-0 right-[-14px] w-8 h-[100px]" viewBox="0 0 32 100">
+                                    <path d="M14 0 L14 86 C14 93.7 20.3 100 28 100 L32 100" fill="none" className="stroke-brand-primary/20" strokeWidth="1" />
+                                </svg>
 
-                        <div className="relative z-10 max-w-md">
-                            <div className="w-12 h-12 rounded-2xl bg-green-50 flex items-center justify-center text-green-600 mb-6 group-hover:scale-110 transition-transform border border-green-100/50">
-                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="lucide lucide-globe"><circle cx="12" cy="12" r="10" /><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" /><path d="M2 12h20" /></svg>
+                                {/* Node 3 (Branch, Right Bottom) */}
+                                <div className="absolute bottom-[-14px] right-[-50px] w-[56px] h-[28px] bg-white border shadow-sm rounded-lg flex items-center justify-center text-[8px] font-bold text-gray-500 ring-4 ring-white">DB</div>
                             </div>
-                            <h3 className="text-2xl font-bold text-brand-dark mb-3">Global by Design</h3>
-                            <p className="text-brand-secondary text-lg leading-relaxed">
-                                Available in multiple languages including English, Turkish, German, French, Spanish, Chinese, and Japanese.
+                        </div>
+                    </div>
+
+                    {/* Card 8: Real-Time Sync (Span 4) */}
+                    <div className="col-span-1 md:col-span-12 lg:col-span-4 order-7 bg-gray-50/50 rounded-[var(--radius-3xl)] border border-brand-border p-8 md:p-12 flex flex-col justify-between group transition-colors min-h-[380px] overflow-hidden hover:bg-white">
+                        <div className="relative z-20">
+                            <div className="w-12 h-12 rounded-2xl bg-blue-50 flex items-center justify-center text-blue-600 mb-6 border border-blue-100 group-hover:scale-110 transition-transform duration-500">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="lucide lucide-users"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" /><circle cx="9" cy="7" r="4" /><path d="M22 21v-2a4 4 0 0 0-3-3.87" /><path d="M16 3.13a4 4 0 0 1 0 7.75" /></svg>
+                            </div>
+                            <h3 className="text-2xl font-bold text-brand-dark mb-3 tracking-tight">Multiplayer Sync</h3>
+                            <p className="text-brand-secondary text-base leading-relaxed">
+                                Share a link and build together with true peer-to-peer WebRTC zero-latency live cursors.
                             </p>
                         </div>
 
-                        {/* Visual: Language Flags */}
-                        <div className="relative z-10 mt-8 flex flex-wrap gap-3">
-                            {['US', 'TR', 'DE', 'FR', 'ES', 'CN', 'JP'].map((country, index) => (
-                                <div key={country} className="w-10 h-10 rounded-full bg-gray-50 border border-gray-200 flex items-center justify-center shadow-sm overflow-hidden group-hover:-translate-y-1 transition-transform hover:!scale-110 duration-300" style={{ transitionDelay: `${index * 25}ms` }}>
-                                    <img src={`https://flagcdn.com/w40/${getFlagCode(country)}.png`} alt={`${country} flag`} className="w-full h-full object-cover" />
+                        {/* Polished Visual: Precision Cursors */}
+                        <div className="relative z-10 mt-12 w-full flex justify-center items-center h-28 perspective-1000">
+                            <div className="relative w-[180px] h-[80px] bg-white border border-gray-100 shadow-sm rounded-xl transform rotate-x-[15deg] group-hover:rotate-x-[0deg] transition-transform duration-500 flex items-center justify-center">
+                                <div className="text-[10px] font-mono text-gray-400 border border-dashed border-gray-200 px-3 py-1 rounded">Shared Node Object</div>
+                                
+                                {/* Cursor 1 (Top Left) */}
+                                <div className="absolute top-[-5px] left-[15px] transform group-hover:translate-x-4 transition-transform duration-700 delay-100">
+                                    <svg width="18" height="18" viewBox="0 0 24 24" fill="#F59E0B" xmlns="http://www.w3.org/2000/svg" className="drop-shadow-sm"><path d="M4.34315 2.15685L21.3137 19.1274C21.9056 19.7193 21.4862 20.7322 20.6482 20.7322H14.1252L9.88289 24.9745C9.28913 25.5683 8.27435 25.1473 8.27435 24.3075V2.85257C8.27435 2.01633 9.28659 1.59477 9.88045 2.18863L4.34315 2.15685Z" /></svg>
+                                    <div className="absolute left-4 top-4 bg-[#F59E0B] text-white text-[8px] font-bold px-1.5 py-0.5 rounded shadow-sm whitespace-nowrap">Alex</div>
+                                </div>
+                                
+                                {/* Cursor 2 (Bottom Right) */}
+                                <div className="absolute bottom-[-15px] right-[25px] transform group-hover:-translate-x-6 group-hover:-translate-y-2 transition-transform duration-700 delay-300">
+                                    <svg width="18" height="18" viewBox="0 0 24 24" fill="#10B981" xmlns="http://www.w3.org/2000/svg" className="drop-shadow-sm"><path d="M4.34315 2.15685L21.3137 19.1274C21.9056 19.7193 21.4862 20.7322 20.6482 20.7322H14.1252L9.88289 24.9745C9.28913 25.5683 8.27435 25.1473 8.27435 24.3075V2.85257C8.27435 2.01633 9.28659 1.59477 9.88045 2.18863L4.34315 2.15685Z" /></svg>
+                                    <div className="absolute left-4 top-4 bg-[#10B981] text-white text-[8px] font-bold px-1.5 py-0.5 rounded shadow-sm whitespace-nowrap">Sarah</div>
                                 </div>
-                            ))}
+                            </div>
                         </div>
                     </div>
 
+
+
                 </div>
             </div>
         </section>
diff --git a/web/src/components/landing/Testimonials.tsx b/web/src/components/landing/Testimonials.tsx
index f102b27..f90b280 100644
--- a/web/src/components/landing/Testimonials.tsx
+++ b/web/src/components/landing/Testimonials.tsx
@@ -1,139 +1,172 @@
 import React from 'react';
-import { Github, ArrowUpRight, GitPullRequest, Construction, Users, Map, CheckCircle2, CircleDashed } from 'lucide-react';
+import { ArrowUpRight, Construction, Github, GitPullRequest, Star, Users } from 'lucide-react';
+import { GITHUB_REPO_URL, LANDING_CONTRIBUTORS } from './constants';
+import { useGithubStars } from './useGithubStars';
 
 export function Testimonials(): React.ReactElement {
-    return (
-        <section className="py-32 bg-[#08090A] border-t border-white/5 relative overflow-hidden select-none">
-            {/* Background Effects */}
-            <div className="absolute top-0 left-0 w-full h-full bg-[radial-gradient(circle_at_50%_0%,#1a1a1a_0%,transparent_70%)] pointer-events-none"></div>
-
-            <div className="container mx-auto px-6 relative z-10">
+  const stars = useGithubStars();
+  return (
+    <section className="py-32 bg-[#08090A] border-t border-white/5 relative overflow-hidden select-none">
+      {/* Background Effects */}
+      <div className="absolute top-0 left-0 w-full h-full bg-[radial-gradient(circle_at_50%_0%,#1a1a1a_0%,transparent_70%)] pointer-events-none"></div>
+
+      <div className="container mx-auto px-6 relative z-10">
+        {/* Header */}
+        <div className="flex flex-col md:flex-row md:items-end justify-between mb-16 gap-6">
+          <div className="max-w-2xl">
+            <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/5 border border-white/10 text-white/60 mb-6 font-mono text-[10px] uppercase tracking-widest font-bold">
+              <Construction className="w-3 h-3" />
+              <span>Under Construction</span>
+            </div>
+            <h2 className="text-5xl md:text-7xl font-bold text-white tracking-tighter mb-4 leading-[0.9]">
+              Build in public. <br />
+              <span className="font-serif italic font-normal text-white/50">Shape the engine.</span>
+            </h2>
+            <p className="text-xl text-white/50 leading-relaxed max-w-lg font-medium">
+              OpenFlowKit is just getting started. We are building the core engine in the open. Join
+              us on Day 1.
+            </p>
+          </div>
+
+          <div className="flex items-center gap-4">
+            <a
+              href={GITHUB_REPO_URL}
+              target="_blank"
+              className="flex items-center gap-2 px-4 py-2 bg-white text-black rounded-full font-bold text-sm hover:bg-gray-200 transition-colors"
+              rel="noreferrer"
+            >
+              <Github className="w-4 h-4" />
+              Star the Repo
+            </a>
+          </div>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+          {/* GitHub Card */}
+          <a
+            href={GITHUB_REPO_URL}
+            target="_blank"
+            className="group relative bg-[#111] rounded-2xl p-8 border border-white/5 hover:border-white/20 transition-all duration-300 overflow-hidden flex flex-col justify-between h-[340px]"
+            rel="noreferrer"
+          >
+            <div className="absolute top-0 right-0 w-32 h-32 bg-white/5 rounded-full blur-[60px] -mr-16 -mt-16 transition-opacity opacity-0 group-hover:opacity-20"></div>
+
+            <div className="flex items-center justify-between">
+              <div className="w-12 h-12 rounded-xl bg-white/5 flex items-center justify-center border border-white/10 group-hover:scale-110 transition-transform">
+                <Github className="w-6 h-6 text-white" />
+              </div>
+              <ArrowUpRight className="w-5 h-5 text-white/20 group-hover:text-white group-hover:translate-x-1 group-hover:-translate-y-1 transition-all" />
+            </div>
 
-                {/* Header */}
-                <div className="flex flex-col md:flex-row md:items-end justify-between mb-16 gap-6">
-                    <div className="max-w-2xl">
-                        <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/5 border border-white/10 text-white/60 mb-6 font-mono text-[10px] uppercase tracking-widest font-bold">
-                            <Construction className="w-3 h-3" />
-                            <span>Under Construction</span>
-                        </div>
-                        <h2 className="text-5xl md:text-7xl font-bold text-white tracking-tighter mb-4 leading-[0.9]">
-                            Build in public. <br />
-                            <span className="font-serif italic font-normal text-white/50">Shape the engine.</span>
-                        </h2>
-                        <p className="text-xl text-white/50 leading-relaxed max-w-lg font-medium">
-                            OpenFlowKit is just getting started. We are building the core engine in the open. Join us on Day 1.
-                        </p>
-                    </div>
+            <div>
+              <h3 className="text-xl font-bold text-white mb-2">Open Source</h3>
+              <p className="text-white/50 text-sm leading-relaxed mb-6">
+                The core engine is MIT licensed. Read the source, submit PRs, or fork it for your
+                internal tools.
+              </p>
+              <div className="flex items-center gap-3 text-xs font-mono text-white/40">
+                <span className="flex items-center gap-1">
+                  <GitPullRequest className="w-3 h-3" /> PRs Welcome
+                </span>
+                {stars !== null && (
+                  <>
+                    <span className="text-white/20">•</span>
+                    <span className="flex items-center gap-1">
+                      <Star className="w-3 h-3 text-amber-500 fill-amber-500/20" />
+                      {stars.toLocaleString()} Stars
+                    </span>
+                  </>
+                )}
+              </div>
+            </div>
+          </a>
+
+          {/* Contributors Card */}
+          <div className="group relative bg-[#111] rounded-2xl p-8 border border-white/5 hover:border-white/20 transition-all duration-300 overflow-hidden flex flex-col justify-between h-[340px]">
+            <div className="absolute top-0 right-0 w-32 h-32 bg-brand-blue/10 rounded-full blur-[60px] -mr-16 -mt-16 transition-opacity opacity-0 group-hover:opacity-20"></div>
+
+            <div className="flex items-center justify-between">
+              <div className="w-12 h-12 rounded-xl bg-brand-blue/10 flex items-center justify-center border border-brand-blue/20 group-hover:scale-110 transition-transform">
+                <Users className="w-5 h-5 text-brand-blue" />
+              </div>
+              <span className="text-[10px] font-mono text-white/30 border border-white/10 px-2 py-1 rounded bg-white/5">
+                Contributors
+              </span>
+            </div>
 
-                    <div className="flex items-center gap-4">
-                        <a href="https://github.com/Vrun-design/openflowkit" target="_blank" className="flex items-center gap-2 px-4 py-2 bg-white text-black rounded-full font-bold text-sm hover:bg-gray-200 transition-colors" rel="noreferrer">
-                            <Github className="w-4 h-4" />
-                            Star the Repo
-                        </a>
-                    </div>
+            <div>
+              <h3 className="text-xl font-bold text-white mb-2">Community</h3>
+              <p className="text-white/50 text-sm leading-relaxed mb-6">
+                Join developers building on OpenFlowKit.
+              </p>
+
+              <div className="flex items-center -space-x-3">
+                {LANDING_CONTRIBUTORS.map((c) => (
+                  <a
+                    key={c.login}
+                    href={`https://github.com/${c.login}`}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    title={c.name}
+                    className="w-10 h-10 rounded-full border-2 border-[#111] overflow-hidden relative z-0 hover:z-10 transition-transform hover:scale-110 block"
+                  >
+                    <img
+                      src={`https://github.com/${c.login}.png?size=80`}
+                      alt={c.name}
+                      className="w-full h-full object-cover bg-white/5"
+                    />
+                  </a>
+                ))}
+                <div className="w-10 h-10 rounded-full border-2 border-[#111] bg-[#222] flex items-center justify-center text-[10px] text-white font-medium z-0">
+                  +You
                 </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Developer Review Card */}
+          <div className="group relative bg-[#111] rounded-2xl p-8 border border-white/5 hover:border-white/20 transition-all duration-300 overflow-hidden flex flex-col justify-between h-[340px]">
+            <div className="absolute top-0 right-0 w-32 h-32 bg-amber-500/10 rounded-full blur-[60px] -mr-16 -mt-16 transition-opacity opacity-0 group-hover:opacity-20"></div>
+
+            <div className="flex items-center justify-between">
+              <div className="flex gap-1">
+                {[1, 2, 3, 4, 5].map((star) => (
+                  <svg
+                    key={star}
+                    className="w-4 h-4 text-amber-500 fill-amber-500"
+                    viewBox="0 0 20 20"
+                  >
+                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
+                  </svg>
+                ))}
+              </div>
+              <span className="text-[10px] font-mono text-white/30 border border-white/10 px-2 py-1 rounded bg-white/5">
+                Feedback
+              </span>
+            </div>
 
-                <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-
-                    {/* GitHub Card */}
-                    <a href="https://github.com/Vrun-design/openflowkit" target="_blank" className="group relative bg-[#111] rounded-2xl p-8 border border-white/5 hover:border-white/20 transition-all duration-300 overflow-hidden flex flex-col justify-between h-[340px]" rel="noreferrer">
-                        <div className="absolute top-0 right-0 w-32 h-32 bg-white/5 rounded-full blur-[60px] -mr-16 -mt-16 transition-opacity opacity-0 group-hover:opacity-20"></div>
-
-                        <div className="flex items-center justify-between">
-                            <div className="w-12 h-12 rounded-xl bg-white/5 flex items-center justify-center border border-white/10 group-hover:scale-110 transition-transform">
-                                <Github className="w-6 h-6 text-white" />
-                            </div>
-                            <ArrowUpRight className="w-5 h-5 text-white/20 group-hover:text-white group-hover:translate-x-1 group-hover:-translate-y-1 transition-all" />
-                        </div>
-
-                        <div>
-                            <h3 className="text-xl font-bold text-white mb-2">Open Source</h3>
-                            <p className="text-white/50 text-sm leading-relaxed mb-6">
-                                The core engine is MIT licensed. Read the source, submit PRs, or fork it for your internal tools.
-                            </p>
-                            <div className="flex items-center gap-3 text-xs font-mono text-white/40">
-                                <span className="flex items-center gap-1"><GitPullRequest className="w-3 h-3" /> PRs Welcome</span>
-                            </div>
-                        </div>
-                    </a>
-
-                    {/* Contributors Card */}
-                    <div className="group relative bg-[#111] rounded-2xl p-8 border border-white/5 hover:border-white/20 transition-all duration-300 overflow-hidden flex flex-col justify-between h-[340px]">
-                        <div className="absolute top-0 right-0 w-32 h-32 bg-brand-blue/10 rounded-full blur-[60px] -mr-16 -mt-16 transition-opacity opacity-0 group-hover:opacity-20"></div>
-
-                        <div className="flex items-center justify-between">
-                            <div className="w-12 h-12 rounded-xl bg-brand-blue/10 flex items-center justify-center border border-brand-blue/20 group-hover:scale-110 transition-transform">
-                                <Users className="w-5 h-5 text-brand-blue" />
-                            </div>
-                            <span className="text-[10px] font-mono text-white/30 border border-white/10 px-2 py-1 rounded bg-white/5">Contributors</span>
-                        </div>
-
-                        <div>
-                            <h3 className="text-xl font-bold text-white mb-2">Community</h3>
-                            <p className="text-white/50 text-sm leading-relaxed mb-6">
-                                Join developers building on OpenFlowKit.
-                            </p>
-
-                            <div className="flex items-center -space-x-3">
-                                {[
-                                    { login: 'Vrun-design', name: 'Varun' },
-                                    { login: 'YunusEmreAlps', name: 'Yunus Emre' },
-                                    { login: 'namandhakad712', name: 'Naman Dhakad' },
-                                ].map((c) => (
-                                    <a
-                                        key={c.login}
-                                        href={`https://github.com/${c.login}`}
-                                        target="_blank"
-                                        rel="noopener noreferrer"
-                                        title={c.name}
-                                        className="w-10 h-10 rounded-full border-2 border-[#111] overflow-hidden relative z-0 hover:z-10 transition-transform hover:scale-110 block"
-                                    >
-                                        <img
-                                            src={`https://github.com/${c.login}.png?size=80`}
-                                            alt={c.name}
-                                            className="w-full h-full object-cover bg-white/5"
-                                        />
-                                    </a>
-                                ))}
-                                <div className="w-10 h-10 rounded-full border-2 border-[#111] bg-[#222] flex items-center justify-center text-[10px] text-white font-medium z-0">
-                                    +You
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-
-                    {/* Roadmap Card */}
-                    <div className="group relative bg-[#111] rounded-2xl p-8 border border-white/5 hover:border-white/20 transition-all duration-300 overflow-hidden flex flex-col justify-between h-[340px]">
-                        <div className="absolute top-0 right-0 w-32 h-32 bg-purple-500/10 rounded-full blur-[60px] -mr-16 -mt-16 transition-opacity opacity-0 group-hover:opacity-20"></div>
-
-                        <div className="flex items-center justify-between">
-                            <div className="w-12 h-12 rounded-xl bg-purple-500/10 flex items-center justify-center border border-purple-500/20 group-hover:scale-110 transition-transform">
-                                <Map className="w-5 h-5 text-purple-400" />
-                            </div>
-                            <span className="text-[10px] font-mono text-white/30 border border-white/10 px-2 py-1 rounded bg-white/5">2026</span>
-                        </div>
-
-                        <div>
-                            <h3 className="text-xl font-bold text-white mb-4">Roadmap</h3>
-                            <div className="space-y-3">
-                                <div className="flex items-center gap-3">
-                                    <CheckCircle2 className="w-4 h-4 text-green-500" />
-                                    <span className="text-white/60 text-sm line-through decoration-white/20">Core Renderer</span>
-                                </div>
-                                <div className="flex items-center gap-3">
-                                    <CheckCircle2 className="w-4 h-4 text-green-500" />
-                                    <span className="text-white/60 text-sm line-through decoration-white/20">Flowpilot AI</span>
-                                </div>
-                                <div className="flex items-center gap-3">
-                                    <CircleDashed className="w-4 h-4 text-purple-400 animate-spin-slow" />
-                                    <span className="text-white text-sm font-medium">PDF Export</span>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
+            <div className="mt-4">
+              <p className="text-white/90 text-sm leading-relaxed mb-6 italic">
+                &ldquo;The clean interface looks great and dragging and dropping nodes offers a very
+                pleasant experience. The attention to detail in the design really makes a
+                difference. And the best part is that it is open-source and completely free. Wow!&rdquo;
+              </p>
 
+              <div className="flex items-center gap-3">
+                <div className="w-10 h-10 rounded-full bg-gradient-to-tr from-amber-500 to-orange-400 flex items-center justify-center text-white font-bold text-xs ring-2 ring-white/10">
+                  EA
+                </div>
+                <div>
+                  <h4 className="text-sm font-bold text-white tracking-tight">Early Adopter</h4>
+                  <p className="text-[10px] text-white/40 font-mono uppercase tracking-wider">
+                    Senior Engineer
+                  </p>
                 </div>
+              </div>
             </div>
-        </section>
-    );
+          </div>
+        </div>
+      </div>
+    </section>
+  );
 }
diff --git a/web/src/components/landing/UseCases.tsx b/web/src/components/landing/UseCases.tsx
index 1594336..2fb910a 100644
--- a/web/src/components/landing/UseCases.tsx
+++ b/web/src/components/landing/UseCases.tsx
@@ -8,19 +8,19 @@ import {
 
 export function UseCases(): React.ReactElement {
     return (
-        <section id="workflows" className="py-32 bg-[#050505] relative overflow-hidden text-white selection:bg-brand-blue/30 border-t border-white/5">
+        <section id="use-cases" className="py-32 bg-[#08090A] relative overflow-hidden text-white border-t border-white/5">
 
             {/* Subtle Background Mesh */}
-            <div className="absolute inset-0 bg-[linear-gradient(to_right,#ffffff03_1px,transparent_1px),linear-gradient(to_bottom,#ffffff03_1px,transparent_1px)] bg-[size:40px_40px] opacity-20 pointer-events-none"></div>
+            <div className="absolute inset-0 bg-[linear-gradient(to_right,#ffffff05_1px,transparent_1px),linear-gradient(to_bottom,#ffffff05_1px,transparent_1px)] bg-[size:40px_40px] opacity-40 pointer-events-none"></div>
 
             {/* Ambient Glows */}
-            <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[800px] h-[500px] bg-brand-blue/5 rounded-full blur-[120px] pointer-events-none"></div>
+            <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[800px] h-[500px] bg-brand-blue/10 rounded-full blur-[120px] pointer-events-none"></div>
 
             <div className="container mx-auto px-6 relative z-10">
 
                 {/* Header */}
                 <div className="flex flex-col items-center text-center mb-24 max-w-4xl mx-auto">
-                    <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/5 border border-white/10 text-white/60 mb-8 font-mono text-[10px] uppercase tracking-widest font-bold">
+                    <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/5 border border-white/10 text-white/50 mb-8 font-mono text-[10px] uppercase tracking-widest font-bold shadow-sm">
                         <Workflow className="w-3 h-3" />
                         <span>Workflows</span>
                     </div>
@@ -37,25 +37,25 @@ export function UseCases(): React.ReactElement {
                 <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 md:gap-8">
 
                     {/* Persona 1: Engineering (Cyan/Blue Theme) */}
-                    <div className="group relative bg-[#0A0A0A] rounded-[2rem] border border-white/5 overflow-hidden flex flex-col hover:border-cyan-500/30 transition-all duration-500 hover:shadow-[0_0_50px_-12px_rgba(6,182,212,0.15)]">
-                        <div className="absolute inset-0 bg-gradient-to-b from-cyan-500/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
+                    <div className="group relative bg-[#111] rounded-[var(--radius-3xl)] border border-white/5 overflow-hidden flex flex-col hover:border-cyan-500/50 transition-all duration-500 hover:shadow-[0_24px_70px_-30px_rgba(6,182,212,0.15)] ring-1 ring-white/5">
+                        <div className="absolute inset-0 bg-gradient-to-b from-cyan-500/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
 
                         <div className="p-8 relative z-10 flex-1">
-                            <div className="w-12 h-12 rounded-xl bg-cyan-950/30 flex items-center justify-center border border-cyan-500/20 text-cyan-400 mb-6 group-hover:scale-110 transition-transform">
+                            <div className="w-12 h-12 rounded-xl bg-cyan-500/10 flex items-center justify-center border border-cyan-500/20 text-cyan-400 mb-6 group-hover:scale-110 transition-transform">
                                 <Terminal className="w-6 h-6" />
                             </div>
                             <h3 className="text-2xl font-bold text-white mb-2">Engineering</h3>
                             <p className="text-sm text-cyan-400 font-mono mb-4">DIAGRAM AS CODE</p>
-                            <p className="text-neutral-400 text-sm leading-relaxed mb-8">
+                            <p className="text-white/60 text-sm leading-relaxed mb-8">
                                 Write diagrams in our DSL or Mermaid.js syntax. Paste code, get a fully laid-out diagram. Export as JSON to version control.
                             </p>
 
                             {/* Visual: Mini Code Editor */}
-                            <div className="bg-[#050505] rounded-xl border border-white/10 p-4 font-mono text-[10px] text-gray-500 leading-relaxed shadow-inner">
+                            <div className="bg-[#0f172a] rounded-xl border border-slate-800 p-4 font-mono text-[10px] text-slate-400 leading-relaxed shadow-inner">
                                 <div className="flex items-center gap-2 border-b border-white/5 pb-2 mb-2">
-                                    <div className="w-2 h-2 rounded-full bg-red-500/20"></div>
-                                    <div className="w-2 h-2 rounded-full bg-yellow-500/20"></div>
-                                    <div className="w-2 h-2 rounded-full bg-green-500/20"></div>
+                                    <div className="w-2 h-2 rounded-full bg-red-500/30"></div>
+                                    <div className="w-2 h-2 rounded-full bg-yellow-500/30"></div>
+                                    <div className="w-2 h-2 rounded-full bg-green-500/30"></div>
                                     <div className="ml-auto text-xs text-white/20">architecture.dsl</div>
                                 </div>
                                 <div><span className="text-cyan-300">Auth Service</span></div>
@@ -67,24 +67,24 @@ export function UseCases(): React.ReactElement {
                     </div>
 
                     {/* Persona 2: Design (Violet/Purple Theme) */}
-                    <div className="group relative bg-[#0A0A0A] rounded-[2rem] border border-white/5 overflow-hidden flex flex-col hover:border-violet-500/30 transition-all duration-500 hover:shadow-[0_0_50px_-12px_rgba(139,92,246,0.15)]">
-                        <div className="absolute inset-0 bg-gradient-to-b from-violet-500/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
+                    <div className="group relative bg-[#111] rounded-[var(--radius-3xl)] border border-white/5 overflow-hidden flex flex-col hover:border-violet-500/50 transition-all duration-500 hover:shadow-[0_24px_70px_-30px_rgba(139,92,246,0.15)] ring-1 ring-white/5">
+                        <div className="absolute inset-0 bg-gradient-to-b from-violet-500/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
 
                         <div className="p-8 relative z-10 flex-1">
-                            <div className="w-12 h-12 rounded-xl bg-violet-950/30 flex items-center justify-center border border-violet-500/20 text-violet-400 mb-6 group-hover:scale-110 transition-transform">
+                            <div className="w-12 h-12 rounded-xl bg-violet-500/10 flex items-center justify-center border border-violet-500/20 text-violet-400 mb-6 group-hover:scale-110 transition-transform">
                                 <Figma className="w-6 h-6" />
                             </div>
                             <h3 className="text-2xl font-bold text-white mb-2">Design</h3>
                             <p className="text-sm text-violet-400 font-mono mb-4">THE VISUAL LAYER</p>
-                            <p className="text-neutral-400 text-sm leading-relaxed mb-8">
+                            <p className="text-white/60 text-sm leading-relaxed mb-8">
                                 Stop rebuilding screens. Copy from the canvas and paste into Figma as editable SVG and text layers.
                             </p>
 
                             {/* Visual: Figma Canvas */}
-                            <div className="h-[140px] bg-[#1e1e1e] rounded-xl border border-white/10 relative overflow-hidden flex items-center justify-center">
-                                <div className="absolute inset-0 bg-[radial-gradient(#ffffff05_1px,transparent_1px)] [background-size:12px_12px]"></div>
+                            <div className="h-[140px] bg-[#18181b] rounded-xl border border-white/5 relative overflow-hidden flex items-center justify-center">
+                                <div className="absolute inset-0 bg-[radial-gradient(#ffffff08_1px,transparent_1px)] [background-size:12px_12px]"></div>
 
-                                <div className="bg-[#0A0A0A] border border-violet-500/50 rounded p-3 w-32 shadow-2xl relative transform group-hover:-translate-y-1 transition-transform">
+                                <div className="bg-[#222] border border-white/10 rounded p-3 w-32 shadow-xl relative transform group-hover:-translate-y-1 transition-transform">
                                     <div className="absolute -top-3 left-0 bg-violet-500 text-white text-[8px] px-1.5 py-0.5 rounded">Group 1</div>
                                     <div className="flex gap-2 mb-2">
                                         <div className="w-6 h-6 rounded bg-violet-500/20"></div>
@@ -95,39 +95,39 @@ export function UseCases(): React.ReactElement {
                                     </div>
                                 </div>
                                 {/* Cursor */}
-                                <svg className="w-4 h-4 text-white fill-white absolute bottom-4 right-10 drop-shadow-lg" viewBox="0 0 24 24"><path d="M3 3l7.07 16.97 2.51-7.39 7.39-2.51L3 3z" /></svg>
+                                <svg className="w-4 h-4 text-white/80 fill-white/80 absolute bottom-4 right-10 drop-shadow-lg" viewBox="0 0 24 24"><path d="M3 3l7.07 16.97 2.51-7.39 7.39-2.51L3 3z" /></svg>
                             </div>
                         </div>
                     </div>
 
                     {/* Persona 3: Export & Share (Amber/Orange Theme) */}
-                    <div className="group relative bg-[#0A0A0A] rounded-[2rem] border border-white/5 overflow-hidden flex flex-col hover:border-amber-500/30 transition-all duration-500 hover:shadow-[0_0_50px_-12px_rgba(245,158,11,0.15)]">
-                        <div className="absolute inset-0 bg-gradient-to-b from-amber-500/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
+                    <div className="group relative bg-[#111] rounded-[var(--radius-3xl)] border border-white/5 overflow-hidden flex flex-col hover:border-amber-500/50 transition-all duration-500 hover:shadow-[0_24px_70px_-30px_rgba(245,158,11,0.15)] ring-1 ring-white/5">
+                        <div className="absolute inset-0 bg-gradient-to-b from-amber-500/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
 
                         <div className="p-8 relative z-10 flex-1">
-                            <div className="w-12 h-12 rounded-xl bg-amber-950/30 flex items-center justify-center border border-amber-500/20 text-amber-400 mb-6 group-hover:scale-110 transition-transform">
+                            <div className="w-12 h-12 rounded-xl bg-amber-500/10 flex items-center justify-center border border-amber-500/20 text-amber-400 mb-6 group-hover:scale-110 transition-transform">
                                 <Share2 className="w-6 h-6" />
                             </div>
                             <h3 className="text-2xl font-bold text-white mb-2">Export &amp; Share</h3>
                             <p className="text-sm text-amber-400 font-mono mb-4">PIXEL-PERFECT OUTPUT</p>
-                            <p className="text-neutral-400 text-sm leading-relaxed mb-8">
-                                Export diagrams as SVG, PNG, or PDF. Copy to clipboard and paste into Figma with editable layers. Save as JSON to share or version control.
+                            <p className="text-white/60 text-sm leading-relaxed mb-8">
+                                Export diagrams as SVG, PNG, or JSON. Copy to clipboard and paste into Figma with editable layers. Save as JSON to share or version control.
                             </p>
 
                             {/* Visual: Export Formats */}
-                            <div className="h-[140px] bg-[#151515] rounded-xl border border-white/10 p-4 relative overflow-hidden flex flex-col justify-center">
+                            <div className="h-[140px] bg-[#1a1a1a] rounded-xl border border-white/5 p-4 relative overflow-hidden flex flex-col justify-center">
                                 <div className="space-y-2.5">
-                                    <div className="flex items-center gap-3 p-2 bg-white/5 rounded border border-white/5 group-hover:border-amber-500/20 transition-colors">
+                                    <div className="flex items-center gap-3 p-2 bg-[#2a2a2a] rounded border border-white/10 group-hover:border-amber-500/50 transition-colors">
                                         <div className="w-6 h-6 bg-amber-500/10 rounded flex items-center justify-center text-[9px] text-amber-400 font-bold">SVG</div>
-                                        <div className="text-[10px] text-white/60 font-mono">Vector &#x2022; Editable in Figma</div>
+                                        <div className="text-[10px] text-white/40 font-mono">Vector &#x2022; Editable in Figma</div>
                                     </div>
-                                    <div className="flex items-center gap-3 p-2 bg-white/5 rounded border border-white/5 group-hover:border-amber-500/20 transition-colors">
+                                    <div className="flex items-center gap-3 p-2 bg-[#2a2a2a] rounded border border-white/10 group-hover:border-amber-500/50 transition-colors">
                                         <div className="w-6 h-6 bg-amber-500/10 rounded flex items-center justify-center text-[9px] text-amber-400 font-bold">PNG</div>
-                                        <div className="text-[10px] text-white/60 font-mono">Raster &#x2022; High-res export</div>
+                                        <div className="text-[10px] text-white/40 font-mono">Raster &#x2022; High-res export</div>
                                     </div>
-                                    <div className="flex items-center gap-3 p-2 bg-white/5 rounded border border-white/5 group-hover:border-amber-500/20 transition-colors">
+                                    <div className="flex items-center gap-3 p-2 bg-[#2a2a2a] rounded border border-white/10 group-hover:border-amber-500/50 transition-colors">
                                         <div className="w-6 h-6 bg-amber-500/10 rounded flex items-center justify-center text-[9px] text-amber-400 font-bold">JSON</div>
-                                        <div className="text-[10px] text-white/60 font-mono">Data &#x2022; Save &amp; restore flows</div>
+                                        <div className="text-[10px] text-white/40 font-mono">Data &#x2022; Save &amp; restore flows</div>
                                     </div>
                                 </div>
                             </div>
diff --git a/web/src/components/landing/constants.ts b/web/src/components/landing/constants.ts
new file mode 100644
index 0000000..d6152ba
--- /dev/null
+++ b/web/src/components/landing/constants.ts
@@ -0,0 +1,31 @@
+export const APP_URL = 'https://app.openflowkit.com';
+export const DOCS_URL = 'https://docs.openflowkit.com';
+export const ROADMAP_URL = 'https://docs.openflowkit.com/roadmap';
+export const GITHUB_REPO_URL = 'https://github.com/Vrun-design/openflowkit';
+export const GITHUB_REPO_API_URL = 'https://api.github.com/repos/Vrun-design/openflowkit';
+export const GITHUB_REPO_SLUG = 'Vrun-design/openflowkit';
+
+export const NAV_LINKS = [
+  { name: 'Features', href: '#architecture' },
+  { name: 'How It Works', href: '#how-it-works' },
+  { name: 'Figma', href: '#figma' },
+  { name: 'Use Cases', href: '#use-cases' },
+  { name: 'Pricing', href: '#pricing' },
+] as const;
+
+export const PRICING_FEATURES = [
+  'Unlimited diagrams & projects',
+  'Save locally, your data stays on your device',
+  'White-Label Branding',
+  'One-click auto-layout',
+  'Export to SVG, PNG, JPG',
+  'Figma Export',
+  'Mermaid.js Support',
+  'AI diagram generation (bring your own API key)',
+] as const;
+
+export const LANDING_CONTRIBUTORS = [
+  { login: 'Vrun-design', name: 'Varun' },
+  { login: 'YunusEmreAlps', name: 'Yunus Emre' },
+  { login: 'namandhakad712', name: 'Naman Dhakad' },
+] as const;
diff --git a/web/src/components/landing/useGithubStars.ts b/web/src/components/landing/useGithubStars.ts
new file mode 100644
index 0000000..ac924b6
--- /dev/null
+++ b/web/src/components/landing/useGithubStars.ts
@@ -0,0 +1,52 @@
+import { useEffect, useState } from 'react';
+import { GITHUB_REPO_API_URL } from './constants';
+
+let cachedStars: number | null = null;
+let starsRequest: Promise<number | null> | null = null;
+
+function fetchGithubStars(): Promise<number | null> {
+  if (cachedStars !== null) {
+    return Promise.resolve(cachedStars);
+  }
+
+  if (starsRequest !== null) {
+    return starsRequest;
+  }
+
+  starsRequest = fetch(GITHUB_REPO_API_URL)
+    .then((response) => response.json())
+    .then((data) => {
+      if (typeof data.stargazers_count === 'number') {
+        cachedStars = data.stargazers_count;
+        return cachedStars;
+      }
+
+      return null;
+    })
+    .catch(() => null)
+    .finally(() => {
+      starsRequest = null;
+    });
+
+  return starsRequest;
+}
+
+export function useGithubStars(): number | null {
+  const [stars, setStars] = useState<number | null>(cachedStars);
+
+  useEffect(() => {
+    let isMounted = true;
+
+    fetchGithubStars().then((nextStars) => {
+      if (isMounted) {
+        setStars(nextStars);
+      }
+    });
+
+    return () => {
+      isMounted = false;
+    };
+  }, []);
+
+  return stars;
+}
diff --git a/web/src/pages/index.astro b/web/src/pages/index.astro
index 97f2c36..7386827 100644
--- a/web/src/pages/index.astro
+++ b/web/src/pages/index.astro
@@ -4,8 +4,8 @@ import { LandingPage } from '../components/landing/LandingPage';
 ---
 
 <Layout
-  title="OpenFlowKit — Local-First AI Diagramming"
-  description="100% free, open-source diagram tool for builders. Write code or drag and drop — get beautiful results either way."
+  title="OpenFlowKit — Free, Open-Source AI Diagramming Tool"
+  description="Create beautiful flowcharts, system architecture, and diagrams with AI. Open-source, local-first, no signup — export to Figma, Mermaid, SVG, PNG and more. Free forever."
 >
   <LandingPage client:load />
 </Layout>
diff --git a/web/src/styles/global.css b/web/src/styles/global.css
index 0115c36..f4a8311 100644
--- a/web/src/styles/global.css
+++ b/web/src/styles/global.css
@@ -1,5 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;600&family=Inter:wght@400;500;600;700&family=Outfit:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,700;1,400;1,700&family=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap');
-@import "tailwindcss";
+@import "tailwindcss" source("../");
 
 html {
   scroll-behavior: smooth;
@@ -90,7 +89,7 @@ html {
 
   @keyframes blink {
     50% {
-      border-color: transparent
+      border-color: transparent;
     }
   }
 
@@ -149,9 +148,13 @@ html {
 
   /* Dimensions */
   --brand-radius: 8px;
-  --radius-sm: max(2px, calc(var(--brand-radius) - 3px));
+  --radius-xs: 4px;
+  --radius-sm: 6px;
   --radius-md: var(--brand-radius);
-  --radius-lg: calc(var(--brand-radius) + 4px);
+  --radius-lg: 12px;
+  --radius-xl: 16px;
+  --radius-2xl: 24px;
+  --radius-3xl: 32px;
   --brand-border-width: 1px;
 
   /* Typography */