diff --git a/.gitignore b/.gitignore index 6000f54d..a43f4f34 100644 --- a/.gitignore +++ b/.gitignore @@ -35,4 +35,5 @@ CODEBASE_AUDIT_2026-03-02.md Q1_2026_MASTER_PLAN.md docs/en/codebase-audit-*.md docs/en/fix-log.md -docs/en/next-level-roadmap-*.md \ No newline at end of file +docs/en/next-level-roadmap-*.md +docs/internal \ No newline at end of file diff --git a/README.md b/README.md index 264869e2..19e9acd0 100644 --- a/README.md +++ b/README.md @@ -1,496 +1,407 @@
-OpenFlowKit logo +
+ +OpenFlowKit + +
+

OpenFlowKit

-

The open-source diagramming studio for developers and builders.
-Prompt · Import · Edit · Export as animated video · Collaborate — entirely in your browser, no account required.

+

The open-source diagramming workspace engineers actually want to use.

+ +

Create flows from templates, code, structured imports, or AI. Refine them visually, keep them local-first, and export without giving up diagram-as-code or developer workflows.

+ +

- MIT License - GitHub Stars - React 19 - TypeScript 5 - Vite 6 - Vitest - PRs Welcome + MIT License + GitHub Stars + CI + React 19 + TypeScript 5 + Vite 6 + PRs Welcome

+
+

- - OpenFlowKit on Product Hunt - + → Launch the App +   |   + Documentation +   |   + Website +   |   + Issues +   |   + Contribute

-

- → Launch the App -  ·  - Website -  ·  - Documentation -  ·  - Report a Bug -  ·  - Request a Feature -

+
-
+ + ---- +
-## What is OpenFlowKit? + + + + + + + + + +
🏠 Workspace Home
Create · open · import
No forced blank file		🧑‍💻 Code → Diagram
GitHub · SQL · Terraform
K8s · Docker Compose		🤖 AI Generation
9 providers · BYOK
Streaming diff preview		`{}` Diagram as Code
Bidirectional live sync
Git-friendly DSL		🧩 Asset Libraries
Developer · AWS · Azure
GCP · CNCF · Icons		🎬 Cinematic Export
Animated video & GIF
No upload required
-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. +
-**The core loop is simple:** + + OpenFlowKit on Product Hunt + -``` -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? -Every existing tool misses something critical for developers. OpenFlowKit fills those gaps. +Every diagramming tool makes a compromise. OpenFlowKit doesn't. -| 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 | +| Tool | What's missing | +| ----------------------- | ----------------------------------------------------------------------------- | +| **Excalidraw / tldraw** | Freeform whiteboards — no structured diagram types, no DSL, no code imports | +| **Mermaid.js** | Code-only — no visual canvas, no AI, no interactive editor | +| **Draw.io** | Decade-old UX — Limited AI integration, no developer import pipelines | +| **Lucidchart / Miro** | Cloud lock-in — expensive, account required, your data lives on their servers | +| **PlantUML** | Server-dependent rendering — no visual editor, no local-first model | -**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. +OpenFlowKit is the **only MIT-licensed tool** that combines a real workspace home, a professional visual canvas, bidirectional diagram-as-code, AI generation from 9 providers, deterministic and AI-assisted imports, asset libraries for technical diagrams, and cinematic animated export — with zero server-side storage. --- -## ✨ Spotlight: Cinematic Export - -

-Turn a finished diagram into a polished animated walkthrough without leaving the editor. -

- -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. +## Feature highlights + +| | OpenFlowKit | Excalidraw | Draw.io | Mermaid | Lucidchart | +| ------------------------------- | :---------: | :--------: | :-----: | :-----: | :--------: | +| Visual canvas editor | ✅ | ✅ | ✅ | ❌ | ✅ | +| Bidirectional diagram-as-code | ✅ | ❌ | ❌ | ✅ | ❌ | +| AI generation (9 providers) | ✅ | ❌ | ❌ | ❌ | Limited | +| GitHub repo → diagram | ✅ | ❌ | ❌ | ❌ | ❌ | +| SQL → ERD (native parser) | ✅ | ❌ | ❌ | ❌ | ❌ | +| Terraform / K8s / Docker import | ✅ | ❌ | ❌ | ❌ | ❌ | +| AWS / Azure / GCP / CNCF icons | ✅ | ❌ | ✅ | Partial | ✅ | +| Real-time collaboration (P2P) | ✅ | ✅ | ❌ | ❌ | ✅ (cloud) | +| Cinematic animated export | ✅ | ❌ | ❌ | ❌ | ❌ | +| Figma export (editable SVG) | ✅ | ❌ | ❌ | ❌ | ❌ | +| No account required | ✅ | ✅ | ✅ | ✅ | ❌ | +| Open source (MIT) | ✅ | ✅ | ✅ | ✅ | ❌ | --- -## Features +## Code → Diagram -### 🤖 Flowpilot — AI Generation & Editing +Drop in your existing artifacts. Many formats are handled by **deterministic native parsers** that run entirely in your browser. AI-powered imports help when the source needs interpretation or when you want a richer first-pass architecture draft. -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. +**Native parsers (no API key needed):** -**9 supported AI providers:** - -| 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…) | +```sql +CREATE TABLE orders ( + id BIGINT PRIMARY KEY, + user_id BIGINT NOT NULL REFERENCES users(id), + status ENUM('pending','paid','shipped') NOT NULL +); +``` -**Flowpilot capabilities:** +→ Typed ERD with inferred foreign-key edges and cardinalities. Rendered in milliseconds, no server involved. -- ✦ 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 +```yaml +# docker-compose.yml +services: + api: + depends_on: [postgres, redis] + postgres: + image: postgres:16 + redis: + image: redis:alpine +``` ---- +→ Service architecture with `depends_on` edges and port labels. -### 📥 Developer Import Pipelines +**AI-powered imports (API key required):** -Feed any structured artifact into OpenFlowKit and get a ready-to-edit diagram: +``` +github.com/vercel/next.js → architecture diagram +``` -| 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 | +→ Fetches the repo, analyzes code structure and dependencies, then generates an editable architecture diagram via AI. Quality depends on the model chosen. -File upload with automatic language detection, or paste raw text. +| Source | Engine | API key? | +| ------------------------- | -------------------------- | :------: | +| GitHub repo URL | AI · 9 languages supported | Yes | +| SQL DDL | **Native parser** | **No** | +| Terraform `.tfstate` | **Native parser** | **No** | +| Terraform HCL | AI-assisted | Yes | +| Kubernetes YAML / Helm | **Native parser** | **No** | +| Docker Compose | **Native parser** | **No** | +| OpenAPI / Swagger spec | AI-assisted | Yes | +| Source code (single file) | AI-assisted · 9 languages | Yes | +| Mermaid | **Native parser** | **No** | --- -### 📐 8 Structured Diagram Types +## Home first, editor second -| 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 | — | +OpenFlowKit now treats the product as two clear surfaces: ---- +- **Home** for creating, opening, duplicating, importing, and organizing flows +- **Editor** for actual canvas work once a real document exists -### 📤 Export Everywhere +That means the app does not create a fake default flow just to get you onto the canvas. If you delete everything, your workspace can stay empty until you intentionally create the next flow. -**🖼 Images:** SVG · PNG (transparent, hi-res) · JPG · PDF +--- -**🎬 Animation & Video** *(unique to OpenFlowKit)* +## Flowpilot — AI generation with any model -| Format | Description | -|---|---| -| 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 | +Flowpilot sits directly in the editor. Describe a system, paste source code, upload a screenshot, or ask it to refine what's already on the canvas. Your API key is stored in your browser and sent directly to the provider — OpenFlowKit's servers never see it. -**`{}` Code & Data:** JSON · OpenFlow DSL · Mermaid · PlantUML +**9 providers. Bring your own key. Switch any time.** -**🎨 Design Handoff:** Paste directly into **Figma** as editable SVG with intact text layers +| Provider | Default model | Why use it | +| ------------------- | -------------------------------- | ----------------------------------------------- | +| Google Gemini | `gemini-2.5-flash-lite` | Free tier available, fast, browser-safe | +| OpenAI | `gpt-5-mini` | Best reasoning for complex architectures | +| Anthropic Claude | `claude-sonnet-4-6` | Excellent code and system understanding | +| Groq | `llama-4-scout-17b-16e-instruct` | Fastest inference available | +| Mistral | `mistral-medium-latest` | Strong European privacy-first alternative | +| NVIDIA NIM | `llama-4-scout-17b-16e-instruct` | Enterprise GPU inference | +| Cerebras | `gpt-oss-120b` | Fastest on WSE-3 silicon | +| OpenRouter | `google/gemini-2.5-flash` | Access 100+ models through one key | +| **Custom endpoint** | Any model | Ollama, LM Studio, or any OpenAI-compatible API | -**🔗 Sharing:** Read-only viewer link — diagram encoded in the URL, zero server required +No proxy. No middleman. Direct browser-to-provider requests. --- -### `{}` OpenFlow DSL — Diagram as Code +## 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. +Every diagram has a live code panel. Edit the canvas → code updates. Edit the code → canvas updates. Two-way, always in sync. -```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 +``` +flowchart TB + client[React App] --> gateway[API Gateway] + gateway --> auth[Auth Service] + gateway --> orders[Orders Service] + orders --> db[(PostgreSQL)] + orders --> cache[(Redis)] + auth --> 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. +- Mermaid-compatible syntax +- Export to Mermaid, PlantUML, or JSON +- Paste any Mermaid diagram and it renders immediately +- Version snapshots — restore any previous state --- -### 🎬 Playback & Presentation +## Structured diagram families -OpenFlowKit includes presentation-oriented animated export for sharing a diagram as motion instead of a single static frame. +Not a freeform whiteboard. Structured diagram types with opinionated defaults, correct relationship semantics, and purpose-built node styles. -- **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 +- **🔷 Flowcharts** — processes, decision trees, system flows +- **☁️ Architecture** — AWS / Azure / GCP / CNCF cloud provider icons built in +- **🗄️ Entity-Relationship** — typed fields, FK edges, one-to-many / many-to-many notation +- **📐 Class diagrams** — UML with inheritance, composition, and interface relationships +- **↔️ Sequence diagrams** — async messages, actors, and lifelines +- **🧠 Mind maps** — collapsible radial trees with auto-layout +- **🛤️ User journeys** — steps, phases, and sentiment scoring +- **⚙️ State machines** — transitions, guards, entry and exit actions --- -### 📦 20 Built-in Templates - -One-click starters across 7 categories, fully searchable. - -
-View all templates - -**Flowchart** -- Subscription Upgrade Workflow -- Incident Escalation Runbook -- CI/CD Release Train -- Payment Recovery Loop -- AI Support Escalation +## Editor workflow built for technical diagrams -**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 +OpenFlowKit works best when you move between the right surfaces instead of forcing everything through one panel: -**Azure** -- Azure AI Application Platform -- Azure Landing Zone Operations -- Azure Data Estate -- Azure Identity Access Hub +- **Toolbar add menu** for quick insert actions +- **Command Center** for templates, import, assets, search, layout, pages, layers, and design systems +- **Studio** for Flowpilot, Mermaid, OpenFlow DSL, infra parsing, and linting +- **Properties panel** for exact visual and metadata edits -**CNCF** -- CNCF GitOps Platform -- CNCF Service Mesh Security -- CNCF Observability Stack - -**Mindmap · Journey · Wireframe** -- Product Discovery Mindmap -- Engineering Strategy Mindmap -- Customer Onboarding Journey -- Cross-Platform SaaS Starter Wireframe - -
+Large diagrams also get better organization with multi-page documents, layers, sections, and local-first document recovery. --- -### 🔀 Smart Auto-Layout +## Export everywhere -One-click ELK.js layout with four presets: +Build your diagram once. Take it anywhere. -| Preset | Algorithm | Best for | -|---|---|---| -| 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 | +- **PNG / SVG** — transparent background, pixel-perfect at any resolution +- **PDF** — print-ready, vector-crisp +- **Mermaid** — paste directly into GitHub READMEs, Notion, Confluence, Linear +- **PlantUML** — for enterprise toolchains and legacy integrations +- **Figma** — full editable SVG import with preserved layers +- **JSON** — complete round-trip import/export, no data loss +- **🎬 Cinematic MP4** — an animated walkthrough of your diagram, node by node, edge by edge. Designed for demos, presentations, and architecture reviews. No other open-source diagramming tool does this. --- -### 👥 Real-Time Collaboration *(beta)* +## Real-time collaboration — local-first by default -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. +Local-first stays the default. Your saved flows live in the browser, your AI keys stay on your device, and export is explicit. When you do want to work together, OpenFlowKit supports P2P collaboration over WebRTC with live presence and shared editing, without making a hosted backend mandatory for solo work. --- -### ⌨️ 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 | -| `Escape` | Clear selection | -| `Cmd+Alt+C` / `Cmd+Alt+V` | Copy / Paste style | +## Canvas built for keyboard-first developers ---- +| Shortcut | Action | +| ---------------- | ---------------------------------------------------- | +| `⌘ K` / `Ctrl K` | Command bar — search, import, layout, assets, and actions | +| `⌘ \` / `Ctrl \` | Toggle the live code panel | +| `⌘ Z` / `Ctrl Z` | Full undo with complete history | +| `⌘ D` / `Ctrl D` | Duplicate selection | +| `⌘ G` / `Ctrl G` | Group selected nodes | +| `⌘ /` / `Ctrl /` | Keyboard shortcuts reference | -### 🌐 Internationalization - -Available in 7 languages: **English · German · Spanish · French · Japanese · Turkish · Chinese** +Plus: smart alignment guides, snap-to-grid, multi-select, pages, layers, sections, architecture lint, light/dark/system theme, and full i18n in 7 languages. --- -### 🔒 Privacy & Security +## What we are improving next -- **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. +Current roadmap focus: ---- - -## 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 | +- better layers and page workflows for larger technical diagrams +- stronger code and structured-import diagram quality +- smarter auto-layout defaults with less cleanup after import +- performance boosts for bigger canvases and heavier sessions +- continued docs and onboarding cleanup so the product surfaces stay easier to understand --- -## Getting Started - -### Prerequisites - -- **Node.js** ≥ 18 -- **npm** ≥ 9 - -### Run locally in 30 seconds +## Get started in 30 seconds ```bash git clone https://github.com/Vrun-design/openflowkit.git cd openflowkit npm install npm run dev -# → http://localhost:5173 ``` -### Add an AI provider +Open [http://localhost:5173](http://localhost:5173). Done. -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. +> **Zero environment variables required.** AI provider keys are configured in the in-app settings panel at runtime — nothing goes in `.env`. --- -## Commands +## Self-host -### Development +OpenFlowKit is a pure static SPA. There is no backend. Deploy the `dist/` folder anywhere that serves HTML. -```bash -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 -``` - -### Focused test suites +**Cloudflare Pages / Netlify / Vercel:** ```bash -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 +npm run build +# upload dist/ to your provider ``` -### E2E +**Docker:** ```bash -npm run e2e # Full Playwright suite -npm run e2e:ci # Chromium only (CI mode) +docker build -t openflowkit . +docker run -p 8080:80 openflowkit ``` -### Workspaces +No database. No secrets. No infrastructure. One folder. -```bash -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 -``` +## Tech stack + +| Layer | Technology | +| ------------- | ----------------------------------- | +| Framework | React 19 + TypeScript 5 | +| Build | Vite 6 | +| Canvas | React Flow (XYFlow) | +| Auto-layout | ELK.js | +| State | Zustand | +| Storage | IndexedDB — local-first, no backend | +| Styling | Tailwind CSS | +| Collaboration | WebRTC (P2P, no relay server) | +| i18n | react-i18next — 7 languages | +| Testing | Vitest + Playwright | --- -## Project Structure - -``` -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 -``` +## Contributing -### Editor architecture +All contributions are welcome — bug fixes, new diagram types, parser improvements, translations, and documentation. -The editor follows a strict four-layer composition model that separates concerns cleanly: +Start here: -``` -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 +```bash +npm run dev # development server at localhost:5173 +npm run test # unit tests via Vitest +npm run test:e2e # end-to-end tests via Playwright +npm run lint # ESLint + TypeScript type-check ``` -Domain services own logic. Hooks compose state and side effects. Components render and delegate. See [ARCHITECTURE.md](ARCHITECTURE.md) for the full breakdown. +**Good first issues** are tagged [`good first issue`](https://github.com/Vrun-design/openflowkit/labels/good%20first%20issue). Before opening a PR, please read [CONTRIBUTING.md](CONTRIBUTING.md). --- -## Deployment - -| 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/` | - -All three surfaces deploy to Cloudflare Pages. See [`docs/cloudflare-pages-setup.md`](docs/cloudflare-pages-setup.md). - ---- +
-## 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** is [MIT licensed](LICENSE), locally hosted, and built in the open.
+No cloud required. No account required. No lock-in. -**Key constraints to know before contributing:** +
-| Constraint | Why it matters | -|---|---| -| **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 | +| | | | | +| :----------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------: | :------------------------------------: | :------------------------------------------------------------------: | +| [**→ Launch App**](https://app.openflowkit.com) | [**Docs**](https://docs.openflowkit.com) | [**Website**](https://openflowkit.com) | [**Changelog**](https://github.com/Vrun-design/openflowkit/releases) | +| [Bug Report](https://github.com/Vrun-design/openflowkit/issues/new?template=bug_report.md) | [Feature Request](https://github.com/Vrun-design/openflowkit/issues/new?template=feature_request.md) | [Contributing Guide](CONTRIBUTING.md) | [Security Policy](SECURITY.md) | -### 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 -``` +--- -Pre-commit hooks run `lint-staged` → ESLint on all changed `.ts`/`.tsx` files. Fix all errors before pushing. +
---- +**[If OpenFlowKit saves you time, the most impactful thing you can do is give it a star.](https://github.com/Vrun-design/openflowkit/stargazers)**
+**[It helps other developers find the project.](https://github.com/Vrun-design/openflowkit/stargazers)** -## License +
-[MIT](LICENSE) — free to use, modify, and redistribute. No strings attached. +[![Star OpenFlowKit on GitHub](https://img.shields.io/github/stars/Vrun-design/openflowkit?style=for-the-badge&logo=github&color=facc15&label=Star%20on%20GitHub)](https://github.com/Vrun-design/openflowkit/stargazers) ---- +
-
+[![Star History Chart](https://api.star-history.com/svg?repos=Vrun-design/openflowkit&type=Date)](https://star-history.com/#Vrun-design/openflowkit&Date) -### 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) + +React 19  ·  TypeScript 5  ·  Vite 6  ·  XYFlow  ·  ELK.js  ·  Zustand  ·  Yjs  ·  Framer Motion  ·  Tailwind CSS  ·  Cloudflare Pages + -**[→ Launch the App](https://app.openflowkit.com)**  ·  **[Read the Docs](https://docs.openflowkit.com)**  ·  **[Contribute](CONTRIBUTING.md)**  ·  **[Report a Bug](https://github.com/Vrun-design/openflowkit/issues)** +
-React 19 · TypeScript 5 · Vite 6 · ELK.js · Yjs · Cloudflare Pages + +MIT Licensed  ·  Local-first  ·  No telemetry  ·  No account  ·  No server-side storage  ·  No lock-in + -MIT Licensed · Local-first · No telemetry · No account required · No lock-in +
diff --git a/_headers b/_headers index 6ff62092..76aad559 100644 --- a/_headers +++ b/_headers @@ -3,7 +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'; + Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; connect-src 'self' https://*.openai.com https://*.anthropic.com https://*.googleapis.com https://api.groq.com https://*.mistral.ai https://*.cerebras.ai https://openrouter.ai https://*.posthog.com wss://*.openflowkit.com wss://signaling.yjs.dev; 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/assets/third-party-icons/developer/SOURCE.md b/assets/third-party-icons/developer/SOURCE.md new file mode 100644 index 00000000..b7b654a8 --- /dev/null +++ b/assets/third-party-icons/developer/SOURCE.md @@ -0,0 +1,10 @@ +# Developer Icons Source + +- Upstream: `https://github.com/xandemon/developer-icons` +- License: MIT +- Imported from: `/tmp/developer-icons/icons` +- Import script: `node scripts/shape-pack/import-developer-icons.mjs /tmp/developer-icons/icons assets/third-party-icons/developer/processed` + +Notes: +- Icons are grouped into local product-facing categories during import because upstream ships them in a mostly flat directory. +- The original SVG artwork remains attributed to the upstream `developer-icons` project. diff --git a/assets/third-party-icons/developer/processed/Backend/avajs.svg b/assets/third-party-icons/developer/processed/Backend/avajs.svg new file mode 100644 index 00000000..4eee43b9 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Backend/avajs.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Backend/bunjs.svg b/assets/third-party-icons/developer/processed/Backend/bunjs.svg new file mode 100644 index 00000000..74bf6069 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Backend/bunjs.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Backend/convex.svg b/assets/third-party-icons/developer/processed/Backend/convex.svg new file mode 100644 index 00000000..94def82d --- /dev/null +++ b/assets/third-party-icons/developer/processed/Backend/convex.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Backend/deno-fresh.svg b/assets/third-party-icons/developer/processed/Backend/deno-fresh.svg new file mode 100644 index 00000000..16ec60bf --- /dev/null +++ b/assets/third-party-icons/developer/processed/Backend/deno-fresh.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Backend/deno.svg b/assets/third-party-icons/developer/processed/Backend/deno.svg new file mode 100644 index 00000000..81418830 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Backend/deno.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Backend/doctrine.svg b/assets/third-party-icons/developer/processed/Backend/doctrine.svg new file mode 100644 index 00000000..7e1bc0d0 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Backend/doctrine.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Backend/grafbase.svg b/assets/third-party-icons/developer/processed/Backend/grafbase.svg new file mode 100644 index 00000000..12e24d05 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Backend/grafbase.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Backend/graphql.svg b/assets/third-party-icons/developer/processed/Backend/graphql.svg new file mode 100644 index 00000000..cc7867f9 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Backend/graphql.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Backend/i18next.svg b/assets/third-party-icons/developer/processed/Backend/i18next.svg new file mode 100644 index 00000000..caf18cbe --- /dev/null +++ b/assets/third-party-icons/developer/processed/Backend/i18next.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Backend/nestjs.svg b/assets/third-party-icons/developer/processed/Backend/nestjs.svg new file mode 100644 index 00000000..172aff65 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Backend/nestjs.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Backend/nodejs.svg b/assets/third-party-icons/developer/processed/Backend/nodejs.svg new file mode 100644 index 00000000..7eab4ec7 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Backend/nodejs.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Backend/spring.svg b/assets/third-party-icons/developer/processed/Backend/spring.svg new file mode 100644 index 00000000..b312a8e0 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Backend/spring.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Backend/symfony-dark.svg b/assets/third-party-icons/developer/processed/Backend/symfony-dark.svg new file mode 100644 index 00000000..c9478db5 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Backend/symfony-dark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Backend/symfony-light.svg b/assets/third-party-icons/developer/processed/Backend/symfony-light.svg new file mode 100644 index 00000000..cd06aac0 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Backend/symfony-light.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Backend/tRPC.svg b/assets/third-party-icons/developer/processed/Backend/tRPC.svg new file mode 100644 index 00000000..707f1fa8 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Backend/tRPC.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Backend/zod.svg b/assets/third-party-icons/developer/processed/Backend/zod.svg new file mode 100644 index 00000000..329db7fb --- /dev/null +++ b/assets/third-party-icons/developer/processed/Backend/zod.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Browser/chrome.svg b/assets/third-party-icons/developer/processed/Browser/chrome.svg new file mode 100644 index 00000000..c8c5617a --- /dev/null +++ b/assets/third-party-icons/developer/processed/Browser/chrome.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Browser/edge.svg b/assets/third-party-icons/developer/processed/Browser/edge.svg new file mode 100644 index 00000000..9eedb02f --- /dev/null +++ b/assets/third-party-icons/developer/processed/Browser/edge.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Browser/firefox.svg b/assets/third-party-icons/developer/processed/Browser/firefox.svg new file mode 100644 index 00000000..874c62e1 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Browser/firefox.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Browser/safari.svg b/assets/third-party-icons/developer/processed/Browser/safari.svg new file mode 100644 index 00000000..4884ab00 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Browser/safari.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Browser/vivaldi.svg b/assets/third-party-icons/developer/processed/Browser/vivaldi.svg new file mode 100644 index 00000000..6f0b8666 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Browser/vivaldi.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Companies/meta.svg b/assets/third-party-icons/developer/processed/Companies/meta.svg new file mode 100644 index 00000000..be867575 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Companies/meta.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Companies/microsoft.svg b/assets/third-party-icons/developer/processed/Companies/microsoft.svg new file mode 100644 index 00000000..5e0602d0 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Companies/microsoft.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Companies/mozilla.svg b/assets/third-party-icons/developer/processed/Companies/mozilla.svg new file mode 100644 index 00000000..f68d24a2 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Companies/mozilla.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Database/clickhouse.svg b/assets/third-party-icons/developer/processed/Database/clickhouse.svg new file mode 100644 index 00000000..6aade79a --- /dev/null +++ b/assets/third-party-icons/developer/processed/Database/clickhouse.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Database/firebase.svg b/assets/third-party-icons/developer/processed/Database/firebase.svg new file mode 100644 index 00000000..1b4266e6 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Database/firebase.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Database/kibana.svg b/assets/third-party-icons/developer/processed/Database/kibana.svg new file mode 100644 index 00000000..adc25bc4 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Database/kibana.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Database/mariadb.svg b/assets/third-party-icons/developer/processed/Database/mariadb.svg new file mode 100644 index 00000000..4e017e5e --- /dev/null +++ b/assets/third-party-icons/developer/processed/Database/mariadb.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Database/microsoft-sql-server-2.svg b/assets/third-party-icons/developer/processed/Database/microsoft-sql-server-2.svg new file mode 100644 index 00000000..bced6981 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Database/microsoft-sql-server-2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Database/microsoft-sql-server.svg b/assets/third-party-icons/developer/processed/Database/microsoft-sql-server.svg new file mode 100644 index 00000000..d1b09419 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Database/microsoft-sql-server.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Database/mongodb.svg b/assets/third-party-icons/developer/processed/Database/mongodb.svg new file mode 100644 index 00000000..fa40393e --- /dev/null +++ b/assets/third-party-icons/developer/processed/Database/mongodb.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Database/mysql.svg b/assets/third-party-icons/developer/processed/Database/mysql.svg new file mode 100644 index 00000000..34ccaabf --- /dev/null +++ b/assets/third-party-icons/developer/processed/Database/mysql.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Database/oracle.svg b/assets/third-party-icons/developer/processed/Database/oracle.svg new file mode 100644 index 00000000..a2a6a49f --- /dev/null +++ b/assets/third-party-icons/developer/processed/Database/oracle.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Database/postgresql.svg b/assets/third-party-icons/developer/processed/Database/postgresql.svg new file mode 100644 index 00000000..4f67760c --- /dev/null +++ b/assets/third-party-icons/developer/processed/Database/postgresql.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Database/presto.svg b/assets/third-party-icons/developer/processed/Database/presto.svg new file mode 100644 index 00000000..411f8f6f --- /dev/null +++ b/assets/third-party-icons/developer/processed/Database/presto.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Database/redis.svg b/assets/third-party-icons/developer/processed/Database/redis.svg new file mode 100644 index 00000000..45549f5a --- /dev/null +++ b/assets/third-party-icons/developer/processed/Database/redis.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Database/supabase.svg b/assets/third-party-icons/developer/processed/Database/supabase.svg new file mode 100644 index 00000000..7f52de55 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Database/supabase.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Design/figma.svg b/assets/third-party-icons/developer/processed/Design/figma.svg new file mode 100644 index 00000000..a4080928 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Design/figma.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Design/indesign.svg b/assets/third-party-icons/developer/processed/Design/indesign.svg new file mode 100644 index 00000000..c145feb5 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Design/indesign.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Design/miro.svg b/assets/third-party-icons/developer/processed/Design/miro.svg new file mode 100644 index 00000000..0999f0a5 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Design/miro.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Design/photoshop.svg b/assets/third-party-icons/developer/processed/Design/photoshop.svg new file mode 100644 index 00000000..71e3a8fb --- /dev/null +++ b/assets/third-party-icons/developer/processed/Design/photoshop.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Design/sketch.svg b/assets/third-party-icons/developer/processed/Design/sketch.svg new file mode 100644 index 00000000..86cb0525 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Design/sketch.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Design/sketch2.svg b/assets/third-party-icons/developer/processed/Design/sketch2.svg new file mode 100644 index 00000000..fa5c9e23 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Design/sketch2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/DevOps-AI-ML/aws.svg b/assets/third-party-icons/developer/processed/DevOps-AI-ML/aws.svg new file mode 100644 index 00000000..9e2d6370 --- /dev/null +++ b/assets/third-party-icons/developer/processed/DevOps-AI-ML/aws.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/DevOps-AI-ML/bitbucket.svg b/assets/third-party-icons/developer/processed/DevOps-AI-ML/bitbucket.svg new file mode 100644 index 00000000..d4c86129 --- /dev/null +++ b/assets/third-party-icons/developer/processed/DevOps-AI-ML/bitbucket.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/DevOps-AI-ML/cloudflare.svg b/assets/third-party-icons/developer/processed/DevOps-AI-ML/cloudflare.svg new file mode 100644 index 00000000..e6daddde --- /dev/null +++ b/assets/third-party-icons/developer/processed/DevOps-AI-ML/cloudflare.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/DevOps-AI-ML/codefresh.svg b/assets/third-party-icons/developer/processed/DevOps-AI-ML/codefresh.svg new file mode 100644 index 00000000..6ccf81dc --- /dev/null +++ b/assets/third-party-icons/developer/processed/DevOps-AI-ML/codefresh.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/DevOps-AI-ML/copilot.svg b/assets/third-party-icons/developer/processed/DevOps-AI-ML/copilot.svg new file mode 100644 index 00000000..b9e62544 --- /dev/null +++ b/assets/third-party-icons/developer/processed/DevOps-AI-ML/copilot.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/DevOps-AI-ML/cypress.svg b/assets/third-party-icons/developer/processed/DevOps-AI-ML/cypress.svg new file mode 100644 index 00000000..f6c1c803 --- /dev/null +++ b/assets/third-party-icons/developer/processed/DevOps-AI-ML/cypress.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/DevOps-AI-ML/developer-icons.svg b/assets/third-party-icons/developer/processed/DevOps-AI-ML/developer-icons.svg new file mode 100644 index 00000000..c47d7b56 --- /dev/null +++ b/assets/third-party-icons/developer/processed/DevOps-AI-ML/developer-icons.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/DevOps-AI-ML/digitalocean.svg b/assets/third-party-icons/developer/processed/DevOps-AI-ML/digitalocean.svg new file mode 100644 index 00000000..30e2a303 --- /dev/null +++ b/assets/third-party-icons/developer/processed/DevOps-AI-ML/digitalocean.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/DevOps-AI-ML/docker.svg b/assets/third-party-icons/developer/processed/DevOps-AI-ML/docker.svg new file mode 100644 index 00000000..146feebd --- /dev/null +++ b/assets/third-party-icons/developer/processed/DevOps-AI-ML/docker.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/DevOps-AI-ML/ec2.svg b/assets/third-party-icons/developer/processed/DevOps-AI-ML/ec2.svg new file mode 100644 index 00000000..48579c56 --- /dev/null +++ b/assets/third-party-icons/developer/processed/DevOps-AI-ML/ec2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/DevOps-AI-ML/elastic.svg b/assets/third-party-icons/developer/processed/DevOps-AI-ML/elastic.svg new file mode 100644 index 00000000..a651ec6a --- /dev/null +++ b/assets/third-party-icons/developer/processed/DevOps-AI-ML/elastic.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/DevOps-AI-ML/git.svg b/assets/third-party-icons/developer/processed/DevOps-AI-ML/git.svg new file mode 100644 index 00000000..412a5e6c --- /dev/null +++ b/assets/third-party-icons/developer/processed/DevOps-AI-ML/git.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/DevOps-AI-ML/github-copilot.svg b/assets/third-party-icons/developer/processed/DevOps-AI-ML/github-copilot.svg new file mode 100644 index 00000000..2085e87d --- /dev/null +++ b/assets/third-party-icons/developer/processed/DevOps-AI-ML/github-copilot.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/DevOps-AI-ML/github-dark.svg b/assets/third-party-icons/developer/processed/DevOps-AI-ML/github-dark.svg new file mode 100644 index 00000000..f6120247 --- /dev/null +++ b/assets/third-party-icons/developer/processed/DevOps-AI-ML/github-dark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/DevOps-AI-ML/github-light.svg b/assets/third-party-icons/developer/processed/DevOps-AI-ML/github-light.svg new file mode 100644 index 00000000..18a37574 --- /dev/null +++ b/assets/third-party-icons/developer/processed/DevOps-AI-ML/github-light.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/DevOps-AI-ML/gitlab.svg b/assets/third-party-icons/developer/processed/DevOps-AI-ML/gitlab.svg new file mode 100644 index 00000000..f3570511 --- /dev/null +++ b/assets/third-party-icons/developer/processed/DevOps-AI-ML/gitlab.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/DevOps-AI-ML/google-cloud.svg b/assets/third-party-icons/developer/processed/DevOps-AI-ML/google-cloud.svg new file mode 100644 index 00000000..0eb43793 --- /dev/null +++ b/assets/third-party-icons/developer/processed/DevOps-AI-ML/google-cloud.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/DevOps-AI-ML/heroku.svg b/assets/third-party-icons/developer/processed/DevOps-AI-ML/heroku.svg new file mode 100644 index 00000000..fe121e83 --- /dev/null +++ b/assets/third-party-icons/developer/processed/DevOps-AI-ML/heroku.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/DevOps-AI-ML/hugging-face.svg b/assets/third-party-icons/developer/processed/DevOps-AI-ML/hugging-face.svg new file mode 100644 index 00000000..593dcb38 --- /dev/null +++ b/assets/third-party-icons/developer/processed/DevOps-AI-ML/hugging-face.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/DevOps-AI-ML/k6.svg b/assets/third-party-icons/developer/processed/DevOps-AI-ML/k6.svg new file mode 100644 index 00000000..dd548dc5 --- /dev/null +++ b/assets/third-party-icons/developer/processed/DevOps-AI-ML/k6.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/DevOps-AI-ML/kubernetes.svg b/assets/third-party-icons/developer/processed/DevOps-AI-ML/kubernetes.svg new file mode 100644 index 00000000..dab949f8 --- /dev/null +++ b/assets/third-party-icons/developer/processed/DevOps-AI-ML/kubernetes.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/DevOps-AI-ML/linux.svg b/assets/third-party-icons/developer/processed/DevOps-AI-ML/linux.svg new file mode 100644 index 00000000..2b557a63 --- /dev/null +++ b/assets/third-party-icons/developer/processed/DevOps-AI-ML/linux.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/DevOps-AI-ML/netlify.svg b/assets/third-party-icons/developer/processed/DevOps-AI-ML/netlify.svg new file mode 100644 index 00000000..33137ce9 --- /dev/null +++ b/assets/third-party-icons/developer/processed/DevOps-AI-ML/netlify.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/DevOps-AI-ML/netlify2.svg b/assets/third-party-icons/developer/processed/DevOps-AI-ML/netlify2.svg new file mode 100644 index 00000000..8561a4cb --- /dev/null +++ b/assets/third-party-icons/developer/processed/DevOps-AI-ML/netlify2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/DevOps-AI-ML/npm-wordmark.svg b/assets/third-party-icons/developer/processed/DevOps-AI-ML/npm-wordmark.svg new file mode 100644 index 00000000..294b566c --- /dev/null +++ b/assets/third-party-icons/developer/processed/DevOps-AI-ML/npm-wordmark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/DevOps-AI-ML/npm.svg b/assets/third-party-icons/developer/processed/DevOps-AI-ML/npm.svg new file mode 100644 index 00000000..ca416818 --- /dev/null +++ b/assets/third-party-icons/developer/processed/DevOps-AI-ML/npm.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/DevOps-AI-ML/nx.svg b/assets/third-party-icons/developer/processed/DevOps-AI-ML/nx.svg new file mode 100644 index 00000000..83e59227 --- /dev/null +++ b/assets/third-party-icons/developer/processed/DevOps-AI-ML/nx.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/DevOps-AI-ML/openai.svg b/assets/third-party-icons/developer/processed/DevOps-AI-ML/openai.svg new file mode 100644 index 00000000..27667899 --- /dev/null +++ b/assets/third-party-icons/developer/processed/DevOps-AI-ML/openai.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/DevOps-AI-ML/pnpm-dark-wordmark.svg b/assets/third-party-icons/developer/processed/DevOps-AI-ML/pnpm-dark-wordmark.svg new file mode 100644 index 00000000..bee7f851 --- /dev/null +++ b/assets/third-party-icons/developer/processed/DevOps-AI-ML/pnpm-dark-wordmark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/DevOps-AI-ML/pnpm-dark.svg b/assets/third-party-icons/developer/processed/DevOps-AI-ML/pnpm-dark.svg new file mode 100644 index 00000000..89b6d2dc --- /dev/null +++ b/assets/third-party-icons/developer/processed/DevOps-AI-ML/pnpm-dark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/DevOps-AI-ML/pnpm-light-wordmark.svg b/assets/third-party-icons/developer/processed/DevOps-AI-ML/pnpm-light-wordmark.svg new file mode 100644 index 00000000..d7aa41a5 --- /dev/null +++ b/assets/third-party-icons/developer/processed/DevOps-AI-ML/pnpm-light-wordmark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/DevOps-AI-ML/pnpm-light.svg b/assets/third-party-icons/developer/processed/DevOps-AI-ML/pnpm-light.svg new file mode 100644 index 00000000..0157ac2e --- /dev/null +++ b/assets/third-party-icons/developer/processed/DevOps-AI-ML/pnpm-light.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/DevOps-AI-ML/pulumi-dark-wordmark.svg b/assets/third-party-icons/developer/processed/DevOps-AI-ML/pulumi-dark-wordmark.svg new file mode 100644 index 00000000..397c0a18 --- /dev/null +++ b/assets/third-party-icons/developer/processed/DevOps-AI-ML/pulumi-dark-wordmark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/DevOps-AI-ML/pulumi-light-wordmark.svg b/assets/third-party-icons/developer/processed/DevOps-AI-ML/pulumi-light-wordmark.svg new file mode 100644 index 00000000..ee88de22 --- /dev/null +++ b/assets/third-party-icons/developer/processed/DevOps-AI-ML/pulumi-light-wordmark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/DevOps-AI-ML/pulumi.svg b/assets/third-party-icons/developer/processed/DevOps-AI-ML/pulumi.svg new file mode 100644 index 00000000..bcf73bde --- /dev/null +++ b/assets/third-party-icons/developer/processed/DevOps-AI-ML/pulumi.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/DevOps-AI-ML/railway.svg b/assets/third-party-icons/developer/processed/DevOps-AI-ML/railway.svg new file mode 100644 index 00000000..a84e6f3e --- /dev/null +++ b/assets/third-party-icons/developer/processed/DevOps-AI-ML/railway.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/DevOps-AI-ML/tensorflow.svg b/assets/third-party-icons/developer/processed/DevOps-AI-ML/tensorflow.svg new file mode 100644 index 00000000..67f9a5e5 --- /dev/null +++ b/assets/third-party-icons/developer/processed/DevOps-AI-ML/tensorflow.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/DevOps-AI-ML/vercel-dark-wordmark.svg b/assets/third-party-icons/developer/processed/DevOps-AI-ML/vercel-dark-wordmark.svg new file mode 100644 index 00000000..7c2755b7 --- /dev/null +++ b/assets/third-party-icons/developer/processed/DevOps-AI-ML/vercel-dark-wordmark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/DevOps-AI-ML/vercel-dark.svg b/assets/third-party-icons/developer/processed/DevOps-AI-ML/vercel-dark.svg new file mode 100644 index 00000000..eac51d39 --- /dev/null +++ b/assets/third-party-icons/developer/processed/DevOps-AI-ML/vercel-dark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/DevOps-AI-ML/vercel-light-wordmark.svg b/assets/third-party-icons/developer/processed/DevOps-AI-ML/vercel-light-wordmark.svg new file mode 100644 index 00000000..ce47fa2d --- /dev/null +++ b/assets/third-party-icons/developer/processed/DevOps-AI-ML/vercel-light-wordmark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/DevOps-AI-ML/vercel-light.svg b/assets/third-party-icons/developer/processed/DevOps-AI-ML/vercel-light.svg new file mode 100644 index 00000000..cfc1bf4e --- /dev/null +++ b/assets/third-party-icons/developer/processed/DevOps-AI-ML/vercel-light.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/DevOps-AI-ML/vitest.svg b/assets/third-party-icons/developer/processed/DevOps-AI-ML/vitest.svg new file mode 100644 index 00000000..5fc57952 --- /dev/null +++ b/assets/third-party-icons/developer/processed/DevOps-AI-ML/vitest.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Frontend/angular.svg b/assets/third-party-icons/developer/processed/Frontend/angular.svg new file mode 100644 index 00000000..ecde8c36 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Frontend/angular.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Frontend/astro.svg b/assets/third-party-icons/developer/processed/Frontend/astro.svg new file mode 100644 index 00000000..a068bb6d --- /dev/null +++ b/assets/third-party-icons/developer/processed/Frontend/astro.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Frontend/chakraui.svg b/assets/third-party-icons/developer/processed/Frontend/chakraui.svg new file mode 100644 index 00000000..c5c2847c --- /dev/null +++ b/assets/third-party-icons/developer/processed/Frontend/chakraui.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Frontend/framer-dark.svg b/assets/third-party-icons/developer/processed/Frontend/framer-dark.svg new file mode 100644 index 00000000..4ca29b13 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Frontend/framer-dark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Frontend/framer-light.svg b/assets/third-party-icons/developer/processed/Frontend/framer-light.svg new file mode 100644 index 00000000..723076db --- /dev/null +++ b/assets/third-party-icons/developer/processed/Frontend/framer-light.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Frontend/gatsby.svg b/assets/third-party-icons/developer/processed/Frontend/gatsby.svg new file mode 100644 index 00000000..2d7d2c80 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Frontend/gatsby.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Frontend/headlessui.svg b/assets/third-party-icons/developer/processed/Frontend/headlessui.svg new file mode 100644 index 00000000..58683836 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Frontend/headlessui.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Frontend/jquery.svg b/assets/third-party-icons/developer/processed/Frontend/jquery.svg new file mode 100644 index 00000000..c0bb1456 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Frontend/jquery.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Frontend/materialui.svg b/assets/third-party-icons/developer/processed/Frontend/materialui.svg new file mode 100644 index 00000000..acc6bcd2 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Frontend/materialui.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Frontend/nextjs-wordmark.svg b/assets/third-party-icons/developer/processed/Frontend/nextjs-wordmark.svg new file mode 100644 index 00000000..e1843bb6 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Frontend/nextjs-wordmark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Frontend/nextjs.svg b/assets/third-party-icons/developer/processed/Frontend/nextjs.svg new file mode 100644 index 00000000..27d91e2a --- /dev/null +++ b/assets/third-party-icons/developer/processed/Frontend/nextjs.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Frontend/nuxtjs.svg b/assets/third-party-icons/developer/processed/Frontend/nuxtjs.svg new file mode 100644 index 00000000..04eaf4a5 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Frontend/nuxtjs.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Frontend/preact.svg b/assets/third-party-icons/developer/processed/Frontend/preact.svg new file mode 100644 index 00000000..19f7d504 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Frontend/preact.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Frontend/react-query.svg b/assets/third-party-icons/developer/processed/Frontend/react-query.svg new file mode 100644 index 00000000..9f2d9ab1 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Frontend/react-query.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Frontend/reactjs.svg b/assets/third-party-icons/developer/processed/Frontend/reactjs.svg new file mode 100644 index 00000000..c2a99e48 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Frontend/reactjs.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Frontend/reactrouter.svg b/assets/third-party-icons/developer/processed/Frontend/reactrouter.svg new file mode 100644 index 00000000..0caa7fb8 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Frontend/reactrouter.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Frontend/remix-dark-wordmark.svg b/assets/third-party-icons/developer/processed/Frontend/remix-dark-wordmark.svg new file mode 100644 index 00000000..e8689a3b --- /dev/null +++ b/assets/third-party-icons/developer/processed/Frontend/remix-dark-wordmark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Frontend/remix-dark.svg b/assets/third-party-icons/developer/processed/Frontend/remix-dark.svg new file mode 100644 index 00000000..3a0ba4b4 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Frontend/remix-dark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Frontend/remix-light-wordmark.svg b/assets/third-party-icons/developer/processed/Frontend/remix-light-wordmark.svg new file mode 100644 index 00000000..69b65150 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Frontend/remix-light-wordmark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Frontend/remix-light.svg b/assets/third-party-icons/developer/processed/Frontend/remix-light.svg new file mode 100644 index 00000000..d1585ff7 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Frontend/remix-light.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Frontend/sass.svg b/assets/third-party-icons/developer/processed/Frontend/sass.svg new file mode 100644 index 00000000..8885aca4 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Frontend/sass.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Frontend/shadcnui.svg b/assets/third-party-icons/developer/processed/Frontend/shadcnui.svg new file mode 100644 index 00000000..1a78af44 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Frontend/shadcnui.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Frontend/sveltejs.svg b/assets/third-party-icons/developer/processed/Frontend/sveltejs.svg new file mode 100644 index 00000000..840b7262 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Frontend/sveltejs.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Frontend/tailwindcss.svg b/assets/third-party-icons/developer/processed/Frontend/tailwindcss.svg new file mode 100644 index 00000000..e698ea3d --- /dev/null +++ b/assets/third-party-icons/developer/processed/Frontend/tailwindcss.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Frontend/threejs-dark.svg b/assets/third-party-icons/developer/processed/Frontend/threejs-dark.svg new file mode 100644 index 00000000..d300f3d2 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Frontend/threejs-dark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Frontend/threejs-light.svg b/assets/third-party-icons/developer/processed/Frontend/threejs-light.svg new file mode 100644 index 00000000..afde7de5 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Frontend/threejs-light.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Frontend/vitejs.svg b/assets/third-party-icons/developer/processed/Frontend/vitejs.svg new file mode 100644 index 00000000..81afd66b --- /dev/null +++ b/assets/third-party-icons/developer/processed/Frontend/vitejs.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Frontend/vuejs.svg b/assets/third-party-icons/developer/processed/Frontend/vuejs.svg new file mode 100644 index 00000000..5b95cc5c --- /dev/null +++ b/assets/third-party-icons/developer/processed/Frontend/vuejs.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Frontend/webpack.svg b/assets/third-party-icons/developer/processed/Frontend/webpack.svg new file mode 100644 index 00000000..a1aa3755 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Frontend/webpack.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Languages/bash.svg b/assets/third-party-icons/developer/processed/Languages/bash.svg new file mode 100644 index 00000000..5d1b87fe --- /dev/null +++ b/assets/third-party-icons/developer/processed/Languages/bash.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Languages/cakephp.svg b/assets/third-party-icons/developer/processed/Languages/cakephp.svg new file mode 100644 index 00000000..a77df27d --- /dev/null +++ b/assets/third-party-icons/developer/processed/Languages/cakephp.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Languages/dlang.svg b/assets/third-party-icons/developer/processed/Languages/dlang.svg new file mode 100644 index 00000000..94e6bcad --- /dev/null +++ b/assets/third-party-icons/developer/processed/Languages/dlang.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Languages/elixir.svg b/assets/third-party-icons/developer/processed/Languages/elixir.svg new file mode 100644 index 00000000..bd8c48bf --- /dev/null +++ b/assets/third-party-icons/developer/processed/Languages/elixir.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Languages/erlang.svg b/assets/third-party-icons/developer/processed/Languages/erlang.svg new file mode 100644 index 00000000..02f41e1e --- /dev/null +++ b/assets/third-party-icons/developer/processed/Languages/erlang.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Languages/haskell.svg b/assets/third-party-icons/developer/processed/Languages/haskell.svg new file mode 100644 index 00000000..b246f6b3 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Languages/haskell.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Languages/java.svg b/assets/third-party-icons/developer/processed/Languages/java.svg new file mode 100644 index 00000000..f70404ee --- /dev/null +++ b/assets/third-party-icons/developer/processed/Languages/java.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Languages/javascript.svg b/assets/third-party-icons/developer/processed/Languages/javascript.svg new file mode 100644 index 00000000..37ea9ac7 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Languages/javascript.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Languages/json.svg b/assets/third-party-icons/developer/processed/Languages/json.svg new file mode 100644 index 00000000..5822561a --- /dev/null +++ b/assets/third-party-icons/developer/processed/Languages/json.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Languages/kotlin.svg b/assets/third-party-icons/developer/processed/Languages/kotlin.svg new file mode 100644 index 00000000..7934c453 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Languages/kotlin.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Languages/markdown.svg b/assets/third-party-icons/developer/processed/Languages/markdown.svg new file mode 100644 index 00000000..593edf5d --- /dev/null +++ b/assets/third-party-icons/developer/processed/Languages/markdown.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Languages/nim.svg b/assets/third-party-icons/developer/processed/Languages/nim.svg new file mode 100644 index 00000000..459c3c2e --- /dev/null +++ b/assets/third-party-icons/developer/processed/Languages/nim.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Languages/php.svg b/assets/third-party-icons/developer/processed/Languages/php.svg new file mode 100644 index 00000000..7e9df1e1 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Languages/php.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Languages/powershell.svg b/assets/third-party-icons/developer/processed/Languages/powershell.svg new file mode 100644 index 00000000..468da460 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Languages/powershell.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Languages/python.svg b/assets/third-party-icons/developer/processed/Languages/python.svg new file mode 100644 index 00000000..d9bbadd3 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Languages/python.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Languages/ruby.svg b/assets/third-party-icons/developer/processed/Languages/ruby.svg new file mode 100644 index 00000000..95541aac --- /dev/null +++ b/assets/third-party-icons/developer/processed/Languages/ruby.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Languages/rust-dark.svg b/assets/third-party-icons/developer/processed/Languages/rust-dark.svg new file mode 100644 index 00000000..1bef36e0 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Languages/rust-dark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Languages/rust-light.svg b/assets/third-party-icons/developer/processed/Languages/rust-light.svg new file mode 100644 index 00000000..a19672f1 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Languages/rust-light.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Languages/scala.svg b/assets/third-party-icons/developer/processed/Languages/scala.svg new file mode 100644 index 00000000..8865c0a3 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Languages/scala.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Languages/solidity.svg b/assets/third-party-icons/developer/processed/Languages/solidity.svg new file mode 100644 index 00000000..fe7c75cc --- /dev/null +++ b/assets/third-party-icons/developer/processed/Languages/solidity.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Languages/swift.svg b/assets/third-party-icons/developer/processed/Languages/swift.svg new file mode 100644 index 00000000..8a9f6195 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Languages/swift.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Languages/typescript.svg b/assets/third-party-icons/developer/processed/Languages/typescript.svg new file mode 100644 index 00000000..c553da88 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Languages/typescript.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Media/bluesky.svg b/assets/third-party-icons/developer/processed/Media/bluesky.svg new file mode 100644 index 00000000..9cc47ede --- /dev/null +++ b/assets/third-party-icons/developer/processed/Media/bluesky.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Media/cloudinary.svg b/assets/third-party-icons/developer/processed/Media/cloudinary.svg new file mode 100644 index 00000000..d72b8ad2 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Media/cloudinary.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Media/hotjar.svg b/assets/third-party-icons/developer/processed/Media/hotjar.svg new file mode 100644 index 00000000..0b6326ef --- /dev/null +++ b/assets/third-party-icons/developer/processed/Media/hotjar.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Media/instagram.svg b/assets/third-party-icons/developer/processed/Media/instagram.svg new file mode 100644 index 00000000..5f3e6aae --- /dev/null +++ b/assets/third-party-icons/developer/processed/Media/instagram.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Media/mastodon.svg b/assets/third-party-icons/developer/processed/Media/mastodon.svg new file mode 100644 index 00000000..a8023e92 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Media/mastodon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Media/redux-saga.svg b/assets/third-party-icons/developer/processed/Media/redux-saga.svg new file mode 100644 index 00000000..13ea56d2 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Media/redux-saga.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Media/stream.svg b/assets/third-party-icons/developer/processed/Media/stream.svg new file mode 100644 index 00000000..bdc999a9 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Media/stream.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Media/telegram.svg b/assets/third-party-icons/developer/processed/Media/telegram.svg new file mode 100644 index 00000000..ed312306 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Media/telegram.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Media/threads-dark.svg b/assets/third-party-icons/developer/processed/Media/threads-dark.svg new file mode 100644 index 00000000..a753e623 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Media/threads-dark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Media/threads-light.svg b/assets/third-party-icons/developer/processed/Media/threads-light.svg new file mode 100644 index 00000000..932954eb --- /dev/null +++ b/assets/third-party-icons/developer/processed/Media/threads-light.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Media/vk.svg b/assets/third-party-icons/developer/processed/Media/vk.svg new file mode 100644 index 00000000..ad07a856 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Media/vk.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Media/x-dark.svg b/assets/third-party-icons/developer/processed/Media/x-dark.svg new file mode 100644 index 00000000..feee89fd --- /dev/null +++ b/assets/third-party-icons/developer/processed/Media/x-dark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Media/x-light.svg b/assets/third-party-icons/developer/processed/Media/x-light.svg new file mode 100644 index 00000000..a83f0d78 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Media/x-light.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Media/youtube-wordmark.svg b/assets/third-party-icons/developer/processed/Media/youtube-wordmark.svg new file mode 100644 index 00000000..71ccf857 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Media/youtube-wordmark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Media/youtube.svg b/assets/third-party-icons/developer/processed/Media/youtube.svg new file mode 100644 index 00000000..1d03922b --- /dev/null +++ b/assets/third-party-icons/developer/processed/Media/youtube.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Native-App/android.svg b/assets/third-party-icons/developer/processed/Native-App/android.svg new file mode 100644 index 00000000..74dfe2e3 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Native-App/android.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Native-App/flutter.svg b/assets/third-party-icons/developer/processed/Native-App/flutter.svg new file mode 100644 index 00000000..8422e3f0 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Native-App/flutter.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/ansible-wordmark.svg b/assets/third-party-icons/developer/processed/Others/ansible-wordmark.svg new file mode 100644 index 00000000..adca7138 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/ansible-wordmark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/ansible.svg b/assets/third-party-icons/developer/processed/Others/ansible.svg new file mode 100644 index 00000000..8086fac5 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/ansible.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/anthropic-basic-dark.svg b/assets/third-party-icons/developer/processed/Others/anthropic-basic-dark.svg new file mode 100644 index 00000000..1139b2d3 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/anthropic-basic-dark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/anthropic-basic-light.svg b/assets/third-party-icons/developer/processed/Others/anthropic-basic-light.svg new file mode 100644 index 00000000..fcc2b3fc --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/anthropic-basic-light.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/anthropic.svg b/assets/third-party-icons/developer/processed/Others/anthropic.svg new file mode 100644 index 00000000..860c3b02 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/anthropic.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/apache.svg b/assets/third-party-icons/developer/processed/Others/apache.svg new file mode 100644 index 00000000..d5f1627e --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/apache.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/apple-dark.svg b/assets/third-party-icons/developer/processed/Others/apple-dark.svg new file mode 100644 index 00000000..81e20f9c --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/apple-dark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/apple-light.svg b/assets/third-party-icons/developer/processed/Others/apple-light.svg new file mode 100644 index 00000000..ce10e0ee --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/apple-light.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/appwrite.svg b/assets/third-party-icons/developer/processed/Others/appwrite.svg new file mode 100644 index 00000000..b59654ff --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/appwrite.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/arc.svg b/assets/third-party-icons/developer/processed/Others/arc.svg new file mode 100644 index 00000000..479616bc --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/arc.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/atlassian.svg b/assets/third-party-icons/developer/processed/Others/atlassian.svg new file mode 100644 index 00000000..a081e771 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/atlassian.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/atom.svg b/assets/third-party-icons/developer/processed/Others/atom.svg new file mode 100644 index 00000000..da40f2f3 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/atom.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/auth0.svg b/assets/third-party-icons/developer/processed/Others/auth0.svg new file mode 100644 index 00000000..a00e9d69 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/auth0.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/axiom.svg b/assets/third-party-icons/developer/processed/Others/axiom.svg new file mode 100644 index 00000000..ef0fa840 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/axiom.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/axure.svg b/assets/third-party-icons/developer/processed/Others/axure.svg new file mode 100644 index 00000000..e502874b --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/axure.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/azure.svg b/assets/third-party-icons/developer/processed/Others/azure.svg new file mode 100644 index 00000000..a7732097 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/azure.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/babel.svg b/assets/third-party-icons/developer/processed/Others/babel.svg new file mode 100644 index 00000000..7638c8e3 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/babel.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/backbonejs.svg b/assets/third-party-icons/developer/processed/Others/backbonejs.svg new file mode 100644 index 00000000..d1c8e0e7 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/backbonejs.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/bard.svg b/assets/third-party-icons/developer/processed/Others/bard.svg new file mode 100644 index 00000000..bc386cc6 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/bard.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/bing.svg b/assets/third-party-icons/developer/processed/Others/bing.svg new file mode 100644 index 00000000..163ce31d --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/bing.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/biome.svg b/assets/third-party-icons/developer/processed/Others/biome.svg new file mode 100644 index 00000000..0a104d55 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/biome.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/bitnami.svg b/assets/third-party-icons/developer/processed/Others/bitnami.svg new file mode 100644 index 00000000..5daccf43 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/bitnami.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/blueprintjs.svg b/assets/third-party-icons/developer/processed/Others/blueprintjs.svg new file mode 100644 index 00000000..43c16e91 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/blueprintjs.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/bootstrap4.svg b/assets/third-party-icons/developer/processed/Others/bootstrap4.svg new file mode 100644 index 00000000..635fcff9 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/bootstrap4.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/bootstrap5.svg b/assets/third-party-icons/developer/processed/Others/bootstrap5.svg new file mode 100644 index 00000000..e329726c --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/bootstrap5.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/brave.svg b/assets/third-party-icons/developer/processed/Others/brave.svg new file mode 100644 index 00000000..89b2a9b0 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/brave.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/bulmaui.svg b/assets/third-party-icons/developer/processed/Others/bulmaui.svg new file mode 100644 index 00000000..bb9f4fd3 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/bulmaui.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/c-plus-plus.svg b/assets/third-party-icons/developer/processed/Others/c-plus-plus.svg new file mode 100644 index 00000000..e3122231 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/c-plus-plus.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/c-sharp.svg b/assets/third-party-icons/developer/processed/Others/c-sharp.svg new file mode 100644 index 00000000..e16c7bfb --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/c-sharp.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/c.svg b/assets/third-party-icons/developer/processed/Others/c.svg new file mode 100644 index 00000000..8ede807f --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/c.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/canva.svg b/assets/third-party-icons/developer/processed/Others/canva.svg new file mode 100644 index 00000000..ba5a01e0 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/canva.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/cassandradb.svg b/assets/third-party-icons/developer/processed/Others/cassandradb.svg new file mode 100644 index 00000000..2fe59c2b --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/cassandradb.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/chatgpt.svg b/assets/third-party-icons/developer/processed/Others/chatgpt.svg new file mode 100644 index 00000000..7afeb560 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/chatgpt.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/chromium.svg b/assets/third-party-icons/developer/processed/Others/chromium.svg new file mode 100644 index 00000000..48a077c2 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/chromium.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/circleci.svg b/assets/third-party-icons/developer/processed/Others/circleci.svg new file mode 100644 index 00000000..8f5d110f --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/circleci.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/claude-ai.svg b/assets/third-party-icons/developer/processed/Others/claude-ai.svg new file mode 100644 index 00000000..42607a25 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/claude-ai.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/clerk.svg b/assets/third-party-icons/developer/processed/Others/clerk.svg new file mode 100644 index 00000000..cb714e27 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/clerk.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/clojure.svg b/assets/third-party-icons/developer/processed/Others/clojure.svg new file mode 100644 index 00000000..767579f2 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/clojure.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/codeigniter.svg b/assets/third-party-icons/developer/processed/Others/codeigniter.svg new file mode 100644 index 00000000..08d2f655 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/codeigniter.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/crystal.svg b/assets/third-party-icons/developer/processed/Others/crystal.svg new file mode 100644 index 00000000..4470582a --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/crystal.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/css.svg b/assets/third-party-icons/developer/processed/Others/css.svg new file mode 100644 index 00000000..92861136 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/css.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/css3.svg b/assets/third-party-icons/developer/processed/Others/css3.svg new file mode 100644 index 00000000..9207bb49 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/css3.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/dart.svg b/assets/third-party-icons/developer/processed/Others/dart.svg new file mode 100644 index 00000000..469b6760 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/dart.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/datadog.svg b/assets/third-party-icons/developer/processed/Others/datadog.svg new file mode 100644 index 00000000..67b0ebc9 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/datadog.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/deepseek-wordmark.svg b/assets/third-party-icons/developer/processed/Others/deepseek-wordmark.svg new file mode 100644 index 00000000..975c248e --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/deepseek-wordmark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/deepseek.svg b/assets/third-party-icons/developer/processed/Others/deepseek.svg new file mode 100644 index 00000000..a49cdd0d --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/deepseek.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/discord.svg b/assets/third-party-icons/developer/processed/Others/discord.svg new file mode 100644 index 00000000..6424dd78 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/discord.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/django.svg b/assets/third-party-icons/developer/processed/Others/django.svg new file mode 100644 index 00000000..6991cb35 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/django.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/docusaurus.svg b/assets/third-party-icons/developer/processed/Others/docusaurus.svg new file mode 100644 index 00000000..6eb96b6c --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/docusaurus.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/dovetail.svg b/assets/third-party-icons/developer/processed/Others/dovetail.svg new file mode 100644 index 00000000..613832f0 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/dovetail.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/electron.svg b/assets/third-party-icons/developer/processed/Others/electron.svg new file mode 100644 index 00000000..670a7ad0 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/electron.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/elementui.svg b/assets/third-party-icons/developer/processed/Others/elementui.svg new file mode 100644 index 00000000..61fd7795 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/elementui.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/ember.svg b/assets/third-party-icons/developer/processed/Others/ember.svg new file mode 100644 index 00000000..8a12c4ed --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/ember.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/esbuild.svg b/assets/third-party-icons/developer/processed/Others/esbuild.svg new file mode 100644 index 00000000..6de8e8c6 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/esbuild.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/eslint.svg b/assets/third-party-icons/developer/processed/Others/eslint.svg new file mode 100644 index 00000000..b7bd0a75 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/eslint.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/expressjs-dark.svg b/assets/third-party-icons/developer/processed/Others/expressjs-dark.svg new file mode 100644 index 00000000..2db21520 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/expressjs-dark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/expressjs-light.svg b/assets/third-party-icons/developer/processed/Others/expressjs-light.svg new file mode 100644 index 00000000..2bd3482e --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/expressjs-light.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/facebook.svg b/assets/third-party-icons/developer/processed/Others/facebook.svg new file mode 100644 index 00000000..267b7435 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/facebook.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/fast-api.svg b/assets/third-party-icons/developer/processed/Others/fast-api.svg new file mode 100644 index 00000000..e25037b6 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/fast-api.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/faunadb.svg b/assets/third-party-icons/developer/processed/Others/faunadb.svg new file mode 100644 index 00000000..809cab42 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/faunadb.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/flask-dark.svg b/assets/third-party-icons/developer/processed/Others/flask-dark.svg new file mode 100644 index 00000000..1bcb9af7 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/flask-dark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/flask-light.svg b/assets/third-party-icons/developer/processed/Others/flask-light.svg new file mode 100644 index 00000000..ef6bb2c7 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/flask-light.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/flyio.svg b/assets/third-party-icons/developer/processed/Others/flyio.svg new file mode 100644 index 00000000..60d0b8c9 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/flyio.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/go.svg b/assets/third-party-icons/developer/processed/Others/go.svg new file mode 100644 index 00000000..c4a8bf32 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/go.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/google-wordmark.svg b/assets/third-party-icons/developer/processed/Others/google-wordmark.svg new file mode 100644 index 00000000..31b64830 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/google-wordmark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/google.svg b/assets/third-party-icons/developer/processed/Others/google.svg new file mode 100644 index 00000000..b7d53201 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/google.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/grafana.svg b/assets/third-party-icons/developer/processed/Others/grafana.svg new file mode 100644 index 00000000..1984c248 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/grafana.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/graphite.svg b/assets/third-party-icons/developer/processed/Others/graphite.svg new file mode 100644 index 00000000..14848af3 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/graphite.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/gridsome.svg b/assets/third-party-icons/developer/processed/Others/gridsome.svg new file mode 100644 index 00000000..95f7275f --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/gridsome.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/gruntjs.svg b/assets/third-party-icons/developer/processed/Others/gruntjs.svg new file mode 100644 index 00000000..9289da67 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/gruntjs.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/gulp.svg b/assets/third-party-icons/developer/processed/Others/gulp.svg new file mode 100644 index 00000000..850e0e65 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/gulp.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/hashnode.svg b/assets/third-party-icons/developer/processed/Others/hashnode.svg new file mode 100644 index 00000000..3ac92bfe --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/hashnode.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/hexo.svg b/assets/third-party-icons/developer/processed/Others/hexo.svg new file mode 100644 index 00000000..e905d6b4 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/hexo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/hhvm.svg b/assets/third-party-icons/developer/processed/Others/hhvm.svg new file mode 100644 index 00000000..725f67fb --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/hhvm.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/homebrew.svg b/assets/third-party-icons/developer/processed/Others/homebrew.svg new file mode 100644 index 00000000..73dc1701 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/homebrew.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/html5.svg b/assets/third-party-icons/developer/processed/Others/html5.svg new file mode 100644 index 00000000..88ba2883 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/html5.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/hyper2.svg b/assets/third-party-icons/developer/processed/Others/hyper2.svg new file mode 100644 index 00000000..7191f397 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/hyper2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/insomnia.svg b/assets/third-party-icons/developer/processed/Others/insomnia.svg new file mode 100644 index 00000000..6ebdc914 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/insomnia.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/internet-explorer.svg b/assets/third-party-icons/developer/processed/Others/internet-explorer.svg new file mode 100644 index 00000000..d0342014 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/internet-explorer.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/invision.svg b/assets/third-party-icons/developer/processed/Others/invision.svg new file mode 100644 index 00000000..58c890a8 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/invision.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/ionic.svg b/assets/third-party-icons/developer/processed/Others/ionic.svg new file mode 100644 index 00000000..c7a24912 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/ionic.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/jamstack.svg b/assets/third-party-icons/developer/processed/Others/jamstack.svg new file mode 100644 index 00000000..032ccc9c --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/jamstack.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/jenkins.svg b/assets/third-party-icons/developer/processed/Others/jenkins.svg new file mode 100644 index 00000000..87193d10 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/jenkins.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/jest.svg b/assets/third-party-icons/developer/processed/Others/jest.svg new file mode 100644 index 00000000..5aa25674 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/jest.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/jira.svg b/assets/third-party-icons/developer/processed/Others/jira.svg new file mode 100644 index 00000000..29555b9f --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/jira.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/jslint.svg b/assets/third-party-icons/developer/processed/Others/jslint.svg new file mode 100644 index 00000000..76dbf083 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/jslint.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/kafka.svg b/assets/third-party-icons/developer/processed/Others/kafka.svg new file mode 100644 index 00000000..23460cf2 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/kafka.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/laravel.svg b/assets/third-party-icons/developer/processed/Others/laravel.svg new file mode 100644 index 00000000..4823a199 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/laravel.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/lerna-dark.svg b/assets/third-party-icons/developer/processed/Others/lerna-dark.svg new file mode 100644 index 00000000..577114f0 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/lerna-dark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/lerna-light.svg b/assets/third-party-icons/developer/processed/Others/lerna-light.svg new file mode 100644 index 00000000..a5da749d --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/lerna-light.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/less.svg b/assets/third-party-icons/developer/processed/Others/less.svg new file mode 100644 index 00000000..12372178 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/less.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/lightroom.svg b/assets/third-party-icons/developer/processed/Others/lightroom.svg new file mode 100644 index 00000000..4877871d --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/lightroom.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/linkedin.svg b/assets/third-party-icons/developer/processed/Others/linkedin.svg new file mode 100644 index 00000000..fe41444f --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/linkedin.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/lit.svg b/assets/third-party-icons/developer/processed/Others/lit.svg new file mode 100644 index 00000000..cde25c7e --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/lit.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/liveblocks.svg b/assets/third-party-icons/developer/processed/Others/liveblocks.svg new file mode 100644 index 00000000..5e7bd481 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/liveblocks.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/logrocket.svg b/assets/third-party-icons/developer/processed/Others/logrocket.svg new file mode 100644 index 00000000..218a11c3 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/logrocket.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/lua.svg b/assets/third-party-icons/developer/processed/Others/lua.svg new file mode 100644 index 00000000..3354e6b6 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/lua.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/lunacy.svg b/assets/third-party-icons/developer/processed/Others/lunacy.svg new file mode 100644 index 00000000..184b4093 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/lunacy.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/marionette.svg b/assets/third-party-icons/developer/processed/Others/marionette.svg new file mode 100644 index 00000000..c8ae3338 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/marionette.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/messenger.svg b/assets/third-party-icons/developer/processed/Others/messenger.svg new file mode 100644 index 00000000..89170670 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/messenger.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/mochajs.svg b/assets/third-party-icons/developer/processed/Others/mochajs.svg new file mode 100644 index 00000000..3cf9f44a --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/mochajs.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/neovim.svg b/assets/third-party-icons/developer/processed/Others/neovim.svg new file mode 100644 index 00000000..37dfdb92 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/neovim.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/numpy.svg b/assets/third-party-icons/developer/processed/Others/numpy.svg new file mode 100644 index 00000000..2cd4ebaf --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/numpy.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/ocaml.svg b/assets/third-party-icons/developer/processed/Others/ocaml.svg new file mode 100644 index 00000000..0982bd83 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/ocaml.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/opera.svg b/assets/third-party-icons/developer/processed/Others/opera.svg new file mode 100644 index 00000000..9bb9e6b1 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/opera.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/pandacss.svg b/assets/third-party-icons/developer/processed/Others/pandacss.svg new file mode 100644 index 00000000..8c15c873 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/pandacss.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/pinia.svg b/assets/third-party-icons/developer/processed/Others/pinia.svg new file mode 100644 index 00000000..46ef53d8 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/pinia.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/pinterest.svg b/assets/third-party-icons/developer/processed/Others/pinterest.svg new file mode 100644 index 00000000..614ffcdf --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/pinterest.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/pixijs.svg b/assets/third-party-icons/developer/processed/Others/pixijs.svg new file mode 100644 index 00000000..e4e59201 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/pixijs.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/playwright.svg b/assets/third-party-icons/developer/processed/Others/playwright.svg new file mode 100644 index 00000000..8426d31c --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/playwright.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/postman.svg b/assets/third-party-icons/developer/processed/Others/postman.svg new file mode 100644 index 00000000..81964171 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/postman.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/prettier.svg b/assets/third-party-icons/developer/processed/Others/prettier.svg new file mode 100644 index 00000000..3d5dbb6c --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/prettier.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/prisma.svg b/assets/third-party-icons/developer/processed/Others/prisma.svg new file mode 100644 index 00000000..44de09b9 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/prisma.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/pugjs.svg b/assets/third-party-icons/developer/processed/Others/pugjs.svg new file mode 100644 index 00000000..c7575600 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/pugjs.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/pwa.svg b/assets/third-party-icons/developer/processed/Others/pwa.svg new file mode 100644 index 00000000..5fd6c2ab --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/pwa.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/pytorch.svg b/assets/third-party-icons/developer/processed/Others/pytorch.svg new file mode 100644 index 00000000..e6183e81 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/pytorch.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/pytorch3d.svg b/assets/third-party-icons/developer/processed/Others/pytorch3d.svg new file mode 100644 index 00000000..9494df67 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/pytorch3d.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/qwik.svg b/assets/third-party-icons/developer/processed/Others/qwik.svg new file mode 100644 index 00000000..e9b7cb6c --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/qwik.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/r.svg b/assets/third-party-icons/developer/processed/Others/r.svg new file mode 100644 index 00000000..fd94db70 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/r.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/radixui.svg b/assets/third-party-icons/developer/processed/Others/radixui.svg new file mode 100644 index 00000000..28d1861c --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/radixui.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/rails.svg b/assets/third-party-icons/developer/processed/Others/rails.svg new file mode 100644 index 00000000..0f8bcdf4 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/rails.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/reddit-wordmark.svg b/assets/third-party-icons/developer/processed/Others/reddit-wordmark.svg new file mode 100644 index 00000000..562ca8ca --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/reddit-wordmark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/reddit.svg b/assets/third-party-icons/developer/processed/Others/reddit.svg new file mode 100644 index 00000000..9a6da44e --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/reddit.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/redhat.svg b/assets/third-party-icons/developer/processed/Others/redhat.svg new file mode 100644 index 00000000..0c2b82b6 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/redhat.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/redux.svg b/assets/third-party-icons/developer/processed/Others/redux.svg new file mode 100644 index 00000000..9eb82bad --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/redux.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/render.svg b/assets/third-party-icons/developer/processed/Others/render.svg new file mode 100644 index 00000000..06847a19 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/render.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/resend.svg b/assets/third-party-icons/developer/processed/Others/resend.svg new file mode 100644 index 00000000..b2a976d2 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/resend.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/rollup.svg b/assets/third-party-icons/developer/processed/Others/rollup.svg new file mode 100644 index 00000000..b7da91df --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/rollup.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/semanticui.svg b/assets/third-party-icons/developer/processed/Others/semanticui.svg new file mode 100644 index 00000000..50038370 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/semanticui.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/serverless.svg b/assets/third-party-icons/developer/processed/Others/serverless.svg new file mode 100644 index 00000000..f07a6a8b --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/serverless.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/shopware.svg b/assets/third-party-icons/developer/processed/Others/shopware.svg new file mode 100644 index 00000000..ca01de35 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/shopware.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/skype.svg b/assets/third-party-icons/developer/processed/Others/skype.svg new file mode 100644 index 00000000..42ac8855 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/skype.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/slack.svg b/assets/third-party-icons/developer/processed/Others/slack.svg new file mode 100644 index 00000000..24e98295 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/slack.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/solidjs.svg b/assets/third-party-icons/developer/processed/Others/solidjs.svg new file mode 100644 index 00000000..a9e85c27 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/solidjs.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/storyblok.svg b/assets/third-party-icons/developer/processed/Others/storyblok.svg new file mode 100644 index 00000000..cb7e4dd5 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/storyblok.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/storybook.svg b/assets/third-party-icons/developer/processed/Others/storybook.svg new file mode 100644 index 00000000..38234b4a --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/storybook.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/stylelint.svg b/assets/third-party-icons/developer/processed/Others/stylelint.svg new file mode 100644 index 00000000..a0902e24 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/stylelint.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/sublime.svg b/assets/third-party-icons/developer/processed/Others/sublime.svg new file mode 100644 index 00000000..b446c097 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/sublime.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/swagger.svg b/assets/third-party-icons/developer/processed/Others/swagger.svg new file mode 100644 index 00000000..59173aab --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/swagger.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/terraform.svg b/assets/third-party-icons/developer/processed/Others/terraform.svg new file mode 100644 index 00000000..d0257ee7 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/terraform.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/tiktok.svg b/assets/third-party-icons/developer/processed/Others/tiktok.svg new file mode 100644 index 00000000..922c5f4f --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/tiktok.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/tinyhttp.svg b/assets/third-party-icons/developer/processed/Others/tinyhttp.svg new file mode 100644 index 00000000..50252335 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/tinyhttp.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/tor.svg b/assets/third-party-icons/developer/processed/Others/tor.svg new file mode 100644 index 00000000..5cc4263a --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/tor.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/twitter.svg b/assets/third-party-icons/developer/processed/Others/twitter.svg new file mode 100644 index 00000000..090b5e13 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/twitter.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/ubuntu.svg b/assets/third-party-icons/developer/processed/Others/ubuntu.svg new file mode 100644 index 00000000..5f08e6c0 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/ubuntu.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/unjs.svg b/assets/third-party-icons/developer/processed/Others/unjs.svg new file mode 100644 index 00000000..4031968d --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/unjs.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/upwork-basic.svg b/assets/third-party-icons/developer/processed/Others/upwork-basic.svg new file mode 100644 index 00000000..519df51c --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/upwork-basic.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/upwork-wordmark.svg b/assets/third-party-icons/developer/processed/Others/upwork-wordmark.svg new file mode 100644 index 00000000..d3e671ef --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/upwork-wordmark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/upwork.svg b/assets/third-party-icons/developer/processed/Others/upwork.svg new file mode 100644 index 00000000..c85bd588 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/upwork.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/vagrant.svg b/assets/third-party-icons/developer/processed/Others/vagrant.svg new file mode 100644 index 00000000..c717c646 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/vagrant.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/vim.svg b/assets/third-party-icons/developer/processed/Others/vim.svg new file mode 100644 index 00000000..0000f595 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/vim.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/visualbasic.svg b/assets/third-party-icons/developer/processed/Others/visualbasic.svg new file mode 100644 index 00000000..904145cd --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/visualbasic.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/vscode.svg b/assets/third-party-icons/developer/processed/Others/vscode.svg new file mode 100644 index 00000000..0f0e8ad7 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/vscode.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/webassembly.svg b/assets/third-party-icons/developer/processed/Others/webassembly.svg new file mode 100644 index 00000000..63f2109c --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/webassembly.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/webrtc.svg b/assets/third-party-icons/developer/processed/Others/webrtc.svg new file mode 100644 index 00000000..3691e759 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/webrtc.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/whatsapp.svg b/assets/third-party-icons/developer/processed/Others/whatsapp.svg new file mode 100644 index 00000000..59e1ff86 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/whatsapp.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/wordpress.svg b/assets/third-party-icons/developer/processed/Others/wordpress.svg new file mode 100644 index 00000000..e785ab54 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/wordpress.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/xamarin.svg b/assets/third-party-icons/developer/processed/Others/xamarin.svg new file mode 100644 index 00000000..3768e472 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/xamarin.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/xd.svg b/assets/third-party-icons/developer/processed/Others/xd.svg new file mode 100644 index 00000000..4a883a52 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/xd.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/yoga.svg b/assets/third-party-icons/developer/processed/Others/yoga.svg new file mode 100644 index 00000000..7a3032f6 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/yoga.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Others/zen.svg b/assets/third-party-icons/developer/processed/Others/zen.svg new file mode 100644 index 00000000..9671a4a6 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Others/zen.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Productivity/gmail.svg b/assets/third-party-icons/developer/processed/Productivity/gmail.svg new file mode 100644 index 00000000..3c5fc7a2 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Productivity/gmail.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Productivity/lokalise.svg b/assets/third-party-icons/developer/processed/Productivity/lokalise.svg new file mode 100644 index 00000000..a2312da4 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Productivity/lokalise.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Productivity/notion.svg b/assets/third-party-icons/developer/processed/Productivity/notion.svg new file mode 100644 index 00000000..d2eebee4 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Productivity/notion.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Productivity/onedrive.svg b/assets/third-party-icons/developer/processed/Productivity/onedrive.svg new file mode 100644 index 00000000..903e9f90 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Productivity/onedrive.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/Productivity/outlook.svg b/assets/third-party-icons/developer/processed/Productivity/outlook.svg new file mode 100644 index 00000000..6c854b90 --- /dev/null +++ b/assets/third-party-icons/developer/processed/Productivity/outlook.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/third-party-icons/developer/processed/developer-icons-v1.manifest.json b/assets/third-party-icons/developer/processed/developer-icons-v1.manifest.json new file mode 100644 index 00000000..69314059 --- /dev/null +++ b/assets/third-party-icons/developer/processed/developer-icons-v1.manifest.json @@ -0,0 +1,3198 @@ +{ + "id": "developer-icons-v1", + "name": "Developer Icons", + "version": "1.0.0", + "author": "xandemon/developer-icons", + "shapes": [ + { + "id": "backend-avajs", + "label": "Backend Avajs", + "category": "Backend", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "backend-bunjs", + "label": "Backend Bunjs", + "category": "Backend", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "backend-convex", + "label": "Backend Convex", + "category": "Backend", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "backend-deno-fresh", + "label": "Backend Deno Fresh", + "category": "Backend", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "backend-deno", + "label": "Backend Deno", + "category": "Backend", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "backend-doctrine", + "label": "Backend Doctrine", + "category": "Backend", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "backend-grafbase", + "label": "Backend Grafbase", + "category": "Backend", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "backend-graphql", + "label": "Backend Graphql", + "category": "Backend", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "backend-i18next", + "label": "Backend I18next", + "category": "Backend", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "backend-nestjs", + "label": "Backend Nestjs", + "category": "Backend", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "backend-nodejs", + "label": "Backend Nodejs", + "category": "Backend", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "backend-spring", + "label": "Backend Spring", + "category": "Backend", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "backend-symfony-dark", + "label": "Backend Symfony Dark", + "category": "Backend", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "backend-symfony-light", + "label": "Backend Symfony Light", + "category": "Backend", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "backend-trpc", + "label": "Backend Trpc", + "category": "Backend", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "backend-zod", + "label": "Backend Zod", + "category": "Backend", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "browser-chrome", + "label": "Browser Chrome", + "category": "Browser", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "browser-edge", + "label": "Browser Edge", + "category": "Browser", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "browser-firefox", + "label": "Browser Firefox", + "category": "Browser", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "browser-safari", + "label": "Browser Safari", + "category": "Browser", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "browser-vivaldi", + "label": "Browser Vivaldi", + "category": "Browser", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "companies-meta", + "label": "Companies Meta", + "category": "Companies", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "companies-microsoft", + "label": "Companies Microsoft", + "category": "Companies", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "companies-mozilla", + "label": "Companies Mozilla", + "category": "Companies", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "database-clickhouse", + "label": "Database Clickhouse", + "category": "Database", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "database-firebase", + "label": "Database Firebase", + "category": "Database", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "database-kibana", + "label": "Database Kibana", + "category": "Database", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "database-mariadb", + "label": "Database Mariadb", + "category": "Database", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "database-microsoft-sql-server-2", + "label": "Database Microsoft Sql Server 2", + "category": "Database", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "database-microsoft-sql-server", + "label": "Database Microsoft Sql Server", + "category": "Database", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "database-mongodb", + "label": "Database Mongodb", + "category": "Database", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "database-mysql", + "label": "Database Mysql", + "category": "Database", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "database-oracle", + "label": "Database Oracle", + "category": "Database", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "database-postgresql", + "label": "Database Postgresql", + "category": "Database", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "database-presto", + "label": "Database Presto", + "category": "Database", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "database-redis", + "label": "Database Redis", + "category": "Database", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "database-supabase", + "label": "Database Supabase", + "category": "Database", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "design-figma", + "label": "Design Figma", + "category": "Design", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "design-indesign", + "label": "Design Indesign", + "category": "Design", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "design-miro", + "label": "Design Miro", + "category": "Design", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "design-photoshop", + "label": "Design Photoshop", + "category": "Design", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "design-sketch", + "label": "Design Sketch", + "category": "Design", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "design-sketch2", + "label": "Design Sketch2", + "category": "Design", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "devops-ai-ml-aws", + "label": "Devops Ai Ml Aws", + "category": "DevOps-AI-ML", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "devops-ai-ml-bitbucket", + "label": "Devops Ai Ml Bitbucket", + "category": "DevOps-AI-ML", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "devops-ai-ml-cloudflare", + "label": "Devops Ai Ml Cloudflare", + "category": "DevOps-AI-ML", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "devops-ai-ml-codefresh", + "label": "Devops Ai Ml Codefresh", + "category": "DevOps-AI-ML", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "devops-ai-ml-copilot", + "label": "Devops Ai Ml Copilot", + "category": "DevOps-AI-ML", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "devops-ai-ml-cypress", + "label": "Devops Ai Ml Cypress", + "category": "DevOps-AI-ML", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "devops-ai-ml-developer-icons", + "label": "Devops Ai Ml Developer Icons", + "category": "DevOps-AI-ML", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "devops-ai-ml-digitalocean", + "label": "Devops Ai Ml Digitalocean", + "category": "DevOps-AI-ML", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "devops-ai-ml-docker", + "label": "Devops Ai Ml Docker", + "category": "DevOps-AI-ML", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "devops-ai-ml-ec2", + "label": "Devops Ai Ml Ec2", + "category": "DevOps-AI-ML", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "devops-ai-ml-elastic", + "label": "Devops Ai Ml Elastic", + "category": "DevOps-AI-ML", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "devops-ai-ml-git", + "label": "Devops Ai Ml Git", + "category": "DevOps-AI-ML", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "devops-ai-ml-github-copilot", + "label": "Devops Ai Ml Github Copilot", + "category": "DevOps-AI-ML", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "devops-ai-ml-github-dark", + "label": "Devops Ai Ml Github Dark", + "category": "DevOps-AI-ML", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "devops-ai-ml-github-light", + "label": "Devops Ai Ml Github Light", + "category": "DevOps-AI-ML", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "devops-ai-ml-gitlab", + "label": "Devops Ai Ml Gitlab", + "category": "DevOps-AI-ML", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "devops-ai-ml-google-cloud", + "label": "Devops Ai Ml Google Cloud", + "category": "DevOps-AI-ML", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "devops-ai-ml-heroku", + "label": "Devops Ai Ml Heroku", + "category": "DevOps-AI-ML", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "devops-ai-ml-hugging-face", + "label": "Devops Ai Ml Hugging Face", + "category": "DevOps-AI-ML", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "devops-ai-ml-k6", + "label": "Devops Ai Ml K6", + "category": "DevOps-AI-ML", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "devops-ai-ml-kubernetes", + "label": "Devops Ai Ml Kubernetes", + "category": "DevOps-AI-ML", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "devops-ai-ml-linux", + "label": "Devops Ai Ml Linux", + "category": "DevOps-AI-ML", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "devops-ai-ml-netlify", + "label": "Devops Ai Ml Netlify", + "category": "DevOps-AI-ML", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "devops-ai-ml-netlify2", + "label": "Devops Ai Ml Netlify2", + "category": "DevOps-AI-ML", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "devops-ai-ml-npm-wordmark", + "label": "Devops Ai Ml Npm Wordmark", + "category": "DevOps-AI-ML", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "devops-ai-ml-npm", + "label": "Devops Ai Ml Npm", + "category": "DevOps-AI-ML", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "devops-ai-ml-nx", + "label": "Devops Ai Ml Nx", + "category": "DevOps-AI-ML", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "devops-ai-ml-openai", + "label": "Devops Ai Ml Openai", + "category": "DevOps-AI-ML", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "devops-ai-ml-pnpm-dark-wordmark", + "label": "Devops Ai Ml Pnpm Dark Wordmark", + "category": "DevOps-AI-ML", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "devops-ai-ml-pnpm-dark", + "label": "Devops Ai Ml Pnpm Dark", + "category": "DevOps-AI-ML", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "devops-ai-ml-pnpm-light-wordmark", + "label": "Devops Ai Ml Pnpm Light Wordmark", + "category": "DevOps-AI-ML", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "devops-ai-ml-pnpm-light", + "label": "Devops Ai Ml Pnpm Light", + "category": "DevOps-AI-ML", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "devops-ai-ml-pulumi-dark-wordmark", + "label": "Devops Ai Ml Pulumi Dark Wordmark", + "category": "DevOps-AI-ML", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "devops-ai-ml-pulumi-light-wordmark", + "label": "Devops Ai Ml Pulumi Light Wordmark", + "category": "DevOps-AI-ML", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "devops-ai-ml-pulumi", + "label": "Devops Ai Ml Pulumi", + "category": "DevOps-AI-ML", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "devops-ai-ml-railway", + "label": "Devops Ai Ml Railway", + "category": "DevOps-AI-ML", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "devops-ai-ml-tensorflow", + "label": "Devops Ai Ml Tensorflow", + "category": "DevOps-AI-ML", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "devops-ai-ml-vercel-dark-wordmark", + "label": "Devops Ai Ml Vercel Dark Wordmark", + "category": "DevOps-AI-ML", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "devops-ai-ml-vercel-dark", + "label": "Devops Ai Ml Vercel Dark", + "category": "DevOps-AI-ML", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "devops-ai-ml-vercel-light-wordmark", + "label": "Devops Ai Ml Vercel Light Wordmark", + "category": "DevOps-AI-ML", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "devops-ai-ml-vercel-light", + "label": "Devops Ai Ml Vercel Light", + "category": "DevOps-AI-ML", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "devops-ai-ml-vitest", + "label": "Devops Ai Ml Vitest", + "category": "DevOps-AI-ML", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "frontend-angular", + "label": "Frontend Angular", + "category": "Frontend", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "frontend-astro", + "label": "Frontend Astro", + "category": "Frontend", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "frontend-chakraui", + "label": "Frontend Chakraui", + "category": "Frontend", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "frontend-framer-dark", + "label": "Frontend Framer Dark", + "category": "Frontend", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "frontend-framer-light", + "label": "Frontend Framer Light", + "category": "Frontend", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "frontend-gatsby", + "label": "Frontend Gatsby", + "category": "Frontend", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "frontend-headlessui", + "label": "Frontend Headlessui", + "category": "Frontend", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "frontend-jquery", + "label": "Frontend Jquery", + "category": "Frontend", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "frontend-materialui", + "label": "Frontend Materialui", + "category": "Frontend", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "frontend-nextjs-wordmark", + "label": "Frontend Nextjs Wordmark", + "category": "Frontend", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "frontend-nextjs", + "label": "Frontend Nextjs", + "category": "Frontend", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "frontend-nuxtjs", + "label": "Frontend Nuxtjs", + "category": "Frontend", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "frontend-preact", + "label": "Frontend Preact", + "category": "Frontend", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "frontend-react-query", + "label": "Frontend React Query", + "category": "Frontend", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "frontend-reactjs", + "label": "Frontend Reactjs", + "category": "Frontend", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "frontend-reactrouter", + "label": "Frontend Reactrouter", + "category": "Frontend", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "frontend-remix-dark-wordmark", + "label": "Frontend Remix Dark Wordmark", + "category": "Frontend", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "frontend-remix-dark", + "label": "Frontend Remix Dark", + "category": "Frontend", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "frontend-remix-light-wordmark", + "label": "Frontend Remix Light Wordmark", + "category": "Frontend", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "frontend-remix-light", + "label": "Frontend Remix Light", + "category": "Frontend", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "frontend-sass", + "label": "Frontend Sass", + "category": "Frontend", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "frontend-shadcnui", + "label": "Frontend Shadcnui", + "category": "Frontend", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "frontend-sveltejs", + "label": "Frontend Sveltejs", + "category": "Frontend", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "frontend-tailwindcss", + "label": "Frontend Tailwindcss", + "category": "Frontend", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "frontend-threejs-dark", + "label": "Frontend Threejs Dark", + "category": "Frontend", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "frontend-threejs-light", + "label": "Frontend Threejs Light", + "category": "Frontend", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "frontend-vitejs", + "label": "Frontend Vitejs", + "category": "Frontend", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "frontend-vuejs", + "label": "Frontend Vuejs", + "category": "Frontend", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "frontend-webpack", + "label": "Frontend Webpack", + "category": "Frontend", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "languages-bash", + "label": "Languages Bash", + "category": "Languages", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "languages-cakephp", + "label": "Languages Cakephp", + "category": "Languages", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "languages-dlang", + "label": "Languages Dlang", + "category": "Languages", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "languages-elixir", + "label": "Languages Elixir", + "category": "Languages", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "languages-erlang", + "label": "Languages Erlang", + "category": "Languages", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "languages-haskell", + "label": "Languages Haskell", + "category": "Languages", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "languages-java", + "label": "Languages Java", + "category": "Languages", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "languages-javascript", + "label": "Languages Javascript", + "category": "Languages", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "languages-json", + "label": "Languages Json", + "category": "Languages", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "languages-kotlin", + "label": "Languages Kotlin", + "category": "Languages", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "languages-markdown", + "label": "Languages Markdown", + "category": "Languages", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "languages-nim", + "label": "Languages Nim", + "category": "Languages", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "languages-php", + "label": "Languages Php", + "category": "Languages", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "languages-powershell", + "label": "Languages Powershell", + "category": "Languages", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "languages-python", + "label": "Languages Python", + "category": "Languages", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "languages-ruby", + "label": "Languages Ruby", + "category": "Languages", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "languages-rust-dark", + "label": "Languages Rust Dark", + "category": "Languages", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "languages-rust-light", + "label": "Languages Rust Light", + "category": "Languages", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "languages-scala", + "label": "Languages Scala", + "category": "Languages", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "languages-solidity", + "label": "Languages Solidity", + "category": "Languages", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "languages-swift", + "label": "Languages Swift", + "category": "Languages", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "languages-typescript", + "label": "Languages Typescript", + "category": "Languages", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "media-bluesky", + "label": "Media Bluesky", + "category": "Media", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "media-cloudinary", + "label": "Media Cloudinary", + "category": "Media", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "media-hotjar", + "label": "Media Hotjar", + "category": "Media", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "media-instagram", + "label": "Media Instagram", + "category": "Media", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "media-mastodon", + "label": "Media Mastodon", + "category": "Media", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "media-redux-saga", + "label": "Media Redux Saga", + "category": "Media", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "media-stream", + "label": "Media Stream", + "category": "Media", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "media-telegram", + "label": "Media Telegram", + "category": "Media", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "media-threads-dark", + "label": "Media Threads Dark", + "category": "Media", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "media-threads-light", + "label": "Media Threads Light", + "category": "Media", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "media-vk", + "label": "Media Vk", + "category": "Media", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "media-x-dark", + "label": "Media X Dark", + "category": "Media", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "media-x-light", + "label": "Media X Light", + "category": "Media", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "media-youtube-wordmark", + "label": "Media Youtube Wordmark", + "category": "Media", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "media-youtube", + "label": "Media Youtube", + "category": "Media", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "native-app-android", + "label": "Native App Android", + "category": "Native-App", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "native-app-flutter", + "label": "Native App Flutter", + "category": "Native-App", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-ansible-wordmark", + "label": "Others Ansible Wordmark", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-ansible", + "label": "Others Ansible", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-anthropic-basic-dark", + "label": "Others Anthropic Basic Dark", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-anthropic-basic-light", + "label": "Others Anthropic Basic Light", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-anthropic", + "label": "Others Anthropic", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-apache", + "label": "Others Apache", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-apple-dark", + "label": "Others Apple Dark", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-apple-light", + "label": "Others Apple Light", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-appwrite", + "label": "Others Appwrite", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-arc", + "label": "Others Arc", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-atlassian", + "label": "Others Atlassian", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-atom", + "label": "Others Atom", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-auth0", + "label": "Others Auth0", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-axiom", + "label": "Others Axiom", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-axure", + "label": "Others Axure", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-azure", + "label": "Others Azure", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-babel", + "label": "Others Babel", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-backbonejs", + "label": "Others Backbonejs", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-bard", + "label": "Others Bard", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-bing", + "label": "Others Bing", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-biome", + "label": "Others Biome", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-bitnami", + "label": "Others Bitnami", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-blueprintjs", + "label": "Others Blueprintjs", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-bootstrap4", + "label": "Others Bootstrap4", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-bootstrap5", + "label": "Others Bootstrap5", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-brave", + "label": "Others Brave", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-bulmaui", + "label": "Others Bulmaui", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-c-plus-plus", + "label": "Others C Plus Plus", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-c-sharp", + "label": "Others C Sharp", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-c", + "label": "Others C", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-canva", + "label": "Others Canva", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-cassandradb", + "label": "Others Cassandradb", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-chatgpt", + "label": "Others Chatgpt", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-chromium", + "label": "Others Chromium", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-circleci", + "label": "Others Circleci", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-claude-ai", + "label": "Others Claude Ai", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-clerk", + "label": "Others Clerk", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-clojure", + "label": "Others Clojure", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-codeigniter", + "label": "Others Codeigniter", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-crystal", + "label": "Others Crystal", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-css", + "label": "Others Css", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-css3", + "label": "Others Css3", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-dart", + "label": "Others Dart", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-datadog", + "label": "Others Datadog", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-deepseek-wordmark", + "label": "Others Deepseek Wordmark", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-deepseek", + "label": "Others Deepseek", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-discord", + "label": "Others Discord", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-django", + "label": "Others Django", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-docusaurus", + "label": "Others Docusaurus", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-dovetail", + "label": "Others Dovetail", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-electron", + "label": "Others Electron", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-elementui", + "label": "Others Elementui", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-ember", + "label": "Others Ember", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-esbuild", + "label": "Others Esbuild", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-eslint", + "label": "Others Eslint", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-expressjs-dark", + "label": "Others Expressjs Dark", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-expressjs-light", + "label": "Others Expressjs Light", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-facebook", + "label": "Others Facebook", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-fast-api", + "label": "Others Fast Api", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-faunadb", + "label": "Others Faunadb", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-flask-dark", + "label": "Others Flask Dark", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-flask-light", + "label": "Others Flask Light", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-flyio", + "label": "Others Flyio", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-go", + "label": "Others Go", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-google-wordmark", + "label": "Others Google Wordmark", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-google", + "label": "Others Google", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-grafana", + "label": "Others Grafana", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-graphite", + "label": "Others Graphite", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-gridsome", + "label": "Others Gridsome", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-gruntjs", + "label": "Others Gruntjs", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-gulp", + "label": "Others Gulp", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-hashnode", + "label": "Others Hashnode", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-hexo", + "label": "Others Hexo", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-hhvm", + "label": "Others Hhvm", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-homebrew", + "label": "Others Homebrew", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-html5", + "label": "Others Html5", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-hyper2", + "label": "Others Hyper2", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-insomnia", + "label": "Others Insomnia", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-internet-explorer", + "label": "Others Internet Explorer", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-invision", + "label": "Others Invision", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-ionic", + "label": "Others Ionic", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-jamstack", + "label": "Others Jamstack", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-jenkins", + "label": "Others Jenkins", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-jest", + "label": "Others Jest", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-jira", + "label": "Others Jira", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-jslint", + "label": "Others Jslint", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-kafka", + "label": "Others Kafka", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-laravel", + "label": "Others Laravel", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-lerna-dark", + "label": "Others Lerna Dark", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-lerna-light", + "label": "Others Lerna Light", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-less", + "label": "Others Less", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-lightroom", + "label": "Others Lightroom", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-linkedin", + "label": "Others Linkedin", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-lit", + "label": "Others Lit", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-liveblocks", + "label": "Others Liveblocks", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-logrocket", + "label": "Others Logrocket", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-lua", + "label": "Others Lua", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-lunacy", + "label": "Others Lunacy", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-marionette", + "label": "Others Marionette", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-messenger", + "label": "Others Messenger", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-mochajs", + "label": "Others Mochajs", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-neovim", + "label": "Others Neovim", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-numpy", + "label": "Others Numpy", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-ocaml", + "label": "Others Ocaml", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-opera", + "label": "Others Opera", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-pandacss", + "label": "Others Pandacss", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-pinia", + "label": "Others Pinia", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-pinterest", + "label": "Others Pinterest", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-pixijs", + "label": "Others Pixijs", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-playwright", + "label": "Others Playwright", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-postman", + "label": "Others Postman", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-prettier", + "label": "Others Prettier", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-prisma", + "label": "Others Prisma", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-pugjs", + "label": "Others Pugjs", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-pwa", + "label": "Others Pwa", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-pytorch", + "label": "Others Pytorch", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-pytorch3d", + "label": "Others Pytorch3d", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-qwik", + "label": "Others Qwik", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-r", + "label": "Others R", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-radixui", + "label": "Others Radixui", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-rails", + "label": "Others Rails", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-reddit-wordmark", + "label": "Others Reddit Wordmark", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-reddit", + "label": "Others Reddit", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-redhat", + "label": "Others Redhat", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-redux", + "label": "Others Redux", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-render", + "label": "Others Render", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-resend", + "label": "Others Resend", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-rollup", + "label": "Others Rollup", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-semanticui", + "label": "Others Semanticui", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-serverless", + "label": "Others Serverless", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-shopware", + "label": "Others Shopware", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-skype", + "label": "Others Skype", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-slack", + "label": "Others Slack", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-solidjs", + "label": "Others Solidjs", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-storyblok", + "label": "Others Storyblok", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-storybook", + "label": "Others Storybook", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-stylelint", + "label": "Others Stylelint", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-sublime", + "label": "Others Sublime", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-swagger", + "label": "Others Swagger", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-terraform", + "label": "Others Terraform", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-tiktok", + "label": "Others Tiktok", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-tinyhttp", + "label": "Others Tinyhttp", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-tor", + "label": "Others Tor", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-twitter", + "label": "Others Twitter", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-ubuntu", + "label": "Others Ubuntu", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-unjs", + "label": "Others Unjs", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-upwork-basic", + "label": "Others Upwork Basic", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-upwork-wordmark", + "label": "Others Upwork Wordmark", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-upwork", + "label": "Others Upwork", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-vagrant", + "label": "Others Vagrant", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-vim", + "label": "Others Vim", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-visualbasic", + "label": "Others Visualbasic", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-vscode", + "label": "Others Vscode", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-webassembly", + "label": "Others Webassembly", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-webrtc", + "label": "Others Webrtc", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-whatsapp", + "label": "Others Whatsapp", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-wordpress", + "label": "Others Wordpress", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-xamarin", + "label": "Others Xamarin", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-xd", + "label": "Others Xd", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-yoga", + "label": "Others Yoga", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "others-zen", + "label": "Others Zen", + "category": "Others", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "productivity-gmail", + "label": "Productivity Gmail", + "category": "Productivity", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "productivity-lokalise", + "label": "Productivity Lokalise", + "category": "Productivity", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "productivity-notion", + "label": "Productivity Notion", + "category": "Productivity", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "productivity-onedrive", + "label": "Productivity Onedrive", + "category": "Productivity", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + }, + { + "id": "productivity-outlook", + "label": "Productivity Outlook", + "category": "Productivity", + "svgContent": "", + "defaultWidth": 160, + "defaultHeight": 96, + "nodeType": "custom", + "defaultData": {} + } + ] +} diff --git a/docs-site/.astro/data-store.json b/docs-site/.astro/data-store.json index 9d423fe8..e0ac44d7 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\":\"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 & 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 & 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 & 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 & 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 & 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 & 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 & 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 & Branding\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"/templates-assets/\">Templates & 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: "My Architecture"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 = `flow: "My Architecture"direction: LR[browser] client: Web App[system] api: API Server[system] db: PostgreSQLclient -> api |HTTP|api -> db |SQL|`;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\"><!-- 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 & 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 & 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 & 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 & 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 "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\">\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: "User Signup"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: "Signup Form"]node verify [label: "Verify Email"]node success [label: "Workspace Ready", 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 & 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 & 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 & 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 & 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 & 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 & 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 & 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: "Kullanıcı Kaydı"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: "Kayıt Formu"]node verify [label: "E-postayı Doğrula"]node success [label: "Çalışma Alanı Hazır", 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 & 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 & 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 +[["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\":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,52,53,93,94,140,141,168,169,200,201,235,236,260,261,300,301,339,340,369,370,397,398,426,427,454,455,498,499,547,548,590,591,619,620,653,654,685,686,720,721,753,754,785,786,824,825,858,859,890,891,936,937,968,969,1013,1014,1059,1060,1081,1082,1116,1117,1158,1159,1190,1191,1220,1221,1251,1252,1287,1288,1314,1315,1345,1346,1370,1371,1415,1416,1439,1440,1463,1464,1487,1488,1518,1519,1542,1543,1566,1567,1590,1591,1628,1629,1655,1656,1677,1678,1699,1700,1724,1725,1758,1759,1800,1801,1821,1822,1851,1852,1878,1879,1917,1918,1950,1951,1975,1976,2005,2006,2030,2031,2061,2062,2112,2113,2133,2134,2163,2164,2185,2186,2209,2210,2240,2241],"architecture-lint",{"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},"Architecture Linting","Define JSON-based architecture rules in Studio and highlight diagram violations in real time.",true,[],"doc",{"hidden":20,"attrs":21},false,{},"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":26,"metadata":27},"\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 & Compare\u003C/a>\u003C/li>\n\u003C/ul>",{"headings":28,"localImagePaths":48,"remoteImagePaths":49,"frontmatter":50,"imagePaths":51},[29,33,36,39,42,45],{"depth":30,"slug":31,"text":32},2,"where-it-lives","Where it lives",{"depth":30,"slug":34,"text":35},"what-it-does","What it does",{"depth":30,"slug":37,"text":38},"why-this-matters","Why this matters",{"depth":30,"slug":40,"text":41},"practical-workflow","Practical workflow",{"depth":30,"slug":43,"text":44},"best-use-cases","Best use cases",{"depth":30,"slug":46,"text":47},"related-pages","Related pages",[],[],{"draft":20,"title":14,"description":15},[],"ai-generation",{"id":52,"data":54,"body":60,"filePath":61,"digest":62,"rendered":63},{"title":55,"description":56,"editUrl":16,"head":57,"template":18,"sidebar":58,"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":59},{},"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## Access and setup\n\nFlowpilot 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.\n\nThat matters for two reasons:\n\n- the same AI settings surface is used across the product\n- provider choice, model choice, and key storage behavior stay consistent whether you open AI from Home, Studio, or Settings\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\nAPI 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.\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","816867ac05da3ab4",{"html":64,"metadata":65},"\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=\"access-and-setup\">Access and setup\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#access-and-setup\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Access and setup”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>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.\u003C/p>\n\u003Cp>That matters for two reasons:\u003C/p>\n\u003Cul>\n\u003Cli>the same AI settings surface is used across the product\u003C/li>\n\u003Cli>provider choice, model choice, and key storage behavior stay consistent whether you open AI from Home, Studio, or Settings\u003C/li>\n\u003C/ul>\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\u003Cp>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.\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":66,"localImagePaths":89,"remoteImagePaths":90,"frontmatter":91,"imagePaths":92},[67,70,73,76,79,82,85,88],{"depth":30,"slug":68,"text":69},"access-and-setup","Access and setup",{"depth":30,"slug":71,"text":72},"where-ai-lives-in-the-product","Where AI lives in the product",{"depth":30,"slug":74,"text":75},"provider-model","Provider model",{"depth":30,"slug":77,"text":78},"when-ai-is-the-right-tool","When AI is the right tool",{"depth":30,"slug":80,"text":81},"how-to-get-better-results","How to get better results",{"depth":30,"slug":83,"text":84},"recommended-workflow","Recommended workflow",{"depth":30,"slug":86,"text":87},"practical-caution","Practical caution",{"depth":30,"slug":46,"text":47},[],[],{"draft":20,"title":55,"description":56},[],"canvas-basics",{"id":93,"data":95,"body":101,"filePath":102,"digest":103,"rendered":104},{"title":96,"description":97,"editUrl":16,"head":98,"template":18,"sidebar":99,"pagefind":16,"draft":20},"Canvas Basics","Learn how to move, select, edit, and recover work on the OpenFlowKit canvas.",[],{"hidden":20,"attrs":100},{},"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":105,"metadata":106},"\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 & History\u003C/a>.\u003C/p>",{"headings":107,"localImagePaths":136,"remoteImagePaths":137,"frontmatter":138,"imagePaths":139},[108,111,114,118,121,124,127,130,133],{"depth":30,"slug":109,"text":110},"when-to-use-the-canvas","When to use the canvas",{"depth":30,"slug":112,"text":113},"navigation","Navigation",{"depth":115,"slug":116,"text":117},3,"pan-and-zoom","Pan and zoom",{"depth":115,"slug":119,"text":120},"move-around-large-diagrams","Move around large diagrams",{"depth":30,"slug":122,"text":123},"selecting-things","Selecting things",{"depth":115,"slug":125,"text":126},"single-selection","Single selection",{"depth":115,"slug":128,"text":129},"multi-selection","Multi-selection",{"depth":30,"slug":131,"text":132},"direct-manipulation-vs-exact-editing","Direct manipulation vs exact editing",{"depth":30,"slug":134,"text":135},"history-and-recovery","History and recovery",[],[],{"draft":20,"title":96,"description":97},[],"choose-export-format",{"id":140,"data":142,"body":148,"filePath":149,"digest":150,"rendered":151},{"title":143,"description":144,"editUrl":16,"head":145,"template":18,"sidebar":146,"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":147},{},"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":152,"metadata":153},"\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":154,"localImagePaths":164,"remoteImagePaths":165,"frontmatter":166,"imagePaths":167},[155,158,161],{"depth":30,"slug":156,"text":157},"quick-guide","Quick guide",{"depth":30,"slug":159,"text":160},"rules-of-thumb","Rules of thumb",{"depth":30,"slug":162,"text":163},"default-recommendation","Default recommendation",[],[],{"draft":20,"title":143,"description":144},[],"collaboration-sharing",{"id":168,"data":170,"body":176,"filePath":177,"digest":178,"rendered":179},{"title":171,"description":172,"editUrl":16,"head":173,"template":18,"sidebar":174,"pagefind":16,"draft":20},"Collaboration & Sharing","Share room links, understand local-only fallback behavior, and use OpenFlowKit collaboration features safely.",[],{"hidden":20,"attrs":175},{},"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":180,"metadata":181},"\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":182,"localImagePaths":196,"remoteImagePaths":197,"frontmatter":198,"imagePaths":199},[183,186,189,192,195],{"depth":30,"slug":184,"text":185},"what-the-share-flow-includes","What the share flow includes",{"depth":30,"slug":187,"text":188},"current-collaboration-model","Current collaboration model",{"depth":30,"slug":190,"text":191},"how-to-use-it-well","How to use it well",{"depth":30,"slug":193,"text":194},"when-to-use-sharing-vs-exporting","When to use sharing vs exporting",{"depth":30,"slug":46,"text":47},[],[],{"draft":20,"title":171,"description":172},[],"design-systems-branding",{"id":200,"data":202,"body":208,"filePath":209,"digest":210,"rendered":211},{"title":203,"description":204,"editUrl":16,"head":205,"template":18,"sidebar":206,"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":207},{},"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":212,"metadata":213},"\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 & Starter Flows\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"/command-center/\">Command Center\u003C/a>\u003C/li>\n\u003C/ul>",{"headings":214,"localImagePaths":231,"remoteImagePaths":232,"frontmatter":233,"imagePaths":234},[215,218,221,224,227,230],{"depth":30,"slug":216,"text":217},"what-the-design-system-flow-supports","What the design-system flow supports",{"depth":30,"slug":219,"text":220},"when-to-use-it","When to use it",{"depth":30,"slug":222,"text":223},"import-and-export","Import and export",{"depth":30,"slug":225,"text":226},"relationship-to-figma","Relationship to Figma",{"depth":30,"slug":228,"text":229},"recommended-pattern","Recommended pattern",{"depth":30,"slug":46,"text":47},[],[],{"draft":20,"title":203,"description":204},[],"choose-input-mode",{"id":235,"data":237,"body":243,"filePath":244,"digest":245,"rendered":246},{"title":238,"description":239,"editUrl":16,"head":240,"template":18,"sidebar":241,"pagefind":16,"draft":20},"Choose an Input Mode","Decide when to use templates, AI, OpenFlow DSL, Mermaid, structured imports, or direct canvas editing.",[],{"hidden":20,"attrs":242},{},"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.\n\n## Quick guide\n\n| If you have... | Start with... |\n| --- | --- |\n| a common builder workflow you want to adapt quickly | [Templates & Starter Flows](/templates-assets/) |\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 templates when the shape is familiar but the exact labels are not.\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- Starting from a blank canvas when a starter template is already close to the workflow.\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. 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.","src/content/docs/choose-input-mode.md","9561d72fd35e0afb",{"html":247,"metadata":248},"\u003Cp>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.\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>If you have…\u003C/th>\u003Cth>Start with…\u003C/th>\u003C/tr>\u003C/thead>\u003Ctbody>\u003Ctr>\u003Ctd>a common builder workflow you want to adapt quickly\u003C/td>\u003Ctd>\u003Ca href=\"/templates-assets/\">Templates & Starter Flows\u003C/a>\u003C/td>\u003C/tr>\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 templates when the shape is familiar but the exact labels are not.\u003C/li>\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>Starting from a blank canvas when a starter template is already close to the workflow.\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. 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.\u003C/p>",{"headings":249,"localImagePaths":256,"remoteImagePaths":257,"frontmatter":258,"imagePaths":259},[250,251,252,255],{"depth":30,"slug":156,"text":157},{"depth":30,"slug":159,"text":160},{"depth":30,"slug":253,"text":254},"common-mistakes","Common mistakes",{"depth":30,"slug":228,"text":229},[],[],{"draft":20,"title":238,"description":239},[],"command-center",{"id":260,"data":262,"body":268,"filePath":269,"digest":270,"rendered":271},{"title":263,"description":264,"editUrl":16,"head":265,"template":18,"sidebar":266,"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":267},{},"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","50e002784b6b2ffb",{"html":272,"metadata":273},"\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":274,"localImagePaths":296,"remoteImagePaths":297,"frontmatter":298,"imagePaths":299},[275,278,281,284,287,290,293],{"depth":30,"slug":276,"text":277},"root-commands","Root commands",{"depth":30,"slug":279,"text":280},"views-inside-the-command-center","Views inside the Command Center",{"depth":115,"slug":282,"text":283},"assets","Assets",{"depth":115,"slug":285,"text":286},"templates","Templates",{"depth":115,"slug":288,"text":289},"search","Search",{"depth":115,"slug":291,"text":292},"design-systems","Design Systems",{"depth":30,"slug":294,"text":295},"how-it-fits-with-the-rest-of-the-editor","How it fits with the rest of the editor",[],[],{"draft":20,"title":263,"description":264},[],"aws-architecture",{"id":300,"data":302,"body":308,"filePath":309,"digest":310,"rendered":311},{"title":303,"description":304,"editUrl":16,"head":305,"template":18,"sidebar":306,"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":307},{},"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":312,"metadata":313},"\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 & 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":314,"localImagePaths":335,"remoteImagePaths":336,"frontmatter":337,"imagePaths":338},[315,318,321,322,325,328,331,334],{"depth":30,"slug":316,"text":317},"best-starting-points","Best starting points",{"depth":30,"slug":319,"text":320},"how-to-choose-the-starting-point","How to choose the starting point",{"depth":30,"slug":83,"text":84},{"depth":30,"slug":323,"text":324},"asset-strategy","Asset strategy",{"depth":30,"slug":326,"text":327},"example-prompt","Example prompt",{"depth":30,"slug":329,"text":330},"when-to-use-openflow-dsl-instead","When to use OpenFlow DSL instead",{"depth":30,"slug":332,"text":333},"export-recommendation","Export recommendation",{"depth":30,"slug":46,"text":47},[],[],{"draft":20,"title":303,"description":304},[],"ask-flowpilot",{"id":339,"data":341,"body":347,"filePath":348,"digest":349,"rendered":350},{"title":342,"description":343,"editUrl":16,"head":344,"template":18,"sidebar":345,"pagefind":16,"draft":20},"Ask Flowpilot","Use Flowpilot as the chat-based Studio assistant for drafting, revising, and explaining diagrams.",[],{"hidden":20,"attrs":346},{},"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","1cc3bd190997a9ac",{"html":351,"metadata":352},"\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":353,"localImagePaths":365,"remoteImagePaths":366,"frontmatter":367,"imagePaths":368},[354,357,360,361,364],{"depth":30,"slug":355,"text":356},"good-use-cases","Good use cases",{"depth":30,"slug":358,"text":359},"what-to-include-in-your-prompt","What to include in your prompt",{"depth":30,"slug":326,"text":327},{"depth":30,"slug":362,"text":363},"what-to-do-after-generation","What to do after generation",{"depth":30,"slug":46,"text":47},[],[],{"draft":20,"title":342,"description":343},[],"figma-design-import",{"id":369,"data":371,"body":377,"filePath":378,"digest":379,"rendered":380},{"title":372,"description":373,"editUrl":16,"head":374,"template":18,"sidebar":375,"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":376},{},"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":381,"metadata":382},"\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 & Branding\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"/templates-assets/\">Templates & Starter Flows\u003C/a>\u003C/li>\n\u003C/ul>",{"headings":383,"localImagePaths":393,"remoteImagePaths":394,"frontmatter":395,"imagePaths":396},[384,387,390,391,392],{"depth":30,"slug":385,"text":386},"what-you-need","What you need",{"depth":30,"slug":388,"text":389},"what-the-import-previews","What the import previews",{"depth":30,"slug":43,"text":44},{"depth":30,"slug":83,"text":84},{"depth":30,"slug":46,"text":47},[],[],{"draft":20,"title":372,"description":373},[],"diagram-families",{"id":397,"data":399,"body":405,"filePath":406,"digest":407,"rendered":408},{"title":400,"description":401,"editUrl":16,"head":402,"template":18,"sidebar":403,"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":404},{},"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":409,"metadata":410},"\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":411,"localImagePaths":422,"remoteImagePaths":423,"frontmatter":424,"imagePaths":425},[412,415,418,421],{"depth":30,"slug":413,"text":414},"families-in-the-current-editor","Families in the current editor",{"depth":30,"slug":416,"text":417},"how-to-choose","How to choose",{"depth":30,"slug":419,"text":420},"why-it-matters","Why it matters",{"depth":30,"slug":46,"text":47},[],[],{"draft":20,"title":400,"description":401},[],"diagram-diff",{"id":426,"data":428,"body":434,"filePath":435,"digest":436,"rendered":437},{"title":429,"description":430,"editUrl":16,"head":431,"template":18,"sidebar":432,"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":433},{},"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","cc31e25407525e99",{"html":438,"metadata":439},"\u003Cp>Diagram Diff & 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 & 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":440,"localImagePaths":450,"remoteImagePaths":451,"frontmatter":452,"imagePaths":453},[441,444,447,448,449],{"depth":30,"slug":442,"text":443},"what-compare-mode-shows","What compare mode shows",{"depth":30,"slug":445,"text":446},"why-it-is-valuable","Why it is valuable",{"depth":30,"slug":83,"text":84},{"depth":30,"slug":355,"text":356},{"depth":30,"slug":46,"text":47},[],[],{"draft":20,"title":429,"description":430},[],"exporting",{"id":454,"data":456,"body":462,"filePath":463,"digest":464,"rendered":465},{"title":457,"description":458,"editUrl":16,"head":459,"template":18,"sidebar":460,"pagefind":16,"draft":20},"Exporting","Export diagrams from OpenFlowKit as images, cinematic media, JSON, code formats, design-tool handoff, or share/embed links.",[],{"hidden":20,"attrs":461},{},"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### Cinematic video and GIF\n\nUse 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.\n\nThese exports are presentation-oriented. Keep JSON as the editable master if you may need to revise the underlying diagram later.\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","81d2cd2d8aea1ead",{"html":466,"metadata":467},"\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=\"cinematic-video-and-gif\">Cinematic video and GIF\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#cinematic-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 “Cinematic video and GIF”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>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.\u003C/p>\n\u003Cp>These exports are presentation-oriented. Keep JSON as the editable master if you may need to revise the underlying diagram later.\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 & Sharing\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"/github-embed/\">Embed Diagrams in GitHub\u003C/a>\u003C/li>\n\u003C/ul>",{"headings":468,"localImagePaths":494,"remoteImagePaths":495,"frontmatter":496,"imagePaths":497},[469,472,475,478,481,484,487,490,493],{"depth":30,"slug":470,"text":471},"downloaded-file-exports","Downloaded file exports",{"depth":115,"slug":473,"text":474},"png-and-jpg","PNG and JPG",{"depth":115,"slug":476,"text":477},"svg","SVG",{"depth":115,"slug":479,"text":480},"json","JSON",{"depth":115,"slug":482,"text":483},"cinematic-video-and-gif","Cinematic video and GIF",{"depth":30,"slug":485,"text":486},"clipboard-oriented-exports","Clipboard-oriented exports",{"depth":30,"slug":488,"text":489},"sharing","Sharing",{"depth":30,"slug":491,"text":492},"recommended-export-pattern","Recommended export pattern",{"depth":30,"slug":46,"text":47},[],[],{"draft":20,"title":457,"description":458},[],"github-embed",{"id":498,"data":500,"body":506,"filePath":507,"digest":508,"rendered":509},{"title":501,"description":502,"editUrl":16,"head":503,"template":18,"sidebar":504,"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":505},{},"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":510,"metadata":511},"\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: "My Architecture"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 = `flow: "My Architecture"direction: LR[browser] client: Web App[system] api: API Server[system] db: PostgreSQLclient -> api |HTTP|api -> db |SQL|`;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\"><!-- 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":512,"localImagePaths":543,"remoteImagePaths":544,"frontmatter":545,"imagePaths":546},[513,516,519,522,525,528,531,534,537,540],{"depth":30,"slug":514,"text":515},"how-it-works","How it works",{"depth":30,"slug":517,"text":518},"when-this-is-useful","When this is useful",{"depth":30,"slug":520,"text":521},"step-by-step","Step-by-step",{"depth":115,"slug":523,"text":524},"1-write-your-diagram-in-openflow-dsl","1. Write your diagram in OpenFlow DSL",{"depth":115,"slug":526,"text":527},"2-encode-it","2. Encode it",{"depth":115,"slug":529,"text":530},"3-embed-in-your-readme","3. Embed in your README",{"depth":30,"slug":532,"text":533},"updating-diagrams","Updating diagrams",{"depth":30,"slug":535,"text":536},"encoding-helper","Encoding helper",{"depth":30,"slug":538,"text":539},"supported-dsl-features","Supported DSL features",{"depth":30,"slug":541,"text":542},"related-reading","Related reading",[],[],{"draft":20,"title":501,"description":502},[],"introduction",{"id":547,"data":549,"body":555,"filePath":556,"digest":557,"rendered":558},{"title":550,"description":551,"editUrl":16,"head":552,"template":18,"sidebar":553,"pagefind":16,"draft":20},"Introduction","OpenFlowKit is a local-first diagramming workspace for developers and builders working on technical flows, architecture maps, code-backed diagrams, and AI-assisted editing.",[],{"hidden":20,"attrs":554},{},"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.\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- move quickly from Mermaid, SQL, OpenAPI, infrastructure files, or a builder-oriented starter template\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","d6007af358b94080",{"html":559,"metadata":560},"\u003Cp>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.\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>move quickly from Mermaid, SQL, OpenAPI, infrastructure files, or a builder-oriented starter template\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":561,"localImagePaths":586,"remoteImagePaths":587,"frontmatter":588,"imagePaths":589},[562,565,568,571,574,577,580,583],{"depth":30,"slug":563,"text":564},"what-openflowkit-is-good-at","What OpenFlowKit is good at",{"depth":30,"slug":566,"text":567},"core-product-surfaces","Core product surfaces",{"depth":30,"slug":569,"text":570},"diagram-families-in-the-app","Diagram families in the app",{"depth":30,"slug":572,"text":573},"core-product-concepts","Core product concepts",{"depth":115,"slug":575,"text":576},"local-first-by-default","Local-first by default",{"depth":115,"slug":578,"text":579},"multiple-input-modes","Multiple input modes",{"depth":115,"slug":581,"text":582},"editable-outputs","Editable outputs",{"depth":30,"slug":584,"text":585},"start-here","Start here",[],[],{"draft":20,"title":550,"description":551},[],"import-from-data",{"id":590,"data":592,"body":598,"filePath":599,"digest":600,"rendered":601},{"title":593,"description":594,"editUrl":16,"head":595,"template":18,"sidebar":596,"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":597},{},"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","81f0f007f63ae34d",{"html":602,"metadata":603},"\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":604,"localImagePaths":615,"remoteImagePaths":616,"frontmatter":617,"imagePaths":618},[605,606,609,612],{"depth":30,"slug":514,"text":515},{"depth":30,"slug":607,"text":608},"sql-ddl--entity-relationship-diagram","SQL DDL → Entity-Relationship Diagram",{"depth":30,"slug":610,"text":611},"openapi-and-service-structure-imports","OpenAPI and service-structure imports",{"depth":30,"slug":613,"text":614},"when-to-choose-this-flow","When to choose this flow",[],[],{"draft":20,"title":593,"description":594},[],"infra-sync",{"id":619,"data":621,"body":627,"filePath":628,"digest":629,"rendered":630},{"title":622,"description":623,"editUrl":16,"head":624,"template":18,"sidebar":625,"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":626},{},"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":631,"metadata":632},"\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 & Compare\u003C/a>\u003C/li>\n\u003C/ul>",{"headings":633,"localImagePaths":649,"remoteImagePaths":650,"frontmatter":651,"imagePaths":652},[634,637,638,641,644,647,648],{"depth":30,"slug":635,"text":636},"supported-formats","Supported formats",{"depth":30,"slug":219,"text":220},{"depth":30,"slug":639,"text":640},"why-it-is-different-from-ai-import","Why it is different from AI import",{"depth":30,"slug":642,"text":643},"how-to-use-it","How to use it",{"depth":30,"slug":645,"text":646},"after-import","After import",{"depth":30,"slug":43,"text":44},{"depth":30,"slug":46,"text":47},[],[],{"title":622,"description":623},[],"local-first-diagramming",{"id":653,"data":655,"body":661,"filePath":662,"digest":663,"rendered":664},{"title":656,"description":657,"editUrl":16,"head":658,"template":18,"sidebar":659,"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":660},{},"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- refreshes and browser restarts should restore your saved documents instead of resetting to a blank canvas\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\nOpenFlowKit 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.\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 stays on the current device\n\nBy default, OpenFlowKit keeps these things in browser-local storage on the current device:\n\n- saved diagrams and tabs\n- document-oriented chat history for Flowpilot sessions\n- persistent AI settings when you choose persistent storage\n- local workspace preferences\n\nSession-only secrets can still be kept for just the current browser session when you prefer that behavior.\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","3b0df086a7b8a264",{"html":665,"metadata":666},"\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>refreshes and browser restarts should restore your saved documents instead of resetting to a blank canvas\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\u003Cp>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.\u003C/p>\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-stays-on-the-current-device\">What stays on the current device\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#what-stays-on-the-current-device\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.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 stays on the current device”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>By default, OpenFlowKit keeps these things in browser-local storage on the current device:\u003C/p>\n\u003Cul>\n\u003Cli>saved diagrams and tabs\u003C/li>\n\u003Cli>document-oriented chat history for Flowpilot sessions\u003C/li>\n\u003Cli>persistent AI settings when you choose persistent storage\u003C/li>\n\u003Cli>local workspace preferences\u003C/li>\n\u003C/ul>\n\u003Cp>Session-only secrets can still be kept for just the current browser session when you prefer that behavior.\u003C/p>\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 & Sharing\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"/choose-export-format/\">Choose an Export Format\u003C/a>\u003C/li>\n\u003C/ul>",{"headings":667,"localImagePaths":681,"remoteImagePaths":682,"frontmatter":683,"imagePaths":684},[668,671,672,675,678],{"depth":30,"slug":669,"text":670},"what-local-first-means-here","What local-first means here",{"depth":30,"slug":419,"text":420},{"depth":30,"slug":673,"text":674},"what-stays-on-the-current-device","What stays on the current device",{"depth":30,"slug":676,"text":677},"what-it-does-not-mean","What it does not mean",{"depth":30,"slug":679,"text":680},"recommended-next-reads","Recommended next reads",[],[],{"draft":20,"title":656,"description":657},[],"keyboard-shortcuts",{"id":685,"data":687,"body":693,"filePath":694,"digest":695,"rendered":696},{"title":688,"description":689,"editUrl":16,"head":690,"template":18,"sidebar":691,"pagefind":16,"draft":20},"Keyboard Shortcuts","Reference the current keyboard shortcuts for editing, navigation, and diagram authoring in OpenFlowKit.",[],{"hidden":20,"attrs":692},{},"These are the current shortcut groups shown in 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` or `Ctrl + Y` |\n| Select all | `Cmd + A` | `Ctrl + A` |\n| Delete selection | `Delete` | `Backspace` |\n| Clear selection | `Escape` | `Escape` |\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| Copy style | `Cmd + Opt + C` | `Ctrl + Alt + C` |\n| Paste style | `Cmd + Opt + V` | `Ctrl + Alt + V` |\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| Quick-create connected node | `Opt + Arrow` | `Alt + Arrow` |\n| Annotation colors | `1` `2` `3` `4` `5` `6` | `1` `2` `3` `4` `5` `6` |\n\n## Navigation\n\n| Action | macOS | Windows/Linux |\n| --- | --- | --- |\n| Select tool | `V` | `V` |\n| Hand tool | `H` | `H` |\n| Pan canvas | `Space + Drag` | `Space + Drag` |\n| Zoom in | `Cmd + +` | `Ctrl + +` |\n| Zoom out | `Cmd + -` | `Ctrl + -` |\n| Fit view | `Shift + 1` | `Shift + 1` |\n| Nudge node | `Arrow` or `Shift + Arrow` | `Arrow` or `Shift + Arrow` |\n\n## Help\n\n| Action | macOS | Windows/Linux |\n| --- | --- | --- |\n| Keyboard shortcuts | `?` | `?` |\n| Open Command Center | `Cmd + K` | `Ctrl + K` |\n| Search nodes | `Cmd + F` | `Ctrl + F` |\n\n## Notes\n\n- Shortcut availability depends on editor focus, current mode, and selection state.\n- Mind map shortcuts only apply when a mind map node is selected.\n- Annotation color shortcuts only apply when an annotation node is selected.\n- Use the [Command Center](/command-center/) for actions that do not need a dedicated shortcut.","src/content/docs/keyboard-shortcuts.md","8cd9d020efd128c4",{"html":697,"metadata":698},"\u003Cp>These are the current shortcut groups shown in 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\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> or \u003Ccode dir=\"auto\">Ctrl + Y\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>\u003Ctr>\u003Ctd>Clear selection\u003C/td>\u003Ctd>\u003Ccode dir=\"auto\">Escape\u003C/code>\u003C/td>\u003Ctd>\u003Ccode dir=\"auto\">Escape\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\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>Copy style\u003C/td>\u003Ctd>\u003Ccode dir=\"auto\">Cmd + Opt + C\u003C/code>\u003C/td>\u003Ctd>\u003Ccode dir=\"auto\">Ctrl + Alt + C\u003C/code>\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>Paste style\u003C/td>\u003Ctd>\u003Ccode dir=\"auto\">Cmd + Opt + V\u003C/code>\u003C/td>\u003Ctd>\u003Ccode dir=\"auto\">Ctrl + Alt + V\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\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>\u003Ctr>\u003Ctd>Quick-create connected node\u003C/td>\u003Ctd>\u003Ccode dir=\"auto\">Opt + Arrow\u003C/code>\u003C/td>\u003Ctd>\u003Ccode dir=\"auto\">Alt + Arrow\u003C/code>\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>Annotation colors\u003C/td>\u003Ctd>\u003Ccode dir=\"auto\">1\u003C/code> \u003Ccode dir=\"auto\">2\u003C/code> \u003Ccode dir=\"auto\">3\u003C/code> \u003Ccode dir=\"auto\">4\u003C/code> \u003Ccode dir=\"auto\">5\u003C/code> \u003Ccode dir=\"auto\">6\u003C/code>\u003C/td>\u003Ctd>\u003Ccode dir=\"auto\">1\u003C/code> \u003Ccode dir=\"auto\">2\u003C/code> \u003Ccode dir=\"auto\">3\u003C/code> \u003Ccode dir=\"auto\">4\u003C/code> \u003Ccode dir=\"auto\">5\u003C/code> \u003Ccode dir=\"auto\">6\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\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>Select tool\u003C/td>\u003Ctd>\u003Ccode dir=\"auto\">V\u003C/code>\u003C/td>\u003Ctd>\u003Ccode dir=\"auto\">V\u003C/code>\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>Hand tool\u003C/td>\u003Ctd>\u003Ccode dir=\"auto\">H\u003C/code>\u003C/td>\u003Ctd>\u003Ccode dir=\"auto\">H\u003C/code>\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>Pan canvas\u003C/td>\u003Ctd>\u003Ccode dir=\"auto\">Space + Drag\u003C/code>\u003C/td>\u003Ctd>\u003Ccode dir=\"auto\">Space + Drag\u003C/code>\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>Zoom in\u003C/td>\u003Ctd>\u003Ccode dir=\"auto\">Cmd + +\u003C/code>\u003C/td>\u003Ctd>\u003Ccode dir=\"auto\">Ctrl + +\u003C/code>\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>Zoom out\u003C/td>\u003Ctd>\u003Ccode dir=\"auto\">Cmd + -\u003C/code>\u003C/td>\u003Ctd>\u003Ccode dir=\"auto\">Ctrl + -\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>\u003Ctr>\u003Ctd>Nudge node\u003C/td>\u003Ctd>\u003Ccode dir=\"auto\">Arrow\u003C/code> or \u003Ccode dir=\"auto\">Shift + Arrow\u003C/code>\u003C/td>\u003Ctd>\u003Ccode dir=\"auto\">Arrow\u003C/code> or \u003Ccode dir=\"auto\">Shift + Arrow\u003C/code>\u003C/td>\u003C/tr>\u003C/tbody>\u003C/table>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"help\">Help\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#help\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Help”\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>Keyboard shortcuts\u003C/td>\u003Ctd>\u003Ccode dir=\"auto\">?\u003C/code>\u003C/td>\u003Ctd>\u003Ccode dir=\"auto\">?\u003C/code>\u003C/td>\u003C/tr>\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>Search nodes\u003C/td>\u003Ctd>\u003Ccode dir=\"auto\">Cmd + F\u003C/code>\u003C/td>\u003Ctd>\u003Ccode dir=\"auto\">Ctrl + F\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, current mode, and selection state.\u003C/li>\n\u003Cli>Mind map shortcuts only apply when a mind map node is selected.\u003C/li>\n\u003Cli>Annotation color shortcuts only apply when an annotation node is selected.\u003C/li>\n\u003Cli>Use the \u003Ca href=\"/command-center/\">Command Center\u003C/a> for actions that do not need a dedicated shortcut.\u003C/li>\n\u003C/ul>",{"headings":699,"localImagePaths":716,"remoteImagePaths":717,"frontmatter":718,"imagePaths":719},[700,703,706,709,710,713],{"depth":30,"slug":701,"text":702},"essentials","Essentials",{"depth":30,"slug":704,"text":705},"manipulation","Manipulation",{"depth":30,"slug":707,"text":708},"nodes","Nodes",{"depth":30,"slug":112,"text":113},{"depth":30,"slug":711,"text":712},"help","Help",{"depth":30,"slug":714,"text":715},"notes","Notes",[],[],{"draft":20,"title":688,"description":689},[],"mermaid-integration",{"id":720,"data":722,"body":728,"filePath":729,"digest":730,"rendered":731},{"title":723,"description":724,"editUrl":16,"head":725,"template":18,"sidebar":726,"pagefind":16,"draft":20},"Mermaid Integration","Import, edit, validate, and export Mermaid while keeping OpenFlowKit as the visual editing workspace.",[],{"hidden":20,"attrs":727},{},"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":732,"metadata":733},"\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":734,"localImagePaths":749,"remoteImagePaths":750,"frontmatter":751,"imagePaths":752},[735,738,741,744,747,748],{"depth":30,"slug":736,"text":737},"what-mermaid-support-is-for","What Mermaid support is for",{"depth":30,"slug":739,"text":740},"mermaid-in-studio","Mermaid in Studio",{"depth":30,"slug":742,"text":743},"mermaid-export","Mermaid export",{"depth":30,"slug":745,"text":746},"fidelity-expectations","Fidelity expectations",{"depth":30,"slug":228,"text":229},{"depth":30,"slug":46,"text":47},[],[],{"draft":20,"title":723,"description":724},[],"mermaid-vs-openflow",{"id":753,"data":755,"body":761,"filePath":762,"digest":763,"rendered":764},{"title":756,"description":757,"editUrl":16,"head":758,"template":18,"sidebar":759,"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":760},{},"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":765,"metadata":766},"\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":767,"localImagePaths":781,"remoteImagePaths":782,"frontmatter":783,"imagePaths":784},[768,771,774,777,780],{"depth":30,"slug":769,"text":770},"choose-mermaid-when","Choose Mermaid when",{"depth":30,"slug":772,"text":773},"choose-openflow-dsl-when","Choose OpenFlow DSL when",{"depth":30,"slug":775,"text":776},"the-real-difference","The real difference",{"depth":30,"slug":778,"text":779},"recommended-team-pattern","Recommended team pattern",{"depth":30,"slug":46,"text":47},[],[],{"draft":20,"title":756,"description":757},[],"node-types",{"id":785,"data":787,"body":793,"filePath":794,"digest":795,"rendered":796},{"title":788,"description":789,"editUrl":16,"head":790,"template":18,"sidebar":791,"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":792},{},"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":797,"metadata":798},"\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 & Starter Flows\u003C/a>\u003C/li>\n\u003C/ul>",{"headings":799,"localImagePaths":820,"remoteImagePaths":821,"frontmatter":822,"imagePaths":823},[800,803,806,809,812,815,818,819],{"depth":30,"slug":801,"text":802},"core-node-families","Core node families",{"depth":115,"slug":804,"text":805},"flow-nodes","Flow nodes",{"depth":115,"slug":807,"text":808},"mind-map-nodes","Mind map nodes",{"depth":115,"slug":810,"text":811},"architecture-and-asset-backed-nodes","Architecture and asset-backed nodes",{"depth":115,"slug":813,"text":814},"journey-and-experience-nodes","Journey and experience nodes",{"depth":115,"slug":816,"text":817},"media-and-wireframe-nodes","Media and wireframe nodes",{"depth":30,"slug":416,"text":417},{"depth":30,"slug":46,"text":47},[],[],{"draft":20,"title":788,"description":789},[],"openflow-dsl",{"id":824,"data":826,"body":832,"filePath":833,"digest":834,"rendered":835},{"title":827,"description":828,"editUrl":16,"head":829,"template":18,"sidebar":830,"pagefind":16,"draft":20},"OpenFlow DSL","Use OpenFlow DSL as the editor-native text representation for OpenFlowKit diagrams.",[],{"hidden":20,"attrs":831},{},"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":836,"metadata":837},"\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: "User Signup"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: "Signup Form"]node verify [label: "Verify Email"]node success [label: "Workspace Ready", 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":838,"localImagePaths":854,"remoteImagePaths":855,"frontmatter":856,"imagePaths":857},[839,842,845,846,849,852,853],{"depth":30,"slug":840,"text":841},"where-it-fits","Where it fits",{"depth":30,"slug":843,"text":844},"basic-document-structure","Basic document structure",{"depth":30,"slug":707,"text":708},{"depth":30,"slug":847,"text":848},"edges","Edges",{"depth":30,"slug":850,"text":851},"why-teams-use-it","Why teams use it",{"depth":30,"slug":83,"text":84},{"depth":30,"slug":46,"text":47},[],[],{"draft":20,"title":827,"description":828},[],"playback-history",{"id":858,"data":860,"body":866,"filePath":867,"digest":868,"rendered":869},{"title":861,"description":862,"editUrl":16,"head":863,"template":18,"sidebar":864,"pagefind":16,"draft":20},"Playback & History","Use undo, snapshots, and playback-related state to recover work and review diagram evolution.",[],{"hidden":20,"attrs":865},{},"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":870,"metadata":871},"\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 & 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":872,"localImagePaths":886,"remoteImagePaths":887,"frontmatter":888,"imagePaths":889},[873,876,879,882,885],{"depth":30,"slug":874,"text":875},"undo-and-redo","Undo and redo",{"depth":30,"slug":877,"text":878},"snapshots","Snapshots",{"depth":30,"slug":880,"text":881},"playback-model","Playback model",{"depth":30,"slug":883,"text":884},"practical-advice","Practical advice",{"depth":30,"slug":46,"text":47},[],[],{"draft":20,"title":861,"description":862},[],"prompting-agents",{"id":890,"data":892,"body":898,"filePath":899,"digest":900,"rendered":901},{"title":893,"description":894,"editUrl":16,"head":895,"template":18,"sidebar":896,"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":897},{},"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":902,"metadata":903},"\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":904,"localImagePaths":932,"remoteImagePaths":933,"frontmatter":934,"imagePaths":935},[905,908,911,914,917,920,923,926,929],{"depth":30,"slug":906,"text":907},"what-to-ask-for","What to ask for",{"depth":30,"slug":909,"text":910},"good-prompt-structure","Good prompt structure",{"depth":30,"slug":912,"text":913},"example-prompt-for-openflow-dsl","Example prompt for OpenFlow DSL",{"depth":30,"slug":915,"text":916},"example-prompt-for-mermaid","Example prompt for Mermaid",{"depth":30,"slug":918,"text":919},"what-to-avoid","What to avoid",{"depth":30,"slug":921,"text":922},"best-workflow-with-agents","Best workflow with agents",{"depth":115,"slug":924,"text":925},"example-prompt-for-cursor-ide","Example Prompt for Cursor IDE",{"depth":115,"slug":927,"text":928},"example-prompt-for-chatgpt","Example Prompt for ChatGPT",{"depth":30,"slug":930,"text":931},"best-practices-for-prompting","Best Practices for Prompting",[],[],{"draft":20,"title":893,"description":894},[],"properties-panel",{"id":936,"data":938,"body":944,"filePath":945,"digest":946,"rendered":947},{"title":939,"description":940,"editUrl":16,"head":941,"template":18,"sidebar":942,"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":943},{},"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":948,"metadata":949},"\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":950,"localImagePaths":964,"remoteImagePaths":965,"frontmatter":966,"imagePaths":967},[951,952,955,958,961],{"depth":30,"slug":219,"text":220},{"depth":30,"slug":953,"text":954},"what-opens-in-the-right-rail","What opens in the right rail",{"depth":30,"slug":956,"text":957},"node-editing","Node editing",{"depth":30,"slug":959,"text":960},"edge-editing","Edge editing",{"depth":30,"slug":962,"text":963},"bulk-edit","Bulk edit",[],[],{"draft":20,"title":939,"description":940},[],"payment-flow",{"id":968,"data":970,"body":976,"filePath":977,"digest":978,"rendered":979},{"title":971,"description":972,"editUrl":16,"head":973,"template":18,"sidebar":974,"pagefind":16,"draft":20},"Payment Flow Visualization","Model subscription, checkout, retry, and exception-heavy payment systems in OpenFlowKit.",[],{"hidden":20,"attrs":975},{},"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](/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](/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](/playback-history/) feature to walk through the payment sequence step-by-step.","src/content/docs/payment-flow.md","f53ac18142addbd3",{"html":980,"metadata":981},"\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=\"/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 & 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 "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\">\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=\"/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=\"/playback-history/\">Playback History\u003C/a> feature to walk through the payment sequence step-by-step.\u003C/p>",{"headings":982,"localImagePaths":1009,"remoteImagePaths":1010,"frontmatter":1011,"imagePaths":1012},[983,986,989,992,993,994,997,1000,1003,1006],{"depth":30,"slug":984,"text":985},"what-a-useful-payment-diagram-should-include","What a useful payment diagram should include",{"depth":30,"slug":987,"text":988},"suggested-node-pattern","Suggested node pattern",{"depth":30,"slug":990,"text":991},"strong-starting-options","Strong starting options",{"depth":30,"slug":326,"text":327},{"depth":30,"slug":83,"text":84},{"depth":30,"slug":995,"text":996},"why-this-works-well-in-openflowkit","Why this works well in OpenFlowKit",{"depth":30,"slug":998,"text":999},"recommended-review-pattern","Recommended review pattern",{"depth":30,"slug":1001,"text":1002},"example-stripe-checkout-flow","Example: Stripe Checkout Flow",{"depth":30,"slug":1004,"text":1005},"tips-for-better-payment-diagrams","Tips for Better Payment Diagrams",{"depth":30,"slug":1007,"text":1008},"ai-prompt-example","AI Prompt Example",[],[],{"draft":20,"title":971,"description":972},[],"quick-start",{"id":1013,"data":1015,"body":1021,"filePath":1022,"digest":1023,"rendered":1024},{"title":1016,"description":1017,"editUrl":16,"head":1018,"template":18,"sidebar":1019,"pagefind":16,"draft":20},"Quick Start","Create your first OpenFlowKit diagram from builder templates, imports, AI, code, or the canvas.",[],{"hidden":20,"attrs":1020},{},"This is the fastest reliable way to get productive if you are building software, documenting systems, or preparing technical diagrams for docs and reviews.\n\n## 1. Start from the home screen\n\nThe first screen is designed to get you to a useful draft in under a couple of minutes. From there you can:\n\n- create a blank flow\n- open an existing browser-stored flow\n- duplicate a saved flow\n- import a JSON diagram document\n- jump directly into templates or Flowpilot\n\nEach document opens in its own editor tab.\n\n## 2. Pick the strongest input you already have\n\nOpenFlowKit works best when you start from the most truthful source available, then refine visually.\n\n### Template-first\n\nUse **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.\n\n### Import or code-first\n\nUse import or the Studio code flows when you already have a technical source artifact:\n\n- Mermaid or OpenFlow DSL for editable diagram-as-code\n- SQL or OpenAPI for structured system drafts\n- Terraform or Kubernetes text for deterministic infra parsing\n- JSON/OpenFlow when you are restoring a saved graph exactly\n\n### Prompt-to-diagram\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\nUse 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.\n\nIf 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.\n\n### Blank canvas and assets\n\nUse 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.\n\n## 3. Refine the diagram visually\n\nOnce something is on the canvas:\n\n- move nodes into rough position\n- use the [Properties Panel](/properties-panel/) for exact edits and architecture metadata\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 the result\n\nUse the export menu when you are ready to move the diagram into docs, design tools, code review threads, or launch assets.\n\n- See [Choose an Export Format](/choose-export-format/)\n- See [Exporting](/exporting/)\n- See [Collaboration & Sharing](/collaboration-sharing/)\n- Use viewer links and embed snippets when you want the diagram to stay live instead of pasting a screenshot","src/content/docs/quick-start.md","600bb229d78b8661",{"html":1025,"metadata":1026},"\u003Cp>This is the fastest reliable way to get productive if you are building software, documenting systems, or preparing technical diagrams for docs and reviews.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"1-start-from-the-home-screen\">1. Start from the home screen\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#1-start-from-the-home-screen\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.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. Start from the home screen”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>The first screen is designed to get you to a useful draft in under a couple of minutes. From there you can:\u003C/p>\n\u003Cul>\n\u003Cli>create a blank 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\u003Cli>jump directly into templates or Flowpilot\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-the-strongest-input-you-already-have\">2. Pick the strongest input you already have\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#2-pick-the-strongest-input-you-already-have\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.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 the strongest input you already have”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>OpenFlowKit works best when you start from the most truthful source available, then refine visually.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"template-first\">Template-first\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#template-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 “Template-first”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Use \u003Cstrong>Browse Templates\u003C/strong> 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.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"import-or-code-first\">Import or code-first\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#import-or-code-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 “Import or code-first”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Use import or the Studio code flows when you already have a technical source artifact:\u003C/p>\n\u003Cul>\n\u003Cli>Mermaid or OpenFlow DSL for editable diagram-as-code\u003C/li>\n\u003Cli>SQL or OpenAPI for structured system drafts\u003C/li>\n\u003Cli>Terraform or Kubernetes text for deterministic infra parsing\u003C/li>\n\u003Cli>JSON/OpenFlow when you are restoring a saved graph exactly\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"prompt-to-diagram\">Prompt-to-diagram\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#prompt-to-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 “Prompt-to-diagram”\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\u003Cp>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.\u003C/p>\n\u003Cp>If AI is not configured yet, use the \u003Cstrong>Add key\u003C/strong> 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.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h3\">\u003Ch3 id=\"blank-canvas-and-assets\">Blank canvas and assets\u003C/h3>\u003Ca class=\"sl-anchor-link\" href=\"#blank-canvas-and-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 “Blank canvas and assets”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Use blank canvas when the structure is already in your head and visual iteration is faster than import. Open \u003Cstrong>Assets\u003C/strong> from the Command Center to add sections, notes, wireframes, provider icons, and reusable building blocks.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"3-refine-the-diagram-visually\">3. Refine the diagram visually\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#3-refine-the-diagram-visually\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.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 diagram visually”\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 and architecture metadata\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 & History\u003C/a>.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"5-share-or-export-the-result\">5. Share or export the result\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#5-share-or-export-the-result\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.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 the result”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Use the export menu when you are ready to move the diagram into docs, design tools, code review threads, or launch assets.\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 & Sharing\u003C/a>\u003C/li>\n\u003Cli>Use viewer links and embed snippets when you want the diagram to stay live instead of pasting a screenshot\u003C/li>\n\u003C/ul>",{"headings":1027,"localImagePaths":1055,"remoteImagePaths":1056,"frontmatter":1057,"imagePaths":1058},[1028,1031,1034,1037,1040,1043,1046,1049,1052],{"depth":30,"slug":1029,"text":1030},"1-start-from-the-home-screen","1. Start from the home screen",{"depth":30,"slug":1032,"text":1033},"2-pick-the-strongest-input-you-already-have","2. Pick the strongest input you already have",{"depth":115,"slug":1035,"text":1036},"template-first","Template-first",{"depth":115,"slug":1038,"text":1039},"import-or-code-first","Import or code-first",{"depth":115,"slug":1041,"text":1042},"prompt-to-diagram","Prompt-to-diagram",{"depth":115,"slug":1044,"text":1045},"blank-canvas-and-assets","Blank canvas and assets",{"depth":30,"slug":1047,"text":1048},"3-refine-the-diagram-visually","3. Refine the diagram visually",{"depth":30,"slug":1050,"text":1051},"4-save-recovery-points","4. Save recovery points",{"depth":30,"slug":1053,"text":1054},"5-share-or-export-the-result","5. Share or export the result",[],[],{"draft":20,"title":1016,"description":1017},[],"roadmap",{"id":1059,"data":1061,"body":1067,"filePath":1068,"digest":1069,"rendered":1070},{"title":1062,"description":1063,"editUrl":16,"head":1064,"template":18,"sidebar":1065,"pagefind":16,"draft":20},"Roadmap","How to read product direction without confusing roadmap ideas for currently documented functionality.",[],{"hidden":20,"attrs":1066},{},"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":1071,"metadata":1072},"\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":1073,"localImagePaths":1077,"remoteImagePaths":1078,"frontmatter":1079,"imagePaths":1080},[1074],{"depth":30,"slug":1075,"text":1076},"what-this-page-is-for","What this page is for",[],[],{"draft":20,"title":1062,"description":1063},[],"smart-layout",{"id":1081,"data":1083,"body":1089,"filePath":1090,"digest":1091,"rendered":1092},{"title":1084,"description":1085,"editUrl":16,"head":1086,"template":18,"sidebar":1087,"pagefind":16,"draft":20},"Smart Layout","Use ELK-based layout to turn rough graphs into cleaner, more readable diagrams in OpenFlowKit.",[],{"hidden":20,"attrs":1088},{},"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":1093,"metadata":1094},"\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":1095,"localImagePaths":1112,"remoteImagePaths":1113,"frontmatter":1114,"imagePaths":1115},[1096,1099,1102,1105,1108,1111],{"depth":30,"slug":1097,"text":1098},"when-to-use-auto-layout","When to use auto layout",{"depth":30,"slug":1100,"text":1101},"how-to-run-it","How to run it",{"depth":30,"slug":1103,"text":1104},"what-layout-is-good-at","What layout is good at",{"depth":30,"slug":1106,"text":1107},"practical-strategy","Practical strategy",{"depth":30,"slug":1109,"text":1110},"layout-plus-code-workflow","Layout plus code workflow",{"depth":30,"slug":46,"text":47},[],[],{"draft":20,"title":1084,"description":1085},[],"studio-overview",{"id":1116,"data":1118,"body":1124,"filePath":1125,"digest":1126,"rendered":1127},{"title":1119,"description":1120,"editUrl":16,"head":1121,"template":18,"sidebar":1122,"pagefind":16,"draft":20},"Studio Overview","Understand the OpenFlowKit Studio rail for AI, code, imports, infrastructure sync, and architecture linting.",[],{"hidden":20,"attrs":1123},{},"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","e7b7890abb83e0b8",{"html":1128,"metadata":1129},"\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":1130,"localImagePaths":1154,"remoteImagePaths":1155,"frontmatter":1156,"imagePaths":1157},[1131,1134,1137,1140,1143,1146,1149,1152,1153],{"depth":30,"slug":1132,"text":1133},"studio-tabs-in-the-current-product-path","Studio tabs in the current product path",{"depth":30,"slug":1135,"text":1136},"when-to-open-studio","When to open Studio",{"depth":30,"slug":1138,"text":1139},"flowpilot-tab","Flowpilot tab",{"depth":30,"slug":1141,"text":1142},"code-tab","Code tab",{"depth":30,"slug":1144,"text":1145},"infra-tab","Infra tab",{"depth":30,"slug":1147,"text":1148},"lint-tab","Lint tab",{"depth":30,"slug":1150,"text":1151},"how-studio-fits-into-the-editor","How Studio fits into the editor",{"depth":30,"slug":83,"text":84},{"depth":30,"slug":46,"text":47},[],[],{"draft":20,"title":1119,"description":1120},[],"templates-assets",{"id":1158,"data":1160,"body":1166,"filePath":1167,"digest":1168,"rendered":1169},{"title":1161,"description":1162,"editUrl":16,"head":1163,"template":18,"sidebar":1164,"pagefind":16,"draft":20},"Templates & Starter Flows","Start diagrams faster with developer-oriented templates, architecture assets, and reusable starter packs.",[],{"hidden":20,"attrs":1165},{},"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.\n\n## Template starter paths\n\nThe template library includes starter graphs for common builder workflows across flowcharts, architecture, cloud diagrams, sequence diagrams, mind maps, journeys, and wireframes.\n\nHigh-value starter examples include:\n\n- release-train and delivery flows\n- incident escalation runbooks\n- backend request handoff sequence diagrams\n- AWS event-driven architecture starters\n- C4 system context diagrams\n- network-edge and perimeter layouts\n\nUse 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.\n\n## Assets and provider libraries\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- C4 and network-aware architecture nodes\n\nAssets are better than templates when you already know the overall structure and just need the right pieces to finish it.\n\n## When to use templates vs assets\n\n- Use templates when you want a starting graph with the layout already implied.\n- Use assets when you want to insert individual nodes into an existing diagram.\n- Use provider-backed asset packs when the diagram needs cloud icon fidelity.\n- Use design systems when the problem is styling consistency rather than structure.\n\n## Recommended launch-ready starter set\n\nIf you are evaluating the product quickly, start with these first:\n\n1. `CI/CD Release Train`\n2. `API Request Handoff`\n3. `AWS Event-Driven API`\n4. `C4 System Context`\n5. `Network Edge Security`\n\nThat set shows the best mix of developer-builder workflows, visual editing, and export/share value.\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","8fc2a6cbdf9646a3",{"html":1170,"metadata":1171},"\u003Cp>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.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"template-starter-paths\">Template starter paths\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#template-starter-paths\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.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 starter paths”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>The template library includes starter graphs for common builder workflows across flowcharts, architecture, cloud diagrams, sequence diagrams, mind maps, journeys, and wireframes.\u003C/p>\n\u003Cp>High-value starter examples include:\u003C/p>\n\u003Cul>\n\u003Cli>release-train and delivery flows\u003C/li>\n\u003Cli>incident escalation runbooks\u003C/li>\n\u003Cli>backend request handoff sequence diagrams\u003C/li>\n\u003Cli>AWS event-driven architecture starters\u003C/li>\n\u003Cli>C4 system context diagrams\u003C/li>\n\u003Cli>network-edge and perimeter layouts\u003C/li>\n\u003C/ul>\n\u003Cp>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.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"assets-and-provider-libraries\">Assets and provider libraries\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#assets-and-provider-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 “Assets and provider libraries”\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\u003Cli>C4 and network-aware architecture nodes\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 to finish it.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"when-to-use-templates-vs-assets\">When to use templates vs assets\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#when-to-use-templates-vs-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 “When to use templates vs assets”\u003C/span>\u003C/a>\u003C/div>\n\u003Cul>\n\u003Cli>Use templates when you want a starting graph with the layout already implied.\u003C/li>\n\u003Cli>Use assets when you want to insert individual nodes into an existing diagram.\u003C/li>\n\u003Cli>Use provider-backed asset packs when the diagram needs cloud icon fidelity.\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=\"recommended-launch-ready-starter-set\">Recommended launch-ready starter set\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#recommended-launch-ready-starter-set\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.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 launch-ready starter set”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>If you are evaluating the product quickly, start with these first:\u003C/p>\n\u003Col>\n\u003Cli>\u003Ccode dir=\"auto\">CI/CD Release Train\u003C/code>\u003C/li>\n\u003Cli>\u003Ccode dir=\"auto\">API Request Handoff\u003C/code>\u003C/li>\n\u003Cli>\u003Ccode dir=\"auto\">AWS Event-Driven API\u003C/code>\u003C/li>\n\u003Cli>\u003Ccode dir=\"auto\">C4 System Context\u003C/code>\u003C/li>\n\u003Cli>\u003Ccode dir=\"auto\">Network Edge Security\u003C/code>\u003C/li>\n\u003C/ol>\n\u003Cp>That set shows the best mix of developer-builder workflows, visual editing, and export/share value.\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=\"/command-center/\">Command Center\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"/design-systems-branding/\">Design Systems & Branding\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"/aws-architecture/\">AWS Architecture\u003C/a>\u003C/li>\n\u003C/ul>",{"headings":1172,"localImagePaths":1186,"remoteImagePaths":1187,"frontmatter":1188,"imagePaths":1189},[1173,1176,1179,1182,1185],{"depth":30,"slug":1174,"text":1175},"template-starter-paths","Template starter paths",{"depth":30,"slug":1177,"text":1178},"assets-and-provider-libraries","Assets and provider libraries",{"depth":30,"slug":1180,"text":1181},"when-to-use-templates-vs-assets","When to use templates vs assets",{"depth":30,"slug":1183,"text":1184},"recommended-launch-ready-starter-set","Recommended launch-ready starter set",{"depth":30,"slug":46,"text":47},[],[],{"draft":20,"title":1161,"description":1162},[],"theming",{"id":1190,"data":1192,"body":1198,"filePath":1199,"digest":1200,"rendered":1201},{"title":1193,"description":1194,"editUrl":16,"head":1195,"template":18,"sidebar":1196,"pagefind":16,"draft":20},"Theming","Use design systems in OpenFlowKit to keep diagram styling consistent without manually restyling every canvas.",[],{"hidden":20,"attrs":1197},{},"OpenFlowKit handles theming through reusable design systems rather than ad hoc per-diagram styling.\n\n## What theming means in OpenFlowKit\n\nTheming is not a separate rendering mode. It is the design-system layer that controls how diagrams feel across sessions and teams.\n\nUse it when you want to:\n\n- keep multiple diagrams visually consistent\n- create branded variants for different audiences\n- avoid hand-tuning colors and styling on every new flow\n- move styling definitions between environments\n\n## Recommended workflow\n\nThe practical workflow is:\n\n1. Start from a stable default design system.\n2. Duplicate it when you need a branded or audience-specific variant.\n3. Apply the active design system while editing instead of restyling each diagram manually.\n4. Export theme JSON when the styling needs to travel outside the current browser session.\n\n## Where to manage it\n\nOpen the Command Center and use the design-system tools to:\n\n- switch the active design system\n- duplicate or edit existing themes\n- import a theme from JSON\n- export the active theme\n\n## Keep the system small\n\nToo many themes usually create drift instead of flexibility. In most cases, one default system and a small number of variants is the maintainable path.\n\n## Related pages\n\n- [Design Systems & Branding](/design-systems-branding/)\n- [Command Center](/command-center/)\n- [Figma Design Import](/figma-design-import/)","src/content/docs/theming.md","763fd510f3fcf7db",{"html":1202,"metadata":1203},"\u003Cp>OpenFlowKit handles theming through reusable design systems rather than ad hoc per-diagram styling.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"what-theming-means-in-openflowkit\">What theming means in OpenFlowKit\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#what-theming-means-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 “What theming means in OpenFlowKit”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Theming is not a separate rendering mode. It is the design-system layer that controls how diagrams feel across sessions and teams.\u003C/p>\n\u003Cp>Use it when you want to:\u003C/p>\n\u003Cul>\n\u003Cli>keep multiple diagrams visually consistent\u003C/li>\n\u003Cli>create branded variants for different audiences\u003C/li>\n\u003Cli>avoid hand-tuning colors and styling on every new flow\u003C/li>\n\u003Cli>move styling definitions between environments\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>The practical workflow is:\u003C/p>\n\u003Col>\n\u003Cli>Start from a stable default design system.\u003C/li>\n\u003Cli>Duplicate it when you need a branded or audience-specific variant.\u003C/li>\n\u003Cli>Apply the active design system while editing instead of restyling each diagram manually.\u003C/li>\n\u003Cli>Export theme JSON when the styling needs to travel outside the current browser session.\u003C/li>\n\u003C/ol>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"where-to-manage-it\">Where to manage it\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#where-to-manage-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 “Where to manage it”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Open the Command Center and use the design-system tools to:\u003C/p>\n\u003Cul>\n\u003Cli>switch the active design system\u003C/li>\n\u003Cli>duplicate or edit existing themes\u003C/li>\n\u003Cli>import a theme from JSON\u003C/li>\n\u003Cli>export the active theme\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"keep-the-system-small\">Keep the system small\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#keep-the-system-small\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Keep the system small”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>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.\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=\"/design-systems-branding/\">Design Systems & Branding\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"/command-center/\">Command Center\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"/figma-design-import/\">Figma Design Import\u003C/a>\u003C/li>\n\u003C/ul>",{"headings":1204,"localImagePaths":1216,"remoteImagePaths":1217,"frontmatter":1218,"imagePaths":1219},[1205,1208,1209,1212,1215],{"depth":30,"slug":1206,"text":1207},"what-theming-means-in-openflowkit","What theming means in OpenFlowKit",{"depth":30,"slug":83,"text":84},{"depth":30,"slug":1210,"text":1211},"where-to-manage-it","Where to manage it",{"depth":30,"slug":1213,"text":1214},"keep-the-system-small","Keep the system small",{"depth":30,"slug":46,"text":47},[],[],{"draft":20,"title":1193,"description":1194},[],"v1-beta-launch",{"id":1220,"data":1222,"body":1228,"filePath":1229,"digest":1230,"rendered":1231},{"title":1223,"description":1224,"editUrl":16,"head":1225,"template":18,"sidebar":1226,"pagefind":16,"draft":20},"V1 Beta Launch","Historical release note for the OpenFlowKit V1 beta milestone and the product direction it introduced.",[],{"hidden":20,"attrs":1227},{},"This page records the original V1 beta milestone as a product-history note rather than a current feature promise.\n\n## What the V1 beta represented\n\nThe V1 beta marked the point where OpenFlowKit stopped being treated as a basic flowchart tool and became a broader local-first diagramming workspace.\n\nThat milestone brought the product direction into focus:\n\n- technical diagramming instead of generic whiteboarding\n- local-first editing as a default posture\n- code-backed and import-backed workflows alongside the visual canvas\n- AI-assisted generation as an editable starting point rather than a dead output\n\n## Why keep this release note\n\nHistorical release notes are useful when you want to understand:\n\n- how the product positioning evolved\n- which capabilities were considered foundational at the time\n- why some later architecture and workflow decisions exist\n\n## Read it as history, not roadmap\n\nSome 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.\n\n## Better current references\n\n- [Introduction](/introduction/)\n- [Quick Start](/quick-start/)\n- [Studio Overview](/studio-overview/)\n- [Roadmap](/roadmap/)","src/content/docs/v1-beta-launch.md","abf5b50c3237b044",{"html":1232,"metadata":1233},"\u003Cp>This page records the original V1 beta milestone as a product-history note rather than a current feature promise.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"what-the-v1-beta-represented\">What the V1 beta represented\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#what-the-v1-beta-represented\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.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 V1 beta represented”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>The V1 beta marked the point where OpenFlowKit stopped being treated as a basic flowchart tool and became a broader local-first diagramming workspace.\u003C/p>\n\u003Cp>That milestone brought the product direction into focus:\u003C/p>\n\u003Cul>\n\u003Cli>technical diagramming instead of generic whiteboarding\u003C/li>\n\u003Cli>local-first editing as a default posture\u003C/li>\n\u003Cli>code-backed and import-backed workflows alongside the visual canvas\u003C/li>\n\u003Cli>AI-assisted generation as an editable starting point rather than a dead output\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"why-keep-this-release-note\">Why keep this release note\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#why-keep-this-release-note\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.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 keep this release note”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Historical release notes are useful when you want to understand:\u003C/p>\n\u003Cul>\n\u003Cli>how the product positioning evolved\u003C/li>\n\u003Cli>which capabilities were considered foundational at the time\u003C/li>\n\u003Cli>why some later architecture and workflow decisions exist\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"read-it-as-history-not-roadmap\">Read it as history, not roadmap\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#read-it-as-history-not-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 “Read it as history, not roadmap”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>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.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"better-current-references\">Better current references\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#better-current-references\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.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 current references”\u003C/span>\u003C/a>\u003C/div>\n\u003Cul>\n\u003Cli>\u003Ca href=\"/introduction/\">Introduction\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"/quick-start/\">Quick Start\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"/studio-overview/\">Studio Overview\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"/roadmap/\">Roadmap\u003C/a>\u003C/li>\n\u003C/ul>",{"headings":1234,"localImagePaths":1247,"remoteImagePaths":1248,"frontmatter":1249,"imagePaths":1250},[1235,1238,1241,1244],{"depth":30,"slug":1236,"text":1237},"what-the-v1-beta-represented","What the V1 beta represented",{"depth":30,"slug":1239,"text":1240},"why-keep-this-release-note","Why keep this release note",{"depth":30,"slug":1242,"text":1243},"read-it-as-history-not-roadmap","Read it as history, not roadmap",{"depth":30,"slug":1245,"text":1246},"better-current-references","Better current references",[],[],{"draft":20,"title":1223,"description":1224},[],"tr/ai-generation",{"id":1251,"data":1253,"body":1258,"filePath":1259,"digest":1260,"rendered":1261},{"title":55,"description":1254,"editUrl":16,"head":1255,"template":18,"sidebar":1256,"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":1257},{},"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","21e492f7188aba59",{"html":1262,"metadata":1263},"\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":1264,"localImagePaths":1283,"remoteImagePaths":1284,"frontmatter":1285,"imagePaths":1286},[1265,1268,1271,1274,1277,1280],{"depth":30,"slug":1266,"text":1267},"üründe-ai-nerede-yer-alır","Üründe AI nerede yer alır?",{"depth":30,"slug":1269,"text":1270},"sağlayıcı-modeli","Sağlayıcı modeli",{"depth":30,"slug":1272,"text":1273},"ai-ne-zaman-doğru-araçtır","AI ne zaman doğru araçtır?",{"depth":30,"slug":1275,"text":1276},"daha-iyi-sonuç-almak-için","Daha iyi sonuç almak için",{"depth":30,"slug":1278,"text":1279},"önerilen-iş-akışı","Önerilen iş akışı",{"depth":30,"slug":1281,"text":1282},"i̇lgili-sayfalar","İlgili sayfalar",[],[],{"draft":20,"title":55,"description":1254},[],"tr/architecture-lint",{"id":1287,"data":1289,"body":1294,"filePath":1295,"digest":1296,"rendered":1297},{"title":14,"description":1290,"editUrl":16,"head":1291,"template":18,"sidebar":1292,"pagefind":16,"draft":20},"JSON tabanlı mimari kurallar tanımlayın ve ihlalleri tuval üzerinde gerçek zamanlı görün.",[],{"hidden":20,"attrs":1293},{},"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":1298,"metadata":1299},"\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":1300,"localImagePaths":1310,"remoteImagePaths":1311,"frontmatter":1312,"imagePaths":1313},[1301,1304,1307],{"depth":30,"slug":1302,"text":1303},"nerede-bulunur","Nerede bulunur?",{"depth":30,"slug":1305,"text":1306},"neler-yapar","Neler yapar?",{"depth":30,"slug":1308,"text":1309},"ne-zaman-kullanılır","Ne zaman kullanılır?",[],[],{"draft":20,"title":14,"description":1290},[],"tr/ask-flowpilot",{"id":1314,"data":1316,"body":1321,"filePath":1322,"digest":1323,"rendered":1324},{"title":342,"description":1317,"editUrl":16,"head":1318,"template":18,"sidebar":1319,"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":1320},{},"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","19cf6b6da145b73f",{"html":1325,"metadata":1326},"\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":1327,"localImagePaths":1341,"remoteImagePaths":1342,"frontmatter":1343,"imagePaths":1344},[1328,1331,1334,1337,1340],{"depth":30,"slug":1329,"text":1330},"i̇yi-kullanım-senaryoları","İyi kullanım senaryoları",{"depth":30,"slug":1332,"text":1333},"i̇steminizde-ne-olmalı","İsteminizde ne olmalı?",{"depth":30,"slug":1335,"text":1336},"örnek-istem","Örnek istem",{"depth":30,"slug":1338,"text":1339},"üretimden-sonra-ne-yapılmalı","Üretimden sonra ne yapılmalı?",{"depth":30,"slug":1281,"text":1282},[],[],{"draft":20,"title":342,"description":1317},[],"tr/aws-architecture",{"id":1345,"data":1347,"body":1352,"filePath":1353,"digest":1354,"rendered":1355},{"title":303,"description":1348,"editUrl":16,"head":1349,"template":18,"sidebar":1350,"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":1351},{},"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","f4e678256ad1e93a",{"html":1356,"metadata":1357},"\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 & 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":1358,"localImagePaths":1366,"remoteImagePaths":1367,"frontmatter":1368,"imagePaths":1369},[1359,1362,1365],{"depth":30,"slug":1360,"text":1361},"başlangıç-yolları","Başlangıç yolları",{"depth":30,"slug":1363,"text":1364},"önerilen-akış","Önerilen akış",{"depth":30,"slug":1281,"text":1282},[],[],{"draft":20,"title":303,"description":1348},[],"tr/canvas-basics",{"id":1370,"data":1372,"body":1377,"filePath":1378,"digest":1379,"rendered":1380},{"title":96,"description":1373,"editUrl":16,"head":1374,"template":18,"sidebar":1375,"pagefind":16,"draft":20},"OpenFlowKit tuvalinde gezinmeyi, seçim yapmayı, düzenlemeyi ve çalışmanızı geri kazanmayı öğrenin.",[],{"hidden":20,"attrs":1376},{},"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":1381,"metadata":1382},"\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 & History\u003C/a>.\u003C/p>",{"headings":1383,"localImagePaths":1411,"remoteImagePaths":1412,"frontmatter":1413,"imagePaths":1414},[1384,1387,1390,1393,1396,1399,1402,1405,1408],{"depth":30,"slug":1385,"text":1386},"tuvali-ne-zaman-kullanmalısınız","Tuvali ne zaman kullanmalısınız?",{"depth":30,"slug":1388,"text":1389},"gezinme","Gezinme",{"depth":115,"slug":1391,"text":1392},"kaydırma-ve-yakınlaştırma","Kaydırma ve yakınlaştırma",{"depth":115,"slug":1394,"text":1395},"büyük-diyagramlarda-gezinme","Büyük diyagramlarda gezinme",{"depth":30,"slug":1397,"text":1398},"seçim","Seçim",{"depth":115,"slug":1400,"text":1401},"tekli-seçim","Tekli seçim",{"depth":115,"slug":1403,"text":1404},"çoklu-seçim","Çoklu seçim",{"depth":30,"slug":1406,"text":1407},"doğrudan-düzenleme-ve-kesin-düzenleme","Doğrudan düzenleme ve kesin düzenleme",{"depth":30,"slug":1409,"text":1410},"geçmiş-ve-kurtarma","Geçmiş ve kurtarma",[],[],{"draft":20,"title":96,"description":1373},[],"tr/choose-export-format",{"id":1415,"data":1417,"body":1422,"filePath":1423,"digest":1424,"rendered":1425},{"title":143,"description":1418,"editUrl":16,"head":1419,"template":18,"sidebar":1420,"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":1421},{},"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":1426,"metadata":1427},"\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":1428,"localImagePaths":1435,"remoteImagePaths":1436,"frontmatter":1437,"imagePaths":1438},[1429,1432],{"depth":30,"slug":1430,"text":1431},"hızlı-rehber","Hızlı rehber",{"depth":30,"slug":1433,"text":1434},"varsayılan-öneri","Varsayılan öneri",[],[],{"draft":20,"title":143,"description":1418},[],"tr/choose-input-mode",{"id":1439,"data":1441,"body":1446,"filePath":1447,"digest":1448,"rendered":1449},{"title":238,"description":1442,"editUrl":16,"head":1443,"template":18,"sidebar":1444,"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":1445},{},"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":1450,"metadata":1451},"\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":1452,"localImagePaths":1459,"remoteImagePaths":1460,"frontmatter":1461,"imagePaths":1462},[1453,1456],{"depth":30,"slug":1454,"text":1455},"hızlı-eşleştirme","Hızlı eşleştirme",{"depth":30,"slug":1457,"text":1458},"temel-kural","Temel kural",[],[],{"draft":20,"title":238,"description":1442},[],"tr/collaboration-sharing",{"id":1463,"data":1465,"body":1470,"filePath":1471,"digest":1472,"rendered":1473},{"title":171,"description":1466,"editUrl":16,"head":1467,"template":18,"sidebar":1468,"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":1469},{},"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":1474,"metadata":1475},"\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":1476,"localImagePaths":1483,"remoteImagePaths":1484,"frontmatter":1485,"imagePaths":1486},[1477,1480],{"depth":30,"slug":1478,"text":1479},"paylaşım-akışında-neler-bulunur","Paylaşım akışında neler bulunur?",{"depth":30,"slug":1481,"text":1482},"ne-zaman-paylaşım-ne-zaman-dışa-aktarma","Ne zaman paylaşım, ne zaman dışa aktarma?",[],[],{"draft":20,"title":171,"description":1466},[],"tr/command-center",{"id":1487,"data":1489,"body":1494,"filePath":1495,"digest":1496,"rendered":1497},{"title":263,"description":1490,"editUrl":16,"head":1491,"template":18,"sidebar":1492,"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":1493},{},"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","699721cf919bc2f3",{"html":1498,"metadata":1499},"\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":1500,"localImagePaths":1514,"remoteImagePaths":1515,"frontmatter":1516,"imagePaths":1517},[1501,1504,1507,1508,1509,1510,1511],{"depth":30,"slug":1502,"text":1503},"üst-seviye-komutlar","Üst seviye komutlar",{"depth":30,"slug":1505,"text":1506},"görünümler","Görünümler",{"depth":115,"slug":282,"text":283},{"depth":115,"slug":285,"text":286},{"depth":115,"slug":288,"text":289},{"depth":115,"slug":291,"text":292},{"depth":30,"slug":1512,"text":1513},"editördeki-yeri","Editördeki yeri",[],[],{"draft":20,"title":263,"description":1490},[],"tr/design-systems-branding",{"id":1518,"data":1520,"body":1525,"filePath":1526,"digest":1527,"rendered":1528},{"title":203,"description":1521,"editUrl":16,"head":1522,"template":18,"sidebar":1523,"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":1524},{},"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":1529,"metadata":1530},"\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":1531,"localImagePaths":1538,"remoteImagePaths":1539,"frontmatter":1540,"imagePaths":1541},[1532,1535],{"depth":30,"slug":1533,"text":1534},"desteklenen-akışlar","Desteklenen akışlar",{"depth":30,"slug":1536,"text":1537},"ne-zaman-kullanılmalı","Ne zaman kullanılmalı?",[],[],{"draft":20,"title":203,"description":1521},[],"tr/diagram-diff",{"id":1542,"data":1544,"body":1549,"filePath":1550,"digest":1551,"rendered":1552},{"title":429,"description":1545,"editUrl":16,"head":1546,"template":18,"sidebar":1547,"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":1548},{},"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":1553,"metadata":1554},"\u003Cp>Diagram Diff & 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":1555,"localImagePaths":1562,"remoteImagePaths":1563,"frontmatter":1564,"imagePaths":1565},[1556,1559],{"depth":30,"slug":1557,"text":1558},"neleri-gösterir","Neleri gösterir?",{"depth":30,"slug":1560,"text":1561},"neden-yararlıdır","Neden yararlıdır?",[],[],{"draft":20,"title":429,"description":1545},[],"tr/diagram-families",{"id":1566,"data":1568,"body":1573,"filePath":1574,"digest":1575,"rendered":1576},{"title":400,"description":1569,"editUrl":16,"head":1570,"template":18,"sidebar":1571,"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":1572},{},"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":1577,"metadata":1578},"\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":1579,"localImagePaths":1586,"remoteImagePaths":1587,"frontmatter":1588,"imagePaths":1589},[1580,1583],{"depth":30,"slug":1581,"text":1582},"mevcut-aileler","Mevcut aileler",{"depth":30,"slug":1584,"text":1585},"nasıl-seçilir","Nasıl seçilir?",[],[],{"draft":20,"title":400,"description":1569},[],"tr/exporting",{"id":1590,"data":1592,"body":1597,"filePath":1598,"digest":1599,"rendered":1600},{"title":457,"description":1593,"editUrl":16,"head":1594,"template":18,"sidebar":1595,"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":1596},{},"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":1601,"metadata":1602},"\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":1603,"localImagePaths":1624,"remoteImagePaths":1625,"frontmatter":1626,"imagePaths":1627},[1604,1607,1610,1611,1612,1615,1618,1621],{"depth":30,"slug":1605,"text":1606},"i̇ndirilen-formatlar","İndirilen formatlar",{"depth":115,"slug":1608,"text":1609},"png-ve-jpg","PNG ve JPG",{"depth":115,"slug":476,"text":477},{"depth":115,"slug":479,"text":480},{"depth":115,"slug":1613,"text":1614},"oynatma-videosu-ve-gif","Oynatma videosu ve GIF",{"depth":30,"slug":1616,"text":1617},"panoya-kopyalanan-formatlar","Panoya kopyalanan formatlar",{"depth":30,"slug":1619,"text":1620},"paylaşım","Paylaşım",{"depth":30,"slug":1622,"text":1623},"önerilen-yaklaşım","Önerilen yaklaşım",[],[],{"draft":20,"title":457,"description":1593},[],"tr/figma-design-import",{"id":1628,"data":1630,"body":1635,"filePath":1636,"digest":1637,"rendered":1638},{"title":372,"description":1631,"editUrl":16,"head":1632,"template":18,"sidebar":1633,"pagefind":16,"draft":20},"Figma’dan renk ve metin stillerini alıp bir OpenFlowKit tasarım sistemine uygulayın.",[],{"hidden":20,"attrs":1634},{},"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":1639,"metadata":1640},"\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":1641,"localImagePaths":1651,"remoteImagePaths":1652,"frontmatter":1653,"imagePaths":1654},[1642,1645,1648],{"depth":30,"slug":1643,"text":1644},"gerekli-olanlar","Gerekli olanlar",{"depth":30,"slug":1646,"text":1647},"neler-önizlenir","Neler önizlenir?",{"depth":30,"slug":1649,"text":1650},"ne-zaman-faydalıdır","Ne zaman faydalıdır?",[],[],{"draft":20,"title":372,"description":1631},[],"tr/github-embed",{"id":1655,"data":1657,"body":1662,"filePath":1663,"digest":1664,"rendered":1665},{"title":501,"description":1658,"editUrl":16,"head":1659,"template":18,"sidebar":1660,"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":1661},{},"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":1666,"metadata":1667},"\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":1668,"localImagePaths":1673,"remoteImagePaths":1674,"frontmatter":1675,"imagePaths":1676},[1669,1670],{"depth":30,"slug":1649,"text":1650},{"depth":30,"slug":1671,"text":1672},"temel-fikir","Temel fikir",[],[],{"draft":20,"title":501,"description":1658},[],"tr/import-from-data",{"id":1677,"data":1679,"body":1684,"filePath":1685,"digest":1686,"rendered":1687},{"title":593,"description":1680,"editUrl":16,"head":1681,"template":18,"sidebar":1682,"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":1683},{},"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":1688,"metadata":1689},"\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":1690,"localImagePaths":1695,"remoteImagePaths":1696,"frontmatter":1697,"imagePaths":1698},[1691,1692],{"depth":30,"slug":1536,"text":1537},{"depth":30,"slug":1693,"text":1694},"nasıl-çalışır","Nasıl çalışır?",[],[],{"draft":20,"title":593,"description":1680},[],"tr/infra-sync",{"id":1699,"data":1701,"body":1706,"filePath":1707,"digest":1708,"rendered":1709},{"title":622,"description":1702,"editUrl":16,"head":1703,"template":18,"sidebar":1704,"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":1705},{},"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":1710,"metadata":1711},"\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":1712,"localImagePaths":1720,"remoteImagePaths":1721,"frontmatter":1722,"imagePaths":1723},[1713,1716,1717],{"depth":30,"slug":1714,"text":1715},"desteklenen-formatlar","Desteklenen formatlar",{"depth":30,"slug":1536,"text":1537},{"depth":30,"slug":1718,"text":1719},"sonrasında-ne-olur","Sonrasında ne olur?",[],[],{"draft":20,"title":622,"description":1702},[],"tr/keyboard-shortcuts",{"id":1724,"data":1726,"body":1731,"filePath":1732,"digest":1733,"rendered":1734},{"title":688,"description":1727,"editUrl":16,"head":1728,"template":18,"sidebar":1729,"pagefind":16,"draft":20},"OpenFlowKit’te düzenleme, gezinme ve diyagram üretimi için mevcut klavye kısayolları.",[],{"hidden":20,"attrs":1730},{},"Bu tablolar artık uygulamada gösterilen güncel kısayolları ö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` veya `Ctrl + Y` |\n| Tümünü seç | `Cmd + A` | `Ctrl + A` |\n| Seçimi sil | `Delete` | `Backspace` |\n| Seçimi temizle | `Escape` | `Escape` |\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| Stili kopyala | `Cmd + Opt + C` | `Ctrl + Alt + C` |\n| Stili yapıştır | `Cmd + Opt + V` | `Ctrl + Alt + V` |\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| Bağlı düğümü hızlı oluştur | `Opt + Arrow` | `Alt + Arrow` |\n| Not renkleri | `1` `2` `3` `4` `5` `6` | `1` `2` `3` `4` `5` `6` |\n\n## Gezinme\n\n| Eylem | macOS | Windows/Linux |\n| --- | --- | --- |\n| Seçim aracı | `V` | `V` |\n| El aracı | `H` | `H` |\n| Tuvali kaydır | `Space + Drag` | `Space + Drag` |\n| Yakınlaştır | `Cmd + +` | `Ctrl + +` |\n| Uzaklaştır | `Cmd + -` | `Ctrl + -` |\n| Görünüşe sığdır | `Shift + 1` | `Shift + 1` |\n| Düğümü hafifçe taşı | `Arrow` veya `Shift + Arrow` | `Arrow` veya `Shift + Arrow` |\n\n## Yardım\n\n| Eylem | macOS | Windows/Linux |\n| --- | --- | --- |\n| Klavye kısayolları | `?` | `?` |\n| Komut Merkezi | `Cmd + K` | `Ctrl + K` |\n| Düğümleri ara | `Cmd + F` | `Ctrl + F` |\n\n## Notlar\n\n- Kısayollar odak durumuna, aktif moda ve seçili öğeye göre değişebilir.\n- Zihin haritası kısayolları yalnızca bir zihin haritası düğümü seçiliyken çalışır.\n- Not renkleri kısayolları yalnızca bir annotation düğümü seçiliyken çalışır.\n- Doğrudan kısayolu olmayan işlemler için [Command Center](/tr/command-center/) kullanabilirsiniz.","src/content/docs/tr/keyboard-shortcuts.md","3b66b3e038445a09",{"html":1735,"metadata":1736},"\u003Cp>Bu tablolar artık uygulamada gösterilen güncel kısayolları ö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\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> veya \u003Ccode dir=\"auto\">Ctrl + Y\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>\u003Ctr>\u003Ctd>Seçimi temizle\u003C/td>\u003Ctd>\u003Ccode dir=\"auto\">Escape\u003C/code>\u003C/td>\u003Ctd>\u003Ccode dir=\"auto\">Escape\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\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>Stili kopyala\u003C/td>\u003Ctd>\u003Ccode dir=\"auto\">Cmd + Opt + C\u003C/code>\u003C/td>\u003Ctd>\u003Ccode dir=\"auto\">Ctrl + Alt + C\u003C/code>\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>Stili yapıştır\u003C/td>\u003Ctd>\u003Ccode dir=\"auto\">Cmd + Opt + V\u003C/code>\u003C/td>\u003Ctd>\u003Ccode dir=\"auto\">Ctrl + Alt + V\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\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>\u003Ctr>\u003Ctd>Bağlı düğümü hızlı oluştur\u003C/td>\u003Ctd>\u003Ccode dir=\"auto\">Opt + Arrow\u003C/code>\u003C/td>\u003Ctd>\u003Ccode dir=\"auto\">Alt + Arrow\u003C/code>\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>Not renkleri\u003C/td>\u003Ctd>\u003Ccode dir=\"auto\">1\u003C/code> \u003Ccode dir=\"auto\">2\u003C/code> \u003Ccode dir=\"auto\">3\u003C/code> \u003Ccode dir=\"auto\">4\u003C/code> \u003Ccode dir=\"auto\">5\u003C/code> \u003Ccode dir=\"auto\">6\u003C/code>\u003C/td>\u003Ctd>\u003Ccode dir=\"auto\">1\u003C/code> \u003Ccode dir=\"auto\">2\u003C/code> \u003Ccode dir=\"auto\">3\u003C/code> \u003Ccode dir=\"auto\">4\u003C/code> \u003Ccode dir=\"auto\">5\u003C/code> \u003Ccode dir=\"auto\">6\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\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>Seçim aracı\u003C/td>\u003Ctd>\u003Ccode dir=\"auto\">V\u003C/code>\u003C/td>\u003Ctd>\u003Ccode dir=\"auto\">V\u003C/code>\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>El aracı\u003C/td>\u003Ctd>\u003Ccode dir=\"auto\">H\u003C/code>\u003C/td>\u003Ctd>\u003Ccode dir=\"auto\">H\u003C/code>\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>Tuvali kaydır\u003C/td>\u003Ctd>\u003Ccode dir=\"auto\">Space + Drag\u003C/code>\u003C/td>\u003Ctd>\u003Ccode dir=\"auto\">Space + Drag\u003C/code>\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>Yakınlaştır\u003C/td>\u003Ctd>\u003Ccode dir=\"auto\">Cmd + +\u003C/code>\u003C/td>\u003Ctd>\u003Ccode dir=\"auto\">Ctrl + +\u003C/code>\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>Uzaklaştır\u003C/td>\u003Ctd>\u003Ccode dir=\"auto\">Cmd + -\u003C/code>\u003C/td>\u003Ctd>\u003Ccode dir=\"auto\">Ctrl + -\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>\u003Ctr>\u003Ctd>Düğümü hafifçe taşı\u003C/td>\u003Ctd>\u003Ccode dir=\"auto\">Arrow\u003C/code> veya \u003Ccode dir=\"auto\">Shift + Arrow\u003C/code>\u003C/td>\u003Ctd>\u003Ccode dir=\"auto\">Arrow\u003C/code> veya \u003Ccode dir=\"auto\">Shift + Arrow\u003C/code>\u003C/td>\u003C/tr>\u003C/tbody>\u003C/table>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"yardım\">Yardım\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#yardı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 “Yardım”\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>Klavye kısayolları\u003C/td>\u003Ctd>\u003Ccode dir=\"auto\">?\u003C/code>\u003C/td>\u003Ctd>\u003Ccode dir=\"auto\">?\u003C/code>\u003C/td>\u003C/tr>\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>Düğümleri ara\u003C/td>\u003Ctd>\u003Ccode dir=\"auto\">Cmd + F\u003C/code>\u003C/td>\u003Ctd>\u003Ccode dir=\"auto\">Ctrl + F\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, aktif moda ve seçili öğeye göre değişebilir.\u003C/li>\n\u003Cli>Zihin haritası kısayolları yalnızca bir zihin haritası düğümü seçiliyken çalışır.\u003C/li>\n\u003Cli>Not renkleri kısayolları yalnızca bir annotation düğümü seçiliyken çalışır.\u003C/li>\n\u003Cli>Doğrudan kısayolu olmayan işlemler için \u003Ca href=\"/tr/command-center/\">Command Center\u003C/a> kullanabilirsiniz.\u003C/li>\n\u003C/ul>",{"headings":1737,"localImagePaths":1754,"remoteImagePaths":1755,"frontmatter":1756,"imagePaths":1757},[1738,1741,1744,1747,1748,1751],{"depth":30,"slug":1739,"text":1740},"temel","Temel",{"depth":30,"slug":1742,"text":1743},"düzenleme","Düzenleme",{"depth":30,"slug":1745,"text":1746},"düğüm-işlemleri","Düğüm işlemleri",{"depth":30,"slug":1388,"text":1389},{"depth":30,"slug":1749,"text":1750},"yardım","Yardım",{"depth":30,"slug":1752,"text":1753},"notlar","Notlar",[],[],{"draft":20,"title":688,"description":1727},[],"tr/introduction",{"id":1758,"data":1760,"body":1765,"filePath":1766,"digest":1767,"rendered":1768},{"title":550,"description":1761,"editUrl":16,"head":1762,"template":18,"sidebar":1763,"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":1764},{},"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":1769,"metadata":1770},"\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":1771,"localImagePaths":1796,"remoteImagePaths":1797,"frontmatter":1798,"imagePaths":1799},[1772,1775,1778,1781,1784,1787,1790,1793],{"depth":30,"slug":1773,"text":1774},"openflowkit-nerede-güçlüdür","OpenFlowKit nerede güçlüdür?",{"depth":30,"slug":1776,"text":1777},"ürünün-temel-yüzeyleri","Ürünün temel yüzeyleri",{"depth":30,"slug":1779,"text":1780},"uygulamadaki-diyagram-aileleri","Uygulamadaki diyagram aileleri",{"depth":30,"slug":1782,"text":1783},"temel-kavramlar","Temel kavramlar",{"depth":115,"slug":1785,"text":1786},"varsayılan-olarak-local-first","Varsayılan olarak local-first",{"depth":115,"slug":1788,"text":1789},"birden-fazla-giriş-modu","Birden fazla giriş modu",{"depth":115,"slug":1791,"text":1792},"düzenlenebilir-çıktılar","Düzenlenebilir çıktılar",{"depth":30,"slug":1794,"text":1795},"buradan-başlayın","Buradan başlayın",[],[],{"draft":20,"title":550,"description":1761},[],"tr/local-first-diagramming",{"id":1800,"data":1802,"body":1807,"filePath":1808,"digest":1809,"rendered":1810},{"title":656,"description":1803,"editUrl":16,"head":1804,"template":18,"sidebar":1805,"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":1806},{},"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":1811,"metadata":1812},"\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":1813,"localImagePaths":1817,"remoteImagePaths":1818,"frontmatter":1819,"imagePaths":1820},[1814],{"depth":30,"slug":1815,"text":1816},"pratik-etkileri","Pratik etkileri",[],[],{"draft":20,"title":656,"description":1803},[],"tr/mermaid-integration",{"id":1821,"data":1823,"body":1828,"filePath":1829,"digest":1830,"rendered":1831},{"title":723,"description":1824,"editUrl":16,"head":1825,"template":18,"sidebar":1826,"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":1827},{},"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":1832,"metadata":1833},"\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":1834,"localImagePaths":1847,"remoteImagePaths":1848,"frontmatter":1849,"imagePaths":1850},[1835,1838,1841,1844],{"depth":30,"slug":1836,"text":1837},"mermaid-ne-zaman-doğru-seçimdir","Mermaid ne zaman doğru seçimdir?",{"depth":30,"slug":1839,"text":1840},"studio-içinde-mermaid","Studio içinde Mermaid",{"depth":30,"slug":1842,"text":1843},"sadakat-beklentisi","Sadakat beklentisi",{"depth":30,"slug":1845,"text":1846},"önerilen-desen","Önerilen desen",[],[],{"draft":20,"title":723,"description":1824},[],"tr/mermaid-vs-openflow",{"id":1851,"data":1853,"body":1858,"filePath":1859,"digest":1860,"rendered":1861},{"title":756,"description":1854,"editUrl":16,"head":1855,"template":18,"sidebar":1856,"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":1857},{},"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":1862,"metadata":1863},"\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":1864,"localImagePaths":1874,"remoteImagePaths":1875,"frontmatter":1876,"imagePaths":1877},[1865,1868,1871],{"depth":30,"slug":1866,"text":1867},"mermaid-ne-zaman-seçilmeli","Mermaid ne zaman seçilmeli?",{"depth":30,"slug":1869,"text":1870},"openflow-dsl-ne-zaman-seçilmeli","OpenFlow DSL ne zaman seçilmeli?",{"depth":30,"slug":1872,"text":1873},"kısa-sonuç","Kısa sonuç",[],[],{"draft":20,"title":756,"description":1854},[],"tr/node-types",{"id":1878,"data":1880,"body":1885,"filePath":1886,"digest":1887,"rendered":1888},{"title":788,"description":1881,"editUrl":16,"head":1882,"template":18,"sidebar":1883,"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":1884},{},"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":1889,"metadata":1890},"\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":1891,"localImagePaths":1913,"remoteImagePaths":1914,"frontmatter":1915,"imagePaths":1916},[1892,1895,1898,1901,1904,1907,1910],{"depth":30,"slug":1893,"text":1894},"temel-düğüm-aileleri","Temel düğüm aileleri",{"depth":115,"slug":1896,"text":1897},"flow-düğümleri","Flow düğümleri",{"depth":115,"slug":1899,"text":1900},"mind-map-düğümleri","Mind map düğümleri",{"depth":115,"slug":1902,"text":1903},"architecture-ve-varlık-tabanlı-düğümler","Architecture ve varlık tabanlı düğümler",{"depth":115,"slug":1905,"text":1906},"journey-ve-deneyim-odaklı-düğümler","Journey ve deneyim odaklı düğümler",{"depth":115,"slug":1908,"text":1909},"medya-ve-wireframe-düğümleri","Medya ve wireframe düğümleri",{"depth":30,"slug":1911,"text":1912},"nasıl-seçilmeli","Nasıl seçilmeli?",[],[],{"draft":20,"title":788,"description":1881},[],"tr/openflow-dsl",{"id":1917,"data":1919,"body":1924,"filePath":1925,"digest":1926,"rendered":1927},{"title":827,"description":1920,"editUrl":16,"head":1921,"template":18,"sidebar":1922,"pagefind":16,"draft":20},"OpenFlowKit diyagramları için editör-doğal metin temsili olan OpenFlow DSL’i kullanın.",[],{"hidden":20,"attrs":1923},{},"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":1928,"metadata":1929},"\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: "Kullanıcı Kaydı"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: "Kayıt Formu"]node verify [label: "E-postayı Doğrula"]node success [label: "Çalışma Alanı Hazır", 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":1930,"localImagePaths":1946,"remoteImagePaths":1947,"frontmatter":1948,"imagePaths":1949},[1931,1934,1937,1940,1943],{"depth":30,"slug":1932,"text":1933},"nerede-doğru-seçimdir","Nerede doğru seçimdir?",{"depth":30,"slug":1935,"text":1936},"temel-belge-yapısı","Temel belge yapısı",{"depth":30,"slug":1938,"text":1939},"düğümler","Düğümler",{"depth":30,"slug":1941,"text":1942},"kenarlar","Kenarlar",{"depth":30,"slug":1944,"text":1945},"neden-ekipler-bunu-kullanır","Neden ekipler bunu kullanır?",[],[],{"draft":20,"title":827,"description":1920},[],"tr/payment-flow",{"id":1950,"data":1952,"body":1957,"filePath":1958,"digest":1959,"rendered":1960},{"title":971,"description":1953,"editUrl":16,"head":1954,"template":18,"sidebar":1955,"pagefind":16,"draft":20},"Abonelik, checkout, retry ve istisna yolları içeren ödeme sistemlerini OpenFlowKit ile modelleyin.",[],{"hidden":20,"attrs":1956},{},"Ö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","5a53c27eec98f149",{"html":1961,"metadata":1962},"\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":1963,"localImagePaths":1971,"remoteImagePaths":1972,"frontmatter":1973,"imagePaths":1974},[1964,1967,1970],{"depth":30,"slug":1965,"text":1966},"i̇yi-bir-ödeme-diyagramı-neleri-içermelidir","İyi bir ödeme diyagramı neleri içermelidir?",{"depth":30,"slug":1968,"text":1969},"güçlü-başlangıç-seçenekleri","Güçlü başlangıç seçenekleri",{"depth":30,"slug":1363,"text":1364},[],[],{"draft":20,"title":971,"description":1953},[],"tr/playback-history",{"id":1975,"data":1977,"body":1982,"filePath":1983,"digest":1984,"rendered":1985},{"title":861,"description":1978,"editUrl":16,"head":1979,"template":18,"sidebar":1980,"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":1981},{},"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":1986,"metadata":1987},"\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":1988,"localImagePaths":2001,"remoteImagePaths":2002,"frontmatter":2003,"imagePaths":2004},[1989,1992,1995,1998],{"depth":30,"slug":1990,"text":1991},"undo-ve-redo","Undo ve redo",{"depth":30,"slug":1993,"text":1994},"snapshotlar","Snapshot’lar",{"depth":30,"slug":1996,"text":1997},"playback-modeli","Playback modeli",{"depth":30,"slug":1999,"text":2000},"pratik-öneri","Pratik öneri",[],[],{"draft":20,"title":861,"description":1978},[],"tr/prompting-agents",{"id":2005,"data":2007,"body":2012,"filePath":2013,"digest":2014,"rendered":2015},{"title":893,"description":2008,"editUrl":16,"head":2009,"template":18,"sidebar":2010,"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":2011},{},"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":2016,"metadata":2017},"\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":2018,"localImagePaths":2026,"remoteImagePaths":2027,"frontmatter":2028,"imagePaths":2029},[2019,2022,2025],{"depth":30,"slug":2020,"text":2021},"ne-istemelisiniz","Ne istemelisiniz?",{"depth":30,"slug":2023,"text":2024},"güçlü-istem-yapısı","Güçlü istem yapısı",{"depth":30,"slug":1281,"text":1282},[],[],{"draft":20,"title":893,"description":2008},[],"tr/properties-panel",{"id":2030,"data":2032,"body":2037,"filePath":2038,"digest":2039,"rendered":2040},{"title":939,"description":2033,"editUrl":16,"head":2034,"template":18,"sidebar":2035,"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":2036},{},"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":2041,"metadata":2042},"\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":2043,"localImagePaths":2057,"remoteImagePaths":2058,"frontmatter":2059,"imagePaths":2060},[2044,2045,2048,2051,2054],{"depth":30,"slug":1536,"text":1537},{"depth":30,"slug":2046,"text":2047},"sağ-panelin-davranışı","Sağ panelin davranışı",{"depth":30,"slug":2049,"text":2050},"düğüm-düzenleme","Düğüm düzenleme",{"depth":30,"slug":2052,"text":2053},"kenar-düzenleme","Kenar düzenleme",{"depth":30,"slug":2055,"text":2056},"toplu-düzenleme","Toplu düzenleme",[],[],{"draft":20,"title":939,"description":2033},[],"tr/quick-start",{"id":2061,"data":2063,"body":2068,"filePath":2069,"digest":2070,"rendered":2071},{"title":1016,"description":2064,"editUrl":16,"head":2065,"template":18,"sidebar":2066,"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":2067},{},"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","677b18636b82a3ad",{"html":2072,"metadata":2073},"\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 & 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 & Sharing\u003C/a>\u003C/li>\n\u003C/ul>",{"headings":2074,"localImagePaths":2108,"remoteImagePaths":2109,"frontmatter":2110,"imagePaths":2111},[2075,2078,2081,2084,2087,2090,2093,2096,2099,2102,2105],{"depth":30,"slug":2076,"text":2077},"1-yeni-bir-belge-açın-veya-oluşturun","1. Yeni bir belge açın veya oluşturun",{"depth":30,"slug":2079,"text":2080},"2-başlangıç-noktanızı-seçin","2. Başlangıç noktanızı seçin",{"depth":115,"slug":2082,"text":2083},"boş-tuval","Boş tuval",{"depth":115,"slug":2085,"text":2086},"şablon","Şablon",{"depth":115,"slug":2088,"text":2089},"varlıklar","Varlıklar",{"depth":115,"slug":2091,"text":2092},"yapay-zeka","Yapay zeka",{"depth":115,"slug":2094,"text":2095},"kod","Kod",{"depth":115,"slug":2097,"text":2098},"yapılandırılmış-giriş","Yapılandırılmış giriş",{"depth":30,"slug":2100,"text":2101},"3-taslağı-iyileştirin","3. Taslağı iyileştirin",{"depth":30,"slug":2103,"text":2104},"4-kurtarma-noktaları-oluşturun","4. Kurtarma noktaları oluşturun",{"depth":30,"slug":2106,"text":2107},"5-paylaşın-veya-dışa-aktarın","5. Paylaşın veya dışa aktarın",[],[],{"draft":20,"title":1016,"description":2064},[],"tr/roadmap",{"id":2112,"data":2114,"body":2119,"filePath":2120,"digest":2121,"rendered":2122},{"title":1062,"description":2115,"editUrl":16,"head":2116,"template":18,"sidebar":2117,"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":2118},{},"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":2123,"metadata":2124},"\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":2125,"localImagePaths":2129,"remoteImagePaths":2130,"frontmatter":2131,"imagePaths":2132},[2126],{"depth":30,"slug":2127,"text":2128},"bu-sayfanın-amacı","Bu sayfanın amacı",[],[],{"draft":20,"title":1062,"description":2115},[],"tr/smart-layout",{"id":2133,"data":2135,"body":2140,"filePath":2141,"digest":2142,"rendered":2143},{"title":1084,"description":2136,"editUrl":16,"head":2137,"template":18,"sidebar":2138,"pagefind":16,"draft":20},"ELK tabanlı düzen ile kaba grafikleri daha okunabilir diyagramlara dönüştürün.",[],{"hidden":20,"attrs":2139},{},"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":2144,"metadata":2145},"\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":2146,"localImagePaths":2159,"remoteImagePaths":2160,"frontmatter":2161,"imagePaths":2162},[2147,2150,2153,2156],{"depth":30,"slug":2148,"text":2149},"otomatik-düzen-ne-zaman-kullanılmalı","Otomatik düzen ne zaman kullanılmalı?",{"depth":30,"slug":2151,"text":2152},"nasıl-çalıştırılır","Nasıl çalıştırılır?",{"depth":30,"slug":2154,"text":2155},"düzenin-güçlü-olduğu-alanlar","Düzenin güçlü olduğu alanlar",{"depth":30,"slug":2157,"text":2158},"pratik-strateji","Pratik strateji",[],[],{"draft":20,"title":1084,"description":2136},[],"tr/templates-assets",{"id":2163,"data":2165,"body":2170,"filePath":2171,"digest":2172,"rendered":2173},{"title":1161,"description":2166,"editUrl":16,"head":2167,"template":18,"sidebar":2168,"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":2169},{},"Ş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":2174,"metadata":2175},"\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":2176,"localImagePaths":2181,"remoteImagePaths":2182,"frontmatter":2183,"imagePaths":2184},[2177,2180],{"depth":30,"slug":2178,"text":2179},"şablonlar","Şablonlar",{"depth":30,"slug":2088,"text":2089},[],[],{"draft":20,"title":1161,"description":2166},[],"tr/studio-overview",{"id":2185,"data":2187,"body":2192,"filePath":2193,"digest":2194,"rendered":2195},{"title":1119,"description":2188,"editUrl":16,"head":2189,"template":18,"sidebar":2190,"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":2191},{},"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","33deca344ec1dce5",{"html":2196,"metadata":2197},"\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":2198,"localImagePaths":2205,"remoteImagePaths":2206,"frontmatter":2207,"imagePaths":2208},[2199,2202],{"depth":30,"slug":2200,"text":2201},"sekmeler","Sekmeler",{"depth":30,"slug":2203,"text":2204},"ne-zaman-açılmalı","Ne zaman açılmalı?",[],[],{"draft":20,"title":1119,"description":2188},[],"tr/theming",{"id":2209,"data":2211,"body":2216,"filePath":2217,"digest":2218,"rendered":2219},{"title":1193,"description":2212,"editUrl":16,"head":2213,"template":18,"sidebar":2214,"pagefind":16,"draft":20},"OpenFlowKit içinde tasarım sistemleri kullanarak her diyagramı tek tek stillendirmeden tutarlı bir görsel dil kurun.",[],{"hidden":20,"attrs":2215},{},"OpenFlowKit, tema yönetimini tek tek diyagram stilleri yerine tekrar kullanılabilir tasarım sistemleri üzerinden ele alır.\n\n## OpenFlowKit içinde theming ne anlama gelir?\n\nTheming 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.\n\nŞu durumlarda kullanın:\n\n- birden çok diyagramın tutarlı görünmesi gerektiğinde\n- farklı hedef kitleler için markalı varyantlar oluşturmak istediğinizde\n- her yeni akışta renk ve stil ayarlarını yeniden yapmak istemediğinizde\n- stil tanımlarını ortamlar arasında taşımak gerektiğinde\n\n## Önerilen kullanım şekli\n\nPratik akış şu şekildedir:\n\n1. Kararlı bir varsayılan tasarım sistemi ile başlayın.\n2. Marka veya kullanım bağlamı değiştiğinde onu çoğaltın.\n3. Diyagramları tek tek yeniden biçimlendirmek yerine aktif tasarım sistemini kullanın.\n4. Stil tanımını tarayıcı oturumu dışına taşımak gerektiğinde tema JSON'unu dışa aktarın.\n\n## Nereden yönetilir?\n\nKomut Merkezi üzerinden tasarım sistemi araçlarıyla şunları yapabilirsiniz:\n\n- aktif tasarım sistemini değiştirme\n- mevcut temaları çoğaltma ve düzenleme\n- JSON içe aktarma\n- aktif temayı dışa aktarma\n\n## Sistemi küçük tutun\n\nFazla 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.\n\n## İlgili sayfalar\n\n- [Design Systems & Branding](/tr/design-systems-branding/)\n- [Command Center](/tr/command-center/)\n- [Figma Design Import](/tr/figma-design-import/)","src/content/docs/tr/theming.md","7ba1381629fbff75",{"html":2220,"metadata":2221},"\u003Cp>OpenFlowKit, tema yönetimini tek tek diyagram stilleri yerine tekrar kullanılabilir tasarım sistemleri üzerinden ele alır.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"openflowkit-içinde-theming-ne-anlama-gelir\">OpenFlowKit içinde theming ne anlama gelir?\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#openflowkit-içinde-theming-ne-anlama-gelir\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.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 içinde theming ne anlama gelir?”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>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.\u003C/p>\n\u003Cp>Şu durumlarda kullanın:\u003C/p>\n\u003Cul>\n\u003Cli>birden çok diyagramın tutarlı görünmesi gerektiğinde\u003C/li>\n\u003Cli>farklı hedef kitleler için markalı varyantlar oluşturmak istediğinizde\u003C/li>\n\u003Cli>her yeni akışta renk ve stil ayarlarını yeniden yapmak istemediğinizde\u003C/li>\n\u003Cli>stil tanımlarını ortamlar arasında taşımak gerektiğinde\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"önerilen-kullanım-şekli\">Önerilen kullanım şekli\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#önerilen-kullanım-şekli\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.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 kullanım şekli”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Pratik akış şu şekildedir:\u003C/p>\n\u003Col>\n\u003Cli>Kararlı bir varsayılan tasarım sistemi ile başlayın.\u003C/li>\n\u003Cli>Marka veya kullanım bağlamı değiştiğinde onu çoğaltın.\u003C/li>\n\u003Cli>Diyagramları tek tek yeniden biçimlendirmek yerine aktif tasarım sistemini kullanın.\u003C/li>\n\u003Cli>Stil tanımını tarayıcı oturumu dışına taşımak gerektiğinde tema JSON’unu dışa aktarın.\u003C/li>\n\u003C/ol>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"nereden-yönetilir\">Nereden yönetilir?\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#nereden-yönetilir\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Nereden yönetilir?”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Komut Merkezi üzerinden tasarım sistemi araçlarıyla şunları yapabilirsiniz:\u003C/p>\n\u003Cul>\n\u003Cli>aktif tasarım sistemini değiştirme\u003C/li>\n\u003Cli>mevcut temaları çoğaltma ve düzenleme\u003C/li>\n\u003Cli>JSON içe aktarma\u003C/li>\n\u003Cli>aktif temayı dışa aktarma\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"sistemi-küçük-tutun\">Sistemi küçük tutun\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#sistemi-küçük-tutun\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Sistemi küçük tutun”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>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.\u003C/p>\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/design-systems-branding/\">Design Systems & Branding\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"/tr/command-center/\">Command Center\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"/tr/figma-design-import/\">Figma Design Import\u003C/a>\u003C/li>\n\u003C/ul>",{"headings":2222,"localImagePaths":2236,"remoteImagePaths":2237,"frontmatter":2238,"imagePaths":2239},[2223,2226,2229,2232,2235],{"depth":30,"slug":2224,"text":2225},"openflowkit-içinde-theming-ne-anlama-gelir","OpenFlowKit içinde theming ne anlama gelir?",{"depth":30,"slug":2227,"text":2228},"önerilen-kullanım-şekli","Önerilen kullanım şekli",{"depth":30,"slug":2230,"text":2231},"nereden-yönetilir","Nereden yönetilir?",{"depth":30,"slug":2233,"text":2234},"sistemi-küçük-tutun","Sistemi küçük tutun",{"depth":30,"slug":1281,"text":1282},[],[],{"draft":20,"title":1193,"description":2212},[],"tr/v1-beta-launch",{"id":2240,"data":2242,"body":2247,"filePath":2248,"digest":2249,"rendered":2250},{"title":1223,"description":2243,"editUrl":16,"head":2244,"template":18,"sidebar":2245,"pagefind":16,"draft":20},"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.",[],{"hidden":20,"attrs":2246},{},"Bu sayfa, V1 beta sürümünü güncel özellik taahhüdü olarak değil, ürün tarihinin bir notu olarak korur.\n\n## V1 beta neyi temsil ediyordu?\n\nV1 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ı.\n\nBu sürümle birlikte ürün yönü netleşti:\n\n- genel whiteboard yerine teknik diyagramlama odağı\n- varsayılan yaklaşım olarak local-first düzenleme\n- görsel tuvale ek olarak kod ve içe aktarma temelli çalışma akışları\n- ölü çıktı yerine düzenlenebilir başlangıç noktası olarak yapay zeka üretimi\n\n## Bu sürüm notu neden korunuyor?\n\nTarihsel sürüm notları şu konular için değerlidir:\n\n- ürün konumlandırmasının nasıl evrildiğini görmek\n- o dönemde hangi yeteneklerin temel kabul edildiğini anlamak\n- sonraki mimari ve iş akışı kararlarının neden alındığını takip etmek\n\n## Bunu tarih olarak okuyun, güncel yol haritası olarak değil\n\nO 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.\n\n## Güncel referanslar\n\n- [Introduction](/tr/introduction/)\n- [Quick Start](/tr/quick-start/)\n- [Studio Overview](/tr/studio-overview/)\n- [Roadmap](/tr/roadmap/)","src/content/docs/tr/v1-beta-launch.md","adea99a7df005cea",{"html":2251,"metadata":2252},"\u003Cp>Bu sayfa, V1 beta sürümünü güncel özellik taahhüdü olarak değil, ürün tarihinin bir notu olarak korur.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"v1-beta-neyi-temsil-ediyordu\">V1 beta neyi temsil ediyordu?\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#v1-beta-neyi-temsil-ediyordu\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.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 neyi temsil ediyordu?”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>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ı.\u003C/p>\n\u003Cp>Bu sürümle birlikte ürün yönü netleşti:\u003C/p>\n\u003Cul>\n\u003Cli>genel whiteboard yerine teknik diyagramlama odağı\u003C/li>\n\u003Cli>varsayılan yaklaşım olarak local-first düzenleme\u003C/li>\n\u003Cli>görsel tuvale ek olarak kod ve içe aktarma temelli çalışma akışları\u003C/li>\n\u003Cli>ölü çıktı yerine düzenlenebilir başlangıç noktası olarak yapay zeka üretimi\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"bu-sürüm-notu-neden-korunuyor\">Bu sürüm notu neden korunuyor?\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#bu-sürüm-notu-neden-korunuyor\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.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 sürüm notu neden korunuyor?”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Tarihsel sürüm notları şu konular için değerlidir:\u003C/p>\n\u003Cul>\n\u003Cli>ürün konumlandırmasının nasıl evrildiğini görmek\u003C/li>\n\u003Cli>o dönemde hangi yeteneklerin temel kabul edildiğini anlamak\u003C/li>\n\u003Cli>sonraki mimari ve iş akışı kararlarının neden alındığını takip etmek\u003C/li>\n\u003C/ul>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"bunu-tarih-olarak-okuyun-güncel-yol-haritası-olarak-değil\">Bunu tarih olarak okuyun, güncel yol haritası olarak değil\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#bunu-tarih-olarak-okuyun-güncel-yol-haritası-olarak-değil\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\">Section titled “Bunu tarih olarak okuyun, güncel yol haritası olarak değil”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>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.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"güncel-referanslar\">Güncel referanslar\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#güncel-referanslar\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.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üncel referanslar”\u003C/span>\u003C/a>\u003C/div>\n\u003Cul>\n\u003Cli>\u003Ca href=\"/tr/introduction/\">Introduction\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"/tr/quick-start/\">Quick Start\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"/tr/studio-overview/\">Studio Overview\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"/tr/roadmap/\">Roadmap\u003C/a>\u003C/li>\n\u003C/ul>",{"headings":2253,"localImagePaths":2266,"remoteImagePaths":2267,"frontmatter":2268,"imagePaths":2269},[2254,2257,2260,2263],{"depth":30,"slug":2255,"text":2256},"v1-beta-neyi-temsil-ediyordu","V1 beta neyi temsil ediyordu?",{"depth":30,"slug":2258,"text":2259},"bu-sürüm-notu-neden-korunuyor","Bu sürüm notu neden korunuyor?",{"depth":30,"slug":2261,"text":2262},"bunu-tarih-olarak-okuyun-güncel-yol-haritası-olarak-değil","Bunu tarih olarak okuyun, güncel yol haritası olarak değil",{"depth":30,"slug":2264,"text":2265},"güncel-referanslar","Güncel referanslar",[],[],{"draft":20,"title":1223,"description":2243},[]] \ No newline at end of file diff --git a/docs-site/astro.config.mjs b/docs-site/astro.config.mjs index bedef463..a9d26c67 100644 --- a/docs-site/astro.config.mjs +++ b/docs-site/astro.config.mjs @@ -4,9 +4,12 @@ import { toStarlightSidebar } from '../src/docs/publicDocsCatalog.js'; export default defineConfig({ site: 'https://docs.openflowkit.com', + legacy: { + collections: true, + }, integrations: [ starlight({ - title: 'OpenFlowKit | Free Local-First AI Diagramming for Builders', + title: 'OpenFlowKit Docs', description: 'Documentation for OpenFlowKit — the local-first, AI-powered diagramming tool.', favicon: '/favicon.svg', logo: { @@ -27,6 +30,48 @@ export default defineConfig({ }, sidebar: toStarlightSidebar(), customCss: ['./src/styles/custom.css'], + head: [ + { + tag: 'script', + attrs: { type: 'module' }, + content: ` + import { initializeSurfaceAnalytics } from '../../src/services/analytics/surfaceAnalyticsClient'; + + const analytics = initializeSurfaceAnalytics({ + surface: 'docs', + apiKey: import.meta.env.PUBLIC_POSTHOG_KEY, + apiHost: import.meta.env.PUBLIC_POSTHOG_HOST || 'https://us.i.posthog.com', + enabled: import.meta.env.PUBLIC_ENABLE_ANALYTICS === 'true', + }); + + analytics.capturePageView('docs_page_viewed'); + + document.addEventListener('click', (event) => { + const element = event.target instanceof Element ? event.target.closest('a') : null; + if (!(element instanceof HTMLAnchorElement)) return; + + const href = element.href || ''; + const target = element.dataset.analyticsTarget || null; + const placement = element.dataset.analyticsPlacement || null; + const explicitEvent = element.dataset.analyticsEvent || null; + + if (explicitEvent) { + analytics.capture(explicitEvent, { href, target, placement }); + return; + } + + if (href.includes('app.openflowkit.com')) { + analytics.capture('docs_open_app_clicked', { href, target: 'app', placement }); + return; + } + + if (href.includes('github.com/Vrun-design/openflowkit')) { + analytics.capture('docs_github_clicked', { href, target: 'github', placement }); + } + }); + `, + }, + ], }), ], }); diff --git a/docs-site/package.json b/docs-site/package.json index 03c68258..810e6176 100644 --- a/docs-site/package.json +++ b/docs-site/package.json @@ -11,6 +11,7 @@ "dependencies": { "@astrojs/starlight": "^0.34.0", "astro": "^5.7.0", + "posthog-js": "^1.347.2", "sharp": "^0.34.1" }, "overrides": { diff --git a/docs-site/src/content.config.ts b/docs-site/src/content/config.ts similarity index 51% rename from docs-site/src/content.config.ts rename to docs-site/src/content/config.ts index 6a7b7a02..31b74762 100644 --- a/docs-site/src/content.config.ts +++ b/docs-site/src/content/config.ts @@ -1,7 +1,6 @@ import { defineCollection } from 'astro:content'; -import { docsLoader } from '@astrojs/starlight/loaders'; import { docsSchema } from '@astrojs/starlight/schema'; export const collections = { - docs: defineCollection({ loader: docsLoader(), schema: docsSchema() }), + docs: defineCollection({ schema: docsSchema() }), }; diff --git a/docs-site/src/content/docs/command-center.md b/docs-site/src/content/docs/command-center.md index 3f3b0781..7dc09265 100644 --- a/docs-site/src/content/docs/command-center.md +++ b/docs-site/src/content/docs/command-center.md @@ -1,10 +1,10 @@ --- 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. +description: Use the keyboard-first launcher to search, import, start templates, browse asset libraries, 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 templates, search, imports, assets, layout, page management, layer management, and Studio-adjacent actions. > [!NOTE] > Open it with `Cmd + K` on macOS or `Ctrl + K` on Windows/Linux. @@ -14,12 +14,13 @@ The Command Center is the keyboard-first launcher for the editor. It opens as a The top-level command list includes actions such as: - Open Flowpilot +- Import from data +- Start from Template - Edit Flow DSL - Edit Mermaid Code - Assets - Search Nodes - Auto Layout -- Start from Template - Design Systems Playback-related entries may also appear when the relevant playback surface is active in the current product path. @@ -28,17 +29,16 @@ Playback-related entries may also appear when the relevant playback surface is a ### Assets -Use this to insert: +Use Assets when you want reusable visual libraries, not generic editor actions. The current asset libraries are centered on: + +- developer logos +- AWS service shapes +- Azure diagrams +- GCP diagrams +- CNCF shapes +- general-purpose icon sets -- sticky notes -- text blocks -- sections -- journey nodes -- mind map nodes -- architecture nodes -- uploaded images -- browser wireframes -- mobile wireframes +General insert actions are better handled from the toolbar add menu. ### Templates @@ -48,6 +48,18 @@ Use templates when you want a proven starting structure instead of a blank canva Use search to jump to named nodes in larger diagrams. +### Import + +Use Import when you already have source material such as SQL, OpenAPI, Terraform, Mermaid, or code-oriented structure that should become an editable first draft. + +### Layers + +Use Layers when the diagram needs visibility, lock, ordering, or section-level organization without flattening everything into one canvas plane. + +### Pages + +Use Pages when one flow should contain multiple related canvases instead of separate documents. + ### Design Systems Use Design Systems to switch themes, duplicate them, edit them, or import/export theme JSON. @@ -58,4 +70,4 @@ The Command Center is the fastest bridge between the canvas and Studio: - 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 +- use the Command Center for navigation, search, import, templates, assets, layers, pages, layout, and workflow switching diff --git a/docs-site/src/content/docs/import-from-data.md b/docs-site/src/content/docs/import-from-data.md index 5b1184d1..926d645e 100644 --- a/docs-site/src/content/docs/import-from-data.md +++ b/docs-site/src/content/docs/import-from-data.md @@ -1,10 +1,10 @@ --- draft: false title: Import from Structured Data -description: Turn SQL, OpenAPI, Terraform, and Kubernetes source text into editable diagrams from the Studio import flows. +description: Turn SQL, OpenAPI, Terraform, code, and other structured 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. +The structured import flows in Studio convert source text into editable diagrams. This is useful when you already have SQL, OpenAPI, Terraform, code, or infrastructure-oriented content and want a visual model quickly. ## How it works @@ -13,7 +13,7 @@ Paste your source text, choose the matching mode, and generate the diagram. Depe One common pipeline is: ```text -Your text → specialized prompt → AI model → DSL → ELK layout → canvas +Your text → specialized import flow → DSL or graph model → layout → canvas ``` All your existing AI provider and API key settings apply. @@ -35,6 +35,17 @@ Flowpilot will: Use OpenAPI import when you want a service or endpoint-level first pass from an existing API spec. +## Code and architecture imports + +Use code-oriented import paths when you want a draft that reflects application structure instead of hand-drawing from scratch. This is a good fit for: + +- backend service relationships +- module or package boundaries +- API-to-database handoffs +- architecture review prep before cleanup on the canvas + +These imports are best treated as editable first drafts, not perfect final diagrams. + ## 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/introduction.md b/docs-site/src/content/docs/introduction.md index fe469fca..058863ee 100644 --- a/docs-site/src/content/docs/introduction.md +++ b/docs-site/src/content/docs/introduction.md @@ -1,27 +1,38 @@ --- 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. +description: OpenFlowKit turns code, structured imports, templates, and prompts into editable technical diagrams inside a local-first workspace. --- -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. +OpenFlowKit is a local-first diagramming workspace for developers and builders. Its strongest path is simple: start from the most truthful input you already have, turn it into an editable diagram, then refine it visually instead of redrawing everything from scratch. -## What OpenFlowKit is good at +## Best reasons to use it OpenFlowKit works best when a diagram needs to evolve instead of staying static: -- 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 +- start from code, Mermaid, SQL, OpenAPI, Terraform, infrastructure files, or a strong starter template +- convert that source into an editable first draft instead of a dead export - 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 +## Strongest starting paths + +If you are evaluating OpenFlowKit quickly, start with one of these: + +- paste SQL or OpenAPI and generate a structured first draft +- import Terraform, Kubernetes, or other infra-oriented source text +- paste Mermaid or OpenFlow DSL and keep editing on the canvas +- start from a developer-oriented template when structure matters more than exact content +- use Flowpilot when you need a fast architecture draft from code or a prompt + ## Core product surfaces 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 workspace home for creating, opening, importing, and organizing flows +- A visual canvas for direct editing once a real document is open +- A command-driven launcher for search, templates, assets, imports, layers, pages, 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 @@ -48,14 +59,20 @@ Diagram state lives in the browser by default. You choose when to export, share, ### Multiple input modes -OpenFlowKit does not force a single source of truth. You can work visually, with AI, through OpenFlow DSL, through Mermaid, or from structured imports. +OpenFlowKit does not force a single source of truth. You can work visually, with AI, through OpenFlow DSL, through Mermaid, through structured imports, or from developer-oriented starter flows. ### Editable outputs Generated and imported diagrams come back into the same editable canvas model rather than becoming dead screenshots. +### Home and editor are separate surfaces + +OpenFlowKit now treats the home screen as the workspace listing surface and the editor as the action surface. The app does not create a fake default flow just to get you onto the canvas. + ## Start here - Read [Quick Start](/quick-start/) for the fastest first-run workflow. +- Read [Import from Structured Data](/import-from-data/) if you already have SQL, OpenAPI, code, or infra text. +- Read [Choose an Input Mode](/choose-input-mode/) if you are deciding between templates, import, AI, and diagram-as-code. - 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. +- Read [Templates & Asset Libraries](/templates-assets/) for starter flows and reusable visual libraries. diff --git a/docs-site/src/content/docs/local-first-diagramming.md b/docs-site/src/content/docs/local-first-diagramming.md index daae3adc..deb89198 100644 --- a/docs-site/src/content/docs/local-first-diagramming.md +++ b/docs-site/src/content/docs/local-first-diagramming.md @@ -11,7 +11,7 @@ Local-first means your diagram work starts in the browser, not on a required hos 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 +- refreshes and browser restarts should restore your saved documents instead of inventing a fake default file - 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 @@ -32,6 +32,7 @@ Local-first workflows are useful when: By default, OpenFlowKit keeps these things in browser-local storage on the current device: - saved diagrams and tabs +- workspace home state and document listings - document-oriented chat history for Flowpilot sessions - persistent AI settings when you choose persistent storage - local workspace preferences @@ -48,6 +49,8 @@ Local-first does not mean isolated forever. OpenFlowKit still supports: It means those are explicit actions instead of prerequisites. +If no document exists, the app stays on the workspace home instead of silently recreating an `Untitled` flow. + ## Recommended next reads - [Introduction](/introduction/) diff --git a/docs-site/src/content/docs/quick-start.md b/docs-site/src/content/docs/quick-start.md index caeedc1f..395464a9 100644 --- a/docs-site/src/content/docs/quick-start.md +++ b/docs-site/src/content/docs/quick-start.md @@ -8,15 +8,15 @@ This is the fastest reliable way to get productive if you are building software, ## 1. Start from the home screen -The first screen is designed to get you to a useful draft in under a couple of minutes. From there you can: +The first screen is the workspace home, not a forced blank diagram. From there you can: - 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 +- jump directly into templates or AI-assisted generation paths -Each document opens in its own editor tab. +Each flow opens in the editor only after a real document exists. ## 2. Pick the strongest input you already have @@ -24,7 +24,7 @@ OpenFlowKit works best when you start from the most truthful source available, t ### Template-first -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. +Use **Browse Templates** when you need a strong developer-oriented starting structure fast. The starter set is strongest for release flows, incident runbooks, cloud diagrams, sequence flows, C4 context, and architecture communication. ### Import or code-first @@ -32,7 +32,7 @@ Use import or the Studio code flows when you already have a technical source art - Mermaid or OpenFlow DSL for editable diagram-as-code - SQL or OpenAPI for structured system drafts -- Terraform or Kubernetes text for deterministic infra parsing +- Terraform, source code, or infrastructure text for system and architecture imports - JSON/OpenFlow when you are restoring a saved graph exactly ### Prompt-to-diagram @@ -50,7 +50,7 @@ If AI is not configured yet, use the **Add key** action to open the shared AI se ### Blank canvas and assets -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. +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 developer logos, cloud-provider libraries, CNCF shapes, and icon packs into the current flow. ## 3. Refine the diagram visually @@ -58,6 +58,7 @@ Once something is on the canvas: - move nodes into rough position - use the [Properties Panel](/properties-panel/) for exact edits and architecture metadata +- use [Layers](/command-center/) and page tabs when the diagram needs more structure - 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 diff --git a/docs-site/src/content/docs/roadmap.md b/docs-site/src/content/docs/roadmap.md index 2a60199c..a21bd1dd 100644 --- a/docs-site/src/content/docs/roadmap.md +++ b/docs-site/src/content/docs/roadmap.md @@ -1,17 +1,43 @@ --- draft: false title: Roadmap -description: How to read product direction without confusing roadmap ideas for currently documented functionality. +description: Current product direction for OpenFlowKit, separated clearly from already shipped behavior. --- -This docs site focuses on current shipped behavior plus default-enabled product surfaces that are already part of the active experience. +This docs site focuses mainly on current shipped behavior, but this page exists to make the near-term direction explicit without pretending those items are already done. -## What this page is for +## Shipping now -Use this page as a policy note, not as a promise list. +The current product direction is built around a few clear pillars that already shape the product: -- 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. +- a real workspace home instead of a forced default draft +- local-first saved documents and editor recovery +- AI, code, and import workflows living alongside the visual editor +- asset libraries for developer, cloud, and icon-heavy diagrams +- design systems, pages, layers, and structured canvas controls -For broader direction, refer to the project strategy materials in the repository rather than treating the docs site as a roadmap announcement channel. +## Near-term roadmap + +These are the highest-signal improvements currently worth planning around: + +- better layers and page workflows so larger diagrams are easier to organize, lock, focus, and navigate +- better code and structured-import diagram quality, especially for application architecture and source-driven drafts +- stronger auto-layout quality for complex technical graphs, including smarter defaults and less cleanup after import +- performance boosts for larger canvases, heavier diagrams, and more demanding editor sessions +- a cleaner asset browsing experience with stronger developer and infrastructure libraries +- continued docs-site refreshes so product surfaces stay aligned with reality + +## Likely follow-on improvements + +These are important, but they should be treated as direction rather than guarantees: + +- richer architecture review and linting workflows +- better import-to-layout pipelines for infra and code analysis +- more polished workspace/home flows for templates, import, and AI-first starts +- more capable export and publishing paths for documentation and reviews + +## How to read this page + +- Docs pages describe current shipped behavior first. +- This roadmap page names current product priorities and likely next areas of investment. +- If a capability is not described elsewhere in the docs as a current workflow, treat it as planned direction rather than a shipped feature. diff --git a/docs-site/src/content/docs/smart-layout.md b/docs-site/src/content/docs/smart-layout.md index 968a8310..d1e8e947 100644 --- a/docs-site/src/content/docs/smart-layout.md +++ b/docs-site/src/content/docs/smart-layout.md @@ -19,6 +19,8 @@ Use layout when: Open the Command Center and choose **Auto Layout**. The editor passes direction, algorithm, and spacing preferences into the layout request. +Current layout control is strongest when the diagram already has the right nodes and edges but needs better flow, spacing, and reading order. + Current directional options are: - `TB` @@ -36,6 +38,7 @@ Auto layout is especially effective for: - architecture graphs - state-like branching diagrams - AI-generated drafts +- imported code and structured data drafts It is less effective for intentionally hand-composed slides or dense annotated canvases where visual storytelling matters more than graph regularity. @@ -45,7 +48,7 @@ For the best result: 1. get the right nodes and edges first 2. run layout -3. group with sections if needed +3. use layers or sections if the diagram needs hierarchy 4. make final manual adjustments Do not spend time hand-aligning a graph before running layout. That work is usually wasted. @@ -64,3 +67,4 @@ OpenFlow DSL and Mermaid edits are especially effective when combined with layou - [Canvas Basics](/canvas-basics/) - [OpenFlow DSL](/openflow-dsl/) - [Mermaid Integration](/mermaid-integration/) +- [Import from Structured Data](/import-from-data/) diff --git a/docs-site/src/content/docs/studio-overview.md b/docs-site/src/content/docs/studio-overview.md index 361c77d3..4e0f0df2 100644 --- a/docs-site/src/content/docs/studio-overview.md +++ b/docs-site/src/content/docs/studio-overview.md @@ -4,7 +4,7 @@ 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 is the right-side workspace for generation, code-backed editing, structured 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. @@ -23,7 +23,7 @@ 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 +- import SQL, OpenAPI, Terraform, or code-oriented inputs - parse infra files without AI - define architecture constraints and review violations @@ -49,6 +49,7 @@ 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 +- you want diagram-as-code control before running visual cleanup or auto layout 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. @@ -88,9 +89,10 @@ 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 +3. use auto layout, layers, or pages if the structure is right but the organization is not +4. make exact changes in the inspector +5. save a snapshot before another major Studio operation +6. export or share once the structure is stable ## Related pages diff --git a/docs-site/src/content/docs/templates-assets.md b/docs-site/src/content/docs/templates-assets.md index dd1494f7..badacb52 100644 --- a/docs-site/src/content/docs/templates-assets.md +++ b/docs-site/src/content/docs/templates-assets.md @@ -1,55 +1,60 @@ --- draft: false -title: Templates & Starter Flows -description: Start diagrams faster with developer-oriented templates, architecture assets, and reusable starter packs. +title: Templates & Asset Libraries +description: Start diagrams faster with developer-oriented templates, asset libraries, 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. +Templates and assets help you skip the empty-canvas problem. In OpenFlowKit the starter library is tuned for developer and platform workflows first: incident response, release flow, architecture communication, cloud systems, backend handoffs, and technical planning. ## 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. +The template library includes curated starter graphs across flowcharts, architecture, cloud diagrams, sequence diagrams, and mind maps. These are designed to be edited directly, not admired and deleted. 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 +- incident response command flows +- production release train diagrams +- customer support AI escalation workflows +- C4 system context and container architecture diagrams +- edge security and zero-trust access layouts +- AWS and Azure platform starters with real operating paths +- CNCF GitOps delivery platform maps +- backend API request handoff sequence diagrams +- product discovery workshop maps 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 +## Asset libraries -The assets flow covers: +The assets flow is now focused on reusable libraries rather than a mixed bag of insert actions. The strongest buckets are: -- generic building blocks such as sections, text, and notes -- images and wireframe-style surfaces -- provider-backed architecture icons -- C4 and network-aware architecture nodes +- developer logos +- AWS service libraries +- Azure libraries +- GCP libraries +- CNCF libraries +- reusable icon packs -Assets are better than templates when you already know the overall structure and just need the right pieces to finish it. +Use assets when you already know the overall structure and just need the right visual vocabulary 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 provider-backed asset libraries 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` +1. `Incident Response Command Flow` +2. `Production Release Train` +3. `AWS Event-Driven SaaS Platform` 4. `C4 System Context` -5. `Network Edge Security` +5. `Backend API Request Handoff` -That set shows the best mix of developer-builder workflows, visual editing, and export/share value. +That set shows the best mix of operational workflows, architecture communication, and real-world editing value. ## Related pages diff --git a/docs-site/src/pages/index.astro b/docs-site/src/pages/index.astro index 10815e3e..dd58b173 100644 --- a/docs-site/src/pages/index.astro +++ b/docs-site/src/pages/index.astro @@ -1,168 +1,19 @@ --- -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/' }, -]; +const target = '/quick-start/'; --- - -
-

Docs Home

-

Start with the right path, not the full tree.

-

- 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. + + + + + + + + OpenFlowKit Docs + + +

+ Redirecting to Quick Start.

-
- Open Quick Start - Read Introduction -
-
- -
-
-

What OpenFlowKit Is

-

A local-first diagramming tool for editable technical workflows

-

- OpenFlowKit is built for architecture diagrams, flowcharts, system design, structured - imports, and AI-assisted diagram drafting. The docs are written to help you choose the - right starting point quickly instead of reading the full navigation tree end to end. -

-
-
-
-

Use it when diagrams need to stay editable

-

- OpenFlowKit is a better fit when you want to keep iterating in the canvas, work from - code-backed definitions, or export technical diagrams without flattening the workflow. -

-
-
-

Use AI as an assistant, not the whole workflow

-

- The AI docs explain how prompting, refinement, and settings work so teams can use AI - intentionally instead of treating it like a one-shot image generator. -

-
-
-

Start from the job you need done

-

- The fastest route is usually by workflow: architecture mapping, code-backed diagrams, - imports, exports, or editor fundamentals. -

-
-
-
- -
-
-

Start Here

-

Choose by what you need to do next

-

- These are the highest-signal entry points for new users and returning users who want a fast answer. -

-
-
- {guidedTracks.map((track) => ( - -

{track.title}

-

{track.description}

- - ))} -
-
- -
-
-

Common Journeys

-

Use docs by workflow, not just by feature name

-

- The docs are easier to navigate when they are framed around the work you are trying to finish. -

-
-
- {workflowCards.map((card) => ( - - {card.kicker} -

{card.title}

-

{card.description}

- - ))} -
-
- -
-
-

Reference

-

Frequently useful pages

-
-
- {referenceLinks.map((link) => ( - {link.title} - ))} -
-
- + + diff --git a/docs-site/src/styles/custom.css b/docs-site/src/styles/custom.css index 783becbc..da87492d 100644 --- a/docs-site/src/styles/custom.css +++ b/docs-site/src/styles/custom.css @@ -1,62 +1,128 @@ -/* OpenFlowKit brand colours for Starlight */ +/* OpenFlowKit docs visual system */ :root { - --sl-color-accent-low: #fbe9e3; - --sl-color-accent: #e95420; - --sl-color-accent-high: #c2410c; + --sl-color-accent-low: #fff1e8; + --sl-color-accent: #f05a24; + --sl-color-accent-high: #b9380e; + --docs-surface: #ffffff; + --docs-surface-soft: #f7f4f1; + --docs-border: rgba(19, 24, 33, 0.1); + --docs-border-strong: rgba(19, 24, 33, 0.18); + --docs-text-strong: #171922; + --docs-text: #4f5565; + --docs-text-soft: #727887; + --docs-hero-glow: rgba(240, 90, 36, 0.12); + --docs-panel-shadow: 0 24px 80px rgba(17, 20, 28, 0.08); } + :root[data-theme='dark'] { - --sl-color-accent-low: #3b1509; - --sl-color-accent: #f97316; - --sl-color-accent-high: #fed7aa; + --sl-color-accent-low: #38170d; + --sl-color-accent: #ff6b2c; + --sl-color-accent-high: #ffd0ba; + --docs-surface: #171922; + --docs-surface-soft: #1e212d; + --docs-border: rgba(205, 214, 244, 0.12); + --docs-border-strong: rgba(205, 214, 244, 0.2); + --docs-text-strong: #edf1ff; + --docs-text: #b7bfd6; + --docs-text-soft: #929ab1; + --docs-hero-glow: rgba(255, 107, 44, 0.18); + --docs-panel-shadow: 0 24px 80px rgba(0, 0, 0, 0.32); +} + +.docs-home-shell { + position: relative; + margin-top: 2.75rem; +} + +.docs-home-shell--hero { + margin-top: 0.5rem; +} + +.docs-home-shell--hero::before { + content: ''; + position: absolute; + inset: -2rem -1.5rem auto; + height: 24rem; + border-radius: 2rem; + background: + radial-gradient(circle at top left, var(--docs-hero-glow), transparent 45%), + linear-gradient(135deg, color-mix(in srgb, var(--sl-color-accent) 6%, transparent), transparent 55%); + pointer-events: none; + z-index: 0; } .docs-home-hero { - padding: 0.5rem 0 1rem; + position: relative; + z-index: 1; + display: grid; + gap: 1.5rem; + grid-template-columns: minmax(0, 1.35fr) minmax(18rem, 0.85fr); + align-items: stretch; } +.docs-home-hero-copy, +.docs-home-panel, +.docs-home-card, +.docs-home-link-list a { + border: 1px solid var(--docs-border); + background: linear-gradient(180deg, color-mix(in srgb, var(--docs-surface) 96%, transparent), var(--docs-surface)); + box-shadow: var(--docs-panel-shadow); +} + +.docs-home-hero-copy { + border-radius: 2rem; + padding: 2.4rem; +} + +.docs-home-panel { + border-radius: 1.6rem; + padding: 1.4rem; +} + +.docs-home-panel-label, .docs-home-eyebrow, .docs-home-section-label, .docs-home-kicker { - letter-spacing: 0.14em; + margin: 0 0 0.9rem; + letter-spacing: 0.16em; text-transform: uppercase; font-size: 0.72rem; font-weight: 700; -} - -.docs-home-eyebrow, -.docs-home-section-label { - color: var(--sl-color-text-accent); + color: var(--sl-color-accent); } .docs-home-hero h1, .docs-home-section h2 { margin: 0; - letter-spacing: -0.03em; + letter-spacing: -0.04em; + color: var(--docs-text-strong); } .docs-home-hero h1 { - max-width: 12ch; - font-size: clamp(2.4rem, 5vw, 4rem); - line-height: 0.95; + max-width: 11ch; + font-size: clamp(2.8rem, 5.6vw, 5.2rem); + line-height: 0.92; } .docs-home-lead, .docs-home-section-copy p, -.docs-home-card p { - color: var(--sl-color-gray-3); +.docs-home-card p, +.docs-home-signal-list li { + color: var(--docs-text); } .docs-home-lead { - max-width: 46rem; - font-size: 1.05rem; - line-height: 1.7; + max-width: 44rem; + margin-top: 1rem; + font-size: 1.06rem; + line-height: 1.75; } .docs-home-actions { display: flex; flex-wrap: wrap; - gap: 0.75rem; - margin-top: 1.5rem; + gap: 0.85rem; + margin-top: 1.65rem; } .docs-home-actions a { @@ -68,35 +134,107 @@ display: inline-flex; align-items: center; justify-content: center; - min-height: 2.8rem; - padding: 0.75rem 1.1rem; + min-height: 3rem; + padding: 0.85rem 1.25rem; border-radius: 999px; font-weight: 700; + transition: + transform 160ms ease, + border-color 160ms ease, + background-color 160ms ease, + color 160ms ease, + box-shadow 160ms ease; +} + +.docs-home-primary:hover, +.docs-home-secondary:hover, +.docs-home-card:hover, +.docs-home-link-list a:hover { + transform: translateY(-1px); } .docs-home-primary { background: var(--sl-color-accent); color: white; + box-shadow: 0 14px 34px color-mix(in srgb, var(--sl-color-accent) 24%, transparent); } .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); + border: 1px solid var(--docs-border-strong); + color: var(--docs-text-strong); + background: color-mix(in srgb, var(--docs-surface-soft) 78%, transparent); +} + +.docs-home-signal-list { + display: grid; + gap: 0.8rem; + margin: 0; + padding: 0; + list-style: none; +} + +.docs-home-signal-list li { + position: relative; + padding-left: 1rem; + line-height: 1.55; } -:root[data-theme='light'] .docs-home-secondary { - background: white; - color: var(--sl-color-black); +.docs-home-signal-list li::before { + content: ''; + position: absolute; + left: 0; + top: 0.55rem; + width: 0.42rem; + height: 0.42rem; + border-radius: 999px; + background: var(--sl-color-accent); +} + +.docs-home-mini-grid { + display: grid; + gap: 0.8rem; + margin-top: 1.25rem; } -.docs-home-section { - margin-top: 2.5rem; +.docs-home-mini-card { + display: block; + padding: 0.95rem 1rem; + border-radius: 1rem; + text-decoration: none; + border: 1px solid var(--docs-border); + background: color-mix(in srgb, var(--docs-surface-soft) 78%, transparent); +} + +.docs-home-mini-card span { + display: block; + margin-bottom: 0.35rem; + font-size: 0.72rem; + font-weight: 700; + letter-spacing: 0.14em; + text-transform: uppercase; + color: var(--sl-color-accent); +} + +.docs-home-mini-card strong { + color: var(--docs-text-strong); + font-size: 0.96rem; + line-height: 1.4; } .docs-home-section-copy { - max-width: 40rem; - margin-bottom: 1rem; + max-width: 46rem; + margin-bottom: 1.2rem; +} + +.docs-home-section-copy h2 { + font-size: clamp(2rem, 3.6vw, 3.4rem); + line-height: 0.98; +} + +.docs-home-section-copy p { + margin-top: 0.8rem; + font-size: 1rem; + line-height: 1.7; } .docs-home-grid { @@ -109,55 +247,81 @@ grid-template-columns: repeat(2, minmax(0, 1fr)); } +.docs-home-grid--insight { + grid-template-columns: repeat(3, 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); + padding: 1.3rem; + border-radius: 1.25rem; text-decoration: none; + transition: + transform 160ms ease, + border-color 160ms ease, + background-color 160ms ease; } .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); + margin: 0.3rem 0 0.5rem; + color: var(--docs-text-strong); + font-size: 1.06rem; + line-height: 1.35; } .docs-home-card p { margin: 0; - line-height: 1.6; + line-height: 1.65; +} + +.docs-home-card--track, +.docs-home-card--workflow { + background: + radial-gradient(circle at top right, color-mix(in srgb, var(--sl-color-accent) 10%, transparent), transparent 45%), + linear-gradient(180deg, color-mix(in srgb, var(--docs-surface-soft) 78%, transparent), var(--docs-surface)); } .docs-home-link-list { display: grid; - gap: 0.75rem; + gap: 0.85rem; 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); + padding: 1rem 1.05rem; + border-radius: 1rem; text-decoration: none; font-weight: 600; - color: var(--sl-color-white); - background: color-mix(in srgb, var(--sl-color-black) 18%, transparent); + color: var(--docs-text-strong); } -:root[data-theme='light'] .docs-home-link-list a { - background: white; - color: var(--sl-color-black); +@media (max-width: 70em) { + .docs-home-hero { + grid-template-columns: 1fr; + } + + .docs-home-grid--insight { + grid-template-columns: 1fr; + } } @media (max-width: 50em) { + .docs-home-shell { + margin-top: 2rem; + } + + .docs-home-shell--hero::before { + inset: -1rem -0.5rem auto; + height: 16rem; + } + + .docs-home-hero-copy, + .docs-home-panel { + padding: 1.35rem; + border-radius: 1.35rem; + } + .docs-home-grid, .docs-home-grid--tracks, .docs-home-link-list { @@ -166,5 +330,10 @@ .docs-home-hero h1 { max-width: none; + font-size: clamp(2.4rem, 10vw, 3.5rem); } -} + + .docs-home-section-copy h2 { + font-size: clamp(1.8rem, 8vw, 2.6rem); + } +} \ No newline at end of file diff --git a/e2e/smoke.spec.ts b/e2e/smoke.spec.ts index 9eef4865..d7a0a217 100644 --- a/e2e/smoke.spec.ts +++ b/e2e/smoke.spec.ts @@ -16,11 +16,11 @@ test('creates a new flow and adds an extra tab', async ({ page }) => { await expect(page).toHaveURL(/#\/flow\/[^?]+(?:\?.*)?$/); await expect(page.getByTestId('toolbar-add-toggle')).toBeVisible({ timeout: 15000 }); - const tabs = page.getByTestId('flow-tab'); + const tabs = page.getByTestId('flow-page-tab'); await expect(tabs.first()).toBeVisible(); const tabCountBefore = await tabs.count(); - await page.getByTestId('flow-tab-add').click(); + await page.getByTestId('flow-page-add').click(); await expect(tabs).toHaveCount(tabCountBefore + 1); await expect(page.getByTestId('empty-generate-ai')).toBeVisible(); diff --git a/e2e/workflows.spec.ts b/e2e/workflows.spec.ts index eda2b5bc..bbeec2e2 100644 --- a/e2e/workflows.spec.ts +++ b/e2e/workflows.spec.ts @@ -16,7 +16,7 @@ async function createNewFlow(page: import('@playwright/test').Page) { await page.getByTestId('home-create-new').click(); await expect(page).toHaveURL(/#\/flow\/[^?]+(?:\?.*)?$/); await expect(page.getByTestId('toolbar-add-toggle')).toBeVisible({ timeout: 15000 }); - await expect(page.getByTestId('flow-tab').first()).toBeVisible(); + await expect(page.getByTestId('flow-page-tab').first()).toBeVisible(); } async function addRectangleNode(page: import('@playwright/test').Page) { @@ -76,7 +76,7 @@ test('exports the diagram as JSON and download starts', async ({ page }) => { await addRectangleNode(page); await page.getByTestId('topnav-export').click(); - await page.getByTestId('export-section-code').click(); + await page.getByRole('tab', { name: 'Code' }).click(); await expect(page.getByTestId('export-action-json-download')).toBeVisible(); const downloadPromise = page.waitForEvent('download'); @@ -111,11 +111,10 @@ test('exports the diagram as PNG and download starts', async ({ page }) => { test('can create a second tab', async ({ page }) => { await createNewFlow(page); - const tabs = page.getByTestId('flow-tab'); + const tabs = page.getByTestId('flow-page-tab'); const initialCount = await tabs.count(); - // Use the + button to add a new tab - await page.getByTestId('flow-tab-add').click(); + await page.getByTestId('flow-page-add').click(); await expect(tabs).toHaveCount(initialCount + 1); }); @@ -159,10 +158,117 @@ test('deletes a selected node via the properties panel', async ({ page }) => { // Share panel opens // --------------------------------------------------------------------------- -test('share panel opens when share button is clicked', async ({ page }) => { +test('main menu exposes version history', async ({ page }) => { await createNewFlow(page); - await page.getByTestId('topnav-share').click(); + await page.getByTestId('topnav-menu-toggle').click(); + await expect(page.getByTestId('topnav-history')).toBeVisible(); +}); + +// --------------------------------------------------------------------------- +// Settings modal +// --------------------------------------------------------------------------- + +test('settings view opens from the home sidebar', async ({ page }) => { + await page.goto('/#/home'); + await page.getByTestId('sidebar-settings').click(); + + await expect(page.getByRole('heading', { name: 'Settings' })).toBeVisible(); + await expect(page.getByText('Canvas').first()).toBeVisible(); +}); + +test('main menu has theme toggle', async ({ page }) => { + await page.goto('/#/home'); + + await expect(page.getByTitle(/switch to dark mode|switch to light mode/i)).toBeVisible(); +}); + +test('switching to dark mode applies data-theme attribute', async ({ page }) => { + await page.goto('/#/home'); + await page.getByTitle(/switch to dark mode/i).click(); + + await expect(page.locator('html')).toHaveAttribute('data-theme', 'dark'); +}); + +// --------------------------------------------------------------------------- +// Command bar +// --------------------------------------------------------------------------- + +test('command bar opens with Cmd+K', async ({ page }) => { + await createNewFlow(page); + + await page.keyboard.press('ControlOrMeta+k'); + await expect(page.getByPlaceholder(/search/i)).toBeVisible(); +}); + +test('command bar fuzzy search works', async ({ page }) => { + await createNewFlow(page); + await page.keyboard.press('ControlOrMeta+k'); + + await page.getByPlaceholder(/search/i).fill('arc'); + await expect(page.getByText(/architecture/i).first()).toBeVisible(); +}); + +// --------------------------------------------------------------------------- +// Welcome modal +// --------------------------------------------------------------------------- + +test('welcome modal shows on first visit', async ({ page }) => { + await page.addInitScript(() => localStorage.clear()); + await page.goto('/#/home'); + + await expect(page.getByRole('heading', { name: 'OpenFlowKit' })).toBeVisible(); + await expect(page.getByRole('button', { name: 'Get Started' })).toBeVisible(); +}); + +test('welcome modal feature cards are clickable', async ({ page }) => { + await page.addInitScript(() => localStorage.clear()); + await page.goto('/#/home'); + + await page.getByText('Create amazing diagrams').click(); + await expect(page).toHaveURL(/#\/flow\//); +}); + +// --------------------------------------------------------------------------- +// Properties panel empty state +// --------------------------------------------------------------------------- + +test('new flows show the empty canvas actions', async ({ page }) => { + await createNewFlow(page); + + await expect(page.getByTestId('empty-generate-ai')).toBeVisible(); + await expect(page.getByText('Browse Templates')).toBeVisible(); + await expect(page.getByText('Add Blank Shape')).toBeVisible(); +}); + +// --------------------------------------------------------------------------- +// Accessibility +// --------------------------------------------------------------------------- + +test('skip-to-content link is present', async ({ page }) => { + await page.goto('/#/home'); + await page.keyboard.press('Tab'); + + const skipLink = page.getByText('Skip to content'); + await expect(skipLink).toBeVisible(); +}); + +test('flow tabs have tab role', async ({ page }) => { + await createNewFlow(page); + + await expect(page.getByRole('tab').first()).toBeVisible(); +}); + +// --------------------------------------------------------------------------- +// Keyboard navigation +// --------------------------------------------------------------------------- + +test('can navigate nodes with keyboard', async ({ page }) => { + await createNewFlow(page); + + await page.getByTestId('toolbar-add-toggle').click(); + await page.getByText('Sticky Note').click(); - await expect(page.getByTestId('share-panel')).toBeVisible(); + await page.keyboard.press('Tab'); + await page.keyboard.press('Tab'); }); diff --git a/package-lock.json b/package-lock.json index dc9c7053..f9fc3e50 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,13 +15,13 @@ "@google/genai": "^1.40.0", "@types/react-syntax-highlighter": "^15.5.13", "@xyflow/react": "^12.10.1", - "dagre": "0.8.5", "elkjs": "^0.11.0", "framer-motion": "^12.34.0", "html-to-image": "^1.11.13", "i18next": "^25.8.13", "i18next-browser-languagedetector": "^8.2.1", "i18next-http-backend": "^3.0.2", + "jszip": "^3.10.1", "lucide-react": "^0.563.0", "posthog-js": "^1.347.2", "react": "^19.2.4", @@ -30,11 +30,9 @@ "react-markdown": "9.0.1", "react-router-dom": "^7.13.0", "react-syntax-highlighter": "^16.1.0", - "rehype-raw": "^7.0.0", "rehype-slug": "^6.0.0", "remark-breaks": "^4.0.0", "remark-gfm": "4.0.0", - "remark-slug": "^7.0.1", "y-indexeddb": "^9.0.12", "y-webrtc": "^10.3.0", "y-websocket": "^3.0.0", @@ -50,6 +48,7 @@ "@typescript-eslint/eslint-plugin": "^8.55.0", "@typescript-eslint/parser": "^8.55.0", "@vitejs/plugin-react": "^5.1.4", + "@vitest/coverage-v8": "^4.1.2", "autoprefixer": "^10.4.24", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", @@ -82,6 +81,7 @@ "dependencies": { "@astrojs/starlight": "^0.34.0", "astro": "^5.7.0", + "posthog-js": "^1.347.2", "sharp": "^0.34.1" } }, @@ -724,6 +724,16 @@ "node": ">=6.9.0" } }, + "node_modules/@bcoe/v8-coverage": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-1.0.2.tgz", + "integrity": "sha512-6zABk/ECA/QYSCQ1NGiVwwbQerUCZ+TQbp64Q3AgmfNvurHH0j8TtXa1qbShXA6qqkpAj4V5W8pP6mLe1mcMqA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=18" + } + }, "node_modules/@capsizecss/unpack": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/@capsizecss/unpack/-/unpack-4.0.0.tgz", @@ -4878,32 +4888,63 @@ "vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0" } }, + "node_modules/@vitest/coverage-v8": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/@vitest/coverage-v8/-/coverage-v8-4.1.2.tgz", + "integrity": "sha512-sPK//PHO+kAkScb8XITeB1bf7fsk85Km7+rt4eeuRR3VS1/crD47cmV5wicisJmjNdfeokTZwjMk4Mj2d58Mgg==", + "dev": true, + "license": "MIT", + "dependencies": { + "@bcoe/v8-coverage": "^1.0.2", + "@vitest/utils": "4.1.2", + "ast-v8-to-istanbul": "^1.0.0", + "istanbul-lib-coverage": "^3.2.2", + "istanbul-lib-report": "^3.0.1", + "istanbul-reports": "^3.2.0", + "magicast": "^0.5.2", + "obug": "^2.1.1", + "std-env": "^4.0.0-rc.1", + "tinyrainbow": "^3.1.0" + }, + "funding": { + "url": "https://opencollective.com/vitest" + }, + "peerDependencies": { + "@vitest/browser": "4.1.2", + "vitest": "4.1.2" + }, + "peerDependenciesMeta": { + "@vitest/browser": { + "optional": true + } + } + }, "node_modules/@vitest/expect": { - "version": "4.0.18", - "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-4.0.18.tgz", - "integrity": "sha512-8sCWUyckXXYvx4opfzVY03EOiYVxyNrHS5QxX3DAIi5dpJAAkyJezHCP77VMX4HKA2LDT/Jpfo8i2r5BE3GnQQ==", + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-4.1.2.tgz", + "integrity": "sha512-gbu+7B0YgUJ2nkdsRJrFFW6X7NTP44WlhiclHniUhxADQJH5Szt9mZ9hWnJPJ8YwOK5zUOSSlSvyzRf0u1DSBQ==", "dev": true, "license": "MIT", "dependencies": { - "@standard-schema/spec": "^1.0.0", + "@standard-schema/spec": "^1.1.0", "@types/chai": "^5.2.2", - "@vitest/spy": "4.0.18", - "@vitest/utils": "4.0.18", - "chai": "^6.2.1", - "tinyrainbow": "^3.0.3" + "@vitest/spy": "4.1.2", + "@vitest/utils": "4.1.2", + "chai": "^6.2.2", + "tinyrainbow": "^3.1.0" }, "funding": { "url": "https://opencollective.com/vitest" } }, "node_modules/@vitest/mocker": { - "version": "4.0.18", - "resolved": "https://registry.npmjs.org/@vitest/mocker/-/mocker-4.0.18.tgz", - "integrity": "sha512-HhVd0MDnzzsgevnOWCBj5Otnzobjy5wLBe4EdeeFGv8luMsGcYqDuFRMcttKWZA5vVO8RFjexVovXvAM4JoJDQ==", + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/@vitest/mocker/-/mocker-4.1.2.tgz", + "integrity": "sha512-Ize4iQtEALHDttPRCmN+FKqOl2vxTiNUhzobQFFt/BM1lRUTG7zRCLOykG/6Vo4E4hnUdfVLo5/eqKPukcWW7Q==", "dev": true, "license": "MIT", "dependencies": { - "@vitest/spy": "4.0.18", + "@vitest/spy": "4.1.2", "estree-walker": "^3.0.3", "magic-string": "^0.30.21" }, @@ -4912,7 +4953,7 @@ }, "peerDependencies": { "msw": "^2.4.9", - "vite": "^6.0.0 || ^7.0.0-0" + "vite": "^6.0.0 || ^7.0.0 || ^8.0.0" }, "peerDependenciesMeta": { "msw": { @@ -4924,26 +4965,26 @@ } }, "node_modules/@vitest/pretty-format": { - "version": "4.0.18", - "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-4.0.18.tgz", - "integrity": "sha512-P24GK3GulZWC5tz87ux0m8OADrQIUVDPIjjj65vBXYG17ZeU3qD7r+MNZ1RNv4l8CGU2vtTRqixrOi9fYk/yKw==", + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-4.1.2.tgz", + "integrity": "sha512-dwQga8aejqeuB+TvXCMzSQemvV9hNEtDDpgUKDzOmNQayl2OG241PSWeJwKRH3CiC+sESrmoFd49rfnq7T4RnA==", "dev": true, "license": "MIT", "dependencies": { - "tinyrainbow": "^3.0.3" + "tinyrainbow": "^3.1.0" }, "funding": { "url": "https://opencollective.com/vitest" } }, "node_modules/@vitest/runner": { - "version": "4.0.18", - "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-4.0.18.tgz", - "integrity": "sha512-rpk9y12PGa22Jg6g5M3UVVnTS7+zycIGk9ZNGN+m6tZHKQb7jrP7/77WfZy13Y/EUDd52NDsLRQhYKtv7XfPQw==", + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-4.1.2.tgz", + "integrity": "sha512-Gr+FQan34CdiYAwpGJmQG8PgkyFVmARK8/xSijia3eTFgVfpcpztWLuP6FttGNfPLJhaZVP/euvujeNYar36OQ==", "dev": true, "license": "MIT", "dependencies": { - "@vitest/utils": "4.0.18", + "@vitest/utils": "4.1.2", "pathe": "^2.0.3" }, "funding": { @@ -4951,13 +4992,14 @@ } }, "node_modules/@vitest/snapshot": { - "version": "4.0.18", - "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-4.0.18.tgz", - "integrity": "sha512-PCiV0rcl7jKQjbgYqjtakly6T1uwv/5BQ9SwBLekVg/EaYeQFPiXcgrC2Y7vDMA8dM1SUEAEV82kgSQIlXNMvA==", + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-4.1.2.tgz", + "integrity": "sha512-g7yfUmxYS4mNxk31qbOYsSt2F4m1E02LFqO53Xpzg3zKMhLAPZAjjfyl9e6z7HrW6LvUdTwAQR3HHfLjpko16A==", "dev": true, "license": "MIT", "dependencies": { - "@vitest/pretty-format": "4.0.18", + "@vitest/pretty-format": "4.1.2", + "@vitest/utils": "4.1.2", "magic-string": "^0.30.21", "pathe": "^2.0.3" }, @@ -4966,9 +5008,9 @@ } }, "node_modules/@vitest/spy": { - "version": "4.0.18", - "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-4.0.18.tgz", - "integrity": "sha512-cbQt3PTSD7P2OARdVW3qWER5EGq7PHlvE+QfzSC0lbwO+xnt7+XH06ZzFjFRgzUX//JmpxrCu92VdwvEPlWSNw==", + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-4.1.2.tgz", + "integrity": "sha512-DU4fBnbVCJGNBwVA6xSToNXrkZNSiw59H8tcuUspVMsBDBST4nfvsPsEHDHGtWRRnqBERBQu7TrTKskmjqTXKA==", "dev": true, "license": "MIT", "funding": { @@ -4976,14 +5018,15 @@ } }, "node_modules/@vitest/utils": { - "version": "4.0.18", - "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-4.0.18.tgz", - "integrity": "sha512-msMRKLMVLWygpK3u2Hybgi4MNjcYJvwTb0Ru09+fOyCXIgT5raYP041DRRdiJiI3k/2U6SEbAETB3YtBrUkCFA==", + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-4.1.2.tgz", + "integrity": "sha512-xw2/TiX82lQHA06cgbqRKFb5lCAy3axQ4H4SoUFhUsg+wztiet+co86IAMDtF6Vm1hc7J6j09oh/rgDn+JdKIQ==", "dev": true, "license": "MIT", "dependencies": { - "@vitest/pretty-format": "4.0.18", - "tinyrainbow": "^3.0.3" + "@vitest/pretty-format": "4.1.2", + "convert-source-map": "^2.0.0", + "tinyrainbow": "^3.1.0" }, "funding": { "url": "https://opencollective.com/vitest" @@ -5510,6 +5553,25 @@ "node": ">=12" } }, + "node_modules/ast-v8-to-istanbul": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/ast-v8-to-istanbul/-/ast-v8-to-istanbul-1.0.0.tgz", + "integrity": "sha512-1fSfIwuDICFA4LKkCzRPO7F0hzFf0B7+Xqrl27ynQaa+Rh0e1Es0v6kWHPott3lU10AyAr7oKHa65OppjLn3Rg==", + "dev": true, + "license": "MIT", + "dependencies": { + "@jridgewell/trace-mapping": "^0.3.31", + "estree-walker": "^3.0.3", + "js-tokens": "^10.0.0" + } + }, + "node_modules/ast-v8-to-istanbul/node_modules/js-tokens": { + "version": "10.0.0", + "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-10.0.0.tgz", + "integrity": "sha512-lM/UBzQmfJRo9ABXbPWemivdCW8V2G8FHaHdypQaIy523snUjog0W71ayWXTjiR+ixeMyVHN2XcpnTd/liPg/Q==", + "dev": true, + "license": "MIT" + }, "node_modules/astring": { "version": "1.9.0", "resolved": "https://registry.npmjs.org/astring/-/astring-1.9.0.tgz", @@ -6918,6 +6980,12 @@ "url": "https://opencollective.com/core-js" } }, + "node_modules/core-util-is": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz", + "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==", + "license": "MIT" + }, "node_modules/cross-fetch": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-4.0.0.tgz", @@ -7238,16 +7306,6 @@ "node": ">=12" } }, - "node_modules/dagre": { - "version": "0.8.5", - "resolved": "https://registry.npmjs.org/dagre/-/dagre-0.8.5.tgz", - "integrity": "sha512-/aTqmnRta7x7MCCpExk7HQL2O4owCT2h8NT//9I1OQ9vt29Pa0BzSAkR5lwFUcQ7491yVi/3CXU9jQ5o0Mn2Sw==", - "license": "MIT", - "dependencies": { - "graphlib": "^2.1.8", - "lodash": "^4.17.15" - } - }, "node_modules/data-uri-to-buffer": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-4.0.1.tgz", @@ -9223,12 +9281,6 @@ "node": ">=10" } }, - "node_modules/github-slugger": { - "version": "1.5.0", - "resolved": "https://registry.npmjs.org/github-slugger/-/github-slugger-1.5.0.tgz", - "integrity": "sha512-wIh+gKBI9Nshz2o46B0B3f5k/W+WI9ZAv6y5Dn5WJ5SK1t0TnDimB4WE5rmTD05ZAIn8HALCZVmCsvj0w0v0lw==", - "license": "ISC" - }, "node_modules/glob": { "version": "10.5.0", "resolved": "https://registry.npmjs.org/glob/-/glob-10.5.0.tgz", @@ -9370,15 +9422,6 @@ "dev": true, "license": "MIT" }, - "node_modules/graphlib": { - "version": "2.1.8", - "resolved": "https://registry.npmjs.org/graphlib/-/graphlib-2.1.8.tgz", - "integrity": "sha512-jcLLfkpoVGmH7/InMC/1hIvOPSUh38oJtGhvrOFGzioE1DZ+0YW16RgmOJhHiuWTvGiJQ9Z1Ik43JvkRPRvE+A==", - "license": "MIT", - "dependencies": { - "lodash": "^4.17.15" - } - }, "node_modules/gtoken": { "version": "8.0.0", "resolved": "https://registry.npmjs.org/gtoken/-/gtoken-8.0.0.tgz", @@ -10149,6 +10192,12 @@ "node": ">= 4" } }, + "node_modules/immediate": { + "version": "3.0.6", + "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz", + "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==", + "license": "MIT" + }, "node_modules/import-fresh": { "version": "3.3.1", "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz", @@ -10349,29 +10398,6 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/is-buffer": { - "version": "2.0.5", - "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.5.tgz", - "integrity": "sha512-i2R6zNFDwgEHJyQUtJEk0XFi1i0dPFn/oqjK3/vPCcDeJvW5NQ83V8QbicfF1SupOaB0h8ntgBC2YiE7dfyctQ==", - "funding": [ - { - "type": "github", - "url": "https://github.com/sponsors/feross" - }, - { - "type": "patreon", - "url": "https://www.patreon.com/feross" - }, - { - "type": "consulting", - "url": "https://feross.org/support" - } - ], - "license": "MIT", - "engines": { - "node": ">=4" - } - }, "node_modules/is-callable": { "version": "1.2.7", "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.7.tgz", @@ -10835,6 +10861,81 @@ "url": "https://github.com/sponsors/dmonad" } }, + "node_modules/istanbul-lib-coverage": { + "version": "3.2.2", + "resolved": "https://registry.npmjs.org/istanbul-lib-coverage/-/istanbul-lib-coverage-3.2.2.tgz", + "integrity": "sha512-O8dpsF+r0WV/8MNRKfnmrtCWhuKjxrq2w+jpzBL5UZKTi2LeVWnWOmWRxFlesJONmc+wLAGvKQZEOanko0LFTg==", + "dev": true, + "license": "BSD-3-Clause", + "engines": { + "node": ">=8" + } + }, + "node_modules/istanbul-lib-report": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/istanbul-lib-report/-/istanbul-lib-report-3.0.1.tgz", + "integrity": "sha512-GCfE1mtsHGOELCU8e/Z7YWzpmybrx/+dSTfLrvY8qRmaY6zXTKWn6WQIjaAFw069icm6GVMNkgu0NzI4iPZUNw==", + "dev": true, + "license": "BSD-3-Clause", + "dependencies": { + "istanbul-lib-coverage": "^3.0.0", + "make-dir": "^4.0.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/istanbul-lib-report/node_modules/make-dir": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-4.0.0.tgz", + "integrity": "sha512-hXdUTZYIVOt1Ex//jAQi+wTZZpUpwBj/0QsOzqegb3rGMMeJiSEu5xLHnYfBrRV4RH2+OCSOO95Is/7x1WJ4bw==", + "dev": true, + "license": "MIT", + "dependencies": { + "semver": "^7.5.3" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/istanbul-lib-report/node_modules/semver": { + "version": "7.7.4", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.4.tgz", + "integrity": "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==", + "dev": true, + "license": "ISC", + "bin": { + "semver": "bin/semver.js" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/istanbul-reports": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/istanbul-reports/-/istanbul-reports-3.2.0.tgz", + "integrity": "sha512-HGYWWS/ehqTV3xN10i23tkPkpH46MLCIMFNCaaKNavAXTF1RkqxawEPtnjnGZ6XKSInBKkiOA5BKS+aZiY3AvA==", + "dev": true, + "license": "BSD-3-Clause", + "dependencies": { + "html-escaper": "^2.0.0", + "istanbul-lib-report": "^3.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/istanbul-reports/node_modules/html-escaper": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-2.0.2.tgz", + "integrity": "sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==", + "dev": true, + "license": "MIT" + }, "node_modules/iterator.prototype": { "version": "1.1.5", "resolved": "https://registry.npmjs.org/iterator.prototype/-/iterator.prototype-1.1.5.tgz", @@ -11025,6 +11126,54 @@ "node": ">=4.0" } }, + "node_modules/jszip": { + "version": "3.10.1", + "resolved": "https://registry.npmjs.org/jszip/-/jszip-3.10.1.tgz", + "integrity": "sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g==", + "license": "(MIT OR GPL-3.0-or-later)", + "dependencies": { + "lie": "~3.3.0", + "pako": "~1.0.2", + "readable-stream": "~2.3.6", + "setimmediate": "^1.0.5" + } + }, + "node_modules/jszip/node_modules/isarray": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz", + "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==", + "license": "MIT" + }, + "node_modules/jszip/node_modules/readable-stream": { + "version": "2.3.8", + "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz", + "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==", + "license": "MIT", + "dependencies": { + "core-util-is": "~1.0.0", + "inherits": "~2.0.3", + "isarray": "~1.0.0", + "process-nextick-args": "~2.0.0", + "safe-buffer": "~5.1.1", + "string_decoder": "~1.1.1", + "util-deprecate": "~1.0.1" + } + }, + "node_modules/jszip/node_modules/safe-buffer": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", + "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==", + "license": "MIT" + }, + "node_modules/jszip/node_modules/string_decoder": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz", + "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==", + "license": "MIT", + "dependencies": { + "safe-buffer": "~5.1.0" + } + }, "node_modules/jwa": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/jwa/-/jwa-2.0.1.tgz", @@ -11116,6 +11265,15 @@ "url": "https://github.com/sponsors/dmonad" } }, + "node_modules/lie": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/lie/-/lie-3.3.0.tgz", + "integrity": "sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==", + "license": "MIT", + "dependencies": { + "immediate": "~3.0.5" + } + }, "node_modules/lightningcss": { "version": "1.30.2", "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.30.2.tgz", @@ -11497,6 +11655,7 @@ "version": "4.17.23", "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.23.tgz", "integrity": "sha512-LgVTMpQtIopCi79SJeDiP0TfWi5CNEc/L/aRdTh3yIvmZXTnheWpKjSZhnvMl8iXbC1tFg9gdHHDMLoV7CnG+w==", + "dev": true, "license": "MIT" }, "node_modules/lodash.get": { @@ -13449,6 +13608,12 @@ "@pagefind/windows-x64": "1.4.0" } }, + "node_modules/pako": { + "version": "1.0.11", + "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz", + "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==", + "license": "(MIT AND Zlib)" + }, "node_modules/parent-module": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz", @@ -13934,6 +14099,12 @@ "node": ">=6" } }, + "node_modules/process-nextick-args": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz", + "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==", + "license": "MIT" + }, "node_modules/prompts": { "version": "2.4.2", "resolved": "https://registry.npmjs.org/prompts/-/prompts-2.4.2.tgz", @@ -14611,165 +14782,6 @@ "url": "https://opencollective.com/unified" } }, - "node_modules/remark-slug": { - "version": "7.0.1", - "resolved": "https://registry.npmjs.org/remark-slug/-/remark-slug-7.0.1.tgz", - "integrity": "sha512-NRvYePr69LdeCkEGwL4KYAmq7kdWG5rEavCXMzUR4qndLoXHJAOLSUmPY6Qm4NJfKix7/EmgObyVaYivONAFhg==", - "license": "MIT", - "dependencies": { - "@types/hast": "^2.3.2", - "@types/mdast": "^3.0.0", - "github-slugger": "^1.0.0", - "mdast-util-to-string": "^3.0.0", - "unified": "^10.0.0", - "unist-util-visit": "^4.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/unified" - } - }, - "node_modules/remark-slug/node_modules/@types/hast": { - "version": "2.3.10", - "resolved": "https://registry.npmjs.org/@types/hast/-/hast-2.3.10.tgz", - "integrity": "sha512-McWspRw8xx8J9HurkVBfYj0xKoE25tOFlHGdx4MJ5xORQrMGZNqJhVQWaIbm6Oyla5kYOXtDiopzKRJzEOkwJw==", - "license": "MIT", - "dependencies": { - "@types/unist": "^2" - } - }, - "node_modules/remark-slug/node_modules/@types/mdast": { - "version": "3.0.15", - "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-3.0.15.tgz", - "integrity": "sha512-LnwD+mUEfxWMa1QpDraczIn6k0Ee3SMicuYSSzS6ZYl2gKS09EClnJYGd8Du6rfc5r/GZEk5o1mRb8TaTj03sQ==", - "license": "MIT", - "dependencies": { - "@types/unist": "^2" - } - }, - "node_modules/remark-slug/node_modules/@types/unist": { - "version": "2.0.11", - "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.11.tgz", - "integrity": "sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==", - "license": "MIT" - }, - "node_modules/remark-slug/node_modules/mdast-util-to-string": { - "version": "3.2.0", - "resolved": "https://registry.npmjs.org/mdast-util-to-string/-/mdast-util-to-string-3.2.0.tgz", - "integrity": "sha512-V4Zn/ncyN1QNSqSBxTrMOLpjr+IKdHl2v3KVLoWmDPscP4r9GcCi71gjgvUV1SFSKh92AjAG4peFuBl2/YgCJg==", - "license": "MIT", - "dependencies": { - "@types/mdast": "^3.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/unified" - } - }, - "node_modules/remark-slug/node_modules/unified": { - "version": "10.1.2", - "resolved": "https://registry.npmjs.org/unified/-/unified-10.1.2.tgz", - "integrity": "sha512-pUSWAi/RAnVy1Pif2kAoeWNBa3JVrx0MId2LASj8G+7AiHWoKZNTomq6LG326T68U7/e263X6fTdcXIy7XnF7Q==", - "license": "MIT", - "dependencies": { - "@types/unist": "^2.0.0", - "bail": "^2.0.0", - "extend": "^3.0.0", - "is-buffer": "^2.0.0", - "is-plain-obj": "^4.0.0", - "trough": "^2.0.0", - "vfile": "^5.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/unified" - } - }, - "node_modules/remark-slug/node_modules/unist-util-is": { - "version": "5.2.1", - "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-5.2.1.tgz", - "integrity": "sha512-u9njyyfEh43npf1M+yGKDGVPbY/JWEemg5nH05ncKPfi+kBbKBJoTdsogMu33uhytuLlv9y0O7GH7fEdwLdLQw==", - "license": "MIT", - "dependencies": { - "@types/unist": "^2.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/unified" - } - }, - "node_modules/remark-slug/node_modules/unist-util-stringify-position": { - "version": "3.0.3", - "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-3.0.3.tgz", - "integrity": "sha512-k5GzIBZ/QatR8N5X2y+drfpWG8IDBzdnVj6OInRNWm1oXrzydiaAT2OQiA8DPRRZyAKb9b6I2a6PxYklZD0gKg==", - "license": "MIT", - "dependencies": { - "@types/unist": "^2.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/unified" - } - }, - "node_modules/remark-slug/node_modules/unist-util-visit": { - "version": "4.1.2", - "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-4.1.2.tgz", - "integrity": "sha512-MSd8OUGISqHdVvfY9TPhyK2VdUrPgxkUtWSuMHF6XAAFuL4LokseigBnZtPnJMu+FbynTkFNnFlyjxpVKujMRg==", - "license": "MIT", - "dependencies": { - "@types/unist": "^2.0.0", - "unist-util-is": "^5.0.0", - "unist-util-visit-parents": "^5.1.1" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/unified" - } - }, - "node_modules/remark-slug/node_modules/unist-util-visit-parents": { - "version": "5.1.3", - "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-5.1.3.tgz", - "integrity": "sha512-x6+y8g7wWMyQhL1iZfhIPhDAs7Xwbn9nRosDXl7qoPTSCy0yNxnKc+hWokFifWQIDGi154rdUqKvbCa4+1kLhg==", - "license": "MIT", - "dependencies": { - "@types/unist": "^2.0.0", - "unist-util-is": "^5.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/unified" - } - }, - "node_modules/remark-slug/node_modules/vfile": { - "version": "5.3.7", - "resolved": "https://registry.npmjs.org/vfile/-/vfile-5.3.7.tgz", - "integrity": "sha512-r7qlzkgErKjobAmyNIkkSpizsFPYiUPuJb5pNW1RB4JcYVZhs4lIbVqk8XPk033CV/1z8ss5pkax8SuhGpcG8g==", - "license": "MIT", - "dependencies": { - "@types/unist": "^2.0.0", - "is-buffer": "^2.0.0", - "unist-util-stringify-position": "^3.0.0", - "vfile-message": "^3.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/unified" - } - }, - "node_modules/remark-slug/node_modules/vfile-message": { - "version": "3.1.4", - "resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-3.1.4.tgz", - "integrity": "sha512-fa0Z6P8HUrQN4BZaX05SIVXic+7kE3b05PWAtPuYP9QLHsLKYR7/AlLW3NtOrpXRLeawpDLMsVkmk5DG0NXgWw==", - "license": "MIT", - "dependencies": { - "@types/unist": "^2.0.0", - "unist-util-stringify-position": "^3.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/unified" - } - }, "node_modules/remark-smartypants": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/remark-smartypants/-/remark-smartypants-3.0.2.tgz", @@ -15200,6 +15212,12 @@ "node": ">= 0.4" } }, + "node_modules/setimmediate": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz", + "integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==", + "license": "MIT" + }, "node_modules/sharp": { "version": "0.34.5", "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.34.5.tgz", @@ -15553,9 +15571,9 @@ "license": "MIT" }, "node_modules/std-env": { - "version": "3.10.0", - "resolved": "https://registry.npmjs.org/std-env/-/std-env-3.10.0.tgz", - "integrity": "sha512-5GS12FdOZNliM5mAOxFRg7Ir0pWz8MdpYm6AY6VPkGpbA7ZzmbzNcBJQ0GPvvyWgcY7QAhCgf9Uy89I03faLkg==", + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/std-env/-/std-env-4.0.0.tgz", + "integrity": "sha512-zUMPtQ/HBY3/50VbpkupYHbRroTRZJPRLvreamgErJVys0ceuzMkD44J/QjqhHjOzK42GQ3QZIeFG1OYfOtKqQ==", "dev": true, "license": "MIT" }, @@ -16056,9 +16074,9 @@ } }, "node_modules/tinyrainbow": { - "version": "3.0.3", - "resolved": "https://registry.npmjs.org/tinyrainbow/-/tinyrainbow-3.0.3.tgz", - "integrity": "sha512-PSkbLUoxOFRzJYjjxHJt9xro7D+iilgMX/C9lawzVuYiIdcihh9DXmVibBe8lmcFrRi/VzlPjBxbN7rH24q8/Q==", + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/tinyrainbow/-/tinyrainbow-3.1.0.tgz", + "integrity": "sha512-Bf+ILmBgretUrdJxzXM0SgXLZ3XfiaUuOj/IKQHuTXip+05Xn+uyEYdVg0kYDipTBcLrCVyUzAPz7QmArb0mmw==", "dev": true, "license": "MIT", "engines": { @@ -16886,31 +16904,31 @@ } }, "node_modules/vitest": { - "version": "4.0.18", - "resolved": "https://registry.npmjs.org/vitest/-/vitest-4.0.18.tgz", - "integrity": "sha512-hOQuK7h0FGKgBAas7v0mSAsnvrIgAvWmRFjmzpJ7SwFHH3g1k2u37JtYwOwmEKhK6ZO3v9ggDBBm0La1LCK4uQ==", + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/vitest/-/vitest-4.1.2.tgz", + "integrity": "sha512-xjR1dMTVHlFLh98JE3i/f/WePqJsah4A0FK9cc8Ehp9Udk0AZk6ccpIZhh1qJ/yxVWRZ+Q54ocnD8TXmkhspGg==", "dev": true, "license": "MIT", "dependencies": { - "@vitest/expect": "4.0.18", - "@vitest/mocker": "4.0.18", - "@vitest/pretty-format": "4.0.18", - "@vitest/runner": "4.0.18", - "@vitest/snapshot": "4.0.18", - "@vitest/spy": "4.0.18", - "@vitest/utils": "4.0.18", - "es-module-lexer": "^1.7.0", - "expect-type": "^1.2.2", + "@vitest/expect": "4.1.2", + "@vitest/mocker": "4.1.2", + "@vitest/pretty-format": "4.1.2", + "@vitest/runner": "4.1.2", + "@vitest/snapshot": "4.1.2", + "@vitest/spy": "4.1.2", + "@vitest/utils": "4.1.2", + "es-module-lexer": "^2.0.0", + "expect-type": "^1.3.0", "magic-string": "^0.30.21", "obug": "^2.1.1", "pathe": "^2.0.3", "picomatch": "^4.0.3", - "std-env": "^3.10.0", + "std-env": "^4.0.0-rc.1", "tinybench": "^2.9.0", "tinyexec": "^1.0.2", "tinyglobby": "^0.2.15", - "tinyrainbow": "^3.0.3", - "vite": "^6.0.0 || ^7.0.0", + "tinyrainbow": "^3.1.0", + "vite": "^6.0.0 || ^7.0.0 || ^8.0.0", "why-is-node-running": "^2.3.0" }, "bin": { @@ -16926,12 +16944,13 @@ "@edge-runtime/vm": "*", "@opentelemetry/api": "^1.9.0", "@types/node": "^20.0.0 || ^22.0.0 || >=24.0.0", - "@vitest/browser-playwright": "4.0.18", - "@vitest/browser-preview": "4.0.18", - "@vitest/browser-webdriverio": "4.0.18", - "@vitest/ui": "4.0.18", + "@vitest/browser-playwright": "4.1.2", + "@vitest/browser-preview": "4.1.2", + "@vitest/browser-webdriverio": "4.1.2", + "@vitest/ui": "4.1.2", "happy-dom": "*", - "jsdom": "*" + "jsdom": "*", + "vite": "^6.0.0 || ^7.0.0 || ^8.0.0" }, "peerDependenciesMeta": { "@edge-runtime/vm": { @@ -16960,9 +16979,19 @@ }, "jsdom": { "optional": true + }, + "vite": { + "optional": false } } }, + "node_modules/vitest/node_modules/es-module-lexer": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-2.0.0.tgz", + "integrity": "sha512-5POEcUuZybH7IdmGsD8wlf0AI55wMecM9rVBTI/qEAy2c1kTOm3DjFYjrBdI2K3BaJjJYfYFeRtM0t9ssnRuxw==", + "dev": true, + "license": "MIT" + }, "node_modules/void-elements": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz", @@ -17693,7 +17722,7 @@ "@tailwindcss/vite": "^4.2.1", "astro": "^5.7.0", "lucide-react": "^0.469.0", - "posthog-js": "^1.182.0", + "posthog-js": "^1.347.2", "react": "^18.3.0", "react-dom": "^18.3.0", "sharp": "^0.34.1", diff --git a/package.json b/package.json index 0002adf8..ee52a0b2 100644 --- a/package.json +++ b/package.json @@ -46,25 +46,24 @@ "@google/genai": "^1.40.0", "@types/react-syntax-highlighter": "^15.5.13", "@xyflow/react": "^12.10.1", - "dagre": "0.8.5", "elkjs": "^0.11.0", "framer-motion": "^12.34.0", "html-to-image": "^1.11.13", "i18next": "^25.8.13", "i18next-browser-languagedetector": "^8.2.1", "i18next-http-backend": "^3.0.2", + "jszip": "^3.10.1", "lucide-react": "^0.563.0", + "posthog-js": "^1.347.2", "react": "^19.2.4", "react-dom": "^19.2.4", "react-i18next": "^16.5.4", "react-markdown": "9.0.1", "react-router-dom": "^7.13.0", "react-syntax-highlighter": "^16.1.0", - "rehype-raw": "^7.0.0", "rehype-slug": "^6.0.0", "remark-breaks": "^4.0.0", "remark-gfm": "4.0.0", - "remark-slug": "^7.0.1", "y-indexeddb": "^9.0.12", "y-webrtc": "^10.3.0", "y-websocket": "^3.0.0", @@ -80,6 +79,7 @@ "@typescript-eslint/eslint-plugin": "^8.55.0", "@typescript-eslint/parser": "^8.55.0", "@vitejs/plugin-react": "^5.1.4", + "@vitest/coverage-v8": "^4.1.2", "autoprefixer": "^10.4.24", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", diff --git a/public/locales/de/translation.json b/public/locales/de/translation.json index b99704b5..205020e6 100644 --- a/public/locales/de/translation.json +++ b/public/locales/de/translation.json @@ -52,6 +52,7 @@ "bringToFront": "In den Vordergrund", "sendToBack": "In den Hintergrund", "reverseDirection": "Richtung umkehren", + "editLabel": "Beschriftung bearbeiten", "deleteConnection": "Verbindung löschen", "itemsSelected": "{{count}} Elemente ausgewählt", "align": "Ausrichten", @@ -65,7 +66,7 @@ "distributeHorizontally": "Horizontal verteilen", "distributeVertically": "Vertikal verteilen", "group": "Gruppe", - "upload": "Upload", + "upload": "Hochladen", "rename": "Umbenennen" }, "nav": { @@ -83,11 +84,15 @@ "canvasSettings": "Canvas-Einstellungen", "wideLogo": "Ihr breites Logo", "uploadWideLogo": "Breites Logo in Markeneinstellungen hochladen", + "saveStatus": "Lokaler Speicherstatus", + "autoSaved": "Lokal gespeichert um {{time}}.", + "privacyShort": "Ihre Diagramme bleiben auf diesem Gerät und erreichen unsere Server nicht.", "beta": "BETA", "versionHistory": "Versionsverlauf", "loadJSON": "JSON laden", "playbackMode": "Wiedergabemodus", - "privacyMessage": "Ihre Diagramme bleiben bei Ihnen und erreichen unsere Server nicht." + "privacyMessage": "Ihre Diagramme bleiben bei Ihnen und erreichen unsere Server nicht.", + "templates": "Vorlagen" }, "menu": { "file": "Datei", @@ -110,6 +115,7 @@ }, "export": { "title": "Exportieren", + "subtitle": "Format und Aktion auswählen.", "png": "Als PNG exportieren", "jpeg": "Als JPEG exportieren", "json": "Als JSON exportieren", @@ -122,10 +128,11 @@ "jsonLabel": "JSON File", "hintDownload": "Download", "openflowdslLabel": "{{appName}} DSL", - "hintClipboard": "Copy to clipboard", + "hintClipboard": "Kopieren", "figmaEditable": "Figma Editable", "exportDiagram": "Export Diagram", "exportAs": "Export As", + "actionCopy": "Kopieren", "exportOrShare": "Dieses Canvas exportieren oder teilen", "svg": "Als SVG exportieren", "hintSvgScalable": "Skalierbare Vektordatei", @@ -149,7 +156,13 @@ "hintCinematicVideo": "Dark launch-style build", "cinematicGif": "Cinematic Build GIF", "hintCinematicGif": "Dark social-ready loop", - "actionDownload": "Download" + "actionDownload": "Download", + "hintDocument": "Dokument", + "hintEditableSvg": "Bearbeitbares SVG", + "chooseFormat": "Format wählen", + "speed": "Geschwindigkeit", + "resolution": "Auflösung", + "transparentBackground": "Transparenter Hintergrund" }, "import": { "title": "Importieren", @@ -255,16 +268,21 @@ "settings": { "title": "Einstellungen", "general": "Allgemein", + "canvas": "Canvas", "shortcuts": "Tastaturkürzel", "theme": "Design", "language": "Sprache", "selectLanguage": "Sprache auswählen", + "languageDescription": "Wählen Sie die Oberflächensprache der App.", "appearance": "Erscheinungsbild", "ai": "KI-Einstellungen", "analytics": "Analysen", "about": "Über", "brand": "Markeneinstellungen", - "privacy": "Datenschutz" + "privacy": "Datenschutz", + "themeLight": "Light", + "themeDark": "Dark", + "themeSystem": "System" }, "shortcuts": { "title": "Tastaturkürzel", @@ -291,10 +309,22 @@ "labelTransform": "Text-Transformation", "prefixOptional": "Präfix (optional)", "suffixOptional": "Suffix (optional)", + "findReplace": "Suchen und Ersetzen", + "findLabel": "Suchen", + "findPlaceholder": "Zu suchender Text", + "replaceLabel": "Ersetzen durch", + "replacePlaceholder": "Ersetzungstext", + "useRegex": "Regulären Ausdruck verwenden", "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" + "applyToSelectedNodes": "Auf ausgewählte Elemente anwenden", + "imageSettings": "Bildeinstellungen", + "transparency": "Transparenz", + "rotation": "Drehung" + }, + "saveStatus": { + "saved": "Gespeichert" }, "ai": { "generate": "Mit KI generieren", @@ -331,13 +361,24 @@ "press": "Drücken Sie", "shortcuts": "für Tastaturkürzel", "privacy": "Ihre Diagramme, API-Schlüssel und Daten bleiben lokal auf Ihrem Gerät.", - "analytics": "Wir zählen nur anonyme Seitenbesuche.", + "analytics": "Wir erfassen derzeit keine Analysedaten.", "features": { "beautifulByDefault": "Standardmäßig schön", "automatedLayouts": "Automatisierte Layouts und professionelle Designs.", "privateSecure": "Privat und sicher", "localFirst": "Lokale Architektur hält Ihre Daten sicher." - } + }, + "feature1Title": "Create amazing diagrams", + "feature1Desc": "Design beautiful, enterprise-grade architecture visually.", + "feature2Title": "Use AI", + "feature2Desc": "Generate complete architectures with a single intelligent prompt.", + "feature3Title": "Code to diagram", + "feature3Desc": "Instantly construct stunning visual infrastructure from text.", + "feature4Title": "Export in many formats", + "feature4Desc": "Export into beautiful, fully animated presentation diagrams.", + "analyticsTitle": "Anonymous Analytics", + "analyticsDesc": "We collect diagnostic data. We never read your diagrams or prompts.", + "getStarted": "Get Started" }, "footer": { "mitLicensed": "MIT-Lizenz" @@ -560,8 +601,12 @@ "algorithm": "Algorithmus", "layered": "Geschichtet", "layeredDesc": "Hierarchisch, gut für Abläufe", + "hierarchical": "Hierarchisch", + "hierarchicalDesc": "Die beste Standardeinstellung für die meisten Abläufe. Gute Balance aus Lesbarkeit und wenigen Kantenkreuzungen.", "tree": "Baum", "treeDesc": "Strikte Eltern-Kind-Struktur", + "treeOptimized": "Baum", + "treeOptimizedDesc": "Striktes Eltern-Kind-Layout für Organigramme und Abhängigkeitsbäume.", "force": "Kräfte", "forceDesc": "Organisch, physikbasiert", "radial": "Radial", @@ -575,6 +620,10 @@ "compact": "Kompakt", "normal": "Normal", "loose": "Locker", + "orthogonalCompact": "Kompakt", + "orthogonalCompactDesc": "Dichte Links-nach-rechts-Struktur für mittelgroße und dichte Diagramme.", + "orthogonalSpacious": "Großzügig", + "orthogonalSpaciousDesc": "Mehr Weißraum für bessere Klarheit bei Präsentationen und Reviews.", "applyLayout": "Layout anwenden", "layoutStyle": "Layout-Stil" }, @@ -609,6 +658,135 @@ "exportModeDeterministic": "Deterministisch", "exportModeLegacy": "Legacy", "exportMode": "Exportmodus" + }, + "aiStudio": { + "placeholders": { + "create": "Beschreibe das Diagramm, das du von Grund auf erstellen möchtest...", + "selectedEdit": "Beschreibe, was an dem ausgewählten Knoten {{count}} geändert werden soll...", + "edit": "Beschreibe eine Änderung, zum Beispiel: 'Redis zwischen API und DB hinzufügen'", + "empty": "Beschreibe ein Diagramm, das von Grund auf generiert werden soll..." + }, + "applyEdit": "KI-Bearbeitung anwenden", + "generateDiagram": "Diagramm generieren", + "importReady": "Import bereit - Änderungen prüfen", + "addedCount": "{{count}} hinzugefügt", + "updatedCount": "{{count}} aktualisiert", + "removedCount": "{{count}} entfernt", + "discard": "Verwerfen", + "applyToCanvas": "Auf Canvas anwenden", + "emptyDescription": "Beschreibe das gewünschte Diagramm und {{appName}} erstellt den ersten Entwurf für dich.", + "editDescription": "Beschreibe die gewünschten Änderungen und {{appName}} aktualisiert das Diagramm für dich.", + "addKeyCta": "KI-Schlüssel hinzufügen, um zu starten", + "retrying": "Erneuter Versuch ({{retryCount}} von 3)...", + "generating": "Wird generiert...", + "editCurrent": "Aktuelles bearbeiten", + "editCurrentHint": "Dein bestehendes Canvas ändern", + "createNew": "Neu erstellen", + "createNewHint": "Mit einem neuen Diagramm neu beginnen", + "editingSelectedNodes": "{{count}} ausgewählten Knoten bearbeiten", + "uploadPreviewAlt": "Upload-Vorschau", + "attachImage": "Bild anhängen", + "cancelGeneration": "Generierung abbrechen" + }, + "figmaImport": { + "invalidUrl": "Ungültige Figma-URL. Verwende einen Link im Format figma.com/file/... oder figma.com/design/....", + "tokenRequired": "Ein persönliches Zugriffstoken ist erforderlich.", + "unknownError": "Unbekannter Fehler", + "title": "Aus Figma importieren", + "fileUrlLabel": "Figma-Datei-URL", + "fileUrlPlaceholder": "https://www.figma.com/design/...", + "tokenLabel": "Persönliches Zugriffstoken", + "tokenHelpLink": "so erhältst du eins", + "tokenPlaceholder": "figd_...", + "tokenPrivacy": "Das Token wird nur in deinem Browser verwendet und niemals an unsere Server gesendet.", + "foundSummary": "{{colors}} Farben und {{fonts}} Textstile aus \"{{name}}\" gefunden", + "colors": "Farben", + "moreCount": "+{{count}} weitere", + "fonts": "Schriftarten", + "fetchingStyles": "Stile werden geladen...", + "fetchStyles": "Stile laden", + "applyToDesignSystem": "Auf Design-System anwenden" + }, + "import": { + "placeholders": { + "sql": "Füge hier CREATE-TABLE-Anweisungen ein...", + "infra": "Füge hier Terraform-State-JSON, Kubernetes-YAML, Docker Compose oder Terraform-HCL ein...", + "openapi": "Füge hier dein OpenAPI-/Swagger-YAML oder -JSON ein...", + "code": "Füge hier deinen Quellcode ein..." + }, + "infraFormats": { + "terraformState": "Terraform-State (.tfstate)", + "kubernetes": "Kubernetes YAML", + "dockerCompose": "Docker Compose", + "terraformHcl": "Terraform HCL (AI)" + }, + "errors": { + "inputTooLarge": "Die Eingabe ist {{size}} groß - maximal {{max}} beim Einfügen.", + "fileTooLarge": "Die Datei ist {{size}} groß - maximal {{max}}.", + "terraformHclRequiresAi": "Terraform HCL erfordert eine KI-Analyse. Verwende die KI-Schaltfläche.", + "nativeNotAvailable": "Natives Parsing ist für diesen Typ nicht verfügbar.", + "parsingFailed": "Parsing fehlgeschlagen.", + "aiUnavailable": "KI-Analyse ist für diesen Typ nicht verfügbar.", + "aiFailed": "KI-Generierung fehlgeschlagen.", + "inputExceedsLimit": "Die Eingabe überschreitet das Limit von {{max}}. Kürze den Inhalt oder verwende eine kleinere Datei." + }, + "categories": { + "sql": "SQL", + "infra": "Infra", + "openapi": "OpenAPI", + "code": "Code", + "codebase": "Repository" + }, + "title": "Aus Daten importieren", + "description": "Importiere Code, Infrastruktur, SQL oder API-Spezifikationen in dein Diagramm.", + "uploadFile": "Datei hochladen", + "parsing": "Wird geparst...", + "parse": "Parsen", + "analyzing": "Wird analysiert...", + "aiActions": { + "generateErd": "ERD generieren (KI)", + "generateDiagram": "Diagramm generieren (KI)", + "generateSequence": "Sequenz generieren", + "analyzeArchitecture": "Architektur analysieren", + "analyzeProject": "Projekt analysieren" + }, + "previewDsl": "DSL-Vorschau", + "appliedToCanvas": "Auf Canvas angewendet", + "applyToCanvas": "Auf Canvas anwenden" + }, + "layers": { + "title": "Ebenen", + "newLayerName": "Neuer Ebenenname", + "add": "Hinzufügen", + "active": "Aktiv", + "visible": "Sichtbar", + "hidden": "Ausgeblendet", + "locked": "Gesperrt", + "unlocked": "Entsperrt", + "moveSelectedHere": "Auswahl hierher verschieben", + "selectLayer": "Ebene auswählen", + "up": "Nach oben", + "down": "Nach unten", + "sections": "Abschnitte", + "previousSection": "Vorheriger Abschnitt", + "nextSection": "Nächster Abschnitt", + "noSections": "Noch keine Abschnitte.", + "sectionFallbackName": "Abschnitt", + "order": "Reihenfolge {{order}}", + "focus": "Fokussieren", + "show": "Anzeigen", + "hide": "Ausblenden", + "unlock": "Entsperren", + "lock": "Sperren", + "footerHint": "Eine gesperrte Ebene kann nicht gezogen werden. Ausgeblendete Ebenen werden nicht auf dem Canvas gerendert." + }, + "root": { + "searchAria": "Befehle in der Befehlsleiste suchen", + "searchPlaceholder": "Aktionen, {{appName}}, Code oder Canvas-Werkzeuge suchen...", + "resultsAria": "Befehlssuchergebnisse", + "quickActionsAria": "Schnellaktionen der Befehlsleiste", + "results": "Ergebnisse", + "noMatchingCommands": "Keine passenden Befehle für \"{{query}}\"" } }, "settingsModal": { @@ -630,8 +808,8 @@ "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", + "alignmentGuides": "Ausrichtungshilfen", + "alignmentGuidesDesc": "Zeigt intelligente Hilfslinien beim Ziehen von Knoten", "routingProfile": "Routing-Profil", "routingProfileStandard": "Standard", "routingProfileInfrastructure": "Infrastruktur", @@ -688,13 +866,13 @@ "hint": "Jeder OpenAI-kompatible Endpunkt" } }, - "customModelHint": "Enter the exact model ID for your endpoint", - "howToGetKey": "How to get your API key", - "pasteKeyStep": "Paste it in the field above — never shared with us", - "customEndpointTitle": "What is a custom endpoint?", + "customModelHint": "Geben Sie die genaue Modell-ID für Ihren Endpunkt ein", + "howToGetKey": "So erhalten Sie Ihren API-Schlüssel", + "pasteKeyStep": "Fügen Sie ihn oben ein — er wird niemals mit uns geteilt", + "customEndpointTitle": "Was ist ein benutzerdefinierter Endpunkt?", "privacyTitle": "Privacy & Encryption", - "customEndpointText": "Any <1>OpenAI-compatible API endpoint — local or remote. Great for:", - "customEndpointMustSupport": "Must support <1>POST /chat/completions (OpenAI format)", + "customEndpointText": "Jeder <1>OpenAI-kompatible API-Endpunkt — lokal oder remote. Ideal für:", + "customEndpointMustSupport": "Muss <1>POST /chat/completions (OpenAI-Format) unterstützen", "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", @@ -722,15 +900,15 @@ "inactive": "Inaktiv", "setActive": "Aktiv setzen", "resetToDefaults": "Auf Standardwerte zurücksetzen", - "tabIdentity": "Identity", - "tabColors": "Colors", + "tabIdentity": "Identität", + "tabColors": "Farben", "tabType": "Type", "tabUI": "UI & Shape", - "appName": "App Name", + "appName": "App-Name", "logo": "Logo", "favicon": "Favicon", - "logoStyle": "Logo Style", - "fontFamily": "Font Family", + "logoStyle": "Logostil", + "fontFamily": "Schriftfamilie", "googleFontsHint": "Dynamically loaded from Google Fonts", "cornerRadius": "Corner Radius", "glassmorphism": "Glassmorphism", @@ -740,26 +918,15 @@ "showBetaBadgeHint": "Display the BETA chip next to logo" }, "shortcutsHint": "Sie können auch ? drücken, um diese anzuzeigen.", - "privacy": { - "manifesto": "Unser Datenschutz-Manifest", - "manifestoText": "Wir glauben an Datenschutz durch Design.", - "localFirst": "Lokale Speicherung", - "noAccounts": "Keine Benutzerkonten", - "ownData": "Eigene Daten", - "anonymous": "Nur anonyme Nutzung", - "telemetry": "Telemetrie & Feedback", - "anonymousStats": "Anonyme Statistiken", - "anonymousStatsDesc": "Nur Besuche und begrenzte Nutzung.", - "quote": "Wir verlassen uns darauf, dass Sie uns sagen, was funktioniert.", - "helpImprove": "Helfen Sie uns zu verbessern", - "shareFeedback": "Feedback teilen", - "shareFeedbackDesc": "Feedback geben, Fehler melden, Funktionen anfragen" - }, "settings": "Einstellungen", "canvasSettings": "Canvas-Einstellungen", "description": "Canvas-Einstellungen und Tastaturkürzel konfigurieren.", "close": "Einstellungen schließen", - "closeDialog": "Einstellungsdialog schließen" + "closeDialog": "Einstellungsdialog schließen", + "analytics": { + "enableTitle": "Anonyme Start-Analysen", + "enableDescription": "Anonyme grundlegende Nutzungsdaten teilen (optional)" + } }, "customNodes": { "browserContent": "Browser-Inhalt", @@ -779,11 +946,13 @@ "addItem": "Element hinzufügen", "addToCanvas": "Zum Canvas hinzufügen", "shapes": "Formen", + "diagrams": "Diagramme", "assets": "Assets", "node": "Form", "stickyNote": "Haftnotiz", "section": "Abschnitt", "text": "Text", + "other": "Andere", "wireframes": "Wireframes", "image": "Bild", "autoLayout": "Auto-Layout", @@ -852,20 +1021,61 @@ "nodes": "{{count}} Knoten", "edges": "{{count}} Kanten", "close": "Versionsverlaufsleiste schließen", - "namedVersions": "Named Versions", - "noNamedSnapshots": "No named versions yet.", - "autosavedVersions": "Autosaved Checkpoints", - "noAutoSnapshots": "No autosaved checkpoints yet." + "namedVersions": "Benannte Versionen", + "noNamedSnapshots": "Noch keine benannten Versionen.", + "autosavedVersions": "Automatisch gespeicherte Prüfpunkte", + "noAutoSnapshots": "Noch keine automatisch gespeicherten Prüfpunkte." }, "templatesPanel": { "title": "Flow-Vorlagen", "searchPlaceholder": "Vorlagen suchen...", "noTemplates": "Keine Vorlagen gefunden." }, + "homeTemplates": { + "description": "Beginnen Sie mit einem vorbereiteten Flow und passen Sie ihn im Editor an.", + "openPicker": "Vorlagenauswahl öffnen", + "featured": "Empfohlene Vorlagen", + "count": "{{count}} Vorlagen", + "nodes": "{{count}} Knoten", + "edges": "{{count}} Verbindungen", + "starter": "Starter", + "starterTemplate": "Starter-Vorlage", + "bestFirstEdits": "Beste erste Anpassungen", + "perfectFor": "Ideal für", + "useTemplate": "Vorlage verwenden", + "closePreview": "Vorlagenvorschau schließen" + }, "propertiesPanel": { "stickyNote": "Haftnotiz", "nodeSettings": "Formeinstellungen", - "connection": "Verbindung" + "connection": "Verbindung", + "noSelection": "Nichts ausgewählt", + "selectHint": "Klicken Sie auf einen Knoten oder eine Kante, um deren Eigenschaften zu bearbeiten" + }, + "properties": { + "title": "Properties", + "shape": "Shape", + "color": "Color", + "icon": "Icon", + "rotation": "Rotation", + "transparency": "Transparency", + "imageSettings": "Image Settings", + "bulkShape": "Bulk Shape", + "bulkColor": "Bulk Color", + "bulkIcon": "Bulk Icon", + "labelTransform": "Label Transform", + "findReplace": "Find & Replace", + "findLabel": "Find", + "findPlaceholder": "Find text", + "replaceLabel": "Replace", + "replacePlaceholder": "Replace with", + "prefixOptional": "Prefix (optional)", + "suffixOptional": "Suffix (optional)", + "useRegex": "Use Regex", + "applyToSelectedNodes": "Apply to selected nodes", + "selectFieldToApply": "Select a field to apply", + "previewSummary": "Preview summary", + "selectionSummary": "Auswahlübersicht" }, "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." @@ -875,61 +1085,65 @@ "newFlowTab": "Neuer Flow-Tab" }, "nodes": { - "note": "Note", - "database": "Database", - "inputOutput": "Input / Output", - "newNode": "New Node", - "branch": "Branch", - "processStep": "Process Step", + "note": "Notiz", + "database": "Datenbank", + "inputOutput": "Eingabe / Ausgabe", + "newNode": "Neuer Knoten", + "branch": "Verzweigung", + "processStep": "Prozessschritt", "addText": "Text eingeben", "group": "Group", "items": "items", - "addCommentsHere": "Add your comments here.", - "newSection": "New Section", + "addCommentsHere": "Fügen Sie hier Ihre Kommentare hinzu.", + "newSection": "Neuer Abschnitt", + "section": "Abschnitt", "text": "Text", "image": "Image", "mindmap": "Thema" }, "actions": { - "clearCanvasConfirm": "Are you sure you want to clear the canvas?" + "clearCanvasConfirm": "Möchten Sie die Zeichenfläche wirklich leeren?" }, "share": { "close": "Close", - "title": "Share Design", + "title": "Design teilen", "betaBadge": "Beta", - "description": "Invite collaborators to view and edit this flow with you in real-time.", + "description": "Laden Sie Mitwirkende ein, diesen Flow gemeinsam mit Ihnen in Echtzeit anzusehen und zu bearbeiten.", "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", + "copyLink": "Link kopieren", + "footerNote": "Ihr Diagramm bleibt lokal, bis Sie diesen Raum freigeben. Wenn das Kopieren blockiert ist, kopieren Sie den obigen Link manuell.", + "closeDialog": "Freigabedialog schließen", "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" + "realtime": "Echtzeit-Peer-Synchronisierung", + "waiting": "Verbindung zur Echtzeit-Synchronisierung wird hergestellt", + "fallback": "Nur-lokal-Modus" }, "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.", + "copyFailed": "Freigabelink konnte nicht kopiert werden.", + "linkCopied": "Zusammenarbeitslink wurde kopiert.", "copyManual": "Der Zugriff auf die Zwischenablage ist blockiert. Kopieren Sie den Link manuell aus dem Freigabedialog." } }, "connectionPanel": { - "architecture": "Architecture", + "architecture": "Architektur", "label": "Label", "messagePlaceholder": "Nachricht", "route": "Route", "appearance": "Darstellung", - "condition": "Condition", - "deleteConnection": "Delete Connection" + "condition": "Bedingung", + "deleteConnection": "Verbindung löschen" + }, + "sidebar": { + "close": "Seitenleiste schließen" } } diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json index 983c72ec..4f83d732 100644 --- a/public/locales/en/translation.json +++ b/public/locales/en/translation.json @@ -53,6 +53,7 @@ "bringToFront": "Bring to Front", "sendToBack": "Send to Back", "reverseDirection": "Reverse Direction", + "editLabel": "Edit Label", "deleteConnection": "Delete Connection", "itemsSelected": "{{count}} items selected", "align": "Align", @@ -86,10 +87,14 @@ "canvasSettings": "Canvas Settings", "wideLogo": "Your Wide Logo", "uploadWideLogo": "Upload a wide logo in Brand Settings to see it here", + "saveStatus": "Local save status", + "autoSaved": "Saved locally at {{time}}.", + "privacyShort": "Your diagrams stay on this device and do not reach our servers.", "beta": "BETA", "versionHistory": "Version History", "loadJSON": "Load JSON", "playbackMode": "Playback Mode", + "templates": "Templates", "privacyMessage": "Your diagrams stay with you and do not reach our servers." }, "menu": { @@ -113,6 +118,7 @@ }, "export": { "title": "Export", + "subtitle": "Choose a format and action.", "png": "Export as PNG", "jpeg": "Export as JPEG", "svg": "Export as SVG", @@ -131,7 +137,7 @@ "exportDiagram": "Export Diagram", "exportAs": "Export As", "headingFormat": "Export Format", - "actionCopy": "Copy to Clipboard", + "actionCopy": "Copy", "actionDownload": "Download", "exportOrShare": "Export or share this canvas", "shareSection": "Share canvas", @@ -141,8 +147,10 @@ "hintTransparent4K": "Transparent (4K)", "hintWhiteBg4K": "White Background (4K)", "hintDownload": "Download", - "hintClipboard": "Copy to clipboard", + "hintClipboard": "Copy", "hintSvgScalable": "Scalable vector file", + "hintDocument": "Document", + "hintEditableSvg": "Editable SVG", "hintPlaybackWebM": "Playback timeline (WebM/MP4)", "hintPlaybackGif": "Short loop for docs/social", "hintRevealVideo": "Nodes fade in sequentially (WebM/MP4)", @@ -154,7 +162,11 @@ "hintReadmeEmbed": "Copy Markdown snippet", "sectionImage": "Image", "sectionVideo": "Video & Animation", - "sectionCode": "Code & Data" + "sectionCode": "Code & Data", + "chooseFormat": "Choose format", + "speed": "Speed", + "resolution": "Resolution", + "transparentBackground": "Transparent background" }, "import": { "title": "Import", @@ -177,6 +189,7 @@ "addText": "Add text", "addCommentsHere": "Add your comments here.", "newSection": "New Section", + "section": "Section", "text": "Text", "image": "Image", "group": "Group", @@ -262,7 +275,7 @@ "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.", + "description": "Update the name shown on your dashboard and in the editor.", "label": "Flow name", "placeholder": "Enter a flow name", "hint": "Names are local to this browser profile unless you export or sync them elsewhere.", @@ -279,10 +292,15 @@ "settings": { "title": "Settings", "general": "General", + "canvas": "Canvas", "shortcuts": "Keyboard Shortcuts", "theme": "Theme", + "themeLight": "Light", + "themeDark": "Dark", + "themeSystem": "System", "language": "Language", "selectLanguage": "Select Language", + "languageDescription": "Choose the interface language used across the app.", "appearance": "Appearance", "ai": "AI Settings", "analytics": "Analytics", @@ -315,10 +333,22 @@ "labelTransform": "Label Transform", "prefixOptional": "Prefix (optional)", "suffixOptional": "Suffix (optional)", + "findReplace": "Find & Replace", + "findLabel": "Find", + "findPlaceholder": "Text to find", + "replaceLabel": "Replace with", + "replacePlaceholder": "Replacement text", + "useRegex": "Use Regular Expression", "previewSummary": "Preview summary", "bulkApplySummary": "Will update {{count}} selected nodes", "selectFieldToApply": "Select at least one field to apply.", - "applyToSelectedNodes": "Apply to selected nodes" + "applyToSelectedNodes": "Apply to selected nodes", + "imageSettings": "Image Settings", + "transparency": "Transparency", + "rotation": "Rotation" + }, + "saveStatus": { + "saved": "Saved" }, "ai": { "generate": "Generate with AI", @@ -361,15 +391,24 @@ "press": "Press", "shortcuts": "for shortcuts", "privacy": "Your diagrams, API keys, and data stay locally on your device.", - "analytics": "We only count anonymous page visits.", - "analyticsTitle": "Help improve OpenFlowKit", - "analyticsDesc": "Share anonymous basic usage data (optional)", + "analytics": "We collect basic anonymous usage and reliability data to improve the product. Never your diagram content, prompt text, file contents, or API keys.", "features": { "beautifulByDefault": "Beautiful by default", "automatedLayouts": "Automated layouts and professional themes.", "privateSecure": "Private and Secure", "localFirst": "Local-first architecture keeps your data safe." - } + }, + "feature1Title": "Create amazing diagrams", + "feature1Desc": "Design beautiful, enterprise-grade architecture visually.", + "feature2Title": "Use AI", + "feature2Desc": "Generate complete architectures with a single intelligent prompt.", + "feature3Title": "Code to diagram", + "feature3Desc": "Instantly construct stunning visual infrastructure from text.", + "feature4Title": "Export in many formats", + "feature4Desc": "Export into beautiful, fully animated presentation diagrams.", + "analyticsTitle": "Anonymous Analytics", + "analyticsDesc": "We collect diagnostic data. We never read your diagrams or prompts.", + "getStarted": "Get Started" }, "footer": { "mitLicensed": "MIT Licensed" @@ -632,6 +671,135 @@ "untitled": "Untitled Node", "type": "Type" }, + "root": { + "searchAria": "Search command bar actions", + "searchPlaceholder": "Search actions, {{appName}}, code, or canvas tools...", + "resultsAria": "Command search results", + "quickActionsAria": "Command quick actions", + "results": "Results", + "noMatchingCommands": "No matching commands for \"{{query}}\"" + }, + "figmaImport": { + "title": "Import from Figma", + "fileUrlLabel": "Figma file URL", + "fileUrlPlaceholder": "https://www.figma.com/design/...", + "tokenLabel": "Personal access token", + "tokenHelpLink": "how to get one", + "tokenPlaceholder": "figd_...", + "tokenPrivacy": "Token is used only in your browser and is never sent to our servers.", + "invalidUrl": "Invalid Figma URL. Use a figma.com/file/... or figma.com/design/... link.", + "tokenRequired": "Personal access token is required.", + "unknownError": "Unknown error", + "foundSummary": "Found {{colors}} colors and {{fonts}} text styles from \"{{name}}\"", + "colors": "Colors", + "fonts": "Fonts", + "moreCount": "+{{count}} more", + "fetchingStyles": "Fetching styles...", + "fetchStyles": "Fetch styles", + "applyToDesignSystem": "Apply to design system" + }, + "layers": { + "title": "Layers", + "newLayerName": "New layer name", + "add": "Add", + "active": "Active", + "visible": "Visible", + "hidden": "Hidden", + "locked": "Locked", + "unlocked": "Unlocked", + "moveSelectedHere": "Move Selected Here", + "selectLayer": "Select Layer", + "up": "Up", + "down": "Down", + "sections": "Sections", + "previousSection": "Previous section", + "nextSection": "Next section", + "noSections": "No sections yet.", + "sectionFallbackName": "Section", + "order": "Order {{order}}", + "focus": "Focus", + "show": "Show", + "hide": "Hide", + "unlock": "Unlock", + "lock": "Lock", + "footerHint": "Layer lock disables drag. Hidden layers are excluded from canvas render." + }, + "aiStudio": { + "applyEdit": "Apply AI edit", + "generateDiagram": "Generate diagram", + "importReady": "Import ready - review changes", + "addedCount": "{{count}} added", + "updatedCount": "{{count}} updated", + "removedCount": "{{count}} removed", + "discard": "Discard", + "applyToCanvas": "Apply to canvas", + "emptyDescription": "Describe the diagram you want and {{appName}} will draft the first graph for you.", + "editDescription": "Describe the changes you want and {{appName}} will update the graph for you.", + "addKeyCta": "Add AI key to start generating", + "retrying": "Retrying ({{retryCount}} of 3)...", + "generating": "Generating...", + "editCurrent": "Edit current", + "editCurrentHint": "Modify your existing canvas", + "createNew": "Create new", + "createNewHint": "Start fresh with a new diagram", + "editingSelectedNodes": "Editing {{count}} selected node", + "uploadPreviewAlt": "Upload preview", + "attachImage": "Attach image", + "cancelGeneration": "Cancel generation", + "placeholders": { + "create": "Describe the diagram you want to create from scratch...", + "selectedEdit": "Describe what to change about the {{count}} selected node...", + "edit": "Describe a change, for example 'add Redis between API and DB'", + "empty": "Describe a diagram to generate from scratch..." + } + }, + "import": { + "title": "Import from data", + "description": "Import code, infrastructure, SQL, or API specs into your diagram.", + "uploadFile": "Upload file", + "parse": "Parse", + "parsing": "Parsing...", + "analyzing": "Analyzing...", + "previewDsl": "Preview DSL", + "applyToCanvas": "Apply to Canvas", + "appliedToCanvas": "Applied to canvas", + "categories": { + "sql": "SQL", + "infra": "Infra", + "openapi": "OpenAPI", + "code": "Code", + "codebase": "Repo" + }, + "aiActions": { + "generateErd": "Generate ERD (AI)", + "generateDiagram": "Generate Diagram (AI)", + "generateSequence": "Generate Sequence", + "analyzeArchitecture": "Analyze Architecture", + "analyzeProject": "Analyze Project" + }, + "placeholders": { + "sql": "Paste CREATE TABLE statements here...", + "infra": "Paste Terraform state JSON, Kubernetes YAML, Docker Compose, or Terraform HCL here...", + "openapi": "Paste your OpenAPI / Swagger YAML or JSON here...", + "code": "Paste your source code here..." + }, + "infraFormats": { + "terraformState": "Terraform State (.tfstate)", + "kubernetes": "Kubernetes YAML", + "dockerCompose": "Docker Compose", + "terraformHcl": "Terraform HCL (AI)" + }, + "errors": { + "inputTooLarge": "Input is {{size}} - max {{max}} for paste.", + "fileTooLarge": "File is {{size}} - max {{max}}.", + "terraformHclRequiresAi": "Terraform HCL requires AI analysis. Use the AI button.", + "nativeNotAvailable": "Native parsing not available for this type.", + "parsingFailed": "Parsing failed.", + "aiUnavailable": "AI analysis not available for this type.", + "aiFailed": "AI generation failed.", + "inputExceedsLimit": "Input exceeds {{max}} limit. Trim the content or use a smaller file." + } + }, "templates": { "title": "Templates", "placeholder": "Search templates...", @@ -669,8 +837,12 @@ "algorithm": "Algorithm", "layered": "Layered", "layeredDesc": "Hierarchical, good for flows", + "hierarchical": "Hierarchical", + "hierarchicalDesc": "Best default for most flows. Balanced readability and edge crossings.", "tree": "Tree", "treeDesc": "Strict parent-child structure", + "treeOptimized": "Tree", + "treeOptimizedDesc": "Strict parent-child layout for org charts and dependency trees.", "force": "Force", "forceDesc": "Organic, physics-based", "radial": "Radial", @@ -684,6 +856,10 @@ "compact": "Compact", "normal": "Normal", "loose": "Loose", + "orthogonalCompact": "Compact", + "orthogonalCompactDesc": "Dense left-to-right structure for medium and high-density diagrams.", + "orthogonalSpacious": "Spacious", + "orthogonalSpaciousDesc": "Extra whitespace for clarity in presentations and reviews.", "applyLayout": "Apply Layout" }, "designSystem": { @@ -751,6 +927,10 @@ "edgeBundling": "Bundle Sibling Edges", "edgeBundlingDesc": "Keep parallel connections on shared lanes" }, + "analytics": { + "enableTitle": "Anonymous Launch Analytics", + "enableDescription": "Share anonymous basic usage data (optional)" + }, "ai": { "provider": "Provider", "model": "Model", @@ -1076,22 +1256,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.", - "localFirst": "Local-First Storage", - "noAccounts": "No User Accounts", - "ownData": "Own Your Data", - "anonymous": "Anonymous Usage Only", - "telemetry": "Telemetry & Feedback", - "anonymousStats": "Anonymous Stats", - "anonymousStatsDesc": "We only track visits and limited anonymous feature usage (like exports) to improve the tool. We do not track your names, IP addresses, inputs, or diagram content.", - "quote": "We rely on you to tell us what works, rather than tracking your every move.", - "helpImprove": "Help Us Improve", - "shareFeedback": "Share Feedback", - "shareFeedbackDesc": "Give feedback, report bugs, and ask for features" - } + "canvasSettings": "Canvas Settings" }, "customNodes": { "browserContent": "Browser Content", @@ -1111,11 +1276,13 @@ "addItem": "Add Item", "addToCanvas": "Add to Canvas", "shapes": "Shapes", + "diagrams": "Diagrams", "assets": "Assets", "node": "Shape", "stickyNote": "Sticky Note", "section": "Section", "text": "Text", + "other": "Other", "wireframes": "Wireframes", "image": "Image", "autoLayout": "Auto Layout", @@ -1194,10 +1361,51 @@ "searchPlaceholder": "Search templates...", "noTemplates": "No templates found." }, + "homeTemplates": { + "description": "Start from an editable, production-grade template and swap in your real systems, roles, and workflow details.", + "openPicker": "Open Template Picker", + "featured": "Featured Templates", + "count": "{{count}} templates", + "nodes": "{{count}} nodes", + "edges": "{{count}} edges", + "starter": "Starter", + "starterTemplate": "Starter template", + "bestFirstEdits": "Smart First Edits", + "perfectFor": "Perfect For", + "useTemplate": "Use Template", + "closePreview": "Close template preview" + }, "propertiesPanel": { "stickyNote": "Sticky Note", "nodeSettings": "Shape Settings", - "connection": "Connection" + "connection": "Connection", + "noSelection": "Nothing selected", + "selectHint": "Click a node or edge to edit its properties" + }, + "properties": { + "title": "Properties", + "shape": "Shape", + "color": "Color", + "icon": "Icon", + "rotation": "Rotation", + "transparency": "Transparency", + "imageSettings": "Image Settings", + "bulkShape": "Bulk Shape", + "bulkColor": "Bulk Color", + "bulkIcon": "Bulk Icon", + "labelTransform": "Label Transform", + "findReplace": "Find & Replace", + "findLabel": "Find", + "findPlaceholder": "Find text", + "replaceLabel": "Replace", + "replacePlaceholder": "Replace with", + "prefixOptional": "Prefix (optional)", + "suffixOptional": "Suffix (optional)", + "useRegex": "Use Regex", + "applyToSelectedNodes": "Apply to selected nodes", + "selectFieldToApply": "Select a field to apply", + "previewSummary": "Preview summary", + "selectionSummary": "Selection summary" }, "connectionPanel": { "architecture": "Architecture", @@ -1214,7 +1422,10 @@ "strictModePasteBlocked": "Architecture strict mode blocked Mermaid paste. Open Code view, fix diagnostics, then retry." }, "flowTabs": { - "closeTab": "Close Tab", - "newFlowTab": "New Flow Tab" + "closeTab": "Close Page", + "newFlowTab": "New Page" + }, + "sidebar": { + "close": "Close sidebar" } } diff --git a/public/locales/es/translation.json b/public/locales/es/translation.json index a2e61737..6e2fd360 100644 --- a/public/locales/es/translation.json +++ b/public/locales/es/translation.json @@ -52,6 +52,7 @@ "bringToFront": "Traer al frente", "sendToBack": "Enviar atrás", "reverseDirection": "Invertir dirección", + "editLabel": "Editar etiqueta", "deleteConnection": "Eliminar conexión", "itemsSelected": "{{count}} elementos seleccionados", "align": "Alinear", @@ -65,7 +66,7 @@ "distributeHorizontally": "Distribuir horizontalmente", "distributeVertically": "Distribuir verticalmente", "group": "Grupo", - "upload": "Upload", + "upload": "Subir", "rename": "Renombrar" }, "nav": { @@ -83,11 +84,15 @@ "canvasSettings": "Configuración del lienzo", "wideLogo": "Su logotipo ancho", "uploadWideLogo": "Suba un logotipo ancho en Configuración de marca", + "saveStatus": "Estado de guardado local", + "autoSaved": "Guardado localmente a las {{time}}.", + "privacyShort": "Sus diagramas permanecen en este dispositivo y no llegan a nuestros servidores.", "beta": "BETA", "versionHistory": "Historial de versiones", "loadJSON": "Cargar JSON", "playbackMode": "Modo reproducción", - "privacyMessage": "Sus diagramas permanecen con usted y no llegan a nuestros servidores." + "privacyMessage": "Sus diagramas permanecen con usted y no llegan a nuestros servidores.", + "templates": "Plantillas" }, "menu": { "file": "Archivo", @@ -110,6 +115,7 @@ }, "export": { "title": "Exportar", + "subtitle": "Elige un formato y una acción.", "png": "Exportar como PNG", "jpeg": "Exportar como JPEG", "json": "Exportar como JSON", @@ -122,10 +128,11 @@ "jsonLabel": "JSON File", "hintDownload": "Download", "openflowdslLabel": "{{appName}} DSL", - "hintClipboard": "Copy to clipboard", + "hintClipboard": "Copiar", "figmaEditable": "Figma Editable", "exportDiagram": "Export Diagram", "exportAs": "Export As", + "actionCopy": "Copiar", "exportOrShare": "Exportar o compartir este lienzo", "svg": "Exportar como SVG", "hintSvgScalable": "Archivo vectorial escalable", @@ -149,7 +156,13 @@ "hintCinematicVideo": "Dark launch-style build", "cinematicGif": "Cinematic Build GIF", "hintCinematicGif": "Dark social-ready loop", - "actionDownload": "Download" + "actionDownload": "Download", + "hintDocument": "Documento", + "hintEditableSvg": "SVG editable", + "chooseFormat": "Elegir formato", + "speed": "Velocidad", + "resolution": "Resolución", + "transparentBackground": "Fondo transparente" }, "import": { "title": "Importar", @@ -255,16 +268,21 @@ "settings": { "title": "Configuración", "general": "General", + "canvas": "Lienzo", "shortcuts": "Atajos de teclado", "theme": "Tema", "language": "Idioma", "selectLanguage": "Seleccionar idioma", + "languageDescription": "Elige el idioma de la interfaz en toda la aplicación.", "appearance": "Apariencia", "ai": "Configuración IA", "analytics": "Análisis", "about": "Acerca de", "brand": "Configuración de marca", - "privacy": "Privacidad" + "privacy": "Privacidad", + "themeLight": "Light", + "themeDark": "Dark", + "themeSystem": "System" }, "shortcuts": { "title": "Atajos de teclado", @@ -291,10 +309,22 @@ "labelTransform": "Transformación de etiqueta", "prefixOptional": "Prefijo (opcional)", "suffixOptional": "Sufijo (opcional)", + "findReplace": "Buscar y reemplazar", + "findLabel": "Buscar", + "findPlaceholder": "Texto a buscar", + "replaceLabel": "Reemplazar por", + "replacePlaceholder": "Texto de reemplazo", + "useRegex": "Usar expresión regular", "previewSummary": "Resumen previo", "bulkApplySummary": "Se actualizarán {{count}} elementos seleccionados", "selectFieldToApply": "Seleccione al menos un campo para aplicar.", - "applyToSelectedNodes": "Aplicar a los elementos seleccionados" + "applyToSelectedNodes": "Aplicar a los elementos seleccionados", + "imageSettings": "Configuración de imagen", + "transparency": "Transparencia", + "rotation": "Rotación" + }, + "saveStatus": { + "saved": "Guardado" }, "ai": { "generate": "Generar con IA", @@ -331,13 +361,24 @@ "press": "Presione", "shortcuts": "para atajos", "privacy": "Sus diagramas, claves API y datos permanecen localmente en su dispositivo.", - "analytics": "Solo contamos visitas anónimas.", + "analytics": "Hoy no recopilamos analíticas.", "features": { "beautifulByDefault": "Hermoso por defecto", "automatedLayouts": "Diseños automatizados y temas profesionales.", "privateSecure": "Privado y seguro", "localFirst": "La arquitectura local mantiene sus datos seguros." - } + }, + "feature1Title": "Create amazing diagrams", + "feature1Desc": "Design beautiful, enterprise-grade architecture visually.", + "feature2Title": "Use AI", + "feature2Desc": "Generate complete architectures with a single intelligent prompt.", + "feature3Title": "Code to diagram", + "feature3Desc": "Instantly construct stunning visual infrastructure from text.", + "feature4Title": "Export in many formats", + "feature4Desc": "Export into beautiful, fully animated presentation diagrams.", + "analyticsTitle": "Anonymous Analytics", + "analyticsDesc": "We collect diagnostic data. We never read your diagrams or prompts.", + "getStarted": "Get Started" }, "footer": { "mitLicensed": "Licencia MIT" @@ -560,8 +601,12 @@ "algorithm": "Algoritmo", "layered": "Capas", "layeredDesc": "Jerárquico, bueno para flujos", + "hierarchical": "Jerárquico", + "hierarchicalDesc": "La mejor opción predeterminada para la mayoría de los flujos. Buen equilibrio entre legibilidad y cruces de líneas.", "tree": "Árbol", "treeDesc": "Estructura padre-hijo estricta", + "treeOptimized": "Árbol", + "treeOptimizedDesc": "Diseño estricto padre-hijo para organigramas y árboles de dependencias.", "force": "Fuerza", "forceDesc": "Orgánico, basado en física", "radial": "Radial", @@ -575,6 +620,10 @@ "compact": "Compacto", "normal": "Normal", "loose": "Espaciado", + "orthogonalCompact": "Compacto", + "orthogonalCompactDesc": "Estructura densa de izquierda a derecha para diagramas medianos y de alta densidad.", + "orthogonalSpacious": "Espacioso", + "orthogonalSpaciousDesc": "Más espacio en blanco para mayor claridad en presentaciones y revisiones.", "applyLayout": "Aplicar diseño", "layoutStyle": "Estilo de diseño" }, @@ -609,6 +658,135 @@ "exportModeDeterministic": "Determinista", "exportModeLegacy": "Heredado", "exportMode": "Modo de exportación" + }, + "aiStudio": { + "placeholders": { + "create": "Describe el diagrama que quieres crear desde cero...", + "selectedEdit": "Describe qué quieres cambiar en el nodo seleccionado {{count}}...", + "edit": "Describe un cambio, por ejemplo: 'añadir Redis entre la API y la BD'", + "empty": "Describe un diagrama para generarlo desde cero..." + }, + "applyEdit": "Aplicar edición con IA", + "generateDiagram": "Generar diagrama", + "importReady": "Importación lista - revisa los cambios", + "addedCount": "{{count}} añadidos", + "updatedCount": "{{count}} actualizados", + "removedCount": "{{count}} eliminados", + "discard": "Descartar", + "applyToCanvas": "Aplicar al lienzo", + "emptyDescription": "Describe el diagrama que quieres y {{appName}} preparará el primer borrador por ti.", + "editDescription": "Describe los cambios que quieres y {{appName}} actualizará el diagrama por ti.", + "addKeyCta": "Añade una clave de IA para empezar", + "retrying": "Reintentando ({{retryCount}} de 3)...", + "generating": "Generando...", + "editCurrent": "Editar actual", + "editCurrentHint": "Modificar tu lienzo actual", + "createNew": "Crear nuevo", + "createNewHint": "Empezar de cero con un nuevo diagrama", + "editingSelectedNodes": "Editando {{count}} nodo seleccionado", + "uploadPreviewAlt": "Vista previa de la carga", + "attachImage": "Adjuntar imagen", + "cancelGeneration": "Cancelar generación" + }, + "figmaImport": { + "invalidUrl": "URL de Figma no válida. Usa un enlace figma.com/file/... o figma.com/design/....", + "tokenRequired": "Se requiere un token de acceso personal.", + "unknownError": "Error desconocido", + "title": "Importar desde Figma", + "fileUrlLabel": "URL del archivo de Figma", + "fileUrlPlaceholder": "https://www.figma.com/design/...", + "tokenLabel": "Token de acceso personal", + "tokenHelpLink": "cómo obtener uno", + "tokenPlaceholder": "figd_...", + "tokenPrivacy": "El token solo se usa en tu navegador y nunca se envía a nuestros servidores.", + "foundSummary": "Se encontraron {{colors}} colores y {{fonts}} estilos de texto de \"{{name}}\"", + "colors": "Colores", + "moreCount": "+{{count}} más", + "fonts": "Fuentes", + "fetchingStyles": "Obteniendo estilos...", + "fetchStyles": "Obtener estilos", + "applyToDesignSystem": "Aplicar al sistema de diseño" + }, + "import": { + "placeholders": { + "sql": "Pega aquí las sentencias CREATE TABLE...", + "infra": "Pega aquí el JSON del estado de Terraform, YAML de Kubernetes, Docker Compose o Terraform HCL...", + "openapi": "Pega aquí tu YAML o JSON de OpenAPI / Swagger...", + "code": "Pega aquí tu código fuente..." + }, + "infraFormats": { + "terraformState": "Terraform State (.tfstate)", + "kubernetes": "Kubernetes YAML", + "dockerCompose": "Docker Compose", + "terraformHcl": "Terraform HCL (AI)" + }, + "errors": { + "inputTooLarge": "La entrada ocupa {{size}} - el máximo para pegar es {{max}}.", + "fileTooLarge": "El archivo ocupa {{size}} - el máximo es {{max}}.", + "terraformHclRequiresAi": "Terraform HCL requiere análisis con IA. Usa el botón de IA.", + "nativeNotAvailable": "El análisis nativo no está disponible para este tipo.", + "parsingFailed": "Error al analizar.", + "aiUnavailable": "El análisis con IA no está disponible para este tipo.", + "aiFailed": "La generación con IA falló.", + "inputExceedsLimit": "La entrada supera el límite de {{max}}. Recorta el contenido o usa un archivo más pequeño." + }, + "categories": { + "sql": "SQL", + "infra": "Infra", + "openapi": "OpenAPI", + "code": "Code", + "codebase": "Repositorio" + }, + "title": "Importar desde datos", + "description": "Importa código, infraestructura, SQL o especificaciones de API en tu diagrama.", + "uploadFile": "Subir archivo", + "parsing": "Analizando...", + "parse": "Analizar", + "analyzing": "Procesando...", + "aiActions": { + "generateErd": "Generar DER (IA)", + "generateDiagram": "Generar diagrama (IA)", + "generateSequence": "Generar secuencia", + "analyzeArchitecture": "Analizar arquitectura", + "analyzeProject": "Analizar proyecto" + }, + "previewDsl": "Vista previa del DSL", + "appliedToCanvas": "Aplicado al lienzo", + "applyToCanvas": "Aplicar al lienzo" + }, + "layers": { + "title": "Capas", + "newLayerName": "Nuevo nombre de capa", + "add": "Añadir", + "active": "Activa", + "visible": "Visible", + "hidden": "Oculta", + "locked": "Bloqueada", + "unlocked": "Desbloqueada", + "moveSelectedHere": "Mover selección aquí", + "selectLayer": "Seleccionar capa", + "up": "Subir", + "down": "Bajar", + "sections": "Secciones", + "previousSection": "Sección anterior", + "nextSection": "Sección siguiente", + "noSections": "Todavía no hay secciones.", + "sectionFallbackName": "Sección", + "order": "Orden {{order}}", + "focus": "Enfocar", + "show": "Mostrar", + "hide": "Ocultar", + "unlock": "Desbloquear", + "lock": "Bloquear", + "footerHint": "Bloquear una capa desactiva el arrastre. Las capas ocultas no se renderizan en el lienzo." + }, + "root": { + "searchAria": "Buscar acciones de la barra de comandos", + "searchPlaceholder": "Buscar acciones, {{appName}}, código o herramientas del lienzo...", + "resultsAria": "Resultados de búsqueda de la barra de comandos", + "quickActionsAria": "Acciones rápidas de la barra de comandos", + "results": "Resultados", + "noMatchingCommands": "No hay comandos que coincidan con \"{{query}}\"" } }, "settingsModal": { @@ -630,8 +808,8 @@ "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", + "alignmentGuides": "Guías de alineación", + "alignmentGuidesDesc": "Muestra guías inteligentes al arrastrar nodos", "routingProfile": "Perfil de enrutamiento", "routingProfileStandard": "Estándar", "routingProfileInfrastructure": "Infraestructura", @@ -688,13 +866,13 @@ "hint": "Cualquier endpoint compatible con OpenAI" } }, - "customModelHint": "Enter the exact model ID for your endpoint", - "howToGetKey": "How to get your API key", - "pasteKeyStep": "Paste it in the field above — never shared with us", - "customEndpointTitle": "What is a custom endpoint?", + "customModelHint": "Introduce el ID exacto del modelo para tu endpoint", + "howToGetKey": "Cómo obtener tu clave API", + "pasteKeyStep": "Pégala en el campo de arriba; nunca se comparte con nosotros", + "customEndpointTitle": "¿Qué es un endpoint personalizado?", "privacyTitle": "Privacy & Encryption", - "customEndpointText": "Any <1>OpenAI-compatible API endpoint — local or remote. Great for:", - "customEndpointMustSupport": "Must support <1>POST /chat/completions (OpenAI format)", + "customEndpointText": "Cualquier endpoint API <1>compatible con OpenAI, local o remoto. Ideal para:", + "customEndpointMustSupport": "Debe admitir <1>POST /chat/completions (formato OpenAI)", "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", @@ -722,15 +900,15 @@ "inactive": "Inactivo", "setActive": "Establecer como activo", "resetToDefaults": "Restablecer", - "tabIdentity": "Identity", - "tabColors": "Colors", + "tabIdentity": "Identidad", + "tabColors": "Colores", "tabType": "Type", "tabUI": "UI & Shape", - "appName": "App Name", + "appName": "Nombre de la app", "logo": "Logo", "favicon": "Favicon", - "logoStyle": "Logo Style", - "fontFamily": "Font Family", + "logoStyle": "Estilo del logo", + "fontFamily": "Familia tipográfica", "googleFontsHint": "Dynamically loaded from Google Fonts", "cornerRadius": "Corner Radius", "glassmorphism": "Glassmorphism", @@ -740,26 +918,15 @@ "showBetaBadgeHint": "Display the BETA chip next to logo" }, "shortcutsHint": "También puedes presionar ? para verlos en cualquier momento.", - "privacy": { - "manifesto": "Nuestro manifiesto de privacidad", - "manifestoText": "Creemos en la privacidad por diseño y la autonomía del usuario.", - "localFirst": "Almacenamiento local", - "noAccounts": "Sin cuentas de usuario", - "ownData": "Tus datos son tuyos", - "anonymous": "Solo uso anónimo", - "telemetry": "Telemetría & Comentarios", - "anonymousStats": "Estadísticas anónimas", - "anonymousStatsDesc": "Solo rastreamos visitas y uso anónimo limitado.", - "quote": "Confiamos en que nos digas qué funciona.", - "helpImprove": "Ayúdanos a mejorar", - "shareFeedback": "Compartir comentarios", - "shareFeedbackDesc": "Dar comentarios, reportar errores, pedir características" - }, "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" + "closeDialog": "Cerrar diálogo de configuración", + "analytics": { + "enableTitle": "Analíticas de inicio anónimas", + "enableDescription": "Compartir datos básicos de uso de forma anónima (opcional)" + } }, "customNodes": { "browserContent": "Contenido del navegador", @@ -779,11 +946,13 @@ "addItem": "Agregar elemento", "addToCanvas": "Agregar al lienzo", "shapes": "Formas", + "diagrams": "Diagramas", "assets": "Recursos", "node": "Forma", "stickyNote": "Nota adhesiva", "section": "Sección", "text": "Texto", + "other": "Otros", "wireframes": "Wireframes", "image": "Imagen", "autoLayout": "Diseño automático", @@ -852,20 +1021,61 @@ "nodes": "{{count}} nodos", "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." + "namedVersions": "Versiones con nombre", + "noNamedSnapshots": "Aún no hay versiones con nombre.", + "autosavedVersions": "Puntos de control autoguardados", + "noAutoSnapshots": "Aún no hay puntos de control autoguardados." }, "templatesPanel": { "title": "Plantillas de flujo", "searchPlaceholder": "Buscar plantillas...", "noTemplates": "No se encontraron plantillas." }, + "homeTemplates": { + "description": "Comienza con un flujo listo para usar y personalízalo en el editor.", + "openPicker": "Abrir selector de plantillas", + "featured": "Plantillas destacadas", + "count": "{{count}} plantillas", + "nodes": "{{count}} nodos", + "edges": "{{count}} conexiones", + "starter": "Inicial", + "starterTemplate": "Plantilla inicial", + "bestFirstEdits": "Primeras ediciones recomendadas", + "perfectFor": "Ideal para", + "useTemplate": "Usar plantilla", + "closePreview": "Cerrar vista previa de plantilla" + }, "propertiesPanel": { "stickyNote": "Nota adhesiva", "nodeSettings": "Configuración de forma", - "connection": "Conexión" + "connection": "Conexión", + "noSelection": "Nada seleccionado", + "selectHint": "Haz clic en un nodo o una arista para editar sus propiedades" + }, + "properties": { + "title": "Properties", + "shape": "Shape", + "color": "Color", + "icon": "Icon", + "rotation": "Rotation", + "transparency": "Transparency", + "imageSettings": "Image Settings", + "bulkShape": "Bulk Shape", + "bulkColor": "Bulk Color", + "bulkIcon": "Bulk Icon", + "labelTransform": "Label Transform", + "findReplace": "Find & Replace", + "findLabel": "Find", + "findPlaceholder": "Find text", + "replaceLabel": "Replace", + "replacePlaceholder": "Replace with", + "prefixOptional": "Prefix (optional)", + "suffixOptional": "Suffix (optional)", + "useRegex": "Use Regex", + "applyToSelectedNodes": "Apply to selected nodes", + "selectFieldToApply": "Select a field to apply", + "previewSummary": "Preview summary", + "selectionSummary": "Resumen de selecció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." @@ -875,61 +1085,65 @@ "newFlowTab": "Nueva pestaña de flujo" }, "nodes": { - "note": "Note", - "database": "Database", - "inputOutput": "Input / Output", - "newNode": "New Node", - "branch": "Branch", - "processStep": "Process Step", + "note": "Nota", + "database": "Base de datos", + "inputOutput": "Entrada / Salida", + "newNode": "Nuevo nodo", + "branch": "Rama", + "processStep": "Paso de proceso", "addText": "Agregar texto", "group": "Group", "items": "items", - "addCommentsHere": "Add your comments here.", - "newSection": "New Section", + "addCommentsHere": "Añade aquí tus comentarios.", + "newSection": "Nueva sección", + "section": "Sección", "text": "Text", "image": "Image", "mindmap": "Tema" }, "actions": { - "clearCanvasConfirm": "Are you sure you want to clear the canvas?" + "clearCanvasConfirm": "¿Seguro que quieres limpiar el lienzo?" }, "share": { "close": "Close", - "title": "Share Design", + "title": "Compartir diseño", "betaBadge": "Beta", - "description": "Invite collaborators to view and edit this flow with you in real-time.", + "description": "Invita a colaboradores a ver y editar este flujo contigo en tiempo real.", "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", + "copyLink": "Copiar enlace", + "footerNote": "Tu diagrama permanece local a menos que compartas esta sala. Si la copia está bloqueada, copia manualmente el enlace de arriba.", + "closeDialog": "Cerrar diálogo de compartir", "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" + "realtime": "Sincronización entre pares en tiempo real", + "waiting": "Conectando a la sincronización en tiempo real", + "fallback": "Modo solo local" }, "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.", + "copyFailed": "No se pudo copiar el enlace para compartir.", + "linkCopied": "Se copió el enlace de colaboración.", "copyManual": "El acceso al portapapeles está bloqueado. Copia el enlace manualmente desde el diálogo de compartir." } }, "connectionPanel": { - "architecture": "Architecture", + "architecture": "Arquitectura", "label": "Label", "messagePlaceholder": "Mensaje", "route": "Ruta", "appearance": "Apariencia", - "condition": "Condition", - "deleteConnection": "Delete Connection" + "condition": "Condición", + "deleteConnection": "Eliminar conexión" + }, + "sidebar": { + "close": "Cerrar barra lateral" } } diff --git a/public/locales/fr/translation.json b/public/locales/fr/translation.json index 8a5300a3..9bc33a50 100644 --- a/public/locales/fr/translation.json +++ b/public/locales/fr/translation.json @@ -52,6 +52,7 @@ "bringToFront": "Mettre au premier plan", "sendToBack": "Mettre en arrière-plan", "reverseDirection": "Inverser la direction", + "editLabel": "Modifier l’étiquette", "deleteConnection": "Supprimer la connexion", "itemsSelected": "{{count}} éléments sélectionnés", "align": "Aligner", @@ -65,7 +66,7 @@ "distributeHorizontally": "Distribuer horizontalement", "distributeVertically": "Distribuer verticalement", "group": "Groupe", - "upload": "Upload", + "upload": "Téléverser", "rename": "Renommer" }, "nav": { @@ -83,11 +84,15 @@ "canvasSettings": "Paramètres du canevas", "wideLogo": "Votre logo large", "uploadWideLogo": "Téléchargez un logo large dans les paramètres de marque", + "saveStatus": "État de sauvegarde locale", + "autoSaved": "Enregistré localement à {{time}}.", + "privacyShort": "Vos diagrammes restent sur cet appareil et n’atteignent pas nos serveurs.", "beta": "BÊTA", "versionHistory": "Historique des versions", "loadJSON": "Charger JSON", "playbackMode": "Mode lecture", - "privacyMessage": "Vos diagrammes restent avec vous et n’atteignent pas nos serveurs." + "privacyMessage": "Vos diagrammes restent avec vous et n’atteignent pas nos serveurs.", + "templates": "Modèles" }, "menu": { "file": "Fichier", @@ -110,6 +115,7 @@ }, "export": { "title": "Exporter", + "subtitle": "Choisissez un format et une action.", "png": "Exporter en PNG", "jpeg": "Exporter en JPEG", "json": "Exporter en JSON", @@ -122,10 +128,11 @@ "jsonLabel": "JSON File", "hintDownload": "Download", "openflowdslLabel": "{{appName}} DSL", - "hintClipboard": "Copy to clipboard", + "hintClipboard": "Copier", "figmaEditable": "Figma Editable", "exportDiagram": "Export Diagram", "exportAs": "Export As", + "actionCopy": "Copier", "exportOrShare": "Exporter ou partager ce canevas", "svg": "Exporter en SVG", "hintSvgScalable": "Fichier vectoriel redimensionnable", @@ -149,7 +156,13 @@ "hintCinematicVideo": "Dark launch-style build", "cinematicGif": "Cinematic Build GIF", "hintCinematicGif": "Dark social-ready loop", - "actionDownload": "Download" + "actionDownload": "Download", + "hintDocument": "Document", + "hintEditableSvg": "SVG modifiable", + "chooseFormat": "Choisir un format", + "speed": "Vitesse", + "resolution": "Résolution", + "transparentBackground": "Arrière-plan transparent" }, "import": { "title": "Importer", @@ -255,16 +268,21 @@ "settings": { "title": "Paramètres", "general": "Général", + "canvas": "Canevas", "shortcuts": "Raccourcis clavier", "theme": "Thème", "language": "Langue", "selectLanguage": "Sélectionner la langue", + "languageDescription": "Choisissez la langue de l'interface utilisée dans l'application.", "appearance": "Apparence", "ai": "Paramètres IA", "analytics": "Analytique", "about": "À propos", "brand": "Paramètres de marque", - "privacy": "Confidentialité" + "privacy": "Confidentialité", + "themeLight": "Light", + "themeDark": "Dark", + "themeSystem": "System" }, "shortcuts": { "title": "Raccourcis clavier", @@ -291,10 +309,22 @@ "labelTransform": "Transformation d'étiquette", "prefixOptional": "Préfixe (optionnel)", "suffixOptional": "Suffixe (optionnel)", + "findReplace": "Rechercher et remplacer", + "findLabel": "Rechercher", + "findPlaceholder": "Texte à rechercher", + "replaceLabel": "Remplacer par", + "replacePlaceholder": "Texte de remplacement", + "useRegex": "Utiliser une expression régulière", "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" + "applyToSelectedNodes": "Appliquer aux éléments sélectionnés", + "imageSettings": "Paramètres de l'image", + "transparency": "Transparence", + "rotation": "Rotation" + }, + "saveStatus": { + "saved": "Enregistré" }, "ai": { "generate": "Générer avec l'IA", @@ -331,13 +361,24 @@ "press": "Appuyez sur", "shortcuts": "pour les raccourcis", "privacy": "Vos diagrammes, clés API et données restent localement sur votre appareil.", - "analytics": "Nous ne comptons que les visites anonymes.", + "analytics": "Nous ne collectons pas d’analyses pour le moment.", "features": { "beautifulByDefault": "Beau par défaut", "automatedLayouts": "Mises en page automatisées et thèmes professionnels.", "privateSecure": "Privé et sécurisé", "localFirst": "Une architecture locale garde vos données en sécurité." - } + }, + "feature1Title": "Create amazing diagrams", + "feature1Desc": "Design beautiful, enterprise-grade architecture visually.", + "feature2Title": "Use AI", + "feature2Desc": "Generate complete architectures with a single intelligent prompt.", + "feature3Title": "Code to diagram", + "feature3Desc": "Instantly construct stunning visual infrastructure from text.", + "feature4Title": "Export in many formats", + "feature4Desc": "Export into beautiful, fully animated presentation diagrams.", + "analyticsTitle": "Anonymous Analytics", + "analyticsDesc": "We collect diagnostic data. We never read your diagrams or prompts.", + "getStarted": "Get Started" }, "footer": { "mitLicensed": "Licence MIT" @@ -560,8 +601,12 @@ "algorithm": "Algorithme", "layered": "Couches", "layeredDesc": "Hiérarchique, bon pour les flux", + "hierarchical": "Hiérarchique", + "hierarchicalDesc": "Le meilleur choix par défaut pour la plupart des flux. Bon équilibre entre lisibilité et croisements de liens.", "tree": "Arbre", "treeDesc": "Structure parent-enfant stricte", + "treeOptimized": "Arbre", + "treeOptimizedDesc": "Disposition parent-enfant stricte pour les organigrammes et les arbres de dépendances.", "force": "Force", "forceDesc": "Organique, basé sur la physique", "radial": "Radial", @@ -575,6 +620,10 @@ "compact": "Compact", "normal": "Normal", "loose": "Espacé", + "orthogonalCompact": "Compact", + "orthogonalCompactDesc": "Structure dense de gauche à droite pour les diagrammes moyens et très denses.", + "orthogonalSpacious": "Aéré", + "orthogonalSpaciousDesc": "Plus d'espace blanc pour une meilleure clarté en présentation et en revue.", "applyLayout": "Appliquer la mise en page", "layoutStyle": "Style de disposition" }, @@ -609,6 +658,135 @@ "exportModeDeterministic": "Déterministe", "exportModeLegacy": "Hérité", "exportMode": "Mode d’export" + }, + "aiStudio": { + "placeholders": { + "create": "Décrivez le diagramme que vous voulez créer à partir de zéro...", + "selectedEdit": "Décrivez ce que vous voulez modifier sur le nœud sélectionné {{count}}...", + "edit": "Décrivez une modification, par exemple : 'ajouter Redis entre l'API et la base de données'", + "empty": "Décrivez un diagramme à générer à partir de zéro..." + }, + "applyEdit": "Appliquer la modification IA", + "generateDiagram": "Générer le diagramme", + "importReady": "Import prêt - vérifiez les modifications", + "addedCount": "{{count}} ajoutés", + "updatedCount": "{{count}} mis à jour", + "removedCount": "{{count}} supprimés", + "discard": "Ignorer", + "applyToCanvas": "Appliquer au canevas", + "emptyDescription": "Décrivez le diagramme souhaité et {{appName}} préparera le premier brouillon pour vous.", + "editDescription": "Décrivez les changements souhaités et {{appName}} mettra le diagramme à jour pour vous.", + "addKeyCta": "Ajoutez une clé IA pour commencer", + "retrying": "Nouvelle tentative ({{retryCount}} sur 3)...", + "generating": "Génération...", + "editCurrent": "Modifier l'actuel", + "editCurrentHint": "Modifier votre canevas actuel", + "createNew": "Créer un nouveau", + "createNewHint": "Repartir de zéro avec un nouveau diagramme", + "editingSelectedNodes": "Modification du nœud sélectionné {{count}}", + "uploadPreviewAlt": "Aperçu du téléversement", + "attachImage": "Joindre une image", + "cancelGeneration": "Annuler la génération" + }, + "figmaImport": { + "invalidUrl": "URL Figma invalide. Utilisez un lien figma.com/file/... ou figma.com/design/....", + "tokenRequired": "Un jeton d'accès personnel est requis.", + "unknownError": "Erreur inconnue", + "title": "Importer depuis Figma", + "fileUrlLabel": "URL du fichier Figma", + "fileUrlPlaceholder": "https://www.figma.com/design/...", + "tokenLabel": "Jeton d'accès personnel", + "tokenHelpLink": "comment en obtenir un", + "tokenPlaceholder": "figd_...", + "tokenPrivacy": "Le jeton est utilisé uniquement dans votre navigateur et n'est jamais envoyé à nos serveurs.", + "foundSummary": "{{colors}} couleurs et {{fonts}} styles de texte trouvés dans \"{{name}}\"", + "colors": "Couleurs", + "moreCount": "+{{count}} de plus", + "fonts": "Polices", + "fetchingStyles": "Récupération des styles...", + "fetchStyles": "Récupérer les styles", + "applyToDesignSystem": "Appliquer au système de design" + }, + "import": { + "placeholders": { + "sql": "Collez ici les instructions CREATE TABLE...", + "infra": "Collez ici l'état Terraform en JSON, du YAML Kubernetes, Docker Compose ou Terraform HCL...", + "openapi": "Collez ici votre YAML ou JSON OpenAPI / Swagger...", + "code": "Collez ici votre code source..." + }, + "infraFormats": { + "terraformState": "Terraform State (.tfstate)", + "kubernetes": "Kubernetes YAML", + "dockerCompose": "Docker Compose", + "terraformHcl": "Terraform HCL (AI)" + }, + "errors": { + "inputTooLarge": "L'entrée fait {{size}} - maximum {{max}} pour le collage.", + "fileTooLarge": "Le fichier fait {{size}} - maximum {{max}}.", + "terraformHclRequiresAi": "Terraform HCL nécessite une analyse IA. Utilisez le bouton IA.", + "nativeNotAvailable": "L'analyse native n'est pas disponible pour ce type.", + "parsingFailed": "L'analyse a échoué.", + "aiUnavailable": "L'analyse IA n'est pas disponible pour ce type.", + "aiFailed": "La génération IA a échoué.", + "inputExceedsLimit": "L'entrée dépasse la limite de {{max}}. Réduisez le contenu ou utilisez un fichier plus petit." + }, + "categories": { + "sql": "SQL", + "infra": "Infra", + "openapi": "OpenAPI", + "code": "Code", + "codebase": "Dépôt" + }, + "title": "Importer depuis des données", + "description": "Importez du code, de l'infrastructure, du SQL ou des spécifications d'API dans votre diagramme.", + "uploadFile": "Téléverser un fichier", + "parsing": "Analyse en cours...", + "parse": "Analyser", + "analyzing": "Analyse en cours...", + "aiActions": { + "generateErd": "Générer le MCD (IA)", + "generateDiagram": "Générer le diagramme (IA)", + "generateSequence": "Générer la séquence", + "analyzeArchitecture": "Analyser l'architecture", + "analyzeProject": "Analyser le projet" + }, + "previewDsl": "Aperçu DSL", + "appliedToCanvas": "Appliqué au canevas", + "applyToCanvas": "Appliquer au canevas" + }, + "layers": { + "title": "Calques", + "newLayerName": "Nouveau nom de calque", + "add": "Ajouter", + "active": "Actif", + "visible": "Visible", + "hidden": "Masqué", + "locked": "Verrouillé", + "unlocked": "Déverrouillé", + "moveSelectedHere": "Déplacer la sélection ici", + "selectLayer": "Sélectionner le calque", + "up": "Monter", + "down": "Descendre", + "sections": "Sections", + "previousSection": "Section précédente", + "nextSection": "Section suivante", + "noSections": "Aucune section pour le moment.", + "sectionFallbackName": "Section", + "order": "Ordre {{order}}", + "focus": "Cibler", + "show": "Afficher", + "hide": "Masquer", + "unlock": "Déverrouiller", + "lock": "Verrouiller", + "footerHint": "Un calque verrouillé ne peut pas être déplacé. Les calques masqués sont exclus du rendu du canevas." + }, + "root": { + "searchAria": "Rechercher des actions dans la barre de commandes", + "searchPlaceholder": "Rechercher des actions, {{appName}}, du code ou des outils de canevas...", + "resultsAria": "Résultats de recherche de la barre de commandes", + "quickActionsAria": "Actions rapides de la barre de commandes", + "results": "Résultats", + "noMatchingCommands": "Aucune commande correspondante pour \"{{query}}\"" } }, "settingsModal": { @@ -630,8 +808,8 @@ "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", + "alignmentGuides": "Guides d’alignement", + "alignmentGuidesDesc": "Affiche des repères intelligents pendant le déplacement des nœuds", "routingProfile": "Profil de routage", "routingProfileStandard": "Standard", "routingProfileInfrastructure": "Infrastructure", @@ -688,13 +866,13 @@ "hint": "Tout endpoint compatible OpenAI" } }, - "customModelHint": "Enter the exact model ID for your endpoint", - "howToGetKey": "How to get your API key", - "pasteKeyStep": "Paste it in the field above — never shared with us", - "customEndpointTitle": "What is a custom endpoint?", + "customModelHint": "Entrez l’identifiant exact du modèle pour votre endpoint", + "howToGetKey": "Comment obtenir votre clé API", + "pasteKeyStep": "Collez-la dans le champ ci-dessus ; elle n’est jamais partagée avec nous", + "customEndpointTitle": "Qu’est-ce qu’un endpoint personnalisé ?", "privacyTitle": "Privacy & Encryption", - "customEndpointText": "Any <1>OpenAI-compatible API endpoint — local or remote. Great for:", - "customEndpointMustSupport": "Must support <1>POST /chat/completions (OpenAI format)", + "customEndpointText": "N’importe quel endpoint API <1>compatible OpenAI, local ou distant. Idéal pour :", + "customEndpointMustSupport": "Doit prendre en charge <1>POST /chat/completions (format OpenAI)", "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", @@ -722,15 +900,15 @@ "inactive": "Inactif", "setActive": "Définir comme actif", "resetToDefaults": "Réinitialiser", - "tabIdentity": "Identity", - "tabColors": "Colors", + "tabIdentity": "Identité", + "tabColors": "Couleurs", "tabType": "Type", "tabUI": "UI & Shape", - "appName": "App Name", + "appName": "Nom de l’application", "logo": "Logo", "favicon": "Favicon", - "logoStyle": "Logo Style", - "fontFamily": "Font Family", + "logoStyle": "Style du logo", + "fontFamily": "Famille de polices", "googleFontsHint": "Dynamically loaded from Google Fonts", "cornerRadius": "Corner Radius", "glassmorphism": "Glassmorphism", @@ -740,26 +918,15 @@ "showBetaBadgeHint": "Display the BETA chip next to logo" }, "shortcutsHint": "Vous pouvez aussi appuyer sur ? pour les afficher.", - "privacy": { - "manifesto": "Notre manifeste de confidentialité", - "manifestoText": "Nous croyons en la protection des données et l'autonomie.", - "localFirst": "Stockage local", - "noAccounts": "Aucun compte utilisateur", - "ownData": "Vos données vous appartiennent", - "anonymous": "Usage anonyme uniquement", - "telemetry": "Télémétrie & Retours", - "anonymousStats": "Statistiques anonymes", - "anonymousStatsDesc": "Nous suivons uniquement les visites et l'usage anonyme.", - "quote": "Nous comptons sur vous pour nous dire ce qui marche.", - "helpImprove": "Aidez-nous à nous améliorer", - "shareFeedback": "Partager des retours", - "shareFeedbackDesc": "Donner des retours, signaler des bugs, demander des fonctionnalités" - }, "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" + "closeDialog": "Fermer la boîte de dialogue des paramètres", + "analytics": { + "enableTitle": "Analyses de lancement anonymes", + "enableDescription": "Partager des données d’usage de base de manière anonyme (optionnel)" + } }, "customNodes": { "browserContent": "Contenu du navigateur", @@ -779,11 +946,13 @@ "addItem": "Ajouter un élément", "addToCanvas": "Ajouter au canevas", "shapes": "Formes", + "diagrams": "Diagrammes", "assets": "Ressources", "node": "Forme", "stickyNote": "Note adhésive", "section": "Section", "text": "Texte", + "other": "Autres", "wireframes": "Maquettes", "image": "Image", "autoLayout": "Mise en page auto", @@ -852,20 +1021,61 @@ "nodes": "{{count}} nœuds", "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." + "namedVersions": "Versions nommées", + "noNamedSnapshots": "Aucune version nommée pour le moment.", + "autosavedVersions": "Points de contrôle sauvegardés automatiquement", + "noAutoSnapshots": "Aucun point de contrôle sauvegardé automatiquement pour le moment." }, "templatesPanel": { "title": "Modèles de flux", "searchPlaceholder": "Rechercher des modèles...", "noTemplates": "Aucun modèle trouvé." }, + "homeTemplates": { + "description": "Commencez avec un flux prêt à l'emploi et personnalisez-le dans l'éditeur.", + "openPicker": "Ouvrir le sélecteur de modèles", + "featured": "Modèles en vedette", + "count": "{{count}} modèles", + "nodes": "{{count}} nœuds", + "edges": "{{count}} connexions", + "starter": "Départ", + "starterTemplate": "Modèle de départ", + "bestFirstEdits": "Meilleures premières modifications", + "perfectFor": "Idéal pour", + "useTemplate": "Utiliser le modèle", + "closePreview": "Fermer l’aperçu du modèle" + }, "propertiesPanel": { "stickyNote": "Note adhésive", "nodeSettings": "Paramètres de forme", - "connection": "Connexion" + "connection": "Connexion", + "noSelection": "Aucune sélection", + "selectHint": "Cliquez sur un nœud ou une arête pour modifier ses propriétés" + }, + "properties": { + "title": "Properties", + "shape": "Shape", + "color": "Color", + "icon": "Icon", + "rotation": "Rotation", + "transparency": "Transparency", + "imageSettings": "Image Settings", + "bulkShape": "Bulk Shape", + "bulkColor": "Bulk Color", + "bulkIcon": "Bulk Icon", + "labelTransform": "Label Transform", + "findReplace": "Find & Replace", + "findLabel": "Find", + "findPlaceholder": "Find text", + "replaceLabel": "Replace", + "replacePlaceholder": "Replace with", + "prefixOptional": "Prefix (optional)", + "suffixOptional": "Suffix (optional)", + "useRegex": "Use Regex", + "applyToSelectedNodes": "Apply to selected nodes", + "selectFieldToApply": "Select a field to apply", + "previewSummary": "Preview summary", + "selectionSummary": "Résumé de la sélection" }, "flowCanvas": { "strictModePasteBlocked": "Le mode strict d’architecture a bloqué le collage Mermaid. Ouvrez la vue Code, corrigez les diagnostics, puis réessayez." @@ -876,50 +1086,51 @@ }, "nodes": { "note": "Note", - "database": "Database", - "inputOutput": "Input / Output", - "newNode": "New Node", - "branch": "Branch", - "processStep": "Process Step", + "database": "Base de données", + "inputOutput": "Entrée / Sortie", + "newNode": "Nouveau nœud", + "branch": "Branche", + "processStep": "Étape de processus", "addText": "Ajouter du texte", "group": "Group", "items": "items", - "addCommentsHere": "Add your comments here.", - "newSection": "New Section", + "addCommentsHere": "Ajoutez vos commentaires ici.", + "newSection": "Nouvelle section", + "section": "Section", "text": "Text", "image": "Image", "mindmap": "Sujet" }, "actions": { - "clearCanvasConfirm": "Are you sure you want to clear the canvas?" + "clearCanvasConfirm": "Voulez-vous vraiment vider le canevas ?" }, "share": { "close": "Close", - "title": "Share Design", + "title": "Partager le design", "betaBadge": "Bêta", - "description": "Invite collaborators to view and edit this flow with you in real-time.", + "description": "Invitez des collaborateurs à consulter et modifier ce flux avec vous en temps réel.", "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", + "copyLink": "Copier le lien", + "footerNote": "Votre diagramme reste local tant que vous ne partagez pas cette salle. Si la copie est bloquée, copiez manuellement le lien ci-dessus.", + "closeDialog": "Fermer la boîte de partage", "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" + "realtime": "Synchronisation pair à pair en temps réel", + "waiting": "Connexion à la synchronisation en temps réel", + "fallback": "Mode local uniquement" }, "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.", + "copyFailed": "Impossible de copier le lien de partage.", + "linkCopied": "Le lien de collaboration a été copié.", "copyManual": "L’accès au presse-papiers est bloqué. Copiez le lien manuellement depuis la boîte de dialogue de partage." } }, @@ -930,6 +1141,9 @@ "route": "Trajet", "appearance": "Apparence", "condition": "Condition", - "deleteConnection": "Delete Connection" + "deleteConnection": "Supprimer la connexion" + }, + "sidebar": { + "close": "Fermer la barre latérale" } } diff --git a/public/locales/ja/translation.json b/public/locales/ja/translation.json index 6101f0d5..2f1f1f18 100644 --- a/public/locales/ja/translation.json +++ b/public/locales/ja/translation.json @@ -52,6 +52,7 @@ "bringToFront": "最前面へ", "sendToBack": "最背面へ", "reverseDirection": "方向を反転", + "editLabel": "ラベルを編集", "deleteConnection": "接続を削除", "itemsSelected": "{{count}} 件選択中", "align": "整列", @@ -65,7 +66,7 @@ "distributeHorizontally": "水平方向に分布", "distributeVertically": "垂直方向に分布", "group": "グループ", - "upload": "Upload", + "upload": "アップロード", "rename": "名前を変更" }, "nav": { @@ -83,11 +84,15 @@ "canvasSettings": "キャンバス設定", "wideLogo": "ワイドロゴ", "uploadWideLogo": "ブランド設定でワイドロゴをアップロード", + "saveStatus": "ローカル保存ステータス", + "autoSaved": "{{time}} にローカル保存済み。", + "privacyShort": "図はこの端末に保存され、当社のサーバーには送信されません。", "beta": "ベータ", "versionHistory": "バージョン履歴", "loadJSON": "JSONを読む", "playbackMode": "再生モード", - "privacyMessage": "図はあなたの手元に残り、当社のサーバーには届きません。" + "privacyMessage": "図はあなたの手元に残り、当社のサーバーには届きません。", + "templates": "テンプレート" }, "menu": { "file": "ファイル", @@ -110,6 +115,7 @@ }, "export": { "title": "エクスポート", + "subtitle": "形式と操作を選択してください。", "png": "PNGとしてエクスポート", "jpeg": "JPEGとしてエクスポート", "json": "JSONとしてエクスポート", @@ -122,10 +128,11 @@ "jsonLabel": "JSON File", "hintDownload": "Download", "openflowdslLabel": "{{appName}} DSL", - "hintClipboard": "Copy to clipboard", + "hintClipboard": "コピー", "figmaEditable": "Figma Editable", "exportDiagram": "Export Diagram", "exportAs": "Export As", + "actionCopy": "コピー", "exportOrShare": "このキャンバスをエクスポートまたは共有", "svg": "SVGとしてエクスポート", "hintSvgScalable": "拡大縮小可能なベクターファイル", @@ -149,7 +156,13 @@ "hintCinematicVideo": "Dark launch-style build", "cinematicGif": "Cinematic Build GIF", "hintCinematicGif": "Dark social-ready loop", - "actionDownload": "Download" + "actionDownload": "Download", + "hintDocument": "ドキュメント", + "hintEditableSvg": "編集可能な SVG", + "chooseFormat": "形式を選択", + "speed": "速度", + "resolution": "解像度", + "transparentBackground": "透明な背景" }, "import": { "title": "インポート", @@ -255,16 +268,21 @@ "settings": { "title": "設定", "general": "一般", + "canvas": "キャンバス", "shortcuts": "キーボードショートカット", "theme": "テーマ", "language": "言語", "selectLanguage": "言語を選択", + "languageDescription": "アプリ全体で使用する表示言語を選択します。", "appearance": "外観", "ai": "AI設定", "analytics": "分析", "about": "バージョン情報", "brand": "ブランド設定", - "privacy": "プライバシー" + "privacy": "プライバシー", + "themeLight": "ライト", + "themeDark": "ダーク", + "themeSystem": "システム" }, "shortcuts": { "title": "キーボードショートカット", @@ -291,10 +309,22 @@ "labelTransform": "ラベル変換", "prefixOptional": "接頭辞（任意）", "suffixOptional": "接尾辞（任意）", + "findReplace": "検索と置換", + "findLabel": "検索", + "findPlaceholder": "検索するテキスト", + "replaceLabel": "置換後の文字列", + "replacePlaceholder": "置換テキスト", + "useRegex": "正規表現を使用", "previewSummary": "プレビュー", "bulkApplySummary": "選択中の {{count}} 項目を更新します", "selectFieldToApply": "適用する項目を少なくとも 1 つ選択してください。", - "applyToSelectedNodes": "選択した項目に適用" + "applyToSelectedNodes": "選択した項目に適用", + "imageSettings": "画像設定", + "transparency": "透明度", + "rotation": "回転" + }, + "saveStatus": { + "saved": "保存済み" }, "ai": { "generate": "AIで生成", @@ -331,13 +361,24 @@ "press": "押す", "shortcuts": "ショートカット表示", "privacy": "図、APIキー、データはすべてローカルデバイスに保存されます。", - "analytics": "匿名のページ訪問のみを集計します。", + "analytics": "現在、分析データは収集していません。", "features": { "beautifulByDefault": "デフォルトで美しい", "automatedLayouts": "自動レイアウトとプロのテーマ。", "privateSecure": "プライベートで安全", "localFirst": "ローカルファーストアーキテクチャがデータを安全に保ちます。" - } + }, + "feature1Title": "Create amazing diagrams", + "feature1Desc": "Design beautiful, enterprise-grade architecture visually.", + "feature2Title": "Use AI", + "feature2Desc": "Generate complete architectures with a single intelligent prompt.", + "feature3Title": "Code to diagram", + "feature3Desc": "Instantly construct stunning visual infrastructure from text.", + "feature4Title": "Export in many formats", + "feature4Desc": "Export into beautiful, fully animated presentation diagrams.", + "analyticsTitle": "Anonymous Analytics", + "analyticsDesc": "We collect diagnostic data. We never read your diagrams or prompts.", + "getStarted": "Get Started" }, "footer": { "mitLicensed": "MITライセンス" @@ -560,8 +601,12 @@ "algorithm": "アルゴリズム", "layered": "レイヤー", "layeredDesc": "階層構造", + "hierarchical": "階層型", + "hierarchicalDesc": "ほとんどのフローに最適な既定レイアウトです。読みやすさと線の交差の少なさのバランスが良好です。", "tree": "ツリー", "treeDesc": "厳密な親子関係", + "treeOptimized": "ツリー", + "treeOptimizedDesc": "組織図や依存関係ツリー向けの厳密な親子レイアウトです。", "force": "フォース", "forceDesc": "物理ベースの有機的構造", "radial": "放射状", @@ -575,6 +620,10 @@ "compact": "コンパクト", "normal": "標準", "loose": "ゆったり", + "orthogonalCompact": "コンパクト", + "orthogonalCompactDesc": "中規模から高密度の図に適した、密度の高い左から右への構造です。", + "orthogonalSpacious": "ゆったり", + "orthogonalSpaciousDesc": "プレゼンやレビューで見やすくするため、余白を大きく取ったレイアウトです。", "applyLayout": "レイアウトを適用", "layoutStyle": "レイアウトスタイル" }, @@ -609,6 +658,135 @@ "exportModeDeterministic": "決定的", "exportModeLegacy": "従来方式", "exportMode": "エクスポートモード" + }, + "aiStudio": { + "placeholders": { + "create": "最初から作成したい図を説明してください...", + "selectedEdit": "選択中の {{count}} 個のノードをどう変更したいか説明してください...", + "edit": "変更内容を説明してください。例:「API と DB の間に Redis を追加」", + "empty": "最初から生成したい図を説明してください..." + }, + "applyEdit": "AI 編集を適用", + "generateDiagram": "図を生成", + "importReady": "インポートの準備ができました - 変更を確認してください", + "addedCount": "{{count}} 件追加", + "updatedCount": "{{count}} 件更新", + "removedCount": "{{count}} 件削除", + "discard": "破棄", + "applyToCanvas": "キャンバスに適用", + "emptyDescription": "必要な図を説明すると、{{appName}} が最初のグラフ案を作成します。", + "editDescription": "必要な変更を説明すると、{{appName}} が図を更新します。", + "addKeyCta": "開始するには AI キーを追加", + "retrying": "再試行中 ({{retryCount}} / 3)...", + "generating": "生成中...", + "editCurrent": "現在の図を編集", + "editCurrentHint": "現在のキャンバスを変更します", + "createNew": "新規作成", + "createNewHint": "新しい図で最初から始める", + "editingSelectedNodes": "選択中の {{count}} 個のノードを編集中", + "uploadPreviewAlt": "アップロードプレビュー", + "attachImage": "画像を添付", + "cancelGeneration": "生成をキャンセル" + }, + "figmaImport": { + "invalidUrl": "無効な Figma URL です。figma.com/file/... または figma.com/design/... のリンクを使用してください。", + "tokenRequired": "個人アクセストークンが必要です。", + "unknownError": "不明なエラー", + "title": "Figma からインポート", + "fileUrlLabel": "Figma ファイル URL", + "fileUrlPlaceholder": "https://www.figma.com/design/...", + "tokenLabel": "個人アクセストークン", + "tokenHelpLink": "取得方法", + "tokenPlaceholder": "figd_...", + "tokenPrivacy": "トークンはブラウザー内でのみ使用され、当社サーバーへ送信されることはありません。", + "foundSummary": "\"{{name}}\" から {{colors}} 色と {{fonts}} 個のテキストスタイルを検出しました", + "colors": "色", + "moreCount": "+{{count}} 件", + "fonts": "フォント", + "fetchingStyles": "スタイルを取得中...", + "fetchStyles": "スタイルを取得", + "applyToDesignSystem": "デザインシステムに適用" + }, + "import": { + "placeholders": { + "sql": "ここに CREATE TABLE 文を貼り付けてください...", + "infra": "ここに Terraform state JSON、Kubernetes YAML、Docker Compose、または Terraform HCL を貼り付けてください...", + "openapi": "ここに OpenAPI / Swagger の YAML または JSON を貼り付けてください...", + "code": "ここにソースコードを貼り付けてください..." + }, + "infraFormats": { + "terraformState": "Terraform State (.tfstate)", + "kubernetes": "Kubernetes YAML", + "dockerCompose": "Docker Compose", + "terraformHcl": "Terraform HCL (AI)" + }, + "errors": { + "inputTooLarge": "入力サイズは {{size}} です。貼り付けの上限は {{max}} です。", + "fileTooLarge": "ファイルサイズは {{size}} です。上限は {{max}} です。", + "terraformHclRequiresAi": "Terraform HCL には AI 解析が必要です。AI ボタンを使用してください。", + "nativeNotAvailable": "この種類ではネイティブ解析を利用できません。", + "parsingFailed": "解析に失敗しました。", + "aiUnavailable": "この種類では AI 解析を利用できません。", + "aiFailed": "AI 生成に失敗しました。", + "inputExceedsLimit": "入力が {{max}} の上限を超えています。内容を減らすか、より小さいファイルを使用してください。" + }, + "categories": { + "sql": "SQL", + "infra": "Infra", + "openapi": "OpenAPI", + "code": "Code", + "codebase": "リポジトリ" + }, + "title": "データからインポート", + "description": "コード、インフラ、SQL、または API 仕様を図に取り込みます。", + "uploadFile": "ファイルをアップロード", + "parsing": "解析中...", + "parse": "解析", + "analyzing": "分析中...", + "aiActions": { + "generateErd": "ERD を生成 (AI)", + "generateDiagram": "図を生成 (AI)", + "generateSequence": "シーケンスを生成", + "analyzeArchitecture": "アーキテクチャを分析", + "analyzeProject": "プロジェクトを分析" + }, + "previewDsl": "DSL プレビュー", + "appliedToCanvas": "キャンバスに適用しました", + "applyToCanvas": "キャンバスに適用" + }, + "layers": { + "title": "レイヤー", + "newLayerName": "新しいレイヤー名", + "add": "追加", + "active": "アクティブ", + "visible": "表示", + "hidden": "非表示", + "locked": "ロック済み", + "unlocked": "ロック解除済み", + "moveSelectedHere": "選択項目をここへ移動", + "selectLayer": "レイヤーを選択", + "up": "上へ", + "down": "下へ", + "sections": "セクション", + "previousSection": "前のセクション", + "nextSection": "次のセクション", + "noSections": "まだセクションはありません。", + "sectionFallbackName": "セクション", + "order": "順序 {{order}}", + "focus": "フォーカス", + "show": "表示", + "hide": "非表示", + "unlock": "ロック解除", + "lock": "ロック", + "footerHint": "レイヤーをロックするとドラッグできなくなります。非表示レイヤーはキャンバス描画から除外されます。" + }, + "root": { + "searchAria": "コマンドバーのアクションを検索", + "searchPlaceholder": "アクション、{{appName}}、コード、またはキャンバスツールを検索...", + "resultsAria": "コマンド検索結果", + "quickActionsAria": "コマンドのクイックアクション", + "results": "結果", + "noMatchingCommands": "\"{{query}}\" に一致するコマンドはありません" } }, "settingsModal": { @@ -630,8 +808,8 @@ "miniMapDesc": "右下にミニマップを表示", "architectureStrictMode": "アーキテクチャ厳格モード", "architectureStrictModeDesc": "アーキテクチャ診断に回復/検証の問題が含まれる場合、Mermaid のインポートをブロックします", - "alignmentGuides": "Alignment Guides", - "alignmentGuidesDesc": "Show smart guide lines while dragging nodes", + "alignmentGuides": "整列ガイド", + "alignmentGuidesDesc": "ノードをドラッグ中にスマートガイド線を表示します", "routingProfile": "ルーティングプロファイル", "routingProfileStandard": "標準", "routingProfileInfrastructure": "インフラストラクチャ", @@ -688,13 +866,13 @@ "hint": "互換エンドポイント" } }, - "customModelHint": "Enter the exact model ID for your endpoint", - "howToGetKey": "How to get your API key", - "pasteKeyStep": "Paste it in the field above — never shared with us", - "customEndpointTitle": "What is a custom endpoint?", + "customModelHint": "このエンドポイントで使う正確なモデル ID を入力してください", + "howToGetKey": "API キーの取得方法", + "pasteKeyStep": "上の入力欄に貼り付けてください。こちらには共有されません", + "customEndpointTitle": "カスタムエンドポイントとは？", "privacyTitle": "Privacy & Encryption", - "customEndpointText": "Any <1>OpenAI-compatible API endpoint — local or remote. Great for:", - "customEndpointMustSupport": "Must support <1>POST /chat/completions (OpenAI format)", + "customEndpointText": "ローカルでもリモートでも使える、任意の <1>OpenAI 互換 API エンドポイントです。こんな用途に最適です:", + "customEndpointMustSupport": "<1>POST /chat/completions（OpenAI 形式）に対応している必要があります", "advancedEndpointOverride": "詳細なベースURL上書き", "baseUrlHint": "空欄のままにすると、プロバイダー既定のエンドポイントを使用します。独自のプロキシ/ワーカーURLに使用してください。", "resetEndpoint": "既定に戻す", @@ -722,44 +900,33 @@ "inactive": "非アクティブ", "setActive": "アクティブにする", "resetToDefaults": "デフォルトにリセット", - "tabIdentity": "Identity", - "tabColors": "Colors", - "tabType": "Type", - "tabUI": "UI & Shape", - "appName": "App Name", - "logo": "Logo", - "favicon": "Favicon", - "logoStyle": "Logo Style", - "fontFamily": "Font Family", - "googleFontsHint": "Dynamically loaded from Google Fonts", - "cornerRadius": "Corner Radius", - "glassmorphism": "Glassmorphism", - "beveledButtons": "Beveled Buttons", - "beveledButtonsHint": "Add depth and borders to buttons", - "showBetaBadge": "Show Beta Badge", - "showBetaBadgeHint": "Display the BETA chip next to logo" + "tabIdentity": "アイデンティティ", + "tabColors": "カラー", + "tabType": "書体", + "tabUI": "UI と形状", + "appName": "アプリ名", + "logo": "ロゴ", + "favicon": "ファビコン", + "logoStyle": "ロゴスタイル", + "fontFamily": "フォントファミリー", + "googleFontsHint": "Google Fonts から動的に読み込みます", + "cornerRadius": "角丸半径", + "glassmorphism": "グラスモーフィズム", + "beveledButtons": "ベベルボタン", + "beveledButtonsHint": "ボタンに奥行きと枠線を追加します", + "showBetaBadge": "ベータバッジを表示", + "showBetaBadgeHint": "ロゴの横に BETA バッジを表示します" }, "shortcutsHint": "いつでも ? を押して、これらのショートカットを表示できます。", - "privacy": { - "manifesto": "プライバシーマニフェスト", - "manifestoText": "私たちは設計によるプライバシーを信じています。", - "localFirst": "ローカル保存", - "noAccounts": "ユーザーアカウントなし", - "ownData": "自分のデータは自分で管理", - "anonymous": "匿名利用のみ", - "telemetry": "テレメトリとフィードバック", - "anonymousStats": "匿名統計", - "anonymousStatsDesc": "訪問数と限定的な機能の使用状況のみ追跡。", - "quote": "何がうまく機能しているかを知るには、あなたからのフィードバックが頼りです。", - "helpImprove": "改善にご協力ください", - "shareFeedback": "フィードバックを共有", - "shareFeedbackDesc": "フィードバック、バグ報告、機能リクエストの送信" - }, "settings": "設定", "canvasSettings": "キャンバス設定", "description": "キャンバス設定とキーボードショートカットを構成します。", "close": "設定を閉じる", - "closeDialog": "設定ダイアログを閉じる" + "closeDialog": "設定ダイアログを閉じる", + "analytics": { + "enableTitle": "匿名の起動分析", + "enableDescription": "匿名の基本的な利用データを共有します（任意）" + } }, "customNodes": { "browserContent": "ブラウザコンテンツ", @@ -779,11 +946,13 @@ "addItem": "アイテムを追加", "addToCanvas": "キャンバスに追加", "shapes": "図形", + "diagrams": "図表", "assets": "アセット", "node": "図形", "stickyNote": "付箋", "section": "セクション", "text": "テキスト", + "other": "その他", "wireframes": "ワイヤーフレーム", "image": "画像", "autoLayout": "自動レイアウト", @@ -852,20 +1021,61 @@ "nodes": "{{count}} ノード", "edges": "{{count}} エッジ", "close": "スナップショットパネルを閉じる", - "namedVersions": "Named Versions", - "noNamedSnapshots": "No named versions yet.", - "autosavedVersions": "Autosaved Checkpoints", - "noAutoSnapshots": "No autosaved checkpoints yet." + "namedVersions": "名前付きバージョン", + "noNamedSnapshots": "まだ名前付きバージョンはありません。", + "autosavedVersions": "自動保存チェックポイント", + "noAutoSnapshots": "まだ自動保存チェックポイントはありません。" }, "templatesPanel": { "title": "フローテンプレート", "searchPlaceholder": "テンプレートを検索...", "noTemplates": "テンプレートが見つかりません。" }, + "homeTemplates": { + "description": "すぐ使えるフローから始めて、エディターでカスタマイズできます。", + "openPicker": "テンプレートピッカーを開く", + "featured": "注目のテンプレート", + "count": "{{count}} 件のテンプレート", + "nodes": "{{count}} ノード", + "edges": "{{count}} エッジ", + "starter": "スターター", + "starterTemplate": "スターターテンプレート", + "bestFirstEdits": "最初に編集するとよい項目", + "perfectFor": "こんな用途に最適", + "useTemplate": "テンプレートを使う", + "closePreview": "テンプレートプレビューを閉じる" + }, "propertiesPanel": { "stickyNote": "付箋", "nodeSettings": "図形設定", - "connection": "接続" + "connection": "接続", + "noSelection": "何も選択されていません", + "selectHint": "ノードまたはエッジをクリックしてプロパティを編集してください" + }, + "properties": { + "title": "Properties", + "shape": "Shape", + "color": "Color", + "icon": "Icon", + "rotation": "Rotation", + "transparency": "Transparency", + "imageSettings": "Image Settings", + "bulkShape": "Bulk Shape", + "bulkColor": "Bulk Color", + "bulkIcon": "Bulk Icon", + "labelTransform": "Label Transform", + "findReplace": "Find & Replace", + "findLabel": "Find", + "findPlaceholder": "Find text", + "replaceLabel": "Replace", + "replacePlaceholder": "Replace with", + "prefixOptional": "Prefix (optional)", + "suffixOptional": "Suffix (optional)", + "useRegex": "Use Regex", + "applyToSelectedNodes": "Apply to selected nodes", + "selectFieldToApply": "Select a field to apply", + "previewSummary": "Preview summary", + "selectionSummary": "選択の概要" }, "flowCanvas": { "strictModePasteBlocked": "アーキテクチャ厳格モードにより Mermaid の貼り付けがブロックされました。コードビューを開き、診断を修正してから再試行してください。" @@ -875,61 +1085,65 @@ "newFlowTab": "新しいフロータブ" }, "nodes": { - "note": "Note", - "database": "Database", - "inputOutput": "Input / Output", - "newNode": "New Node", - "branch": "Branch", - "processStep": "Process Step", + "note": "メモ", + "database": "データベース", + "inputOutput": "入力 / 出力", + "newNode": "新しいノード", + "branch": "分岐", + "processStep": "処理ステップ", "addText": "テキストを追加", - "group": "Group", - "items": "items", - "addCommentsHere": "Add your comments here.", - "newSection": "New Section", - "text": "Text", - "image": "Image", + "group": "グループ", + "items": "項目", + "addCommentsHere": "ここにコメントを追加します。", + "newSection": "新しいセクション", + "section": "セクション", + "text": "テキスト", + "image": "画像", "mindmap": "トピック" }, "actions": { - "clearCanvasConfirm": "Are you sure you want to clear the canvas?" + "clearCanvasConfirm": "キャンバスを本当にクリアしますか？" }, "share": { - "close": "Close", - "title": "Share Design", + "close": "閉じる", + "title": "デザインを共有", "betaBadge": "ベータ", - "description": "Invite collaborators to view and edit this flow with you in real-time.", + "description": "共同編集者を招待して、このフローをリアルタイムで閲覧・編集してもらえます。", "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", + "copied": "リンクをコピーしました！", + "copyLink": "リンクをコピー", + "footerNote": "このルームを共有しない限り、図はローカルに保存されたままです。コピーがブロックされる場合は、上のリンクを手動でコピーしてください。", + "closeDialog": "共有ダイアログを閉じる", "status": { "cache": { - "syncing": " local cache syncing", - "ready": " local cache ready", - "hydrated": " restored from local cache" + "syncing": " ローカルキャッシュを同期中", + "ready": " ローカルキャッシュの準備完了", + "hydrated": " ローカルキャッシュから復元済み" }, - "realtime": "Realtime peer sync", - "waiting": "Connecting to realtime sync", - "fallback": "Local-only mode" + "realtime": "リアルタイム同期", + "waiting": "リアルタイム同期に接続中", + "fallback": "ローカル専用モード" }, - "openDialog": "Share dialog", + "openDialog": "共有ダイアログ", "toast": { "fallbackMode": "リアルタイム同期は利用できません。ローカル専用モードで続行します。", "reconnected": "リアルタイム共同編集が復旧しました。", - "copyFailed": "Unable to copy share link.", - "linkCopied": "Collaboration link copied.", + "copyFailed": "共有リンクをコピーできませんでした。", + "linkCopied": "共同編集リンクをコピーしました。", "copyManual": "クリップボードへのアクセスがブロックされています。共有ダイアログからリンクを手動でコピーしてください。" } }, "connectionPanel": { - "architecture": "Architecture", - "label": "Label", + "architecture": "アーキテクチャ", + "label": "ラベル", "messagePlaceholder": "メッセージ", "route": "ルート", "appearance": "外観", - "condition": "Condition", - "deleteConnection": "Delete Connection" + "condition": "条件", + "deleteConnection": "接続を削除" + }, + "sidebar": { + "close": "サイドバーを閉じる" } } diff --git a/public/locales/tr/translation.json b/public/locales/tr/translation.json index 837376a9..239ec7e6 100644 --- a/public/locales/tr/translation.json +++ b/public/locales/tr/translation.json @@ -57,6 +57,7 @@ "bringToFront": "Öne Getir", "sendToBack": "Arkaya Gönder", "reverseDirection": "Yönü Tersine Çevir", + "editLabel": "Etiketi Düzenle", "deleteConnection": "Bağlantıyı Sil", "itemsSelected": "{{count}} öğe seçildi", "align": "Hizala", @@ -90,11 +91,15 @@ "canvasSettings": "Tuval Ayarları", "wideLogo": "Geniş Logo", "uploadWideLogo": "Marka Ayarlarından geniş logo yükleyerek burada görüntüleyin", + "saveStatus": "Yerel kaydetme durumu", + "autoSaved": "{{time}} itibarıyla yerel olarak kaydedildi.", + "privacyShort": "Diyagramlarınız bu cihazda kalır ve sunucularımıza ulaşmaz.", "beta": "BETA", "versionHistory": "Sürüm Geçmişi", "loadJSON": "JSON Yükle", "playbackMode": "Oynatma Modu", - "privacyMessage": "Your diagrams stay with you and do not reach our servers." + "privacyMessage": "Your diagrams stay with you and do not reach our servers.", + "templates": "Şablonlar" }, "menu": { "file": "Dosya", @@ -117,6 +122,7 @@ }, "export": { "title": "Dışa Aktar", + "subtitle": "Bir biçim ve işlem seçin.", "png": "PNG Olarak Dışa Aktar", "jpeg": "JPEG Olarak Dışa Aktar", "json": "JSON Olarak Dışa Aktar", @@ -126,13 +132,14 @@ "figma": "Figma'ya Aktar", "exportDiagram": "Diyagramı Dışa Aktar", "exportAs": "Farklı Dışa Aktar", + "actionCopy": "Kopyala", "jsonLabel": "JSON Dosyası", "openflowdslLabel": "{{appName}} DSL", "figmaEditable": "Figma'da Düzenlenebilir", "hintTransparent4K": "Şeffaf (4K)", "hintWhiteBg4K": "Beyaz Arka Plan (4K)", "hintDownload": "İndir", - "hintClipboard": "Panoya kopyala", + "hintClipboard": "Kopyala", "exportOrShare": "Export or share this canvas", "svg": "Export as SVG", "hintSvgScalable": "Scalable vector file", @@ -156,7 +163,13 @@ "hintCinematicVideo": "Dark launch-style build", "cinematicGif": "Cinematic Build GIF", "hintCinematicGif": "Dark social-ready loop", - "actionDownload": "Download" + "actionDownload": "Download", + "hintDocument": "Belge", + "hintEditableSvg": "Düzenlenebilir SVG", + "chooseFormat": "Biçim seç", + "speed": "Hız", + "resolution": "Çözünürlük", + "transparentBackground": "Şeffaf arka plan" }, "import": { "title": "İçe Aktar", @@ -179,6 +192,7 @@ "addText": "Metin ekle", "addCommentsHere": "Yorumlarınızı buraya ekleyin.", "newSection": "Yeni Bölüm", + "section": "Bölüm", "text": "Metin", "image": "Resim", "group": "Grup", @@ -264,7 +278,7 @@ "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.", + "description": "Update the name shown on your dashboard and in the editor.", "label": "Flow name", "placeholder": "Enter a flow name", "hint": "Names are local to this browser profile unless you export or sync them elsewhere.", @@ -281,16 +295,21 @@ "settings": { "title": "Ayarlar", "general": "Genel", + "canvas": "Tuval", "shortcuts": "Klavye Kısayolları", "theme": "Tema", "language": "Dil", "selectLanguage": "Dil Seçin", + "languageDescription": "Uygulama genelinde kullanılacak arayüz dilini seçin.", "appearance": "Görünüm", "ai": "Yapay Zeka", "analytics": "Analitik", "about": "Hakkında", "brand": "Marka Ayarları", - "privacy": "Gizlilik" + "privacy": "Gizlilik", + "themeLight": "Light", + "themeDark": "Dark", + "themeSystem": "System" }, "shortcuts": { "title": "Klavye Kısayolları", @@ -317,10 +336,22 @@ "labelTransform": "Etiket Dönüşümü", "prefixOptional": "Önek (isteğe bağlı)", "suffixOptional": "Sonek (isteğe bağlı)", + "findReplace": "Bul ve Değiştir", + "findLabel": "Bul", + "findPlaceholder": "Bulunacak metin", + "replaceLabel": "Şununla değiştir", + "replacePlaceholder": "Yeni metin", + "useRegex": "Düzenli ifade kullan", "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" + "applyToSelectedNodes": "Seçili öğelere uygula", + "imageSettings": "Görsel Ayarları", + "transparency": "Saydamlık", + "rotation": "Döndürme" + }, + "saveStatus": { + "saved": "Kaydedildi" }, "ai": { "generate": "Yapay Zeka ile Oluştur", @@ -360,17 +391,27 @@ "welcome": { "title": "OpenFlowKit", "description": "Geliştirici odaklı tuval üzerinde güzel, yapılandırılmış diyagramlar tasarlayın.", - "getStarted": "Hemen Başla", + "getStarted": "Get Started", "press": "Kısayollar için", "shortcuts": "tuşlara basın", "privacy": "Diyagramlarınız, API anahtarlarınız ve tüm verileriniz yalnızca cihazınızda saklanır.", - "analytics": "Yalnızca anonim sayfa ziyaretleri takip edilir.", + "analytics": "Şu anda analiz verisi toplamıyoruz.", "features": { "beautifulByDefault": "Varsayılan olarak güzel", "automatedLayouts": "Otomatik düzenler ve profesyonel temalar.", "privateSecure": "Özel ve Güvenli", "localFirst": "Yerel öncelikli mimari verilerinizi her zaman güvende tutar." - } + }, + "feature1Title": "Create amazing diagrams", + "feature1Desc": "Design beautiful, enterprise-grade architecture visually.", + "feature2Title": "Use AI", + "feature2Desc": "Generate complete architectures with a single intelligent prompt.", + "feature3Title": "Code to diagram", + "feature3Desc": "Instantly construct stunning visual infrastructure from text.", + "feature4Title": "Export in many formats", + "feature4Desc": "Export into beautiful, fully animated presentation diagrams.", + "analyticsTitle": "Anonymous Analytics", + "analyticsDesc": "We collect diagnostic data. We never read your diagrams or prompts." }, "footer": { "mitLicensed": "MIT Lisanslı" @@ -593,8 +634,12 @@ "algorithm": "Algoritma", "layered": "Katmanlı", "layeredDesc": "Hiyerarşik, akışlar için iyi", + "hierarchical": "Hiyerarşik", + "hierarchicalDesc": "Çoğu akış için en iyi varsayılan seçenek. Okunabilirlik ile kenar kesişimleri arasında iyi denge sağlar.", "tree": "Ağaç", "treeDesc": "Katı ebeveyn-çocuk yapısı", + "treeOptimized": "Ağaç", + "treeOptimizedDesc": "Organizasyon şemaları ve bağımlılık ağaçları için katı ebeveyn-çocuk düzeni.", "force": "Kuvvet", "forceDesc": "Organik, fizik tabanlı", "radial": "Radyal", @@ -608,6 +653,10 @@ "compact": "Sıkışık", "normal": "Normal", "loose": "Geniş", + "orthogonalCompact": "Kompakt", + "orthogonalCompactDesc": "Orta ve yüksek yoğunluklu diyagramlar için soldan sağa sıkı yapı.", + "orthogonalSpacious": "Geniş", + "orthogonalSpaciousDesc": "Sunumlar ve incelemelerde daha fazla netlik için ek boşluk sunar.", "applyLayout": "Düzeni Uygula", "layoutStyle": "Layout Style" }, @@ -642,6 +691,135 @@ "exportModeDeterministic": "Deterministic", "exportModeLegacy": "Legacy", "exportMode": "Export Mode" + }, + "aiStudio": { + "placeholders": { + "create": "Sıfırdan oluşturmak istediğiniz diyagramı açıklayın...", + "selectedEdit": "Seçili {{count}} düğümde neyi değiştirmek istediğinizi açıklayın...", + "edit": "Bir değişiklik tarif edin, örneğin: 'API ile DB arasına Redis ekle'", + "empty": "Sıfırdan oluşturulacak bir diyagramı açıklayın..." + }, + "applyEdit": "Yapay zeka düzenlemesini uygula", + "generateDiagram": "Diyagram oluştur", + "importReady": "İçe aktarma hazır - değişiklikleri gözden geçir", + "addedCount": "{{count}} eklendi", + "updatedCount": "{{count}} güncellendi", + "removedCount": "{{count}} kaldırıldı", + "discard": "Vazgeç", + "applyToCanvas": "Tuvale uygula", + "emptyDescription": "İstediğiniz diyagramı tarif edin, {{appName}} ilk taslağı sizin için oluştursun.", + "editDescription": "İstediğiniz değişiklikleri tarif edin, {{appName}} diyagramı sizin için güncellesin.", + "addKeyCta": "Başlamak için yapay zeka anahtarı ekleyin", + "retrying": "Yeniden deneniyor ({{retryCount}} / 3)...", + "generating": "Oluşturuluyor...", + "editCurrent": "Mevcut olanı düzenle", + "editCurrentHint": "Mevcut tuvalinizi değiştirin", + "createNew": "Yeni oluştur", + "createNewHint": "Yeni bir diyagramla sıfırdan başla", + "editingSelectedNodes": "{{count}} seçili düğüm düzenleniyor", + "uploadPreviewAlt": "Yükleme önizlemesi", + "attachImage": "Görsel ekle", + "cancelGeneration": "Oluşturmayı iptal et" + }, + "figmaImport": { + "invalidUrl": "Geçersiz Figma URL'si. figma.com/file/... veya figma.com/design/... bağlantısı kullanın.", + "tokenRequired": "Kişisel erişim anahtarı gerekli.", + "unknownError": "Bilinmeyen hata", + "title": "Figma'dan içe aktar", + "fileUrlLabel": "Figma dosya URL'si", + "fileUrlPlaceholder": "https://www.figma.com/design/...", + "tokenLabel": "Kişisel erişim anahtarı", + "tokenHelpLink": "nasıl alınır", + "tokenPlaceholder": "figd_...", + "tokenPrivacy": "Anahtar yalnızca tarayıcınızda kullanılır ve asla sunucularımıza gönderilmez.", + "foundSummary": "\"{{name}}\" içinden {{colors}} renk ve {{fonts}} metin stili bulundu", + "colors": "Renkler", + "moreCount": "+{{count}} tane daha", + "fonts": "Yazı tipleri", + "fetchingStyles": "Stiller alınıyor...", + "fetchStyles": "Stilleri getir", + "applyToDesignSystem": "Tasarım sistemine uygula" + }, + "import": { + "placeholders": { + "sql": "CREATE TABLE ifadelerini buraya yapıştırın...", + "infra": "Terraform state JSON, Kubernetes YAML, Docker Compose veya Terraform HCL içeriğini buraya yapıştırın...", + "openapi": "OpenAPI / Swagger YAML ya da JSON içeriğinizi buraya yapıştırın...", + "code": "Kaynak kodunuzu buraya yapıştırın..." + }, + "infraFormats": { + "terraformState": "Terraform State (.tfstate)", + "kubernetes": "Kubernetes YAML", + "dockerCompose": "Docker Compose", + "terraformHcl": "Terraform HCL (AI)" + }, + "errors": { + "inputTooLarge": "Girdi boyutu {{size}} - yapıştırma için en fazla {{max}} olabilir.", + "fileTooLarge": "Dosya boyutu {{size}} - en fazla {{max}} olabilir.", + "terraformHclRequiresAi": "Terraform HCL için yapay zeka analizi gerekir. Yapay zeka düğmesini kullanın.", + "nativeNotAvailable": "Bu tür için yerel ayrıştırma kullanılamıyor.", + "parsingFailed": "Ayrıştırma başarısız oldu.", + "aiUnavailable": "Bu tür için yapay zeka analizi kullanılamıyor.", + "aiFailed": "Yapay zeka üretimi başarısız oldu.", + "inputExceedsLimit": "Girdi {{max}} sınırını aşıyor. İçeriği kısaltın veya daha küçük bir dosya kullanın." + }, + "categories": { + "sql": "SQL", + "infra": "Infra", + "openapi": "OpenAPI", + "code": "Code", + "codebase": "Depo" + }, + "title": "Veriden içe aktar", + "description": "Kod, altyapı, SQL veya API özelliklerini diyagramınıza içe aktarın.", + "uploadFile": "Dosya yükle", + "parsing": "Ayrıştırılıyor...", + "parse": "Ayrıştır", + "analyzing": "Analiz ediliyor...", + "aiActions": { + "generateErd": "ER diyagramı oluştur (YZ)", + "generateDiagram": "Diyagram oluştur (YZ)", + "generateSequence": "Sekans oluştur", + "analyzeArchitecture": "Mimarini analiz et", + "analyzeProject": "Projeyi analiz et" + }, + "previewDsl": "DSL önizlemesi", + "appliedToCanvas": "Tuvale uygulandı", + "applyToCanvas": "Tuvale uygula" + }, + "layers": { + "title": "Katmanlar", + "newLayerName": "Yeni katman adı", + "add": "Ekle", + "active": "Aktif", + "visible": "Görünür", + "hidden": "Gizli", + "locked": "Kilitli", + "unlocked": "Kilitsiz", + "moveSelectedHere": "Seçileni buraya taşı", + "selectLayer": "Katmanı seç", + "up": "Yukarı", + "down": "Aşağı", + "sections": "Bölümler", + "previousSection": "Önceki bölüm", + "nextSection": "Sonraki bölüm", + "noSections": "Henüz bölüm yok.", + "sectionFallbackName": "Bölüm", + "order": "Sıra {{order}}", + "focus": "Odaklan", + "show": "Göster", + "hide": "Gizle", + "unlock": "Kilidi aç", + "lock": "Kilitle", + "footerHint": "Katman kilidi sürüklemeyi devre dışı bırakır. Gizli katmanlar tuvalde çizilmez." + }, + "root": { + "searchAria": "Komut çubuğu eylemlerini ara", + "searchPlaceholder": "Eylemler, {{appName}}, kod veya tuval araçlarını ara...", + "resultsAria": "Komut arama sonuçları", + "quickActionsAria": "Komut hızlı eylemleri", + "results": "Sonuçlar", + "noMatchingCommands": "\"{{query}}\" için eşleşen komut yok" } }, "settingsModal": { @@ -663,8 +841,8 @@ "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", + "alignmentGuides": "Hizalama kılavuzları", + "alignmentGuidesDesc": "Düğümleri sürüklerken akıllı kılavuz çizgilerini göster", "routingProfile": "Routing Profile", "routingProfileStandard": "Standard", "routingProfileInfrastructure": "Infrastructure", @@ -997,26 +1175,15 @@ "showBetaBadgeHint": "Logo yanında BETA çipini göster" }, "shortcutsHint": "İstediğiniz zaman ? tuşuna basarak bunları görüntüleyebilirsiniz.", - "privacy": { - "manifesto": "Gizlilik Manifestomuz", - "manifestoText": "Tasarım gereği gizlilik ve kullanıcı özerkliğine inanıyoruz. E-postanızı toplamıyoruz, giriş sistemimiz yok ve verilerinizi sunucularımızda saklamıyoruz.", - "localFirst": "Yerel Öncelikli Depolama", - "noAccounts": "Kullanıcı Hesabı Yok", - "ownData": "Veriniz Size Ait", - "anonymous": "Yalnızca Anonim Kullanım", - "telemetry": "Telemetri ve Geri Bildirim", - "anonymousStats": "Anonim İstatistikler", - "anonymousStatsDesc": "Aracı geliştirmek için yalnızca ziyaretleri ve sınırlı anonim özellik kullanımını (dışa aktarma gibi) takip ediyoruz. Adlarınızı, IP adreslerinizi, girişlerinizi veya diyagram içeriğinizi takip etmiyoruz.", - "quote": "Her hareketinizi takip etmek yerine, neyin işe yaradığını bize söylemenize güveniyoruz.", - "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" + "closeDialog": "Close settings dialog", + "analytics": { + "enableTitle": "Anonim başlatma analitiği", + "enableDescription": "Anonim temel kullanım verilerini paylaş (isteğe bağlı)" + } }, "customNodes": { "browserContent": "Tarayıcı İçeriği", @@ -1036,11 +1203,13 @@ "addItem": "Öğe Ekle", "addToCanvas": "Tuvale Ekle", "shapes": "Şekiller", + "diagrams": "Diyagramlar", "assets": "Varlıklar", "node": "Şekil", "stickyNote": "Yapışkan Not", "section": "Bölüm", "text": "Metin", + "other": "Diğer", "wireframes": "Tel Çerçeveler", "image": "Resim", "autoLayout": "Otomatik Düzen", @@ -1109,65 +1278,109 @@ "nodes": "{{count}} düğüm", "edges": "{{count}} bağlantı", "close": "Close snapshots panel", - "namedVersions": "Named Versions", - "noNamedSnapshots": "No named versions yet.", - "autosavedVersions": "Autosaved Checkpoints", - "noAutoSnapshots": "No autosaved checkpoints yet." + "namedVersions": "Adlandırılmış sürümler", + "noNamedSnapshots": "Henüz adlandırılmış sürüm yok.", + "autosavedVersions": "Otomatik kaydedilen kontrol noktaları", + "noAutoSnapshots": "Henüz otomatik kaydedilen kontrol noktası yok." }, "templatesPanel": { "title": "Akış Şablonları", "searchPlaceholder": "Şablonlarda ara...", "noTemplates": "Şablon bulunamadı." }, + "homeTemplates": { + "description": "Hazır bir akıştan başlayın ve düzenleyicide özelleştirin.", + "openPicker": "Şablon Seçiciyi Aç", + "featured": "Öne Çıkan Şablonlar", + "count": "{{count}} şablon", + "nodes": "{{count}} düğüm", + "edges": "{{count}} bağlantı", + "starter": "Başlangıç", + "starterTemplate": "Başlangıç şablonu", + "bestFirstEdits": "En iyi ilk düzenlemeler", + "perfectFor": "Şunun için ideal", + "useTemplate": "Şablonu Kullan", + "closePreview": "Şablon önizlemesini kapat" + }, "propertiesPanel": { "stickyNote": "Yapışkan Not", "nodeSettings": "Şekil Ayarları", - "connection": "Bağlantı" + "connection": "Bağlantı", + "noSelection": "Hiçbir şey seçili değil", + "selectHint": "Özelliklerini düzenlemek için bir düğüme veya kenara tıklayın" + }, + "properties": { + "title": "Properties", + "shape": "Shape", + "color": "Color", + "icon": "Icon", + "rotation": "Rotation", + "transparency": "Transparency", + "imageSettings": "Image Settings", + "bulkShape": "Bulk Shape", + "bulkColor": "Bulk Color", + "bulkIcon": "Bulk Icon", + "labelTransform": "Label Transform", + "findReplace": "Find & Replace", + "findLabel": "Find", + "findPlaceholder": "Find text", + "replaceLabel": "Replace", + "replacePlaceholder": "Replace with", + "prefixOptional": "Prefix (optional)", + "suffixOptional": "Suffix (optional)", + "useRegex": "Use Regex", + "applyToSelectedNodes": "Apply to selected nodes", + "selectFieldToApply": "Select a field to apply", + "previewSummary": "Preview summary", + "selectionSummary": "Seçim özeti" }, "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" + "closeTab": "Sayfayi Kapat", + "newFlowTab": "Yeni Sayfa" }, "share": { "close": "Close", - "title": "Share Design", + "title": "Tasarımı paylaş", "betaBadge": "Beta", - "description": "Invite collaborators to view and edit this flow with you in real-time.", + "description": "İş birlikçileri bu akışı sizinle birlikte gerçek zamanlı görüntülemeye ve düzenlemeye davet edin.", "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", + "copyLink": "Bağlantıyı kopyala", + "footerNote": "Bu odayı paylaşmadığınız sürece diyagramınız yerel kalır. Kopyalama engellenirse yukarıdaki bağlantıyı manuel olarak kopyalayın.", + "closeDialog": "Paylaşım iletişim kutusunu kapat", "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" + "realtime": "Gerçek zamanlı eşler arası senkronizasyon", + "waiting": "Gerçek zamanlı senkronizasyona bağlanılıyor", + "fallback": "Yalnızca yerel mod" }, "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.", + "copyFailed": "Paylaşım bağlantısı kopyalanamadı.", + "linkCopied": "İş birliği bağlantısı kopyalandı.", "copyManual": "Clipboard access is blocked. Copy the link manually from the share dialog." } }, "connectionPanel": { - "architecture": "Architecture", + "architecture": "Mimari", "label": "Label", "messagePlaceholder": "Mesaj", "route": "Route", "appearance": "Appearance", - "condition": "Condition", - "deleteConnection": "Delete Connection" + "condition": "Koşul", + "deleteConnection": "Bağlantıyı sil" + }, + "sidebar": { + "close": "Kenar çubuğunu kapat" } } diff --git a/public/locales/zh/translation.json b/public/locales/zh/translation.json index b69f26b9..2dd16791 100644 --- a/public/locales/zh/translation.json +++ b/public/locales/zh/translation.json @@ -52,6 +52,7 @@ "bringToFront": "移至顶层", "sendToBack": "移至底层", "reverseDirection": "反转方向", + "editLabel": "编辑标签", "deleteConnection": "删除连接", "itemsSelected": "已选 {{count}} 项", "align": "对齐", @@ -65,7 +66,7 @@ "distributeHorizontally": "水平分布", "distributeVertically": "垂直分布", "group": "分组", - "upload": "Upload", + "upload": "上传", "rename": "重命名" }, "nav": { @@ -83,11 +84,15 @@ "canvasSettings": "画布设置", "wideLogo": "您的宽幅标志", "uploadWideLogo": "在品牌设置中上传宽幅标志", + "saveStatus": "本地保存状态", + "autoSaved": "已于 {{time}} 保存在本地。", + "privacyShort": "您的图表保留在此设备上，不会发送到我们的服务器。", "beta": "测试版", "versionHistory": "版本历史", "loadJSON": "加载 JSON", "playbackMode": "回放模式", - "privacyMessage": "您的图表只留在您这里，不会发送到我们的服务器。" + "privacyMessage": "您的图表只留在您这里，不会发送到我们的服务器。", + "templates": "模板" }, "menu": { "file": "文件", @@ -110,6 +115,7 @@ }, "export": { "title": "导出", + "subtitle": "选择一种格式和操作。", "png": "导出为 PNG", "jpeg": "导出为 JPEG", "json": "导出为 JSON", @@ -122,10 +128,11 @@ "jsonLabel": "JSON File", "hintDownload": "Download", "openflowdslLabel": "{{appName}} DSL", - "hintClipboard": "Copy to clipboard", + "hintClipboard": "复制", "figmaEditable": "Figma Editable", "exportDiagram": "Export Diagram", "exportAs": "Export As", + "actionCopy": "复制", "exportOrShare": "导出或分享此画布", "svg": "导出为 SVG", "hintSvgScalable": "可缩放矢量文件", @@ -149,7 +156,13 @@ "hintCinematicVideo": "Dark launch-style build", "cinematicGif": "Cinematic Build GIF", "hintCinematicGif": "Dark social-ready loop", - "actionDownload": "Download" + "actionDownload": "Download", + "hintDocument": "文档", + "hintEditableSvg": "可编辑 SVG", + "chooseFormat": "选择格式", + "speed": "速度", + "resolution": "分辨率", + "transparentBackground": "透明背景" }, "import": { "title": "导入", @@ -255,16 +268,21 @@ "settings": { "title": "设置", "general": "通用", + "canvas": "画布", "shortcuts": "键盘快捷键", "theme": "主题", "language": "语言", "selectLanguage": "选择语言", + "languageDescription": "选择整个应用使用的界面语言。", "appearance": "外观", "ai": "AI 设置", "analytics": "分析", "about": "关于", "brand": "品牌设置", - "privacy": "隐私" + "privacy": "隐私", + "themeLight": "Light", + "themeDark": "Dark", + "themeSystem": "System" }, "shortcuts": { "title": "键盘快捷键", @@ -291,10 +309,22 @@ "labelTransform": "标签变换", "prefixOptional": "前缀（可选）", "suffixOptional": "后缀（可选）", + "findReplace": "查找和替换", + "findLabel": "查找", + "findPlaceholder": "要查找的文本", + "replaceLabel": "替换为", + "replacePlaceholder": "替换文本", + "useRegex": "使用正则表达式", "previewSummary": "预览摘要", "bulkApplySummary": "将更新已选择的 {{count}} 个项目", "selectFieldToApply": "请至少选择一个要应用的字段。", - "applyToSelectedNodes": "应用到所选项目" + "applyToSelectedNodes": "应用到所选项目", + "imageSettings": "图像设置", + "transparency": "透明度", + "rotation": "旋转" + }, + "saveStatus": { + "saved": "已保存" }, "ai": { "generate": "使用 AI 生成", @@ -331,13 +361,24 @@ "press": "按下", "shortcuts": "查看快捷键", "privacy": "您的图表、API 密钥和数据均保存在本地设备上。", - "analytics": "我们只统计匿名访问量。", + "analytics": "目前我们不收集分析数据。", "features": { "beautifulByDefault": "默认美观", "automatedLayouts": "自动布局和专业主题。", "privateSecure": "私密安全", "localFirst": "本地优先架构确保您的数据安全。" - } + }, + "feature1Title": "Create amazing diagrams", + "feature1Desc": "Design beautiful, enterprise-grade architecture visually.", + "feature2Title": "Use AI", + "feature2Desc": "Generate complete architectures with a single intelligent prompt.", + "feature3Title": "Code to diagram", + "feature3Desc": "Instantly construct stunning visual infrastructure from text.", + "feature4Title": "Export in many formats", + "feature4Desc": "Export into beautiful, fully animated presentation diagrams.", + "analyticsTitle": "Anonymous Analytics", + "analyticsDesc": "We collect diagnostic data. We never read your diagrams or prompts.", + "getStarted": "Get Started" }, "footer": { "mitLicensed": "MIT 开源协议" @@ -560,8 +601,12 @@ "algorithm": "算法", "layered": "分层", "layeredDesc": "层级结构", + "hierarchical": "层级式", + "hierarchicalDesc": "大多数流程图的最佳默认选项。在可读性和连线交叉之间取得良好平衡。", "tree": "树状", "treeDesc": "严格父子结构", + "treeOptimized": "树状", + "treeOptimizedDesc": "适用于组织结构图和依赖树的严格父子布局。", "force": "力导向", "forceDesc": "有机物理结构", "radial": "放射状", @@ -575,6 +620,10 @@ "compact": "紧凑", "normal": "正常", "loose": "宽松", + "orthogonalCompact": "紧凑", + "orthogonalCompactDesc": "适合中高密度图表的紧凑型从左到右结构。", + "orthogonalSpacious": "宽松", + "orthogonalSpaciousDesc": "为演示和评审提供更多留白，提升清晰度。", "applyLayout": "应用布局", "layoutStyle": "布局样式" }, @@ -609,6 +658,135 @@ "exportModeDeterministic": "确定性", "exportModeLegacy": "旧版", "exportMode": "导出模式" + }, + "aiStudio": { + "placeholders": { + "create": "请描述你想从零开始创建的图表...", + "selectedEdit": "请描述你想对这 {{count}} 个已选节点做哪些修改...", + "edit": "请描述一个修改，例如“在 API 和数据库之间添加 Redis”", + "empty": "请描述一个要从零生成的图表..." + }, + "applyEdit": "应用 AI 编辑", + "generateDiagram": "生成图表", + "importReady": "导入已就绪 - 请检查更改", + "addedCount": "已添加 {{count}} 项", + "updatedCount": "已更新 {{count}} 项", + "removedCount": "已删除 {{count}} 项", + "discard": "丢弃", + "applyToCanvas": "应用到画布", + "emptyDescription": "描述你想要的图表，{{appName}} 会先为你起草第一版。", + "editDescription": "描述你想要的改动，{{appName}} 会为你更新图表。", + "addKeyCta": "添加 AI 密钥以开始生成", + "retrying": "正在重试（第 {{retryCount}} / 3 次）...", + "generating": "生成中...", + "editCurrent": "编辑当前内容", + "editCurrentHint": "修改你当前的画布", + "createNew": "新建", + "createNewHint": "从一个新图表重新开始", + "editingSelectedNodes": "正在编辑 {{count}} 个已选节点", + "uploadPreviewAlt": "上传预览", + "attachImage": "附加图片", + "cancelGeneration": "取消生成" + }, + "figmaImport": { + "invalidUrl": "无效的 Figma URL。请使用 figma.com/file/... 或 figma.com/design/... 链接。", + "tokenRequired": "需要个人访问令牌。", + "unknownError": "未知错误", + "title": "从 Figma 导入", + "fileUrlLabel": "Figma 文件 URL", + "fileUrlPlaceholder": "https://www.figma.com/design/...", + "tokenLabel": "个人访问令牌", + "tokenHelpLink": "如何获取", + "tokenPlaceholder": "figd_...", + "tokenPrivacy": "该令牌仅在你的浏览器中使用，绝不会发送到我们的服务器。", + "foundSummary": "已从“{{name}}”中找到 {{colors}} 种颜色和 {{fonts}} 个文本样式", + "colors": "颜色", + "moreCount": "另外还有 +{{count}} 项", + "fonts": "字体", + "fetchingStyles": "正在获取样式...", + "fetchStyles": "获取样式", + "applyToDesignSystem": "应用到设计系统" + }, + "import": { + "placeholders": { + "sql": "请在此粘贴 CREATE TABLE 语句...", + "infra": "请在此粘贴 Terraform state JSON、Kubernetes YAML、Docker Compose 或 Terraform HCL...", + "openapi": "请在此粘贴你的 OpenAPI / Swagger YAML 或 JSON...", + "code": "请在此粘贴你的源代码..." + }, + "infraFormats": { + "terraformState": "Terraform State (.tfstate)", + "kubernetes": "Kubernetes YAML", + "dockerCompose": "Docker Compose", + "terraformHcl": "Terraform HCL (AI)" + }, + "errors": { + "inputTooLarge": "输入大小为 {{size}}，粘贴上限为 {{max}}。", + "fileTooLarge": "文件大小为 {{size}}，上限为 {{max}}。", + "terraformHclRequiresAi": "Terraform HCL 需要 AI 分析。请使用 AI 按钮。", + "nativeNotAvailable": "此类型不支持原生解析。", + "parsingFailed": "解析失败。", + "aiUnavailable": "此类型不支持 AI 分析。", + "aiFailed": "AI 生成失败。", + "inputExceedsLimit": "输入超过了 {{max}} 的限制。请精简内容或使用更小的文件。" + }, + "categories": { + "sql": "SQL", + "infra": "Infra", + "openapi": "OpenAPI", + "code": "Code", + "codebase": "仓库" + }, + "title": "从数据导入", + "description": "将代码、基础设施、SQL 或 API 规格导入到你的图表中。", + "uploadFile": "上传文件", + "parsing": "解析中...", + "parse": "解析", + "analyzing": "分析中...", + "aiActions": { + "generateErd": "生成 ERD（AI）", + "generateDiagram": "生成图表（AI）", + "generateSequence": "生成时序图", + "analyzeArchitecture": "分析架构", + "analyzeProject": "分析项目" + }, + "previewDsl": "预览 DSL", + "appliedToCanvas": "已应用到画布", + "applyToCanvas": "应用到画布" + }, + "layers": { + "title": "图层", + "newLayerName": "新图层名称", + "add": "添加", + "active": "当前", + "visible": "可见", + "hidden": "隐藏", + "locked": "已锁定", + "unlocked": "未锁定", + "moveSelectedHere": "将所选内容移到这里", + "selectLayer": "选择图层", + "up": "上移", + "down": "下移", + "sections": "分区", + "previousSection": "上一个分区", + "nextSection": "下一个分区", + "noSections": "还没有分区。", + "sectionFallbackName": "分区", + "order": "顺序 {{order}}", + "focus": "聚焦", + "show": "显示", + "hide": "隐藏", + "unlock": "解锁", + "lock": "锁定", + "footerHint": "锁定图层后将无法拖动。隐藏图层不会参与画布渲染。" + }, + "root": { + "searchAria": "搜索命令栏操作", + "searchPlaceholder": "搜索操作、{{appName}}、代码或画布工具...", + "resultsAria": "命令搜索结果", + "quickActionsAria": "命令快捷操作", + "results": "结果", + "noMatchingCommands": "没有与“{{query}}”匹配的命令" } }, "settingsModal": { @@ -630,8 +808,8 @@ "miniMapDesc": "右下角显示小地图", "architectureStrictMode": "架构严格模式", "architectureStrictModeDesc": "当架构诊断包含恢复/校验问题时，阻止 Mermaid 导入", - "alignmentGuides": "Alignment Guides", - "alignmentGuidesDesc": "Show smart guide lines while dragging nodes", + "alignmentGuides": "对齐参考线", + "alignmentGuidesDesc": "拖动节点时显示智能参考线", "routingProfile": "路由配置", "routingProfileStandard": "标准", "routingProfileInfrastructure": "基础设施", @@ -688,13 +866,13 @@ "hint": "OpenAI 兼容" } }, - "customModelHint": "Enter the exact model ID for your endpoint", - "howToGetKey": "How to get your API key", - "pasteKeyStep": "Paste it in the field above — never shared with us", - "customEndpointTitle": "What is a custom endpoint?", + "customModelHint": "输入此端点对应的准确模型 ID", + "howToGetKey": "如何获取 API 密钥", + "pasteKeyStep": "将其粘贴到上方字段中，我们绝不会与我们共享", + "customEndpointTitle": "什么是自定义端点？", "privacyTitle": "Privacy & Encryption", - "customEndpointText": "Any <1>OpenAI-compatible API endpoint — local or remote. Great for:", - "customEndpointMustSupport": "Must support <1>POST /chat/completions (OpenAI format)", + "customEndpointText": "任何 <1>兼容 OpenAI 的 API 端点，本地或远程均可。非常适合：", + "customEndpointMustSupport": "必须支持 <1>POST /chat/completions（OpenAI 格式）", "advancedEndpointOverride": "高级基础 URL 覆盖", "baseUrlHint": "留空以使用提供商默认端点。可用于您自己的代理/worker URL。", "resetEndpoint": "重置为默认值", @@ -722,15 +900,15 @@ "inactive": "未激活", "setActive": "设为当前使用", "resetToDefaults": "重置为默认", - "tabIdentity": "Identity", - "tabColors": "Colors", + "tabIdentity": "标识", + "tabColors": "颜色", "tabType": "Type", "tabUI": "UI & Shape", - "appName": "App Name", + "appName": "应用名称", "logo": "Logo", "favicon": "Favicon", - "logoStyle": "Logo Style", - "fontFamily": "Font Family", + "logoStyle": "Logo 样式", + "fontFamily": "字体系列", "googleFontsHint": "Dynamically loaded from Google Fonts", "cornerRadius": "Corner Radius", "glassmorphism": "Glassmorphism", @@ -740,26 +918,15 @@ "showBetaBadgeHint": "Display the BETA chip next to logo" }, "shortcutsHint": "你也可以随时按下 ? 键来查看这些快捷键。", - "privacy": { - "manifesto": "我们的隐私宣言", - "manifestoText": "我们坚信基于设计的隐私保护。", - "localFirst": "本地优先存储", - "noAccounts": "没有用户账户", - "ownData": "你的数据你做主", - "anonymous": "仅限匿名使用", - "telemetry": "遥测与反馈", - "anonymousStats": "匿名统计", - "anonymousStatsDesc": "我们只跟踪访问量。", - "quote": "我们依靠您来告诉我们什么有效。", - "helpImprove": "帮助我们改进", - "shareFeedback": "分享反馈", - "shareFeedbackDesc": "提供反馈、报告错误" - }, "settings": "设置", "canvasSettings": "画布设置", "description": "配置画布偏好设置和键盘快捷键。", "close": "关闭设置", - "closeDialog": "关闭设置对话框" + "closeDialog": "关闭设置对话框", + "analytics": { + "enableTitle": "匿名启动分析", + "enableDescription": "共享匿名的基础使用数据（可选）" + } }, "customNodes": { "browserContent": "浏览器内容", @@ -779,11 +946,13 @@ "addItem": "添加元素", "addToCanvas": "添加到画布", "shapes": "形状", + "diagrams": "图表", "assets": "资源", "node": "形状", "stickyNote": "便利贴", "section": "分区", "text": "文本", + "other": "其他", "wireframes": "线框图", "image": "图片", "autoLayout": "自动布局", @@ -852,20 +1021,61 @@ "nodes": "{{count}} 个节点", "edges": "{{count}} 条边", "close": "关闭快照面板", - "namedVersions": "Named Versions", - "noNamedSnapshots": "No named versions yet.", - "autosavedVersions": "Autosaved Checkpoints", - "noAutoSnapshots": "No autosaved checkpoints yet." + "namedVersions": "命名版本", + "noNamedSnapshots": "还没有命名版本。", + "autosavedVersions": "自动保存检查点", + "noAutoSnapshots": "还没有自动保存检查点。" }, "templatesPanel": { "title": "流程模板", "searchPlaceholder": "搜索模板...", "noTemplates": "未找到模板。" }, + "homeTemplates": { + "description": "从现成流程开始，并在编辑器中进行自定义。", + "openPicker": "打开模板选择器", + "featured": "精选模板", + "count": "{{count}} 个模板", + "nodes": "{{count}} 个节点", + "edges": "{{count}} 条连接", + "starter": "入门", + "starterTemplate": "入门模板", + "bestFirstEdits": "建议优先修改", + "perfectFor": "适合用于", + "useTemplate": "使用模板", + "closePreview": "关闭模板预览" + }, "propertiesPanel": { "stickyNote": "便利贴", "nodeSettings": "形状设置", - "connection": "连接" + "connection": "连接", + "noSelection": "未选择任何内容", + "selectHint": "点击节点或连线以编辑其属性" + }, + "properties": { + "title": "Properties", + "shape": "Shape", + "color": "Color", + "icon": "Icon", + "rotation": "Rotation", + "transparency": "Transparency", + "imageSettings": "Image Settings", + "bulkShape": "Bulk Shape", + "bulkColor": "Bulk Color", + "bulkIcon": "Bulk Icon", + "labelTransform": "Label Transform", + "findReplace": "Find & Replace", + "findLabel": "Find", + "findPlaceholder": "Find text", + "replaceLabel": "Replace", + "replacePlaceholder": "Replace with", + "prefixOptional": "Prefix (optional)", + "suffixOptional": "Suffix (optional)", + "useRegex": "Use Regex", + "applyToSelectedNodes": "Apply to selected nodes", + "selectFieldToApply": "Select a field to apply", + "previewSummary": "Preview summary", + "selectionSummary": "选择摘要" }, "flowCanvas": { "strictModePasteBlocked": "架构严格模式已阻止 Mermaid 粘贴。请打开代码视图，修复诊断后重试。" @@ -875,61 +1085,65 @@ "newFlowTab": "新建流程标签页" }, "nodes": { - "note": "Note", - "database": "Database", - "inputOutput": "Input / Output", - "newNode": "New Node", - "branch": "Branch", - "processStep": "Process Step", + "note": "便签", + "database": "数据库", + "inputOutput": "输入 / 输出", + "newNode": "新节点", + "branch": "分支", + "processStep": "流程步骤", "addText": "添加文本", "group": "Group", "items": "items", - "addCommentsHere": "Add your comments here.", - "newSection": "New Section", + "addCommentsHere": "在这里添加你的评论。", + "newSection": "新分区", + "section": "部分", "text": "Text", "image": "Image", "mindmap": "主题" }, "actions": { - "clearCanvasConfirm": "Are you sure you want to clear the canvas?" + "clearCanvasConfirm": "确定要清空画布吗？" }, "share": { "close": "Close", - "title": "Share Design", + "title": "分享设计", "betaBadge": "测试版", - "description": "Invite collaborators to view and edit this flow with you in real-time.", + "description": "邀请协作者与你一起实时查看和编辑此流程。", "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", + "copyLink": "复制链接", + "footerNote": "除非你分享这个房间，否则图表会一直保存在本地。如果复制被阻止，请手动复制上方链接。", + "closeDialog": "关闭分享对话框", "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" + "realtime": "实时点对点同步", + "waiting": "正在连接实时同步", + "fallback": "仅本地模式" }, "openDialog": "Share dialog", "toast": { "fallbackMode": "实时同步不可用。将继续以仅本地模式运行。", "reconnected": "实时协作已恢复。", - "copyFailed": "Unable to copy share link.", - "linkCopied": "Collaboration link copied.", + "copyFailed": "无法复制分享链接。", + "linkCopied": "协作链接已复制。", "copyManual": "剪贴板访问被阻止。请从分享对话框中手动复制链接。" } }, "connectionPanel": { - "architecture": "Architecture", + "architecture": "架构", "label": "Label", "messagePlaceholder": "消息", "route": "路由", "appearance": "外观", - "condition": "Condition", - "deleteConnection": "Delete Connection" + "condition": "条件", + "deleteConnection": "删除连接" + }, + "sidebar": { + "close": "关闭侧边栏" } } diff --git a/scripts/shape-pack/import-developer-icons.mjs b/scripts/shape-pack/import-developer-icons.mjs new file mode 100644 index 00000000..29b8e533 --- /dev/null +++ b/scripts/shape-pack/import-developer-icons.mjs @@ -0,0 +1,119 @@ +import fs from 'node:fs/promises'; +import path from 'node:path'; + +function slugify(value) { + return value + .trim() + .toLowerCase() + .replace(/[^a-z0-9]+/g, '-') + .replace(/^-+|-+$/g, '') + .replace(/-+/g, '-'); +} + +const CATEGORY_RULES = [ + { + category: 'Languages', + patterns: [ + 'javascript', 'typescript', 'python', 'java', 'kotlin', 'swift', 'php', 'ruby', 'rust', + 'scala', 'haskell', 'elixir', 'erlang', 'nim', 'dlang', 'solidity', 'bash', 'powershell', + 'json', 'markdown', + ], + }, + { + category: 'Frontend', + patterns: [ + 'react', 'nextjs', 'vue', 'nuxt', 'angular', 'svelte', 'astro', 'vitejs', 'webpack', + 'tailwind', 'sass', 'jquery', 'chakraui', 'materialui', 'shadcnui', 'headlessui', + 'remix', 'gatsby', 'threejs', 'framer', + ], + }, + { + category: 'Backend', + patterns: [ + 'nodejs', 'deno', 'bunjs', 'spring', 'symfony', 'cakephp', 'doctrine', 'nestjs', + 'graphql', 'trpc', 'convex', 'grafbase', 'i18next', 'zod', 'avajs', + ], + }, + { + category: 'Database', + patterns: [ + 'postgres', 'mysql', 'mariadb', 'mongodb', 'redis', 'sqlite', 'supabase', 'firebase', + 'clickhouse', 'presto', 'microsoft-sql-server', 'oracle', 'kibana', + ], + }, + { + category: 'Design', + patterns: ['figma', 'sketch', 'indesign', 'photoshop', 'illustrator', 'miro'], + }, + { + category: 'Native-App', + patterns: ['android', 'flutter', 'react-native', 'swiftui', 'xcode'], + }, + { + category: 'DevOps-AI-ML', + patterns: [ + 'aws', 'ec2', 'google-cloud', 'cloudflare', 'docker', 'kubernetes', 'pulumi', 'netlify', + 'railway', 'heroku', 'vercel', 'git', 'github', 'gitlab', 'bitbucket', 'linux', + 'tensorflow', 'openai', 'hugging-face', 'copilot', 'codefresh', 'k6', 'cypress', + 'vitest', 'nx', 'npm', 'pnpm', 'developer-icons', 'elastic', + ], + }, + { + category: 'Productivity', + patterns: ['notion', 'lokalise', 'gmail', 'outlook', 'onedrive'], + }, + { + category: 'Media', + patterns: ['youtube', 'instagram', 'telegram', 'mastodon', 'threads', 'bluesky', 'vk', 'x-', 'stream', 'cloudinary', 'hotjar'], + }, + { + category: 'Companies', + patterns: ['meta', 'microsoft', 'mozilla'], + }, + { + category: 'Browser', + patterns: ['chrome', 'firefox', 'safari', 'edge', 'vivaldi'], + }, +]; + +function inferCategory(fileName) { + const normalized = slugify(fileName); + + for (const rule of CATEGORY_RULES) { + if (rule.patterns.some((pattern) => normalized.includes(pattern))) { + return rule.category; + } + } + + return 'Others'; +} + +async function ensureDir(dirPath) { + await fs.mkdir(dirPath, { recursive: true }); +} + +const [, , sourceRootArg, outputRootArg] = process.argv; + +if (!sourceRootArg || !outputRootArg) { + console.error('Usage: node scripts/shape-pack/import-developer-icons.mjs '); + process.exit(1); +} + +const sourceRoot = path.resolve(sourceRootArg); +const outputRoot = path.resolve(outputRootArg); +const entries = await fs.readdir(sourceRoot, { withFileTypes: true }); +const iconEntries = entries.filter((entry) => entry.isFile() && entry.name.toLowerCase().endsWith('.svg')); + +for (const entry of iconEntries) { + const fileName = entry.name.replace(/\.svg$/i, ''); + const category = inferCategory(fileName); + const categoryDir = path.join(outputRoot, category); + + await ensureDir(categoryDir); + await fs.copyFile( + path.join(sourceRoot, entry.name), + path.join(categoryDir, `${entry.name}`), + ); +} + +console.log(`Imported ${iconEntries.length} developer icon SVGs into ${outputRoot}`); diff --git a/src/App.test.tsx b/src/App.test.tsx new file mode 100644 index 00000000..fd821880 --- /dev/null +++ b/src/App.test.tsx @@ -0,0 +1,106 @@ +import { fireEvent, render, screen, waitFor } from '@testing-library/react'; +import { beforeEach, describe, expect, it, vi } from 'vitest'; +import App from './App'; +import { useFlowStore } from './store'; + +vi.mock('./components/HomePage', () => ({ + HomePage: ({ + onLaunch, + onLaunchWithTemplates, + onImportJSON, + }: { + onLaunch: () => void; + onLaunchWithTemplates: () => void; + onImportJSON: () => void; + }) => ( +
+ + + +
+ ), +})); + +vi.mock('./components/FlowEditor', () => ({ + FlowEditor: () =>
Editor
, +})); + +vi.mock('@/components/app/MobileWorkspaceGate', () => ({ + MobileWorkspaceGate: ({ children }: { children: React.ReactNode }) => <>{children}, +})); + +vi.mock('@/components/app/DocsSiteRedirect', () => ({ + DocsSiteRedirect: () =>
, +})); + +function resetEmptyWorkspace(): void { + useFlowStore.setState({ + ...useFlowStore.getInitialState(), + documents: [], + activeDocumentId: '', + tabs: [], + activeTabId: '', + nodes: [], + edges: [], + }); +} + +describe('App routing', () => { + beforeEach(() => { + localStorage.clear(); + resetEmptyWorkspace(); + }); + + it('redirects /canvas to home when no active document exists', async () => { + window.history.pushState({}, '', '/#/canvas'); + + render(); + + expect(await screen.findByTestId('home-page')).toBeTruthy(); + expect(screen.queryByTestId('flow-editor')).toBeNull(); + }); + + it('redirects invalid flow routes to home when no matching document exists', async () => { + window.history.pushState({}, '', '/#/flow/missing-flow'); + + render(); + + expect(await screen.findByTestId('home-page')).toBeTruthy(); + expect(screen.queryByTestId('flow-editor')).toBeNull(); + }); + + it('creates a document before opening the import flow from home', async () => { + window.history.pushState({}, '', '/#/home'); + + render(); + + fireEvent.click(await screen.findByRole('button', { name: 'Import Flow' })); + + expect(await screen.findByTestId('flow-editor')).toBeTruthy(); + await waitFor(() => { + expect(useFlowStore.getState().documents).toHaveLength(1); + expect(useFlowStore.getState().activeDocumentId).not.toBe(''); + expect(window.location.hash).toMatch(/^#\/flow\//); + }); + }); + + it('navigates to the templates page from home without creating a document', async () => { + window.history.pushState({}, '', '/#/home'); + + render(); + + fireEvent.click(await screen.findByRole('button', { name: 'Open Templates' })); + + await waitFor(() => { + expect(window.location.hash).toBe('#/templates'); + expect(useFlowStore.getState().documents).toHaveLength(0); + expect(useFlowStore.getState().activeDocumentId).toBe(''); + }); + }); +}); diff --git a/src/App.tsx b/src/App.tsx index 078d5192..140a0e81 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,7 +1,20 @@ import React, { lazy, Suspense, useEffect } from 'react'; -import { HashRouter as Router, Routes, Route, Navigate, useNavigate, useLocation, useParams } from 'react-router-dom'; +import { + HashRouter as Router, + Routes, + Route, + Navigate, + useNavigate, + useLocation, + useParams, +} from 'react-router-dom'; import { ReactFlowProvider } from '@/lib/reactflowCompat'; -import { createFlowEditorAIRouteState, createFlowEditorImportRouteState, createFlowEditorTemplatesRouteState } from '@/app/routeState'; +import { + createFlowEditorAIRouteState, + createFlowEditorInitialTemplateRouteState, + createFlowEditorImportRouteState, + type FlowEditorRouteState, +} from '@/app/routeState'; import { DocsSiteRedirect } from '@/components/app/DocsSiteRedirect'; import { RouteLoadingFallback } from '@/components/app/RouteLoadingFallback'; import { MobileWorkspaceGate } from '@/components/app/MobileWorkspaceGate'; @@ -9,13 +22,13 @@ import { CinematicExportProvider } from '@/context/CinematicExportContext'; import { HomePage } from '@/components/HomePage'; import { useFlowStore } from './store'; -import { useTabActions } from '@/store/tabHooks'; +import { useEditorPageActions } from '@/store/editorPageHooks'; +import { useWorkspaceDocumentActions, useWorkspaceRouteResolver } from '@/store/documentHooks'; import { useShortcutHelpOpen } from '@/store/viewHooks'; // Import i18n configuration import './i18n/config'; - async function loadFlowEditorModule() { const module = await import('./components/FlowEditor'); return { default: module.FlowEditor }; @@ -33,16 +46,32 @@ const LazyDiagramViewer = lazy(async () => { return { default: module.DiagramViewer }; }); +function navigateHome(navigate: ReturnType): void { + navigate('/home', { replace: true }); +} + function FlowCanvasRoute(): React.JSX.Element { const { flowId } = useParams(); const navigate = useNavigate(); - const { setActiveTabId } = useTabActions(); + const { setActiveDocumentId } = useWorkspaceDocumentActions(); + const { setActivePageId } = useEditorPageActions(); + const { documents, resolveTarget } = useWorkspaceRouteResolver(); useEffect(() => { - if (flowId) { - setActiveTabId(flowId); + if (!flowId) { + navigateHome(navigate); + return; + } + + const target = resolveTarget(flowId); + if (!target) { + navigateHome(navigate); + return; } - }, [flowId, setActiveTabId]); + + setActiveDocumentId(target.documentId); + setActivePageId(target.pageId); + }, [documents, flowId, navigate, resolveTarget, setActiveDocumentId, setActivePageId]); return ( }> @@ -58,54 +87,64 @@ function FlowCanvasRoute(): React.JSX.Element { function HomePageRoute(): React.JSX.Element { const navigate = useNavigate(); const location = useLocation(); - const { addTab } = useTabActions(); + const { createDocument } = useWorkspaceDocumentActions(); - const activeTab = location.pathname === '/settings' ? 'settings' : 'home'; + const activeTab = getHomePageTab(location.pathname); useEffect(() => { void loadFlowEditorModule(); }, []); - const handleLaunch = () => { - const newTabId = addTab(); - navigate(`/flow/${newTabId}`); - }; + function openNewFlow(routeState?: FlowEditorRouteState): void { + const newDocumentId = createDocument(); + navigate(`/flow/${newDocumentId}`, routeState ? { state: routeState } : undefined); + } + + function handleLaunch(): void { + openNewFlow(); + } + + function handleLaunchWithTemplates(): void { + navigate('/templates'); + } + + function handleLaunchWithAI(): void { + openNewFlow(createFlowEditorAIRouteState()); + } - const handleLaunchWithTemplates = () => { - const newTabId = addTab(); - navigate(`/flow/${newTabId}`, { state: createFlowEditorTemplatesRouteState() }); - }; + function handleLaunchWithInitialTemplate(templateId: string): void { + openNewFlow(createFlowEditorInitialTemplateRouteState(templateId)); + } - const handleLaunchWithAI = () => { - const newTabId = addTab(); - navigate(`/flow/${newTabId}`, { state: createFlowEditorAIRouteState() }); - }; + function handleImportJSON(): void { + openNewFlow(createFlowEditorImportRouteState()); + } return ( { - navigate('/canvas', { - state: createFlowEditorImportRouteState(), - }); - }} + onImportJSON={handleImportJSON} onOpenFlow={(flowId) => navigate(`/flow/${flowId}`)} activeTab={activeTab} - onSwitchTab={(tab) => navigate(tab === 'settings' ? '/settings' : '/home')} + onSwitchTab={(tab) => navigate(getHomePagePath(tab))} /> ); } +function FlowCanvasRedirectRoute(): React.JSX.Element { + const activeDocumentId = useFlowStore((state) => state.activeDocumentId); + + return ; +} + function EditorRouteGate({ children }: { children: React.ReactNode }): React.JSX.Element { const navigate = useNavigate(); return ( - navigate('/docs')} - onGoHome={() => navigate('/home')} - > + navigate('/docs')} onGoHome={() => navigate('/home')}> {children} ); @@ -118,7 +157,8 @@ function App(): React.JSX.Element { const handleKeyDown = (e: KeyboardEvent) => { // Don't trigger if user is typing in an input const activeElement = document.activeElement as HTMLElement | null; - const isInput = activeElement instanceof HTMLInputElement || + const isInput = + activeElement instanceof HTMLInputElement || activeElement instanceof HTMLTextAreaElement || activeElement?.isContentEditable; @@ -139,33 +179,78 @@ function App(): React.JSX.Element { }, [setShortcutsHelpOpen]); return ( - - - } /> - }> - - - )} - /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - - - {isShortcutsHelpOpen ? ( - - - - ) : null} - + <> + + Skip to content + + + + } /> + }> + + + } + /> + } /> + } /> + } /> + + + + } + /> + + + + } + /> + } /> + } /> + } /> + + + {isShortcutsHelpOpen ? ( + + + + ) : null} + + ); } +function getHomePageTab(pathname: string): 'home' | 'templates' | 'settings' { + switch (pathname) { + case '/settings': + return 'settings'; + case '/templates': + return 'templates'; + default: + return 'home'; + } +} + +function getHomePagePath(tab: 'home' | 'templates' | 'settings'): string { + switch (tab) { + case 'settings': + return '/settings'; + case 'templates': + return '/templates'; + default: + return '/home'; + } +} + export default App; diff --git a/src/app/routeState.ts b/src/app/routeState.ts index 4e1fe9a8..285bdc84 100644 --- a/src/app/routeState.ts +++ b/src/app/routeState.ts @@ -2,6 +2,7 @@ export interface FlowEditorRouteState { openImportDialog?: boolean; openTemplates?: boolean; openStudioAI?: boolean; + initialTemplateId?: string; } export function createFlowEditorImportRouteState(): FlowEditorRouteState { @@ -12,6 +13,10 @@ export function createFlowEditorTemplatesRouteState(): FlowEditorRouteState { return { openTemplates: true }; } +export function createFlowEditorInitialTemplateRouteState(templateId: string): FlowEditorRouteState { + return { initialTemplateId: templateId }; +} + export function createFlowEditorAIRouteState(): FlowEditorRouteState { return { openStudioAI: true }; } @@ -30,3 +35,10 @@ export function shouldOpenFlowEditorAI(state: unknown): boolean { if (!state || typeof state !== 'object') return false; return (state as FlowEditorRouteState).openStudioAI === true; } + +export function getInitialFlowEditorTemplateId(state: unknown): string | null { + if (!state || typeof state !== 'object') return null; + return typeof (state as FlowEditorRouteState).initialTemplateId === 'string' + ? (state as FlowEditorRouteState).initialTemplateId as string + : null; +} diff --git a/src/components/AnnotationNode.tsx b/src/components/AnnotationNode.tsx index 020a3ba4..c8f983af 100644 --- a/src/components/AnnotationNode.tsx +++ b/src/components/AnnotationNode.tsx @@ -8,6 +8,7 @@ import { NodeChrome } from './NodeChrome'; import { hasMarkdownSyntax } from './markdownSyntax'; import { useFlowStore } from '@/store'; import { ANNOTATION_COLOR_OPTIONS, resolveAnnotationTheme } from './annotationTheme'; +import { resolveSharedColorKey } from '@/theme'; const LazyMarkdownRenderer = lazy(async () => { const module = await import('./MarkdownRenderer'); @@ -16,23 +17,24 @@ const LazyMarkdownRenderer = lazy(async () => { function AnnotationNode({ id, data, selected }: LegacyNodeProps): React.ReactElement { const { t } = useTranslation(); - const { setNodes } = useFlowStore(); + const setNodes = useFlowStore((state) => state.setNodes); const labelEdit = useInlineNodeTextEdit(id, 'label', data.label || ''); const subLabelEdit = useInlineNodeTextEdit(id, 'subLabel', data.subLabel || '', { multiline: true, allowTabCreateSibling: false, }); - const annotationTheme = resolveAnnotationTheme(data.color); + const annotationTheme = resolveAnnotationTheme(data.color, data.customColor); + const selectedColorKey = resolveSharedColorKey(data.color, 'yellow'); 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) - ? ( - {subLabelContent}}> - - - ) - : {subLabelContent}; + const renderedSubLabel = hasMarkdownSyntax(subLabelContent) ? ( + {subLabelContent}}> + + + ) : ( + {subLabelContent} + ); return ( ): Reac
{selected ? ( -
- {ANNOTATION_COLOR_OPTIONS.map((option) => ( +
+ {ANNOTATION_COLOR_OPTIONS.map((option) => { + const optionTheme = resolveAnnotationTheme(option.id); + return (
) : null}
- {data.label && ( - - )} + {data.label && ( + )} +
{/* Decorative corner fold */} -
+
); diff --git a/src/components/CommandBar.tsx b/src/components/CommandBar.tsx index 83e06620..e215e4a9 100644 --- a/src/components/CommandBar.tsx +++ b/src/components/CommandBar.tsx @@ -5,274 +5,257 @@ 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 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 }; + const module = await import('./command-bar/TemplatesView'); + return { default: module.TemplatesView }; }); const LazySearchView = lazy(async () => { - const module = await import('./command-bar/SearchView'); - return { default: module.SearchView }; + const module = await import('./command-bar/SearchView'); + return { default: module.SearchView }; }); const LazyLayoutView = lazy(async () => { - const module = await import('./command-bar/LayoutView'); - return { default: module.LayoutView }; + const module = await import('./command-bar/LayoutView'); + return { default: module.LayoutView }; }); const LazyLayersView = lazy(async () => { - const module = await import('./command-bar/LayersView'); - return { default: module.LayersView }; + const module = await import('./command-bar/LayersView'); + return { default: module.LayersView }; }); const LazyPagesView = lazy(async () => { - const module = await import('./command-bar/PagesView'); - return { default: module.PagesView }; + const module = await import('./command-bar/PagesView'); + return { default: module.PagesView }; }); const LazyAssetsView = lazy(async () => { - const module = await import('./command-bar/AssetsView'); - return { default: module.AssetsView }; + const module = await import('./command-bar/AssetsView'); + return { default: module.AssetsView }; }); const LazyDesignSystemView = lazy(async () => { - const module = await import('./command-bar/DesignSystemView'); - return { default: module.DesignSystemView }; + const module = await import('./command-bar/DesignSystemView'); + return { default: module.DesignSystemView }; }); type OpenCommandBarContentProps = Omit; function OpenCommandBarContent({ - onClose, - nodes, - onUndo, - onRedo, - onLayout, - onSelectTemplate, - onOpenStudioAI, - onOpenStudioOpenFlow, - onOpenStudioMermaid, - initialView = 'root', - onAddAnnotation, - onAddSection, - onAddText, - onAddJourney, - onAddMindmap, - onAddArchitecture, - onAddSequence, - onAddClassNode, - onAddEntityNode, - onAddImage, - onAddBrowserWireframe, - onAddMobileWireframe, - onAddDomainLibraryItem, - onCodeAnalysis, - onSqlAnalysis, - onTerraformAnalysis, - onOpenApiAnalysis, - settings, + onClose, + nodes, + onUndo, + onRedo, + onLayout, + onSelectTemplate, + onOpenStudioAI, + onOpenStudioOpenFlow, + onOpenStudioMermaid, + initialView = 'root', + onAddAnnotation: _onAddAnnotation, + onAddSection: _onAddSection, + onAddText: _onAddText, + onAddJourney: _onAddJourney, + onAddMindmap: _onAddMindmap, + onAddArchitecture: _onAddArchitecture, + onAddSequence: _onAddSequence, + onAddClassNode: _onAddClassNode, + onAddEntityNode: _onAddEntityNode, + onAddImage: _onAddImage, + onAddBrowserWireframe: _onAddBrowserWireframe, + onAddMobileWireframe: _onAddMobileWireframe, + onAddDomainLibraryItem, + onCodeAnalysis, + onSqlAnalysis, + onTerraformAnalysis, + onOpenApiAnalysis, + onApplyDsl, + onCodebaseAnalysis, + settings, }: OpenCommandBarContentProps): React.ReactElement { - const [view, setView] = useState(initialView); - const [searchQuery, setSearchQuery] = useState(''); - const [selectedIndex, setSelectedIndex] = useState(-1); - const inputRef = useRef(null); - const previouslyFocusedElementRef = useRef( - document.activeElement instanceof HTMLElement ? document.activeElement : null - ); + const [view, setView] = useState(initialView); + const [searchQuery, setSearchQuery] = useState(''); + const [selectedIndex, setSelectedIndex] = useState(-1); + const inputRef = useRef(null); + const previouslyFocusedElementRef = useRef( + document.activeElement instanceof HTMLElement ? document.activeElement : null + ); - useEffect(() => { - const previousElement = previouslyFocusedElementRef.current; - inputRef.current?.focus(); + useEffect(() => { + const previousElement = previouslyFocusedElementRef.current; + inputRef.current?.focus(); - return () => { - if (!previousElement) { - return; - } + return () => { + if (!previousElement) { + return; + } - window.setTimeout(() => previousElement.focus(), 0); - }; - }, []); + window.setTimeout(() => previousElement.focus(), 0); + }; + }, []); - useEffect(() => { - const handleKeyDown = (event: KeyboardEvent): void => { - if (event.key !== 'Escape') { - return; - } + useEffect(() => { + const handleKeyDown = (event: KeyboardEvent): void => { + if (event.key !== 'Escape') { + return; + } - event.preventDefault(); - onClose(); - }; + event.preventDefault(); + onClose(); + }; - window.addEventListener('keydown', handleKeyDown); - return () => window.removeEventListener('keydown', handleKeyDown); - }, [onClose]); + window.addEventListener('keydown', handleKeyDown); + return () => window.removeEventListener('keydown', handleKeyDown); + }, [onClose]); - const handleBack = useCallback(() => { - if (view === 'root') { - onClose(); - } else { - setView('root'); - setSearchQuery(''); - } - }, [view, onClose]); + const handleBack = useCallback(() => { + if (view === 'root') { + onClose(); + } else { + setView('root'); + setSearchQuery(''); + } + }, [view, onClose]); - const hasImport = Boolean(onCodeAnalysis ?? onSqlAnalysis ?? onTerraformAnalysis ?? onOpenApiAnalysis); + const hasImport = Boolean( + onCodeAnalysis ?? onSqlAnalysis ?? onTerraformAnalysis ?? onOpenApiAnalysis + ); - const commands = useCommandBarCommands({ - settings, - onUndo, - onRedo, - onOpenStudioAI, - onOpenStudioOpenFlow, - onOpenStudioMermaid, - hasImport, - }); + const commands = useCommandBarCommands({ + settings, + onUndo, + onRedo, + onOpenStudioAI, + onOpenStudioOpenFlow, + onOpenStudioMermaid, + hasImport, + }); - return ( -
-
+ ); } export const CommandBar: React.FC = ({ isOpen, ...props }) => { - if (!isOpen) return null; - return ; + if (!isOpen) return null; + return ; }; diff --git a/src/components/ConnectMenu.tsx b/src/components/ConnectMenu.tsx index 76ac8bae..d35e4d57 100644 --- a/src/components/ConnectMenu.tsx +++ b/src/components/ConnectMenu.tsx @@ -4,9 +4,10 @@ import { useTranslation } from 'react-i18next'; import { isMindmapConnectorSource } from '@/lib/connectCreationPolicy'; import { useFlowStore } from '@/store'; import type { DomainLibraryCategory, DomainLibraryItem } from '@/services/domainLibrary'; -import { loadProviderCatalogSuggestions, loadProviderShapePreview } from '@/services/shapeLibrary/providerCatalog'; +import { loadDomainAssetSuggestions } from '@/services/assetCatalog'; +import { getAssetCategoryDisplayName } from '@/services/assetPresentation'; +import { loadProviderShapePreview } from '@/services/shapeLibrary/providerCatalog'; import { Tooltip } from './Tooltip'; -import { loadIconAssetSuggestions } from '@/services/iconAssetCatalog'; import { NamedIcon } from './IconMap'; import type { ConnectedEdgePreset } from '@/hooks/edge-operations/utils'; @@ -105,11 +106,6 @@ export const ConnectMenu = ({ position, sourceId, sourceType, onSelect, onSelect const assetCategory = typeof sourceNode?.data?.assetCategory === 'string' ? sourceNode.data.assetCategory : undefined; const currentShapeId = typeof sourceNode?.data?.archIconShapeId === 'string' ? sourceNode.data.archIconShapeId : undefined; const currentIconName = typeof sourceNode?.data?.icon === 'string' ? sourceNode.data.icon : undefined; - const iconSuggestions = useMemo(() => loadIconAssetSuggestions({ - category: assetCategory, - excludeIcon: currentIconName, - limit: 18, - }), [assetCategory, currentIconName]); const providerItemsKey = isAssetSource && assetProvider ? `${assetProvider}:${assetCategory ?? 'all'}:${currentShapeId ?? currentIconName ?? 'all'}` : null; @@ -122,13 +118,12 @@ export const ConnectMenu = ({ position, sourceId, sourceType, onSelect, onSelect } let cancelled = false; - const suggestionPromise = assetProvider === 'icons' - ? Promise.resolve(iconSuggestions) - : loadProviderCatalogSuggestions(assetProvider, { - category: assetCategory, - excludeShapeId: currentShapeId, - limit: 18, - }); + const suggestionPromise = loadDomainAssetSuggestions(assetProvider, { + category: assetCategory, + excludeIcon: currentIconName, + excludeShapeId: currentShapeId, + limit: 18, + }); suggestionPromise.then((items) => { if (!cancelled) { @@ -143,7 +138,7 @@ export const ConnectMenu = ({ position, sourceId, sourceType, onSelect, onSelect return () => { cancelled = true; }; - }, [assetCategory, assetProvider, currentShapeId, iconSuggestions, isAssetSource, providerItemsKey]); + }, [assetCategory, assetProvider, currentIconName, currentShapeId, isAssetSource, providerItemsKey]); const providerItems = useMemo( () => (providerItemsState.key === providerItemsKey ? providerItemsState.items : []), @@ -188,7 +183,7 @@ export const ConnectMenu = ({ position, sourceId, sourceType, onSelect, onSelect if (!assetProvider) { return ''; } - return assetProvider.toUpperCase(); + return getAssetCategoryDisplayName(assetProvider); }, [assetProvider]); const contextualOptions = useMemo(() => getContextualOptions(sourceType), [sourceType]); const genericOptions = useMemo(() => [ @@ -262,31 +257,31 @@ export const ConnectMenu = ({ position, sourceId, sourceType, onSelect, onSelect aria-label="Close connect menu" />
-

{t('connectMenu.createNewNode')}

+

{t('connectMenu.createNewNode')}

{isMindmapSource ? ( ) : isAssetSource && providerItems.length > 0 ? ( <>
-
+
{providerTitle} suggestions
@@ -297,14 +292,14 @@ export const ConnectMenu = ({ position, sourceId, sourceType, onSelect, onSelect @@ -318,14 +313,14 @@ export const ConnectMenu = ({ position, sourceId, sourceType, onSelect, onSelect ))} @@ -333,9 +328,9 @@ export const ConnectMenu = ({ position, sourceId, sourceType, onSelect, onSelect )}
-
- {t('connectMenu.releaseToConnect')} -
diff --git a/src/components/ContextMenu.test.tsx b/src/components/ContextMenu.test.tsx new file mode 100644 index 00000000..34362e9c --- /dev/null +++ b/src/components/ContextMenu.test.tsx @@ -0,0 +1,39 @@ +import { render, screen } from '@testing-library/react'; +import { describe, expect, it, vi } from 'vitest'; +import { ContextMenu, getContextMenuPosition } from './ContextMenu'; + +vi.mock('react-i18next', () => ({ + useTranslation: () => ({ + t: (_key: string, fallback?: string) => fallback ?? _key, + }), +})); + +describe('ContextMenu', () => { + it('renders node actions', () => { + render( + + ); + + expect(screen.getByText('common.copy')).toBeTruthy(); + }); + + it('clamps the menu into the viewport near the bottom-right edge', () => { + expect( + getContextMenuPosition({ + position: { x: 310, y: 230 }, + menuRect: { width: 220, height: 180 }, + viewport: { width: 320, height: 240 }, + }) + ).toEqual({ x: 88, y: 48 }); + }); +}); diff --git a/src/components/ContextMenu.tsx b/src/components/ContextMenu.tsx index 7c7b5690..d690d569 100644 --- a/src/components/ContextMenu.tsx +++ b/src/components/ContextMenu.tsx @@ -1,227 +1,413 @@ -import React, { useEffect, useRef } from 'react'; +import React, { useEffect, useLayoutEffect, useRef, useState } from 'react'; import { - Copy, - ClipboardPaste, - Trash2, - BringToFront, - SendToBack, - CopyPlus, - Replace, - AlignStartVertical, - AlignCenterVertical, - AlignEndVertical, - AlignStartHorizontal, - AlignCenterHorizontal, - AlignEndHorizontal, - ArrowRightFromLine, - ArrowDownFromLine, - Group, + Copy, + ClipboardPaste, + Trash2, + BringToFront, + SendToBack, + CopyPlus, + Replace, + AlignStartVertical, + AlignCenterVertical, + AlignEndVertical, + AlignStartHorizontal, + AlignCenterHorizontal, + AlignEndHorizontal, + ArrowRightFromLine, + ArrowDownFromLine, + Group, + Pencil, + Lock, + LockOpen, + Eye, + EyeOff, + Maximize2, + FolderInput, + ArrowUpRight, } from 'lucide-react'; import { useTranslation } from 'react-i18next'; +const VIEWPORT_PADDING = 12; +const MENU_BUTTON_CLASS_NAME = + 'flex w-full items-center gap-2 rounded-[var(--radius-sm)] px-3 py-2 text-left text-sm text-[var(--brand-secondary)] transition-colors hover:bg-[var(--brand-background)] hover:text-[var(--brand-text)]'; +const COMPACT_MENU_BUTTON_CLASS_NAME = + 'flex w-full items-center gap-2 rounded-[var(--radius-sm)] px-3 py-1.5 text-left text-sm text-[var(--brand-secondary)] transition-colors hover:bg-[var(--brand-background)] hover:text-[var(--brand-text)]'; +const DANGER_MENU_BUTTON_CLASS_NAME = + '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'; +const GROUP_MENU_BUTTON_CLASS_NAME = + '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'; +const DIVIDER_CLASS_NAME = 'h-px bg-[var(--color-brand-border)] my-1'; +const SOFT_DIVIDER_CLASS_NAME = 'h-px bg-[var(--color-brand-border)] my-0.5'; +const SECTION_LABEL_CLASS_NAME = + 'px-3 py-1 text-[10px] font-semibold text-[var(--brand-secondary)] uppercase'; +const SELECTION_COUNT_CLASS_NAME = + 'px-3 py-1.5 text-[10px] font-bold text-[var(--brand-secondary)] uppercase tracking-wider'; +const ICON_GRID_BUTTON_CLASS_NAME = + 'flex items-center justify-center rounded-[var(--radius-xs)] p-1.5 text-[var(--brand-secondary)] hover:bg-[var(--brand-background)] hover:text-[var(--brand-text)]'; + +function clamp(value: number, min: number, max: number): number { + return Math.min(Math.max(value, min), max); +} + +export function getContextMenuPosition(input: { + position: { x: number; y: number }; + menuRect: Pick; + viewport: { width: number; height: number }; +}): { x: number; y: number } { + const maxLeft = input.viewport.width - input.menuRect.width - VIEWPORT_PADDING; + const maxTop = input.viewport.height - input.menuRect.height - VIEWPORT_PADDING; + + return { + x: clamp(input.position.x, VIEWPORT_PADDING, Math.max(VIEWPORT_PADDING, maxLeft)), + y: clamp(input.position.y, VIEWPORT_PADDING, Math.max(VIEWPORT_PADDING, maxTop)), + }; +} + export interface ContextMenuProps { - id: string | null; - type: 'node' | 'pane' | 'edge' | 'multi'; - currentNodeType?: string | null; - position: { x: number; y: number }; - onClose: () => void; - onCopy?: () => void; - onPaste?: () => void; - onDuplicate?: () => void; - onDelete?: () => void; - onBringToFront?: () => void; - onSendToBack?: () => void; - onChangeNodeType?: (type: string) => void; - canPaste?: boolean; - // Multi-select - selectedCount?: number; - onAlignNodes?: (direction: 'left' | 'center' | 'right' | 'top' | 'middle' | 'bottom') => void; - onDistributeNodes?: (direction: 'horizontal' | 'vertical') => void; - onGroupSelected?: () => void; + id: string | null; + type: 'node' | 'pane' | 'edge' | 'multi'; + currentNodeType?: string | null; + onChangeNodeType?: (type: string) => void; + isSectionLocked?: boolean; + isSectionHidden?: boolean; + hasParentSection?: boolean; + position: { x: number; y: number }; + onClose: () => void; + onCopy?: () => void; + onPaste?: () => void; + onDuplicate?: () => void; + onDelete?: () => void; + onBringToFront?: () => void; + onSendToBack?: () => void; + onEditLabel?: () => void; + onFitSectionToContents?: () => void; + onBringContentsIntoSection?: () => void; + onReleaseFromSection?: () => void; + onToggleSectionLock?: () => void; + onToggleSectionHidden?: () => void; + canPaste?: boolean; + // Multi-select + selectedCount?: number; + onAlignNodes?: (direction: 'left' | 'center' | 'right' | 'top' | 'middle' | 'bottom') => void; + onDistributeNodes?: (direction: 'horizontal' | 'vertical') => void; + onGroupSelected?: () => void; + onWrapInSection?: () => void; } -export const ContextMenu: React.FC = ({ - type, - currentNodeType, - position, - onClose, - onCopy, - onPaste, - onDuplicate, - onDelete, - onBringToFront, - onSendToBack, - onChangeNodeType, - canPaste, - selectedCount = 0, - onAlignNodes, - onDistributeNodes, - onGroupSelected, -}) => { - const { t } = useTranslation(); - const menuRef = useRef(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) => { - if (menuRef.current && !menuRef.current.contains(event.target as Node)) { - onClose(); - } - }; - document.addEventListener('mousedown', handleClickOutside); - return () => document.removeEventListener('mousedown', handleClickOutside); - }, [onClose]); - - return ( -
- {type === 'node' && ( - <> - - - - {onChangeNodeType ? ( - <> -
-
Switch type
-
- {nodeTypeOptions.map((option) => ( - - ))} -
- - ) : null} - -
- - - - -
- - - - )} - - {type === 'pane' && ( - <> - - - )} - - {type === 'edge' && ( - <> - -
- - - )} - - {type === 'multi' && ( - <> -
- {t('common.itemsSelected', { count: selectedCount })} -
- - {/* Align */} - {onAlignNodes && ( - <> -
{t('common.align')}
-
- - - - - - -
- - )} - - {/* Distribute */} - {onDistributeNodes && ( - <> -
-
{t('common.distribute')}
- - - - )} - - {/* Group */} - {onGroupSelected && ( - <> -
- - - )} - -
- - - )} -
- ); -}; +export function ContextMenu({ + type, + currentNodeType, + isSectionLocked = false, + isSectionHidden = false, + hasParentSection = false, + position, + onClose, + onCopy, + onPaste, + onDuplicate, + onDelete, + onBringToFront, + onSendToBack, + onEditLabel, + onFitSectionToContents, + onBringContentsIntoSection, + onReleaseFromSection, + onToggleSectionLock, + onToggleSectionHidden, + canPaste, + selectedCount = 0, + onAlignNodes, + onDistributeNodes, + onGroupSelected, + onWrapInSection, +}: ContextMenuProps): React.ReactElement { + const { t } = useTranslation(); + const menuRef = useRef(null); + const [menuPosition, setMenuPosition] = useState(position); + + useEffect(() => { + function handleClickOutside(event: MouseEvent): void { + if (menuRef.current && !menuRef.current.contains(event.target as Node)) { + onClose(); + } + } + + document.addEventListener('mousedown', handleClickOutside); + return () => document.removeEventListener('mousedown', handleClickOutside); + }, [onClose]); + + useEffect(() => { + setMenuPosition(position); + }, [position]); + + useLayoutEffect(() => { + const menu = menuRef.current; + if (!menu) { + return; + } + + const rect = menu.getBoundingClientRect(); + const nextPosition = getContextMenuPosition({ + position, + menuRect: rect, + viewport: { width: window.innerWidth, height: window.innerHeight }, + }); + + if (nextPosition.x !== menuPosition.x || nextPosition.y !== menuPosition.y) { + setMenuPosition(nextPosition); + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [menuPosition.x, menuPosition.y, position.x, position.y, type]); + + return ( +
+ {type === 'node' && ( + <> + + + + {currentNodeType === 'section' || hasParentSection ? ( + <> +
+ {currentNodeType === 'section' && onFitSectionToContents ? ( + + ) : null} + {currentNodeType === 'section' && onBringContentsIntoSection ? ( + + ) : null} + {hasParentSection && onReleaseFromSection ? ( + + ) : null} + {currentNodeType === 'section' && onToggleSectionLock ? ( + + ) : null} + {currentNodeType === 'section' && onToggleSectionHidden ? ( + + ) : null} + + ) : null} + +
+ + + + +
+ + + + )} + + {type === 'pane' && ( + <> + + + )} + + {type === 'edge' && ( + <> + {onEditLabel && ( + + )} + +
+ + + )} + + {type === 'multi' && ( + <> +
+ {t('common.itemsSelected', { count: selectedCount })} +
+ + {onAlignNodes && ( + <> +
+ {t('common.align')} +
+
+ + + + + + +
+ + )} + + {onDistributeNodes && ( + <> +
+
+ {t('common.distribute')} +
+ + + + )} + + {onGroupSelected && ( + <> +
+ + + )} + + {onWrapInSection && ( + <> +
+ + + )} + +
+ + + )} +
+ ); +} diff --git a/src/components/CustomConnectionLine.tsx b/src/components/CustomConnectionLine.tsx index 38ae2e10..489ddd61 100644 --- a/src/components/CustomConnectionLine.tsx +++ b/src/components/CustomConnectionLine.tsx @@ -15,7 +15,7 @@ const CustomConnectionLine = ({ }: ConnectionLineComponentProps) => { const nodes = useNodes(); - let snapTarget: { nX: number; nY: number; w: number; h: number } | null = null; + let isNearNode = false; for (const node of nodes) { const nX = node.position.x; const nY = node.position.y; @@ -26,7 +26,10 @@ const CustomConnectionLine = ({ toX <= nX + w + SNAP_PADDING && toY >= nY - SNAP_PADDING && toY <= nY + h + SNAP_PADDING; - if (inside) { snapTarget = { nX, nY, w, h }; break; } + if (inside) { + isNearNode = true; + break; + } } const [edgePath] = getBezierPath({ @@ -48,30 +51,13 @@ const CustomConnectionLine = ({ d={edgePath} /> - {/* Snap ring — lights up the target node on approach */} - {snapTarget && ( - - )} - - {/* Endpoint dot — grows on snap */} + {/* Endpoint dot — grows subtly on snap without outlining the whole node */} ); diff --git a/src/components/CustomNode.handleInteraction.test.tsx b/src/components/CustomNode.handleInteraction.test.tsx index 64bb355a..f05a95db 100644 --- a/src/components/CustomNode.handleInteraction.test.tsx +++ b/src/components/CustomNode.handleInteraction.test.tsx @@ -267,4 +267,39 @@ describe('CustomNode handle interaction policy', () => { expect(labelSurface?.style.maxHeight).toBe(''); expect(labelSurface?.style.overflow).toBe(''); }); + + it('applies independent typography to the description text', () => { + currentNodeId = 'n-desc-style'; + + const { container } = render( + + ); + + const markdownSurfaces = container.querySelectorAll('.markdown-content'); + const subLabelSurface = markdownSurfaces[1] as HTMLElement | undefined; + expect(subLabelSurface).toBeTruthy(); + expect(subLabelSurface?.className).toContain('font-roboto'); + expect(subLabelSurface?.style.fontSize).toBe('16px'); + expect(subLabelSurface?.style.fontWeight).toBe('bold'); + expect(subLabelSurface?.style.fontStyle).toBe('italic'); + }); }); diff --git a/src/components/CustomNode.tsx b/src/components/CustomNode.tsx index 48229952..33898529 100644 --- a/src/components/CustomNode.tsx +++ b/src/components/CustomNode.tsx @@ -1,242 +1,35 @@ -import React, { memo, useEffect, useState } from 'react'; +import React, { memo } 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 { getTransformDiagnosticsAttrs } from './transformDiagnostics'; import { InlineTextEditSurface } from './InlineTextEditSurface'; +import { NamedIcon } from './IconMap'; import { NodeChrome } from './NodeChrome'; import { NodeTransformControls } from './NodeTransformControls'; import { useActiveNodeSelection } from './useActiveNodeSelection'; import { useTranslation } from 'react-i18next'; -import { loadProviderShapePreview } from '@/services/shapeLibrary/providerCatalog'; - -type NodeShape = NonNullable; - -const COMPLEX_SHAPES: NodeShape[] = ['diamond', 'hexagon', 'parallelogram', 'cylinder', 'circle', 'ellipse']; - -function getDefaults(type: string): { color: string; icon: string | null; shape: NodeShape } { - switch (type) { - case 'start': return { color: 'emerald', icon: null, shape: 'rounded' }; - case 'end': return { color: 'red', icon: null, shape: 'rounded' }; - case 'decision': return { color: 'amber', icon: null, shape: 'diamond' }; - case 'annotation': return { color: 'yellow', icon: null, shape: 'rounded' }; - case 'custom': return { color: 'white', icon: null, shape: 'rounded' }; - default: return { color: 'white', icon: null, shape: 'rounded' }; - } -} - -function getMinNodeSize(shape: NodeData['shape'] | undefined): { minWidth: number; minHeight: number } { - // Square-aspect shapes: start at a square so they look geometrically correct. - if (shape === 'circle' || shape === 'ellipse') { - return { minWidth: 120, minHeight: 120 }; - } - if (shape === 'diamond' || shape === 'hexagon') { - return { minWidth: 140, minHeight: 140 }; - } - if (shape === 'parallelogram' || shape === 'cylinder') { - return { minWidth: 140, minHeight: 80 }; - } - return { minWidth: 120, minHeight: 60 }; -} - -function toCssSize(value: number | string | undefined): string | undefined { - if (value === undefined || value === null) return undefined; - return typeof value === 'number' ? `${value}px` : value; -} - -/** Lightweight Shift-key watcher — mounts only while a node is selected. */ -function useShiftHeld(selected: boolean): boolean { - const [shiftHeld, setShiftHeld] = useState(false); - - useEffect(() => { - 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); - }; - }, [selected]); - - return selected ? shiftHeld : false; -} - -interface NodeShapeSVGProps { - shape: NodeShape; - fill: string; - stroke: string; - strokeWidth: number | string; -} - -/** Pure SVG geometry for complex node shapes. Rendered inside a 100×100 viewBox. */ -function NodeShapeSVG({ shape, fill, stroke, strokeWidth }: NodeShapeSVGProps): React.ReactElement | null { - const commonProps = { stroke, strokeWidth, vectorEffect: 'non-scaling-stroke' as const, fill }; - switch (shape) { - case 'diamond': - return ; - case 'hexagon': - return ; - case 'parallelogram': - return ; - case 'cylinder': - return ( - <> - - - - ); - case 'circle': - return ; - case 'ellipse': - return ; - default: - return null; - } -} - -interface IconAssetNodeBodyProps { - nodeId: string; - selected: boolean; - connectionHandleClass: string; - explicitWidth: number | string | undefined; - nodeHeightPx: number | undefined; - hasLabel: boolean; - resolvedAssetIconUrl: string | null; - activeIconKey: string | null; - label: string | undefined; - isActiveSelected: boolean; - labelEdit: { - isEditing: boolean; - draft: string; - beginEdit: () => void; - setDraft: (v: string) => void; - commit: () => void; - handleKeyDown: (e: React.KeyboardEvent) => void; - }; -} - -/** Renders the compact icon-first presentation used for architecture asset nodes. */ -function IconAssetNodeBody({ - nodeId, - selected, - connectionHandleClass, - explicitWidth, - nodeHeightPx, - hasLabel, - resolvedAssetIconUrl, - activeIconKey, - label, - isActiveSelected, - labelEdit, -}: IconAssetNodeBodyProps): React.ReactElement { - const iconScale = 1; - const iconFrameSize = 72; - const iconHandleStyleExtras = { left: { top: 42 }, right: { top: 42 } }; - - return ( - <> - - -
-
- {resolvedAssetIconUrl ? ( - {typeof - ) : activeIconKey ? ( -
- -
- ) : null} -
- {hasLabel ? ( - } - onBeginEdit={labelEdit.beginEdit} - onDraftChange={labelEdit.setDraft} - onCommit={labelEdit.commit} - onKeyDown={labelEdit.handleKeyDown} - className="block max-w-full break-words text-center text-sm font-semibold leading-tight markdown-content [&_p]:m-0" - style={{ color: '#334155' }} - inputMode="multiline" - inputClassName="text-center" - isSelected={isActiveSelected} - /> - ) : null} -
- - - ); -} - -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 ( -
- ); -} - -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 ( -
- {nodeViolations.length > 1 ? nodeViolations.length : '!'} -
- ); -} +import { useProviderShapePreview } from '@/hooks/useProviderShapePreview'; +import { useShiftHeld } from '@/hooks/useShiftHeld'; +import { NodeShapeSVG } from './NodeShapeSVG'; +import { DiffBadge, LintViolationBadge } from './NodeBadges'; +import { IconAssetNodeBody } from './IconAssetNodeBody'; +import { + type NodeShape, + COMPLEX_SHAPES, + FONT_FAMILY_MAP, + NEEDS_SQUARE_ASPECT, + COMPLEX_SHAPE_PADDING, + getNodeDefaults, + getMinNodeSize, + toCssSize, + getNodeBorderRadius, + fontSizeClassFor, +} from './nodeHelpers'; function CustomNode(props: LegacyNodeProps): React.ReactElement { const { id, data, type, selected } = props; @@ -245,68 +38,52 @@ function CustomNode(props: LegacyNodeProps): React.ReactElement { const explicitHeight = data.height ?? explicitNodeStyle?.height; const measuredHeight = (props as { height?: number }).height; const shiftHeld = useShiftHeld(Boolean(selected)); - const providerAssetKey = data.archIconPackId && data.archIconShapeId - ? `${data.archIconPackId}:${data.archIconShapeId}` - : null; - const [resolvedAssetIconState, setResolvedAssetIconState] = useState<{ key: string | null; url: string | null }>({ key: null, url: null }); + const resolvedAssetIconUrl = useProviderShapePreview( + typeof data.archIconPackId === 'string' ? data.archIconPackId : undefined, + typeof data.archIconShapeId === 'string' ? data.archIconShapeId : undefined, + typeof data.customIconUrl === 'string' ? data.customIconUrl : undefined + ); const designSystem = useDesignSystem(); const isActiveSelected = useActiveNodeSelection(Boolean(selected)); const { t } = useTranslation(); - const defaults = getDefaults(type || 'process'); + const defaults = getNodeDefaults(type || 'process'); const activeColor = data.color || defaults.color; const activeColorMode = data.colorMode || 'subtle'; - const activeIconKey = data.icon === 'none' ? null : (data.icon || defaults.icon); - const activeShape = data.shape || defaults.shape || 'rounded'; - const visualQualityV2Enabled = true; + const activeIconKey = data.icon === 'none' ? null : data.icon || defaults.icon; + const activeShape = (data.shape || defaults.shape || 'rounded') as NodeShape; const visualStyle = resolveNodeVisualStyle(activeColor, activeColorMode, data.customColor); - - // Resolve icons - const resolvedAssetIconUrl = typeof data.customIconUrl === 'string' && data.customIconUrl.length > 0 - ? data.customIconUrl - : (resolvedAssetIconState.key === providerAssetKey ? resolvedAssetIconState.url : null); const iconName = resolvedAssetIconUrl || !activeIconKey ? null : activeIconKey; - - // Typography - const fontFamilyMap: Record = { - inter: 'font-inter', roboto: 'font-roboto', outfit: 'font-outfit', - playfair: 'font-playfair', fira: 'font-fira', sans: 'font-sans', - serif: 'font-serif', mono: 'font-mono', - }; - - const fontFamilyClass = data.fontFamily ? fontFamilyMap[data.fontFamily] : ''; - const fontFamilyStyle = !data.fontFamily ? { fontFamily: designSystem.typography.fontFamily } : {}; - - const fontSize = data.fontSize || (visualQualityV2Enabled ? '13' : '14'); + const labelFontFamilyClass = data.fontFamily ? FONT_FAMILY_MAP[data.fontFamily] : ''; + const labelFontFamilyStyle = !data.fontFamily + ? { fontFamily: designSystem.typography.fontFamily } + : {}; + const subLabelFontFamily = data.subLabelFontFamily || data.fontFamily; + const subLabelFontFamilyClass = subLabelFontFamily ? FONT_FAMILY_MAP[subLabelFontFamily] : ''; + const subLabelFontFamilyStyle = !subLabelFontFamily + ? { fontFamily: designSystem.typography.fontFamily } + : {}; + const fontSize = data.fontSize || '13'; const isNumericSize = !isNaN(Number(fontSize)); - - let fontSizeClass = ''; - if (!isNumericSize) { - switch (fontSize) { - case 'small': - fontSizeClass = 'text-xs'; - break; - case 'medium': - fontSizeClass = 'text-sm'; - break; - case 'large': - fontSizeClass = 'text-base'; - break; - default: - fontSizeClass = 'text-lg'; - break; - } - } + const fSizeClass = fontSizeClassFor(fontSize); const fontSizeStyle = isNumericSize ? { fontSize: fontSize + 'px' } : {}; - + const subLabelFontSize = data.subLabelFontSize || '10'; + const subLabelIsNumericSize = !isNaN(Number(subLabelFontSize)); + const subLabelSizeClass = fontSizeClassFor(subLabelFontSize); + const subLabelFontSizeStyle = subLabelIsNumericSize ? { fontSize: subLabelFontSize + 'px' } : {}; const hasIcon = Boolean(iconName) || Boolean(data.customIconUrl); const hasLabel = Boolean(data.label?.trim()); const hasSubLabel = Boolean(data.subLabel); - const isComplexShape = COMPLEX_SHAPES.includes(activeShape); const { minWidth, minHeight } = getMinNodeSize(activeShape); const contentMinHeight = !isComplexShape - ? (hasIcon && hasSubLabel ? 128 : hasIcon ? 108 : hasSubLabel ? 96 : 84) + ? hasIcon && hasSubLabel + ? 128 + : hasIcon + ? 108 + : hasSubLabel + ? 96 + : 84 : minHeight; const effectiveMinHeight = Math.max(minHeight, contentMinHeight); const nodeHeightPx = typeof measuredHeight === 'number' ? measuredHeight : undefined; @@ -314,60 +91,24 @@ function CustomNode(props: LegacyNodeProps): React.ReactElement { const contentPadding = isCompactNode ? '0.5rem' : designSystem.components.node.padding; const labelEdit = useInlineNodeTextEdit(id, 'label', data.label || '', { multiline: true }); const subLabelEdit = useInlineNodeTextEdit(id, 'subLabel', data.subLabel || ''); - const connectionHandleClass = '!w-2.5 !h-2.5 !border-2 !border-white transition-all duration-150 hover:scale-110'; + const connectionHandleClass = + '!w-2.5 !h-2.5 !border-2 !border-white transition-all duration-150 hover:scale-110'; const emptyLabelPrompt = t('nodes.addText', 'Add text'); const showEmptyLabelPrompt = !hasLabel && isActiveSelected; const lodPreserveClass = isActiveSelected ? 'flow-lod-preserve' : ''; - const isIconAssetNode = data.assetPresentation === 'icon' && (Boolean(resolvedAssetIconUrl) || Boolean(activeIconKey) || Boolean(providerAssetKey)); - - useEffect(() => { - if (typeof data.customIconUrl === 'string' && data.customIconUrl.length > 0) { - return; - } - if (!data.archIconPackId || !data.archIconShapeId || !providerAssetKey) { - return; - } - - let cancelled = false; - loadProviderShapePreview(data.archIconPackId, data.archIconShapeId) - .then((preview) => { - if (!cancelled) { - setResolvedAssetIconState({ key: providerAssetKey, url: preview?.previewUrl || null }); - } - }) - .catch(() => { - if (!cancelled) { - setResolvedAssetIconState({ key: providerAssetKey, url: null }); - } - }); - - return () => { - cancelled = true; - }; - }, [data.archIconPackId, data.archIconShapeId, data.customIconUrl, providerAssetKey]); - const labelDisplayValue = hasLabel - ? - : showEmptyLabelPrompt - ? {emptyLabelPrompt} - : null; - - // Calculate Border Radius from Design System if shape is 'rounded' (default) - function getBorderRadius(): string | number { - if (isComplexShape) return '0'; - if (activeShape === 'capsule') return '9999px'; - if (activeShape === 'rectangle') return '4px'; // Or 0 - // For 'rounded' or others - return designSystem.components.node.borderRadius; - } - - // 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 isIconAssetNode = + data.assetPresentation === 'icon' && + (Boolean(resolvedAssetIconUrl) || Boolean(activeIconKey) || Boolean(data.archIconPackId)); + + const labelDisplayValue = hasLabel ? ( + + ) : showEmptyLabelPrompt ? ( + {emptyLabelPrompt} + ) : null; + + const needsSquareAspect = NEEDS_SQUARE_ASPECT.has(activeShape); + const selectionRing = + isActiveSelected && !isComplexShape ? `, 0 0 0 2px var(--brand-primary, #e95420)` : ''; const animateIn = data.freshlyAdded === true; const containerStyle: React.CSSProperties = { minWidth, @@ -375,40 +116,67 @@ function CustomNode(props: LegacyNodeProps): React.ReactElement { width: toCssSize(explicitWidth) ?? '100%', height: toCssSize(explicitHeight), ...(needsSquareAspect ? { aspectRatio: '1/1' } : {}), - ...fontFamilyStyle, - - // Apply Design System Styles for Box Shadow and Border - boxShadow: !isComplexShape ? `${designSystem.components.node.boxShadow}${selectionRing}` : 'none', + ...labelFontFamilyStyle, + 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(), + padding: 0, + borderRadius: getNodeBorderRadius( + isComplexShape, + activeShape, + designSystem.components.node.borderRadius + ), backgroundColor: !isComplexShape ? visualStyle.bg : undefined, borderColor: !isComplexShape ? visualStyle.border : undefined, - ...(animateIn ? { - animation: `nodeAnimateIn 180ms ease-out ${data.animateDelay ?? 0}ms both`, - } : {}), + ...(animateIn + ? { animation: `nodeAnimateIn 180ms ease-out ${data.animateDelay ?? 0}ms both` } + : {}), }; if (isIconAssetNode) { return ( - <> - - + ); } + const textProps = { + ...fontSizeStyle, + ...labelFontFamilyStyle, + color: visualStyle.text, + fontWeight: data.fontWeight || '600', + fontStyle: data.fontStyle || 'normal', + lineHeight: 1.2, + }; + const subTextProps = { + ...subLabelFontSizeStyle, + ...subLabelFontFamilyStyle, + color: visualStyle.subText, + fontWeight: data.subLabelFontWeight || 'normal', + fontStyle: data.subLabelFontStyle || 'normal', + textAlign: (data.align || 'center') as React.CSSProperties['textAlign'], + opacity: 0.85, + lineHeight: 1.25, + }; + const textAlignStyle = { + textAlign: (data.align || 'center') as React.CSSProperties['textAlign'], + }; + const iconSize = isCompactNode ? 'w-7 h-7' : 'w-8 h-8'; + const iconImgSize = isCompactNode ? 'w-4 h-4' : 'w-5 h-5'; + const namedIconSize = isCompactNode ? 'w-3.5 h-3.5' : 'w-4 h-4'; + return ( <> ): React.ReactElement { minHeight={effectiveMinHeight} keepAspectRatio={shiftHeld || needsSquareAspect} /> - ): React.ReactElement { keepAspectRatio={shiftHeld || needsSquareAspect} handleClassName={connectionHandleClass} > - {/* Main Node Container */}
- - - - {/* SVG Background Layer for Complex Shapes */} - {isComplexShape && ( -
- - - -
- )} - - {/* Content Layer */} -
- - {/* Icon Area */} - {hasIcon && ( -
- {resolvedAssetIconUrl && ( -
- icon -
- )} - {iconName && ( -
- -
- )} + + + + {isComplexShape && ( +
+ + +
)} - {/* Text Content */} -
- - {hasSubLabel && ( +
+ {hasIcon && ( +
+ {resolvedAssetIconUrl && ( +
+ icon +
+ )} + {iconName && ( +
+ +
+ )} +
+ )} + +
} - onBeginEdit={subLabelEdit.beginEdit} - onDraftChange={subLabelEdit.setDraft} - onCommit={subLabelEdit.commit} - onKeyDown={subLabelEdit.handleKeyDown} - className={`text-[10px] text-slate-500 mt-1 leading-snug markdown-content [&_p]:m-0 [&_p]:leading-snug break-words flow-lod-secondary ${lodPreserveClass}`} - style={{ - color: visualStyle.subText, - fontWeight: 'normal', - fontStyle: 'normal', - textAlign: data.align || 'center', - opacity: 0.85, - ...(visualQualityV2Enabled - ? { - lineHeight: 1.25, - } - : {}), - }} + isEditing={labelEdit.isEditing} + draft={labelEdit.draft} + displayValue={labelDisplayValue} + onBeginEdit={labelEdit.beginEdit} + onDraftChange={labelEdit.setDraft} + onCommit={labelEdit.commit} + onKeyDown={labelEdit.handleKeyDown} + className={`leading-tight block break-words markdown-content [&_p]:m-0 [&_p]:leading-tight ${fSizeClass} ${labelFontFamilyClass}`} + style={textProps} + inputMode="multiline" inputClassName="text-center" - isSelected={Boolean(selected)} + isSelected={isActiveSelected} /> + {hasSubLabel && ( + } + onBeginEdit={subLabelEdit.beginEdit} + onDraftChange={subLabelEdit.setDraft} + onCommit={subLabelEdit.commit} + onKeyDown={subLabelEdit.handleKeyDown} + className={`text-slate-500 mt-1 leading-snug markdown-content [&_p]:m-0 [&_p]:leading-snug break-words flow-lod-secondary ${lodPreserveClass} ${subLabelSizeClass} ${subLabelFontFamilyClass}`} + style={subTextProps} + inputClassName="text-center" + isSelected={Boolean(selected)} + /> + )} +
+ + {data.imageUrl && ( +
+ attachment +
)}
- - {/* Image */} - {data.imageUrl && ( -
- attachment -
- )} -
); -}; +} export default memo(CustomNode); diff --git a/src/components/DiagramViewer.tsx b/src/components/DiagramViewer.tsx index eda4a5e3..5eeb4673 100644 --- a/src/components/DiagramViewer.tsx +++ b/src/components/DiagramViewer.tsx @@ -66,7 +66,7 @@ function ViewerCanvas({ fitViewOptions={{ padding: size === 'badge' ? 0.08 : size === 'card' ? 0.12 : 0.15 }} className="bg-[var(--brand-background,#f8fafc)]" > - + {size === 'full' ? : null} ); @@ -101,23 +101,23 @@ function DiagramViewerInner(): React.ReactElement { }, [parsed]); return ( -
+
{viewerSize !== 'badge' ? ( -
+
- {viewerSize === 'card' ? 'OpenFlowKit Viewer' : 'OpenFlowKit'} + {viewerSize === 'card' ? 'OpenFlowKit Viewer' : 'OpenFlowKit'}
) : ( -
+
OpenFlowKit Badge Viewer
@@ -126,7 +126,7 @@ function DiagramViewerInner(): React.ReactElement {
{layoutState.status === 'loading' && (
- +
)} {layoutState.status === 'error' && ( diff --git a/src/components/ErrorBoundary.tsx b/src/components/ErrorBoundary.tsx index 50f0ec2a..d6b06970 100644 --- a/src/components/ErrorBoundary.tsx +++ b/src/components/ErrorBoundary.tsx @@ -2,6 +2,7 @@ import React, { Component, ErrorInfo, ReactNode } from 'react'; import { AlertTriangle, RefreshCcw } from 'lucide-react'; import { withTranslation, WithTranslation } from 'react-i18next'; import { createLogger } from '@/lib/logger'; +import { captureAnalyticsException } from '@/services/analytics/analytics'; const logger = createLogger({ scope: 'ErrorBoundary' }); @@ -27,6 +28,10 @@ class ErrorBoundaryComponent extends Component { public componentDidCatch(error: Error, errorInfo: ErrorInfo) { logger.error('Uncaught error.', { error, componentStack: errorInfo.componentStack }); + captureAnalyticsException(error, { + surface: 'react-error-boundary', + has_component_stack: Boolean(errorInfo.componentStack), + }); } public render() { @@ -37,22 +42,22 @@ class ErrorBoundaryComponent extends Component { } return ( -
-
-
- +
+
+
+
-

+

{t('errorBoundary.title')}

-

+

{t('errorBoundary.description')}

{this.state.error && ( -
+
{this.state.error.toString()}
)} diff --git a/src/components/ExportMenu.tsx b/src/components/ExportMenu.tsx index 300b0591..51115095 100644 --- a/src/components/ExportMenu.tsx +++ b/src/components/ExportMenu.tsx @@ -1,36 +1,87 @@ -import React, { Suspense, lazy } from 'react'; +import React, { Suspense, lazy, useState } from 'react'; import { Download } from 'lucide-react'; import { useTranslation } from 'react-i18next'; import { Tooltip } from './Tooltip'; import { Button } from './ui/Button'; import { useExportMenu } from './useExportMenu'; +type CinematicSpeed = 'slow' | 'normal' | 'fast'; +type CinematicResolution = '720p' | '1080p' | '4k'; + const LazyExportMenuPanel = lazy(async () => { - const module = await import('./ExportMenuPanel'); - return { default: module.ExportMenuPanel }; + const module = await import('./ExportMenuPanel'); + return { default: module.ExportMenuPanel }; }); interface ExportMenuProps { - 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; + 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; + cinematicSpeed?: CinematicSpeed; + onCinematicSpeedChange?: (speed: CinematicSpeed) => void; + cinematicResolution?: CinematicResolution; + onCinematicResolutionChange?: (res: CinematicResolution) => void; + cinematicTransparent?: boolean; + onCinematicTransparentChange?: (transparent: boolean) => void; } export const ExportMenu: React.FC = ({ + onExportPNG, + onCopyImage, + onExportSVG, + onCopySVG, + onExportPDF, + onExportCinematic, + onExportJSON, + onCopyJSON, + onExportMermaid, + onDownloadMermaid, + onExportPlantUML, + onDownloadPlantUML, + onExportOpenFlowDSL, + onDownloadOpenFlowDSL, + onExportFigma, + onDownloadFigma, + onShare, + cinematicSpeed, + onCinematicSpeedChange, + cinematicResolution, + onCinematicResolutionChange, + cinematicTransparent, + onCinematicTransparentChange, +}) => { + const { t } = useTranslation(); + const exportLabel = t('export.title', 'Export'); + const [cinematicSpeedState, setCinematicSpeedState] = useState('normal'); + const [cinematicResolutionState, setCinematicResolutionState] = + useState('1080p'); + const [cinematicTransparentState, setCinematicTransparentState] = useState(false); + const effectiveSpeed = cinematicSpeed ?? cinematicSpeedState; + const effectiveSpeedChange = onCinematicSpeedChange ?? setCinematicSpeedState; + const effectiveResolution = cinematicResolution ?? cinematicResolutionState; + const effectiveResolutionChange = onCinematicResolutionChange ?? setCinematicResolutionState; + const effectiveTransparent = cinematicTransparent ?? cinematicTransparentState; + const effectiveTransparentChange = onCinematicTransparentChange ?? setCinematicTransparentState; + const { + isOpen, + menuRef, + toggleMenu, + handleSelect, + } = useExportMenu({ onExportPNG, onCopyImage, onExportSVG, @@ -48,49 +99,36 @@ export const ExportMenu: React.FC = ({ onExportFigma, onDownloadFigma, onShare, -}) => { - const { t } = useTranslation(); - const exportLabel = t('export.title', 'Export'); - const { isOpen, menuRef, toggleMenu, handleSelect } = useExportMenu({ - onExportPNG, - onCopyImage, - onExportSVG, - onCopySVG, - onExportPDF, - onExportCinematic, - onExportJSON, - onCopyJSON, - onExportMermaid, - onDownloadMermaid, - onExportPlantUML, - onDownloadPlantUML, - onExportOpenFlowDSL, - onDownloadOpenFlowDSL, - onExportFigma, - onDownloadFigma, - onShare, - }); + }); - return ( -
- - - + return ( +
+ + + - {isOpen && ( - - - - )} -
- ); + {isOpen && ( + + + + )} +
+ ); }; diff --git a/src/components/ExportMenuPanel.test.tsx b/src/components/ExportMenuPanel.test.tsx index 6e1fafc2..933dcfac 100644 --- a/src/components/ExportMenuPanel.test.tsx +++ b/src/components/ExportMenuPanel.test.tsx @@ -32,7 +32,7 @@ describe('ExportMenuPanel', () => { expect(screen.getByRole('button', { name: /PNG/i })).toBeTruthy(); - fireEvent.click(screen.getByRole('button', { name: /Code/i })); + fireEvent.click(screen.getByRole('tab', { name: /Code/i })); expect(screen.getByRole('button', { name: /JSON File/i })).toBeTruthy(); @@ -49,7 +49,7 @@ describe('ExportMenuPanel', () => { render(); - fireEvent.click(screen.getByRole('button', { name: /Code/i })); + fireEvent.click(screen.getByRole('tab', { 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')); @@ -60,7 +60,7 @@ describe('ExportMenuPanel', () => { it('shows cinematic build options in the video section', () => { render(); - fireEvent.click(screen.getByRole('button', { name: /Video/i })); + fireEvent.click(screen.getByRole('tab', { 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(); @@ -68,4 +68,39 @@ describe('ExportMenuPanel', () => { 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(); }); + + it('renders video controls before the download action and uses shared control interactions', () => { + const onCinematicSpeedChange = vi.fn(); + const onCinematicResolutionChange = vi.fn(); + const onCinematicTransparentChange = vi.fn(); + + render( + + ); + + fireEvent.click(screen.getByRole('tab', { name: /Video/i })); + + const panelText = screen.getByText(/Transparent background/i); + const downloadButton = screen.getByTestId('export-action-cinematic-video-download'); + + expect( + panelText.compareDocumentPosition(downloadButton) & Node.DOCUMENT_POSITION_FOLLOWING + ).toBeTruthy(); + + fireEvent.click(screen.getByRole('button', { name: '2×' })); + fireEvent.click(screen.getByRole('button', { name: '4K' })); + fireEvent.click(screen.getByRole('switch')); + + expect(onCinematicSpeedChange).toHaveBeenCalledWith('fast'); + expect(onCinematicResolutionChange).toHaveBeenCalledWith('4k'); + expect(onCinematicTransparentChange).toHaveBeenCalledWith(true); + }); }); diff --git a/src/components/ExportMenuPanel.tsx b/src/components/ExportMenuPanel.tsx index df58c1c7..14cc9d50 100644 --- a/src/components/ExportMenuPanel.tsx +++ b/src/components/ExportMenuPanel.tsx @@ -1,271 +1,364 @@ import React, { useMemo, useState } from 'react'; import type { ComponentType } from 'react'; import { - Copy, - Download, - Figma, - FileCode, - FileJson, - FileText, - Film, - GitBranch, - Image, - Wand2, + 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 { SidebarSegmentedTabs } from './SidebarShell'; +import { SegmentedChoice } from './properties/SegmentedChoice'; import { Button } from './ui/Button'; import { Select, type SelectOption } from './ui/Select'; +import { SegmentedTabs } from './ui/SegmentedTabs'; +import { Switch } from './ui/Switch'; interface ExportMenuPanelProps { - onSelect: (key: string, action: ExportActionKey) => void; + onSelect: (key: string, action: ExportActionKey) => void; + cinematicSpeed?: CinematicSpeed; + onCinematicSpeedChange?: (speed: CinematicSpeed) => void; + cinematicResolution?: CinematicResolution; + onCinematicResolutionChange?: (res: CinematicResolution) => void; + cinematicTransparent?: boolean; + onCinematicTransparentChange?: (transparent: boolean) => void; } type ExportCategoryKey = 'image' | 'video' | 'code'; type ExportActionKey = 'download' | 'copy'; +type CinematicSpeed = 'slow' | 'normal' | 'fast'; +type CinematicResolution = '720p' | '1080p' | '4k'; interface ExportOption { - key: string; - label: string; - hint: string; - Icon: ComponentType<{ className?: string }>; - actions: ExportActionKey[]; + key: string; + label: string; + hint: string; + Icon: ComponentType<{ className?: string }>; + actions: ExportActionKey[]; } interface ExportSection { - key: ExportCategoryKey; - title: string; - items: ExportOption[]; + key: ExportCategoryKey; + title: string; + items: ExportOption[]; } +const CINEMATIC_SPEED_ITEMS = [ + { id: 'slow', label: '0.5×' }, + { id: 'normal', label: '1×' }, + { id: 'fast', label: '2×' }, +] as const; + +const CINEMATIC_RESOLUTION_ITEMS = [ + { id: '720p', label: '720P' }, + { id: '1080p', label: '1080P' }, + { id: '4k', label: '4K' }, +] as const; + function getSectionIcon(sectionKey: ExportCategoryKey): React.ReactElement { - if (sectionKey === 'image') { - return ; - } + if (sectionKey === 'image') { + return ; + } - if (sectionKey === 'video') { - return ; - } + if (sectionKey === 'video') { + return ; + } - if (sectionKey === 'code') { - return ; - } + if (sectionKey === 'code') { + return ; + } - return ; + return ; } function getDefaultOptionKey(section: ExportSection): string { - return section.items[0]?.key ?? ''; + return section.items[0]?.key ?? ''; } function getInitialSelectedKeys(sections: ExportSection[]): Record { - 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]), - }; + 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 ; - } + if (actionKey === 'download') { + return ; + } + + return ; +} - return ; +function getActionLabel( + t: ReturnType['t'], + action: ExportActionKey +): string { + if (action === 'download') { + return t('export.actionDownload', 'Download'); + } + + return t('export.actionCopy', 'Copy'); } -export function ExportMenuPanel({ onSelect }: ExportMenuPanelProps): React.ReactElement { - const { t } = useTranslation(); +export function ExportMenuPanel({ + onSelect, + cinematicSpeed = 'normal', + onCinematicSpeedChange, + cinematicResolution = '1080p', + onCinematicResolutionChange, + cinematicTransparent = false, + onCinematicTransparentChange, +}: ExportMenuPanelProps): React.ReactElement { + const { t } = useTranslation(); - const sections = useMemo(() => [ - { - 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 sections = useMemo( + () => [ + { + 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: t('export.hintDocument', 'Document'), + Icon: FileText, + actions: ['download'], + }, + ], + }, + { + key: 'video', + title: t('export.sectionVideo', 'Video & Animation'), + 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: t('export.sectionCode', 'Code & Data'), + 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.actionCopy', 'Copy'), + Icon: Wand2, + actions: ['download', 'copy'], + }, + { + key: 'mermaid', + label: t('export.mermaid', 'Mermaid'), + hint: t('export.actionCopy', 'Copy'), + Icon: GitBranch, + actions: ['download', 'copy'], + }, + { + key: 'plantuml', + label: t('export.plantuml', 'PlantUML'), + hint: t('export.actionCopy', 'Copy'), + Icon: FileCode, + actions: ['download', 'copy'], + }, + { + key: 'figma', + label: t('export.figmaEditable', 'Figma Editable'), + hint: t('export.hintEditableSvg', 'Editable SVG'), + Icon: Figma, + actions: ['download', 'copy'], + }, + ], + }, + ], + [t] + ); - const tabs = useMemo(() => sections.map((section) => ({ + const tabs = useMemo( + () => + sections.map((section) => ({ id: section.key, label: section.title, icon: {getSectionIcon(section.key)}, - })), [sections]); + })), + [sections] + ); - const [activeSectionKey, setActiveSectionKey] = useState('image'); - const [selectedKeys, setSelectedKeys] = useState>(() => getInitialSelectedKeys(sections)); + const [activeSectionKey, setActiveSectionKey] = useState('image'); + const [selectedKeys, setSelectedKeys] = useState>(() => + 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, - })); + 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 handleSectionChange(nextTab: string): void { - setActiveSectionKey(nextTab as ExportCategoryKey); - } + function handleOptionChange(nextKey: string): void { + setSelectedKeys((current) => ({ + ...current, + [activeSectionKey]: nextKey, + })); + } - function handleOptionChange(nextKey: string): void { - setSelectedKeys((current) => ({ - ...current, - [activeSectionKey]: nextKey, - })); - } + return ( +
+
+

+ {t('export.title', 'Export')} +

+

+ {t('export.subtitle', 'Choose a format and action.')} +

+
- function getActionLabel(action: ExportActionKey): string { - if (action === 'download') { - return t('export.actionDownload', 'Download'); - } +
+ +
- return 'Copy'; - } +
+
+ +

+ {activeSection.title} +

+
- return ( -
-
-

- {t('export.title', 'Export')} -

-

- Choose a format and action. -

-
+
+ -
+ {activeSectionKey === 'video' && onCinematicTransparentChange && ( +
+

+ {t('export.transparentBackground', 'Transparent background')} +

+ +
+ )} -
1 ? 'grid-cols-2' : 'grid-cols-1'}`}> - {selectedItem.actions.map((action) => ( - - ))} -
-
+
1 ? 'grid-cols-2' : 'grid-cols-1'}`} + > + {selectedItem.actions.map((action) => ( + + ))}
- ); +
+
+ ); } diff --git a/src/components/FlowCanvas.tsx b/src/components/FlowCanvas.tsx index e63dc6ff..50372534 100644 --- a/src/components/FlowCanvas.tsx +++ b/src/components/FlowCanvas.tsx @@ -2,10 +2,9 @@ import React, { useCallback, useEffect, useRef } from 'react'; import { useTranslation } from 'react-i18next'; import { useShallow } from 'zustand/react/shallow'; import ReactFlow, { - Background, - useReactFlow, - useViewport, - toFlowNode, + Background, + useReactFlow, + toFlowNode, } from '@/lib/reactflowCompat'; import { useFlowStore } from '../store'; import type { FlowNode, NodeData } from '../lib/types'; @@ -36,291 +35,317 @@ import { useCanvasViewSettings } from '@/store/viewHooks'; import { useMermaidDiagnosticsActions } from '@/store/selectionHooks'; interface FlowCanvasProps { - recordHistory: () => void; - isSelectMode: boolean; - onCanvasEntityIntent?: () => void; + recordHistory: () => void; + isSelectMode: boolean; + onCanvasEntityIntent?: () => void; } export const FlowCanvas: React.FC = ({ - recordHistory, - isSelectMode, - onCanvasEntityIntent, + recordHistory, + isSelectMode, + onCanvasEntityIntent, }) => { - const { t } = useTranslation(); - const visualQualityV2Enabled = true; - const { nodes, edges } = useCanvasState(); - const { onNodesChange, onEdgesChange, setNodes, setEdges } = useCanvasActions(); - const activeTabId = useActiveTabId(); - const { updateTab } = useTabActions(); - const { setSelectedNodeId, setSelectedEdgeId } = useSelectionActions(); - const { setMermaidDiagnostics, clearMermaidDiagnostics } = useMermaidDiagnosticsActions(); - const { showGrid, snapToGrid, alignmentGuidesEnabled, largeGraphSafetyMode, largeGraphSafetyProfile, architectureStrictMode } = useCanvasViewSettings(); - const { layers } = useFlowStore(useShallow((state) => ({ - layers: state.layers, - }))); - const { addToast } = useToast(); - const { - safetyModeActive, - viewportCullingEnabled, - effectiveShowGrid, - layerAdjustedNodes, - effectiveEdges, - } = useFlowCanvasViewState({ - nodes, - edges, - layers, - showGrid, - largeGraphSafetyMode, - largeGraphSafetyProfile, - }); - const reactFlowWrapper = useRef(null); - const connectMenuSetterRef = useRef<((value: ConnectMenuState | null) => void) | null>(null); + const { t } = useTranslation(); + const { nodes, edges } = useCanvasState(); + const { onNodesChange, onEdgesChange, setNodes, setEdges } = useCanvasActions(); + const activeTabId = useActiveTabId(); + const { updateTab } = useTabActions(); + const { setSelectedNodeId, setSelectedEdgeId } = useSelectionActions(); + const { setMermaidDiagnostics, clearMermaidDiagnostics } = useMermaidDiagnosticsActions(); + const { + showGrid, + snapToGrid, + alignmentGuidesEnabled, + largeGraphSafetyMode, + largeGraphSafetyProfile, + architectureStrictMode, + } = useCanvasViewSettings(); + const { layers } = useFlowStore( + useShallow((state) => ({ + layers: state.layers, + })) + ); + const { addToast } = useToast(); + const { + safetyModeActive, + viewportCullingEnabled, + effectiveShowGrid, + layerAdjustedNodes, + effectiveEdges, + } = useFlowCanvasViewState({ + nodes, + edges, + layers, + showGrid, + largeGraphSafetyMode, + largeGraphSafetyProfile, + }); + const reactFlowWrapper = useRef(null); + const connectMenuSetterRef = useRef<((value: ConnectMenuState | null) => void) | null>(null); - const { screenToFlowPosition, fitView } = useReactFlow(); - const { zoom, x: viewportX, y: viewportY } = useViewport(); - const clearPaneSelection = useCallback((): void => { - setSelectedNodeId(null); - setSelectedEdgeId(null); - }, [setSelectedEdgeId, setSelectedNodeId]); - // --- Operations --- - const { - onConnect, onSelectionChange, onNodeDoubleClick, - onNodeDragStart, onNodeDragStop, - onConnectStart, onConnectEnd, - handleAddAndConnect, - handleAddDomainLibraryItemAndConnect, - handleAddNode, - deleteNode, deleteEdge, duplicateNode, - updateNodeType, updateNodeZIndex, - pasteSelection, copySelection, - handleAlignNodes, handleDistributeNodes, handleGroupNodes, - onReconnect, - onNodeDrag, - handleAddImage - } = useFlowOperations( - recordHistory, - (position, sourceId, sourceHandle, sourceType) => { - connectMenuSetterRef.current?.({ position, sourceId, sourceHandle, sourceType }); - } - ); - const { - connectMenu, - setConnectMenu, - contextMenu, - onNodeContextMenu, - onPaneContextMenu, - onEdgeContextMenu, - onPaneClick, - onCloseContextMenu, - contextActions, - } = useFlowCanvasMenusAndActions({ - onPaneSelectionClear: clearPaneSelection, - screenToFlowPosition, - copySelection, - pasteSelection, - duplicateNode, - deleteNode, - deleteEdge, - updateNodeZIndex, - updateNodeType, - handleAlignNodes, - handleDistributeNodes, - handleGroupNodes, - nodes, - }); - useEffect(() => { - connectMenuSetterRef.current = setConnectMenu; - }, [setConnectMenu]); + const { screenToFlowPosition, fitView } = useReactFlow(); + const clearPaneSelection = useCallback((): void => { + setSelectedNodeId(null); + setSelectedEdgeId(null); + }, [setSelectedEdgeId, setSelectedNodeId]); + // --- Operations --- + const { + onConnect, + onSelectionChange, + onNodeDoubleClick, + onNodeDragStart, + onNodeDragStop, + onConnectStart, + onConnectEnd, + handleAddAndConnect, + handleAddDomainLibraryItemAndConnect, + handleAddNode, + deleteNode, + deleteEdge, + duplicateNode, + updateNodeType, + updateNodeData, + updateNodeZIndex, + fitSectionToContents, + releaseFromSection, + handleBringContentsIntoSection, + pasteSelection, + copySelection, + handleAlignNodes, + handleDistributeNodes, + handleGroupNodes, + handleWrapInSection, + onReconnect, + onNodeDrag, + handleAddImage, + } = useFlowOperations(recordHistory, (position, sourceId, sourceHandle, sourceType) => { + connectMenuSetterRef.current?.({ position, sourceId, sourceHandle, sourceType }); + }); + const { + connectMenu, + setConnectMenu, + contextMenu, + onNodeContextMenu, + onSelectionContextMenu, + onPaneContextMenu, + onEdgeContextMenu, + onPaneClick, + onCloseContextMenu, + contextActions, + } = useFlowCanvasMenusAndActions({ + onPaneSelectionClear: clearPaneSelection, + screenToFlowPosition, + copySelection, + pasteSelection, + duplicateNode, + deleteNode, + deleteEdge, + updateNodeZIndex, + updateNodeType, + updateNodeData, + fitSectionToContents, + releaseFromSection, + bringContentsIntoSection: handleBringContentsIntoSection, + handleAlignNodes, + handleDistributeNodes, + handleGroupNodes, + handleWrapInSection, + nodes, + }); + useEffect(() => { + connectMenuSetterRef.current = setConnectMenu; + }, [setConnectMenu]); - const { onDragOver, onDrop } = useFlowCanvasDragDrop({ - screenToFlowPosition, - handleAddImage, - }); + const { onDragOver, onDrop } = useFlowCanvasDragDrop({ + screenToFlowPosition, + handleAddImage, + }); - // --- Keyboard Shortcuts --- - const { isSelectionModifierPressed } = useModifierKeys(); - useEdgeInteractions(); + // --- Keyboard Shortcuts --- + const { isSelectionModifierPressed } = useModifierKeys(); + useEdgeInteractions(); - const isEffectiveSelectMode = isSelectMode || isSelectionModifierPressed; - const { lowDetailModeActive, farZoomReductionActive } = useFlowCanvasZoomLod({ - safetyModeActive, - zoom, - largeGraphSafetyProfile, + const isEffectiveSelectMode = isSelectMode || isSelectionModifierPressed; + const { lowDetailModeActive, farZoomReductionActive } = useFlowCanvasZoomLod({ + safetyModeActive, + largeGraphSafetyProfile, + }); + const { interactionLowDetailModeActive, startInteractionLowDetail, endInteractionLowDetail } = + useFlowCanvasInteractionLod({ + safetyModeActive, + largeGraphSafetyProfile, }); - const { - interactionLowDetailModeActive, - startInteractionLowDetail, - endInteractionLowDetail, - } = useFlowCanvasInteractionLod({ - safetyModeActive, - largeGraphSafetyProfile, - }); - const reactFlowConfig = useFlowCanvasReactFlowConfig({ - visualQualityV2Enabled, - isEffectiveSelectMode, - viewportCullingEnabled, - effectiveEdges, - }); - const { isConnecting, onConnectStartWrapper, onConnectEndWrapper } = useFlowCanvasConnectionState({ - onConnectStart: (event, params) => { - onConnectStart(event as Parameters[0], params as Parameters[1]); - }, - onConnectEnd: (event) => { - onConnectEnd(event as Parameters[0]); - }, - }); - const getCanvasCenterFlowPosition = (): { x: number; y: number } => { - if (!reactFlowWrapper.current) { - return screenToFlowPosition({ x: window.innerWidth / 2, y: window.innerHeight / 2 }); - } - const rect = reactFlowWrapper.current.getBoundingClientRect(); - return screenToFlowPosition({ - x: rect.left + rect.width / 2, - y: rect.top + rect.height / 2, - }); - }; - - const { - alignmentGuides, - selectionDragPreview, - handleNodeDragStart, - handleNodeDrag, - handleNodeDragStop, - } = useFlowCanvasSelectionTools({ - layerAdjustedNodes, - edges: effectiveEdges, - alignmentGuidesEnabled, - toTypedFlowNode: (node) => toTypedFlowNode(node as Parameters[0]), - onNodeDragStart: (event, node) => onNodeDragStart(event as Parameters[0], node), - onNodeDrag: (event, node, draggedNodes) => onNodeDrag(event as Parameters[0], node, draggedNodes), - onNodeDragStop: (event, node) => onNodeDragStop(event as Parameters[0], node), - startInteractionLowDetail, - endInteractionLowDetail, + const reactFlowConfig = useFlowCanvasReactFlowConfig({ + visualQualityV2Enabled: true, + isEffectiveSelectMode, + viewportCullingEnabled, + effectiveEdges, + }); + const { isConnecting, onConnectStartWrapper, onConnectEndWrapper } = useFlowCanvasConnectionState( + { + onConnectStart: (event, params) => { + onConnectStart( + event as Parameters[0], + params as Parameters[1] + ); + }, + onConnectEnd: (event) => { + onConnectEnd(event as Parameters[0]); + }, + } + ); + const getCanvasCenterFlowPosition = (): { x: number; y: number } => { + if (!reactFlowWrapper.current) { + return screenToFlowPosition({ x: window.innerWidth / 2, y: window.innerHeight / 2 }); + } + const rect = reactFlowWrapper.current.getBoundingClientRect(); + return screenToFlowPosition({ + x: rect.left + rect.width / 2, + y: rect.top + rect.height / 2, }); + }; - const onCanvasDoubleClickCapture = (event: React.MouseEvent): void => { - if (!isCanvasBackgroundTarget(event.target)) return; - const position = screenToFlowPosition({ x: event.clientX, y: event.clientY }); - handleAddNode(position); - }; + const { + alignmentGuides, + selectionDragPreview, + handleNodeDragStart, + handleNodeDrag, + handleNodeDragStop, + } = useFlowCanvasSelectionTools({ + layerAdjustedNodes, + edges: effectiveEdges, + alignmentGuidesEnabled, + toTypedFlowNode: (node) => toTypedFlowNode(node as Parameters[0]), + onNodeDragStart: (event, node) => + onNodeDragStart(event as Parameters[0], node), + onNodeDrag: (event, node, draggedNodes) => + onNodeDrag(event as Parameters[0], node, draggedNodes), + onNodeDragStop: (event, node) => + onNodeDragStop(event as Parameters[0], node), + startInteractionLowDetail, + endInteractionLowDetail, + }); - function toTypedFlowNode(node: Parameters[0]): FlowNode { - return toFlowNode(node); - } + const onCanvasDoubleClickCapture = (event: React.MouseEvent): void => { + if (!isCanvasBackgroundTarget(event.target)) return; + const position = screenToFlowPosition({ x: event.clientX, y: event.clientY }); + handleAddNode(position); + }; - const { handleCanvasPaste } = useFlowCanvasPaste({ - architectureStrictMode, - activeTabId, - fitView, - updateTab, - recordHistory, - setNodes, - setEdges, - setSelectedNodeId, - setMermaidDiagnostics, - clearMermaidDiagnostics, - addToast, - strictModePasteBlockedMessage: t( - 'flowCanvas.strictModePasteBlocked', - 'Architecture strict mode blocked Mermaid paste. Open Code view, fix diagnostics, then retry.' - ), - pasteSelection, - getCanvasCenterFlowPosition, - }); + function toTypedFlowNode(node: Parameters[0]): FlowNode { + return toFlowNode(node); + } - React.useEffect(() => { - setEdgeInteractionLowDetailMode(interactionLowDetailModeActive); - return () => { - setEdgeInteractionLowDetailMode(false); - }; - }, [interactionLowDetailModeActive]); + const { handleCanvasPaste } = useFlowCanvasPaste({ + architectureStrictMode, + activeTabId, + fitView, + updateTab, + recordHistory, + setNodes, + setEdges, + setSelectedNodeId, + setMermaidDiagnostics, + clearMermaidDiagnostics, + addToast, + strictModePasteBlockedMessage: t( + 'flowCanvas.strictModePasteBlocked', + 'Architecture strict mode blocked Mermaid paste. Open Code view, fix diagnostics, then retry.' + ), + pasteSelection, + getCanvasCenterFlowPosition, + }); - return ( -
- { + setEdgeInteractionLowDetailMode(interactionLowDetailModeActive); + return () => { + setEdgeInteractionLowDetailMode(false); + }; + }, [interactionLowDetailModeActive]); - onConnectStart={onConnectStartWrapper} - onConnectEnd={onConnectEndWrapper} - onDragOver={onDragOver} - onDrop={onDrop} - nodeTypes={flowCanvasNodeTypes} - edgeTypes={flowCanvasEdgeTypes} - fitView - className={reactFlowConfig.className} - minZoom={0.1} - onlyRenderVisibleElements={reactFlowConfig.onlyRenderVisibleElements} - connectionMode={reactFlowConfig.connectionMode} - isValidConnection={reactFlowConfig.isValidConnection} - selectionOnDrag={reactFlowConfig.selectionOnDrag} - selectNodesOnDrag={reactFlowConfig.selectNodesOnDrag} - selectionKeyCode={reactFlowConfig.selectionKeyCode} - panOnDrag={reactFlowConfig.panOnDrag} - panActivationKeyCode={reactFlowConfig.panActivationKeyCode} - selectionMode={reactFlowConfig.selectionMode} - multiSelectionKeyCode={reactFlowConfig.multiSelectionKeyCode} - zoomActivationKeyCode={reactFlowConfig.zoomActivationKeyCode} - zoomOnScroll={reactFlowConfig.zoomOnScroll} - zoomOnPinch={reactFlowConfig.zoomOnPinch} - panOnScroll={reactFlowConfig.panOnScroll} - panOnScrollMode={reactFlowConfig.panOnScrollMode} - preventScrolling={reactFlowConfig.preventScrolling} - zoomOnDoubleClick={reactFlowConfig.zoomOnDoubleClick} - defaultEdgeOptions={reactFlowConfig.defaultEdgeOptions} - connectionLineComponent={CustomConnectionLine} - snapToGrid={snapToGrid} - > - {effectiveShowGrid && ( - - )} - - - -
- ); + return ( +
+ + {effectiveShowGrid && ( + + )} + + + +
+ ); }; diff --git a/src/components/FlowEditor.tsx b/src/components/FlowEditor.tsx index fcbedb9e..60e75d64 100644 --- a/src/components/FlowEditor.tsx +++ b/src/components/FlowEditor.tsx @@ -9,85 +9,91 @@ import { DiagramDiffProvider } from '@/context/DiagramDiffContext'; import { ShareEmbedModal } from '@/components/ShareEmbedModal'; 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%)'; + '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; + onGoHome: () => void; } export function FlowEditor({ onGoHome }: FlowEditorProps) { - const cinematicExportState = useCinematicExportState(); - const { - nodes, - edges, - tabs, - activeTabId, - viewSettings, - diffBaseline, - setDiffBaseline, - recordHistory, - isSelectMode, - reactFlowWrapper, - fileInputRef, - onFileImport, - shareViewerUrl, - clearShareViewerUrl, - collaborationEnabled, - remotePresence, - collaborationNodePositions, - isLayouting, - flowEditorController, - t, - } = useFlowEditorScreenModel({ onGoHome }); + const cinematicExportState = useCinematicExportState(); + const { + nodes, + edges, + pages, + activePageId, + viewSettings, + diffBaseline, + setDiffBaseline, + recordHistory, + isSelectMode, + reactFlowWrapper, + fileInputRef, + onFileImport, + shareViewerUrl, + clearShareViewerUrl, + collaborationEnabled, + remotePresence, + collaborationNodePositions, + isLayouting, + flowEditorController, + t, + } = useFlowEditorScreenModel({ onGoHome }); - return ( - setDiffBaseline(null)}> - -
- - )} - 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} - /> + return ( + setDiffBaseline(null)} + > + +
+ + } + 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} + /> - - {shareViewerUrl && ( - - )} -
- - - ); + + {shareViewerUrl && ( + + )} +
+ + + ); } diff --git a/src/components/FlowEditorEmptyState.tsx b/src/components/FlowEditorEmptyState.tsx index 6bdd5315..f1cfc31a 100644 --- a/src/components/FlowEditorEmptyState.tsx +++ b/src/components/FlowEditorEmptyState.tsx @@ -26,7 +26,7 @@ export function FlowEditorEmptyState({ return (
-
+
@@ -75,7 +75,7 @@ export function FlowEditorEmptyState({
- Press ⌘K for command center + Press ⌘K for command center
diff --git a/src/components/FlowEditorLayoutOverlay.tsx b/src/components/FlowEditorLayoutOverlay.tsx index e0b905f2..6cd0136c 100644 --- a/src/components/FlowEditorLayoutOverlay.tsx +++ b/src/components/FlowEditorLayoutOverlay.tsx @@ -6,13 +6,13 @@ interface FlowEditorLayoutOverlayProps { export function FlowEditorLayoutOverlay({ message }: FlowEditorLayoutOverlayProps): React.ReactElement { return ( -
-
+
+
- {message} + {message}
); diff --git a/src/components/FlowEditorPanels.test.tsx b/src/components/FlowEditorPanels.test.tsx index db2b9bb4..ec0aaa6a 100644 --- a/src/components/FlowEditorPanels.test.tsx +++ b/src/components/FlowEditorPanels.test.tsx @@ -73,6 +73,9 @@ const baseProps = { onDuplicateNode: vi.fn(), onDeleteEdge: vi.fn(), onUpdateZIndex: vi.fn(), + onFitSectionToContents: vi.fn(), + onReleaseFromSection: vi.fn(), + onBringContentsIntoSection: vi.fn(), onAddMindmapChild: vi.fn(), onAddMindmapSibling: vi.fn(), onAddArchitectureService: vi.fn(), diff --git a/src/components/FlowEditorPanels.tsx b/src/components/FlowEditorPanels.tsx index 2efdd535..ea1d650a 100644 --- a/src/components/FlowEditorPanels.tsx +++ b/src/components/FlowEditorPanels.tsx @@ -3,7 +3,12 @@ import { ErrorBoundary } from './ErrorBoundary'; import { RightRail } from './RightRail'; import type { FlowEdge, FlowNode, FlowSnapshot } from '@/lib/types'; import type { ChatMessage } from '@/services/aiService'; -import type { CommandBarView, FlowEditorMode, StudioCodeMode, StudioTab } from '@/hooks/useFlowEditorUIState'; +import type { + CommandBarView, + FlowEditorMode, + StudioCodeMode, + StudioTab, +} from '@/hooks/useFlowEditorUIState'; import type { LayoutAlgorithm } from '@/services/elkLayout'; import type { FlowTemplate } from '@/services/templates'; import type { EdgeData, NodeData } from '@/lib/types'; @@ -14,288 +19,330 @@ import type { AIReadinessState } from '@/hooks/ai-generation/readiness'; import type { PropertiesPanel as PropertiesPanelComponent } from './PropertiesPanel'; +function CommandBarSkeleton(): React.ReactElement { + return ( +
+
+
+
+
+
+
+
+
+ ); +} + const LazyCommandBar = lazy(async () => { - const module = await import('./CommandBar'); - return { default: module.CommandBar }; + const module = await import('./CommandBar'); + return { default: module.CommandBar }; }); const LazyPropertiesPanel = lazy(async () => { - const module = await import('./PropertiesPanel'); - return { default: module.PropertiesPanel }; + const module = await import('./PropertiesPanel'); + return { default: module.PropertiesPanel }; }); const LazySnapshotsPanel = lazy(async () => { - const module = await import('./SnapshotsPanel'); - return { default: module.SnapshotsPanel }; + const module = await import('./SnapshotsPanel'); + return { default: module.SnapshotsPanel }; }); const LazyStudioPanel = lazy(async () => { - const module = await import('./StudioPanel'); - return { default: module.StudioPanel }; + const module = await import('./StudioPanel'); + return { default: module.StudioPanel }; }); export interface CommandBarPanelProps { - isOpen: boolean; - onClose: () => void; - nodes: FlowNode[]; - edges: FlowEdge[]; - onUndo: () => void; - onRedo: () => void; - onLayout: ( - direction?: 'TB' | 'LR' | 'RL' | 'BT', - algorithm?: LayoutAlgorithm, - spacing?: 'compact' | 'normal' | 'loose' - ) => Promise; - onSelectTemplate: (template: FlowTemplate) => void; - onOpenStudioAI: () => void; - onOpenStudioOpenFlow: () => void; - onOpenStudioMermaid: () => void; - onOpenStudioPlayback: () => void; - initialView: CommandBarView; - onAddAnnotation: () => void; - onAddSection: () => void; - onAddText: () => void; - 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; - onSqlAnalysis?: (sql: string) => Promise; - onTerraformAnalysis?: (input: string, format: TerraformInputFormat) => Promise; - onOpenApiAnalysis?: (spec: string) => Promise; - showGrid: boolean; - onToggleGrid: () => void; - snapToGrid: boolean; - onToggleSnap: () => void; + isOpen: boolean; + onClose: () => void; + nodes: FlowNode[]; + edges: FlowEdge[]; + onUndo: () => void; + onRedo: () => void; + onLayout: ( + direction?: 'TB' | 'LR' | 'RL' | 'BT', + algorithm?: LayoutAlgorithm, + spacing?: 'compact' | 'normal' | 'loose' + ) => Promise; + onSelectTemplate: (template: FlowTemplate) => void; + onOpenStudioAI: () => void; + onOpenStudioOpenFlow: () => void; + onOpenStudioMermaid: () => void; + onOpenStudioPlayback: () => void; + initialView: CommandBarView; + onAddAnnotation: () => void; + onAddSection: () => void; + onAddText: () => void; + 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; + onSqlAnalysis?: (sql: string) => Promise; + onTerraformAnalysis?: (input: string, format: TerraformInputFormat) => Promise; + onOpenApiAnalysis?: (spec: string) => Promise; + onApplyDsl?: (dsl: string) => void; + onCodebaseAnalysis?: (summary: string) => Promise; + showGrid: boolean; + onToggleGrid: () => void; + snapToGrid: boolean; + onToggleSnap: () => void; } export interface SnapshotsPanelProps { - isOpen: boolean; - onClose: () => void; - snapshots: FlowSnapshot[]; - manualSnapshots: FlowSnapshot[]; - autoSnapshots: FlowSnapshot[]; - onSaveSnapshot: (name: string) => void; - onRestoreSnapshot: (snapshot: FlowSnapshot) => void; - onDeleteSnapshot: (id: string) => void; - onCompareSnapshot?: (snapshot: FlowSnapshot) => void; + isOpen: boolean; + onClose: () => void; + snapshots: FlowSnapshot[]; + manualSnapshots: FlowSnapshot[]; + autoSnapshots: FlowSnapshot[]; + onSaveSnapshot: (name: string) => void; + onRestoreSnapshot: (snapshot: FlowSnapshot) => void; + onDeleteSnapshot: (id: string) => void; + onCompareSnapshot?: (snapshot: FlowSnapshot) => void; } export interface PropertiesRailProps { - selectedNode: FlowNode | null; - selectedNodes: FlowNode[]; - selectedEdge: FlowEdge | null; - onChangeNode: (id: string, data: Partial) => void; - onBulkChangeNodes: React.ComponentProps['onBulkChangeNodes']; - onChangeNodeType: (id: string, type: string) => void; - onChangeEdge: (id: string, data: Partial) => void; - onDeleteNode: (id: string) => void; - onDuplicateNode: (id: string) => void; - onDeleteEdge: (id: string) => void; - onUpdateZIndex: (id: string, action: 'front' | 'back') => void; - onAddMindmapChild: React.ComponentProps['onAddMindmapChild']; - onAddMindmapSibling: React.ComponentProps['onAddMindmapSibling']; - onAddArchitectureService: React.ComponentProps['onAddArchitectureService']; - onCreateArchitectureBoundary: React.ComponentProps['onCreateArchitectureBoundary']; - onApplyArchitectureTemplate: React.ComponentProps['onApplyArchitectureTemplate']; - onGenerateEntityFields: React.ComponentProps['onGenerateEntityFields']; - onSuggestArchitectureNode: React.ComponentProps['onSuggestArchitectureNode']; - onConvertEntitySelectionToClassDiagram: React.ComponentProps['onConvertEntitySelectionToClassDiagram']; - onOpenMermaidCodeEditor: React.ComponentProps['onOpenMermaidCodeEditor']; - onClose: () => void; + selectedNode: FlowNode | null; + selectedNodes: FlowNode[]; + selectedEdge: FlowEdge | null; + onChangeNode: (id: string, data: Partial) => void; + onBulkChangeNodes: React.ComponentProps['onBulkChangeNodes']; + onChangeNodeType: (id: string, type: string) => void; + onChangeEdge: (id: string, data: Partial) => void; + onDeleteNode: (id: string) => void; + onDuplicateNode: (id: string) => void; + onDeleteEdge: (id: string) => void; + onUpdateZIndex: (id: string, action: 'front' | 'back') => void; + onFitSectionToContents: (id: string) => void; + onReleaseFromSection: (id: string) => void; + onBringContentsIntoSection: (id: string) => void; + onAddMindmapChild: React.ComponentProps['onAddMindmapChild']; + onAddMindmapSibling: React.ComponentProps['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; - 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; - onTabChange: (tab: StudioTab) => void; - codeMode: StudioCodeMode; - onCodeModeChange: (mode: StudioCodeMode) => void; - playback: { - currentStepIndex: number; - totalSteps: number; - isPlaying: boolean; - onStartPlayback: () => void; - onPlayPause: () => void; - onStop: () => void; - onScrubToStep: (index: number) => void; - onNext: () => void; - onPrev: () => void; - playbackSpeed: number; - onPlaybackSpeedChange: (durationMs: number) => void; - }; - initialPrompt?: string; - onInitialPromptConsumed?: () => void; + onClose: () => void; + onApply: (nodes: FlowNode[], edges: FlowEdge[]) => void; + onAIGenerate: (prompt: string, imageBase64?: string) => Promise; + 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; + onTabChange: (tab: StudioTab) => void; + codeMode: StudioCodeMode; + onCodeModeChange: (mode: StudioCodeMode) => void; + playback: { + currentStepIndex: number; + totalSteps: number; + isPlaying: boolean; + onStartPlayback: () => void; + onPlayPause: () => void; + onStop: () => void; + onScrubToStep: (index: number) => void; + onNext: () => void; + onPrev: () => void; + playbackSpeed: number; + onPlaybackSpeedChange: (durationMs: number) => void; + }; + initialPrompt?: string; + onInitialPromptConsumed?: () => void; } export interface FlowEditorPanelsProps { - commandBar: CommandBarPanelProps; - snapshots: SnapshotsPanelProps; - properties: PropertiesRailProps; - studio: StudioRailProps; - isHistoryOpen: boolean; - editorMode: FlowEditorMode; + commandBar: CommandBarPanelProps; + snapshots: SnapshotsPanelProps; + properties: PropertiesRailProps; + studio: StudioRailProps; + isHistoryOpen: boolean; + editorMode: FlowEditorMode; } export function FlowEditorPanels({ - commandBar, - snapshots, - properties, - studio, - isHistoryOpen, - editorMode, + commandBar, + snapshots, + properties, + studio, + isHistoryOpen, + editorMode, }: FlowEditorPanelsProps): React.ReactElement { - const showPropertiesRail = editorMode === 'canvas' && Boolean(properties.selectedNode || properties.selectedEdge || properties.selectedNodes.length > 1); - const showStudioRail = editorMode === 'studio'; - const railContent = showStudioRail ? ( - - 1 + ); + const showStudioRail = editorMode === 'studio'; + const railContent = showStudioRail ? ( + + + + ) : showPropertiesRail ? ( + + + + ) : null; + + return ( + <> + + {commandBar.isOpen ? ( + }> + - - ) : showPropertiesRail ? ( + + ) : null} + + + {isHistoryOpen ? ( - + - ) : null; - - return ( - <> - - {commandBar.isOpen ? ( - - - - ) : null} - + ) : null} - {isHistoryOpen ? ( - - - - ) : null} - - - {railContent ? {railContent} : null} - - - ); + + {railContent ? {railContent} : null} + + + ); } diff --git a/src/components/FlowTabs.tsx b/src/components/FlowTabs.tsx index 55e28602..2270e6c8 100644 --- a/src/components/FlowTabs.tsx +++ b/src/components/FlowTabs.tsx @@ -1,42 +1,42 @@ import React, { useState } from 'react'; 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'; +import type { EditorPage } from '@/store/editorPageHooks'; interface FlowTabsProps { - tabs: FlowTab[]; - activeTabId: string; - onSwitchTab: (tabId: string) => void; - onAddTab: () => void; - onCloseTab: (tabId: string) => void; - onRenameTab: (tabId: string, newName: string) => void; + pages: EditorPage[]; + activePageId: string; + onSwitchPage: (pageId: string) => void; + onAddPage: () => void; + onClosePage: (pageId: string) => void; + onRenamePage: (pageId: string, newName: string) => void; } export const FlowTabs: React.FC = ({ - tabs, - activeTabId, - onSwitchTab, - onAddTab, - onCloseTab, - onRenameTab, + pages, + activePageId, + onSwitchPage, + onAddPage, + onClosePage, + onRenamePage, }) => { const { t } = useTranslation(); const isBeveled = IS_BEVELED; const [editingTabId, setEditingTabId] = useState(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 inactiveTabClassName = `${getSegmentedTabButtonClass(false, 'sm')} h-10 sm:h-9 border-[var(--color-brand-border)] bg-[var(--brand-surface)] text-[var(--brand-secondary)] hover:border-[var(--color-brand-border)] hover:bg-[var(--brand-background)] hover:text-[var(--brand-text)]`; - const handleStartEdit = (tab: FlowTab) => { - setEditingTabId(tab.id); - setEditName(tab.name); + const handleStartEdit = (page: EditorPage) => { + setEditingTabId(page.id); + setEditName(page.name); }; const handleFinishEdit = () => { if (editingTabId && editName.trim()) { - onRenameTab(editingTabId, editName.trim()); + onRenamePage(editingTabId, editName.trim()); } setEditingTabId(null); setEditName(''); @@ -53,46 +53,55 @@ export const FlowTabs: React.FC = ({ return (
-
- {tabs.map((tab) => ( +
+ {pages.map((page) => (
onSwitchTab(tab.id)} - onDoubleClick={() => handleStartEdit(tab)} - title={tab.name} + onClick={() => onSwitchPage(page.id)} + onDoubleClick={() => handleStartEdit(page)} + onKeyDown={(e) => { + if (e.key === 'Enter' || e.key === ' ') { + e.preventDefault(); + onSwitchPage(page.id); + } + }} + title={page.name} > - {editingTabId === tab.id ? ( + {editingTabId === page.id ? ( setEditName(e.target.value)} onBlur={handleFinishEdit} onKeyDown={handleKeyDown} - 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)]" + className="bg-[var(--brand-surface)] 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()} /> ) : ( - {tab.name} + {page.name} )}
-
+
); }; diff --git a/src/components/GroupNode.tsx b/src/components/GroupNode.tsx index d37ce841..a59fb7cb 100644 --- a/src/components/GroupNode.tsx +++ b/src/components/GroupNode.tsx @@ -4,126 +4,145 @@ 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 { getConnectorHandleStyle, getHandlePointerEvents, getV2HandleVisibilityClass } from './handleInteraction'; +import { + getConnectorHandleStyle, + getHandlePointerEvents, + getV2HandleVisibilityClass, +} from './handleInteraction'; import { NodeTransformControls } from './NodeTransformControls'; import { useActiveNodeSelection } from './useActiveNodeSelection'; +import { resolveSectionVisualStyle } from '@/theme'; const GROUP_HANDLE_CONFIG: Array<{ - id: string; - position: Position; - side: 'top' | 'right' | 'bottom' | 'left'; + id: string; + position: Position; + side: 'top' | 'right' | 'bottom' | 'left'; }> = [ - { id: 'top-target', position: Position.Top, side: 'top' }, - { id: 'right-source', position: Position.Right, side: 'right' }, - { id: 'bottom-source', position: Position.Bottom, side: 'bottom' }, - { id: 'left-target', position: Position.Left, side: 'left' }, + { id: 'top-target', position: Position.Top, side: 'top' }, + { id: 'right-source', position: Position.Right, side: 'right' }, + { id: 'bottom-source', position: Position.Bottom, side: 'bottom' }, + { id: 'left-target', position: Position.Left, side: 'left' }, ]; function GroupNode({ id, data, selected }: LegacyNodeProps): React.ReactElement { - const [collapsed, setCollapsed] = useState(false); - const { setNodes } = useReactFlow(); - const allNodes = useNodes(); - const visualQualityV2Enabled = true; - const isActiveSelected = useActiveNodeSelection(Boolean(selected)); - const handlePointerEvents = getHandlePointerEvents(visualQualityV2Enabled, isActiveSelected); - const handleVisibilityClass = visualQualityV2Enabled - ? getV2HandleVisibilityClass(isActiveSelected, { includeConnectingState: false, includeScale: false }) - : 'opacity-0 hover:opacity-100'; + const [collapsed, setCollapsed] = useState(false); + const { setNodes } = useReactFlow(); + const allNodes = useNodes(); + const isActiveSelected = useActiveNodeSelection(Boolean(selected)); + const visualStyle = resolveSectionVisualStyle(data.color, data.colorMode, data.customColor, 'violet'); + const handlePointerEvents = getHandlePointerEvents(true, isActiveSelected); + const handleVisibilityClass = getV2HandleVisibilityClass(isActiveSelected, { + includeConnectingState: false, + includeScale: false, + }); - // Count children - const childCount = useMemo( - () => allNodes.filter((n) => getNodeParentId(n) === id).length, - [allNodes, id] - ); + // Count children + const childCount = useMemo( + () => allNodes.filter((n) => getNodeParentId(n) === id).length, + [allNodes, id] + ); - const toggleCollapse = useCallback(() => { - const next = !collapsed; - setCollapsed(next); - // Toggle visibility of child nodes - setNodes((nds) => - nds.map((n) => { - if (getNodeParentId(n) === id) { - return { ...n, hidden: next }; - } - return n; - }) - ); - }, [collapsed, id, setNodes]); + const toggleCollapse = useCallback(() => { + const next = !collapsed; + setCollapsed(next); + // Toggle visibility of child nodes + setNodes((nds) => + nds.map((n) => { + if (getNodeParentId(n) === id) { + return { ...n, hidden: next }; + } + return n; + }) + ); + }, [collapsed, id, setNodes]); - return ( - <> - -
+ +
+ {/* Header */} +
+ + {collapsed ? ( + + ) : ( + + )} + + {data.label || 'Group'} + + {data.subLabel && ( + - {/* Header */} -
- - {collapsed ? ( - - ) : ( - - )} - - {data.label || 'Group'} - - {data.subLabel && ( - - {data.subLabel} - - )} - - {childCount} {childCount === 1 ? 'node' : 'nodes'} - -
+ {data.subLabel} + + )} + + {childCount} {childCount === 1 ? 'node' : 'nodes'} + +
- {/* Collapsed summary */} - {collapsed && ( -
- Click to expand -
- )} -
+ {/* Collapsed summary */} + {collapsed && ( +
+ Click to expand +
+ )} +
- {/* Handles for group connections */} - {GROUP_HANDLE_CONFIG.map(({ id: handleId, position, side }) => ( - - ))} - - ); + {/* Handles for group connections */} + {GROUP_HANDLE_CONFIG.map(({ id: handleId, position, side }) => ( + + ))} + + ); } export default memo(GroupNode); diff --git a/src/components/HomePage.integration.test.tsx b/src/components/HomePage.integration.test.tsx index 88b4311d..e7c75112 100644 --- a/src/components/HomePage.integration.test.tsx +++ b/src/components/HomePage.integration.test.tsx @@ -3,6 +3,9 @@ import { MemoryRouter } from 'react-router-dom'; import { beforeEach, describe, expect, it, vi } from 'vitest'; import { HomePage } from './HomePage'; import { useFlowStore } from '@/store'; +import type { FlowTab } from '@/lib/types'; +import type { FlowDocument } from '@/services/storage/flowDocumentModel'; +import { WELCOME_MODAL_ENABLED_STORAGE_KEY, WELCOME_SEEN_STORAGE_KEY } from './home/welcomeModalState'; vi.mock('react-i18next', async (importOriginal) => { const actual = await importOriginal(); @@ -10,6 +13,10 @@ vi.mock('react-i18next', async (importOriginal) => { ...actual, useTranslation: () => ({ t: (_key: string, fallback?: string) => fallback ?? _key, + i18n: { + language: 'en', + changeLanguage: vi.fn(), + }, }), }; }); @@ -21,6 +28,8 @@ vi.mock('./LanguageSelector', () => ({ describe('HomePage integration flows', () => { beforeEach(() => { localStorage.clear(); + localStorage.setItem(WELCOME_MODAL_ENABLED_STORAGE_KEY, 'false'); + localStorage.setItem(WELCOME_SEEN_STORAGE_KEY, 'true'); useFlowStore.setState({}); }); @@ -31,6 +40,7 @@ describe('HomePage integration flows', () => { { }); } - it('switches from home to settings view via sidebar', async () => { + function createDocumentFromPages(id: string, name: string, pages: FlowTab[]): FlowDocument { + return { + id, + name, + createdAt: '2026-03-27T00:00:00.000Z', + updatedAt: pages[0]?.updatedAt ?? '2026-03-27T00:00:00.000Z', + activePageId: pages[0]?.id ?? '', + pages, + }; + } + + it('switches between home, templates, and settings views via sidebar', async () => { await renderHomePage(); - fireEvent.click(screen.getByText('Settings')); + fireEvent.click(screen.getByTestId('sidebar-templates')); + expect(screen.getByRole('heading', { name: 'Templates' })).toBeTruthy(); + expect(screen.getByText('Featured Templates')).toBeTruthy(); + + fireEvent.click(screen.getByTestId('sidebar-settings')); expect(screen.getByRole('heading', { name: 'Settings' })).toBeTruthy(); expect(screen.getByText('Flowpilot')).toBeTruthy(); }); + it('opens the selected template flow from the homepage templates tab', async () => { + const onLaunchWithTemplate = vi.fn(); + + await renderHomePage({ onLaunchWithTemplate }); + + fireEvent.click(screen.getByTestId('sidebar-templates')); + fireEvent.click(screen.getByRole('button', { name: /AWS Event-Driven SaaS Platform/i })); + fireEvent.click(screen.getByRole('button', { name: 'Use Template' })); + + expect(onLaunchWithTemplate).toHaveBeenCalledTimes(1); + expect(onLaunchWithTemplate).toHaveBeenCalledWith('aws-event-driven-saas-platform'); + }); + + it('shows only explicitly featured templates on the homepage templates tab', async () => { + await renderHomePage(); + + fireEvent.click(screen.getByTestId('sidebar-templates')); + + expect(screen.getByRole('button', { name: /AWS Event-Driven SaaS Platform/i })).toBeTruthy(); + expect(screen.queryByRole('button', { name: /Product Discovery Workshop Map/i })).toBeNull(); + }); + it('exposes template and flowpilot entry points in the empty dashboard state', async () => { const onLaunchWithTemplates = vi.fn(); const onLaunchWithAI = vi.fn(); useFlowStore.setState({ + documents: [], + activeDocumentId: '', tabs: [], activeTabId: null, nodes: [], @@ -61,8 +110,8 @@ describe('HomePage integration flows', () => { await renderHomePage({ onLaunchWithTemplates, onLaunchWithAI }); - fireEvent.click(screen.getByTestId('home-open-templates')); - fireEvent.click(screen.getByRole('button', { name: 'Generate with Flowpilot' })); + fireEvent.click(await screen.findByTestId('home-open-templates')); + fireEvent.click(screen.getByTestId('home-generate-with-ai')); expect(onLaunchWithTemplates).toHaveBeenCalledTimes(1); expect(onLaunchWithAI).toHaveBeenCalledTimes(1); @@ -71,6 +120,19 @@ describe('HomePage integration flows', () => { it('opens persisted flows from the dashboard list', async () => { const onOpenFlow = vi.fn(); useFlowStore.setState({ + documents: [ + createDocumentFromPages('tab-1', 'My Flow', [ + { + id: 'tab-1', + name: 'My Flow', + diagramType: 'flowchart', + nodes: [], + edges: [], + history: { past: [], future: [] }, + }, + ]), + ], + activeDocumentId: 'tab-1', tabs: [ { id: 'tab-1', @@ -95,6 +157,31 @@ describe('HomePage integration flows', () => { it('duplicates and deletes flows from the dashboard actions', async () => { const onOpenFlow = vi.fn(); useFlowStore.setState({ + documents: [ + createDocumentFromPages('tab-1', 'Flow One', [ + { + id: 'tab-1', + name: 'Flow One', + diagramType: 'flowchart', + updatedAt: '2026-03-07T00:00:00.000Z', + nodes: [], + edges: [], + history: { past: [], future: [] }, + }, + ]), + createDocumentFromPages('tab-2', 'Flow Two', [ + { + id: 'tab-2', + name: 'Flow Two', + diagramType: 'flowchart', + updatedAt: '2026-03-06T00:00:00.000Z', + nodes: [], + edges: [], + history: { past: [], future: [] }, + }, + ]), + ], + activeDocumentId: 'tab-1', tabs: [ { id: 'tab-1', @@ -134,6 +221,20 @@ describe('HomePage integration flows', () => { it('renames flows from the dashboard actions with an app-native dialog', async () => { useFlowStore.setState({ + documents: [ + createDocumentFromPages('tab-1', 'Flow One', [ + { + id: 'tab-1', + name: 'Flow One', + diagramType: 'flowchart', + updatedAt: '2026-03-07T00:00:00.000Z', + nodes: [], + edges: [], + history: { past: [], future: [] }, + }, + ]), + ], + activeDocumentId: 'tab-1', tabs: [ { id: 'tab-1', @@ -163,4 +264,53 @@ describe('HomePage integration flows', () => { expect(useFlowStore.getState().tabs[0]?.name).toBe('Renamed Flow'); expect(screen.getByText('Renamed Flow')).toBeTruthy(); }); + + it('removes the final remaining flow and shows the empty dashboard state when deleted', async () => { + useFlowStore.setState({ + documents: [ + createDocumentFromPages('tab-1', 'Solo Flow', [ + { + id: 'tab-1', + name: 'Solo Flow', + diagramType: 'flowchart', + updatedAt: '2026-03-07T00:00:00.000Z', + nodes: [], + edges: [], + history: { past: [], future: [] }, + }, + ]), + ], + activeDocumentId: 'tab-1', + tabs: [ + { + id: 'tab-1', + name: 'Solo Flow', + diagramType: 'flowchart', + updatedAt: '2026-03-07T00:00:00.000Z', + nodes: [], + edges: [], + history: { past: [], future: [] }, + }, + ], + activeTabId: 'tab-1', + nodes: [], + edges: [], + }); + + await renderHomePage(); + + const flowCard = screen.getByText('Solo Flow').closest('.group') as HTMLElement; + fireEvent.click(within(flowCard).getByLabelText('Delete')); + + const deleteDialog = screen.getByRole('dialog', { name: 'Delete flow' }); + fireEvent.click(within(deleteDialog).getByRole('button', { name: 'Delete' })); + + const { tabs, activeTabId, nodes, edges } = useFlowStore.getState(); + expect(tabs).toHaveLength(0); + expect(activeTabId).toBe(''); + expect(nodes).toHaveLength(0); + expect(edges).toHaveLength(0); + expect(screen.queryByText('Solo Flow')).toBeNull(); + expect(screen.getByTestId('home-create-new')).toBeTruthy(); + }); }); diff --git a/src/components/HomePage.tsx b/src/components/HomePage.tsx index 6d1dfd6b..7fa7b9f3 100644 --- a/src/components/HomePage.tsx +++ b/src/components/HomePage.tsx @@ -1,177 +1,169 @@ import React, { Suspense, lazy, useState } from 'react'; import { useFlowStore } from '../store'; -import { useTabActions, useTabsState } from '@/store/tabHooks'; +import { useWorkspaceDocumentActions, useWorkspaceDocumentsState } from '@/store/documentHooks'; import { HomeDashboard, type HomeFlowCard } from './home/HomeDashboard'; import { HomeFlowDeleteDialog, HomeFlowRenameDialog } from './home/HomeFlowDialogs'; import { HomeSettingsView } from './home/HomeSettingsView'; import { HomeSidebar } from './home/HomeSidebar'; +import { HomeTemplatesView } from './home/HomeTemplatesView'; import { shouldShowWelcomeModal } from './home/welcomeModalState'; +type HomePageTab = 'home' | 'templates' | 'settings'; +type HomeSettingsTab = 'general' | 'canvas' | 'shortcuts' | 'ai'; + const LazyWelcomeModal = lazy(async () => { - const module = await import('./WelcomeModal'); - return { default: module.WelcomeModal }; + const module = await import('./WelcomeModal'); + return { default: module.WelcomeModal }; }); interface HomePageProps { - onLaunch: () => void; - onLaunchWithTemplates: () => void; - onLaunchWithAI: () => void; - onImportJSON: () => void; - onOpenFlow: (flowId: string) => void; - activeTab?: 'home' | 'settings'; - onSwitchTab?: (tab: 'home' | 'settings') => void; + onLaunch: () => void; + onLaunchWithTemplates: () => void; + onLaunchWithTemplate: (templateId: string) => void; + onLaunchWithAI: () => void; + onImportJSON: () => void; + onOpenFlow: (flowId: string) => void; + activeTab?: HomePageTab; + onSwitchTab?: (tab: HomePageTab) => void; } export const HomePage: React.FC = ({ - onLaunch, - onLaunchWithTemplates, - onLaunchWithAI, - onImportJSON, - onOpenFlow, - activeTab: propActiveTab, - onSwitchTab + onLaunch, + onLaunchWithTemplates, + onLaunchWithTemplate, + onLaunchWithAI, + onImportJSON, + onOpenFlow, + activeTab: propActiveTab, + onSwitchTab, }) => { - const { tabs, activeTabId } = useTabsState(); - const { updateTab, closeTab, duplicateTab } = useTabActions(); - const { nodes, edges } = useFlowStore(); - const [internalActiveTab, setInternalActiveTab] = useState<'home' | 'settings'>('home'); - const [activeSettingsTab, setActiveSettingsTab] = useState<'general' | 'shortcuts' | 'ai'>('general'); - const [flowPendingRename, setFlowPendingRename] = useState(null); - const [flowPendingDelete, setFlowPendingDelete] = useState(null); - const showWelcomeModal = shouldShowWelcomeModal(); - - const activeTab = propActiveTab || internalActiveTab; - const flows: HomeFlowCard[] = tabs.map((tab) => { - const liveNodes = tab.id === activeTabId ? nodes : tab.nodes; - const liveEdges = tab.id === activeTabId ? edges : tab.edges; - - return { - id: tab.id, - name: tab.name, - nodeCount: liveNodes.length, - edgeCount: liveEdges.length, - updatedAt: tab.updatedAt, - isActive: tab.id === activeTabId, - }; - }).sort((left, right) => { - if (left.isActive && !right.isActive) return -1; - if (!left.isActive && right.isActive) return 1; - const leftTime = Date.parse(left.updatedAt || ''); - const rightTime = Date.parse(right.updatedAt || ''); - return (Number.isNaN(rightTime) ? 0 : rightTime) - (Number.isNaN(leftTime) ? 0 : leftTime); - }); - - const handleTabChange = (tab: 'home' | 'settings'): void => { - if (onSwitchTab) { - onSwitchTab(tab); - } else { - setInternalActiveTab(tab); - } - }; - - const handleRenameFlow = (flowId: string): void => { - const flow = flows.find((entry) => entry.id === flowId); - if (!flow) { - return; - } - setFlowPendingRename(flow); - }; - - const handleDeleteFlow = (flowId: string): void => { - if (tabs.length <= 1) { - return; - } - const flow = flows.find((entry) => entry.id === flowId); - if (!flow) { - return; - } - setFlowPendingDelete(flow); - }; - - const submitFlowRename = (nextName: string): void => { - if (!flowPendingRename) { - return; - } - - const trimmedName = nextName.trim(); - if (!trimmedName || trimmedName === flowPendingRename.name) { - setFlowPendingRename(null); - return; - } - - updateTab(flowPendingRename.id, { name: trimmedName }); - setFlowPendingRename(null); - }; - - const confirmFlowDelete = (): void => { - if (!flowPendingDelete) { - return; - } - - closeTab(flowPendingDelete.id); - setFlowPendingDelete(null); - }; - - return ( -
- - - {/* Main Content */} -
- - {activeTab === 'home' && ( - { - const newFlowId = duplicateTab(flowId); - if (newFlowId) { - onOpenFlow(newFlowId); - } - }} - onDeleteFlow={handleDeleteFlow} - /> - )} - - {activeTab === 'settings' && ( - - )} -
- setFlowPendingRename(null)} - onSubmit={submitFlowRename} - /> - setFlowPendingDelete(null)} - onConfirm={confirmFlowDelete} - /> - {showWelcomeModal ? ( - - - - ) : null} -
- ); + const { documents } = useWorkspaceDocumentsState(); + const { renameDocument, deleteDocument, duplicateDocument } = useWorkspaceDocumentActions(); + const hasWorkspaceDocuments = useFlowStore((state) => state.documents.length > 0); + const [internalActiveTab, setInternalActiveTab] = useState('home'); + const [activeSettingsTab, setActiveSettingsTab] = useState('general'); + const [flowPendingRename, setFlowPendingRename] = useState(null); + const [flowPendingDelete, setFlowPendingDelete] = useState(null); + const showWelcomeModal = shouldShowWelcomeModal(); + + const activeTab = propActiveTab ?? internalActiveTab; + const flows: HomeFlowCard[] = hasWorkspaceDocuments ? documents : []; + + function handleTabChange(tab: HomePageTab): void { + if (onSwitchTab) { + onSwitchTab(tab); + } else { + setInternalActiveTab(tab); + } + } + + function handleRenameFlow(flowId: string): void { + const flow = flows.find((entry) => entry.id === flowId); + if (!flow) { + return; + } + + setFlowPendingRename(flow); + } + + function handleDeleteFlow(flowId: string): void { + const flow = flows.find((entry) => entry.id === flowId); + if (!flow) { + return; + } + + setFlowPendingDelete(flow); + } + + function submitFlowRename(nextName: string): void { + if (!flowPendingRename) { + return; + } + + const trimmedName = nextName.trim(); + if (!trimmedName || trimmedName === flowPendingRename.name) { + setFlowPendingRename(null); + return; + } + + renameDocument(flowPendingRename.id, trimmedName); + setFlowPendingRename(null); + } + + function confirmFlowDelete(): void { + if (!flowPendingDelete) { + return; + } + + deleteDocument(flowPendingDelete.id); + setFlowPendingDelete(null); + } + + function handleDuplicateFlow(flowId: string): void { + const newFlowId = duplicateDocument(flowId); + if (newFlowId) { + onOpenFlow(newFlowId); + } + } + + return ( +
+ + + {/* Main Content */} +
+ {activeTab === 'home' && ( + + )} + + {activeTab === 'templates' && ( + + )} + + {activeTab === 'settings' && ( + + )} +
+ setFlowPendingRename(null)} + onSubmit={submitFlowRename} + /> + setFlowPendingDelete(null)} + onConfirm={confirmFlowDelete} + /> + {showWelcomeModal ? ( + + + + ) : null} +
+ ); }; diff --git a/src/components/IconAssetNodeBody.tsx b/src/components/IconAssetNodeBody.tsx new file mode 100644 index 00000000..96a33d87 --- /dev/null +++ b/src/components/IconAssetNodeBody.tsx @@ -0,0 +1,116 @@ +import React from 'react'; +import { NodeChrome } from './NodeChrome'; +import { InlineTextEditSurface } from './InlineTextEditSurface'; +import MemoizedMarkdown from './MemoizedMarkdown'; +import { NamedIcon } from './IconMap'; +import { getTransformDiagnosticsAttrs } from './transformDiagnostics'; + +interface InlineEditLike { + isEditing: boolean; + draft: string; + beginEdit: () => void; + setDraft: (v: string) => void; + commit: () => void; + handleKeyDown: (e: React.KeyboardEvent) => void; +} + +interface IconAssetNodeBodyProps { + nodeId: string; + selected: boolean; + connectionHandleClass: string; + explicitWidth: number | string | undefined; + nodeHeightPx: number | undefined; + hasLabel: boolean; + resolvedAssetIconUrl: string | null; + activeIconKey: string | null; + label: string | undefined; + isActiveSelected: boolean; + labelEdit: InlineEditLike; +} + +function toCssSize(value: number | string | undefined): string | undefined { + if (value === undefined || value === null) return undefined; + return typeof value === 'number' ? `${value}px` : value; +} + +/** Renders the compact icon-first presentation used for architecture asset nodes. */ +export function IconAssetNodeBody({ + nodeId, + selected, + connectionHandleClass, + explicitWidth, + nodeHeightPx, + hasLabel, + resolvedAssetIconUrl, + activeIconKey, + label, + isActiveSelected, + labelEdit, +}: IconAssetNodeBodyProps): React.ReactElement { + const iconFrameSize = 72; + const iconHandleStyleExtras = { left: { top: 42 }, right: { top: 42 } }; + const minWidth = hasLabel ? 116 : 96; + const minHeight = hasLabel ? 118 : 88; + + return ( + <> + +
+
+ {resolvedAssetIconUrl ? ( + {typeof + ) : activeIconKey ? ( +
+ +
+ ) : null} +
+ {hasLabel ? ( + } + onBeginEdit={labelEdit.beginEdit} + onDraftChange={labelEdit.setDraft} + onCommit={labelEdit.commit} + onKeyDown={labelEdit.handleKeyDown} + className="block max-w-full break-words px-1 text-center text-sm font-semibold leading-tight markdown-content [&_p]:m-0" + style={{ color: 'var(--brand-text)' }} + inputMode="multiline" + inputClassName="text-center" + isSelected={isActiveSelected} + /> + ) : null} +
+ + + ); +} diff --git a/src/components/ImageNode.tsx b/src/components/ImageNode.tsx index d9b766f9..711ca4aa 100644 --- a/src/components/ImageNode.tsx +++ b/src/components/ImageNode.tsx @@ -11,7 +11,7 @@ function ImageNode({ id, data, selected }: LegacyNodeProps): React.Rea minWidth={50} minHeight={50} keepAspectRatio - handleClassName="!w-3 !h-3 !border-2 !border-white transition-all duration-150 hover:scale-125" + handleClassName="!w-3 !h-3 !border-2 !border-[var(--brand-surface)] transition-all duration-150 hover:scale-125" >
): React.Rea className="w-full h-full object-contain pointer-events-none select-none" /> ) : ( -
+
No Image
)} diff --git a/src/components/InlineTextEditSurface.tsx b/src/components/InlineTextEditSurface.tsx index a711e05c..a277b3ed 100644 --- a/src/components/InlineTextEditSurface.tsx +++ b/src/components/InlineTextEditSurface.tsx @@ -14,6 +14,9 @@ type InlineTextEditSurfaceProps = { inputStyle?: React.CSSProperties; inputMode?: 'single-line' | 'multiline'; isSelected?: boolean; + showCharacterCount?: boolean; + maxCharacters?: number; + spellCheck?: boolean; }; const EDIT_GESTURE_DRAG_THRESHOLD_PX = 6; @@ -36,6 +39,9 @@ export function InlineTextEditSurface({ inputStyle, inputMode = 'single-line', isSelected = false, + showCharacterCount = false, + maxCharacters, + spellCheck = false, }: InlineTextEditSurfaceProps): React.ReactElement { const rootRef = useRef(null); const inputRef = useRef(null); @@ -48,9 +54,10 @@ export function InlineTextEditSurface({ inputClassName ); const isMultiline = inputMode === 'multiline'; - const affordanceClasses = !isEditing && isSelected - ? 'cursor-text decoration-dotted underline-offset-4 transition-decoration-color duration-150 hover:decoration-[var(--brand-primary)] hover:decoration-2' - : undefined; + const affordanceClasses = + !isEditing && isSelected + ? 'cursor-text decoration-dotted underline-offset-4 transition-decoration-color duration-150 hover:decoration-[var(--brand-primary)] hover:decoration-2' + : undefined; useEffect(() => { return () => { @@ -81,7 +88,9 @@ export function InlineTextEditSurface({ activeInput.setSelectionRange(caretPosition, caretPosition); }, [isEditing, isMultiline]); - function stopEditingPointerPropagation(event: React.PointerEvent): void { + function stopEditingPointerPropagation( + event: React.PointerEvent + ): void { event.stopPropagation(); } @@ -123,7 +132,11 @@ export function InlineTextEditSurface({ return (
{isEditing ? ( - isMultiline ? ( -