From 24c1c16f2f35a23fd054dcfc73f7e25ca1555391 Mon Sep 17 00:00:00 2001 From: Varun Date: Sat, 28 Mar 2026 15:01:24 +0530 Subject: [PATCH 1/7] Add workspace document sync and analytics controls --- docs-site/astro.config.mjs | 42 ++++ docs-site/package.json | 1 + docs-site/src/pages/index.astro | 20 +- package.json | 1 + src/App.tsx | 31 ++- src/components/ErrorBoundary.tsx | 5 + src/components/FlowEditor.tsx | 8 +- src/components/FlowTabs.tsx | 64 ++--- src/components/HomePage.integration.test.tsx | 123 ++++++++- src/components/HomePage.tsx | 37 +-- .../SettingsModal/GeneralSettings.tsx | 20 ++ .../SettingsModal/PrivacySettings.tsx | 58 ----- src/components/StudioPlaybackPanel.tsx | 12 +- src/components/TopNav.tsx | 38 +-- src/components/WelcomeModal.tsx | 168 +++++-------- src/components/command-bar/PagesView.tsx | 34 +-- .../flow-editor/FlowEditorChrome.tsx | 30 +-- .../buildFlowEditorControllerParams.ts | 12 +- .../flow-editor/flowEditorChromeProps.ts | 48 ++-- .../flow-editor/useFlowEditorController.ts | 12 +- .../flow-editor/useFlowEditorRuntime.ts | 12 +- .../useFlowEditorScreenBehavior.ts | 8 +- .../flow-editor/useFlowEditorScreenModel.ts | 20 +- .../flow-editor/useFlowEditorScreenState.ts | 25 +- .../useFlowEditorShellController.test.tsx | 8 +- .../useFlowEditorShellController.ts | 16 +- src/components/home/HomeDashboard.tsx | 140 ++++++----- src/components/home/HomeFlowDialogs.tsx | 2 +- src/components/home/welcomeModalState.ts | 4 +- src/components/useExportMenu.ts | 5 + src/hooks/useAIGeneration.ts | 43 +++- src/hooks/useAnalyticsPreference.ts | 16 ++ src/hooks/useFlowEditorActions.ts | 26 +- src/hooks/useFlowEditorCallbacks.ts | 56 ++--- src/hooks/useFlowEditorCollaboration.ts | 8 +- src/hooks/useFlowHistory.ts | 10 +- src/hooks/usePlayback.ts | 10 +- src/i18n/locales/de/translation.json | 17 +- src/i18n/locales/en/translation.json | 27 +- src/i18n/locales/es/translation.json | 17 +- src/i18n/locales/fr/translation.json | 17 +- src/i18n/locales/ja/translation.json | 17 +- src/i18n/locales/tr/translation.json | 23 +- src/i18n/locales/zh/translation.json | 17 +- src/index.tsx | 8 + src/services/analytics/analytics.ts | 157 ++++++++++++ .../analytics/analyticsSettings.test.ts | 33 +++ src/services/analytics/analyticsSettings.ts | 50 ++++ .../analytics/surfaceAnalyticsClient.ts | 125 +++++++++ src/services/onboarding/events.ts | 7 + .../storage/flowDocumentModel.test.ts | 118 +++++++++ src/services/storage/flowDocumentModel.ts | 133 ++++++++++ src/services/storage/localFirstRepository.ts | 125 ++++----- src/services/storage/localFirstRuntime.ts | 64 +++-- .../storage/persistedDocumentAdapters.test.ts | 77 ++++++ .../storage/persistedDocumentAdapters.ts | 106 ++++++++ src/services/storage/persistenceTypes.ts | 50 ++++ src/services/storage/storageTelemetry.test.ts | 29 ++- src/services/storage/storageTelemetry.ts | 21 +- src/store.ts | 5 + src/store/actions/createTabActions.ts | 77 +++++- .../actions/createWorkspaceDocumentActions.ts | 238 ++++++++++++++++++ src/store/documentHooks.ts | 84 +++++++ src/store/documentStateSync.test.ts | 66 +++++ src/store/documentStateSync.ts | 48 ++++ src/store/editorPageHooks.ts | 54 ++++ src/store/persistence.ts | 22 ++ src/store/tabHooks.ts | 2 + src/store/types.ts | 10 + src/store/workspaceDocumentModel.test.ts | 84 +++++++ src/store/workspaceDocumentModel.ts | 186 ++++++++++++++ tsconfig.tsbuildinfo | 2 +- web/package.json | 1 + web/src/components/LandingAnalytics.astro | 33 +++ web/src/components/Layout.astro | 2 + .../components/landing/FinalCTASection.tsx | 25 +- web/src/components/landing/Footer.tsx | 9 + web/src/components/landing/HeroSection.tsx | 8 +- web/src/components/landing/Navbar.tsx | 15 ++ 79 files changed, 2652 insertions(+), 730 deletions(-) delete mode 100644 src/components/SettingsModal/PrivacySettings.tsx create mode 100644 src/hooks/useAnalyticsPreference.ts create mode 100644 src/services/analytics/analytics.ts create mode 100644 src/services/analytics/analyticsSettings.test.ts create mode 100644 src/services/analytics/analyticsSettings.ts create mode 100644 src/services/analytics/surfaceAnalyticsClient.ts create mode 100644 src/services/storage/flowDocumentModel.test.ts create mode 100644 src/services/storage/flowDocumentModel.ts create mode 100644 src/services/storage/persistedDocumentAdapters.test.ts create mode 100644 src/services/storage/persistedDocumentAdapters.ts create mode 100644 src/services/storage/persistenceTypes.ts create mode 100644 src/store/actions/createWorkspaceDocumentActions.ts create mode 100644 src/store/documentHooks.ts create mode 100644 src/store/documentStateSync.test.ts create mode 100644 src/store/documentStateSync.ts create mode 100644 src/store/editorPageHooks.ts create mode 100644 src/store/workspaceDocumentModel.test.ts create mode 100644 src/store/workspaceDocumentModel.ts create mode 100644 web/src/components/LandingAnalytics.astro diff --git a/docs-site/astro.config.mjs b/docs-site/astro.config.mjs index bedef463..e4c0ec02 100644 --- a/docs-site/astro.config.mjs +++ b/docs-site/astro.config.mjs @@ -27,6 +27,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/pages/index.astro b/docs-site/src/pages/index.astro index 10815e3e..963b33d7 100644 --- a/docs-site/src/pages/index.astro +++ b/docs-site/src/pages/index.astro @@ -77,8 +77,24 @@ const referenceLinks = [ diagrams, and structured imports. This page is the fastest way to choose the right route.

- Open Quick Start - Read Introduction + + Open Quick Start + + + Read Introduction +
diff --git a/package.json b/package.json index 0002adf8..26335d28 100644 --- a/package.json +++ b/package.json @@ -54,6 +54,7 @@ "i18next-browser-languagedetector": "^8.2.1", "i18next-http-backend": "^3.0.2", "lucide-react": "^0.563.0", + "posthog-js": "^1.347.2", "react": "^19.2.4", "react-dom": "^19.2.4", "react-i18next": "^16.5.4", diff --git a/src/App.tsx b/src/App.tsx index 078d5192..25f8e558 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -9,7 +9,8 @@ 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 @@ -36,13 +37,21 @@ const LazyDiagramViewer = lazy(async () => { function FlowCanvasRoute(): React.JSX.Element { const { flowId } = useParams(); const navigate = useNavigate(); - const { setActiveTabId } = useTabActions(); + const { setActiveDocumentId } = useWorkspaceDocumentActions(); + const { setActivePageId } = useEditorPageActions(); + const { resolveTarget } = useWorkspaceRouteResolver(); useEffect(() => { if (flowId) { - setActiveTabId(flowId); + const target = resolveTarget(flowId); + if (!target) { + return; + } + + setActiveDocumentId(target.documentId); + setActivePageId(target.pageId); } - }, [flowId, setActiveTabId]); + }, [flowId, resolveTarget, setActiveDocumentId, setActivePageId]); return ( }> @@ -58,7 +67,7 @@ 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'; @@ -67,18 +76,18 @@ function HomePageRoute(): React.JSX.Element { }, []); const handleLaunch = () => { - const newTabId = addTab(); - navigate(`/flow/${newTabId}`); + const newDocumentId = createDocument(); + navigate(`/flow/${newDocumentId}`); }; const handleLaunchWithTemplates = () => { - const newTabId = addTab(); - navigate(`/flow/${newTabId}`, { state: createFlowEditorTemplatesRouteState() }); + const newDocumentId = createDocument(); + navigate(`/flow/${newDocumentId}`, { state: createFlowEditorTemplatesRouteState() }); }; const handleLaunchWithAI = () => { - const newTabId = addTab(); - navigate(`/flow/${newTabId}`, { state: createFlowEditorAIRouteState() }); + const newDocumentId = createDocument(); + navigate(`/flow/${newDocumentId}`, { state: createFlowEditorAIRouteState() }); }; return ( diff --git a/src/components/ErrorBoundary.tsx b/src/components/ErrorBoundary.tsx index 50f0ec2a..f1eda2c4 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() { diff --git a/src/components/FlowEditor.tsx b/src/components/FlowEditor.tsx index fcbedb9e..b7228962 100644 --- a/src/components/FlowEditor.tsx +++ b/src/components/FlowEditor.tsx @@ -20,8 +20,8 @@ export function FlowEditor({ onGoHome }: FlowEditorProps) { const { nodes, edges, - tabs, - activeTabId, + pages, + activePageId, viewSettings, diffBaseline, setDiffBaseline, @@ -53,8 +53,8 @@ export function FlowEditor({ onGoHome }: FlowEditorProps) { }} > 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; @@ -29,14 +29,14 @@ export const FlowTabs: React.FC = ({ const activeTabClassName = `${getSegmentedTabButtonClass(true, 'sm')} h-10 sm:h-9 border-[var(--brand-primary-200)] bg-[var(--brand-primary-50)] text-[var(--brand-primary-700)]`; const inactiveTabClassName = `${getSegmentedTabButtonClass(false, 'sm')} h-10 sm:h-9 border-slate-200 bg-white text-slate-600 hover:border-slate-300 hover:bg-slate-50 hover:text-slate-700`; - const handleStartEdit = (tab: FlowTab) => { - setEditingTabId(tab.id); - 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(''); @@ -54,22 +54,22 @@ 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)} + title={page.name} > - {editingTabId === tab.id ? ( + {editingTabId === page.id ? ( = ({ onClick={(e) => e.stopPropagation()} /> ) : ( - {tab.name} + {page.name} )} diff --git a/src/components/HomePage.integration.test.tsx b/src/components/HomePage.integration.test.tsx index 88b4311d..ab9eec5c 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(); @@ -21,6 +24,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({}); }); @@ -41,6 +46,17 @@ describe('HomePage integration flows', () => { }); } + 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 from home to settings view via sidebar', async () => { await renderHomePage(); @@ -53,6 +69,8 @@ describe('HomePage integration flows', () => { const onLaunchWithTemplates = vi.fn(); const onLaunchWithAI = vi.fn(); useFlowStore.setState({ + documents: [], + activeDocumentId: '', tabs: [], activeTabId: null, nodes: [], @@ -61,8 +79,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 +89,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 +126,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 +190,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 +233,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..08c2f348 100644 --- a/src/components/HomePage.tsx +++ b/src/components/HomePage.tsx @@ -1,6 +1,6 @@ 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'; @@ -31,9 +31,9 @@ export const HomePage: React.FC = ({ activeTab: propActiveTab, onSwitchTab }) => { - const { tabs, activeTabId } = useTabsState(); - const { updateTab, closeTab, duplicateTab } = useTabActions(); - const { nodes, edges } = useFlowStore(); + const { documents } = useWorkspaceDocumentsState(); + const { renameDocument, deleteDocument, duplicateDocument } = useWorkspaceDocumentActions(); + const hasWorkspaceDocuments = useFlowStore((state) => state.documents.length > 0); const [internalActiveTab, setInternalActiveTab] = useState<'home' | 'settings'>('home'); const [activeSettingsTab, setActiveSettingsTab] = useState<'general' | 'shortcuts' | 'ai'>('general'); const [flowPendingRename, setFlowPendingRename] = useState(null); @@ -41,25 +41,7 @@ export const HomePage: React.FC = ({ 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 flows: HomeFlowCard[] = hasWorkspaceDocuments ? documents : []; const handleTabChange = (tab: 'home' | 'settings'): void => { if (onSwitchTab) { @@ -78,9 +60,6 @@ export const HomePage: React.FC = ({ }; const handleDeleteFlow = (flowId: string): void => { - if (tabs.length <= 1) { - return; - } const flow = flows.find((entry) => entry.id === flowId); if (!flow) { return; @@ -99,7 +78,7 @@ export const HomePage: React.FC = ({ return; } - updateTab(flowPendingRename.id, { name: trimmedName }); + renameDocument(flowPendingRename.id, trimmedName); setFlowPendingRename(null); }; @@ -108,7 +87,7 @@ export const HomePage: React.FC = ({ return; } - closeTab(flowPendingDelete.id); + deleteDocument(flowPendingDelete.id); setFlowPendingDelete(null); }; @@ -132,7 +111,7 @@ export const HomePage: React.FC = ({ onOpenFlow={onOpenFlow} onRenameFlow={handleRenameFlow} onDuplicateFlow={(flowId) => { - const newFlowId = duplicateTab(flowId); + const newFlowId = duplicateDocument(flowId); if (newFlowId) { onOpenFlow(newFlowId); } diff --git a/src/components/SettingsModal/GeneralSettings.tsx b/src/components/SettingsModal/GeneralSettings.tsx index f4ef5b32..d3feb543 100644 --- a/src/components/SettingsModal/GeneralSettings.tsx +++ b/src/components/SettingsModal/GeneralSettings.tsx @@ -3,6 +3,7 @@ import { useTranslation } from 'react-i18next'; import { useFlowStore } from '../../store'; import { Switch } from '../ui/Switch'; import { Grid, Magnet, Network, Zap } from 'lucide-react'; +import { useAnalyticsPreference } from '@/hooks/useAnalyticsPreference'; import type { GlobalEdgeOptions } from '@/lib/types'; import { useViewSettings, useVisualSettingsActions } from '@/store/viewHooks'; @@ -10,6 +11,7 @@ export const GeneralSettings = () => { const { t } = useTranslation(); const viewSettings = useViewSettings(); const globalEdgeOptions = useFlowStore((state) => state.globalEdgeOptions); + const [analyticsEnabled, setAnalyticsEnabled] = useAnalyticsPreference(); const { toggleGrid, toggleSnap, @@ -52,6 +54,24 @@ export const GeneralSettings = () => {
+
+

+ {t('settings.analytics', 'Analytics')} +

+
+ } + label={t('settingsModal.analytics.enableTitle', 'Anonymous Launch Analytics')} + description={t( + 'settingsModal.analytics.enableDescription', + 'Track coarse product events and reliability issues only. We do not send diagram content, prompts, file contents, or API keys.' + )} + checked={analyticsEnabled} + onChange={setAnalyticsEnabled} + /> +
+
+

{t('commandBar.visuals.title', 'Connection Styles')} diff --git a/src/components/SettingsModal/PrivacySettings.tsx b/src/components/SettingsModal/PrivacySettings.tsx deleted file mode 100644 index 19808d6d..00000000 --- a/src/components/SettingsModal/PrivacySettings.tsx +++ /dev/null @@ -1,58 +0,0 @@ -import React from 'react'; -import { Shield, Lock, Database, UserX, MessageSquare, Fingerprint } from 'lucide-react'; -import { useTranslation } from 'react-i18next'; - -export const PrivacySettings = () => { - const { t } = useTranslation(); - - return ( -
- {/* Mission Statement */} -
-
-

- - {t('settingsModal.privacy.manifesto')} -

-

- {t('settingsModal.privacy.manifestoText')} -

-
- } text={t('settingsModal.privacy.localFirst')} /> - } text={t('settingsModal.privacy.noAccounts')} /> - } text={t('settingsModal.privacy.ownData')} /> - } text={t('settingsModal.privacy.anonymous')} /> -
-
-
- - {/* Feedback Call to Action */} - -
- ); -}; - -const Feature = ({ icon, text }: { icon: React.ReactNode, text: string }) => ( -
-
{icon}
- {text} -
-); diff --git a/src/components/StudioPlaybackPanel.tsx b/src/components/StudioPlaybackPanel.tsx index 9235a0ae..64aeedc9 100644 --- a/src/components/StudioPlaybackPanel.tsx +++ b/src/components/StudioPlaybackPanel.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { CheckCircle2, Eye, Film, ListOrdered, MoveDown, MoveUp, Plus, RefreshCw, Trash2 } from 'lucide-react'; -import { useTabActions, useTabsState } from '@/store/tabHooks'; +import { useEditorPageActions, useEditorPagesState } from '@/store/editorPageHooks'; import type { FlowEdge, FlowNode, PlaybackState } from '@/lib/types'; import { createEmptyPlaybackState } from '@/services/playback/model'; import { @@ -75,13 +75,13 @@ export function StudioPlaybackPanel({ playbackSpeed, onPlaybackSpeedChange, }: StudioPlaybackPanelProps): React.ReactElement { - const { tabs, activeTabId } = useTabsState(); - const { updateTab } = useTabActions(); - const activeTab = tabs.find((tab) => tab.id === activeTabId); + const { pages, activePageId } = useEditorPagesState(); + const { updatePage } = useEditorPageActions(); + const activePage = pages.find((page) => page.id === activePageId); // Keep the raw persisted value as a stable reference for memoization. // The fallback empty state is resolved inside consumers to avoid creating // a new object on every render (which would break React Compiler deps). - const persistedPlayback = activeTab?.playback; + const persistedPlayback = activePage?.playback; // Stable empty-state fallback — created once so React Compiler can track it as a // stable dependency alongside `persistedPlayback` without seeing an inline allocation. const playback = persistedPlayback ?? createEmptyPlaybackState(); @@ -93,7 +93,7 @@ export function StudioPlaybackPanel({ const scrubValue = currentStepIndex >= 0 ? Math.min(currentStepIndex, scrubMax) : 0; function commitPlayback(nextPlayback: PlaybackState): void { - updateTab(activeTabId, { playback: nextPlayback }); + updatePage(activePageId, { playback: nextPlayback }); } function applyPreset(preset: PlaybackGenerationPreset): void { diff --git a/src/components/TopNav.tsx b/src/components/TopNav.tsx index ab1035cb..2328c6dd 100644 --- a/src/components/TopNav.tsx +++ b/src/components/TopNav.tsx @@ -1,5 +1,5 @@ import React, { Suspense, lazy, useCallback, useEffect } from 'react'; -import type { FlowTab } from '@/lib/types'; +import type { EditorPage } from '@/store/editorPageHooks'; import { FlowTabs } from './FlowTabs'; import { TopNavMenu } from './top-nav/TopNavMenu'; import { TopNavBrand } from './top-nav/TopNavBrand'; @@ -15,12 +15,12 @@ const LazySettingsModal = lazy(async () => { }); interface TopNavProps { - 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; // Actions onExportPNG: (format?: 'png' | 'jpeg') => void; @@ -61,12 +61,12 @@ interface TopNavProps { } export function TopNav({ - tabs, - activeTabId, - onSwitchTab, - onAddTab, - onCloseTab, - onRenameTab, + pages, + activePageId, + onSwitchPage, + onAddPage, + onClosePage, + onRenamePage, onExportPNG, onCopyImage, onExportSVG, @@ -137,12 +137,12 @@ export function TopNav({ {/* Center: Tabs */}
diff --git a/src/components/WelcomeModal.tsx b/src/components/WelcomeModal.tsx index f6d7e457..80a29526 100644 --- a/src/components/WelcomeModal.tsx +++ b/src/components/WelcomeModal.tsx @@ -1,10 +1,11 @@ -import React, { useState } from 'react'; -import { ArrowRight, FileInput, LayoutTemplate, PenSquare, WandSparkles } from 'lucide-react'; +import React, { useState, useEffect } from 'react'; +import { useAnalyticsPreference } from '@/hooks/useAnalyticsPreference'; import { OpenFlowLogo } from './icons/OpenFlowLogo'; +import { Switch } from './ui/Switch'; +import { Button } from './ui/Button'; import { writeLocalStorageString } from '@/services/storage/uiLocalStorage'; import { shouldShowWelcomeModal, WELCOME_SEEN_STORAGE_KEY } from './home/welcomeModalState'; -import { RECOMMENDED_BUILDER_PROMPTS, RECOMMENDED_IMPORT_OPTIONS, RECOMMENDED_STARTER_TEMPLATE_LABELS } from '@/services/onboarding/config'; -import { recordOnboardingEvent } from '@/services/onboarding/events'; +import { WandSparkles, FileCode2, MonitorPlay, Paintbrush } from 'lucide-react'; export interface WelcomeModalProps { onOpenTemplates: () => void; @@ -13,128 +14,95 @@ export interface WelcomeModalProps { onBlankCanvas: () => void; } -interface PathOption { - icon: React.ReactNode; - title: string; - description: string; - onClick: () => void; - primary?: boolean; -} - -function PathCard({ icon, title, description, onClick, primary }: PathOption): React.JSX.Element { - return ( - - ); -} - -export function WelcomeModal({ onOpenTemplates, onPromptWithAI, onImport, onBlankCanvas }: WelcomeModalProps): React.JSX.Element | null { +export function WelcomeModal(_props: WelcomeModalProps): React.JSX.Element | null { const [isOpen, setIsOpen] = useState(() => shouldShowWelcomeModal()); + const [analyticsEnabled, setAnalyticsEnabled] = useAnalyticsPreference(); const dismiss = () => { setIsOpen(false); writeLocalStorageString(WELCOME_SEEN_STORAGE_KEY, 'true'); }; - const handle = (action: () => void) => () => { dismiss(); action(); }; + useEffect(() => { + if (!isOpen) return; + const handleKeyDown = (e: KeyboardEvent) => { + if (e.key === 'Enter') { + e.preventDefault(); + dismiss(); + } + }; + document.addEventListener('keydown', handleKeyDown); + return () => document.removeEventListener('keydown', handleKeyDown); + }, [isOpen]); if (!isOpen) return null; - const paths: PathOption[] = [ + const features = [ { - icon: , - title: 'Start from a template', - description: `Jump into ${RECOMMENDED_STARTER_TEMPLATE_LABELS.slice(0, 3).join(', ')}.`, - onClick: handle(() => { - recordOnboardingEvent('welcome_template_selected', { surface: 'welcome-modal' }); - onOpenTemplates(); - }), - primary: true, + icon: , + title: 'Create amazing diagrams', + description: 'Design beautiful, enterprise-grade architecture visually.' }, { - icon: , - title: 'Prompt with Flowpilot', - description: `Start from a builder prompt like "${RECOMMENDED_BUILDER_PROMPTS[0]}"`, - onClick: handle(() => { - recordOnboardingEvent('welcome_prompt_selected', { surface: 'welcome-modal' }); - onPromptWithAI(); - }), + icon: , + title: 'Use AI', + description: 'Generate complete architectures with a single intelligent prompt.' }, { - icon: , - title: 'Import a diagram', - description: `Bring in ${RECOMMENDED_IMPORT_OPTIONS.map((option) => option.label).join(', ')} sources.`, - onClick: handle(() => { - recordOnboardingEvent('welcome_import_selected', { surface: 'welcome-modal' }); - onImport(); - }), + icon: , + title: 'Code to diagram', + description: 'Instantly construct stunning visual infrastructure from text.' }, { - icon: , - title: 'Blank canvas', - description: 'Start clean, then branch into templates, imports, or guided AI edits.', - onClick: handle(() => { - recordOnboardingEvent('welcome_blank_selected', { surface: 'welcome-modal' }); - onBlankCanvas(); - }), - }, + icon: , + title: 'Export in many formats', + description: 'Export into beautiful, fully animated presentation diagrams.' + } ]; return ( -
-
-
-
- -

Welcome to OpenFlowKit

-

- Pick the fastest way to get to a real developer diagram: template, import, prompt, or blank canvas. -

-
+
+
+
+ +

Welcome to OpenFlowKit

+
-
- {paths.map((path) => ( - +
+
+ {features.map((f, i) => ( +
+
+ {f.icon} +
+
+

{f.title}

+

{f.description}

+
+
))}
+
-
-
-

Best First Templates

-

- {RECOMMENDED_STARTER_TEMPLATE_LABELS.join(' • ')} -

-
-
-

Supported Imports

-

- {RECOMMENDED_IMPORT_OPTIONS.map((option) => option.label).join(' • ')} -

+
+
+
+ Anonymous Analytics + We collect diagnostic data. We never read your diagrams or prompts.
+
- -

- Press ? for keyboard shortcuts -

+
diff --git a/src/components/command-bar/PagesView.tsx b/src/components/command-bar/PagesView.tsx index 57824f63..d9cee49e 100644 --- a/src/components/command-bar/PagesView.tsx +++ b/src/components/command-bar/PagesView.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { Copy, MoveRight, PanelsTopLeft } from 'lucide-react'; import { useNavigate } from 'react-router-dom'; -import { useTabActions, useTabsState } from '@/store/tabHooks'; +import { useEditorPageActions, useEditorPagesState } from '@/store/editorPageHooks'; import { ViewHeader } from './ViewHeader'; interface PagesViewProps { @@ -11,19 +11,19 @@ interface PagesViewProps { export function PagesView({ onClose, handleBack }: PagesViewProps): React.ReactElement { const navigate = useNavigate(); - const { tabs, activeTabId } = useTabsState(); - const { duplicateActiveTab, copySelectedToTab, moveSelectedToTab, setActiveTabId } = useTabActions(); + const { pages, activePageId } = useEditorPagesState(); + const { duplicateActivePage, copySelectedToPage, moveSelectedToPage, setActivePageId } = useEditorPageActions(); function handleDuplicateCurrentPage(): void { - const newTabId = duplicateActiveTab(); - if (!newTabId) return; - navigate(`/flow/${newTabId}`); + const newPageId = duplicateActivePage(); + if (!newPageId) return; + navigate(`/flow/${newPageId}`); onClose(); } - function handleSwitchPage(tabId: string): void { - setActiveTabId(tabId); - navigate(`/flow/${tabId}`); + function handleSwitchPage(pageId: string): void { + setActivePageId(pageId); + navigate(`/flow/${pageId}`); onClose(); } @@ -42,23 +42,23 @@ export function PagesView({ onClose, handleBack }: PagesViewProps): React.ReactE
- {tabs.map((tab) => { - const isActive = tab.id === activeTabId; + {pages.map((page) => { + const isActive = page.id === activePageId; return (
-
{tab.name}
-
{tab.nodes.length} nodes • {tab.edges.length} edges
+
{page.name}
+
{page.nodes.length} nodes • {page.edges.length} edges
{!isActive && ( - - - -
-
-
-

Use builder templates

-

Start from release trains, cloud architectures, mind maps, and technical workflows.

-
-
-

Import real source material

-

Bring in Mermaid, SQL, OpenAPI, JSON, or OpenFlow sources and keep editing visually.

-
-
-

Local-first by default

-

Diagram data stays in this browser unless you explicitly export or share it.

+
+
+ + {/* Super-delicate background gradient inside card */} +
+
+ +
+ + {/* Sleek Icon */} +
+
+ +
+ +

+ Create your first flow +

+

+ Design enterprise-grade architectures instantly. Start from a blank canvas, describe your infrastructure with our AI builder, or use a tailored template. +

+ + {/* Action Grid strictly inside the card */} +
+ + + + + +
+ +
+ +
+
@@ -138,14 +158,14 @@ export function HomeDashboard({
-
+
)} -

- {t('home.localStorageHint', 'Autosaved on this device. We do not upload your diagram data to our servers.')} -

+
); diff --git a/src/components/home/HomeFlowDialogs.tsx b/src/components/home/HomeFlowDialogs.tsx index 15e591c4..e6224899 100644 --- a/src/components/home/HomeFlowDialogs.tsx +++ b/src/components/home/HomeFlowDialogs.tsx @@ -73,7 +73,7 @@ export function HomeFlowRenameDialog({ {t('home.renameFlow.title', 'Rename flow')}

- {t('home.renameFlow.description', 'Update the name shown on your dashboard and tabs.')} + {t('home.renameFlow.description', 'Update the name shown on your dashboard and in the editor.')}

diff --git a/src/components/home/welcomeModalState.ts b/src/components/home/welcomeModalState.ts index ce68b534..26953358 100644 --- a/src/components/home/welcomeModalState.ts +++ b/src/components/home/welcomeModalState.ts @@ -4,8 +4,8 @@ export const WELCOME_SEEN_STORAGE_KEY = 'hasSeenWelcome_v1'; export const WELCOME_MODAL_ENABLED_STORAGE_KEY = 'openflowkit_show_welcome_modal'; export function shouldShowWelcomeModal(): boolean { - const welcomeEnabled = readLocalStorageString(WELCOME_MODAL_ENABLED_STORAGE_KEY) === 'true'; - if (!welcomeEnabled) { + const welcomeEnabled = readLocalStorageString(WELCOME_MODAL_ENABLED_STORAGE_KEY); + if (welcomeEnabled === 'false') { return false; } return !readLocalStorageString(WELCOME_SEEN_STORAGE_KEY); diff --git a/src/components/useExportMenu.ts b/src/components/useExportMenu.ts index 350a3849..245c33f0 100644 --- a/src/components/useExportMenu.ts +++ b/src/components/useExportMenu.ts @@ -1,5 +1,6 @@ import { useEffect, useRef, useState } from 'react'; import type { RefObject } from 'react'; +import { captureAnalyticsEvent } from '@/services/analytics/analytics'; import { recordOnboardingEvent } from '@/services/onboarding/events'; interface UseExportMenuParams { @@ -95,6 +96,10 @@ export function useExportMenu({ function recordSelection(key: string, action: ExportActionKey): void { recordOnboardingEvent('first_export_completed', { format: `${key}:${action}` }); + captureAnalyticsEvent('export_used', { + format: key, + action, + }); } function handleSelect(key: string, action: ExportActionKey): void { diff --git a/src/hooks/useAIGeneration.ts b/src/hooks/useAIGeneration.ts index e27e20a4..d819e776 100644 --- a/src/hooks/useAIGeneration.ts +++ b/src/hooks/useAIGeneration.ts @@ -1,6 +1,7 @@ import { useCallback, useEffect, useRef, useState } from 'react'; import { createLogger } from '@/lib/logger'; import type { FlowEdge, FlowNode } from '@/lib/types'; +import { captureAnalyticsEvent } from '@/services/analytics/analytics'; import type { ChatMessage } from '@/services/aiService'; import { useFlowStore } from '@/store'; import { useToast } from '@/components/ui/ToastContext'; @@ -122,6 +123,7 @@ export function useAIGeneration( imageBase64?: string, focusedNodeIds?: string[], showPreview = false, + requestKind: 'prompt' | 'focused-edit' | 'code-import' | 'sql-import' | 'terraform-import' | 'openapi-import' = 'prompt', ): Promise => { if (!readiness.canGenerate && readiness.blockingIssue) { setLastError(readiness.blockingIssue.detail); @@ -141,6 +143,13 @@ export function useAIGeneration( const controller = new AbortController(); abortControllerRef.current = controller; + captureAnalyticsEvent('ai_generation_started', { + provider: aiSettings.provider || 'gemini', + has_image: Boolean(imageBase64), + is_preview: showPreview, + request_kind: requestKind, + selected_count: focusedNodeIds?.length ?? selectedNodeIds.length, + }); try { const result = await generateAIFlowResult({ @@ -171,6 +180,10 @@ export function useAIGeneration( if (showPreview) { setPendingDiff(computeImportDiff(nodes, result)); notifyOperationOutcome(addToast, { status: 'success', summary: 'Import ready — review changes before applying.' }); + captureAnalyticsEvent('import_preview_ready', { + provider: aiSettings.provider || 'gemini', + request_kind: requestKind, + }); } else { applyComposedGraph(layoutedNodes, layoutedEdges); notifyOperationOutcome(addToast, { @@ -178,14 +191,32 @@ export function useAIGeneration( summary: getSuccessSummary(nodes.length, focusedNodeIds), }); } + captureAnalyticsEvent('ai_generation_succeeded', { + provider: aiSettings.provider || 'gemini', + has_image: Boolean(imageBase64), + is_preview: showPreview, + request_kind: requestKind, + selected_count: focusedNodeIds?.length ?? selectedNodeIds.length, + }); return true; } catch (error: unknown) { if (error instanceof DOMException && error.name === 'AbortError') { + captureAnalyticsEvent('ai_generation_cancelled', { + provider: aiSettings.provider || 'gemini', + is_preview: showPreview, + request_kind: requestKind, + }); return false; } const errorMessage = toErrorMessage(error); logger.error('AI generation failed.', { error }); setLastError(errorMessage); + captureAnalyticsEvent('ai_generation_failed', { + provider: aiSettings.provider || 'gemini', + is_preview: showPreview, + request_kind: requestKind, + error_name: error instanceof Error ? error.name : 'UnknownError', + }); notifyOperationOutcome(addToast, { status: 'error', summary: getFailureSummary(nodes.length, focusedNodeIds), @@ -213,27 +244,27 @@ export function useAIGeneration( ]); const handleAIRequest = useCallback(async (prompt: string, imageBase64?: string): Promise => { - return runAIRequest(prompt, imageBase64); + return runAIRequest(prompt, imageBase64, undefined, false, 'prompt'); }, [runAIRequest]); const handleFocusedAIRequest = useCallback(async (prompt: string, focusedNodeIds: string[], imageBase64?: string): Promise => { - return runAIRequest(prompt, imageBase64, focusedNodeIds); + return runAIRequest(prompt, imageBase64, focusedNodeIds, false, 'focused-edit'); }, [runAIRequest]); const handleCodeAnalysis = useCallback(async (code: string, language: SupportedLanguage): Promise => { - return runAIRequest(buildCodeToArchitecturePrompt({ code, language }), undefined, undefined, true); + return runAIRequest(buildCodeToArchitecturePrompt({ code, language }), undefined, undefined, true, 'code-import'); }, [runAIRequest]); const handleSqlAnalysis = useCallback(async (sql: string): Promise => { - return runAIRequest(buildSqlToErdPrompt(sql), undefined, undefined, true); + return runAIRequest(buildSqlToErdPrompt(sql), undefined, undefined, true, 'sql-import'); }, [runAIRequest]); const handleTerraformAnalysis = useCallback(async (input: string, format: TerraformInputFormat): Promise => { - return runAIRequest(buildTerraformToCloudPrompt(input, format), undefined, undefined, true); + return runAIRequest(buildTerraformToCloudPrompt(input, format), undefined, undefined, true, 'terraform-import'); }, [runAIRequest]); const handleOpenApiAnalysis = useCallback(async (spec: string): Promise => { - return runAIRequest(buildOpenApiToSequencePrompt(spec), undefined, undefined, true); + return runAIRequest(buildOpenApiToSequencePrompt(spec), undefined, undefined, true, 'openapi-import'); }, [runAIRequest]); return { diff --git a/src/hooks/useAnalyticsPreference.ts b/src/hooks/useAnalyticsPreference.ts new file mode 100644 index 00000000..b90d5558 --- /dev/null +++ b/src/hooks/useAnalyticsPreference.ts @@ -0,0 +1,16 @@ +import { useEffect, useState } from 'react'; +import { + getAnalyticsPreference, + setAnalyticsPreference, + subscribeToAnalyticsPreference, +} from '@/services/analytics/analyticsSettings'; + +export function useAnalyticsPreference(): [boolean, (enabled: boolean) => void] { + const [enabled, setEnabled] = useState(() => getAnalyticsPreference()); + + useEffect(() => { + return subscribeToAnalyticsPreference(setEnabled); + }, []); + + return [enabled, setAnalyticsPreference]; +} diff --git a/src/hooks/useFlowEditorActions.ts b/src/hooks/useFlowEditorActions.ts index 45056e6f..750590fe 100644 --- a/src/hooks/useFlowEditorActions.ts +++ b/src/hooks/useFlowEditorActions.ts @@ -2,6 +2,7 @@ import { useCallback, useState } from 'react'; import type { TFunction } from 'i18next'; import { createLogger } from '@/lib/logger'; import type { FlowEdge, FlowNode } from '@/lib/types'; +import { captureAnalyticsEvent } from '@/services/analytics/analytics'; import type { FlowTemplate } from '@/services/templates'; import type { LayoutAlgorithm } from '@/services/elkLayout'; import type { ExportSerializationMode } from '@/services/canonicalSerialization'; @@ -29,7 +30,7 @@ const logger = createLogger({ scope: 'useFlowEditorActions' }); interface UseFlowEditorActionsParams { nodes: FlowNode[]; edges: FlowEdge[]; - activeTabName?: string; + activePageName?: string; recordHistory: () => void; setNodes: (nodes: FlowNode[] | ((nodes: FlowNode[]) => FlowNode[])) => void; setEdges: (edges: FlowEdge[] | ((edges: FlowEdge[]) => FlowEdge[])) => void; @@ -64,7 +65,7 @@ interface UseFlowEditorActionsResult { export function useFlowEditorActions({ nodes, edges, - activeTabName, + activePageName, recordHistory, setNodes, setEdges, @@ -110,6 +111,10 @@ export function useFlowEditorActions({ templateId: template.id, category: template.category, }); + captureAnalyticsEvent('template_used', { + template_id: template.id, + template_category: template.category, + }); const { nextNodes, newEdges } = buildTemplateInsertionResult({ template, existingNodes: nodes, @@ -125,16 +130,16 @@ export function useFlowEditorActions({ }, [nodes, edges, t, addToast]); const handleDownloadMermaid = useCallback((): void => { - downloadMermaidToFile({ nodes, edges, addToast, baseFileName: activeTabName }); - }, [nodes, edges, addToast, activeTabName]); + downloadMermaidToFile({ nodes, edges, addToast, baseFileName: activePageName }); + }, [nodes, edges, addToast, activePageName]); const handleExportPlantUML = useCallback(async (): Promise => { await exportPlantUMLToClipboard({ nodes, edges, t, addToast }); }, [nodes, edges, t, addToast]); const handleDownloadPlantUML = useCallback((): void => { - downloadPlantUMLToFile({ nodes, edges, addToast, baseFileName: activeTabName }); - }, [nodes, edges, addToast, activeTabName]); + downloadPlantUMLToFile({ nodes, edges, addToast, baseFileName: activePageName }); + }, [nodes, edges, addToast, activePageName]); const handleExportOpenFlowDSL = useCallback(async (): Promise => { await exportOpenFlowDSLToClipboard({ @@ -152,17 +157,17 @@ export function useFlowEditorActions({ edges, exportSerializationMode, addToast, - baseFileName: activeTabName, + baseFileName: activePageName, }); - }, [nodes, edges, exportSerializationMode, addToast, activeTabName]); + }, [nodes, edges, exportSerializationMode, addToast, activePageName]); const handleExportFigma = useCallback(async (): Promise => { await exportFigmaToClipboard({ nodes, edges, addToast, t }); }, [nodes, edges, addToast, t]); const handleDownloadFigma = useCallback(async (): Promise => { - await downloadFigmaToFile({ nodes, edges, addToast, t, baseFileName: activeTabName }); - }, [nodes, edges, addToast, t, activeTabName]); + await downloadFigmaToFile({ nodes, edges, addToast, t, baseFileName: activePageName }); + }, [nodes, edges, addToast, t, activePageName]); const [shareViewerUrl, setShareViewerUrl] = useState(null); @@ -173,6 +178,7 @@ export function useFlowEditorActions({ const url = `${window.location.origin}/#/view?flow=${encoded}`; setShareViewerUrl(url); recordOnboardingEvent('first_share_opened', { surface: 'editor' }); + captureAnalyticsEvent('share_opened', { surface: 'editor' }); }, [nodes, edges, exportSerializationMode]); const clearShareViewerUrl = useCallback((): void => setShareViewerUrl(null), []); diff --git a/src/hooks/useFlowEditorCallbacks.ts b/src/hooks/useFlowEditorCallbacks.ts index dd6ede69..ef890add 100644 --- a/src/hooks/useFlowEditorCallbacks.ts +++ b/src/hooks/useFlowEditorCallbacks.ts @@ -4,11 +4,11 @@ import { useFlowStore } from '@/store'; import { composeDiagramForDisplay } from '@/services/composeDiagramForDisplay'; interface UseFlowEditorCallbacksParams { - addTab: () => string; - closeTab: (tabId: string) => void; - updateTab: (tabId: string, update: Partial<{ name: string }>) => void; + addPage: () => string; + closePage: (pageId: string) => void; + updatePage: (pageId: string, update: Partial<{ name: string }>) => void; navigate: (path: string) => void; - tabsLength: number; + pagesLength: number; cannotCloseLastTabMessage: string; setNodes: (nodes: FlowNode[] | ((nodes: FlowNode[]) => FlowNode[])) => void; setEdges: (edges: FlowEdge[] | ((edges: FlowEdge[]) => FlowEdge[])) => void; @@ -20,21 +20,21 @@ interface UseFlowEditorCallbacksParams { interface UseFlowEditorCallbacksResult { getCenter: () => { x: number; y: number }; - handleSwitchTab: (tabId: string) => void; - handleAddTab: () => void; - handleCloseTab: (tabId: string) => void; - handleRenameTab: (tabId: string, newName: string) => void; + handleSwitchPage: (pageId: string) => void; + handleAddPage: () => void; + handleClosePage: (pageId: string) => void; + handleRenamePage: (pageId: string, newName: string) => void; selectAll: () => void; handleRestoreSnapshot: (snapshot: FlowSnapshot) => void; handleCommandBarApply: (newNodes: FlowNode[], newEdges: FlowEdge[]) => void; } export function useFlowEditorCallbacks({ - addTab, - closeTab, - updateTab, + addPage, + closePage, + updatePage, navigate, - tabsLength, + pagesLength, cannotCloseLastTabMessage, setNodes, setEdges, @@ -51,26 +51,26 @@ export function useFlowEditorCallbacks({ return screenToFlowPosition({ x: centerX, y: centerY }); }, [screenToFlowPosition]); - const handleSwitchTab = useCallback((tabId: string) => { - navigate(`/flow/${tabId}`); + const handleSwitchPage = useCallback((pageId: string) => { + navigate(`/flow/${pageId}`); }, [navigate]); - const handleAddTab = useCallback(() => { - const newId = addTab(); + const handleAddPage = useCallback(() => { + const newId = addPage(); navigate(`/flow/${newId}`); - }, [addTab, navigate]); + }, [addPage, navigate]); - const handleCloseTab = useCallback((tabId: string) => { - if (tabsLength === 1) { + const handleClosePage = useCallback((pageId: string) => { + if (pagesLength === 1) { alert(cannotCloseLastTabMessage); return; } - closeTab(tabId); - }, [cannotCloseLastTabMessage, closeTab, tabsLength]); + closePage(pageId); + }, [cannotCloseLastTabMessage, closePage, pagesLength]); - const handleRenameTab = useCallback((tabId: string, newName: string) => { - updateTab(tabId, { name: newName }); - }, [updateTab]); + const handleRenamePage = useCallback((pageId: string, newName: string) => { + updatePage(pageId, { name: newName }); + }, [updatePage]); const selectAll = useCallback(() => { setNodes((nodes) => nodes.map((node) => ({ ...node, selected: true }))); @@ -134,10 +134,10 @@ export function useFlowEditorCallbacks({ return { getCenter, - handleSwitchTab, - handleAddTab, - handleCloseTab, - handleRenameTab, + handleSwitchPage, + handleAddPage, + handleClosePage, + handleRenamePage, selectAll, handleRestoreSnapshot, handleCommandBarApply, diff --git a/src/hooks/useFlowEditorCollaboration.ts b/src/hooks/useFlowEditorCollaboration.ts index 46986e3b..c41dfb88 100644 --- a/src/hooks/useFlowEditorCollaboration.ts +++ b/src/hooks/useFlowEditorCollaboration.ts @@ -47,7 +47,7 @@ export type CollaborationRemotePresence = ReturnType; @@ -63,7 +63,7 @@ interface UseFlowEditorCollaborationResult { export function useFlowEditorCollaboration({ collaborationEnabled, - activeTabId, + activePageId, nodes, edges, editorSurfaceRef, @@ -93,8 +93,8 @@ export function useFlowEditorCollaboration({ const collaborationFlushTimerRef = useRef(null); const collaborationRoom = useMemo( - () => resolveCollaborationRoomId(location.search, activeTabId), - [location.search, activeTabId] + () => resolveCollaborationRoomId(location.search, activePageId), + [location.search, activePageId] ); const collaborationRoomId = collaborationRoom.roomId; const collaborationRoomSecret = useMemo( diff --git a/src/hooks/useFlowHistory.ts b/src/hooks/useFlowHistory.ts index 17051fd8..c382ae4d 100644 --- a/src/hooks/useFlowHistory.ts +++ b/src/hooks/useFlowHistory.ts @@ -1,14 +1,14 @@ import { useCallback } from 'react'; import { useHistoryActions } from '@/store/historyHooks'; -import { useTabsState } from '@/store/tabHooks'; +import { useEditorPagesState } from '@/store/editorPageHooks'; export const useFlowHistory = () => { - const { tabs, activeTabId } = useTabsState(); + const { pages, activePageId } = useEditorPagesState(); const { recordHistoryV2, undoV2, redoV2, canUndoV2, canRedoV2 } = useHistoryActions(); - const activeTab = tabs.find((tab) => tab.id === activeTabId); - const past = activeTab?.history.past ?? []; - const future = activeTab?.history.future ?? []; + const activePage = pages.find((page) => page.id === activePageId); + const past = activePage?.history.past ?? []; + const future = activePage?.history.future ?? []; const recordHistory = useCallback(() => { recordHistoryV2(); diff --git a/src/hooks/usePlayback.ts b/src/hooks/usePlayback.ts index beeb633c..8733983a 100644 --- a/src/hooks/usePlayback.ts +++ b/src/hooks/usePlayback.ts @@ -1,6 +1,7 @@ import { useState, useCallback, useEffect, useRef } from 'react'; import { useReactFlow } from '@/lib/reactflowCompat'; import { useFlowStore } from '../store'; +import { useEditorPagesState } from '@/store/editorPageHooks'; import { applyPlaybackStepStyles, buildPlaybackSequence, @@ -10,7 +11,8 @@ import { } from '@/services/playback/contracts'; export function usePlayback() { - const { nodes, tabs, activeTabId, setNodes } = useFlowStore(); + const { nodes, setNodes } = useFlowStore(); + const { pages, activePageId } = useEditorPagesState(); const { fitView } = useReactFlow(); const [isPlaying, setIsPlaying] = useState(false); @@ -21,9 +23,9 @@ export function usePlayback() { const initialStyles = useRef(capturePlaybackStyles([])); const resolveSequence = useCallback(() => { - const activeTabPlayback = tabs.find((tab) => tab.id === activeTabId)?.playback; - return buildPlaybackSequenceFromState(nodes, activeTabPlayback, playbackSpeed); - }, [activeTabId, nodes, playbackSpeed, tabs]); + const activePagePlayback = pages.find((page) => page.id === activePageId)?.playback; + return buildPlaybackSequenceFromState(nodes, activePagePlayback, playbackSpeed); + }, [activePageId, nodes, pages, playbackSpeed]); const restoreStyles = useCallback(() => { if (Object.keys(initialStyles.current).length > 0) { diff --git a/src/i18n/locales/de/translation.json b/src/i18n/locales/de/translation.json index b99704b5..c66ec0b3 100644 --- a/src/i18n/locales/de/translation.json +++ b/src/i18n/locales/de/translation.json @@ -331,7 +331,7 @@ "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.", @@ -740,21 +740,6 @@ "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.", diff --git a/src/i18n/locales/en/translation.json b/src/i18n/locales/en/translation.json index 983c72ec..5a56f080 100644 --- a/src/i18n/locales/en/translation.json +++ b/src/i18n/locales/en/translation.json @@ -262,7 +262,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.", @@ -361,9 +361,7 @@ "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.", @@ -1076,22 +1074,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", @@ -1214,7 +1197,7 @@ "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" } } diff --git a/src/i18n/locales/es/translation.json b/src/i18n/locales/es/translation.json index a2e61737..b552d8c4 100644 --- a/src/i18n/locales/es/translation.json +++ b/src/i18n/locales/es/translation.json @@ -331,7 +331,7 @@ "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.", @@ -740,21 +740,6 @@ "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.", diff --git a/src/i18n/locales/fr/translation.json b/src/i18n/locales/fr/translation.json index 8a5300a3..46b42400 100644 --- a/src/i18n/locales/fr/translation.json +++ b/src/i18n/locales/fr/translation.json @@ -331,7 +331,7 @@ "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.", @@ -740,21 +740,6 @@ "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.", diff --git a/src/i18n/locales/ja/translation.json b/src/i18n/locales/ja/translation.json index 6101f0d5..1eff7513 100644 --- a/src/i18n/locales/ja/translation.json +++ b/src/i18n/locales/ja/translation.json @@ -331,7 +331,7 @@ "press": "押す", "shortcuts": "ショートカット表示", "privacy": "図、APIキー、データはすべてローカルデバイスに保存されます。", - "analytics": "匿名のページ訪問のみを集計します。", + "analytics": "現在、分析データは収集していません。", "features": { "beautifulByDefault": "デフォルトで美しい", "automatedLayouts": "自動レイアウトとプロのテーマ。", @@ -740,21 +740,6 @@ "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": "キャンバス設定とキーボードショートカットを構成します。", diff --git a/src/i18n/locales/tr/translation.json b/src/i18n/locales/tr/translation.json index 837376a9..bb97e2ec 100644 --- a/src/i18n/locales/tr/translation.json +++ b/src/i18n/locales/tr/translation.json @@ -264,7 +264,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.", @@ -364,7 +364,7 @@ "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.", @@ -997,21 +997,6 @@ "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.", @@ -1128,8 +1113,8 @@ "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", diff --git a/src/i18n/locales/zh/translation.json b/src/i18n/locales/zh/translation.json index b69f26b9..5a19b323 100644 --- a/src/i18n/locales/zh/translation.json +++ b/src/i18n/locales/zh/translation.json @@ -331,7 +331,7 @@ "press": "按下", "shortcuts": "查看快捷键", "privacy": "您的图表、API 密钥和数据均保存在本地设备上。", - "analytics": "我们只统计匿名访问量。", + "analytics": "目前我们不收集分析数据。", "features": { "beautifulByDefault": "默认美观", "automatedLayouts": "自动布局和专业主题。", @@ -740,21 +740,6 @@ "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": "配置画布偏好设置和键盘快捷键。", diff --git a/src/index.tsx b/src/index.tsx index 7c6e5bfb..13844652 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -4,11 +4,19 @@ import App from './App'; import { ErrorBoundary } from './components/ErrorBoundary'; import { RouteLoadingFallback } from './components/app/RouteLoadingFallback'; import { ToastProvider } from './components/ui/ToastContext'; +import { + captureAppOpened, + captureSessionStarted, + initializeAnalytics, +} from './services/analytics/analytics'; import { ensureLocalFirstPersistenceReady } from './services/storage/localFirstRuntime'; import { installStorageTelemetrySink } from './services/storage/storageTelemetrySink'; import { registerAppShellServiceWorker } from './services/offline/registerAppShellServiceWorker'; import './index.css'; +initializeAnalytics(); +captureAppOpened(); +captureSessionStarted(); installStorageTelemetrySink(); registerAppShellServiceWorker(); diff --git a/src/services/analytics/analytics.ts b/src/services/analytics/analytics.ts new file mode 100644 index 00000000..ca59e324 --- /dev/null +++ b/src/services/analytics/analytics.ts @@ -0,0 +1,157 @@ +import posthog from 'posthog-js'; +import { + getAnalyticsPreference, + subscribeToAnalyticsPreference, +} from './analyticsSettings'; +import { initializeSurfaceAnalytics } from './surfaceAnalyticsClient'; + +export type AnalyticsPropertyValue = string | number | boolean | null | undefined; +export type AnalyticsProperties = Record; + +const POSTHOG_API_KEY = import.meta.env.VITE_POSTHOG_KEY?.trim(); +const POSTHOG_API_HOST = import.meta.env.VITE_POSTHOG_HOST?.trim() || 'https://us.i.posthog.com'; +const ANALYTICS_FEATURE_FLAG = import.meta.env.VITE_ENABLE_ANALYTICS === 'true'; +const SESSION_MARKER_KEY = 'openflowkit.analytics.session-started'; + +let analyticsInitialized = false; +let analyticsPreferenceSyncInstalled = false; +let appSurfaceAnalytics = initializeSurfaceAnalytics({ + surface: 'app', + apiKey: POSTHOG_API_KEY, + apiHost: POSTHOG_API_HOST, + enabled: false, +}); + +function isAnalyticsConfigured(): boolean { + return ANALYTICS_FEATURE_FLAG && Boolean(POSTHOG_API_KEY) && typeof window !== 'undefined'; +} + +function sanitizeString(value: string): string { + return value.trim().slice(0, 200); +} + +function sanitizeProperties(properties?: AnalyticsProperties): Record { + if (!properties) return {}; + + return Object.fromEntries( + Object.entries(properties) + .filter(([, value]) => value !== undefined) + .map(([key, value]) => [key, typeof value === 'string' ? sanitizeString(value) : value ?? null]) + ); +} + +function syncPostHogPreference(enabled: boolean): void { + if (!analyticsInitialized || !isAnalyticsConfigured()) { + return; + } + + if (enabled) { + posthog.opt_in_capturing(); + return; + } + + posthog.opt_out_capturing(); +} + +function ensurePreferenceSyncInstalled(): void { + if (analyticsPreferenceSyncInstalled) { + return; + } + + subscribeToAnalyticsPreference(syncPostHogPreference); + analyticsPreferenceSyncInstalled = true; +} + +export function isAnalyticsEnabled(): boolean { + return isAnalyticsConfigured() && getAnalyticsPreference(); +} + +export function initializeAnalytics(): void { + if (!isAnalyticsConfigured() || analyticsInitialized || !POSTHOG_API_KEY) { + return; + } + + appSurfaceAnalytics = initializeSurfaceAnalytics({ + surface: 'app', + apiKey: POSTHOG_API_KEY, + apiHost: POSTHOG_API_HOST, + enabled: true, + }); + + analyticsInitialized = true; + ensurePreferenceSyncInstalled(); + + if (!getAnalyticsPreference()) { + posthog.opt_out_capturing(); + } +} + +export function captureAnalyticsEvent( + eventName: string, + properties?: AnalyticsProperties +): void { + if (!isAnalyticsEnabled()) { + return; + } + + initializeAnalytics(); + appSurfaceAnalytics.capture(eventName, sanitizeProperties(properties)); +} + +export function captureAnalyticsException( + error: unknown, + properties?: AnalyticsProperties +): void { + captureAnalyticsEvent('unhandled_error', { + error_name: error instanceof Error ? error.name : 'UnknownError', + ...properties, + }); +} + +function getReferrerHost(): string | null { + if (typeof document === 'undefined' || !document.referrer) { + return null; + } + + try { + return new URL(document.referrer).host; + } catch { + return 'invalid'; + } +} + +function getLocationProperties(): AnalyticsProperties { + if (typeof window === 'undefined') { + return {}; + } + + const searchParams = new URLSearchParams(window.location.search); + + return { + path: window.location.pathname, + hash_path: window.location.hash || null, + referrer_host: getReferrerHost(), + utm_source: searchParams.get('utm_source'), + utm_medium: searchParams.get('utm_medium'), + utm_campaign: searchParams.get('utm_campaign'), + utm_term: searchParams.get('utm_term'), + utm_content: searchParams.get('utm_content'), + }; +} + +export function captureAppOpened(): void { + captureAnalyticsEvent('app_opened', getLocationProperties()); +} + +export function captureSessionStarted(): void { + if (typeof window === 'undefined') { + return; + } + + if (window.sessionStorage.getItem(SESSION_MARKER_KEY) === 'true') { + return; + } + + window.sessionStorage.setItem(SESSION_MARKER_KEY, 'true'); + captureAnalyticsEvent('session_started', getLocationProperties()); +} diff --git a/src/services/analytics/analyticsSettings.test.ts b/src/services/analytics/analyticsSettings.test.ts new file mode 100644 index 00000000..12a6edee --- /dev/null +++ b/src/services/analytics/analyticsSettings.test.ts @@ -0,0 +1,33 @@ +import { afterEach, describe, expect, it, vi } from 'vitest'; +import { + getAnalyticsPreference, + setAnalyticsPreference, + subscribeToAnalyticsPreference, +} from './analyticsSettings'; + +describe('analyticsSettings', () => { + afterEach(() => { + window.localStorage.removeItem('openflowkit-analytics-enabled'); + }); + + it('defaults analytics preference to enabled', () => { + expect(getAnalyticsPreference()).toBe(true); + }); + + it('persists analytics preference updates', () => { + setAnalyticsPreference(false); + + expect(getAnalyticsPreference()).toBe(false); + expect(window.localStorage.getItem('openflowkit-analytics-enabled')).toBe('false'); + }); + + it('notifies subscribers when preference changes', () => { + const listener = vi.fn(); + const unsubscribe = subscribeToAnalyticsPreference(listener); + + setAnalyticsPreference(false); + + expect(listener).toHaveBeenCalledWith(false); + unsubscribe(); + }); +}); diff --git a/src/services/analytics/analyticsSettings.ts b/src/services/analytics/analyticsSettings.ts new file mode 100644 index 00000000..e5cd2c36 --- /dev/null +++ b/src/services/analytics/analyticsSettings.ts @@ -0,0 +1,50 @@ +const ANALYTICS_PREFERENCE_STORAGE_KEY = 'openflowkit-analytics-enabled'; + +type AnalyticsPreferenceListener = (enabled: boolean) => void; + +const listeners = new Set(); + +function readStoredPreference(): boolean | null { + if (typeof window === 'undefined') return null; + + try { + const rawValue = window.localStorage.getItem(ANALYTICS_PREFERENCE_STORAGE_KEY); + if (rawValue === 'true') return true; + if (rawValue === 'false') return false; + } catch { + // Ignore local preference read failures and fall back to defaults. + } + + return null; +} + +export function getAnalyticsPreference(): boolean { + return readStoredPreference() ?? true; +} + +export function setAnalyticsPreference(enabled: boolean): void { + if (typeof window !== 'undefined') { + try { + window.localStorage.setItem(ANALYTICS_PREFERENCE_STORAGE_KEY, String(enabled)); + } catch { + // Ignore local preference write failures and still notify listeners. + } + } + + listeners.forEach((listener) => { + try { + listener(enabled); + } catch { + // Analytics preference listeners are best-effort only. + } + }); +} + +export function subscribeToAnalyticsPreference( + listener: AnalyticsPreferenceListener +): () => void { + listeners.add(listener); + return () => { + listeners.delete(listener); + }; +} diff --git a/src/services/analytics/surfaceAnalyticsClient.ts b/src/services/analytics/surfaceAnalyticsClient.ts new file mode 100644 index 00000000..448ac158 --- /dev/null +++ b/src/services/analytics/surfaceAnalyticsClient.ts @@ -0,0 +1,125 @@ +import posthog from 'posthog-js'; + +export type AnalyticsSurface = 'app' | 'landing' | 'docs'; + +type SurfaceAnalyticsOptions = { + surface: AnalyticsSurface; + apiKey?: string; + apiHost?: string; + enabled?: boolean; + defaultProperties?: Record; +}; + +type SurfaceEventProperties = Record; + +const initializedSurfaces = new Set(); + +function sanitizeString(value: string): string { + return value.trim().slice(0, 200); +} + +function sanitizeProperties( + surface: AnalyticsSurface, + properties?: SurfaceEventProperties, + defaultProperties?: SurfaceEventProperties +): Record { + return Object.fromEntries( + Object.entries({ + surface, + ...defaultProperties, + ...properties, + }) + .filter(([, value]) => value !== undefined) + .map(([key, value]) => [key, typeof value === 'string' ? sanitizeString(value) : value ?? null]) + ); +} + +function getEnvironment(): string { + if (typeof window === 'undefined') { + return 'server'; + } + + const hostname = window.location.hostname; + if (hostname === 'localhost' || hostname === '127.0.0.1') return 'local'; + if (hostname.includes('preview') || hostname.includes('vercel') || hostname.includes('netlify')) return 'preview'; + return 'production'; +} + +function getReferrerHost(): string | null { + if (typeof document === 'undefined' || !document.referrer) { + return null; + } + + try { + return new URL(document.referrer).host; + } catch { + return 'invalid'; + } +} + +function getPageProperties(): SurfaceEventProperties { + if (typeof window === 'undefined') { + return {}; + } + + const searchParams = new URLSearchParams(window.location.search); + + return { + path: window.location.pathname, + hash_path: window.location.hash || null, + referrer_host: getReferrerHost(), + environment: getEnvironment(), + utm_source: searchParams.get('utm_source'), + utm_medium: searchParams.get('utm_medium'), + utm_campaign: searchParams.get('utm_campaign'), + utm_term: searchParams.get('utm_term'), + utm_content: searchParams.get('utm_content'), + }; +} + +export function initializeSurfaceAnalytics({ + surface, + apiKey, + apiHost = 'https://us.i.posthog.com', + enabled = false, + defaultProperties, +}: SurfaceAnalyticsOptions): { + capture: (eventName: string, properties?: SurfaceEventProperties) => void; + capturePageView: (eventName?: string, properties?: SurfaceEventProperties) => void; +} { + const isEnabled = enabled && Boolean(apiKey) && typeof window !== 'undefined'; + + if (isEnabled && apiKey && !initializedSurfaces.has(surface)) { + posthog.init(apiKey, { + api_host: apiHost, + autocapture: false, + capture_pageview: false, + capture_pageleave: false, + capture_exceptions: false, + disable_session_recording: true, + persistence: 'localStorage', + persistence_name: `openflowkit_${surface}`, + }); + initializedSurfaces.add(surface); + } + + function capture(eventName: string, properties?: SurfaceEventProperties): void { + if (!isEnabled) { + return; + } + + posthog.capture(eventName, sanitizeProperties(surface, properties, defaultProperties)); + } + + function capturePageView(eventName = 'page_viewed', properties?: SurfaceEventProperties): void { + capture(eventName, { + ...getPageProperties(), + ...properties, + }); + } + + return { + capture, + capturePageView, + }; +} diff --git a/src/services/onboarding/events.ts b/src/services/onboarding/events.ts index 3c83bf75..a0a33907 100644 --- a/src/services/onboarding/events.ts +++ b/src/services/onboarding/events.ts @@ -1,3 +1,5 @@ +import { captureAnalyticsEvent } from '@/services/analytics/analytics'; + export type OnboardingEventName = | 'welcome_template_selected' | 'welcome_import_selected' @@ -89,6 +91,11 @@ export function recordOnboardingEvent( ); } + captureAnalyticsEvent(name, { + first: event.first, + ...detail, + }); + return event; } diff --git a/src/services/storage/flowDocumentModel.test.ts b/src/services/storage/flowDocumentModel.test.ts new file mode 100644 index 00000000..bc60f856 --- /dev/null +++ b/src/services/storage/flowDocumentModel.test.ts @@ -0,0 +1,118 @@ +import { describe, expect, it } from 'vitest'; +import type { FlowTab } from '@/lib/types'; +import type { PersistedDocument, WorkspaceMeta } from './persistenceTypes'; +import { + convertFlowDocumentsToTabs, + createFlowDocumentFromPersistedDocument, + createFlowDocumentsFromPersistedDocuments, + createLoadedFlowWorkspace, +} from './flowDocumentModel'; + +function createPersistedDocument(overrides: Partial = {}): PersistedDocument { + const tabHistory: FlowTab['history'] = { past: [], future: [] }; + + return { + id: 'doc-1', + name: 'System Design', + diagramType: 'flowchart', + createdAt: '2026-03-27T00:00:00.000Z', + updatedAt: '2026-03-27T00:00:00.000Z', + deletedAt: null, + content: { + nodes: [], + edges: [], + history: tabHistory, + playback: undefined, + }, + ...overrides, + }; +} + +function createWorkspaceMeta(overrides: Partial = {}): WorkspaceMeta { + return { + id: 'workspace', + activeDocumentId: 'doc-1', + documentOrder: ['doc-1'], + lastOpenedAt: '2026-03-27T00:00:00.000Z', + ...overrides, + }; +} + +describe('flowDocumentModel', () => { + it('maps a persisted document into a single-page flow document', () => { + const persistedDocument = createPersistedDocument(); + + const document = createFlowDocumentFromPersistedDocument(persistedDocument); + + expect(document.id).toBe('doc-1'); + expect(document.name).toBe('System Design'); + expect(document.pages).toHaveLength(1); + expect(document.pages[0]?.id).toBe('doc-1:page:primary'); + expect(document.activePageId).toBe('doc-1:page:primary'); + }); + + it('creates a loaded flow workspace with explicit documents', () => { + const persistedDocument = createPersistedDocument(); + + const workspace = createLoadedFlowWorkspace({ + document: persistedDocument, + documents: [persistedDocument], + workspaceMeta: createWorkspaceMeta(), + }); + + expect(workspace.activeDocumentId).toBe('doc-1'); + expect(workspace.documents).toHaveLength(1); + expect(workspace.documents[0]?.pages).toHaveLength(1); + }); + + it('preserves multipage persisted documents', () => { + const persistedDocument = createPersistedDocument({ + content: undefined, + activePageId: 'doc-1:page:deployment', + pages: [ + { + id: 'doc-1:page:overview', + name: 'Overview', + diagramType: 'flowchart', + updatedAt: '2026-03-27T00:00:00.000Z', + content: { + nodes: [], + edges: [], + history: { past: [], future: [] }, + playback: undefined, + }, + }, + { + id: 'doc-1:page:deployment', + name: 'Deployment', + diagramType: 'sequence', + updatedAt: '2026-03-27T00:00:00.000Z', + content: { + nodes: [], + edges: [], + history: { past: [], future: [] }, + playback: undefined, + }, + }, + ], + }); + + const document = createFlowDocumentFromPersistedDocument(persistedDocument); + + expect(document.pages).toHaveLength(2); + expect(document.activePageId).toBe('doc-1:page:deployment'); + expect(document.pages[1]?.name).toBe('Deployment'); + }); + + it('converts flow documents back to tabs for the current editor UI', () => { + const documents = createFlowDocumentsFromPersistedDocuments([ + createPersistedDocument(), + ]); + + const tabs = convertFlowDocumentsToTabs(documents); + + expect(tabs).toHaveLength(1); + expect(tabs[0]?.id).toBe('doc-1'); + expect(tabs[0]?.name).toBe('System Design'); + }); +}); diff --git a/src/services/storage/flowDocumentModel.ts b/src/services/storage/flowDocumentModel.ts new file mode 100644 index 00000000..1bf70b69 --- /dev/null +++ b/src/services/storage/flowDocumentModel.ts @@ -0,0 +1,133 @@ +import type { DiagramType, FlowTab, PlaybackState } from '@/lib/types'; +import type { + LoadedDocument, + PersistedDocument, + PersistedDocumentContent, + PersistedDocumentPage, + WorkspaceMeta, +} from './persistenceTypes'; + +export interface FlowPage { + id: string; + name: string; + diagramType?: DiagramType; + updatedAt?: string; + nodes: FlowTab['nodes']; + edges: FlowTab['edges']; + playback?: PlaybackState; + history: FlowTab['history']; +} + +export interface FlowDocument { + id: string; + name: string; + createdAt: string; + updatedAt: string; + activePageId: string; + pages: FlowPage[]; +} + +export interface LoadedFlowWorkspace { + activeDocumentId: string | null; + documents: FlowDocument[]; + workspaceMeta: WorkspaceMeta; +} + +function createFlowPageFromPersistedContent( + documentId: string, + name: string, + diagramType: DiagramType | undefined, + updatedAt: string, + content: PersistedDocumentContent +): FlowPage { + return { + id: `${documentId}:page:primary`, + name, + diagramType, + updatedAt, + nodes: content.nodes, + edges: content.edges, + playback: content.playback, + history: content.history, + }; +} + +function createFlowPageFromPersistedPage(page: PersistedDocumentPage): FlowPage { + return { + id: page.id, + name: page.name, + diagramType: page.diagramType, + updatedAt: page.updatedAt, + nodes: page.content.nodes, + edges: page.content.edges, + playback: page.content.playback, + history: page.content.history, + }; +} + +export function createFlowDocumentFromPersistedDocument( + document: PersistedDocument +): FlowDocument { + const pages = document.pages?.length + ? document.pages.map(createFlowPageFromPersistedPage) + : document.content + ? [createFlowPageFromPersistedContent( + document.id, + document.name, + document.diagramType, + document.updatedAt, + document.content, + )] + : []; + + if (pages.length === 0) { + throw new Error(`Persisted document "${document.id}" is missing page content.`); + } + + const activePageId = pages.some((page) => page.id === document.activePageId) + ? (document.activePageId as string) + : pages[0].id; + + return { + id: document.id, + name: document.name, + createdAt: document.createdAt, + updatedAt: document.updatedAt, + activePageId, + pages, + }; +} + +export function createFlowDocumentsFromPersistedDocuments( + documents: PersistedDocument[] +): FlowDocument[] { + return documents.map(createFlowDocumentFromPersistedDocument); +} + +export function createLoadedFlowWorkspace( + loaded: LoadedDocument +): LoadedFlowWorkspace { + const documents = createFlowDocumentsFromPersistedDocuments(loaded.documents); + const activeDocumentId = loaded.document?.id ?? loaded.workspaceMeta.activeDocumentId ?? documents[0]?.id ?? null; + + return { + activeDocumentId, + documents, + workspaceMeta: loaded.workspaceMeta, + }; +} + +export function convertFlowDocumentsToTabs(documents: FlowDocument[]): FlowTab[] { + return documents.flatMap((document) => + document.pages.map((page) => ({ + id: document.pages.length === 1 ? document.id : page.id, + name: document.pages.length === 1 ? document.name : `${document.name} / ${page.name}`, + diagramType: page.diagramType, + updatedAt: page.updatedAt ?? document.updatedAt, + nodes: page.nodes, + edges: page.edges, + playback: page.playback, + history: page.history, + })) + ); +} diff --git a/src/services/storage/localFirstRepository.ts b/src/services/storage/localFirstRepository.ts index b8699a14..1a31415a 100644 --- a/src/services/storage/localFirstRepository.ts +++ b/src/services/storage/localFirstRepository.ts @@ -1,5 +1,18 @@ import type { FlowTab } from '@/lib/types'; import type { ChatMessage } from '@/services/aiService'; +import { + createFlowTabsFromPersistedDocuments, + createPersistedDocumentFromFlowDocument, + createPersistedDocumentsFromTabs, +} from './persistedDocumentAdapters'; +import type { FlowDocument } from './flowDocumentModel'; +import type { + LoadedDocument, + PersistedDocument, + PersistedDocumentContent, + PersistedDocumentSession, + WorkspaceMeta, +} from './persistenceTypes'; import { AI_SETTINGS_PERSISTENT_STORE_NAME, CHAT_MESSAGES_STORE_NAME, @@ -19,32 +32,6 @@ const WORKSPACE_META_FALLBACK_KEY = 'openflowkit-workspace-meta-fallback'; const CHAT_HISTORY_STORAGE_KEY_PREFIX = 'ofk_chat_history_'; const PERSISTENT_AI_SETTINGS_RECORD_ID = 'default'; -export interface PersistedDocumentContent { - nodes: FlowTab['nodes']; - edges: FlowTab['edges']; - playback?: FlowTab['playback']; - history: FlowTab['history']; -} - -export interface PersistedDocument { - id: string; - name: string; - diagramType?: FlowTab['diagramType']; - content: PersistedDocumentContent; - createdAt: string; - updatedAt: string; - deletedAt: string | null; -} - -export interface PersistedDocumentSession { - id: string; - documentId: string; - camera?: unknown; - viewport?: unknown; - lastOpenedPanel?: string; - lastOpenedAt: string; -} - export interface PersistedChatThread { id: string; documentId: string; @@ -59,27 +46,17 @@ export interface PersistedChatMessage { createdAt: string; } -export interface WorkspaceMeta { - id: typeof WORKSPACE_META_ID; - activeDocumentId: string | null; - documentOrder: string[]; - lastOpenedAt: string; -} - export interface PersistedAISettingsRecord { id: 'default'; value: string; } -export interface LoadedDocument { - document: PersistedDocument | null; - documents: PersistedDocument[]; - workspaceMeta: WorkspaceMeta; -} - export interface PersistenceRepository { + loadWorkspaceSnapshot(): Promise; loadActiveDocument(): Promise; saveDocument(documentId: string, content: PersistedDocumentContent): Promise; + saveFlowDocuments(documents: FlowDocument[], activeDocumentId: string | null): Promise; + saveDocuments(documents: PersistedDocument[], activeDocumentId: string | null): Promise; saveWorkspace(tabs: FlowTab[], activeDocumentId: string | null): Promise; deleteDocument(documentId: string): Promise; loadDocumentSession(documentId: string): Promise; @@ -119,37 +96,6 @@ function getNowIso(): string { return new Date().toISOString(); } -function toDocumentRecord(tab: FlowTab): PersistedDocument { - const nowIso = getNowIso(); - return { - id: tab.id, - name: tab.name, - diagramType: tab.diagramType, - content: { - nodes: tab.nodes, - edges: tab.edges, - playback: tab.playback, - history: tab.history, - }, - createdAt: tab.updatedAt ?? nowIso, - updatedAt: tab.updatedAt ?? nowIso, - deletedAt: null, - }; -} - -function toFlowTab(document: PersistedDocument): FlowTab { - return { - id: document.id, - name: document.name, - diagramType: document.diagramType, - updatedAt: document.updatedAt, - nodes: document.content.nodes, - edges: document.content.edges, - playback: document.content.playback, - history: document.content.history, - }; -} - async function withDatabase(handler: (database: IDBDatabase) => Promise): Promise { const indexedDbFactory = getIndexedDbFactory(); if (!indexedDbFactory) { @@ -258,7 +204,7 @@ async function migrateLegacyChatHistory(documentId: string): Promise { } export const localFirstRepository: PersistenceRepository = { - async loadActiveDocument(): Promise { + async loadWorkspaceSnapshot(): Promise { try { const loaded = await withDatabase(async (database) => { const documents = (await getAllRecords(database, PERSISTED_DOCUMENTS_STORE_NAME)) @@ -310,8 +256,12 @@ export const localFirstRepository: PersistenceRepository = { } }, + async loadActiveDocument(): Promise { + return this.loadWorkspaceSnapshot(); + }, + async saveDocument(documentId: string, content: PersistedDocumentContent): Promise { - const loaded = await this.loadActiveDocument(); + const loaded = await this.loadWorkspaceSnapshot(); const targetDocument = loaded.documents.find((document) => document.id === documentId); if (!targetDocument) { return; @@ -320,6 +270,11 @@ export const localFirstRepository: PersistenceRepository = { const updatedDocument: PersistedDocument = { ...targetDocument, content, + pages: targetDocument.pages?.map((page) => + page.id === targetDocument.activePageId + ? { ...page, content, updatedAt: getNowIso() } + : page, + ) ?? targetDocument.pages, updatedAt: getNowIso(), }; @@ -333,9 +288,8 @@ export const localFirstRepository: PersistenceRepository = { } }, - async saveWorkspace(tabs: FlowTab[], activeDocumentId: string | null): Promise { + async saveDocuments(documents: PersistedDocument[], activeDocumentId: string | null): Promise { const nowIso = getNowIso(); - const documents = tabs.map(toDocumentRecord); const workspaceMeta = createDefaultWorkspaceMeta( documents.map((document) => document.id), activeDocumentId ?? documents[0]?.id ?? null, @@ -383,6 +337,17 @@ export const localFirstRepository: PersistenceRepository = { } }, + async saveWorkspace(tabs: FlowTab[], activeDocumentId: string | null): Promise { + return this.saveDocuments(createPersistedDocumentsFromTabs(tabs), activeDocumentId); + }, + + async saveFlowDocuments(documents: FlowDocument[], activeDocumentId: string | null): Promise { + return this.saveDocuments( + documents.map(createPersistedDocumentFromFlowDocument), + activeDocumentId, + ); + }, + async deleteDocument(documentId: string): Promise { try { await withDatabase(async (database) => { @@ -529,6 +494,16 @@ export const localFirstRepository: PersistenceRepository = { }, }; +export type { + LoadedDocument, + PersistedDocument, + PersistedDocumentContent, + PersistedDocumentSession, + WorkspaceMeta, +} from './persistenceTypes'; + +export { createFlowDocumentFromPersistedDocument, createFlowDocumentsFromPersistedDocuments, convertFlowDocumentsToTabs, createLoadedFlowWorkspace } from './flowDocumentModel'; + export function convertPersistedDocumentsToTabs(documents: PersistedDocument[]): FlowTab[] { - return documents.map(toFlowTab); + return createFlowTabsFromPersistedDocuments(documents); } diff --git a/src/services/storage/localFirstRuntime.ts b/src/services/storage/localFirstRuntime.ts index f02392cc..741151e4 100644 --- a/src/services/storage/localFirstRuntime.ts +++ b/src/services/storage/localFirstRuntime.ts @@ -1,10 +1,18 @@ import { DEFAULT_AI_SETTINGS } from '@/store'; +import { captureAnalyticsEvent } from '@/services/analytics/analytics'; import { sanitizeAISettings } from '@/store/aiSettings'; import { clearPersistedAISettings, loadPersistedAISettings } from '@/store/aiSettingsPersistence'; import { sanitizePersistedTab } from '@/store/persistence'; +import { syncWorkspaceDocuments } from '@/store/documentStateSync'; +import { getEditorPagesForDocument } from '@/store/workspaceDocumentModel'; import type { FlowStoreState } from '@/store'; import { useFlowStore } from '@/store'; -import { convertPersistedDocumentsToTabs, localFirstRepository, type PersistedChatMessage } from './localFirstRepository'; +import { createPersistedDocumentsFromTabs } from './persistedDocumentAdapters'; +import { + createLoadedFlowWorkspace, + localFirstRepository, + type PersistedChatMessage, +} from './localFirstRepository'; const STORE_SUBSCRIPTION_DEBOUNCE_MS = 250; @@ -63,7 +71,7 @@ function toPersistedChatMessages(documentId: string, serialized: string | null): async function migrateLegacyStoreIntoRepositoryIfNeeded(): Promise { const currentState = useFlowStore.getState(); - const loaded = await localFirstRepository.loadActiveDocument(); + const loaded = await localFirstRepository.loadWorkspaceSnapshot(); if (loaded.documents.length > 0) { return; } @@ -73,7 +81,10 @@ async function migrateLegacyStoreIntoRepositoryIfNeeded(): Promise { return; } - await localFirstRepository.saveWorkspace(tabs, currentState.activeTabId); + await localFirstRepository.saveDocuments( + createPersistedDocumentsFromTabs(tabs), + currentState.activeTabId, + ); await Promise.all( tabs.map(async (tab) => { @@ -93,14 +104,17 @@ async function migrateLegacyStoreIntoRepositoryIfNeeded(): Promise { } async function hydrateStoreFromRepository(): Promise { - const loaded = await localFirstRepository.loadActiveDocument(); - const tabs = convertPersistedDocumentsToTabs(loaded.documents); - if (tabs.length === 0) { + const loaded = await localFirstRepository.loadWorkspaceSnapshot(); + const workspace = createLoadedFlowWorkspace(loaded); + const activeDocument = getEditorPagesForDocument(workspace.documents, workspace.activeDocumentId); + if (!activeDocument) { + captureAnalyticsEvent('workspace_restored', { + document_count: 0, + has_active_document: false, + }); return; } - const activeTabId = loaded.document?.id ?? loaded.workspaceMeta.activeDocumentId ?? tabs[0].id; - const activeTab = tabs.find((tab) => tab.id === activeTabId) ?? tabs[0]; const persistentAiSettings = await localFirstRepository.loadPersistentAISettings(); const aiSettings = persistentAiSettings ? sanitizeAISettings(JSON.parse(persistentAiSettings) as Partial, DEFAULT_AI_SETTINGS) @@ -108,18 +122,36 @@ async function hydrateStoreFromRepository(): Promise { useFlowStore.setState((currentState) => ({ ...currentState, - tabs, - activeTabId: activeTab.id, - nodes: activeTab.nodes, - edges: activeTab.edges, + documents: workspace.documents, + activeDocumentId: activeDocument.activeDocumentId, + tabs: activeDocument.pages, + activeTabId: activeDocument.activePageId, + nodes: activeDocument.pages.find((page) => page.id === activeDocument.activePageId)?.nodes ?? [], + edges: activeDocument.pages.find((page) => page.id === activeDocument.activePageId)?.edges ?? [], aiSettings, })); + + captureAnalyticsEvent('workspace_restored', { + document_count: workspace.documents.length, + has_active_document: Boolean(activeDocument.activeDocumentId), + }); } function persistStoreSnapshot(): void { const nextState = useFlowStore.getState(); + const documents = syncWorkspaceDocuments({ + documents: nextState.documents, + activeDocumentId: nextState.activeDocumentId, + tabs: nextState.tabs.map(sanitizePersistedTab), + activeTabId: nextState.activeTabId, + nodes: nextState.nodes, + edges: nextState.edges, + }); - void localFirstRepository.saveWorkspace(nextState.tabs.map(sanitizePersistedTab), nextState.activeTabId); + void localFirstRepository.saveFlowDocuments( + documents, + nextState.activeDocumentId, + ); if (nextState.aiSettings.storageMode === 'local') { void localFirstRepository.savePersistentAISettings(JSON.stringify(nextState.aiSettings)); @@ -140,11 +172,13 @@ export async function initializeLocalFirstPersistence(): Promise { let debounceTimer: ReturnType | null = null; syncStopper = useFlowStore.subscribe((state, previousState) => { + const documentsChanged = state.documents !== previousState.documents; const tabsChanged = state.tabs !== previousState.tabs; - const activeDocumentChanged = state.activeTabId !== previousState.activeTabId; + const activeDocumentChanged = state.activeDocumentId !== previousState.activeDocumentId; + const activePageChanged = state.activeTabId !== previousState.activeTabId; const aiSettingsChanged = state.aiSettings !== previousState.aiSettings; - if (!tabsChanged && !activeDocumentChanged && !aiSettingsChanged) { + if (!documentsChanged && !tabsChanged && !activeDocumentChanged && !activePageChanged && !aiSettingsChanged) { return; } diff --git a/src/services/storage/persistedDocumentAdapters.test.ts b/src/services/storage/persistedDocumentAdapters.test.ts new file mode 100644 index 00000000..62377ecd --- /dev/null +++ b/src/services/storage/persistedDocumentAdapters.test.ts @@ -0,0 +1,77 @@ +import { describe, expect, it } from 'vitest'; +import type { FlowTab } from '@/lib/types'; +import { + createFlowTabFromPersistedDocument, + createPersistedDocumentFromFlowDocument, + createPersistedDocumentFromTab, +} from './persistedDocumentAdapters'; + +function createFlowTab(overrides: Partial = {}): FlowTab { + return { + id: 'tab-1', + name: 'System Design', + diagramType: 'flowchart', + updatedAt: '2026-03-27T00:00:00.000Z', + nodes: [], + edges: [], + playback: undefined, + history: { past: [], future: [] }, + ...overrides, + }; +} + +describe('persistedDocumentAdapters', () => { + it('maps a flow tab into a persisted document', () => { + const document = createPersistedDocumentFromTab(createFlowTab()); + + expect(document.id).toBe('tab-1'); + expect(document.name).toBe('System Design'); + expect(document.content.nodes).toEqual([]); + expect(document.deletedAt).toBeNull(); + }); + + it('maps a persisted document back into an editor tab', () => { + const tab = createFlowTabFromPersistedDocument(createPersistedDocumentFromTab(createFlowTab())); + + expect(tab.id).toBe('tab-1'); + expect(tab.name).toBe('System Design'); + expect(tab.diagramType).toBe('flowchart'); + expect(tab.history).toEqual({ past: [], future: [] }); + }); + + it('maps a multi-page flow document into a persisted multi-page document', () => { + const persisted = createPersistedDocumentFromFlowDocument({ + id: 'doc-1', + name: 'Architecture', + createdAt: '2026-03-27T00:00:00.000Z', + updatedAt: '2026-03-27T00:00:00.000Z', + activePageId: 'page-2', + pages: [ + { + id: 'page-1', + name: 'Overview', + diagramType: 'flowchart', + updatedAt: '2026-03-27T00:00:00.000Z', + nodes: [], + edges: [], + playback: undefined, + history: { past: [], future: [] }, + }, + { + id: 'page-2', + name: 'Deployment', + diagramType: 'sequence', + updatedAt: '2026-03-27T00:00:00.000Z', + nodes: [], + edges: [], + playback: undefined, + history: { past: [], future: [] }, + }, + ], + }); + + expect(persisted.pages).toHaveLength(2); + expect(persisted.activePageId).toBe('page-2'); + expect(persisted.content?.history).toEqual({ past: [], future: [] }); + }); +}); diff --git a/src/services/storage/persistedDocumentAdapters.ts b/src/services/storage/persistedDocumentAdapters.ts new file mode 100644 index 00000000..42c6ecfe --- /dev/null +++ b/src/services/storage/persistedDocumentAdapters.ts @@ -0,0 +1,106 @@ +import type { FlowTab } from '@/lib/types'; +import type { FlowDocument, FlowPage } from './flowDocumentModel'; +import type { PersistedDocument, PersistedDocumentPage } from './persistenceTypes'; + +function getNowIso(): string { + return new Date().toISOString(); +} + +export function createPersistedDocumentFromTab(tab: FlowTab): PersistedDocument { + const nowIso = getNowIso(); + const primaryPageId = `${tab.id}:page:primary`; + return { + id: tab.id, + name: tab.name, + diagramType: tab.diagramType, + content: { + nodes: tab.nodes, + edges: tab.edges, + playback: tab.playback, + history: tab.history, + }, + pages: [ + { + id: primaryPageId, + name: tab.name, + diagramType: tab.diagramType, + updatedAt: tab.updatedAt ?? nowIso, + content: { + nodes: tab.nodes, + edges: tab.edges, + playback: tab.playback, + history: tab.history, + }, + }, + ], + activePageId: primaryPageId, + createdAt: tab.updatedAt ?? nowIso, + updatedAt: tab.updatedAt ?? nowIso, + deletedAt: null, + }; +} + +export function createPersistedDocumentsFromTabs(tabs: FlowTab[]): PersistedDocument[] { + return tabs.map(createPersistedDocumentFromTab); +} + +export function createFlowTabFromPersistedDocument(document: PersistedDocument): FlowTab { + const primaryPage = document.pages?.find((page) => page.id === document.activePageId) + ?? document.pages?.[0]; + const content = primaryPage?.content ?? document.content; + const diagramType = primaryPage?.diagramType ?? document.diagramType; + + if (!content) { + throw new Error(`Persisted document "${document.id}" is missing page content.`); + } + + return { + id: document.id, + name: document.name, + diagramType, + updatedAt: primaryPage?.updatedAt ?? document.updatedAt, + nodes: content.nodes, + edges: content.edges, + playback: content.playback, + history: content.history, + }; +} + +export function createFlowTabsFromPersistedDocuments(documents: PersistedDocument[]): FlowTab[] { + return documents.map(createFlowTabFromPersistedDocument); +} + +function createPersistedPageFromFlowPage(page: FlowPage): PersistedDocumentPage { + return { + id: page.id, + name: page.name, + diagramType: page.diagramType, + updatedAt: page.updatedAt, + content: { + nodes: page.nodes, + edges: page.edges, + playback: page.playback, + history: page.history, + }, + }; +} + +export function createPersistedDocumentFromFlowDocument(document: FlowDocument): PersistedDocument { + const pages = document.pages.map(createPersistedPageFromFlowPage); + const activePage = pages.find((page) => page.id === document.activePageId) ?? pages[0]; + return { + id: document.id, + name: document.name, + diagramType: activePage?.diagramType, + content: activePage?.content, + pages, + activePageId: activePage?.id, + createdAt: document.createdAt, + updatedAt: document.updatedAt, + deletedAt: null, + }; +} + +export function createPersistedDocumentsFromFlowDocuments(documents: FlowDocument[]): PersistedDocument[] { + return documents.map(createPersistedDocumentFromFlowDocument); +} diff --git a/src/services/storage/persistenceTypes.ts b/src/services/storage/persistenceTypes.ts new file mode 100644 index 00000000..2fdff754 --- /dev/null +++ b/src/services/storage/persistenceTypes.ts @@ -0,0 +1,50 @@ +import type { FlowTab } from '@/lib/types'; + +export interface PersistedDocumentContent { + nodes: FlowTab['nodes']; + edges: FlowTab['edges']; + playback?: FlowTab['playback']; + history: FlowTab['history']; +} + +export interface PersistedDocumentPage { + id: string; + name: string; + diagramType?: FlowTab['diagramType']; + updatedAt?: string; + content: PersistedDocumentContent; +} + +export interface PersistedDocument { + id: string; + name: string; + diagramType?: FlowTab['diagramType']; + content?: PersistedDocumentContent; + pages?: PersistedDocumentPage[]; + activePageId?: string; + createdAt: string; + updatedAt: string; + deletedAt: string | null; +} + +export interface PersistedDocumentSession { + id: string; + documentId: string; + camera?: unknown; + viewport?: unknown; + lastOpenedPanel?: string; + lastOpenedAt: string; +} + +export interface WorkspaceMeta { + id: 'workspace'; + activeDocumentId: string | null; + documentOrder: string[]; + lastOpenedAt: string; +} + +export interface LoadedDocument { + document: PersistedDocument | null; + documents: PersistedDocument[]; + workspaceMeta: WorkspaceMeta; +} diff --git a/src/services/storage/storageTelemetry.test.ts b/src/services/storage/storageTelemetry.test.ts index 261565f5..f7bf73da 100644 --- a/src/services/storage/storageTelemetry.test.ts +++ b/src/services/storage/storageTelemetry.test.ts @@ -1,11 +1,21 @@ -import { describe, expect, it, vi } from 'vitest'; +import { afterEach, describe, expect, it, vi } from 'vitest'; +import { captureAnalyticsEvent } from '@/services/analytics/analytics'; import { reportStorageTelemetry, setStorageTelemetryHandler, type StorageTelemetryEvent, } from './storageTelemetry'; +vi.mock('@/services/analytics/analytics', () => ({ + captureAnalyticsEvent: vi.fn(), +})); + describe('storageTelemetry', () => { + afterEach(() => { + setStorageTelemetryHandler(null); + vi.mocked(captureAnalyticsEvent).mockClear(); + }); + it('forwards events to registered handler', () => { const handler = vi.fn(); setStorageTelemetryHandler(handler); @@ -19,7 +29,6 @@ describe('storageTelemetry', () => { reportStorageTelemetry(event); expect(handler).toHaveBeenCalledWith(event); - setStorageTelemetryHandler(null); }); it('never throws when handler throws', () => { @@ -35,6 +44,22 @@ describe('storageTelemetry', () => { message: 'throw test', }); }).not.toThrow(); + }); + + it('forwards warning and error events to analytics capture', () => { setStorageTelemetryHandler(null); + + reportStorageTelemetry({ + area: 'snapshot', + code: 'SNAPSHOT_SAVE_FALLBACK_LOCAL', + severity: 'warning', + message: 'warning test', + }); + + expect(captureAnalyticsEvent).toHaveBeenLastCalledWith('storage_issue_reported', { + area: 'snapshot', + code: 'SNAPSHOT_SAVE_FALLBACK_LOCAL', + severity: 'warning', + }); }); }); diff --git a/src/services/storage/storageTelemetry.ts b/src/services/storage/storageTelemetry.ts index ee5561c4..3f0ea0a4 100644 --- a/src/services/storage/storageTelemetry.ts +++ b/src/services/storage/storageTelemetry.ts @@ -1,3 +1,5 @@ +import { captureAnalyticsEvent } from '@/services/analytics/analytics'; + export type StorageTelemetrySeverity = 'info' | 'warning' | 'error'; export interface StorageTelemetryEvent { @@ -16,10 +18,19 @@ export function setStorageTelemetryHandler(handler: StorageTelemetryHandler | nu } export function reportStorageTelemetry(event: StorageTelemetryEvent): void { - if (!telemetryHandler) return; - try { - telemetryHandler(event); - } catch { - // Telemetry is non-critical and must never break storage behavior. + if (telemetryHandler) { + try { + telemetryHandler(event); + } catch { + // Telemetry is non-critical and must never break storage behavior. + } + } + + if (event.severity !== 'info') { + captureAnalyticsEvent('storage_issue_reported', { + area: event.area, + code: event.code, + severity: event.severity, + }); } } diff --git a/src/store.ts b/src/store.ts index 5cdcb25b..cd618b69 100644 --- a/src/store.ts +++ b/src/store.ts @@ -6,7 +6,9 @@ import { createDesignSystemActions } from './store/actions/createDesignSystemAct import { createHistoryActions } from './store/actions/createHistoryActions'; import { createLayerActions } from './store/actions/createLayerActions'; import { createTabActions } from './store/actions/createTabActions'; +import { createWorkspaceDocumentActions } from './store/actions/createWorkspaceDocumentActions'; import { createViewActions } from './store/actions/createViewActions'; +import { installWorkspaceDocumentSync } from './store/documentStateSync'; import { DEFAULT_AI_SETTINGS, DEFAULT_DESIGN_SYSTEM, @@ -38,6 +40,7 @@ export const useFlowStore = create()( ...createInitialFlowState(), ...createCanvasActions(set, get), ...createHistoryActions(set, get), + ...createWorkspaceDocumentActions(set, get), ...createTabActions(set, get), ...createDesignSystemActions(set), ...createViewActions(set), @@ -53,3 +56,5 @@ export const useFlowStore = create()( } ) ); + +installWorkspaceDocumentSync(useFlowStore); diff --git a/src/store/actions/createTabActions.ts b/src/store/actions/createTabActions.ts index 9442d0c4..88846400 100644 --- a/src/store/actions/createTabActions.ts +++ b/src/store/actions/createTabActions.ts @@ -9,7 +9,7 @@ type GetFlowState = () => FlowState; export function createTabActions(set: SetFlowState, get: GetFlowState): Pick< FlowState, - 'setActiveTabId' | 'setTabs' | 'addTab' | 'duplicateActiveTab' | 'duplicateTab' | 'closeTab' | 'updateTab' | 'copySelectedToTab' | 'moveSelectedToTab' + 'setActiveTabId' | 'setTabs' | 'addTab' | 'duplicateActiveTab' | 'duplicateTab' | 'deleteTab' | 'closeTab' | 'updateTab' | 'copySelectedToTab' | 'moveSelectedToTab' > { function nowIso(): string { return new Date().toISOString(); @@ -44,6 +44,19 @@ export function createTabActions(set: SetFlowState, get: GetFlowState): Pick< }; } + function createEmptyTab(name = 'New Flow'): FlowTab { + return { + id: createId('tab'), + name, + diagramType: DEFAULT_DIAGRAM_TYPE, + updatedAt: nowIso(), + nodes: [], + edges: [], + playback: undefined, + history: { past: [], future: [] }, + }; + } + return { setActiveTabId: (id) => { const { tabs, nodes, edges } = get(); @@ -76,17 +89,8 @@ export function createTabActions(set: SetFlowState, get: GetFlowState): Pick< tab.id === activeTabId ? { ...tab, nodes: get().nodes, edges: get().edges } : tab ); - const newTabId = createId('tab'); - const newTab: FlowTab = { - id: newTabId, - name: 'New Flow', - diagramType: DEFAULT_DIAGRAM_TYPE, - updatedAt: nowIso(), - nodes: [], - edges: [], - playback: undefined, - history: { past: [], future: [] }, - }; + const newTab = createEmptyTab(); + const newTabId = newTab.id; set({ tabs: [...updatedTabs, newTab], @@ -144,9 +148,56 @@ export function createTabActions(set: SetFlowState, get: GetFlowState): Pick< return newTabId; }, + deleteTab: (id) => { + const { tabs, activeTabId } = get(); + const nextTabs = tabs.filter((tab) => tab.id !== id); + + if (nextTabs.length === tabs.length) { + return; + } + + if (nextTabs.length === 0) { + const fallbackTab = createEmptyTab('Page 1'); + set({ + tabs: [fallbackTab], + activeTabId: fallbackTab.id, + nodes: fallbackTab.nodes, + edges: fallbackTab.edges, + }); + return; + } + + if (id !== activeTabId) { + set({ tabs: nextTabs }); + return; + } + + const deletedIndex = tabs.findIndex((tab) => tab.id === id); + const nextActiveTab = nextTabs[deletedIndex] ?? nextTabs[deletedIndex - 1] ?? nextTabs[0]; + if (!nextActiveTab) { + return; + } + + set({ + tabs: nextTabs, + activeTabId: nextActiveTab.id, + nodes: nextActiveTab.nodes, + edges: nextActiveTab.edges, + }); + }, + closeTab: (id) => { const { tabs, activeTabId } = get(); - if (tabs.length === 1) return; + if (tabs.length === 1) { + const fallbackTab = createEmptyTab(); + set({ + tabs: [fallbackTab], + activeTabId: fallbackTab.id, + nodes: fallbackTab.nodes, + edges: fallbackTab.edges, + }); + return; + } let newActiveTabId = activeTabId; diff --git a/src/store/actions/createWorkspaceDocumentActions.ts b/src/store/actions/createWorkspaceDocumentActions.ts new file mode 100644 index 00000000..6fa67b71 --- /dev/null +++ b/src/store/actions/createWorkspaceDocumentActions.ts @@ -0,0 +1,238 @@ +import type { FlowTab } from '@/lib/types'; +import { createId } from '@/lib/id'; +import { DEFAULT_DIAGRAM_TYPE } from '@/services/diagramDocument'; +import type { FlowDocument } from '@/services/storage/flowDocumentModel'; +import type { FlowState } from '../types'; + +type SetFlowState = (partial: Partial | ((state: FlowState) => Partial)) => void; +type GetFlowState = () => FlowState; + +function nowIso(): string { + return new Date().toISOString(); +} + +function createEmptyPage(documentId: string, pageName = 'Page 1'): FlowTab { + return { + id: `${documentId}:page:${createId('page')}`, + name: pageName, + diagramType: DEFAULT_DIAGRAM_TYPE, + updatedAt: nowIso(), + nodes: [], + edges: [], + playback: undefined, + history: { past: [], future: [] }, + }; +} + +function createEmptyDocument(name = 'Untitled Flow'): FlowDocument { + const documentId = createId('doc'); + const primaryPage = createEmptyPage(documentId); + return { + id: documentId, + name, + createdAt: nowIso(), + updatedAt: nowIso(), + activePageId: primaryPage.id, + pages: [primaryPage], + }; +} + +function toFlowTabPages(document: FlowDocument): FlowTab[] { + return document.pages.map((page) => ({ + id: page.id, + name: page.name, + diagramType: page.diagramType, + updatedAt: page.updatedAt, + nodes: page.nodes, + edges: page.edges, + playback: page.playback, + history: page.history, + })); +} + +export function createWorkspaceDocumentActions(set: SetFlowState, get: GetFlowState): Pick< + FlowState, + 'setDocuments' | 'setActiveDocumentId' | 'createDocument' | 'renameDocument' | 'duplicateDocument' | 'deleteDocumentRecord' +> { + return { + setDocuments: (documents) => set({ documents }), + setActiveDocumentId: (id) => { + const { documents } = get(); + const document = documents.find((entry) => entry.id === id); + if (!document) { + return; + } + + const pages = toFlowTabPages(document); + const activePage = pages.find((page) => page.id === document.activePageId) ?? pages[0]; + if (!activePage) { + return; + } + + set({ + activeDocumentId: document.id, + tabs: pages, + activeTabId: activePage.id, + nodes: activePage.nodes, + edges: activePage.edges, + }); + }, + createDocument: () => { + const document = createEmptyDocument(); + const pages = toFlowTabPages(document); + const activePage = pages[0]; + + set((state) => ({ + documents: [...state.documents, document], + activeDocumentId: document.id, + tabs: pages, + activeTabId: activePage.id, + nodes: activePage.nodes, + edges: activePage.edges, + })); + + return document.id; + }, + renameDocument: (id, nextName) => { + const trimmedName = nextName.trim(); + if (!trimmedName) { + return; + } + + set((state) => { + const target = state.documents.find((document) => document.id === id); + if (!target || target.name === trimmedName) { + return {}; + } + + const shouldMirrorToSinglePage = target.pages.length === 1 && target.pages[0]?.name === target.name; + const documents = state.documents.map((document) => + document.id === id + ? { + ...document, + name: trimmedName, + updatedAt: nowIso(), + pages: shouldMirrorToSinglePage + ? document.pages.map((page) => ({ ...page, name: trimmedName })) + : document.pages, + } + : document, + ); + + if (state.activeDocumentId !== id || !shouldMirrorToSinglePage) { + return { documents }; + } + + const tabs = state.tabs.map((page) => ({ ...page, name: trimmedName })); + const activePage = tabs.find((page) => page.id === state.activeTabId) ?? tabs[0]; + + return { + documents, + tabs, + activeTabId: activePage?.id ?? state.activeTabId, + nodes: activePage?.nodes ?? state.nodes, + edges: activePage?.edges ?? state.edges, + }; + }); + }, + duplicateDocument: (id) => { + const { documents } = get(); + const source = documents.find((document) => document.id === id); + if (!source) { + return null; + } + + const documentId = createId('doc'); + let activePageId = ''; + const duplicated: FlowDocument = { + ...source, + id: documentId, + name: `${source.name} Copy`, + createdAt: nowIso(), + updatedAt: nowIso(), + activePageId, + pages: source.pages.map((page, index) => { + const nextPageId = `${documentId}:page:${createId('page')}`; + if (index === 0) { + activePageId = nextPageId; + } + return { + ...page, + id: nextPageId, + updatedAt: nowIso(), + nodes: page.nodes.map((node) => ({ + ...node, + selected: false, + data: { ...node.data }, + position: { ...node.position }, + style: node.style ? { ...node.style } : node.style, + })), + edges: page.edges.map((edge) => ({ + ...edge, + selected: false, + data: edge.data ? { ...edge.data } : edge.data, + style: edge.style ? { ...edge.style } : edge.style, + })), + history: { past: [], future: [] }, + }; + }), + }; + duplicated.activePageId = activePageId || duplicated.pages[0]?.id || ''; + + const pages = toFlowTabPages(duplicated); + const activePage = pages[0]; + + set((state) => ({ + documents: [...state.documents, duplicated], + activeDocumentId: duplicated.id, + tabs: pages, + activeTabId: activePage.id, + nodes: activePage.nodes, + edges: activePage.edges, + })); + + return duplicated.id; + }, + deleteDocumentRecord: (id) => { + const { documents, activeDocumentId } = get(); + const remainingDocuments = documents.filter((document) => document.id !== id); + + if (remainingDocuments.length === documents.length) { + return; + } + + if (remainingDocuments.length === 0) { + set({ + documents: [], + activeDocumentId: '', + tabs: [], + activeTabId: '', + nodes: [], + edges: [], + }); + return; + } + + if (id !== activeDocumentId) { + set({ documents: remainingDocuments }); + return; + } + + const nextDocument = remainingDocuments[0]; + const pages = toFlowTabPages(nextDocument); + const activePage = pages.find((page) => page.id === nextDocument.activePageId) ?? pages[0]; + if (!activePage) { + return; + } + + set({ + documents: remainingDocuments, + activeDocumentId: nextDocument.id, + tabs: pages, + activeTabId: activePage.id, + nodes: activePage.nodes, + edges: activePage.edges, + }); + }, + }; +} diff --git a/src/store/documentHooks.ts b/src/store/documentHooks.ts new file mode 100644 index 00000000..1c9d27c0 --- /dev/null +++ b/src/store/documentHooks.ts @@ -0,0 +1,84 @@ +import { useMemo } from 'react'; +import { useShallow } from 'zustand/react/shallow'; +import { useFlowStore } from '../store'; +import type { FlowStoreState } from '../store'; +import type { FlowDocument } from '@/services/storage/flowDocumentModel'; +import { + createWorkspaceDocumentsFromTabs, + findDocumentRouteTarget, + type WorkspaceDocumentSummary, +} from './workspaceDocumentModel'; + +export function useWorkspaceDocumentsState(): { + documents: WorkspaceDocumentSummary[]; + activeDocumentId: string; +} { + const { documents, activeDocumentId, tabs, activeTabId, nodes, edges } = useFlowStore( + useShallow((state) => ({ + documents: state.documents, + activeDocumentId: state.activeDocumentId, + tabs: state.tabs, + activeTabId: state.activeTabId, + nodes: state.nodes, + edges: state.edges, + })), + ); + + const summaries = useMemo( + () => createWorkspaceDocumentsFromTabs({ + documents, + activeDocumentId, + activeNodes: nodes, + activeEdges: edges, + activePages: tabs, + activePageId: activeTabId, + }), + [documents, activeDocumentId, tabs, activeTabId, nodes, edges], + ); + + return { + documents: summaries, + activeDocumentId, + }; +} + +export function useWorkspaceDocumentActions(): { + setActiveDocumentId: FlowStoreState['setActiveDocumentId']; + setDocuments: FlowStoreState['setDocuments']; + createDocument: FlowStoreState['createDocument']; + renameDocument: FlowStoreState['renameDocument']; + duplicateDocument: FlowStoreState['duplicateDocument']; + deleteDocument: FlowStoreState['deleteDocumentRecord']; +} { + const actions = useFlowStore( + useShallow((state) => ({ + setActiveDocumentId: state.setActiveDocumentId, + setDocuments: state.setDocuments, + createDocument: state.createDocument, + renameDocument: state.renameDocument, + duplicateDocument: state.duplicateDocument, + deleteDocument: state.deleteDocumentRecord, + })), + ); + + return { + setActiveDocumentId: actions.setActiveDocumentId, + setDocuments: actions.setDocuments, + createDocument: actions.createDocument, + renameDocument: actions.renameDocument, + duplicateDocument: actions.duplicateDocument, + deleteDocument: actions.deleteDocument, + }; +} + +export function useWorkspaceRouteResolver(): { + documents: FlowDocument[]; + resolveTarget: (targetId: string) => { documentId: string; pageId: string } | null; +} { + const documents = useFlowStore((state) => state.documents); + + return { + documents, + resolveTarget: (targetId: string) => findDocumentRouteTarget(documents, targetId), + }; +} diff --git a/src/store/documentStateSync.test.ts b/src/store/documentStateSync.test.ts new file mode 100644 index 00000000..5a542a4f --- /dev/null +++ b/src/store/documentStateSync.test.ts @@ -0,0 +1,66 @@ +import { describe, expect, it } from 'vitest'; +import type { FlowTab } from '@/lib/types'; +import type { FlowDocument } from '@/services/storage/flowDocumentModel'; +import { syncWorkspaceDocuments } from './documentStateSync'; + +function createPage(overrides: Partial = {}): FlowTab { + return { + id: 'page-1', + name: 'Overview', + diagramType: 'flowchart', + updatedAt: '2026-03-27T00:00:00.000Z', + nodes: [], + edges: [], + history: { past: [], future: [] }, + playback: undefined, + ...overrides, + }; +} + +function createDocument(pages: FlowTab[]): FlowDocument { + return { + id: 'doc-1', + name: 'System Design', + createdAt: '2026-03-27T00:00:00.000Z', + updatedAt: '2026-03-27T00:00:00.000Z', + activePageId: pages[0]?.id ?? '', + pages, + }; +} + +describe('documentStateSync', () => { + it('keeps the active document pages aligned with live editor state', () => { + const storedPage = createPage({ + nodes: [{ id: 'node-stored' } as never], + }); + const livePage = createPage({ + nodes: [{ id: 'node-live' } as never], + edges: [{ id: 'edge-live' } as never], + }); + + const documents = syncWorkspaceDocuments({ + documents: [createDocument([storedPage])], + activeDocumentId: 'doc-1', + tabs: [livePage], + activeTabId: 'page-1', + nodes: livePage.nodes, + edges: livePage.edges, + }); + + expect(documents[0]?.pages[0]?.nodes).toEqual(livePage.nodes); + expect(documents[0]?.pages[0]?.edges).toEqual(livePage.edges); + }); + + it('leaves documents unchanged when there is no active document', () => { + const documents = [createDocument([createPage()])]; + + expect(syncWorkspaceDocuments({ + documents, + activeDocumentId: '', + tabs: [createPage()], + activeTabId: 'page-1', + nodes: [], + edges: [], + })).toBe(documents); + }); +}); diff --git a/src/store/documentStateSync.ts b/src/store/documentStateSync.ts new file mode 100644 index 00000000..72d173a4 --- /dev/null +++ b/src/store/documentStateSync.ts @@ -0,0 +1,48 @@ +import type { FlowState } from './types'; +import { mergeActivePagesIntoDocuments } from './workspaceDocumentModel'; + +type DocumentSyncState = Pick< + FlowState, + 'documents' | 'activeDocumentId' | 'tabs' | 'activeTabId' | 'nodes' | 'edges' +>; + +export function syncWorkspaceDocuments(state: DocumentSyncState): FlowState['documents'] { + if (!state.activeDocumentId || state.documents.length === 0) { + return state.documents; + } + + return mergeActivePagesIntoDocuments({ + documents: state.documents, + activeDocumentId: state.activeDocumentId, + activePages: state.tabs, + activePageId: state.activeTabId, + activeNodes: state.nodes, + activeEdges: state.edges, + }); +} + +export function installWorkspaceDocumentSync(store: { + subscribe: (listener: (state: FlowState, previousState: FlowState) => void) => () => void; + getState: () => FlowState; + setState: (partial: Partial) => void; +}): () => void { + return store.subscribe((state, previousState) => { + const activeEditorChanged = + state.activeDocumentId !== previousState.activeDocumentId || + state.tabs !== previousState.tabs || + state.activeTabId !== previousState.activeTabId || + state.nodes !== previousState.nodes || + state.edges !== previousState.edges; + + if (!activeEditorChanged) { + return; + } + + const documents = syncWorkspaceDocuments(state); + if (documents === state.documents) { + return; + } + + store.setState({ documents }); + }); +} diff --git a/src/store/editorPageHooks.ts b/src/store/editorPageHooks.ts new file mode 100644 index 00000000..8d62483a --- /dev/null +++ b/src/store/editorPageHooks.ts @@ -0,0 +1,54 @@ +import { useShallow } from 'zustand/react/shallow'; +import { useFlowStore } from '../store'; +import type { FlowStoreState } from '../store'; +import type { FlowTab } from '@/lib/types'; + +export type EditorPage = FlowTab; + +export function useEditorPagesState(): { + pages: EditorPage[]; + activePageId: string; +} { + return useFlowStore( + useShallow((state) => ({ + pages: state.tabs, + activePageId: state.activeTabId, + })), + ); +} + +export function useActiveEditorPageId(): string { + return useFlowStore((state) => state.activeTabId); +} + +export function useEditorPageActions(): { + setActivePageId: FlowStoreState['setActiveTabId']; + setPages: FlowStoreState['setTabs']; + addPage: FlowStoreState['addTab']; + duplicateActivePage: FlowStoreState['duplicateActiveTab']; + duplicatePage: FlowStoreState['duplicateTab']; + deletePage: FlowStoreState['deleteTab']; + closePage: FlowStoreState['closeTab']; + updatePage: FlowStoreState['updateTab']; + copySelectedToPage: FlowStoreState['copySelectedToTab']; + moveSelectedToPage: FlowStoreState['moveSelectedToTab']; +} { + return useFlowStore( + useShallow((state) => ({ + setActivePageId: state.setActiveTabId, + setPages: state.setTabs, + addPage: state.addTab, + duplicateActivePage: state.duplicateActiveTab, + duplicatePage: state.duplicateTab, + deletePage: state.deleteTab, + closePage: state.closeTab, + updatePage: state.updateTab, + copySelectedToPage: state.copySelectedToTab, + moveSelectedToPage: state.moveSelectedToTab, + })), + ); +} + +export function useEditorPageById(pageId: string): EditorPage | undefined { + return useFlowStore((state) => state.tabs.find((tab) => tab.id === pageId)); +} diff --git a/src/store/persistence.ts b/src/store/persistence.ts index 1818b99b..e143c5b9 100644 --- a/src/store/persistence.ts +++ b/src/store/persistence.ts @@ -1,5 +1,6 @@ import { INITIAL_EDGES, INITIAL_NODES } from '@/constants'; import { DEFAULT_DIAGRAM_TYPE } from '@/services/diagramDocument'; +import type { FlowDocument } from '@/services/storage/flowDocumentModel'; import { clonePlaybackState, sanitizePlaybackState } from '@/services/playback/model'; import type { FlowTab } from '@/lib/types'; import { isDiagramType } from '@/lib/types'; @@ -36,6 +37,18 @@ function createFallbackTab(): FlowTab { }; } +function createFallbackDocument(): FlowDocument { + const fallbackTab = createFallbackTab(); + return { + id: 'doc-1', + name: fallbackTab.name, + createdAt: fallbackTab.updatedAt ?? new Date().toISOString(), + updatedAt: fallbackTab.updatedAt ?? new Date().toISOString(), + activePageId: fallbackTab.id, + pages: [fallbackTab], + }; +} + export function sanitizePersistedNode(node: FlowTab['nodes'][number]): FlowTab['nodes'][number] { const { selected: _selected, @@ -156,6 +169,11 @@ export function migratePersistedFlowState(persistedState: unknown): unknown { return { ...state, + documents: Array.isArray(state.documents) ? state.documents : [createFallbackDocument()], + activeDocumentId: + typeof state.activeDocumentId === 'string' + ? state.activeDocumentId + : 'doc-1', tabs, activeTabId: typeof state.activeTabId === 'string' && tabs.some((tab) => tab.id === state.activeTabId) @@ -189,6 +207,8 @@ export function createInitialFlowState(): Pick< FlowState, | 'nodes' | 'edges' + | 'documents' + | 'activeDocumentId' | 'tabs' | 'activeTabId' | 'designSystems' @@ -206,6 +226,8 @@ export function createInitialFlowState(): Pick< return { nodes: INITIAL_NODES, edges: INITIAL_EDGES, + documents: [createFallbackDocument()], + activeDocumentId: 'doc-1', tabs: [createFallbackTab()], activeTabId: 'tab-1', designSystems: [DEFAULT_DESIGN_SYSTEM], diff --git a/src/store/tabHooks.ts b/src/store/tabHooks.ts index 65e11a32..2d0c0b40 100644 --- a/src/store/tabHooks.ts +++ b/src/store/tabHooks.ts @@ -23,6 +23,7 @@ export function useTabActions(): Pick< | 'addTab' | 'duplicateActiveTab' | 'duplicateTab' + | 'deleteTab' | 'closeTab' | 'updateTab' | 'copySelectedToTab' @@ -35,6 +36,7 @@ export function useTabActions(): Pick< addTab: state.addTab, duplicateActiveTab: state.duplicateActiveTab, duplicateTab: state.duplicateTab, + deleteTab: state.deleteTab, closeTab: state.closeTab, updateTab: state.updateTab, copySelectedToTab: state.copySelectedToTab, diff --git a/src/store/types.ts b/src/store/types.ts index b92c45b1..877540c9 100644 --- a/src/store/types.ts +++ b/src/store/types.ts @@ -8,6 +8,7 @@ import type { import type { ParseDiagnostic } from '@/lib/openFlowDSLParser'; import type { DesignSystem, DiagramType, FlowEdge, FlowNode, FlowTab, GlobalEdgeOptions } from '@/lib/types'; import type { ExportSerializationMode } from '@/services/canonicalSerialization'; +import type { FlowDocument } from '@/services/storage/flowDocumentModel'; export interface ViewSettings { showGrid: boolean; @@ -90,6 +91,14 @@ export interface FlowState { // ------------------------------------------------------------------------- // SLICE: Tabs — multi-diagram workspace // ------------------------------------------------------------------------- + documents: FlowDocument[]; + activeDocumentId: string; + setDocuments: (documents: FlowDocument[]) => void; + setActiveDocumentId: (id: string) => void; + createDocument: () => string; + renameDocument: (id: string, nextName: string) => void; + duplicateDocument: (id: string) => string | null; + deleteDocumentRecord: (id: string) => void; tabs: FlowTab[]; activeTabId: string; setActiveTabId: (id: string) => void; @@ -97,6 +106,7 @@ export interface FlowState { addTab: () => string; duplicateActiveTab: () => string | null; duplicateTab: (id: string) => string | null; + deleteTab: (id: string) => void; closeTab: (id: string) => void; updateTab: (id: string, updates: Partial) => void; copySelectedToTab: (targetTabId: string) => number; diff --git a/src/store/workspaceDocumentModel.test.ts b/src/store/workspaceDocumentModel.test.ts new file mode 100644 index 00000000..f421099d --- /dev/null +++ b/src/store/workspaceDocumentModel.test.ts @@ -0,0 +1,84 @@ +import { describe, expect, it } from 'vitest'; +import type { FlowTab } from '@/lib/types'; +import { createWorkspaceDocumentsFromTabs } from './workspaceDocumentModel'; +import type { FlowDocument } from '@/services/storage/flowDocumentModel'; + +function createTab(overrides: Partial = {}): FlowTab { + return { + id: 'tab-1', + name: 'Document One', + diagramType: 'flowchart', + updatedAt: '2026-03-27T00:00:00.000Z', + nodes: [], + edges: [], + history: { past: [], future: [] }, + playback: undefined, + ...overrides, + }; +} + +function createDocumentFromTab(tab: FlowTab): FlowDocument { + return { + id: tab.id, + name: tab.name, + createdAt: tab.updatedAt ?? '2026-03-27T00:00:00.000Z', + updatedAt: tab.updatedAt ?? '2026-03-27T00:00:00.000Z', + activePageId: tab.id, + pages: [tab], + }; +} + +describe('workspaceDocumentModel', () => { + it('builds document summaries from tabs', () => { + const documents = createWorkspaceDocumentsFromTabs({ + documents: [createDocumentFromTab(createTab())], + activeDocumentId: 'tab-1', + activeNodes: [{ id: 'n1' } as never], + activeEdges: [], + activePages: [createTab()], + activePageId: 'tab-1', + }); + + expect(documents).toHaveLength(1); + expect(documents[0]).toMatchObject({ + id: 'tab-1', + name: 'Document One', + nodeCount: 1, + edgeCount: 0, + isActive: true, + }); + }); + + it('sorts the active document first, then by updated time', () => { + const documents = createWorkspaceDocumentsFromTabs({ + documents: [ + createDocumentFromTab(createTab({ + id: 'tab-older', + name: 'Older', + updatedAt: '2026-03-26T00:00:00.000Z', + })), + createDocumentFromTab(createTab({ + id: 'tab-active', + name: 'Active', + updatedAt: '2026-03-25T00:00:00.000Z', + })), + createDocumentFromTab(createTab({ + id: 'tab-newer', + name: 'Newer', + updatedAt: '2026-03-27T00:00:00.000Z', + })), + ], + activeDocumentId: 'tab-active', + activeNodes: [], + activeEdges: [], + activePages: [createTab({ id: 'tab-active', name: 'Active', updatedAt: '2026-03-25T00:00:00.000Z' })], + activePageId: 'tab-active', + }); + + expect(documents.map((document) => document.id)).toEqual([ + 'tab-active', + 'tab-newer', + 'tab-older', + ]); + }); +}); diff --git a/src/store/workspaceDocumentModel.ts b/src/store/workspaceDocumentModel.ts new file mode 100644 index 00000000..e7630b0b --- /dev/null +++ b/src/store/workspaceDocumentModel.ts @@ -0,0 +1,186 @@ +import type { FlowEdge, FlowNode, FlowTab } from '@/lib/types'; +import type { FlowDocument } from '@/services/storage/flowDocumentModel'; + +export interface WorkspaceDocumentSummary { + id: string; + name: string; + updatedAt?: string; + nodeCount: number; + edgeCount: number; + isActive: boolean; +} + +export interface CreateWorkspaceDocumentsParams { + documents: FlowDocument[]; + activeDocumentId: string; + activeNodes: FlowNode[]; + activeEdges: FlowEdge[]; + activePages: FlowTab[]; + activePageId: string; +} + +export function syncActivePageTabs( + pages: FlowTab[], + activePageId: string, + activeNodes: FlowNode[], + activeEdges: FlowEdge[], +): FlowTab[] { + return pages.map((page) => + page.id === activePageId + ? { + ...page, + nodes: activeNodes, + edges: activeEdges, + } + : page, + ); +} + +export function mergeActivePagesIntoDocuments(params: { + documents: FlowDocument[]; + activeDocumentId: string; + activePages: FlowTab[]; + activePageId: string; + activeNodes: FlowNode[]; + activeEdges: FlowEdge[]; +}): FlowDocument[] { + const { documents, activeDocumentId, activePages, activePageId, activeNodes, activeEdges } = params; + const syncedPages = syncActivePageTabs(activePages, activePageId, activeNodes, activeEdges); + + return documents.map((document) => { + if (document.id !== activeDocumentId) { + return document; + } + + return { + ...document, + activePageId, + pages: syncedPages.map((page) => ({ + id: page.id, + name: page.name, + diagramType: page.diagramType, + updatedAt: page.updatedAt, + nodes: page.nodes, + edges: page.edges, + playback: page.playback, + history: page.history, + })), + }; + }); +} + +export function createWorkspaceDocumentSummary( + document: FlowDocument, + activeDocumentId: string, + activeNodes: FlowNode[], + activeEdges: FlowEdge[], + activePages: FlowTab[], + activePageId: string, +): WorkspaceDocumentSummary { + const isActive = document.id === activeDocumentId; + const resolvedDocument = isActive + ? mergeActivePagesIntoDocuments({ + documents: [document], + activeDocumentId: document.id, + activePages, + activePageId, + activeNodes, + activeEdges, + })[0] + : document; + const nodeCount = resolvedDocument.pages.reduce((sum, page) => sum + page.nodes.length, 0); + const edgeCount = resolvedDocument.pages.reduce((sum, page) => sum + page.edges.length, 0); + + return { + id: resolvedDocument.id, + name: resolvedDocument.name, + updatedAt: resolvedDocument.updatedAt, + nodeCount, + edgeCount, + isActive, + }; +} + +export function sortWorkspaceDocuments(documents: WorkspaceDocumentSummary[]): WorkspaceDocumentSummary[] { + return [...documents].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); + }); +} + +export function createWorkspaceDocumentsFromTabs({ + documents, + activeDocumentId, + activeNodes, + activeEdges, + activePages, + activePageId, +}: CreateWorkspaceDocumentsParams): WorkspaceDocumentSummary[] { + return sortWorkspaceDocuments( + documents.map((document) => createWorkspaceDocumentSummary( + document, + activeDocumentId, + activeNodes, + activeEdges, + activePages, + activePageId, + )), + ); +} + +export function findDocumentRouteTarget(documents: FlowDocument[], targetId: string): { + documentId: string; + pageId: string; +} | null { + for (const document of documents) { + if (document.id === targetId) { + return { + documentId: document.id, + pageId: document.activePageId, + }; + } + + const matchingPage = document.pages.find((page) => page.id === targetId); + if (matchingPage) { + return { + documentId: document.id, + pageId: matchingPage.id, + }; + } + } + + return null; +} + +export function getEditorPagesForDocument(documents: FlowDocument[], documentId: string | null): { + activeDocumentId: string; + activePageId: string; + pages: FlowTab[]; +} | null { + if (!documentId) { + return null; + } + + const document = documents.find((entry) => entry.id === documentId); + if (!document || document.pages.length === 0) { + return null; + } + + return { + activeDocumentId: document.id, + activePageId: document.activePageId, + pages: document.pages.map((page) => ({ + id: page.id, + name: page.name, + diagramType: page.diagramType, + updatedAt: page.updatedAt, + nodes: page.nodes, + edges: page.edges, + playback: page.playback, + history: page.history, + })), + }; +} diff --git a/tsconfig.tsbuildinfo b/tsconfig.tsbuildinfo index 4e84e22b..186eff7f 100644 --- a/tsconfig.tsbuildinfo +++ b/tsconfig.tsbuildinfo @@ -1 +1 @@ -{"root":["./src/app.tsx","./src/constants.test.ts","./src/constants.ts","./src/index.tsx","./src/store.test.ts","./src/store.ts","./src/theme.ts","./src/app/routestate.test.ts","./src/app/routestate.ts","./src/components/annotationnode.tsx","./src/components/commandbar.test.tsx","./src/components/commandbar.tsx","./src/components/connectmenu.test.tsx","./src/components/connectmenu.tsx","./src/components/contextmenu.tsx","./src/components/customconnectionline.tsx","./src/components/customedge.tsx","./src/components/customnode.handleinteraction.test.tsx","./src/components/customnode.tsx","./src/components/designsystem.integration.test.tsx","./src/components/diagramviewer.tsx","./src/components/errorboundary.tsx","./src/components/exportmenu.tsx","./src/components/exportmenupanel.test.tsx","./src/components/exportmenupanel.tsx","./src/components/flowcanvas.tsx","./src/components/floweditor.tsx","./src/components/floweditoremptystate.tsx","./src/components/floweditorlayoutoverlay.tsx","./src/components/floweditorpanels.test.tsx","./src/components/floweditorpanels.tsx","./src/components/flowtabs.tsx","./src/components/groupnode.tsx","./src/components/homepage.integration.test.tsx","./src/components/homepage.tsx","./src/components/iconmap.test.tsx","./src/components/iconmap.ts","./src/components/imagenode.tsx","./src/components/inlinetexteditsurface.test.tsx","./src/components/inlinetexteditsurface.tsx","./src/components/keyboardshortcutsmodal.tsx","./src/components/languageselector.tsx","./src/components/markdownrenderer.tsx","./src/components/memoizedmarkdown.tsx","./src/components/navigationcontrols.tsx","./src/components/nodechrome.tsx","./src/components/nodequickcreatebuttons.tsx","./src/components/nodetransformcontrols.tsx","./src/components/playbackcontrols.tsx","./src/components/propertiespanel.tsx","./src/components/rightrail.tsx","./src/components/sectionnode.tsx","./src/components/shareembedmodal.tsx","./src/components/sharemodal.test.tsx","./src/components/sharemodal.tsx","./src/components/sidebarshell.tsx","./src/components/snapshotspanel.tsx","./src/components/studioaipanel.test.tsx","./src/components/studioaipanel.tsx","./src/components/studiocodepanel.test.tsx","./src/components/studiocodepanel.tsx","./src/components/studiopanel.test.tsx","./src/components/studiopanel.tsx","./src/components/studioplaybackpanel.test.tsx","./src/components/studioplaybackpanel.tsx","./src/components/swimlanenode.tsx","./src/components/textnode.tsx","./src/components/toolbar.tsx","./src/components/tooltip.tsx","./src/components/topnav.tsx","./src/components/welcomemodal.tsx","./src/components/annotationtheme.ts","./src/components/container-nodes.handleinteraction.test.tsx","./src/components/editorsurfacetiers.ts","./src/components/handleinteraction.test.ts","./src/components/handleinteraction.ts","./src/components/handleinteractionusage.test.ts","./src/components/lightweight-nodes.handleinteraction.test.tsx","./src/components/markdownsyntax.ts","./src/components/sharemodalcontent.ts","./src/components/studioaicopy.ts","./src/components/transformdiagnostics.test.ts","./src/components/transformdiagnostics.ts","./src/components/useactivenodeselection.ts","./src/components/useexportmenu.ts","./src/components/settingsmodal/aisettings.tsx","./src/components/settingsmodal/generalsettings.tsx","./src/components/settingsmodal/privacysettings.tsx","./src/components/settingsmodal/settingsmodal.test.tsx","./src/components/settingsmodal/settingsmodal.tsx","./src/components/settingsmodal/shortcutssettings.tsx","./src/components/settingsmodal/ai/advancedendpointsection.tsx","./src/components/settingsmodal/ai/customheaderseditor.tsx","./src/components/settingsmodal/ai/privacysection.tsx","./src/components/settingsmodal/ai/providericon.tsx","./src/components/settingsmodal/ai/providersection.tsx","./src/components/settingsmodal/ai/step.tsx","./src/components/app/docssiteredirect.test.tsx","./src/components/app/docssiteredirect.tsx","./src/components/app/mobileworkspacegate.test.tsx","./src/components/app/mobileworkspacegate.tsx","./src/components/app/routeloadingfallback.test.tsx","./src/components/app/routeloadingfallback.tsx","./src/components/app/mobileworkspacegatecopy.ts","./src/components/app/routeloadingcopy.ts","./src/components/architecture-lint/lintrulespanel.tsx","./src/components/command-bar/assetsview.test.tsx","./src/components/command-bar/assetsview.tsx","./src/components/command-bar/designsystemeditor.tsx","./src/components/command-bar/designsystemview.tsx","./src/components/command-bar/figmaimportpanel.tsx","./src/components/command-bar/importview.tsx","./src/components/command-bar/layersview.tsx","./src/components/command-bar/layoutview.tsx","./src/components/command-bar/pagesview.tsx","./src/components/command-bar/rootview.test.tsx","./src/components/command-bar/rootview.tsx","./src/components/command-bar/searchview.tsx","./src/components/command-bar/templatesview.tsx","./src/components/command-bar/viewheader.tsx","./src/components/command-bar/visualsview.tsx","./src/components/command-bar/applycodechanges.ts","./src/components/command-bar/assetsviewconstants.ts","./src/components/command-bar/searchquery.test.ts","./src/components/command-bar/searchquery.ts","./src/components/command-bar/types.ts","./src/components/command-bar/useaiviewstate.test.tsx","./src/components/command-bar/useaiviewstate.ts","./src/components/command-bar/usecloudassetcatalog.ts","./src/components/command-bar/usecommandbarcommands.test.tsx","./src/components/command-bar/usecommandbarcommands.tsx","./src/components/custom-edge/customedgewrapper.tsx","./src/components/custom-edge/sequencemessageedge.test.tsx","./src/components/custom-edge/sequencemessageedge.tsx","./src/components/custom-edge/animatededgepresentation.test.ts","./src/components/custom-edge/animatededgepresentation.ts","./src/components/custom-edge/classrelationsemantics.test.ts","./src/components/custom-edge/classrelationsemantics.ts","./src/components/custom-edge/edgerendermode.ts","./src/components/custom-edge/pathutils.test.ts","./src/components/custom-edge/pathutils.ts","./src/components/custom-edge/pathutilsgeometry.ts","./src/components/custom-edge/pathutilssiblingrouting.ts","./src/components/custom-edge/pathutilstypes.ts","./src/components/custom-edge/relationroutingsemantics.test.ts","./src/components/custom-edge/relationroutingsemantics.ts","./src/components/custom-edge/standardedgemarkers.test.ts","./src/components/custom-edge/standardedgemarkers.ts","./src/components/custom-nodes/architecturenode.handleinteraction.test.tsx","./src/components/custom-nodes/architecturenode.tsx","./src/components/custom-nodes/browsernode.tsx","./src/components/custom-nodes/classentitynode.handleinteraction.test.tsx","./src/components/custom-nodes/classnode.tsx","./src/components/custom-nodes/entitynode.tsx","./src/components/custom-nodes/journeynode.tsx","./src/components/custom-nodes/mindmapnode.tsx","./src/components/custom-nodes/mobilenode.tsx","./src/components/custom-nodes/sequenceparticipantnode.tsx","./src/components/custom-nodes/structurednodehandles.tsx","./src/components/custom-nodes/visualnodes.handleinteraction.test.tsx","./src/components/custom-nodes/browservariantrenderer.tsx","./src/components/custom-nodes/mobilevariantrenderer.tsx","./src/components/custom-nodes/structuredlistnavigation.test.ts","./src/components/custom-nodes/structuredlistnavigation.ts","./src/components/diagram-diff/diffmodebanner.tsx","./src/components/flow-canvas/flowcanvasalignmentguidesoverlay.tsx","./src/components/flow-canvas/flowcanvasoverlays.tsx","./src/components/flow-canvas/alignmentguides.test.ts","./src/components/flow-canvas/alignmentguides.ts","./src/components/flow-canvas/flowcanvasreactflowcontracts.ts","./src/components/flow-canvas/flowcanvastypes.test.ts","./src/components/flow-canvas/flowcanvastypes.tsx","./src/components/flow-canvas/largegraphsafetymode.test.ts","./src/components/flow-canvas/largegraphsafetymode.ts","./src/components/flow-canvas/nodechromecoverage.test.ts","./src/components/flow-canvas/pastehelpers.test.ts","./src/components/flow-canvas/pastehelpers.ts","./src/components/flow-canvas/useflowcanvasalignmentguides.ts","./src/components/flow-canvas/useflowcanvasconnectionstate.ts","./src/components/flow-canvas/useflowcanvascontextactions.ts","./src/components/flow-canvas/useflowcanvasdragdrop.ts","./src/components/flow-canvas/useflowcanvasinteractionlod.ts","./src/components/flow-canvas/useflowcanvasmenus.ts","./src/components/flow-canvas/useflowcanvasmenusandactions.test.tsx","./src/components/flow-canvas/useflowcanvasmenusandactions.ts","./src/components/flow-canvas/useflowcanvasnodedraghandlers.ts","./src/components/flow-canvas/useflowcanvaspaste.ts","./src/components/flow-canvas/useflowcanvasreactflowconfig.test.ts","./src/components/flow-canvas/useflowcanvasreactflowconfig.ts","./src/components/flow-canvas/useflowcanvasselectiontools.test.tsx","./src/components/flow-canvas/useflowcanvasselectiontools.ts","./src/components/flow-canvas/useflowcanvasviewstate.test.ts","./src/components/flow-canvas/useflowcanvasviewstate.ts","./src/components/flow-canvas/useflowcanvaszoomlod.ts","./src/components/flow-editor/collaborationpresenceoverlay.test.tsx","./src/components/flow-editor/collaborationpresenceoverlay.tsx","./src/components/flow-editor/floweditorchrome.tsx","./src/components/flow-editor/buildfloweditorcontrollerparams.ts","./src/components/flow-editor/buildfloweditorscreencontrollerparams.ts","./src/components/flow-editor/floweditorchromeprops.ts","./src/components/flow-editor/infradslapply.test.ts","./src/components/flow-editor/infradslapply.ts","./src/components/flow-editor/panelprops.test.ts","./src/components/flow-editor/panelprops.ts","./src/components/flow-editor/shouldexitstudioonselection.test.ts","./src/components/flow-editor/shouldexitstudioonselection.ts","./src/components/flow-editor/usecollaborationnodepositions.ts","./src/components/flow-editor/usefloweditorcontroller.ts","./src/components/flow-editor/usefloweditorinteractionbindings.ts","./src/components/flow-editor/usefloweditorpanelactions.ts","./src/components/flow-editor/usefloweditorpanelprops.ts","./src/components/flow-editor/usefloweditorruntime.ts","./src/components/flow-editor/usefloweditorscreenbehavior.ts","./src/components/flow-editor/usefloweditorscreenmodel.ts","./src/components/flow-editor/usefloweditorscreenstate.ts","./src/components/flow-editor/usefloweditorshellcontroller.test.tsx","./src/components/flow-editor/usefloweditorshellcontroller.ts","./src/components/flow-editor/usefloweditorstudiocontroller.test.tsx","./src/components/flow-editor/usefloweditorstudiocontroller.ts","./src/components/flow-editor/useinfradslapply.ts","./src/components/home/homedashboard.tsx","./src/components/home/homeflowdialogs.tsx","./src/components/home/homesettingsview.tsx","./src/components/home/homesidebar.tsx","./src/components/home/welcomemodalstate.ts","./src/components/icons/assetsicon.tsx","./src/components/icons/openflowlogo.tsx","./src/components/infra-sync/infrasyncpanel.test.tsx","./src/components/infra-sync/infrasyncpanel.tsx","./src/components/journey/journeyscorecontrol.test.tsx","./src/components/journey/journeyscorecontrol.tsx","./src/components/properties/bulknodeproperties.tsx","./src/components/properties/colorpicker.test.tsx","./src/components/properties/colorpicker.tsx","./src/components/properties/customcolorpopover.tsx","./src/components/properties/diagramnodepropertiesrouter.test.ts","./src/components/properties/diagramnodepropertiesrouter.tsx","./src/components/properties/edgeproperties.tsx","./src/components/properties/iconpicker.tsx","./src/components/properties/icontilepickerprimitives.tsx","./src/components/properties/imageupload.tsx","./src/components/properties/inspectorprimitives.tsx","./src/components/properties/nodeactionbuttons.tsx","./src/components/properties/nodecontentsection.tsx","./src/components/properties/nodeimagesettingssection.tsx","./src/components/properties/nodeproperties.tsx","./src/components/properties/nodetextstylesection.tsx","./src/components/properties/nodewireframevariantsection.tsx","./src/components/properties/propertysliderrow.tsx","./src/components/properties/segmentedchoice.tsx","./src/components/properties/shapeselector.tsx","./src/components/properties/swatchpicker.tsx","./src/components/properties/colorpickerutils.ts","./src/components/properties/propertyinputbehavior.test.ts","./src/components/properties/propertyinputbehavior.ts","./src/components/properties/wireframevariants.ts","./src/components/properties/edge/architectureedgesemanticssection.tsx","./src/components/properties/edge/edgecolorsection.tsx","./src/components/properties/edge/edgeconditionsection.tsx","./src/components/properties/edge/edgelabelsection.tsx","./src/components/properties/edge/edgerelationsection.test.tsx","./src/components/properties/edge/edgerelationsection.tsx","./src/components/properties/edge/edgeroutesection.test.tsx","./src/components/properties/edge/edgeroutesection.tsx","./src/components/properties/edge/edgestylesection.tsx","./src/components/properties/edge/sequencemessagesection.tsx","./src/components/properties/edge/architecturesemantics.test.ts","./src/components/properties/edge/architecturesemantics.ts","./src/components/properties/edge/edgelabelmodel.test.ts","./src/components/properties/edge/edgelabelmodel.ts","./src/components/properties/edge/errelationoptions.ts","./src/components/properties/families/architecturenodeproperties.test.tsx","./src/components/properties/families/architecturenodeproperties.tsx","./src/components/properties/families/architecturenodesection.tsx","./src/components/properties/families/classdiagramnodeproperties.tsx","./src/components/properties/families/classmemberlisteditor.tsx","./src/components/properties/families/classnodesection.tsx","./src/components/properties/families/erdiagramnodeproperties.tsx","./src/components/properties/families/entityfieldlisteditor.tsx","./src/components/properties/families/entitynodesection.tsx","./src/components/properties/families/journeynodeproperties.tsx","./src/components/properties/families/journeynodesection.tsx","./src/components/properties/families/mindmapnodeproperties.test.tsx","./src/components/properties/families/mindmapnodeproperties.tsx","./src/components/properties/families/sequencenodeproperties.tsx","./src/components/properties/families/sequencenodesection.tsx","./src/components/properties/families/structuredtextlisteditor.tsx","./src/components/studio-code-panel/usestudiocodepanelcontroller.test.tsx","./src/components/studio-code-panel/usestudiocodepanelcontroller.ts","./src/components/toolbar/toolbaraddmenu.tsx","./src/components/toolbar/toolbaraddmenupanel.tsx","./src/components/toolbar/toolbarhistorycontrols.tsx","./src/components/toolbar/toolbarmodecontrols.tsx","./src/components/toolbar/toolbarbuttonstyles.ts","./src/components/top-nav/topnavactions.tsx","./src/components/top-nav/topnavbrand.tsx","./src/components/top-nav/topnavmenu.test.tsx","./src/components/top-nav/topnavmenu.tsx","./src/components/top-nav/topnavmenupanel.tsx","./src/components/top-nav/usetopnavstate.ts","./src/components/ui/button.tsx","./src/components/ui/collapsiblesection.tsx","./src/components/ui/input.tsx","./src/components/ui/label.tsx","./src/components/ui/searchfield.tsx","./src/components/ui/segmentedtabs.tsx","./src/components/ui/select.test.tsx","./src/components/ui/select.tsx","./src/components/ui/sidebaritem.tsx","./src/components/ui/slider.tsx","./src/components/ui/switch.tsx","./src/components/ui/textarea.tsx","./src/components/ui/toastcontext.tsx","./src/components/ui/editorfieldstyles.ts","./src/config/aiproviders.test.ts","./src/config/aiproviders.ts","./src/config/rolloutflags.ts","./src/context/architecturelintcontext.tsx","./src/context/cinematicexportcontext.tsx","./src/context/diagramdiffcontext.tsx","./src/diagram-types/registerbuiltinplugins.test.ts","./src/diagram-types/registerbuiltinplugins.ts","./src/diagram-types/registerbuiltinpropertypanels.test.ts","./src/diagram-types/registerbuiltinpropertypanels.ts","./src/diagram-types/architecture/fuzzcorpus.test.ts","./src/diagram-types/architecture/plugin.test.ts","./src/diagram-types/architecture/plugin.ts","./src/diagram-types/classdiagram/fuzzcorpus.test.ts","./src/diagram-types/classdiagram/plugin.test.ts","./src/diagram-types/classdiagram/plugin.ts","./src/diagram-types/core/contracts.ts","./src/diagram-types/core/index.ts","./src/diagram-types/core/propertypanels.test.ts","./src/diagram-types/core/propertypanels.ts","./src/diagram-types/core/registry.ts","./src/diagram-types/erdiagram/fuzzcorpus.test.ts","./src/diagram-types/erdiagram/plugin.test.ts","./src/diagram-types/erdiagram/plugin.ts","./src/diagram-types/flowchart/plugin.ts","./src/diagram-types/journey/fuzzcorpus.test.ts","./src/diagram-types/journey/plugin.test.ts","./src/diagram-types/journey/plugin.ts","./src/diagram-types/mindmap/fuzzcorpus.test.ts","./src/diagram-types/mindmap/plugin.test.ts","./src/diagram-types/mindmap/plugin.ts","./src/diagram-types/sequence/plugin.test.ts","./src/diagram-types/sequence/plugin.ts","./src/diagram-types/statediagram/plugin.test.ts","./src/diagram-types/statediagram/plugin.ts","./src/docs/docsroutes.ts","./src/docs/publicdocscatalog.js","./src/hooks/edgeconnectinteractions.test.ts","./src/hooks/edgeconnectinteractions.ts","./src/hooks/flowexportviewport.test.ts","./src/hooks/flowexportviewport.ts","./src/hooks/mindmaptopicactionrequest.ts","./src/hooks/nodelabeleditrequest.test.ts","./src/hooks/nodelabeleditrequest.ts","./src/hooks/nodequickcreaterequest.test.ts","./src/hooks/nodequickcreaterequest.ts","./src/hooks/snapshotpolicy.test.ts","./src/hooks/snapshotpolicy.ts","./src/hooks/useaigeneration.ts","./src/hooks/useanimatededgeperformancewarning.test.ts","./src/hooks/useanimatededgeperformancewarning.ts","./src/hooks/useclipboardoperations.ts","./src/hooks/usedesignsystem.ts","./src/hooks/useedgeinteractions.ts","./src/hooks/useedgeoperations.ts","./src/hooks/usefloweditoractions.test.ts","./src/hooks/usefloweditoractions.ts","./src/hooks/usefloweditorcallbacks.ts","./src/hooks/usefloweditorcollaboration.test.ts","./src/hooks/usefloweditorcollaboration.ts","./src/hooks/usefloweditoruistate.ts","./src/hooks/useflowexport.ts","./src/hooks/useflowhistory.test.ts","./src/hooks/useflowhistory.ts","./src/hooks/useflowoperations.ts","./src/hooks/useinfrasync.ts","./src/hooks/useinlinenodetextedit.test.ts","./src/hooks/useinlinenodetextedit.ts","./src/hooks/usekeyboardshortcuts.test.ts","./src/hooks/usekeyboardshortcuts.ts","./src/hooks/uselayoutoperations.ts","./src/hooks/usemarkdowneditor.ts","./src/hooks/usemodifierkeys.test.ts","./src/hooks/usemodifierkeys.ts","./src/hooks/usenodeoperations.ts","./src/hooks/useplayback.ts","./src/hooks/usesnapshots.ts","./src/hooks/usestoragepressureguard.ts","./src/hooks/usestructuredlisteditor.ts","./src/hooks/usestyleclipboard.test.ts","./src/hooks/usestyleclipboard.ts","./src/hooks/ai-generation/chathistorystorage.test.ts","./src/hooks/ai-generation/chathistorystorage.ts","./src/hooks/ai-generation/codetoarchitecture.ts","./src/hooks/ai-generation/graphcomposer.test.ts","./src/hooks/ai-generation/graphcomposer.ts","./src/hooks/ai-generation/nodeactionprompts.test.ts","./src/hooks/ai-generation/nodeactionprompts.ts","./src/hooks/ai-generation/openapiparser.test.ts","./src/hooks/ai-generation/openapiparser.ts","./src/hooks/ai-generation/openapitosequence.ts","./src/hooks/ai-generation/positionpreservingapply.test.ts","./src/hooks/ai-generation/positionpreservingapply.ts","./src/hooks/ai-generation/readiness.test.ts","./src/hooks/ai-generation/readiness.ts","./src/hooks/ai-generation/requestlifecycle.test.ts","./src/hooks/ai-generation/requestlifecycle.ts","./src/hooks/ai-generation/sqlparser.test.ts","./src/hooks/ai-generation/sqlparser.ts","./src/hooks/ai-generation/sqltoerd.ts","./src/hooks/ai-generation/terraformtocloud.ts","./src/hooks/edge-operations/utils.test.ts","./src/hooks/edge-operations/utils.ts","./src/hooks/flow-editor-actions/exporthandlers.test.ts","./src/hooks/flow-editor-actions/exporthandlers.ts","./src/hooks/flow-editor-actions/helpers.ts","./src/hooks/flow-editor-actions/layouthandlers.test.ts","./src/hooks/flow-editor-actions/layouthandlers.ts","./src/hooks/flow-export/diagramdocumenttransfer.test.ts","./src/hooks/flow-export/diagramdocumenttransfer.ts","./src/hooks/flow-export/exportcapture.test.ts","./src/hooks/flow-export/exportcapture.ts","./src/hooks/flow-operations/useflowcoreactions.ts","./src/hooks/node-operations/createconnectedsibling.ts","./src/hooks/node-operations/dragstopreconcilepolicy.test.ts","./src/hooks/node-operations/dragstopreconcilepolicy.ts","./src/hooks/node-operations/routingduringdrag.test.ts","./src/hooks/node-operations/routingduringdrag.ts","./src/hooks/node-operations/usearchitecturenodeoperations.test.ts","./src/hooks/node-operations/usearchitecturenodeoperations.ts","./src/hooks/node-operations/usemindmapnodeoperations.test.ts","./src/hooks/node-operations/usemindmapnodeoperations.ts","./src/hooks/node-operations/usenodedragoperations.test.ts","./src/hooks/node-operations/usenodedragoperations.ts","./src/hooks/node-operations/usenodeoperationadders.ts","./src/hooks/node-operations/utils.test.ts","./src/hooks/node-operations/utils.ts","./src/i18n/config.test.ts","./src/i18n/config.ts","./src/i18n/strictmodelocalecoverage.test.ts","./src/i18n/usedlocalecoverage.test.ts","./src/lib/architecturetemplates.test.ts","./src/lib/architecturetemplates.ts","./src/lib/brand.ts","./src/lib/classmembers.ts","./src/lib/connectcreationpolicy.test.ts","./src/lib/connectcreationpolicy.ts","./src/lib/devperformance.ts","./src/lib/entityfields.ts","./src/lib/ertoclassconversion.test.ts","./src/lib/ertoclassconversion.ts","./src/lib/exportfilename.test.ts","./src/lib/exportfilename.ts","./src/lib/flowminddslparserv2.test.ts","./src/lib/flowminddslparserv2.ts","./src/lib/genericshapepolicy.ts","./src/lib/id.ts","./src/lib/index.ts","./src/lib/legacybranding.ts","./src/lib/logger.ts","./src/lib/mermaidparser.ts","./src/lib/mermaidparserhelpers.ts","./src/lib/mindmaplayout.test.ts","./src/lib/mindmaplayout.ts","./src/lib/mindmaptree.ts","./src/lib/nodehandles.ts","./src/lib/nodeparent.ts","./src/lib/openflowdslparser.ts","./src/lib/openflowdslparserv2.ts","./src/lib/reactflowcompat.ts","./src/lib/reconnectedge.test.ts","./src/lib/reconnectedge.ts","./src/lib/relationsemantics.test.ts","./src/lib/relationsemantics.ts","./src/lib/releasestaleelkroutes.test.ts","./src/lib/releasestaleelkroutes.ts","./src/lib/result.ts","./src/lib/storagepressure.test.ts","./src/lib/storagepressure.ts","./src/lib/types.ts","./src/services/aligndistribute.ts","./src/services/aiservice.test.ts","./src/services/aiservice.ts","./src/services/animatedexport.test.ts","./src/services/animatedexport.ts","./src/services/architectureroundtrip.test.ts","./src/services/canonicalserialization.test.ts","./src/services/canonicalserialization.ts","./src/services/composediagramfordisplay.test.ts","./src/services/composediagramfordisplay.ts","./src/services/diagramdocument.test.ts","./src/services/diagramdocument.ts","./src/services/domainlibrary.test.ts","./src/services/domainlibrary.ts","./src/services/elklayout.test.ts","./src/services/elklayout.ts","./src/services/exportservice.test.ts","./src/services/exportservice.ts","./src/services/figmaexportservice.ts","./src/services/flowchartroundtrip.test.ts","./src/services/geminiservice.ts","./src/services/gifencoder.test.ts","./src/services/gifencoder.ts","./src/services/iconassetcatalog.ts","./src/services/importfidelity.test.ts","./src/services/importfidelity.ts","./src/services/mermaidparser.test.ts","./src/services/openflowdslexporter.test.ts","./src/services/openflowdslexporter.ts","./src/services/openflowdslparser.test.ts","./src/services/openflowroundtripgolden.test.ts","./src/services/openflowroundtripgoldenfixtures.ts","./src/services/operationfeedback.ts","./src/services/remainingfamiliesroundtrip.test.ts","./src/services/smartedgerouting.test.ts","./src/services/smartedgerouting.ts","./src/services/statediagramroundtrip.test.ts","./src/services/templates.selector.test.ts","./src/services/templates.ts","./src/services/ai/contextserializer.test.ts","./src/services/ai/contextserializer.ts","./src/services/architecturelint/defaultrules.ts","./src/services/architecturelint/ruleengine.test.ts","./src/services/architecturelint/ruleengine.ts","./src/services/architecturelint/rulelibrary.ts","./src/services/architecturelint/types.ts","./src/services/architecturelint/workspacerules.ts","./src/services/collaboration/canvasdiff.test.ts","./src/services/collaboration/canvasdiff.ts","./src/services/collaboration/comments.test.ts","./src/services/collaboration/comments.ts","./src/services/collaboration/contracts.test.ts","./src/services/collaboration/contracts.ts","./src/services/collaboration/hookutils.ts","./src/services/collaboration/presenceviewmodel.test.ts","./src/services/collaboration/presenceviewmodel.ts","./src/services/collaboration/reducer.test.ts","./src/services/collaboration/reducer.ts","./src/services/collaboration/roomconfig.ts","./src/services/collaboration/roomlink.test.ts","./src/services/collaboration/roomlink.ts","./src/services/collaboration/runtimecontroller.test.ts","./src/services/collaboration/runtimecontroller.ts","./src/services/collaboration/runtimehookutils.test.ts","./src/services/collaboration/runtimehookutils.ts","./src/services/collaboration/session.test.ts","./src/services/collaboration/session.ts","./src/services/collaboration/storebridge.test.ts","./src/services/collaboration/storebridge.ts","./src/services/collaboration/transport.test.ts","./src/services/collaboration/transport.ts","./src/services/collaboration/transportfactory.test.ts","./src/services/collaboration/transportfactory.ts","./src/services/collaboration/types.ts","./src/services/collaboration/versioning.test.ts","./src/services/collaboration/versioning.ts","./src/services/collaboration/yjspeertransport.test.ts","./src/services/collaboration/yjspeertransport.ts","./src/services/diagramdiff/diffengine.ts","./src/services/elk-layout/determinism.ts","./src/services/elk-layout/options.ts","./src/services/elk-layout/types.ts","./src/services/export/cinematicbuildplan.test.ts","./src/services/export/cinematicbuildplan.ts","./src/services/export/cinematicexporttheme.test.ts","./src/services/export/cinematicexporttheme.ts","./src/services/export/cinematicrenderstate.test.ts","./src/services/export/cinematicrenderstate.ts","./src/services/export/formatting.ts","./src/services/export/mermaidbuilder.test.ts","./src/services/export/mermaidbuilder.ts","./src/services/export/pdfdocument.test.ts","./src/services/export/pdfdocument.ts","./src/services/export/plantumlbuilder.ts","./src/services/figma/edgehelpers.ts","./src/services/figma/iconhelpers.ts","./src/services/figma/nodelayers.ts","./src/services/figma/themehelpers.ts","./src/services/figmaimport/figmaapiclient.ts","./src/services/infrasync/dockercomposeparser.test.ts","./src/services/infrasync/dockercomposeparser.ts","./src/services/infrasync/infratodsl.test.ts","./src/services/infrasync/infratodsl.ts","./src/services/infrasync/kubernetesparser.test.ts","./src/services/infrasync/kubernetesparser.ts","./src/services/infrasync/terraformstateparser.test.ts","./src/services/infrasync/terraformstateparser.ts","./src/services/infrasync/types.ts","./src/services/mermaid/detectdiagramtype.test.ts","./src/services/mermaid/detectdiagramtype.ts","./src/services/mermaid/diagnosticformatting.test.ts","./src/services/mermaid/diagnosticformatting.ts","./src/services/mermaid/parsemermaidbytype.test.ts","./src/services/mermaid/parsemermaidbytype.ts","./src/services/mermaid/strictmodediagnosticspresentation.test.ts","./src/services/mermaid/strictmodediagnosticspresentation.ts","./src/services/mermaid/strictmodeguidance.test.ts","./src/services/mermaid/strictmodeguidance.ts","./src/services/mermaid/strictmodeuxregression.test.ts","./src/services/offline/registerappshellserviceworker.test.ts","./src/services/offline/registerappshellserviceworker.ts","./src/services/onboarding/config.ts","./src/services/onboarding/events.test.ts","./src/services/onboarding/events.ts","./src/services/playback/contracts.test.ts","./src/services/playback/contracts.ts","./src/services/playback/model.test.ts","./src/services/playback/model.ts","./src/services/playback/studio.test.ts","./src/services/playback/studio.ts","./src/services/sequence/sequencemessage.test.ts","./src/services/sequence/sequencemessage.ts","./src/services/shapelibrary/bootstrap.test.ts","./src/services/shapelibrary/bootstrap.ts","./src/services/shapelibrary/ingestionpipeline.test.ts","./src/services/shapelibrary/ingestionpipeline.ts","./src/services/shapelibrary/manifestvalidation.test.ts","./src/services/shapelibrary/manifestvalidation.ts","./src/services/shapelibrary/providercatalog.test.ts","./src/services/shapelibrary/providercatalog.ts","./src/services/shapelibrary/registry.test.ts","./src/services/shapelibrary/registry.ts","./src/services/shapelibrary/starterpacks.ts","./src/services/shapelibrary/types.ts","./src/services/storage/flowpersiststorage.test.ts","./src/services/storage/flowpersiststorage.ts","./src/services/storage/indexeddbschema.test.ts","./src/services/storage/indexeddbschema.ts","./src/services/storage/indexeddbstatestorage.test.ts","./src/services/storage/indexeddbstatestorage.ts","./src/services/storage/localfirstrepository.ts","./src/services/storage/localfirstruntime.ts","./src/services/storage/snapshotstorage.test.ts","./src/services/storage/snapshotstorage.ts","./src/services/storage/storagetelemetry.test.ts","./src/services/storage/storagetelemetry.ts","./src/services/storage/storagetelemetrysink.test.ts","./src/services/storage/storagetelemetrysink.ts","./src/services/storage/uilocalstorage.test.ts","./src/services/storage/uilocalstorage.ts","./src/services/templatelibrary/registry.test.ts","./src/services/templatelibrary/registry.ts","./src/services/templatelibrary/startertemplates.assets.test.ts","./src/services/templatelibrary/startertemplates.test.ts","./src/services/templatelibrary/startertemplates.ts","./src/services/templatelibrary/types.ts","./src/store/aisettings.test.ts","./src/store/aisettings.ts","./src/store/aisettingspersistence.ts","./src/store/canvashooks.ts","./src/store/defaults.ts","./src/store/designsystemhooks.ts","./src/store/historyhooks.ts","./src/store/persistence.test.ts","./src/store/persistence.ts","./src/store/selectionhooks.ts","./src/store/tabhooks.ts","./src/store/types.ts","./src/store/viewhooks.ts","./src/store/actions/createaiandselectionactions.ts","./src/store/actions/createcanvasactions.ts","./src/store/actions/createdesignsystemactions.ts","./src/store/actions/createhistoryactions.ts","./src/store/actions/createlayeractions.ts","./src/store/actions/createtabactions.ts","./src/store/actions/createviewactions.ts"],"version":"5.8.3"} \ No newline at end of file +{"root":["./src/app.tsx","./src/constants.test.ts","./src/constants.ts","./src/index.tsx","./src/store.test.ts","./src/store.ts","./src/theme.ts","./src/app/routestate.test.ts","./src/app/routestate.ts","./src/components/annotationnode.tsx","./src/components/commandbar.test.tsx","./src/components/commandbar.tsx","./src/components/connectmenu.test.tsx","./src/components/connectmenu.tsx","./src/components/contextmenu.tsx","./src/components/customconnectionline.tsx","./src/components/customedge.tsx","./src/components/customnode.handleinteraction.test.tsx","./src/components/customnode.tsx","./src/components/designsystem.integration.test.tsx","./src/components/diagramviewer.tsx","./src/components/errorboundary.tsx","./src/components/exportmenu.tsx","./src/components/exportmenupanel.test.tsx","./src/components/exportmenupanel.tsx","./src/components/flowcanvas.tsx","./src/components/floweditor.tsx","./src/components/floweditoremptystate.tsx","./src/components/floweditorlayoutoverlay.tsx","./src/components/floweditorpanels.test.tsx","./src/components/floweditorpanels.tsx","./src/components/flowtabs.tsx","./src/components/groupnode.tsx","./src/components/homepage.integration.test.tsx","./src/components/homepage.tsx","./src/components/iconmap.test.tsx","./src/components/iconmap.ts","./src/components/imagenode.tsx","./src/components/inlinetexteditsurface.test.tsx","./src/components/inlinetexteditsurface.tsx","./src/components/keyboardshortcutsmodal.tsx","./src/components/languageselector.tsx","./src/components/markdownrenderer.tsx","./src/components/memoizedmarkdown.tsx","./src/components/navigationcontrols.tsx","./src/components/nodechrome.tsx","./src/components/nodequickcreatebuttons.tsx","./src/components/nodetransformcontrols.tsx","./src/components/playbackcontrols.tsx","./src/components/propertiespanel.tsx","./src/components/rightrail.tsx","./src/components/sectionnode.tsx","./src/components/shareembedmodal.tsx","./src/components/sharemodal.test.tsx","./src/components/sharemodal.tsx","./src/components/sidebarshell.tsx","./src/components/snapshotspanel.tsx","./src/components/studioaipanel.test.tsx","./src/components/studioaipanel.tsx","./src/components/studiocodepanel.test.tsx","./src/components/studiocodepanel.tsx","./src/components/studiopanel.test.tsx","./src/components/studiopanel.tsx","./src/components/studioplaybackpanel.test.tsx","./src/components/studioplaybackpanel.tsx","./src/components/swimlanenode.tsx","./src/components/textnode.tsx","./src/components/toolbar.tsx","./src/components/tooltip.tsx","./src/components/topnav.tsx","./src/components/welcomemodal.tsx","./src/components/annotationtheme.ts","./src/components/container-nodes.handleinteraction.test.tsx","./src/components/editorsurfacetiers.ts","./src/components/handleinteraction.test.ts","./src/components/handleinteraction.ts","./src/components/handleinteractionusage.test.ts","./src/components/lightweight-nodes.handleinteraction.test.tsx","./src/components/markdownsyntax.ts","./src/components/sharemodalcontent.ts","./src/components/studioaicopy.ts","./src/components/transformdiagnostics.test.ts","./src/components/transformdiagnostics.ts","./src/components/useactivenodeselection.ts","./src/components/useexportmenu.ts","./src/components/settingsmodal/aisettings.tsx","./src/components/settingsmodal/generalsettings.tsx","./src/components/settingsmodal/settingsmodal.test.tsx","./src/components/settingsmodal/settingsmodal.tsx","./src/components/settingsmodal/shortcutssettings.tsx","./src/components/settingsmodal/ai/advancedendpointsection.tsx","./src/components/settingsmodal/ai/customheaderseditor.tsx","./src/components/settingsmodal/ai/privacysection.tsx","./src/components/settingsmodal/ai/providericon.tsx","./src/components/settingsmodal/ai/providersection.tsx","./src/components/settingsmodal/ai/step.tsx","./src/components/app/docssiteredirect.test.tsx","./src/components/app/docssiteredirect.tsx","./src/components/app/mobileworkspacegate.test.tsx","./src/components/app/mobileworkspacegate.tsx","./src/components/app/routeloadingfallback.test.tsx","./src/components/app/routeloadingfallback.tsx","./src/components/app/mobileworkspacegatecopy.ts","./src/components/app/routeloadingcopy.ts","./src/components/architecture-lint/lintrulespanel.tsx","./src/components/command-bar/assetsview.test.tsx","./src/components/command-bar/assetsview.tsx","./src/components/command-bar/designsystemeditor.tsx","./src/components/command-bar/designsystemview.tsx","./src/components/command-bar/figmaimportpanel.tsx","./src/components/command-bar/importview.tsx","./src/components/command-bar/layersview.tsx","./src/components/command-bar/layoutview.tsx","./src/components/command-bar/pagesview.tsx","./src/components/command-bar/rootview.test.tsx","./src/components/command-bar/rootview.tsx","./src/components/command-bar/searchview.tsx","./src/components/command-bar/templatesview.tsx","./src/components/command-bar/viewheader.tsx","./src/components/command-bar/visualsview.tsx","./src/components/command-bar/applycodechanges.ts","./src/components/command-bar/assetsviewconstants.ts","./src/components/command-bar/searchquery.test.ts","./src/components/command-bar/searchquery.ts","./src/components/command-bar/types.ts","./src/components/command-bar/useaiviewstate.test.tsx","./src/components/command-bar/useaiviewstate.ts","./src/components/command-bar/usecloudassetcatalog.ts","./src/components/command-bar/usecommandbarcommands.test.tsx","./src/components/command-bar/usecommandbarcommands.tsx","./src/components/custom-edge/customedgewrapper.tsx","./src/components/custom-edge/sequencemessageedge.test.tsx","./src/components/custom-edge/sequencemessageedge.tsx","./src/components/custom-edge/animatededgepresentation.test.ts","./src/components/custom-edge/animatededgepresentation.ts","./src/components/custom-edge/classrelationsemantics.test.ts","./src/components/custom-edge/classrelationsemantics.ts","./src/components/custom-edge/edgerendermode.ts","./src/components/custom-edge/pathutils.test.ts","./src/components/custom-edge/pathutils.ts","./src/components/custom-edge/pathutilsgeometry.ts","./src/components/custom-edge/pathutilssiblingrouting.ts","./src/components/custom-edge/pathutilstypes.ts","./src/components/custom-edge/relationroutingsemantics.test.ts","./src/components/custom-edge/relationroutingsemantics.ts","./src/components/custom-edge/standardedgemarkers.test.ts","./src/components/custom-edge/standardedgemarkers.ts","./src/components/custom-nodes/architecturenode.handleinteraction.test.tsx","./src/components/custom-nodes/architecturenode.tsx","./src/components/custom-nodes/browsernode.tsx","./src/components/custom-nodes/classentitynode.handleinteraction.test.tsx","./src/components/custom-nodes/classnode.tsx","./src/components/custom-nodes/entitynode.tsx","./src/components/custom-nodes/journeynode.tsx","./src/components/custom-nodes/mindmapnode.tsx","./src/components/custom-nodes/mobilenode.tsx","./src/components/custom-nodes/sequenceparticipantnode.tsx","./src/components/custom-nodes/structurednodehandles.tsx","./src/components/custom-nodes/visualnodes.handleinteraction.test.tsx","./src/components/custom-nodes/browservariantrenderer.tsx","./src/components/custom-nodes/mobilevariantrenderer.tsx","./src/components/custom-nodes/structuredlistnavigation.test.ts","./src/components/custom-nodes/structuredlistnavigation.ts","./src/components/diagram-diff/diffmodebanner.tsx","./src/components/flow-canvas/flowcanvasalignmentguidesoverlay.tsx","./src/components/flow-canvas/flowcanvasoverlays.tsx","./src/components/flow-canvas/alignmentguides.test.ts","./src/components/flow-canvas/alignmentguides.ts","./src/components/flow-canvas/flowcanvasreactflowcontracts.ts","./src/components/flow-canvas/flowcanvastypes.test.ts","./src/components/flow-canvas/flowcanvastypes.tsx","./src/components/flow-canvas/largegraphsafetymode.test.ts","./src/components/flow-canvas/largegraphsafetymode.ts","./src/components/flow-canvas/nodechromecoverage.test.ts","./src/components/flow-canvas/pastehelpers.test.ts","./src/components/flow-canvas/pastehelpers.ts","./src/components/flow-canvas/useflowcanvasalignmentguides.ts","./src/components/flow-canvas/useflowcanvasconnectionstate.ts","./src/components/flow-canvas/useflowcanvascontextactions.ts","./src/components/flow-canvas/useflowcanvasdragdrop.ts","./src/components/flow-canvas/useflowcanvasinteractionlod.ts","./src/components/flow-canvas/useflowcanvasmenus.ts","./src/components/flow-canvas/useflowcanvasmenusandactions.test.tsx","./src/components/flow-canvas/useflowcanvasmenusandactions.ts","./src/components/flow-canvas/useflowcanvasnodedraghandlers.ts","./src/components/flow-canvas/useflowcanvaspaste.ts","./src/components/flow-canvas/useflowcanvasreactflowconfig.test.ts","./src/components/flow-canvas/useflowcanvasreactflowconfig.ts","./src/components/flow-canvas/useflowcanvasselectiontools.test.tsx","./src/components/flow-canvas/useflowcanvasselectiontools.ts","./src/components/flow-canvas/useflowcanvasviewstate.test.ts","./src/components/flow-canvas/useflowcanvasviewstate.ts","./src/components/flow-canvas/useflowcanvaszoomlod.ts","./src/components/flow-editor/collaborationpresenceoverlay.test.tsx","./src/components/flow-editor/collaborationpresenceoverlay.tsx","./src/components/flow-editor/floweditorchrome.tsx","./src/components/flow-editor/buildfloweditorcontrollerparams.ts","./src/components/flow-editor/buildfloweditorscreencontrollerparams.ts","./src/components/flow-editor/floweditorchromeprops.ts","./src/components/flow-editor/infradslapply.test.ts","./src/components/flow-editor/infradslapply.ts","./src/components/flow-editor/panelprops.test.ts","./src/components/flow-editor/panelprops.ts","./src/components/flow-editor/shouldexitstudioonselection.test.ts","./src/components/flow-editor/shouldexitstudioonselection.ts","./src/components/flow-editor/usecollaborationnodepositions.ts","./src/components/flow-editor/usefloweditorcontroller.ts","./src/components/flow-editor/usefloweditorinteractionbindings.ts","./src/components/flow-editor/usefloweditorpanelactions.ts","./src/components/flow-editor/usefloweditorpanelprops.ts","./src/components/flow-editor/usefloweditorruntime.ts","./src/components/flow-editor/usefloweditorscreenbehavior.ts","./src/components/flow-editor/usefloweditorscreenmodel.ts","./src/components/flow-editor/usefloweditorscreenstate.ts","./src/components/flow-editor/usefloweditorshellcontroller.test.tsx","./src/components/flow-editor/usefloweditorshellcontroller.ts","./src/components/flow-editor/usefloweditorstudiocontroller.test.tsx","./src/components/flow-editor/usefloweditorstudiocontroller.ts","./src/components/flow-editor/useinfradslapply.ts","./src/components/home/homedashboard.tsx","./src/components/home/homeflowdialogs.tsx","./src/components/home/homesettingsview.tsx","./src/components/home/homesidebar.tsx","./src/components/home/welcomemodalstate.ts","./src/components/icons/assetsicon.tsx","./src/components/icons/openflowlogo.tsx","./src/components/infra-sync/infrasyncpanel.test.tsx","./src/components/infra-sync/infrasyncpanel.tsx","./src/components/journey/journeyscorecontrol.test.tsx","./src/components/journey/journeyscorecontrol.tsx","./src/components/properties/bulknodeproperties.tsx","./src/components/properties/colorpicker.test.tsx","./src/components/properties/colorpicker.tsx","./src/components/properties/customcolorpopover.tsx","./src/components/properties/diagramnodepropertiesrouter.test.ts","./src/components/properties/diagramnodepropertiesrouter.tsx","./src/components/properties/edgeproperties.tsx","./src/components/properties/iconpicker.tsx","./src/components/properties/icontilepickerprimitives.tsx","./src/components/properties/imageupload.tsx","./src/components/properties/inspectorprimitives.tsx","./src/components/properties/nodeactionbuttons.tsx","./src/components/properties/nodecontentsection.tsx","./src/components/properties/nodeimagesettingssection.tsx","./src/components/properties/nodeproperties.tsx","./src/components/properties/nodetextstylesection.tsx","./src/components/properties/nodewireframevariantsection.tsx","./src/components/properties/propertysliderrow.tsx","./src/components/properties/segmentedchoice.tsx","./src/components/properties/shapeselector.tsx","./src/components/properties/swatchpicker.tsx","./src/components/properties/colorpickerutils.ts","./src/components/properties/propertyinputbehavior.test.ts","./src/components/properties/propertyinputbehavior.ts","./src/components/properties/wireframevariants.ts","./src/components/properties/edge/architectureedgesemanticssection.tsx","./src/components/properties/edge/edgecolorsection.tsx","./src/components/properties/edge/edgeconditionsection.tsx","./src/components/properties/edge/edgelabelsection.tsx","./src/components/properties/edge/edgerelationsection.test.tsx","./src/components/properties/edge/edgerelationsection.tsx","./src/components/properties/edge/edgeroutesection.test.tsx","./src/components/properties/edge/edgeroutesection.tsx","./src/components/properties/edge/edgestylesection.tsx","./src/components/properties/edge/sequencemessagesection.tsx","./src/components/properties/edge/architecturesemantics.test.ts","./src/components/properties/edge/architecturesemantics.ts","./src/components/properties/edge/edgelabelmodel.test.ts","./src/components/properties/edge/edgelabelmodel.ts","./src/components/properties/edge/errelationoptions.ts","./src/components/properties/families/architecturenodeproperties.test.tsx","./src/components/properties/families/architecturenodeproperties.tsx","./src/components/properties/families/architecturenodesection.tsx","./src/components/properties/families/classdiagramnodeproperties.tsx","./src/components/properties/families/classmemberlisteditor.tsx","./src/components/properties/families/classnodesection.tsx","./src/components/properties/families/erdiagramnodeproperties.tsx","./src/components/properties/families/entityfieldlisteditor.tsx","./src/components/properties/families/entitynodesection.tsx","./src/components/properties/families/journeynodeproperties.tsx","./src/components/properties/families/journeynodesection.tsx","./src/components/properties/families/mindmapnodeproperties.test.tsx","./src/components/properties/families/mindmapnodeproperties.tsx","./src/components/properties/families/sequencenodeproperties.tsx","./src/components/properties/families/sequencenodesection.tsx","./src/components/properties/families/structuredtextlisteditor.tsx","./src/components/studio-code-panel/usestudiocodepanelcontroller.test.tsx","./src/components/studio-code-panel/usestudiocodepanelcontroller.ts","./src/components/toolbar/toolbaraddmenu.tsx","./src/components/toolbar/toolbaraddmenupanel.tsx","./src/components/toolbar/toolbarhistorycontrols.tsx","./src/components/toolbar/toolbarmodecontrols.tsx","./src/components/toolbar/toolbarbuttonstyles.ts","./src/components/top-nav/topnavactions.tsx","./src/components/top-nav/topnavbrand.tsx","./src/components/top-nav/topnavmenu.test.tsx","./src/components/top-nav/topnavmenu.tsx","./src/components/top-nav/topnavmenupanel.tsx","./src/components/top-nav/usetopnavstate.ts","./src/components/ui/button.tsx","./src/components/ui/collapsiblesection.tsx","./src/components/ui/input.tsx","./src/components/ui/label.tsx","./src/components/ui/searchfield.tsx","./src/components/ui/segmentedtabs.tsx","./src/components/ui/select.test.tsx","./src/components/ui/select.tsx","./src/components/ui/sidebaritem.tsx","./src/components/ui/slider.tsx","./src/components/ui/switch.tsx","./src/components/ui/textarea.tsx","./src/components/ui/toastcontext.tsx","./src/components/ui/editorfieldstyles.ts","./src/config/aiproviders.test.ts","./src/config/aiproviders.ts","./src/config/rolloutflags.ts","./src/context/architecturelintcontext.tsx","./src/context/cinematicexportcontext.tsx","./src/context/diagramdiffcontext.tsx","./src/diagram-types/registerbuiltinplugins.test.ts","./src/diagram-types/registerbuiltinplugins.ts","./src/diagram-types/registerbuiltinpropertypanels.test.ts","./src/diagram-types/registerbuiltinpropertypanels.ts","./src/diagram-types/architecture/fuzzcorpus.test.ts","./src/diagram-types/architecture/plugin.test.ts","./src/diagram-types/architecture/plugin.ts","./src/diagram-types/classdiagram/fuzzcorpus.test.ts","./src/diagram-types/classdiagram/plugin.test.ts","./src/diagram-types/classdiagram/plugin.ts","./src/diagram-types/core/contracts.ts","./src/diagram-types/core/index.ts","./src/diagram-types/core/propertypanels.test.ts","./src/diagram-types/core/propertypanels.ts","./src/diagram-types/core/registry.ts","./src/diagram-types/erdiagram/fuzzcorpus.test.ts","./src/diagram-types/erdiagram/plugin.test.ts","./src/diagram-types/erdiagram/plugin.ts","./src/diagram-types/flowchart/plugin.ts","./src/diagram-types/journey/fuzzcorpus.test.ts","./src/diagram-types/journey/plugin.test.ts","./src/diagram-types/journey/plugin.ts","./src/diagram-types/mindmap/fuzzcorpus.test.ts","./src/diagram-types/mindmap/plugin.test.ts","./src/diagram-types/mindmap/plugin.ts","./src/diagram-types/sequence/plugin.test.ts","./src/diagram-types/sequence/plugin.ts","./src/diagram-types/statediagram/plugin.test.ts","./src/diagram-types/statediagram/plugin.ts","./src/docs/docsroutes.ts","./src/docs/publicdocscatalog.js","./src/hooks/edgeconnectinteractions.test.ts","./src/hooks/edgeconnectinteractions.ts","./src/hooks/flowexportviewport.test.ts","./src/hooks/flowexportviewport.ts","./src/hooks/mindmaptopicactionrequest.ts","./src/hooks/nodelabeleditrequest.test.ts","./src/hooks/nodelabeleditrequest.ts","./src/hooks/nodequickcreaterequest.test.ts","./src/hooks/nodequickcreaterequest.ts","./src/hooks/snapshotpolicy.test.ts","./src/hooks/snapshotpolicy.ts","./src/hooks/useaigeneration.ts","./src/hooks/useanalyticspreference.ts","./src/hooks/useanimatededgeperformancewarning.test.ts","./src/hooks/useanimatededgeperformancewarning.ts","./src/hooks/useclipboardoperations.ts","./src/hooks/usedesignsystem.ts","./src/hooks/useedgeinteractions.ts","./src/hooks/useedgeoperations.ts","./src/hooks/usefloweditoractions.test.ts","./src/hooks/usefloweditoractions.ts","./src/hooks/usefloweditorcallbacks.ts","./src/hooks/usefloweditorcollaboration.test.ts","./src/hooks/usefloweditorcollaboration.ts","./src/hooks/usefloweditoruistate.ts","./src/hooks/useflowexport.ts","./src/hooks/useflowhistory.test.ts","./src/hooks/useflowhistory.ts","./src/hooks/useflowoperations.ts","./src/hooks/useinfrasync.ts","./src/hooks/useinlinenodetextedit.test.ts","./src/hooks/useinlinenodetextedit.ts","./src/hooks/usekeyboardshortcuts.test.ts","./src/hooks/usekeyboardshortcuts.ts","./src/hooks/uselayoutoperations.ts","./src/hooks/usemarkdowneditor.ts","./src/hooks/usemodifierkeys.test.ts","./src/hooks/usemodifierkeys.ts","./src/hooks/usenodeoperations.ts","./src/hooks/useplayback.ts","./src/hooks/usesnapshots.ts","./src/hooks/usestoragepressureguard.ts","./src/hooks/usestructuredlisteditor.ts","./src/hooks/usestyleclipboard.test.ts","./src/hooks/usestyleclipboard.ts","./src/hooks/ai-generation/chathistorystorage.test.ts","./src/hooks/ai-generation/chathistorystorage.ts","./src/hooks/ai-generation/codetoarchitecture.ts","./src/hooks/ai-generation/graphcomposer.test.ts","./src/hooks/ai-generation/graphcomposer.ts","./src/hooks/ai-generation/nodeactionprompts.test.ts","./src/hooks/ai-generation/nodeactionprompts.ts","./src/hooks/ai-generation/openapiparser.test.ts","./src/hooks/ai-generation/openapiparser.ts","./src/hooks/ai-generation/openapitosequence.ts","./src/hooks/ai-generation/positionpreservingapply.test.ts","./src/hooks/ai-generation/positionpreservingapply.ts","./src/hooks/ai-generation/readiness.test.ts","./src/hooks/ai-generation/readiness.ts","./src/hooks/ai-generation/requestlifecycle.test.ts","./src/hooks/ai-generation/requestlifecycle.ts","./src/hooks/ai-generation/sqlparser.test.ts","./src/hooks/ai-generation/sqlparser.ts","./src/hooks/ai-generation/sqltoerd.ts","./src/hooks/ai-generation/terraformtocloud.ts","./src/hooks/edge-operations/utils.test.ts","./src/hooks/edge-operations/utils.ts","./src/hooks/flow-editor-actions/exporthandlers.test.ts","./src/hooks/flow-editor-actions/exporthandlers.ts","./src/hooks/flow-editor-actions/helpers.ts","./src/hooks/flow-editor-actions/layouthandlers.test.ts","./src/hooks/flow-editor-actions/layouthandlers.ts","./src/hooks/flow-export/diagramdocumenttransfer.test.ts","./src/hooks/flow-export/diagramdocumenttransfer.ts","./src/hooks/flow-export/exportcapture.test.ts","./src/hooks/flow-export/exportcapture.ts","./src/hooks/flow-operations/useflowcoreactions.ts","./src/hooks/node-operations/createconnectedsibling.ts","./src/hooks/node-operations/dragstopreconcilepolicy.test.ts","./src/hooks/node-operations/dragstopreconcilepolicy.ts","./src/hooks/node-operations/routingduringdrag.test.ts","./src/hooks/node-operations/routingduringdrag.ts","./src/hooks/node-operations/usearchitecturenodeoperations.test.ts","./src/hooks/node-operations/usearchitecturenodeoperations.ts","./src/hooks/node-operations/usemindmapnodeoperations.test.ts","./src/hooks/node-operations/usemindmapnodeoperations.ts","./src/hooks/node-operations/usenodedragoperations.test.ts","./src/hooks/node-operations/usenodedragoperations.ts","./src/hooks/node-operations/usenodeoperationadders.ts","./src/hooks/node-operations/utils.test.ts","./src/hooks/node-operations/utils.ts","./src/i18n/config.test.ts","./src/i18n/config.ts","./src/i18n/strictmodelocalecoverage.test.ts","./src/i18n/usedlocalecoverage.test.ts","./src/lib/architecturetemplates.test.ts","./src/lib/architecturetemplates.ts","./src/lib/brand.ts","./src/lib/classmembers.ts","./src/lib/connectcreationpolicy.test.ts","./src/lib/connectcreationpolicy.ts","./src/lib/devperformance.ts","./src/lib/entityfields.ts","./src/lib/ertoclassconversion.test.ts","./src/lib/ertoclassconversion.ts","./src/lib/exportfilename.test.ts","./src/lib/exportfilename.ts","./src/lib/flowminddslparserv2.test.ts","./src/lib/flowminddslparserv2.ts","./src/lib/genericshapepolicy.ts","./src/lib/id.ts","./src/lib/index.ts","./src/lib/legacybranding.ts","./src/lib/logger.ts","./src/lib/mermaidparser.ts","./src/lib/mermaidparserhelpers.ts","./src/lib/mindmaplayout.test.ts","./src/lib/mindmaplayout.ts","./src/lib/mindmaptree.ts","./src/lib/nodehandles.ts","./src/lib/nodeparent.ts","./src/lib/openflowdslparser.ts","./src/lib/openflowdslparserv2.ts","./src/lib/reactflowcompat.ts","./src/lib/reconnectedge.test.ts","./src/lib/reconnectedge.ts","./src/lib/relationsemantics.test.ts","./src/lib/relationsemantics.ts","./src/lib/releasestaleelkroutes.test.ts","./src/lib/releasestaleelkroutes.ts","./src/lib/result.ts","./src/lib/storagepressure.test.ts","./src/lib/storagepressure.ts","./src/lib/types.ts","./src/services/aligndistribute.ts","./src/services/aiservice.test.ts","./src/services/aiservice.ts","./src/services/animatedexport.test.ts","./src/services/animatedexport.ts","./src/services/architectureroundtrip.test.ts","./src/services/canonicalserialization.test.ts","./src/services/canonicalserialization.ts","./src/services/composediagramfordisplay.test.ts","./src/services/composediagramfordisplay.ts","./src/services/diagramdocument.test.ts","./src/services/diagramdocument.ts","./src/services/domainlibrary.test.ts","./src/services/domainlibrary.ts","./src/services/elklayout.test.ts","./src/services/elklayout.ts","./src/services/exportservice.test.ts","./src/services/exportservice.ts","./src/services/figmaexportservice.ts","./src/services/flowchartroundtrip.test.ts","./src/services/geminiservice.ts","./src/services/gifencoder.test.ts","./src/services/gifencoder.ts","./src/services/iconassetcatalog.ts","./src/services/importfidelity.test.ts","./src/services/importfidelity.ts","./src/services/mermaidparser.test.ts","./src/services/openflowdslexporter.test.ts","./src/services/openflowdslexporter.ts","./src/services/openflowdslparser.test.ts","./src/services/openflowroundtripgolden.test.ts","./src/services/openflowroundtripgoldenfixtures.ts","./src/services/operationfeedback.ts","./src/services/remainingfamiliesroundtrip.test.ts","./src/services/smartedgerouting.test.ts","./src/services/smartedgerouting.ts","./src/services/statediagramroundtrip.test.ts","./src/services/templates.selector.test.ts","./src/services/templates.ts","./src/services/ai/contextserializer.test.ts","./src/services/ai/contextserializer.ts","./src/services/analytics/analytics.ts","./src/services/analytics/analyticssettings.test.ts","./src/services/analytics/analyticssettings.ts","./src/services/analytics/surfaceanalyticsclient.ts","./src/services/architecturelint/defaultrules.ts","./src/services/architecturelint/ruleengine.test.ts","./src/services/architecturelint/ruleengine.ts","./src/services/architecturelint/rulelibrary.ts","./src/services/architecturelint/types.ts","./src/services/architecturelint/workspacerules.ts","./src/services/collaboration/canvasdiff.test.ts","./src/services/collaboration/canvasdiff.ts","./src/services/collaboration/comments.test.ts","./src/services/collaboration/comments.ts","./src/services/collaboration/contracts.test.ts","./src/services/collaboration/contracts.ts","./src/services/collaboration/hookutils.ts","./src/services/collaboration/presenceviewmodel.test.ts","./src/services/collaboration/presenceviewmodel.ts","./src/services/collaboration/reducer.test.ts","./src/services/collaboration/reducer.ts","./src/services/collaboration/roomconfig.ts","./src/services/collaboration/roomlink.test.ts","./src/services/collaboration/roomlink.ts","./src/services/collaboration/runtimecontroller.test.ts","./src/services/collaboration/runtimecontroller.ts","./src/services/collaboration/runtimehookutils.test.ts","./src/services/collaboration/runtimehookutils.ts","./src/services/collaboration/session.test.ts","./src/services/collaboration/session.ts","./src/services/collaboration/storebridge.test.ts","./src/services/collaboration/storebridge.ts","./src/services/collaboration/transport.test.ts","./src/services/collaboration/transport.ts","./src/services/collaboration/transportfactory.test.ts","./src/services/collaboration/transportfactory.ts","./src/services/collaboration/types.ts","./src/services/collaboration/versioning.test.ts","./src/services/collaboration/versioning.ts","./src/services/collaboration/yjspeertransport.test.ts","./src/services/collaboration/yjspeertransport.ts","./src/services/diagramdiff/diffengine.ts","./src/services/elk-layout/determinism.ts","./src/services/elk-layout/options.ts","./src/services/elk-layout/types.ts","./src/services/export/cinematicbuildplan.test.ts","./src/services/export/cinematicbuildplan.ts","./src/services/export/cinematicexporttheme.test.ts","./src/services/export/cinematicexporttheme.ts","./src/services/export/cinematicrenderstate.test.ts","./src/services/export/cinematicrenderstate.ts","./src/services/export/formatting.ts","./src/services/export/mermaidbuilder.test.ts","./src/services/export/mermaidbuilder.ts","./src/services/export/pdfdocument.test.ts","./src/services/export/pdfdocument.ts","./src/services/export/plantumlbuilder.ts","./src/services/figma/edgehelpers.ts","./src/services/figma/iconhelpers.ts","./src/services/figma/nodelayers.ts","./src/services/figma/themehelpers.ts","./src/services/figmaimport/figmaapiclient.ts","./src/services/infrasync/dockercomposeparser.test.ts","./src/services/infrasync/dockercomposeparser.ts","./src/services/infrasync/infratodsl.test.ts","./src/services/infrasync/infratodsl.ts","./src/services/infrasync/kubernetesparser.test.ts","./src/services/infrasync/kubernetesparser.ts","./src/services/infrasync/terraformstateparser.test.ts","./src/services/infrasync/terraformstateparser.ts","./src/services/infrasync/types.ts","./src/services/mermaid/detectdiagramtype.test.ts","./src/services/mermaid/detectdiagramtype.ts","./src/services/mermaid/diagnosticformatting.test.ts","./src/services/mermaid/diagnosticformatting.ts","./src/services/mermaid/parsemermaidbytype.test.ts","./src/services/mermaid/parsemermaidbytype.ts","./src/services/mermaid/strictmodediagnosticspresentation.test.ts","./src/services/mermaid/strictmodediagnosticspresentation.ts","./src/services/mermaid/strictmodeguidance.test.ts","./src/services/mermaid/strictmodeguidance.ts","./src/services/mermaid/strictmodeuxregression.test.ts","./src/services/offline/registerappshellserviceworker.test.ts","./src/services/offline/registerappshellserviceworker.ts","./src/services/onboarding/config.ts","./src/services/onboarding/events.test.ts","./src/services/onboarding/events.ts","./src/services/playback/contracts.test.ts","./src/services/playback/contracts.ts","./src/services/playback/model.test.ts","./src/services/playback/model.ts","./src/services/playback/studio.test.ts","./src/services/playback/studio.ts","./src/services/sequence/sequencemessage.test.ts","./src/services/sequence/sequencemessage.ts","./src/services/shapelibrary/bootstrap.test.ts","./src/services/shapelibrary/bootstrap.ts","./src/services/shapelibrary/ingestionpipeline.test.ts","./src/services/shapelibrary/ingestionpipeline.ts","./src/services/shapelibrary/manifestvalidation.test.ts","./src/services/shapelibrary/manifestvalidation.ts","./src/services/shapelibrary/providercatalog.test.ts","./src/services/shapelibrary/providercatalog.ts","./src/services/shapelibrary/registry.test.ts","./src/services/shapelibrary/registry.ts","./src/services/shapelibrary/starterpacks.ts","./src/services/shapelibrary/types.ts","./src/services/storage/flowdocumentmodel.test.ts","./src/services/storage/flowdocumentmodel.ts","./src/services/storage/flowpersiststorage.test.ts","./src/services/storage/flowpersiststorage.ts","./src/services/storage/indexeddbschema.test.ts","./src/services/storage/indexeddbschema.ts","./src/services/storage/indexeddbstatestorage.test.ts","./src/services/storage/indexeddbstatestorage.ts","./src/services/storage/localfirstrepository.ts","./src/services/storage/localfirstruntime.ts","./src/services/storage/persisteddocumentadapters.test.ts","./src/services/storage/persisteddocumentadapters.ts","./src/services/storage/persistencetypes.ts","./src/services/storage/snapshotstorage.test.ts","./src/services/storage/snapshotstorage.ts","./src/services/storage/storagetelemetry.test.ts","./src/services/storage/storagetelemetry.ts","./src/services/storage/storagetelemetrysink.test.ts","./src/services/storage/storagetelemetrysink.ts","./src/services/storage/uilocalstorage.test.ts","./src/services/storage/uilocalstorage.ts","./src/services/templatelibrary/registry.test.ts","./src/services/templatelibrary/registry.ts","./src/services/templatelibrary/startertemplates.assets.test.ts","./src/services/templatelibrary/startertemplates.test.ts","./src/services/templatelibrary/startertemplates.ts","./src/services/templatelibrary/types.ts","./src/store/aisettings.test.ts","./src/store/aisettings.ts","./src/store/aisettingspersistence.ts","./src/store/canvashooks.ts","./src/store/defaults.ts","./src/store/designsystemhooks.ts","./src/store/documenthooks.ts","./src/store/documentstatesync.test.ts","./src/store/documentstatesync.ts","./src/store/editorpagehooks.ts","./src/store/historyhooks.ts","./src/store/persistence.test.ts","./src/store/persistence.ts","./src/store/selectionhooks.ts","./src/store/tabhooks.ts","./src/store/types.ts","./src/store/viewhooks.ts","./src/store/workspacedocumentmodel.test.ts","./src/store/workspacedocumentmodel.ts","./src/store/actions/createaiandselectionactions.ts","./src/store/actions/createcanvasactions.ts","./src/store/actions/createdesignsystemactions.ts","./src/store/actions/createhistoryactions.ts","./src/store/actions/createlayeractions.ts","./src/store/actions/createtabactions.ts","./src/store/actions/createviewactions.ts","./src/store/actions/createworkspacedocumentactions.ts"],"version":"5.8.3"} \ No newline at end of file diff --git a/web/package.json b/web/package.json index 1965109f..ff4d53ef 100644 --- a/web/package.json +++ b/web/package.json @@ -14,6 +14,7 @@ "@tailwindcss/vite": "^4.2.1", "astro": "^5.7.0", "lucide-react": "^0.469.0", + "posthog-js": "^1.347.2", "react": "^18.3.0", "react-dom": "^18.3.0", "sharp": "^0.34.1", diff --git a/web/src/components/LandingAnalytics.astro b/web/src/components/LandingAnalytics.astro new file mode 100644 index 00000000..2d4c953e --- /dev/null +++ b/web/src/components/LandingAnalytics.astro @@ -0,0 +1,33 @@ +--- +--- + + diff --git a/web/src/components/Layout.astro b/web/src/components/Layout.astro index 8f9cbf34..6caeeb01 100644 --- a/web/src/components/Layout.astro +++ b/web/src/components/Layout.astro @@ -1,5 +1,6 @@ --- import '../styles/global.css'; +import LandingAnalytics from './LandingAnalytics.astro'; interface Props { title: string; @@ -74,6 +75,7 @@ const schemas = [...baseSchemas, ...extraSchemas]; + diff --git a/web/src/components/landing/FinalCTASection.tsx b/web/src/components/landing/FinalCTASection.tsx index 9c153d51..d19d0b05 100644 --- a/web/src/components/landing/FinalCTASection.tsx +++ b/web/src/components/landing/FinalCTASection.tsx @@ -63,6 +63,9 @@ export function FinalCTASection({ onLaunch }: FinalCTASectionProps): React.React size="xl" className="transform hover:-translate-y-1 transition-all active:scale-95" onClick={onLaunch} + data-analytics-event="landing_open_app_clicked" + data-analytics-placement="final-cta" + data-analytics-target="app" > Get Started Now @@ -117,6 +120,9 @@ export function FinalCTASection({ onLaunch }: FinalCTASectionProps): React.React
@@ -164,6 +173,9 @@ export function Navbar({ isScrolled, onLaunch }: NavbarProps): React.ReactElemen size="lg" className="h-14 w-full text-base shadow-none" onClick={handleMobileLaunch} + data-analytics-event="landing_open_app_clicked" + data-analytics-placement="mobile-menu" + data-analytics-target="app" > Get Started @@ -172,6 +184,9 @@ export function Navbar({ isScrolled, onLaunch }: NavbarProps): React.ReactElemen variant="secondary" className="h-14 w-full text-base" onClick={openGithub} + data-analytics-event="landing_github_clicked" + data-analytics-placement="mobile-menu" + data-analytics-target="github" > View on GitHub From 3f44ef5aa32fd775f6f678ff99a737de613de95c Mon Sep 17 00:00:00 2001 From: Varun Date: Sun, 29 Mar 2026 16:30:07 +0530 Subject: [PATCH 2/7] Finalize launch hardening and code-to-architecture updates --- README.md | 253 +- _headers | 2 +- assets/third-party-icons/developer/SOURCE.md | 10 + .../developer/processed/Backend/avajs.svg | 1 + .../developer/processed/Backend/bunjs.svg | 1 + .../developer/processed/Backend/convex.svg | 1 + .../processed/Backend/deno-fresh.svg | 1 + .../developer/processed/Backend/deno.svg | 1 + .../developer/processed/Backend/doctrine.svg | 1 + .../developer/processed/Backend/grafbase.svg | 1 + .../developer/processed/Backend/graphql.svg | 1 + .../developer/processed/Backend/i18next.svg | 1 + .../developer/processed/Backend/nestjs.svg | 1 + .../developer/processed/Backend/nodejs.svg | 1 + .../developer/processed/Backend/spring.svg | 1 + .../processed/Backend/symfony-dark.svg | 1 + .../processed/Backend/symfony-light.svg | 1 + .../developer/processed/Backend/tRPC.svg | 1 + .../developer/processed/Backend/zod.svg | 1 + .../developer/processed/Browser/chrome.svg | 1 + .../developer/processed/Browser/edge.svg | 1 + .../developer/processed/Browser/firefox.svg | 1 + .../developer/processed/Browser/safari.svg | 1 + .../developer/processed/Browser/vivaldi.svg | 1 + .../developer/processed/Companies/meta.svg | 1 + .../processed/Companies/microsoft.svg | 1 + .../developer/processed/Companies/mozilla.svg | 1 + .../processed/Database/clickhouse.svg | 1 + .../developer/processed/Database/firebase.svg | 1 + .../developer/processed/Database/kibana.svg | 1 + .../developer/processed/Database/mariadb.svg | 1 + .../Database/microsoft-sql-server-2.svg | 1 + .../Database/microsoft-sql-server.svg | 1 + .../developer/processed/Database/mongodb.svg | 1 + .../developer/processed/Database/mysql.svg | 1 + .../developer/processed/Database/oracle.svg | 1 + .../processed/Database/postgresql.svg | 1 + .../developer/processed/Database/presto.svg | 1 + .../developer/processed/Database/redis.svg | 1 + .../developer/processed/Database/supabase.svg | 1 + .../developer/processed/Design/figma.svg | 1 + .../developer/processed/Design/indesign.svg | 1 + .../developer/processed/Design/miro.svg | 1 + .../developer/processed/Design/photoshop.svg | 1 + .../developer/processed/Design/sketch.svg | 1 + .../developer/processed/Design/sketch2.svg | 1 + .../developer/processed/DevOps-AI-ML/aws.svg | 1 + .../processed/DevOps-AI-ML/bitbucket.svg | 1 + .../processed/DevOps-AI-ML/cloudflare.svg | 1 + .../processed/DevOps-AI-ML/codefresh.svg | 1 + .../processed/DevOps-AI-ML/copilot.svg | 1 + .../processed/DevOps-AI-ML/cypress.svg | 1 + .../DevOps-AI-ML/developer-icons.svg | 1 + .../processed/DevOps-AI-ML/digitalocean.svg | 1 + .../processed/DevOps-AI-ML/docker.svg | 1 + .../developer/processed/DevOps-AI-ML/ec2.svg | 1 + .../processed/DevOps-AI-ML/elastic.svg | 1 + .../developer/processed/DevOps-AI-ML/git.svg | 1 + .../processed/DevOps-AI-ML/github-copilot.svg | 1 + .../processed/DevOps-AI-ML/github-dark.svg | 1 + .../processed/DevOps-AI-ML/github-light.svg | 1 + .../processed/DevOps-AI-ML/gitlab.svg | 1 + .../processed/DevOps-AI-ML/google-cloud.svg | 1 + .../processed/DevOps-AI-ML/heroku.svg | 1 + .../processed/DevOps-AI-ML/hugging-face.svg | 1 + .../developer/processed/DevOps-AI-ML/k6.svg | 1 + .../processed/DevOps-AI-ML/kubernetes.svg | 1 + .../processed/DevOps-AI-ML/linux.svg | 1 + .../processed/DevOps-AI-ML/netlify.svg | 1 + .../processed/DevOps-AI-ML/netlify2.svg | 1 + .../processed/DevOps-AI-ML/npm-wordmark.svg | 1 + .../developer/processed/DevOps-AI-ML/npm.svg | 1 + .../developer/processed/DevOps-AI-ML/nx.svg | 1 + .../processed/DevOps-AI-ML/openai.svg | 1 + .../DevOps-AI-ML/pnpm-dark-wordmark.svg | 1 + .../processed/DevOps-AI-ML/pnpm-dark.svg | 1 + .../DevOps-AI-ML/pnpm-light-wordmark.svg | 1 + .../processed/DevOps-AI-ML/pnpm-light.svg | 1 + .../DevOps-AI-ML/pulumi-dark-wordmark.svg | 1 + .../DevOps-AI-ML/pulumi-light-wordmark.svg | 1 + .../processed/DevOps-AI-ML/pulumi.svg | 1 + .../processed/DevOps-AI-ML/railway.svg | 1 + .../processed/DevOps-AI-ML/tensorflow.svg | 1 + .../DevOps-AI-ML/vercel-dark-wordmark.svg | 1 + .../processed/DevOps-AI-ML/vercel-dark.svg | 1 + .../DevOps-AI-ML/vercel-light-wordmark.svg | 1 + .../processed/DevOps-AI-ML/vercel-light.svg | 1 + .../processed/DevOps-AI-ML/vitest.svg | 1 + .../developer/processed/Frontend/angular.svg | 1 + .../developer/processed/Frontend/astro.svg | 1 + .../developer/processed/Frontend/chakraui.svg | 1 + .../processed/Frontend/framer-dark.svg | 1 + .../processed/Frontend/framer-light.svg | 1 + .../developer/processed/Frontend/gatsby.svg | 1 + .../processed/Frontend/headlessui.svg | 1 + .../developer/processed/Frontend/jquery.svg | 1 + .../processed/Frontend/materialui.svg | 1 + .../processed/Frontend/nextjs-wordmark.svg | 1 + .../developer/processed/Frontend/nextjs.svg | 1 + .../developer/processed/Frontend/nuxtjs.svg | 1 + .../developer/processed/Frontend/preact.svg | 1 + .../processed/Frontend/react-query.svg | 1 + .../developer/processed/Frontend/reactjs.svg | 1 + .../processed/Frontend/reactrouter.svg | 1 + .../Frontend/remix-dark-wordmark.svg | 1 + .../processed/Frontend/remix-dark.svg | 1 + .../Frontend/remix-light-wordmark.svg | 1 + .../processed/Frontend/remix-light.svg | 1 + .../developer/processed/Frontend/sass.svg | 1 + .../developer/processed/Frontend/shadcnui.svg | 1 + .../developer/processed/Frontend/sveltejs.svg | 1 + .../processed/Frontend/tailwindcss.svg | 1 + .../processed/Frontend/threejs-dark.svg | 1 + .../processed/Frontend/threejs-light.svg | 1 + .../developer/processed/Frontend/vitejs.svg | 1 + .../developer/processed/Frontend/vuejs.svg | 1 + .../developer/processed/Frontend/webpack.svg | 1 + .../developer/processed/Languages/bash.svg | 1 + .../developer/processed/Languages/cakephp.svg | 1 + .../developer/processed/Languages/dlang.svg | 1 + .../developer/processed/Languages/elixir.svg | 1 + .../developer/processed/Languages/erlang.svg | 1 + .../developer/processed/Languages/haskell.svg | 1 + .../developer/processed/Languages/java.svg | 1 + .../processed/Languages/javascript.svg | 1 + .../developer/processed/Languages/json.svg | 1 + .../developer/processed/Languages/kotlin.svg | 1 + .../processed/Languages/markdown.svg | 1 + .../developer/processed/Languages/nim.svg | 1 + .../developer/processed/Languages/php.svg | 1 + .../processed/Languages/powershell.svg | 1 + .../developer/processed/Languages/python.svg | 1 + .../developer/processed/Languages/ruby.svg | 1 + .../processed/Languages/rust-dark.svg | 1 + .../processed/Languages/rust-light.svg | 1 + .../developer/processed/Languages/scala.svg | 1 + .../processed/Languages/solidity.svg | 1 + .../developer/processed/Languages/swift.svg | 1 + .../processed/Languages/typescript.svg | 1 + .../developer/processed/Media/bluesky.svg | 1 + .../developer/processed/Media/cloudinary.svg | 1 + .../developer/processed/Media/hotjar.svg | 1 + .../developer/processed/Media/instagram.svg | 1 + .../developer/processed/Media/mastodon.svg | 1 + .../developer/processed/Media/redux-saga.svg | 1 + .../developer/processed/Media/stream.svg | 1 + .../developer/processed/Media/telegram.svg | 1 + .../processed/Media/threads-dark.svg | 1 + .../processed/Media/threads-light.svg | 1 + .../developer/processed/Media/vk.svg | 1 + .../developer/processed/Media/x-dark.svg | 1 + .../developer/processed/Media/x-light.svg | 1 + .../processed/Media/youtube-wordmark.svg | 1 + .../developer/processed/Media/youtube.svg | 1 + .../processed/Native-App/android.svg | 1 + .../processed/Native-App/flutter.svg | 1 + .../processed/Others/ansible-wordmark.svg | 1 + .../developer/processed/Others/ansible.svg | 1 + .../processed/Others/anthropic-basic-dark.svg | 1 + .../Others/anthropic-basic-light.svg | 1 + .../developer/processed/Others/anthropic.svg | 1 + .../developer/processed/Others/apache.svg | 1 + .../developer/processed/Others/apple-dark.svg | 1 + .../processed/Others/apple-light.svg | 1 + .../developer/processed/Others/appwrite.svg | 1 + .../developer/processed/Others/arc.svg | 1 + .../developer/processed/Others/atlassian.svg | 1 + .../developer/processed/Others/atom.svg | 1 + .../developer/processed/Others/auth0.svg | 1 + .../developer/processed/Others/axiom.svg | 1 + .../developer/processed/Others/axure.svg | 1 + .../developer/processed/Others/azure.svg | 1 + .../developer/processed/Others/babel.svg | 1 + .../developer/processed/Others/backbonejs.svg | 1 + .../developer/processed/Others/bard.svg | 1 + .../developer/processed/Others/bing.svg | 1 + .../developer/processed/Others/biome.svg | 1 + .../developer/processed/Others/bitnami.svg | 1 + .../processed/Others/blueprintjs.svg | 1 + .../developer/processed/Others/bootstrap4.svg | 1 + .../developer/processed/Others/bootstrap5.svg | 1 + .../developer/processed/Others/brave.svg | 1 + .../developer/processed/Others/bulmaui.svg | 1 + .../processed/Others/c-plus-plus.svg | 1 + .../developer/processed/Others/c-sharp.svg | 1 + .../developer/processed/Others/c.svg | 1 + .../developer/processed/Others/canva.svg | 1 + .../processed/Others/cassandradb.svg | 1 + .../developer/processed/Others/chatgpt.svg | 1 + .../developer/processed/Others/chromium.svg | 1 + .../developer/processed/Others/circleci.svg | 1 + .../developer/processed/Others/claude-ai.svg | 1 + .../developer/processed/Others/clerk.svg | 1 + .../developer/processed/Others/clojure.svg | 1 + .../processed/Others/codeigniter.svg | 1 + .../developer/processed/Others/crystal.svg | 1 + .../developer/processed/Others/css.svg | 1 + .../developer/processed/Others/css3.svg | 1 + .../developer/processed/Others/dart.svg | 1 + .../developer/processed/Others/datadog.svg | 1 + .../processed/Others/deepseek-wordmark.svg | 1 + .../developer/processed/Others/deepseek.svg | 1 + .../developer/processed/Others/discord.svg | 1 + .../developer/processed/Others/django.svg | 1 + .../developer/processed/Others/docusaurus.svg | 1 + .../developer/processed/Others/dovetail.svg | 1 + .../developer/processed/Others/electron.svg | 1 + .../developer/processed/Others/elementui.svg | 1 + .../developer/processed/Others/ember.svg | 1 + .../developer/processed/Others/esbuild.svg | 1 + .../developer/processed/Others/eslint.svg | 1 + .../processed/Others/expressjs-dark.svg | 1 + .../processed/Others/expressjs-light.svg | 1 + .../developer/processed/Others/facebook.svg | 1 + .../developer/processed/Others/fast-api.svg | 1 + .../developer/processed/Others/faunadb.svg | 1 + .../developer/processed/Others/flask-dark.svg | 1 + .../processed/Others/flask-light.svg | 1 + .../developer/processed/Others/flyio.svg | 1 + .../developer/processed/Others/go.svg | 1 + .../processed/Others/google-wordmark.svg | 1 + .../developer/processed/Others/google.svg | 1 + .../developer/processed/Others/grafana.svg | 1 + .../developer/processed/Others/graphite.svg | 1 + .../developer/processed/Others/gridsome.svg | 1 + .../developer/processed/Others/gruntjs.svg | 1 + .../developer/processed/Others/gulp.svg | 1 + .../developer/processed/Others/hashnode.svg | 1 + .../developer/processed/Others/hexo.svg | 1 + .../developer/processed/Others/hhvm.svg | 1 + .../developer/processed/Others/homebrew.svg | 1 + .../developer/processed/Others/html5.svg | 1 + .../developer/processed/Others/hyper2.svg | 1 + .../developer/processed/Others/insomnia.svg | 1 + .../processed/Others/internet-explorer.svg | 1 + .../developer/processed/Others/invision.svg | 1 + .../developer/processed/Others/ionic.svg | 1 + .../developer/processed/Others/jamstack.svg | 1 + .../developer/processed/Others/jenkins.svg | 1 + .../developer/processed/Others/jest.svg | 1 + .../developer/processed/Others/jira.svg | 1 + .../developer/processed/Others/jslint.svg | 1 + .../developer/processed/Others/kafka.svg | 1 + .../developer/processed/Others/laravel.svg | 1 + .../developer/processed/Others/lerna-dark.svg | 1 + .../processed/Others/lerna-light.svg | 1 + .../developer/processed/Others/less.svg | 1 + .../developer/processed/Others/lightroom.svg | 1 + .../developer/processed/Others/linkedin.svg | 1 + .../developer/processed/Others/lit.svg | 1 + .../developer/processed/Others/liveblocks.svg | 1 + .../developer/processed/Others/logrocket.svg | 1 + .../developer/processed/Others/lua.svg | 1 + .../developer/processed/Others/lunacy.svg | 1 + .../developer/processed/Others/marionette.svg | 1 + .../developer/processed/Others/messenger.svg | 1 + .../developer/processed/Others/mochajs.svg | 1 + .../developer/processed/Others/neovim.svg | 1 + .../developer/processed/Others/numpy.svg | 1 + .../developer/processed/Others/ocaml.svg | 1 + .../developer/processed/Others/opera.svg | 1 + .../developer/processed/Others/pandacss.svg | 1 + .../developer/processed/Others/pinia.svg | 1 + .../developer/processed/Others/pinterest.svg | 1 + .../developer/processed/Others/pixijs.svg | 1 + .../developer/processed/Others/playwright.svg | 1 + .../developer/processed/Others/postman.svg | 1 + .../developer/processed/Others/prettier.svg | 1 + .../developer/processed/Others/prisma.svg | 1 + .../developer/processed/Others/pugjs.svg | 1 + .../developer/processed/Others/pwa.svg | 1 + .../developer/processed/Others/pytorch.svg | 1 + .../developer/processed/Others/pytorch3d.svg | 1 + .../developer/processed/Others/qwik.svg | 1 + .../developer/processed/Others/r.svg | 1 + .../developer/processed/Others/radixui.svg | 1 + .../developer/processed/Others/rails.svg | 1 + .../processed/Others/reddit-wordmark.svg | 1 + .../developer/processed/Others/reddit.svg | 1 + .../developer/processed/Others/redhat.svg | 1 + .../developer/processed/Others/redux.svg | 1 + .../developer/processed/Others/render.svg | 1 + .../developer/processed/Others/resend.svg | 1 + .../developer/processed/Others/rollup.svg | 1 + .../developer/processed/Others/semanticui.svg | 1 + .../developer/processed/Others/serverless.svg | 1 + .../developer/processed/Others/shopware.svg | 1 + .../developer/processed/Others/skype.svg | 1 + .../developer/processed/Others/slack.svg | 1 + .../developer/processed/Others/solidjs.svg | 1 + .../developer/processed/Others/storyblok.svg | 1 + .../developer/processed/Others/storybook.svg | 1 + .../developer/processed/Others/stylelint.svg | 1 + .../developer/processed/Others/sublime.svg | 1 + .../developer/processed/Others/swagger.svg | 1 + .../developer/processed/Others/terraform.svg | 1 + .../developer/processed/Others/tiktok.svg | 1 + .../developer/processed/Others/tinyhttp.svg | 1 + .../developer/processed/Others/tor.svg | 1 + .../developer/processed/Others/twitter.svg | 1 + .../developer/processed/Others/ubuntu.svg | 1 + .../developer/processed/Others/unjs.svg | 1 + .../processed/Others/upwork-basic.svg | 1 + .../processed/Others/upwork-wordmark.svg | 1 + .../developer/processed/Others/upwork.svg | 1 + .../developer/processed/Others/vagrant.svg | 1 + .../developer/processed/Others/vim.svg | 1 + .../processed/Others/visualbasic.svg | 1 + .../developer/processed/Others/vscode.svg | 1 + .../processed/Others/webassembly.svg | 1 + .../developer/processed/Others/webrtc.svg | 1 + .../developer/processed/Others/whatsapp.svg | 1 + .../developer/processed/Others/wordpress.svg | 1 + .../developer/processed/Others/xamarin.svg | 1 + .../developer/processed/Others/xd.svg | 1 + .../developer/processed/Others/yoga.svg | 1 + .../developer/processed/Others/zen.svg | 1 + .../processed/Productivity/gmail.svg | 1 + .../processed/Productivity/lokalise.svg | 1 + .../processed/Productivity/notion.svg | 1 + .../processed/Productivity/onedrive.svg | 1 + .../processed/Productivity/outlook.svg | 1 + .../developer-icons-v1.manifest.json | 3198 +++++++++++++++++ docs-site/.astro/data-store.json | 2 +- docs-site/astro.config.mjs | 2 +- docs-site/src/pages/index.astro | 195 +- docs-site/src/styles/custom.css | 291 +- e2e/smoke.spec.ts | 4 +- e2e/workflows.spec.ts | 122 +- package-lock.json | 569 +-- package.json | 5 +- public/locales/de/translation.json | 151 +- public/locales/en/translation.json | 76 +- public/locales/es/translation.json | 151 +- public/locales/fr/translation.json | 145 +- public/locales/ja/translation.json | 195 +- public/locales/tr/translation.json | 116 +- public/locales/zh/translation.json | 151 +- scripts/shape-pack/import-developer-icons.mjs | 119 + src/App.tsx | 121 +- src/app/routeState.ts | 12 + src/components/AnnotationNode.tsx | 82 +- src/components/CommandBar.tsx | 451 ++- src/components/ConnectMenu.tsx | 57 +- src/components/ContextMenu.tsx | 577 +-- src/components/CustomConnectionLine.tsx | 30 +- src/components/CustomNode.tsx | 675 ++-- src/components/DiagramViewer.tsx | 14 +- src/components/ErrorBoundary.tsx | 14 +- src/components/ExportMenu.tsx | 164 +- src/components/ExportMenuPanel.test.tsx | 41 +- src/components/ExportMenuPanel.tsx | 525 +-- src/components/FlowCanvas.tsx | 577 +-- src/components/FlowEditor.tsx | 154 +- src/components/FlowEditorEmptyState.tsx | 4 +- src/components/FlowEditorLayoutOverlay.tsx | 6 +- src/components/FlowEditorPanels.test.tsx | 3 + src/components/FlowEditorPanels.tsx | 551 +-- src/components/FlowTabs.tsx | 31 +- src/components/GroupNode.tsx | 215 +- src/components/HomePage.integration.test.tsx | 24 +- src/components/HomePage.tsx | 289 +- src/components/IconAssetNodeBody.tsx | 116 + src/components/ImageNode.tsx | 4 +- src/components/KeyboardShortcutsModal.tsx | 34 +- src/components/LanguageSelector.tsx | 35 +- src/components/NavigationControls.tsx | 10 +- src/components/NodeBadges.tsx | 37 + src/components/NodeChrome.tsx | 39 +- src/components/NodeQuickCreateButtons.tsx | 2 +- src/components/NodeShapeSVG.tsx | 55 + src/components/PlaybackControls.tsx | 18 +- src/components/PropertiesPanel.tsx | 201 +- src/components/RightRail.tsx | 14 +- src/components/SectionNode.tsx | 55 +- src/components/SettingsModal/AISettings.tsx | 131 +- .../SettingsModal/CanvasSettings.tsx | 278 ++ .../SettingsModal/GeneralSettings.tsx | 352 +- .../SettingsModal/SettingsModal.test.tsx | 11 + .../SettingsModal/SettingsModal.tsx | 255 +- .../SettingsModal/ShortcutsSettings.tsx | 88 +- .../ai/AdvancedEndpointSection.tsx | 16 +- .../SettingsModal/ai/CustomHeadersEditor.tsx | 14 +- .../SettingsModal/ai/PrivacySection.tsx | 6 +- .../SettingsModal/ai/ProviderSection.tsx | 14 +- src/components/SettingsModal/ai/Step.tsx | 2 +- src/components/ShareEmbedModal.tsx | 24 +- src/components/ShareModal.tsx | 26 +- src/components/SidebarShell.tsx | 168 +- src/components/SnapshotsPanel.tsx | 50 +- src/components/StudioAIPanel.tsx | 42 +- src/components/StudioCodePanel.tsx | 34 +- src/components/StudioPanel.tsx | 6 +- src/components/StudioPlaybackPanel.tsx | 48 +- src/components/SwimlaneNode.tsx | 173 +- src/components/TextNode.tsx | 234 +- src/components/ThemeToggle.tsx | 27 + src/components/Toolbar.tsx | 70 +- src/components/Tooltip.tsx | 310 +- src/components/TopNav.tsx | 2 +- src/components/WelcomeModal.tsx | 221 +- src/components/add-items/addItemRegistry.tsx | 382 ++ src/components/app/MobileWorkspaceGate.tsx | 10 +- src/components/app/RouteLoadingFallback.tsx | 4 +- .../architecture-lint/LintRulesPanel.tsx | 78 +- .../command-bar/AssetsView.test.tsx | 255 +- src/components/command-bar/AssetsView.tsx | 267 +- .../command-bar/DesignSystemEditor.tsx | 31 +- .../command-bar/DesignSystemView.tsx | 28 +- .../command-bar/FigmaImportPanel.tsx | 31 +- src/components/command-bar/ImportView.tsx | 1069 +++++- src/components/command-bar/LayersView.tsx | 223 +- src/components/command-bar/PagesView.tsx | 16 +- src/components/command-bar/RootView.tsx | 361 +- src/components/command-bar/SearchView.tsx | 26 +- src/components/command-bar/TemplatesView.tsx | 14 +- src/components/command-bar/ViewHeader.tsx | 6 +- src/components/command-bar/VisualsView.tsx | 56 +- .../command-bar/assetsViewConstants.ts | 13 +- src/components/command-bar/types.ts | 111 +- .../command-bar/useCloudAssetCatalog.ts | 13 +- .../useCommandBarCommands.test.tsx | 1 + .../command-bar/useCommandBarCommands.tsx | 18 +- .../custom-edge/CustomEdgeWrapper.tsx | 901 +++-- .../custom-nodes/ArchitectureNode.tsx | 140 +- src/components/custom-nodes/BrowserNode.tsx | 89 +- src/components/custom-nodes/ClassNode.tsx | 94 +- src/components/custom-nodes/EntityNode.tsx | 39 +- src/components/custom-nodes/JourneyNode.tsx | 108 +- src/components/custom-nodes/MindmapNode.tsx | 72 +- src/components/custom-nodes/MobileNode.tsx | 105 +- .../custom-nodes/SequenceNoteNode.tsx | 35 + .../custom-nodes/SequenceParticipantNode.tsx | 49 +- .../custom-nodes/StructuredNodeHandles.tsx | 19 +- .../custom-nodes/browserVariantRenderer.tsx | 241 +- .../custom-nodes/mobileVariantRenderer.tsx | 228 +- .../custom-nodes/variantConstants.ts | 7 + .../diagram-diff/DiffModeBanner.tsx | 10 +- .../flow-canvas/FlowCanvasOverlays.tsx | 214 +- .../flowCanvasReactFlowContracts.ts | 12 +- .../flow-canvas/flowCanvasTypes.test.ts | 1 + .../flow-canvas/flowCanvasTypes.tsx | 86 +- .../useFlowCanvasContextActions.ts | 241 +- .../flow-canvas/useFlowCanvasDragDrop.ts | 94 +- .../flow-canvas/useFlowCanvasMenus.ts | 3 + .../useFlowCanvasMenusAndActions.test.tsx | 87 + .../useFlowCanvasMenusAndActions.ts | 12 + .../useFlowCanvasViewState.test.ts | 27 + .../flow-canvas/useFlowCanvasViewState.ts | 48 +- .../CollaborationPresenceOverlay.tsx | 215 +- .../flow-editor/FlowEditorChrome.tsx | 472 +-- .../flow-editor/flowEditorChromeProps.ts | 608 ++-- src/components/flow-editor/panelProps.test.ts | 3 + src/components/flow-editor/panelProps.ts | 590 +-- .../flow-editor/useFlowEditorController.ts | 28 +- .../flow-editor/useFlowEditorScreenModel.ts | 607 ++-- .../useFlowEditorShellController.ts | 214 +- src/components/home/HomeDashboard.tsx | 206 +- src/components/home/HomeFlowDialogs.tsx | 36 +- src/components/home/HomeSettingsView.tsx | 72 +- src/components/home/HomeSidebar.tsx | 104 +- src/components/home/HomeTemplatesView.tsx | 325 ++ src/components/home/SidebarFooter.tsx | 110 + src/components/infra-sync/InfraSyncPanel.tsx | 26 +- src/components/nodeHelpers.test.ts | 45 + src/components/nodeHelpers.ts | 124 + src/components/properties/ColorPicker.tsx | 10 +- .../properties/CustomColorPopover.tsx | 10 +- .../DiagramNodePropertiesRouter.tsx | 27 +- src/components/properties/IconPicker.tsx | 12 +- .../properties/IconTilePickerPrimitives.tsx | 2 +- src/components/properties/ImageUpload.tsx | 6 +- .../properties/InspectorPrimitives.tsx | 18 +- .../properties/NodeActionButtons.tsx | 29 +- .../properties/NodeContentSection.tsx | 34 +- src/components/properties/NodeProperties.tsx | 725 ++-- .../properties/NodeTextStyleSection.tsx | 6 +- .../NodeWireframeVariantSection.tsx | 2 +- .../properties/PropertySliderRow.tsx | 4 +- src/components/properties/SegmentedChoice.tsx | 8 +- src/components/properties/SwatchPicker.tsx | 4 +- .../properties/edge/EdgeColorSection.tsx | 2 +- .../properties/edge/EdgeConditionSection.tsx | 2 +- .../properties/edge/EdgeStyleSection.tsx | 16 +- .../families/ArchitectureNodeProperties.tsx | 29 +- .../families/ArchitectureNodeSection.tsx | 217 +- .../families/ClassDiagramNodeProperties.tsx | 11 +- .../families/ClassMemberListEditor.tsx | 19 +- .../properties/families/ClassNodeSection.tsx | 2 +- .../families/ERDiagramNodeProperties.tsx | 11 +- .../families/EntityFieldListEditor.tsx | 25 +- .../families/JourneyNodeProperties.tsx | 7 +- .../families/MindmapNodeProperties.tsx | 39 +- .../families/SequenceNodeProperties.tsx | 13 +- .../families/StructuredTextListEditor.tsx | 17 +- src/components/properties/shared.ts | 3 + .../toolbar/ToolbarAddMenu.test.tsx | 86 + src/components/toolbar/ToolbarAddMenu.tsx | 104 +- .../toolbar/ToolbarAddMenuPanel.tsx | 91 +- .../toolbar/ToolbarModeControls.tsx | 10 +- src/components/toolbar/toolbarButtonStyles.ts | 8 +- src/components/top-nav/TopNavActions.tsx | 15 +- src/components/top-nav/TopNavBrand.tsx | 2 +- src/components/top-nav/TopNavMenu.tsx | 9 +- src/components/top-nav/TopNavMenuPanel.tsx | 49 +- src/components/top-nav/useTopNavState.ts | 8 +- src/components/ui/Button.tsx | 106 +- src/components/ui/CollapsibleSection.tsx | 83 +- src/components/ui/Input.tsx | 4 +- src/components/ui/Label.tsx | 2 +- src/components/ui/SearchField.tsx | 6 +- src/components/ui/SegmentedTabs.tsx | 121 +- src/components/ui/Select.tsx | 22 +- src/components/ui/SidebarItem.tsx | 126 +- src/components/ui/Slider.tsx | 8 +- src/components/ui/Switch.tsx | 55 +- src/components/ui/Textarea.tsx | 8 +- src/components/ui/ToastContext.tsx | 185 +- src/components/ui/editorFieldStyles.ts | 6 +- src/components/useExportMenu.test.tsx | 64 + src/components/useExportMenu.ts | 59 +- src/context/ThemeContext.tsx | 60 + src/diagram-types/sequence/plugin.ts | 168 +- src/hooks/ai-generation/codeToArchitecture.ts | 24 +- src/hooks/ai-generation/codebaseAnalyzer.ts | 259 ++ .../ai-generation/codebaseParser.test.ts | 219 ++ src/hooks/ai-generation/codebaseParser.ts | 369 ++ src/hooks/ai-generation/sqlParser.test.ts | 53 +- src/hooks/ai-generation/sqlParser.ts | 294 +- src/hooks/ai-generation/sqlToErd.ts | 47 +- src/hooks/flow-export/exportCapture.ts | 45 +- .../useNodeDragOperations.test.ts | 16 +- .../node-operations/useNodeDragOperations.ts | 21 +- .../node-operations/useNodeOperationAdders.ts | 630 ++-- src/hooks/node-operations/utils.test.ts | 213 +- src/hooks/node-operations/utils.ts | 1160 ++++-- src/hooks/useAIGeneration.ts | 333 +- src/hooks/useAssetCatalog.ts | 131 + src/hooks/useFlowEditorActions.test.ts | 4 + src/hooks/useFlowEditorActions.ts | 12 +- src/hooks/useFlowExport.ts | 380 +- src/hooks/useInlineNodeTextEdit.ts | 23 +- src/hooks/useKeyboardShortcuts.test.ts | 26 + src/hooks/useKeyboardShortcuts.ts | 36 +- src/hooks/useNodeOperations.ts | 62 +- src/hooks/useProviderShapePreview.ts | 36 + src/hooks/useShiftHeld.ts | 25 + src/i18n/locales/de/translation.json | 134 +- src/i18n/locales/en/translation.json | 49 +- src/i18n/locales/es/translation.json | 134 +- src/i18n/locales/fr/translation.json | 128 +- src/i18n/locales/ja/translation.json | 178 +- src/i18n/locales/tr/translation.json | 93 +- src/i18n/locales/zh/translation.json | 134 +- src/index.css | 170 +- src/index.tsx | 11 +- src/lib/fuzzyMatch.ts | 36 + src/lib/types.ts | 29 +- src/lib/xssSafety.test.tsx | 85 + src/services/aiService.test.ts | 120 +- src/services/assetCatalog.test.ts | 32 + src/services/assetCatalog.ts | 124 + src/services/assetPresentation.ts | 30 + src/services/domainLibrary.ts | 2 +- src/services/elk-layout/options.ts | 71 +- src/services/elkLayout.test.ts | 39 + src/services/elkLayout.ts | 65 +- src/services/export/cinematicBuildPlan.ts | 43 +- src/services/export/cinematicRenderState.ts | 78 +- src/services/export/mermaidBuilder.ts | 251 +- src/services/gifEncoder.ts | 147 +- src/services/githubFetcher.test.ts | 35 + src/services/githubFetcher.ts | 169 + .../infraSync/dockerComposeParser.test.ts | 69 +- src/services/infraSync/dockerComposeParser.ts | 430 +-- .../infraSync/kubernetesParser.test.ts | 106 +- src/services/infraSync/kubernetesParser.ts | 426 +-- .../infraSync/terraformStateParser.test.ts | 187 +- .../infraSync/terraformStateParser.ts | 484 +-- .../shapeLibrary/providerCatalog.test.ts | 9 + src/services/shapeLibrary/providerCatalog.ts | 1 + src/services/zipExtractor.ts | 31 + src/store.test.ts | 32 + .../actions/createAIAndSelectionActions.ts | 2 + src/store/actions/createCanvasActions.ts | 156 +- src/store/actions/createTabActions.ts | 639 ++-- .../actions/createWorkspaceDocumentActions.ts | 36 +- src/store/actions/syncTabNodesEdges.ts | 12 + src/store/documentHooks.ts | 8 +- src/store/documentStateSync.test.ts | 17 + src/store/documentStateSync.ts | 74 +- src/store/persistence.test.ts | 31 + src/store/persistence.ts | 21 +- src/store/selectionHooks.ts | 6 +- src/store/types.ts | 2 + src/store/workspaceDocumentModel.ts | 195 +- tsconfig.tsbuildinfo | 2 +- vite.config.ts | 18 +- web/.astro/types.d.ts | 1 - 599 files changed, 24308 insertions(+), 11942 deletions(-) create mode 100644 assets/third-party-icons/developer/SOURCE.md create mode 100644 assets/third-party-icons/developer/processed/Backend/avajs.svg create mode 100644 assets/third-party-icons/developer/processed/Backend/bunjs.svg create mode 100644 assets/third-party-icons/developer/processed/Backend/convex.svg create mode 100644 assets/third-party-icons/developer/processed/Backend/deno-fresh.svg create mode 100644 assets/third-party-icons/developer/processed/Backend/deno.svg create mode 100644 assets/third-party-icons/developer/processed/Backend/doctrine.svg create mode 100644 assets/third-party-icons/developer/processed/Backend/grafbase.svg create mode 100644 assets/third-party-icons/developer/processed/Backend/graphql.svg create mode 100644 assets/third-party-icons/developer/processed/Backend/i18next.svg create mode 100644 assets/third-party-icons/developer/processed/Backend/nestjs.svg create mode 100644 assets/third-party-icons/developer/processed/Backend/nodejs.svg create mode 100644 assets/third-party-icons/developer/processed/Backend/spring.svg create mode 100644 assets/third-party-icons/developer/processed/Backend/symfony-dark.svg create mode 100644 assets/third-party-icons/developer/processed/Backend/symfony-light.svg create mode 100644 assets/third-party-icons/developer/processed/Backend/tRPC.svg create mode 100644 assets/third-party-icons/developer/processed/Backend/zod.svg create mode 100644 assets/third-party-icons/developer/processed/Browser/chrome.svg create mode 100644 assets/third-party-icons/developer/processed/Browser/edge.svg create mode 100644 assets/third-party-icons/developer/processed/Browser/firefox.svg create mode 100644 assets/third-party-icons/developer/processed/Browser/safari.svg create mode 100644 assets/third-party-icons/developer/processed/Browser/vivaldi.svg create mode 100644 assets/third-party-icons/developer/processed/Companies/meta.svg create mode 100644 assets/third-party-icons/developer/processed/Companies/microsoft.svg create mode 100644 assets/third-party-icons/developer/processed/Companies/mozilla.svg create mode 100644 assets/third-party-icons/developer/processed/Database/clickhouse.svg create mode 100644 assets/third-party-icons/developer/processed/Database/firebase.svg create mode 100644 assets/third-party-icons/developer/processed/Database/kibana.svg create mode 100644 assets/third-party-icons/developer/processed/Database/mariadb.svg create mode 100644 assets/third-party-icons/developer/processed/Database/microsoft-sql-server-2.svg create mode 100644 assets/third-party-icons/developer/processed/Database/microsoft-sql-server.svg create mode 100644 assets/third-party-icons/developer/processed/Database/mongodb.svg create mode 100644 assets/third-party-icons/developer/processed/Database/mysql.svg create mode 100644 assets/third-party-icons/developer/processed/Database/oracle.svg create mode 100644 assets/third-party-icons/developer/processed/Database/postgresql.svg create mode 100644 assets/third-party-icons/developer/processed/Database/presto.svg create mode 100644 assets/third-party-icons/developer/processed/Database/redis.svg create mode 100644 assets/third-party-icons/developer/processed/Database/supabase.svg create mode 100644 assets/third-party-icons/developer/processed/Design/figma.svg create mode 100644 assets/third-party-icons/developer/processed/Design/indesign.svg create mode 100644 assets/third-party-icons/developer/processed/Design/miro.svg create mode 100644 assets/third-party-icons/developer/processed/Design/photoshop.svg create mode 100644 assets/third-party-icons/developer/processed/Design/sketch.svg create mode 100644 assets/third-party-icons/developer/processed/Design/sketch2.svg create mode 100644 assets/third-party-icons/developer/processed/DevOps-AI-ML/aws.svg create mode 100644 assets/third-party-icons/developer/processed/DevOps-AI-ML/bitbucket.svg create mode 100644 assets/third-party-icons/developer/processed/DevOps-AI-ML/cloudflare.svg create mode 100644 assets/third-party-icons/developer/processed/DevOps-AI-ML/codefresh.svg create mode 100644 assets/third-party-icons/developer/processed/DevOps-AI-ML/copilot.svg create mode 100644 assets/third-party-icons/developer/processed/DevOps-AI-ML/cypress.svg create mode 100644 assets/third-party-icons/developer/processed/DevOps-AI-ML/developer-icons.svg create mode 100644 assets/third-party-icons/developer/processed/DevOps-AI-ML/digitalocean.svg create mode 100644 assets/third-party-icons/developer/processed/DevOps-AI-ML/docker.svg create mode 100644 assets/third-party-icons/developer/processed/DevOps-AI-ML/ec2.svg create mode 100644 assets/third-party-icons/developer/processed/DevOps-AI-ML/elastic.svg create mode 100644 assets/third-party-icons/developer/processed/DevOps-AI-ML/git.svg create mode 100644 assets/third-party-icons/developer/processed/DevOps-AI-ML/github-copilot.svg create mode 100644 assets/third-party-icons/developer/processed/DevOps-AI-ML/github-dark.svg create mode 100644 assets/third-party-icons/developer/processed/DevOps-AI-ML/github-light.svg create mode 100644 assets/third-party-icons/developer/processed/DevOps-AI-ML/gitlab.svg create mode 100644 assets/third-party-icons/developer/processed/DevOps-AI-ML/google-cloud.svg create mode 100644 assets/third-party-icons/developer/processed/DevOps-AI-ML/heroku.svg create mode 100644 assets/third-party-icons/developer/processed/DevOps-AI-ML/hugging-face.svg create mode 100644 assets/third-party-icons/developer/processed/DevOps-AI-ML/k6.svg create mode 100644 assets/third-party-icons/developer/processed/DevOps-AI-ML/kubernetes.svg create mode 100644 assets/third-party-icons/developer/processed/DevOps-AI-ML/linux.svg create mode 100644 assets/third-party-icons/developer/processed/DevOps-AI-ML/netlify.svg create mode 100644 assets/third-party-icons/developer/processed/DevOps-AI-ML/netlify2.svg create mode 100644 assets/third-party-icons/developer/processed/DevOps-AI-ML/npm-wordmark.svg create mode 100644 assets/third-party-icons/developer/processed/DevOps-AI-ML/npm.svg create mode 100644 assets/third-party-icons/developer/processed/DevOps-AI-ML/nx.svg create mode 100644 assets/third-party-icons/developer/processed/DevOps-AI-ML/openai.svg create mode 100644 assets/third-party-icons/developer/processed/DevOps-AI-ML/pnpm-dark-wordmark.svg create mode 100644 assets/third-party-icons/developer/processed/DevOps-AI-ML/pnpm-dark.svg create mode 100644 assets/third-party-icons/developer/processed/DevOps-AI-ML/pnpm-light-wordmark.svg create mode 100644 assets/third-party-icons/developer/processed/DevOps-AI-ML/pnpm-light.svg create mode 100644 assets/third-party-icons/developer/processed/DevOps-AI-ML/pulumi-dark-wordmark.svg create mode 100644 assets/third-party-icons/developer/processed/DevOps-AI-ML/pulumi-light-wordmark.svg create mode 100644 assets/third-party-icons/developer/processed/DevOps-AI-ML/pulumi.svg create mode 100644 assets/third-party-icons/developer/processed/DevOps-AI-ML/railway.svg create mode 100644 assets/third-party-icons/developer/processed/DevOps-AI-ML/tensorflow.svg create mode 100644 assets/third-party-icons/developer/processed/DevOps-AI-ML/vercel-dark-wordmark.svg create mode 100644 assets/third-party-icons/developer/processed/DevOps-AI-ML/vercel-dark.svg create mode 100644 assets/third-party-icons/developer/processed/DevOps-AI-ML/vercel-light-wordmark.svg create mode 100644 assets/third-party-icons/developer/processed/DevOps-AI-ML/vercel-light.svg create mode 100644 assets/third-party-icons/developer/processed/DevOps-AI-ML/vitest.svg create mode 100644 assets/third-party-icons/developer/processed/Frontend/angular.svg create mode 100644 assets/third-party-icons/developer/processed/Frontend/astro.svg create mode 100644 assets/third-party-icons/developer/processed/Frontend/chakraui.svg create mode 100644 assets/third-party-icons/developer/processed/Frontend/framer-dark.svg create mode 100644 assets/third-party-icons/developer/processed/Frontend/framer-light.svg create mode 100644 assets/third-party-icons/developer/processed/Frontend/gatsby.svg create mode 100644 assets/third-party-icons/developer/processed/Frontend/headlessui.svg create mode 100644 assets/third-party-icons/developer/processed/Frontend/jquery.svg create mode 100644 assets/third-party-icons/developer/processed/Frontend/materialui.svg create mode 100644 assets/third-party-icons/developer/processed/Frontend/nextjs-wordmark.svg create mode 100644 assets/third-party-icons/developer/processed/Frontend/nextjs.svg create mode 100644 assets/third-party-icons/developer/processed/Frontend/nuxtjs.svg create mode 100644 assets/third-party-icons/developer/processed/Frontend/preact.svg create mode 100644 assets/third-party-icons/developer/processed/Frontend/react-query.svg create mode 100644 assets/third-party-icons/developer/processed/Frontend/reactjs.svg create mode 100644 assets/third-party-icons/developer/processed/Frontend/reactrouter.svg create mode 100644 assets/third-party-icons/developer/processed/Frontend/remix-dark-wordmark.svg create mode 100644 assets/third-party-icons/developer/processed/Frontend/remix-dark.svg create mode 100644 assets/third-party-icons/developer/processed/Frontend/remix-light-wordmark.svg create mode 100644 assets/third-party-icons/developer/processed/Frontend/remix-light.svg create mode 100644 assets/third-party-icons/developer/processed/Frontend/sass.svg create mode 100644 assets/third-party-icons/developer/processed/Frontend/shadcnui.svg create mode 100644 assets/third-party-icons/developer/processed/Frontend/sveltejs.svg create mode 100644 assets/third-party-icons/developer/processed/Frontend/tailwindcss.svg create mode 100644 assets/third-party-icons/developer/processed/Frontend/threejs-dark.svg create mode 100644 assets/third-party-icons/developer/processed/Frontend/threejs-light.svg create mode 100644 assets/third-party-icons/developer/processed/Frontend/vitejs.svg create mode 100644 assets/third-party-icons/developer/processed/Frontend/vuejs.svg create mode 100644 assets/third-party-icons/developer/processed/Frontend/webpack.svg create mode 100644 assets/third-party-icons/developer/processed/Languages/bash.svg create mode 100644 assets/third-party-icons/developer/processed/Languages/cakephp.svg create mode 100644 assets/third-party-icons/developer/processed/Languages/dlang.svg create mode 100644 assets/third-party-icons/developer/processed/Languages/elixir.svg create mode 100644 assets/third-party-icons/developer/processed/Languages/erlang.svg create mode 100644 assets/third-party-icons/developer/processed/Languages/haskell.svg create mode 100644 assets/third-party-icons/developer/processed/Languages/java.svg create mode 100644 assets/third-party-icons/developer/processed/Languages/javascript.svg create mode 100644 assets/third-party-icons/developer/processed/Languages/json.svg create mode 100644 assets/third-party-icons/developer/processed/Languages/kotlin.svg create mode 100644 assets/third-party-icons/developer/processed/Languages/markdown.svg create mode 100644 assets/third-party-icons/developer/processed/Languages/nim.svg create mode 100644 assets/third-party-icons/developer/processed/Languages/php.svg create mode 100644 assets/third-party-icons/developer/processed/Languages/powershell.svg create mode 100644 assets/third-party-icons/developer/processed/Languages/python.svg create mode 100644 assets/third-party-icons/developer/processed/Languages/ruby.svg create mode 100644 assets/third-party-icons/developer/processed/Languages/rust-dark.svg create mode 100644 assets/third-party-icons/developer/processed/Languages/rust-light.svg create mode 100644 assets/third-party-icons/developer/processed/Languages/scala.svg create mode 100644 assets/third-party-icons/developer/processed/Languages/solidity.svg create mode 100644 assets/third-party-icons/developer/processed/Languages/swift.svg create mode 100644 assets/third-party-icons/developer/processed/Languages/typescript.svg create mode 100644 assets/third-party-icons/developer/processed/Media/bluesky.svg create mode 100644 assets/third-party-icons/developer/processed/Media/cloudinary.svg create mode 100644 assets/third-party-icons/developer/processed/Media/hotjar.svg create mode 100644 assets/third-party-icons/developer/processed/Media/instagram.svg create mode 100644 assets/third-party-icons/developer/processed/Media/mastodon.svg create mode 100644 assets/third-party-icons/developer/processed/Media/redux-saga.svg create mode 100644 assets/third-party-icons/developer/processed/Media/stream.svg create mode 100644 assets/third-party-icons/developer/processed/Media/telegram.svg create mode 100644 assets/third-party-icons/developer/processed/Media/threads-dark.svg create mode 100644 assets/third-party-icons/developer/processed/Media/threads-light.svg create mode 100644 assets/third-party-icons/developer/processed/Media/vk.svg create mode 100644 assets/third-party-icons/developer/processed/Media/x-dark.svg create mode 100644 assets/third-party-icons/developer/processed/Media/x-light.svg create mode 100644 assets/third-party-icons/developer/processed/Media/youtube-wordmark.svg create mode 100644 assets/third-party-icons/developer/processed/Media/youtube.svg create mode 100644 assets/third-party-icons/developer/processed/Native-App/android.svg create mode 100644 assets/third-party-icons/developer/processed/Native-App/flutter.svg create mode 100644 assets/third-party-icons/developer/processed/Others/ansible-wordmark.svg create mode 100644 assets/third-party-icons/developer/processed/Others/ansible.svg create mode 100644 assets/third-party-icons/developer/processed/Others/anthropic-basic-dark.svg create mode 100644 assets/third-party-icons/developer/processed/Others/anthropic-basic-light.svg create mode 100644 assets/third-party-icons/developer/processed/Others/anthropic.svg create mode 100644 assets/third-party-icons/developer/processed/Others/apache.svg create mode 100644 assets/third-party-icons/developer/processed/Others/apple-dark.svg create mode 100644 assets/third-party-icons/developer/processed/Others/apple-light.svg create mode 100644 assets/third-party-icons/developer/processed/Others/appwrite.svg create mode 100644 assets/third-party-icons/developer/processed/Others/arc.svg create mode 100644 assets/third-party-icons/developer/processed/Others/atlassian.svg create mode 100644 assets/third-party-icons/developer/processed/Others/atom.svg create mode 100644 assets/third-party-icons/developer/processed/Others/auth0.svg create mode 100644 assets/third-party-icons/developer/processed/Others/axiom.svg create mode 100644 assets/third-party-icons/developer/processed/Others/axure.svg create mode 100644 assets/third-party-icons/developer/processed/Others/azure.svg create mode 100644 assets/third-party-icons/developer/processed/Others/babel.svg create mode 100644 assets/third-party-icons/developer/processed/Others/backbonejs.svg create mode 100644 assets/third-party-icons/developer/processed/Others/bard.svg create mode 100644 assets/third-party-icons/developer/processed/Others/bing.svg create mode 100644 assets/third-party-icons/developer/processed/Others/biome.svg create mode 100644 assets/third-party-icons/developer/processed/Others/bitnami.svg create mode 100644 assets/third-party-icons/developer/processed/Others/blueprintjs.svg create mode 100644 assets/third-party-icons/developer/processed/Others/bootstrap4.svg create mode 100644 assets/third-party-icons/developer/processed/Others/bootstrap5.svg create mode 100644 assets/third-party-icons/developer/processed/Others/brave.svg create mode 100644 assets/third-party-icons/developer/processed/Others/bulmaui.svg create mode 100644 assets/third-party-icons/developer/processed/Others/c-plus-plus.svg create mode 100644 assets/third-party-icons/developer/processed/Others/c-sharp.svg create mode 100644 assets/third-party-icons/developer/processed/Others/c.svg create mode 100644 assets/third-party-icons/developer/processed/Others/canva.svg create mode 100644 assets/third-party-icons/developer/processed/Others/cassandradb.svg create mode 100644 assets/third-party-icons/developer/processed/Others/chatgpt.svg create mode 100644 assets/third-party-icons/developer/processed/Others/chromium.svg create mode 100644 assets/third-party-icons/developer/processed/Others/circleci.svg create mode 100644 assets/third-party-icons/developer/processed/Others/claude-ai.svg create mode 100644 assets/third-party-icons/developer/processed/Others/clerk.svg create mode 100644 assets/third-party-icons/developer/processed/Others/clojure.svg create mode 100644 assets/third-party-icons/developer/processed/Others/codeigniter.svg create mode 100644 assets/third-party-icons/developer/processed/Others/crystal.svg create mode 100644 assets/third-party-icons/developer/processed/Others/css.svg create mode 100644 assets/third-party-icons/developer/processed/Others/css3.svg create mode 100644 assets/third-party-icons/developer/processed/Others/dart.svg create mode 100644 assets/third-party-icons/developer/processed/Others/datadog.svg create mode 100644 assets/third-party-icons/developer/processed/Others/deepseek-wordmark.svg create mode 100644 assets/third-party-icons/developer/processed/Others/deepseek.svg create mode 100644 assets/third-party-icons/developer/processed/Others/discord.svg create mode 100644 assets/third-party-icons/developer/processed/Others/django.svg create mode 100644 assets/third-party-icons/developer/processed/Others/docusaurus.svg create mode 100644 assets/third-party-icons/developer/processed/Others/dovetail.svg create mode 100644 assets/third-party-icons/developer/processed/Others/electron.svg create mode 100644 assets/third-party-icons/developer/processed/Others/elementui.svg create mode 100644 assets/third-party-icons/developer/processed/Others/ember.svg create mode 100644 assets/third-party-icons/developer/processed/Others/esbuild.svg create mode 100644 assets/third-party-icons/developer/processed/Others/eslint.svg create mode 100644 assets/third-party-icons/developer/processed/Others/expressjs-dark.svg create mode 100644 assets/third-party-icons/developer/processed/Others/expressjs-light.svg create mode 100644 assets/third-party-icons/developer/processed/Others/facebook.svg create mode 100644 assets/third-party-icons/developer/processed/Others/fast-api.svg create mode 100644 assets/third-party-icons/developer/processed/Others/faunadb.svg create mode 100644 assets/third-party-icons/developer/processed/Others/flask-dark.svg create mode 100644 assets/third-party-icons/developer/processed/Others/flask-light.svg create mode 100644 assets/third-party-icons/developer/processed/Others/flyio.svg create mode 100644 assets/third-party-icons/developer/processed/Others/go.svg create mode 100644 assets/third-party-icons/developer/processed/Others/google-wordmark.svg create mode 100644 assets/third-party-icons/developer/processed/Others/google.svg create mode 100644 assets/third-party-icons/developer/processed/Others/grafana.svg create mode 100644 assets/third-party-icons/developer/processed/Others/graphite.svg create mode 100644 assets/third-party-icons/developer/processed/Others/gridsome.svg create mode 100644 assets/third-party-icons/developer/processed/Others/gruntjs.svg create mode 100644 assets/third-party-icons/developer/processed/Others/gulp.svg create mode 100644 assets/third-party-icons/developer/processed/Others/hashnode.svg create mode 100644 assets/third-party-icons/developer/processed/Others/hexo.svg create mode 100644 assets/third-party-icons/developer/processed/Others/hhvm.svg create mode 100644 assets/third-party-icons/developer/processed/Others/homebrew.svg create mode 100644 assets/third-party-icons/developer/processed/Others/html5.svg create mode 100644 assets/third-party-icons/developer/processed/Others/hyper2.svg create mode 100644 assets/third-party-icons/developer/processed/Others/insomnia.svg create mode 100644 assets/third-party-icons/developer/processed/Others/internet-explorer.svg create mode 100644 assets/third-party-icons/developer/processed/Others/invision.svg create mode 100644 assets/third-party-icons/developer/processed/Others/ionic.svg create mode 100644 assets/third-party-icons/developer/processed/Others/jamstack.svg create mode 100644 assets/third-party-icons/developer/processed/Others/jenkins.svg create mode 100644 assets/third-party-icons/developer/processed/Others/jest.svg create mode 100644 assets/third-party-icons/developer/processed/Others/jira.svg create mode 100644 assets/third-party-icons/developer/processed/Others/jslint.svg create mode 100644 assets/third-party-icons/developer/processed/Others/kafka.svg create mode 100644 assets/third-party-icons/developer/processed/Others/laravel.svg create mode 100644 assets/third-party-icons/developer/processed/Others/lerna-dark.svg create mode 100644 assets/third-party-icons/developer/processed/Others/lerna-light.svg create mode 100644 assets/third-party-icons/developer/processed/Others/less.svg create mode 100644 assets/third-party-icons/developer/processed/Others/lightroom.svg create mode 100644 assets/third-party-icons/developer/processed/Others/linkedin.svg create mode 100644 assets/third-party-icons/developer/processed/Others/lit.svg create mode 100644 assets/third-party-icons/developer/processed/Others/liveblocks.svg create mode 100644 assets/third-party-icons/developer/processed/Others/logrocket.svg create mode 100644 assets/third-party-icons/developer/processed/Others/lua.svg create mode 100644 assets/third-party-icons/developer/processed/Others/lunacy.svg create mode 100644 assets/third-party-icons/developer/processed/Others/marionette.svg create mode 100644 assets/third-party-icons/developer/processed/Others/messenger.svg create mode 100644 assets/third-party-icons/developer/processed/Others/mochajs.svg create mode 100644 assets/third-party-icons/developer/processed/Others/neovim.svg create mode 100644 assets/third-party-icons/developer/processed/Others/numpy.svg create mode 100644 assets/third-party-icons/developer/processed/Others/ocaml.svg create mode 100644 assets/third-party-icons/developer/processed/Others/opera.svg create mode 100644 assets/third-party-icons/developer/processed/Others/pandacss.svg create mode 100644 assets/third-party-icons/developer/processed/Others/pinia.svg create mode 100644 assets/third-party-icons/developer/processed/Others/pinterest.svg create mode 100644 assets/third-party-icons/developer/processed/Others/pixijs.svg create mode 100644 assets/third-party-icons/developer/processed/Others/playwright.svg create mode 100644 assets/third-party-icons/developer/processed/Others/postman.svg create mode 100644 assets/third-party-icons/developer/processed/Others/prettier.svg create mode 100644 assets/third-party-icons/developer/processed/Others/prisma.svg create mode 100644 assets/third-party-icons/developer/processed/Others/pugjs.svg create mode 100644 assets/third-party-icons/developer/processed/Others/pwa.svg create mode 100644 assets/third-party-icons/developer/processed/Others/pytorch.svg create mode 100644 assets/third-party-icons/developer/processed/Others/pytorch3d.svg create mode 100644 assets/third-party-icons/developer/processed/Others/qwik.svg create mode 100644 assets/third-party-icons/developer/processed/Others/r.svg create mode 100644 assets/third-party-icons/developer/processed/Others/radixui.svg create mode 100644 assets/third-party-icons/developer/processed/Others/rails.svg create mode 100644 assets/third-party-icons/developer/processed/Others/reddit-wordmark.svg create mode 100644 assets/third-party-icons/developer/processed/Others/reddit.svg create mode 100644 assets/third-party-icons/developer/processed/Others/redhat.svg create mode 100644 assets/third-party-icons/developer/processed/Others/redux.svg create mode 100644 assets/third-party-icons/developer/processed/Others/render.svg create mode 100644 assets/third-party-icons/developer/processed/Others/resend.svg create mode 100644 assets/third-party-icons/developer/processed/Others/rollup.svg create mode 100644 assets/third-party-icons/developer/processed/Others/semanticui.svg create mode 100644 assets/third-party-icons/developer/processed/Others/serverless.svg create mode 100644 assets/third-party-icons/developer/processed/Others/shopware.svg create mode 100644 assets/third-party-icons/developer/processed/Others/skype.svg create mode 100644 assets/third-party-icons/developer/processed/Others/slack.svg create mode 100644 assets/third-party-icons/developer/processed/Others/solidjs.svg create mode 100644 assets/third-party-icons/developer/processed/Others/storyblok.svg create mode 100644 assets/third-party-icons/developer/processed/Others/storybook.svg create mode 100644 assets/third-party-icons/developer/processed/Others/stylelint.svg create mode 100644 assets/third-party-icons/developer/processed/Others/sublime.svg create mode 100644 assets/third-party-icons/developer/processed/Others/swagger.svg create mode 100644 assets/third-party-icons/developer/processed/Others/terraform.svg create mode 100644 assets/third-party-icons/developer/processed/Others/tiktok.svg create mode 100644 assets/third-party-icons/developer/processed/Others/tinyhttp.svg create mode 100644 assets/third-party-icons/developer/processed/Others/tor.svg create mode 100644 assets/third-party-icons/developer/processed/Others/twitter.svg create mode 100644 assets/third-party-icons/developer/processed/Others/ubuntu.svg create mode 100644 assets/third-party-icons/developer/processed/Others/unjs.svg create mode 100644 assets/third-party-icons/developer/processed/Others/upwork-basic.svg create mode 100644 assets/third-party-icons/developer/processed/Others/upwork-wordmark.svg create mode 100644 assets/third-party-icons/developer/processed/Others/upwork.svg create mode 100644 assets/third-party-icons/developer/processed/Others/vagrant.svg create mode 100644 assets/third-party-icons/developer/processed/Others/vim.svg create mode 100644 assets/third-party-icons/developer/processed/Others/visualbasic.svg create mode 100644 assets/third-party-icons/developer/processed/Others/vscode.svg create mode 100644 assets/third-party-icons/developer/processed/Others/webassembly.svg create mode 100644 assets/third-party-icons/developer/processed/Others/webrtc.svg create mode 100644 assets/third-party-icons/developer/processed/Others/whatsapp.svg create mode 100644 assets/third-party-icons/developer/processed/Others/wordpress.svg create mode 100644 assets/third-party-icons/developer/processed/Others/xamarin.svg create mode 100644 assets/third-party-icons/developer/processed/Others/xd.svg create mode 100644 assets/third-party-icons/developer/processed/Others/yoga.svg create mode 100644 assets/third-party-icons/developer/processed/Others/zen.svg create mode 100644 assets/third-party-icons/developer/processed/Productivity/gmail.svg create mode 100644 assets/third-party-icons/developer/processed/Productivity/lokalise.svg create mode 100644 assets/third-party-icons/developer/processed/Productivity/notion.svg create mode 100644 assets/third-party-icons/developer/processed/Productivity/onedrive.svg create mode 100644 assets/third-party-icons/developer/processed/Productivity/outlook.svg create mode 100644 assets/third-party-icons/developer/processed/developer-icons-v1.manifest.json create mode 100644 scripts/shape-pack/import-developer-icons.mjs create mode 100644 src/components/IconAssetNodeBody.tsx create mode 100644 src/components/NodeBadges.tsx create mode 100644 src/components/NodeShapeSVG.tsx create mode 100644 src/components/SettingsModal/CanvasSettings.tsx create mode 100644 src/components/ThemeToggle.tsx create mode 100644 src/components/add-items/addItemRegistry.tsx create mode 100644 src/components/custom-nodes/SequenceNoteNode.tsx create mode 100644 src/components/custom-nodes/variantConstants.ts create mode 100644 src/components/home/HomeTemplatesView.tsx create mode 100644 src/components/home/SidebarFooter.tsx create mode 100644 src/components/nodeHelpers.test.ts create mode 100644 src/components/nodeHelpers.ts create mode 100644 src/components/properties/shared.ts create mode 100644 src/components/toolbar/ToolbarAddMenu.test.tsx create mode 100644 src/components/useExportMenu.test.tsx create mode 100644 src/context/ThemeContext.tsx create mode 100644 src/hooks/ai-generation/codebaseAnalyzer.ts create mode 100644 src/hooks/ai-generation/codebaseParser.test.ts create mode 100644 src/hooks/ai-generation/codebaseParser.ts create mode 100644 src/hooks/useAssetCatalog.ts create mode 100644 src/hooks/useProviderShapePreview.ts create mode 100644 src/hooks/useShiftHeld.ts create mode 100644 src/lib/fuzzyMatch.ts create mode 100644 src/lib/xssSafety.test.tsx create mode 100644 src/services/assetCatalog.test.ts create mode 100644 src/services/assetCatalog.ts create mode 100644 src/services/assetPresentation.ts create mode 100644 src/services/githubFetcher.test.ts create mode 100644 src/services/githubFetcher.ts create mode 100644 src/services/zipExtractor.ts create mode 100644 src/store/actions/syncTabNodesEdges.ts diff --git a/README.md b/README.md index 264869e2..48f92b4c 100644 --- a/README.md +++ b/README.md @@ -5,6 +5,7 @@

OpenFlowKit

The open-source diagramming studio for developers and builders.
+Paste a GitHub repo → get an architecture diagram. Import SQL → get an ERD. Import Terraform → get a cloud diagram.
Prompt · Import · Edit · Export as animated video · Collaborate — entirely in your browser, no account required.

@@ -46,10 +47,10 @@ OpenFlowKit is a **local-first, developer-grade diagramming workspace** that liv **The core loop is simple:** ``` -Prompt / Import → Edit visually or in code → Export anywhere +Paste code / Import infra / Prompt AI → 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. +Start from a GitHub repo, SQL schema, Terraform state, Kubernetes YAML, OpenAPI spec, a Mermaid file, or a plain-English prompt. 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. --- @@ -57,23 +58,81 @@ Start from a plain-English prompt, a Mermaid file, SQL schema, OpenAPI spec, Ter Every existing tool misses something critical for developers. OpenFlowKit fills those gaps. -| Tool | The gap | How OpenFlowKit fills it | -|---|---|---| -| **Excalidraw** | Freeform only, no structured diagram types, no DSL | 8 structured diagram families, bidirectional diagram-as-code, Figma export | -| **Draw.io / diagrams.net** | Dated UX, no AI, no code representation | Modern React 19 canvas, 9 AI providers, OpenFlow DSL | -| **Mermaid.js** | Code-only, no visual editor | Full visual editor on top of Mermaid — edit visually or in code, bidirectionally | -| **tldraw** | Whiteboard-first, no structured diagram types | Cloud architecture (AWS/Azure/CNCF icons), class, ER, state, and more | -| **Lucidchart / Miro** | Paid, cloud-only, account required | MIT licensed, local-first, and usable without an account | +| Tool | The gap | How OpenFlowKit fills it | +| -------------------------- | -------------------------------------------------- | -------------------------------------------------------------------------------- | +| **Excalidraw** | Freeform only, no structured diagram types, no DSL | 8 structured diagram families, bidirectional diagram-as-code, Figma export | +| **Draw.io / diagrams.net** | Dated UX, no AI, no code representation | Modern React 19 canvas, 9 AI providers, OpenFlow DSL | +| **Mermaid.js** | Code-only, no visual editor | Full visual editor on top of Mermaid — edit visually or in code, bidirectionally | +| **tldraw** | Whiteboard-first, no structured diagram types | Cloud architecture (AWS/Azure/CNCF icons), class, ER, state, and more | +| **Lucidchart / Miro** | Paid, cloud-only, account required | MIT licensed, local-first, and usable without an account | **OpenFlowKit combines** a visual canvas editor, a diagram-as-code environment, an AI-powered generator, a developer import pipeline, and a Figma / docs export workflow in one open-source, local-first app. --- +## ⭐ Spotlight: Code-to-Diagram Import + +

+ +**The fastest path from code to architecture diagram. Zero setup.** + +
+ +OpenFlowKit turns your existing code and infrastructure into editable diagrams in seconds — no AI required for most formats. + +### How it works + +| What you paste | What you get | How it works | +| ---------------------------------------- | ---------------------------- | -------------------------------------------------------------------------------------------------------------------- | +| **GitHub repo URL** | Full architecture diagram | Fetches repo via GitHub API, parses import statements across 9 languages, builds dependency graph, generates diagram | +| **`.zip` of your project** | Full architecture diagram | Extracts files, analyzes imports and dependencies, maps the structure | +| **SQL DDL** (`CREATE TABLE` statements) | Entity-relationship diagram | Native parser — deterministic, instant, no AI | +| **Terraform state** (`.tfstate` JSON) | Cloud architecture diagram | Native parser — extracts resources, edges, provider icons | +| **Kubernetes YAML** / **Helm templates** | Cloud architecture diagram | Native parser — extracts Deployments, Services, Ingress, edges | +| **Docker Compose** | Service architecture diagram | Native parser — extracts services, ports, networks, dependencies | +| **OpenAPI / Swagger spec** | API sequence diagram | AI-generated from spec | +| **Source code** (single file) | Architecture draft | AI-generated from code | + +### The GitHub import flow + +``` +1. Open Import panel → "Repo" tab +2. Paste "github.com/vercel/next.js" → click Fetch +3. Watch it analyze: "Fetching file tree... Fetched 80 source files..." +4. See results: "80 files, TypeScript, 312 dependencies, 3 entry points" +5. Click "Analyze Project" → AI generates the architecture diagram +6. Edit, refine, export +``` + +Works with any public GitHub repo. Optionally add a personal access token for 5,000 requests/hour (vs 60 without). + +### Native parsers — no AI needed + +The SQL, Terraform, Kubernetes, and Docker Compose parsers are **fully deterministic** — they parse locally in the browser, require no API key, and produce predictable results: + +- **SQL:** Handles `CREATE TABLE`, `ALTER TABLE ADD FOREIGN KEY`, `ENUM` types, quoted identifiers, `IF NOT EXISTS` +- **Terraform state:** Extracts `aws_`, `azurerm_`, `google_` resources with `vpc_id`, `subnet_id`, `security_groups`, `depends_on` edges +- **Kubernetes:** Handles multi-document YAML (`---`), Helm templates (`{{ .Values.xxx }}`), extracts Services, Deployments, Ingress, ConfigMaps, Secrets, with port and selector edges +- **Docker Compose:** Extracts services, `depends_on` edges, `networks`, `ports` mappings (shown in labels) + +### Import fidelity report + +Every import shows exactly what was detected: + +- **Node count** and **edge count** +- **Summary** (e.g. "5 tables, 3 relationships" or "12 resources, 8 edges, AWS") +- **DSL preview** — expandable raw DSL output before applying +- **Apply to Canvas** — single click to add to your diagram + +--- + ## ✨ Spotlight: Cinematic Export -

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

+
+ +**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: @@ -83,6 +142,7 @@ Most diagramming tools stop at static images. OpenFlowKit can export a **cinemat - 🎓 **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 @@ -100,16 +160,16 @@ Describe a system in natural language. Flowpilot generates a fully laid-out, edi **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` | +| Provider | Default model | +| ------------------- | ----------------------------------------------------------- | +| Google Gemini | `gemini-2.5-flash-lite` | +| OpenAI | `gpt-5-mini` | +| Anthropic Claude | `claude-sonnet-4-6` | +| Groq | `llama-4-scout-17b-16e-instruct` | +| Mistral | `mistral-medium-latest` | +| NVIDIA | `llama-4-scout-17b-16e-instruct` | +| Cerebras | `gpt-oss-120b` | +| OpenRouter | `google/gemini-2.5-flash` | | **Custom endpoint** | Any OpenAI-compatible API (Ollama, LM Studio, Together AI…) | **Flowpilot capabilities:** @@ -129,30 +189,34 @@ Describe a system in natural language. Flowpilot generates a fully laid-out, edi Feed any structured artifact into OpenFlowKit and get a ready-to-edit 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 | +| Source | Generated diagram | Parser type | +| ------------------------------------------ | --------------------------------------------------------------- | ----------- | +| **GitHub repo URL** | Full architecture from codebase structure | Native + AI | +| **Project `.zip` upload** | Full architecture from codebase structure | Native + AI | +| **SQL DDL** | Entity-relationship diagram with typed fields and cardinalities | Native | +| **Terraform state** (`.tfstate`) | Cloud architecture diagram with provider icons | Native | +| **Kubernetes YAML / Helm** | Cloud architecture diagram with K8s resources | Native | +| **Docker Compose** | Service architecture with ports and networks | Native | +| **OpenAPI / Swagger spec** | API sequence diagram with operations and responses | AI | +| **Source code** (single file, 9 languages) | Architecture draft from module structure | AI | +| **Mermaid** | Native import, fully editable | Native | -File upload with automatic language detection, or paste raw text. +**File upload** with automatic format detection, **drag-and-drop** onto the import panel, and **input size limits** with clear error messages. --- ### 📐 8 Structured Diagram Types -| Diagram | What it includes | Mermaid export | -|---|---|---| -| **Flowchart** | Start/end, process, decision, annotation, swimlane, section | `flowchart TD` | -| **Architecture** | AWS, Azure, CNCF icons; zones, trust domains, service boundaries | `architecture-beta` | -| **Class Diagram** | UML classes, attributes, methods, stereotypes, all relation types | `classDiagram` | -| **ER Diagram** | Entities with typed fields (PK, FK, NN, UNIQUE), cardinality edges | `erDiagram` | -| **Mind Map** | Hierarchical topics, curved branches, depth-aware auto-layout | `mindmap` | -| **User Journey** | Scored tasks, named sections, actor annotations | `journey` | -| **State Diagram** | States, composite containers, start-node markers | `stateDiagram-v2` | -| **Wireframe** | Browser shells, mobile frames, UI component blocks | — | +| 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 | — | --- @@ -160,14 +224,14 @@ File upload with automatic language detection, or paste raw text. **🖼 Images:** SVG · PNG (transparent, hi-res) · JPG · PDF -**🎬 Animation & Video** *(unique to OpenFlowKit)* +**🎬 Animation & Video** _(unique to OpenFlowKit)_ -| Format | Description | -|---|---| -| Playback MP4 / WebM | Simple video replay of your diagram | -| Playback GIF | Looping animation for embedding anywhere | +| 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 | +| **Cinematic GIF** ⭐ | Lightweight looping animated export for embeds and social sharing | **`{}` Code & Data:** JSON · OpenFlow DSL · Mermaid · PlantUML @@ -215,6 +279,7 @@ One-click starters across 7 categories, fully searchable. View all templates **Flowchart** + - Subscription Upgrade Workflow - Incident Escalation Runbook - CI/CD Release Train @@ -222,23 +287,27 @@ One-click starters across 7 categories, fully searchable. - AI Support Escalation **AWS** + - AWS Event-Driven API (API Gateway, Lambda, EventBridge, SQS, DynamoDB, Step Functions, SES) - AWS Data Lake Analytics (S3, Glue, DataZone, Athena, Redshift) - AWS Container Delivery Platform - AWS Security Operations Loop **Azure** + - Azure AI Application Platform - Azure Landing Zone Operations - Azure Data Estate - Azure Identity Access Hub **CNCF** + - CNCF GitOps Platform - CNCF Service Mesh Security - CNCF Observability Stack **Mindmap · Journey · Wireframe** + - Product Discovery Mindmap - Engineering Strategy Mindmap - Customer Onboarding Journey @@ -252,16 +321,16 @@ One-click starters across 7 categories, fully searchable. One-click ELK.js layout with four presets: -| 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 | +| 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 | --- -### 👥 Real-Time Collaboration *(beta)* +### 👥 Real-Time Collaboration _(beta)_ Peer-to-peer collaboration via **WebRTC + Yjs**. Share a room link — participants see live cursors, presence indicators, and a fully synchronized canvas state. No server-side diagram storage, ever. @@ -282,18 +351,18 @@ Peer-to-peer collaboration via **WebRTC + Yjs**. Share a room link — participa **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 | +| 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 | --- @@ -315,20 +384,20 @@ Available in 7 languages: **English · German · Spanish · French · Japanese ## 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 | +| 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 | --- @@ -436,11 +505,11 @@ Domain services own logic. Hooks compose state and side effects. Components rend ## 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/` | +| 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). @@ -452,14 +521,14 @@ Contributions of all kinds are welcome — bug reports, features, docs, translat **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 | +| 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 | ### Quick contributor setup 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 e4c0ec02..474b1012 100644 --- a/docs-site/astro.config.mjs +++ b/docs-site/astro.config.mjs @@ -6,7 +6,7 @@ export default defineConfig({ site: 'https://docs.openflowkit.com', 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: { diff --git a/docs-site/src/pages/index.astro b/docs-site/src/pages/index.astro index 963b33d7..8a2aee95 100644 --- a/docs-site/src/pages/index.astro +++ b/docs-site/src/pages/index.astro @@ -1,184 +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 = '/introduction/'; --- - -
-

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 Introduction.

-
- - 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 26335d28..ee52a0b2 100644 --- a/package.json +++ b/package.json @@ -46,13 +46,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", @@ -61,11 +61,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", @@ -81,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..110486ca 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": { @@ -87,7 +88,8 @@ "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 +112,7 @@ }, "export": { "title": "Exportieren", + "subtitle": "Format und Aktion auswählen.", "png": "Als PNG exportieren", "jpeg": "Als JPEG exportieren", "json": "Als JSON exportieren", @@ -122,10 +125,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", @@ -255,6 +259,7 @@ "settings": { "title": "Einstellungen", "general": "Allgemein", + "canvas": "Canvas", "shortcuts": "Tastaturkürzel", "theme": "Design", "language": "Sprache", @@ -264,7 +269,10 @@ "analytics": "Analysen", "about": "Über", "brand": "Markeneinstellungen", - "privacy": "Datenschutz" + "privacy": "Datenschutz", + "themeLight": "Light", + "themeDark": "Dark", + "themeSystem": "System" }, "shortcuts": { "title": "Tastaturkürzel", @@ -331,13 +339,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" @@ -630,8 +649,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 +707,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 +741,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 +759,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 +787,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 +862,34 @@ "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", + "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" }, "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 +899,64 @@ "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", "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..3c7de131 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", @@ -90,6 +91,7 @@ "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 +115,7 @@ }, "export": { "title": "Export", + "subtitle": "Choose a format and action.", "png": "Export as PNG", "jpeg": "Export as JPEG", "svg": "Export as SVG", @@ -131,7 +134,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,7 +144,7 @@ "hintTransparent4K": "Transparent (4K)", "hintWhiteBg4K": "White Background (4K)", "hintDownload": "Download", - "hintClipboard": "Copy to clipboard", + "hintClipboard": "Copy", "hintSvgScalable": "Scalable vector file", "hintPlaybackWebM": "Playback timeline (WebM/MP4)", "hintPlaybackGif": "Short loop for docs/social", @@ -262,7 +265,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,8 +282,12 @@ "settings": { "title": "Settings", "general": "General", + "canvas": "Canvas", "shortcuts": "Keyboard Shortcuts", "theme": "Theme", + "themeLight": "Light", + "themeDark": "Dark", + "themeSystem": "System", "language": "Language", "selectLanguage": "Select Language", "appearance": "Appearance", @@ -361,15 +368,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" @@ -751,6 +767,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 +1096,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 +1116,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 +1201,24 @@ "searchPlaceholder": "Search templates...", "noTemplates": "No templates found." }, + "homeTemplates": { + "description": "Start from a ready-made flow and customize it in the editor.", + "openPicker": "Open Template Picker", + "featured": "Featured Templates", + "count": "{{count}} templates", + "nodes": "{{count}} nodes", + "edges": "{{count}} edges", + "starter": "Starter", + "starterTemplate": "Starter template", + "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" }, "connectionPanel": { "architecture": "Architecture", @@ -1214,7 +1235,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..68660410 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": { @@ -87,7 +88,8 @@ "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 +112,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 +125,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", @@ -255,6 +259,7 @@ "settings": { "title": "Configuración", "general": "General", + "canvas": "Lienzo", "shortcuts": "Atajos de teclado", "theme": "Tema", "language": "Idioma", @@ -264,7 +269,10 @@ "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", @@ -331,13 +339,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" @@ -630,8 +649,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 +707,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 +741,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 +759,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 +787,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 +862,34 @@ "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", + "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" }, "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 +899,64 @@ "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", "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..e923e80d 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": { @@ -87,7 +88,8 @@ "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 +112,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 +125,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", @@ -255,6 +259,7 @@ "settings": { "title": "Paramètres", "general": "Général", + "canvas": "Canevas", "shortcuts": "Raccourcis clavier", "theme": "Thème", "language": "Langue", @@ -264,7 +269,10 @@ "analytics": "Analytique", "about": "À propos", "brand": "Paramètres de marque", - "privacy": "Confidentialité" + "privacy": "Confidentialité", + "themeLight": "Light", + "themeDark": "Dark", + "themeSystem": "System" }, "shortcuts": { "title": "Raccourcis clavier", @@ -331,13 +339,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" @@ -630,8 +649,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 +707,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 +741,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 +759,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 +787,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 +862,34 @@ "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", + "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" }, "flowCanvas": { "strictModePasteBlocked": "Le mode strict d’architecture a bloqué le collage Mermaid. Ouvrez la vue Code, corrigez les diagnostics, puis réessayez." @@ -876,50 +900,50 @@ }, "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", "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 +954,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..bc343a2f 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": { @@ -87,7 +88,8 @@ "versionHistory": "バージョン履歴", "loadJSON": "JSONを読む", "playbackMode": "再生モード", - "privacyMessage": "図はあなたの手元に残り、当社のサーバーには届きません。" + "privacyMessage": "図はあなたの手元に残り、当社のサーバーには届きません。", + "templates": "テンプレート" }, "menu": { "file": "ファイル", @@ -110,6 +112,7 @@ }, "export": { "title": "エクスポート", + "subtitle": "形式と操作を選択してください。", "png": "PNGとしてエクスポート", "jpeg": "JPEGとしてエクスポート", "json": "JSONとしてエクスポート", @@ -122,10 +125,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": "拡大縮小可能なベクターファイル", @@ -255,6 +259,7 @@ "settings": { "title": "設定", "general": "一般", + "canvas": "キャンバス", "shortcuts": "キーボードショートカット", "theme": "テーマ", "language": "言語", @@ -264,7 +269,10 @@ "analytics": "分析", "about": "バージョン情報", "brand": "ブランド設定", - "privacy": "プライバシー" + "privacy": "プライバシー", + "themeLight": "ライト", + "themeDark": "ダーク", + "themeSystem": "システム" }, "shortcuts": { "title": "キーボードショートカット", @@ -331,13 +339,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ライセンス" @@ -630,8 +649,8 @@ "miniMapDesc": "右下にミニマップを表示", "architectureStrictMode": "アーキテクチャ厳格モード", "architectureStrictModeDesc": "アーキテクチャ診断に回復/検証の問題が含まれる場合、Mermaid のインポートをブロックします", - "alignmentGuides": "Alignment Guides", - "alignmentGuidesDesc": "Show smart guide lines while dragging nodes", + "alignmentGuides": "整列ガイド", + "alignmentGuidesDesc": "ノードをドラッグ中にスマートガイド線を表示します", "routingProfile": "ルーティングプロファイル", "routingProfileStandard": "標準", "routingProfileInfrastructure": "インフラストラクチャ", @@ -688,13 +707,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 +741,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 +787,13 @@ "addItem": "アイテムを追加", "addToCanvas": "キャンバスに追加", "shapes": "図形", + "diagrams": "図表", "assets": "アセット", "node": "図形", "stickyNote": "付箋", "section": "セクション", "text": "テキスト", + "other": "その他", "wireframes": "ワイヤーフレーム", "image": "画像", "autoLayout": "自動レイアウト", @@ -852,20 +862,34 @@ "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": "スターターテンプレート", + "useTemplate": "テンプレートを使う", + "closePreview": "テンプレートプレビューを閉じる" + }, "propertiesPanel": { "stickyNote": "付箋", "nodeSettings": "図形設定", - "connection": "接続" + "connection": "接続", + "noSelection": "何も選択されていません", + "selectHint": "ノードまたはエッジをクリックしてプロパティを編集してください" }, "flowCanvas": { "strictModePasteBlocked": "アーキテクチャ厳格モードにより Mermaid の貼り付けがブロックされました。コードビューを開き、診断を修正してから再試行してください。" @@ -875,61 +899,64 @@ "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": "新しいセクション", + "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..39521bf3 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", @@ -94,7 +95,8 @@ "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 +119,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 +129,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", @@ -264,7 +268,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,6 +285,7 @@ "settings": { "title": "Ayarlar", "general": "Genel", + "canvas": "Tuval", "shortcuts": "Klavye Kısayolları", "theme": "Tema", "language": "Dil", @@ -290,7 +295,10 @@ "analytics": "Analitik", "about": "Hakkında", "brand": "Marka Ayarları", - "privacy": "Gizlilik" + "privacy": "Gizlilik", + "themeLight": "Light", + "themeDark": "Dark", + "themeSystem": "System" }, "shortcuts": { "title": "Klavye Kısayolları", @@ -360,17 +368,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ı" @@ -663,8 +681,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 +1015,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 +1043,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 +1118,82 @@ "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", + "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" }, "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..d71b20a1 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": { @@ -87,7 +88,8 @@ "versionHistory": "版本历史", "loadJSON": "加载 JSON", "playbackMode": "回放模式", - "privacyMessage": "您的图表只留在您这里，不会发送到我们的服务器。" + "privacyMessage": "您的图表只留在您这里，不会发送到我们的服务器。", + "templates": "模板" }, "menu": { "file": "文件", @@ -110,6 +112,7 @@ }, "export": { "title": "导出", + "subtitle": "选择一种格式和操作。", "png": "导出为 PNG", "jpeg": "导出为 JPEG", "json": "导出为 JSON", @@ -122,10 +125,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": "可缩放矢量文件", @@ -255,6 +259,7 @@ "settings": { "title": "设置", "general": "通用", + "canvas": "画布", "shortcuts": "键盘快捷键", "theme": "主题", "language": "语言", @@ -264,7 +269,10 @@ "analytics": "分析", "about": "关于", "brand": "品牌设置", - "privacy": "隐私" + "privacy": "隐私", + "themeLight": "Light", + "themeDark": "Dark", + "themeSystem": "System" }, "shortcuts": { "title": "键盘快捷键", @@ -331,13 +339,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 开源协议" @@ -630,8 +649,8 @@ "miniMapDesc": "右下角显示小地图", "architectureStrictMode": "架构严格模式", "architectureStrictModeDesc": "当架构诊断包含恢复/校验问题时，阻止 Mermaid 导入", - "alignmentGuides": "Alignment Guides", - "alignmentGuidesDesc": "Show smart guide lines while dragging nodes", + "alignmentGuides": "对齐参考线", + "alignmentGuidesDesc": "拖动节点时显示智能参考线", "routingProfile": "路由配置", "routingProfileStandard": "标准", "routingProfileInfrastructure": "基础设施", @@ -688,13 +707,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 +741,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 +759,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 +787,13 @@ "addItem": "添加元素", "addToCanvas": "添加到画布", "shapes": "形状", + "diagrams": "图表", "assets": "资源", "node": "形状", "stickyNote": "便利贴", "section": "分区", "text": "文本", + "other": "其他", "wireframes": "线框图", "image": "图片", "autoLayout": "自动布局", @@ -852,20 +862,34 @@ "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": "入门模板", + "useTemplate": "使用模板", + "closePreview": "关闭模板预览" + }, "propertiesPanel": { "stickyNote": "便利贴", "nodeSettings": "形状设置", - "connection": "连接" + "connection": "连接", + "noSelection": "未选择任何内容", + "selectHint": "点击节点或连线以编辑其属性" }, "flowCanvas": { "strictModePasteBlocked": "架构严格模式已阻止 Mermaid 粘贴。请打开代码视图，修复诊断后重试。" @@ -875,61 +899,64 @@ "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": "新分区", "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.tsx b/src/App.tsx index 25f8e558..6cf52d1f 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, + createFlowEditorTemplatesRouteState, +} from '@/app/routeState'; import { DocsSiteRedirect } from '@/components/app/DocsSiteRedirect'; import { RouteLoadingFallback } from '@/components/app/RouteLoadingFallback'; import { MobileWorkspaceGate } from '@/components/app/MobileWorkspaceGate'; @@ -16,7 +29,6 @@ import { useShortcutHelpOpen } from '@/store/viewHooks'; // Import i18n configuration import './i18n/config'; - async function loadFlowEditorModule() { const module = await import('./components/FlowEditor'); return { default: module.FlowEditor }; @@ -69,7 +81,11 @@ function HomePageRoute(): React.JSX.Element { const location = useLocation(); const { createDocument } = useWorkspaceDocumentActions(); - const activeTab = location.pathname === '/settings' ? 'settings' : 'home'; + const activeTab = location.pathname === '/settings' + ? 'settings' + : location.pathname === '/templates' + ? 'templates' + : 'home'; useEffect(() => { void loadFlowEditorModule(); @@ -90,10 +106,16 @@ function HomePageRoute(): React.JSX.Element { navigate(`/flow/${newDocumentId}`, { state: createFlowEditorAIRouteState() }); }; + const handleLaunchWithInitialTemplate = (templateId: string) => { + const newDocumentId = createDocument(); + navigate(`/flow/${newDocumentId}`, { state: createFlowEditorInitialTemplateRouteState(templateId) }); + }; + return ( { navigate('/canvas', { @@ -102,7 +124,13 @@ function HomePageRoute(): React.JSX.Element { }} onOpenFlow={(flowId) => navigate(`/flow/${flowId}`)} activeTab={activeTab} - onSwitchTab={(tab) => navigate(tab === 'settings' ? '/settings' : '/home')} + onSwitchTab={(tab) => navigate( + tab === 'settings' + ? '/settings' + : tab === 'templates' + ? '/templates' + : '/home' + )} /> ); } @@ -111,10 +139,7 @@ function EditorRouteGate({ children }: { children: React.ReactNode }): React.JSX const navigate = useNavigate(); return ( - navigate('/docs')} - onGoHome={() => navigate('/home')} - > + navigate('/docs')} onGoHome={() => navigate('/home')}> {children} ); @@ -127,7 +152,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; @@ -148,32 +174,55 @@ function App(): React.JSX.Element { }, [setShortcutsHelpOpen]); return ( - - - } /> - }> - - - )} - /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - - - {isShortcutsHelpOpen ? ( - - - - ) : null} - + <> + + Skip to content + + + + } /> + }> + + + } + /> + } /> + } /> + } /> + + + + } + /> + + + + } + /> + } /> + } /> + } /> + + + {isShortcutsHelpOpen ? ( + + + + ) : null} + + ); } 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..752516d8 100644 --- a/src/components/AnnotationNode.tsx +++ b/src/components/AnnotationNode.tsx @@ -16,7 +16,7 @@ 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, @@ -26,13 +26,13 @@ function AnnotationNode({ id, data, selected }: LegacyNodeProps): Reac 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 style={{ minWidth: 200, width: '100%', minHeight: contentMinHeight }} > {selected ? ( -
+
{ANNOTATION_COLOR_OPTIONS.map((option) => (
) : null}
- {data.label && ( - - )} + {data.label && ( + )} +
{/* Decorative corner fold */} -
+
); diff --git a/src/components/CommandBar.tsx b/src/components/CommandBar.tsx index 83e06620..179d84ea 100644 --- a/src/components/CommandBar.tsx +++ b/src/components/CommandBar.tsx @@ -5,274 +5,269 @@ 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, + onAddSection, + onAddText, + onAddJourney, + onAddMindmap, + onAddArchitecture, + onAddSequence, + onAddClassNode, + onAddEntityNode, + onAddImage, + onAddBrowserWireframe, + 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.tsx b/src/components/ContextMenu.tsx index 7c7b5690..e561eb21 100644 --- a/src/components/ContextMenu.tsx +++ b/src/components/ContextMenu.tsx @@ -1,227 +1,372 @@ import React, { useEffect, useRef } 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'; 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; + 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; + onChangeNodeType?: (type: string) => 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; } export const ContextMenu: React.FC = ({ - type, - currentNodeType, - position, - onClose, - onCopy, - onPaste, - onDuplicate, - onDelete, - onBringToFront, - onSendToBack, - onChangeNodeType, - canPaste, - selectedCount = 0, - onAlignNodes, - onDistributeNodes, - onGroupSelected, + type, + currentNodeType, + isSectionLocked = false, + isSectionHidden = false, + hasParentSection = false, + position, + onClose, + onCopy, + onPaste, + onDuplicate, + onDelete, + onBringToFront, + onSendToBack, + onChangeNodeType, + onEditLabel, + onFitSectionToContents, + onBringContentsIntoSection, + onReleaseFromSection, + onToggleSectionLock, + onToggleSectionHidden, + 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 && ( - <> -
- - - )} - -
- - - )} -
- ); + 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} + + {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 })} +
+ + {/* Align */} + {onAlignNodes && ( + <> +
+ {t('common.align')} +
+
+ + + + + + +
+ + )} + + {/* Distribute */} + {onDistributeNodes && ( + <> +
+
+ {t('common.distribute')} +
+ + + + )} + + {/* Group */} + {onGroupSelected && ( + <> +
+ + + )} + +
+ + + )} +
+ ); }; 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.tsx b/src/components/CustomNode.tsx index 48229952..71f847dc 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,43 @@ 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 fontFamilyClass = data.fontFamily ? FONT_FAMILY_MAP[data.fontFamily] : ''; + const fontFamilyStyle = !data.fontFamily + ? { 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 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 +82,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, @@ -376,39 +108,64 @@ function CustomNode(props: LegacyNodeProps): React.ReactElement { 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', + 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, + color: visualStyle.text, + fontWeight: data.fontWeight || '600', + fontStyle: data.fontStyle || 'normal', + lineHeight: 1.2, + }; + const subTextProps = { + color: visualStyle.subText, + fontWeight: 'normal' as const, + fontStyle: 'normal' as const, + textAlign: (data.align || 'center') as React.CSSProperties['textAlign'], + opacity: 0.85, + lineHeight: 1.25, + }; + const textAlignStyle = { + textAlign: (data.align || 'center') as React.CSSProperties['textAlign'], + ...fontFamilyStyle, + }; + 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}`} + 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-[10px] text-slate-500 mt-1 leading-snug markdown-content [&_p]:m-0 [&_p]:leading-snug break-words flow-lod-secondary ${lodPreserveClass}`} + 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 f1eda2c4..d6b06970 100644 --- a/src/components/ErrorBoundary.tsx +++ b/src/components/ErrorBoundary.tsx @@ -42,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..6304ae73 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: '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.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: '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 && ( +
+

+ 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..0ad4e92a 100644 --- a/src/components/FlowCanvas.tsx +++ b/src/components/FlowCanvas.tsx @@ -2,10 +2,10 @@ 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, + useViewport, + toFlowNode, } from '@/lib/reactflowCompat'; import { useFlowStore } from '../store'; import type { FlowNode, NodeData } from '../lib/types'; @@ -36,291 +36,318 @@ 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 { 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, + updateNodeData, + updateNodeZIndex, + fitSectionToContents, + releaseFromSection, + handleBringContentsIntoSection, + 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, + updateNodeData, + fitSectionToContents, + releaseFromSection, + bringContentsIntoSection: handleBringContentsIntoSection, + handleAlignNodes, + handleDistributeNodes, + handleGroupNodes, + 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, + zoom, + 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 b7228962..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, - pages, - activePageId, - 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 a4e40b84..2270e6c8 100644 --- a/src/components/FlowTabs.tsx +++ b/src/components/FlowTabs.tsx @@ -27,7 +27,7 @@ export const FlowTabs: React.FC = ({ 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 = (page: EditorPage) => { setEditingTabId(page.id); @@ -53,20 +53,29 @@ export const FlowTabs: React.FC = ({ return (
-
+
{pages.map((page) => (
onSwitchPage(page.id)} onDoubleClick={() => handleStartEdit(page)} + onKeyDown={(e) => { + if (e.key === 'Enter' || e.key === ' ') { + e.preventDefault(); + onSwitchPage(page.id); + } + }} title={page.name} > {editingTabId === page.id ? ( @@ -76,7 +85,7 @@ export const FlowTabs: React.FC = ({ onChange={(e) => 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()} /> @@ -91,8 +100,8 @@ export const FlowTabs: React.FC = ({ }} title={t('flowTabs.closeTab', 'Close page')} className={` - rounded-full p-1 transition-colors opacity-0 group-hover:opacity-100 hover:bg-slate-200 - ${activePageId === page.id ? 'text-[var(--brand-primary-400)] hover:text-[var(--brand-primary)]' : 'text-slate-400 hover:text-slate-600'} + rounded-full p-1 transition-colors opacity-0 group-hover:opacity-100 hover:bg-[var(--color-brand-border)] + ${activePageId === page.id ? 'text-[var(--brand-primary-400)] hover:text-[var(--brand-primary)]' : 'text-[var(--brand-secondary)] hover:text-[var(--brand-secondary)]'} `} > @@ -103,12 +112,12 @@ export const FlowTabs: React.FC = ({
-
+
); }; diff --git a/src/components/GroupNode.tsx b/src/components/GroupNode.tsx index d37ce841..ca3b23b9 100644 --- a/src/components/GroupNode.tsx +++ b/src/components/GroupNode.tsx @@ -4,126 +4,133 @@ 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'; 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 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 && ( - - {data.subLabel} - - )} - - {childCount} {childCount === 1 ? 'node' : 'nodes'} - -
+ style={{ + minWidth: 300, + minHeight: collapsed ? 60 : 200, + height: collapsed ? 60 : '100%', + backgroundColor: collapsed ? '#f8fafc' : '#f1f5f9', + borderColor: '#a5b4fc', + }} + > + {/* Header */} +
+ + {collapsed ? ( + + ) : ( + + )} + + {data.label || 'Group'} + + {data.subLabel && ( + + {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 ab9eec5c..00d3e0f2 100644 --- a/src/components/HomePage.integration.test.tsx +++ b/src/components/HomePage.integration.test.tsx @@ -13,6 +13,10 @@ vi.mock('react-i18next', async (importOriginal) => { ...actual, useTranslation: () => ({ t: (_key: string, fallback?: string) => fallback ?? _key, + i18n: { + language: 'en', + changeLanguage: vi.fn(), + }, }), }; }); @@ -36,6 +40,7 @@ describe('HomePage integration flows', () => { { }; } - it('switches from home to settings view via sidebar', async () => { + it('switches between home, templates, and settings views via sidebar', async () => { await renderHomePage(); + fireEvent.click(screen.getByText('Templates')); + expect(screen.getByRole('heading', { name: 'Templates' })).toBeTruthy(); + expect(screen.getByText('Featured Templates')).toBeTruthy(); + fireEvent.click(screen.getByText('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.getByText('Templates')); + fireEvent.click(screen.getByRole('button', { name: /AWS Event-Driven API/i })); + fireEvent.click(screen.getByRole('button', { name: 'Use Template' })); + + expect(onLaunchWithTemplate).toHaveBeenCalledTimes(1); + expect(onLaunchWithTemplate).toHaveBeenCalledWith('aws-event-api'); + }); + it('exposes template and flowpilot entry points in the empty dashboard state', async () => { const onLaunchWithTemplates = vi.fn(); const onLaunchWithAI = vi.fn(); diff --git a/src/components/HomePage.tsx b/src/components/HomePage.tsx index 08c2f348..7fa7b9f3 100644 --- a/src/components/HomePage.tsx +++ b/src/components/HomePage.tsx @@ -5,152 +5,165 @@ 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 { documents } = useWorkspaceDocumentsState(); - const { renameDocument, deleteDocument, duplicateDocument } = useWorkspaceDocumentActions(); - const hasWorkspaceDocuments = useFlowStore((state) => state.documents.length > 0); - 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[] = hasWorkspaceDocuments ? documents : []; - - 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 => { - 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; - } - - renameDocument(flowPendingRename.id, trimmedName); - setFlowPendingRename(null); - }; - - const confirmFlowDelete = (): void => { - if (!flowPendingDelete) { - return; - } - - deleteDocument(flowPendingDelete.id); - setFlowPendingDelete(null); - }; - - return ( -
- - - {/* Main Content */} -
- - {activeTab === 'home' && ( - { - const newFlowId = duplicateDocument(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/KeyboardShortcutsModal.tsx b/src/components/KeyboardShortcutsModal.tsx index 4d9ef4ef..a971edd9 100644 --- a/src/components/KeyboardShortcutsModal.tsx +++ b/src/components/KeyboardShortcutsModal.tsx @@ -40,12 +40,12 @@ export function KeyboardShortcutsModal(): React.JSX.Element | null { aria-modal="true" aria-labelledby="keyboard-shortcuts-title" aria-describedby="keyboard-shortcuts-description" - className="max-w-2xl w-full overflow-hidden border border-slate-200/60 bg-white shadow-[var(--shadow-overlay)] flex flex-col animate-in zoom-in duration-200" + className="max-w-2xl w-full overflow-hidden border border-[var(--color-brand-border)] bg-[var(--brand-surface)] shadow-[var(--shadow-overlay)] flex flex-col animate-in zoom-in duration-200" style={{ borderRadius: 'var(--radius-xl)' }} > {/* Header */} -
-
+
+

{t('keyboardShortcutsModal.title')}

-

{t('keyboardShortcutsModal.subtitle')}

+

{t('keyboardShortcutsModal.subtitle')}

@@ -87,12 +87,12 @@ export function KeyboardShortcutsModal(): React.JSX.Element | null {
{/* Footer Info */} -
-

+

+

Shift + key: Shift }} />

@@ -104,10 +104,10 @@ export function KeyboardShortcutsModal(): React.JSX.Element | null { function getSectionIcon(title: string) { switch (title) { - case 'shortcuts.essentials': return ; - case 'shortcuts.manipulation': return ; - case 'shortcuts.navigation': return ; - default: return ; + case 'shortcuts.essentials': return ; + case 'shortcuts.manipulation': return ; + case 'shortcuts.navigation': return ; + default: return ; } } @@ -123,7 +123,7 @@ function ShortcutGroup({ title, icon, children }: ShortcutGroupProps): React.JSX
{icon} -

+

{t(`${title}`, title)}

@@ -143,18 +143,18 @@ function ShortcutItem({ shortcuts, label }: ShortcutItemProps): React.JSX.Elemen const { t } = useTranslation(); return (
- + {t(`${label}`, label)}
{shortcuts.map((shortcut, shortcutIndex) => ( - {shortcutIndex > 0 ? / : null} + {shortcutIndex > 0 ? / : null}
{shortcut.map((key, keyIndex) => ( {key} diff --git a/src/components/LanguageSelector.tsx b/src/components/LanguageSelector.tsx index 8cf2a8b9..d0078e59 100644 --- a/src/components/LanguageSelector.tsx +++ b/src/components/LanguageSelector.tsx @@ -58,7 +58,7 @@ function LanguageDropdown({ aria-label="Close language selector" />
{LANGUAGES.map((lang) => ( @@ -116,13 +109,13 @@ export const LanguageSelector: React.FC = ({
= ({
= ({
-
+
-
+
{Math.round(zoom * 100)}%
@@ -38,7 +38,7 @@ export function NavigationControls(): React.ReactElement { -
+
-
+
diff --git a/src/components/NodeShapeSVG.tsx b/src/components/NodeShapeSVG.tsx new file mode 100644 index 00000000..943be062 --- /dev/null +++ b/src/components/NodeShapeSVG.tsx @@ -0,0 +1,55 @@ +import React from 'react'; +import type { NodeData } from '@/lib/types'; + +type NodeShape = NonNullable; + +interface NodeShapeSVGProps { + shape: NodeShape; + fill: string; + stroke: string; + strokeWidth: number | string; +} + +/** Pure SVG geometry for complex node shapes. Rendered inside a 100×100 viewBox. */ +export 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; + } +} diff --git a/src/components/PlaybackControls.tsx b/src/components/PlaybackControls.tsx index 3b08cc2c..62a75db9 100644 --- a/src/components/PlaybackControls.tsx +++ b/src/components/PlaybackControls.tsx @@ -24,16 +24,16 @@ export function PlaybackControls({ }: PlaybackControlsProps) { const { t } = useTranslation(); return ( -
+
{/* Group 1: Step Counter */} -
+
{currentStepIndex + 1} - / - {totalSteps} + / + {totalSteps}
-
+
{/* Group 2: Controls */}
@@ -42,7 +42,7 @@ export function PlaybackControls({ size="icon" onClick={onPrev} disabled={currentStepIndex <= 0} - className="text-slate-500 hover:text-slate-900 rounded-[var(--radius-sm)]" + className="rounded-[var(--radius-sm)] text-[var(--brand-secondary)] hover:text-[var(--brand-text)]" > @@ -65,20 +65,20 @@ export function PlaybackControls({ size="icon" onClick={onNext} disabled={currentStepIndex >= totalSteps - 1} - className="text-slate-500 hover:text-slate-900 rounded-[var(--radius-sm)]" + className="rounded-[var(--radius-sm)] text-[var(--brand-secondary)] hover:text-[var(--brand-text)]" >
-
+
{/* Group 3: Exit */} diff --git a/src/components/PropertiesPanel.tsx b/src/components/PropertiesPanel.tsx index 88c497f1..a7626e7d 100644 --- a/src/components/PropertiesPanel.tsx +++ b/src/components/PropertiesPanel.tsx @@ -7,104 +7,129 @@ import { BulkNodeProperties } from './properties/BulkNodeProperties'; import { useTranslation } from 'react-i18next'; import { DiagramNodePropertiesRouter } from './properties/DiagramNodePropertiesRouter'; import { SidebarBody, SidebarHeader, SidebarShell } from './SidebarShell'; +import { MousePointerClick } from 'lucide-react'; interface PropertiesPanelProps { - selectedNodes: Node[]; - selectedNode: Node | null; - selectedEdge: Edge | null; - onChangeNode: (id: string, data: Partial) => void; - onBulkChangeNodes: (updates: Partial, labelPrefix?: string, labelSuffix?: string) => number; - onChangeNodeType: (id: string, type: string) => void; - onChangeEdge: (id: string, updates: Partial) => void; - onDeleteNode: (id: string) => void; - onDuplicateNode: (id: string) => void; - onDeleteEdge: (id: string) => void; - onUpdateZIndex: (id: string, action: 'front' | 'back') => void; - onAddMindmapChild: (parentId: string) => void; - onAddMindmapSibling: (nodeId: string) => void; - onAddArchitectureService: (sourceId: string) => void; - onCreateArchitectureBoundary: (sourceId: string) => void; - onApplyArchitectureTemplate: (sourceId: string, templateId: ArchitectureTemplateId) => void; - onGenerateEntityFields: (nodeId: string) => Promise | void; - onSuggestArchitectureNode: (nodeId: string) => Promise | void; - onConvertEntitySelectionToClassDiagram: () => void; - onOpenMermaidCodeEditor: () => void; - onClose: () => void; + selectedNodes: Node[]; + selectedNode: Node | null; + selectedEdge: Edge | null; + onChangeNode: (id: string, data: Partial) => void; + onBulkChangeNodes: ( + updates: Partial, + labelPrefix?: string, + labelSuffix?: string + ) => number; + onChangeNodeType: (id: string, type: string) => void; + onChangeEdge: (id: string, updates: 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: (parentId: string) => void; + onAddMindmapSibling: (nodeId: string) => void; + onAddArchitectureService: (sourceId: string) => void; + onCreateArchitectureBoundary: (sourceId: string) => void; + onApplyArchitectureTemplate: (sourceId: string, templateId: ArchitectureTemplateId) => void; + onGenerateEntityFields: (nodeId: string) => Promise | void; + onSuggestArchitectureNode: (nodeId: string) => Promise | void; + onConvertEntitySelectionToClassDiagram: () => void; + onOpenMermaidCodeEditor: () => void; + onClose: () => void; } export const PropertiesPanel: React.FC = ({ - selectedNodes, - selectedNode, - selectedEdge, - onChangeNode, - onBulkChangeNodes, - onChangeEdge, - onDeleteNode, - onDuplicateNode, - onDeleteEdge, - onAddMindmapChild, - onAddMindmapSibling, - onAddArchitectureService, - onCreateArchitectureBoundary, - onApplyArchitectureTemplate, - onGenerateEntityFields, - onSuggestArchitectureNode, - onConvertEntitySelectionToClassDiagram, - onOpenMermaidCodeEditor, - onClose + selectedNodes, + selectedNode, + selectedEdge, + onChangeNode, + onBulkChangeNodes, + onChangeEdge, + onDeleteNode, + onDuplicateNode, + onDeleteEdge, + onFitSectionToContents, + onReleaseFromSection, + onBringContentsIntoSection, + onAddMindmapChild, + onAddMindmapSibling, + onAddArchitectureService, + onCreateArchitectureBoundary, + onApplyArchitectureTemplate, + onGenerateEntityFields, + onSuggestArchitectureNode, + onConvertEntitySelectionToClassDiagram, + onOpenMermaidCodeEditor, + onClose, }) => { - const { t } = useTranslation(); + const { t } = useTranslation(); - if (!selectedNode && !selectedEdge && selectedNodes.length < 2) return null; + if (!selectedNode && !selectedEdge && selectedNodes.length < 2) { + return ( + + + +
+ +

+ {t('propertiesPanel.noSelection', 'Nothing selected')} +

+

+ {t('propertiesPanel.selectHint', 'Click a node or edge to edit its properties')} +

+
+ + + ); + } - const isBulkEdit = selectedNodes.length > 1; - const panelTitle = isBulkEdit - ? `Bulk edit (${selectedNodes.length})` - : selectedEdge - ? t('propertiesPanel.connection') - : t('properties.title'); + const isBulkEdit = selectedNodes.length > 1; + const panelTitle = isBulkEdit + ? `Bulk edit (${selectedNodes.length})` + : selectedEdge + ? t('propertiesPanel.connection') + : t('properties.title'); - return ( - - + return ( + + - - {isBulkEdit && ( - - )} + + {isBulkEdit && ( + + )} - {selectedNode && !isBulkEdit && ( - - )} + {selectedNode && !isBulkEdit && ( + + )} - {selectedEdge && ( - - )} - - - ); + {selectedEdge && ( + + )} + + + ); }; diff --git a/src/components/RightRail.tsx b/src/components/RightRail.tsx index e2205fe5..9b9e049c 100644 --- a/src/components/RightRail.tsx +++ b/src/components/RightRail.tsx @@ -1,15 +1,13 @@ import React from 'react'; interface RightRailProps { - children: React.ReactNode; + children: React.ReactNode; } export function RightRail({ children }: RightRailProps): React.ReactElement { - return ( - - ); + return ( + + ); } diff --git a/src/components/SectionNode.tsx b/src/components/SectionNode.tsx index c1868e01..3aac8901 100644 --- a/src/components/SectionNode.tsx +++ b/src/components/SectionNode.tsx @@ -1,19 +1,37 @@ -import React, { memo } from 'react'; -import type { LegacyNodeProps } from '@/lib/reactflowCompat'; +import React, { memo, useMemo } from 'react'; +import { useNodes, type LegacyNodeProps } from '@/lib/reactflowCompat'; import type { NodeData } from '@/lib/types'; -import { Group } from 'lucide-react'; +import { getNodeParentId } from '@/lib/nodeParent'; +import { Group, Lock, EyeOff } from 'lucide-react'; import { NamedIcon } from './IconMap'; import { SECTION_COLOR_PALETTE } from '../theme'; import { useInlineNodeTextEdit } from '@/hooks/useInlineNodeTextEdit'; import { InlineTextEditSurface } from './InlineTextEditSurface'; import { NodeChrome } from './NodeChrome'; +import { useSelectionState } from '@/store/selectionHooks'; function SectionNode({ id, data, selected }: LegacyNodeProps): React.ReactElement { + const allNodes = useNodes(); + const { hoveredSectionId } = useSelectionState(); const color = data.color || 'blue'; const theme = SECTION_COLOR_PALETTE[color] || SECTION_COLOR_PALETTE.blue; const iconName = data.icon || 'Group'; const labelEdit = useInlineNodeTextEdit(id, 'label', data.label || ''); const subLabelEdit = useInlineNodeTextEdit(id, 'subLabel', data.subLabel || ''); + const childCount = useMemo( + () => allNodes.filter((node) => getNodeParentId(node) === id).length, + [allNodes, id] + ); + const isDropTarget = hoveredSectionId === id; + const isLocked = data.sectionLocked === true; + const isHidden = data.sectionHidden === true; + const outlineBorder = isDropTarget ? theme.title : theme.border; + const outlineBackground = isDropTarget + ? `color-mix(in srgb, ${theme.bg} 78%, white 22%)` + : theme.bg; + const badgeBackground = isDropTarget + ? 'color-mix(in srgb, white 32%, transparent)' + : 'color-mix(in srgb, white 24%, transparent)'; return ( ): React.R
@@ -47,8 +66,11 @@ function SectionNode({ id, data, selected }: LegacyNodeProps): React.R
{/* Title Bar */}
{iconName ? ( @@ -82,6 +104,25 @@ function SectionNode({ id, data, selected }: LegacyNodeProps): React.R isSelected={Boolean(selected)} /> )} + {isLocked ? ( + + + + ) : null} + {isHidden ? ( + + + + ) : null} + + {childCount} {childCount === 1 ? 'item' : 'items'} +
diff --git a/src/components/SettingsModal/AISettings.tsx b/src/components/SettingsModal/AISettings.tsx index 0686cae7..14a61a3a 100644 --- a/src/components/SettingsModal/AISettings.tsx +++ b/src/components/SettingsModal/AISettings.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React from 'react'; import { useFlowStore, AIProvider, AISettingsStorageMode } from '../../store'; import { Input } from '../ui/Input'; import { Label } from '../ui/Label'; @@ -17,36 +17,23 @@ import { buildDocsSiteUrl } from '@/docs/docsRoutes'; // Helper for logo with fallback function ProviderIcon({ p, isSelected }: { p: ProviderMeta; isSelected: boolean }): React.ReactElement { - const [imgError, setImgError] = useState(false); - - if (imgError) { - return {p.icon}; - } - - if (isSelected) { - return ( -
- ); - } + const iconColor = isSelected ? 'var(--brand-primary)' : 'var(--brand-secondary)'; return ( - {p.name} setImgError(true)} + ); } @@ -113,10 +100,10 @@ export function AISettings(): React.ReactElement { const providerRisk = getProviderRiskPresentation(currentProvider); const providerRiskIcon = providerRisk.tone === 'warning' ? AlertCircle : Info; const providerRiskClassName = providerRisk.tone === 'warning' - ? 'border-amber-200 bg-amber-50 text-amber-900' - : 'border-slate-200 bg-slate-50 text-slate-800'; + ? 'border-amber-500/25 bg-amber-500/10 text-amber-100' + : 'border-[var(--color-brand-border)] bg-[var(--brand-background)] text-[var(--brand-text)]'; const providerRiskIconClassName = providerRisk.tone === 'warning' - ? 'text-amber-500' + ? 'text-amber-400' : 'text-[var(--brand-primary)]'; const customBaseUrlError = currentProvider === 'custom' && readiness.blockingIssue?.detail.includes('base URL') ? readiness.blockingIssue.detail @@ -140,12 +127,12 @@ export function AISettings(): React.ReactElement { {/* Header Text */}
-

{t('settingsModal.flowpilotConfigurations', { defaultValue: 'Flowpilot Configuration' })}

+

{t('settingsModal.flowpilotConfigurations', { defaultValue: 'Flowpilot Configuration' })}

Prompting Guide
-

{t('ai.settingsSubtitle')}

+

{t('ai.settingsSubtitle')}

{/* Provider Section - Logo Dock */} @@ -158,7 +145,7 @@ export function AISettings(): React.ReactElement { const buttonClass = isSelected ? 'border-[var(--brand-primary)] bg-[var(--brand-primary)]/8 ring-2 ring-[var(--brand-primary)]/40 shadow-md' - : 'border-slate-200 bg-white hover:border-slate-300 hover:bg-slate-50'; + : 'border-[var(--color-brand-border)] bg-[var(--brand-surface)] hover:border-[var(--brand-secondary)] hover:bg-[var(--brand-background)]'; const iconWrapperClass = isSelected ? 'scale-100' @@ -166,7 +153,7 @@ export function AISettings(): React.ReactElement { const nameClass = isSelected ? 'text-[var(--brand-primary)]' - : 'text-slate-400'; + : 'text-[var(--brand-secondary)]'; return ( @@ -282,30 +271,30 @@ export function AISettings(): React.ReactElement { className={`rounded-[var(--radius-lg)] border px-3 py-3 text-left transition-colors ${ storageMode === 'session' ? 'border-[var(--brand-primary)] bg-[var(--brand-primary)]/6' - : 'border-slate-200 bg-white hover:border-slate-300' + : 'border-[var(--color-brand-border)] bg-[var(--brand-surface)] hover:border-[var(--brand-secondary)]' }`} > -

Session only

-

+

Session only

+

Forget this key when the browser session closes. Better for shared or temporary machines.

-

+

{storageMode === 'session' ? 'Session-only mode stores AI settings in session storage and clears them when the browser session ends.' : 'Persistent mode stores AI settings in local browser storage until you remove them or clear site data.'}

{aiSettings.apiKey && ( -
-

+

+

Clear the saved API key from this browser without resetting the selected provider or model.

@@ -314,9 +303,9 @@ export function AISettings(): React.ReactElement { {/* Show setup guide only when the key is empty */} {!aiSettings.apiKey && providerMeta.keyLink && ( -
-
- {t('settingsModal.ai.howToGetKey')} +
+
+ {t('settingsModal.ai.howToGetKey')} -
-
- {t('settingsModal.ai.customEndpointTitle')} +
+
+ {t('settingsModal.ai.customEndpointTitle')}
-

+

- Any OpenAI-compatible API endpoint — local or remote. Great for: + Any OpenAI-compatible API endpoint — local or remote. Great for:

{['ollama', 'lmStudio', 'together'].map(id => ( -
- {t(`settingsModal.ai.customEndpoints.${id}.name`)} - {t(`settingsModal.ai.customEndpoints.${id}.hint`)} +
+ {t(`settingsModal.ai.customEndpoints.${id}.name`)} + {t(`settingsModal.ai.customEndpoints.${id}.hint`)}
))}
@@ -367,9 +356,9 @@ export function AISettings(): React.ReactElement { error={customBaseUrlError} helperText="Use a full http:// or https:// base URL." /> -

+

- Must support POST /chat/completions (OpenAI format) + Must support POST /chat/completions (OpenAI format)

@@ -378,20 +367,20 @@ export function AISettings(): React.ReactElement { {/* Privacy Section - Improved Visibility */}
-
-
+
+
{t('settingsModal.ai.privacyTitle')}
    {BYOK_KEYS.map((item, i) => ( -
  • +
  • {t(`settingsModal.ai.byok.${item}`)}
    • ))}
-

+

{storageMode === 'session' ? 'AI settings stay only for this browser session. Close the browser to clear them, or clear the key manually if you are handing the machine to someone else.' : 'AI settings stay on this browser and device until you remove them. Treat shared browsers as untrusted and clear or rotate keys when needed.'} diff --git a/src/components/SettingsModal/CanvasSettings.tsx b/src/components/SettingsModal/CanvasSettings.tsx new file mode 100644 index 00000000..7c008d46 --- /dev/null +++ b/src/components/SettingsModal/CanvasSettings.tsx @@ -0,0 +1,278 @@ +import React from 'react'; +import { useTranslation } from 'react-i18next'; +import { useFlowStore } from '../../store'; +import { Switch } from '../ui/Switch'; +import { Grid, Magnet, Network, Zap } from 'lucide-react'; +import type { GlobalEdgeOptions } from '@/lib/types'; +import { useViewSettings, useVisualSettingsActions } from '@/store/viewHooks'; + +export function CanvasSettings(): React.ReactElement { + const { t } = useTranslation(); + const viewSettings = useViewSettings(); + const globalEdgeOptions = useFlowStore((state) => state.globalEdgeOptions); + const { + toggleGrid, + toggleSnap, + setGlobalEdgeOptions, + setDefaultIconsEnabled, + setSmartRoutingEnabled, + setSmartRoutingProfile, + setSmartRoutingBundlingEnabled, + setViewSettings, + setLargeGraphSafetyMode, + setLargeGraphSafetyProfile, + } = useVisualSettingsActions(); + + return ( +

+
+

+ {t('settingsModal.canvas.title')} +

+
+ } + label={t('settingsModal.canvas.showGrid')} + description={t('settingsModal.canvas.showGridDesc')} + checked={viewSettings.showGrid} + onChange={toggleGrid} + /> + } + label={t('settingsModal.canvas.snapToGrid')} + description={t('settingsModal.canvas.snapToGridDesc')} + checked={viewSettings.snapToGrid} + onChange={toggleSnap} + /> + } + label={t('settingsModal.canvas.alignmentGuides', 'Alignment Guides')} + description={t( + 'settingsModal.canvas.alignmentGuidesDesc', + 'Show smart guide lines while dragging nodes' + )} + checked={viewSettings.alignmentGuidesEnabled} + onChange={(checked) => setViewSettings({ alignmentGuidesEnabled: checked })} + /> +
+
+ +
+

+ {t('commandBar.visuals.title', 'Connection Styles')} +

+
+
+ +
+ {[ + { type: 'default', label: t('commandBar.visuals.bezier') }, + { type: 'straight', label: t('commandBar.visuals.straight') }, + { type: 'smoothstep', label: t('commandBar.visuals.smoothStep') }, + { type: 'step', label: t('commandBar.visuals.step') }, + ].map((style) => ( + + ))} +
+
+ + } + label={t('commandBar.visuals.intelligentRouting')} + description={t('commandBar.visuals.intelligentRoutingDesc')} + checked={viewSettings.smartRoutingEnabled} + onChange={setSmartRoutingEnabled} + /> +
+ +
+ {[ + { + profile: 'standard', + label: t('settingsModal.canvas.routingProfileStandard', 'Standard'), + }, + { + profile: 'infrastructure', + label: t('settingsModal.canvas.routingProfileInfrastructure', 'Infrastructure'), + }, + ].map((option) => ( + + ))} +
+

+ {t( + 'settingsModal.canvas.routingProfileHint', + 'Infrastructure mode biases orthogonal routes for service maps.' + )} +

+
+ } + label={t('settingsModal.canvas.edgeBundling', 'Bundle Sibling Edges')} + description={t( + 'settingsModal.canvas.edgeBundlingDesc', + 'Keep parallel connections on shared lanes' + )} + checked={viewSettings.smartRoutingBundlingEnabled} + onChange={setSmartRoutingBundlingEnabled} + /> + } + label={t('commandBar.visuals.animatedEdges')} + description={t('commandBar.visuals.animatedEdgesDesc')} + checked={globalEdgeOptions.animated} + onChange={(checked) => setGlobalEdgeOptions({ animated: checked })} + /> + } + label={t('commandBar.visuals.defaultIcons')} + description={t('commandBar.visuals.defaultIconsDesc')} + checked={viewSettings.defaultIconsEnabled} + onChange={setDefaultIconsEnabled} + /> + } + label={t('settingsModal.canvas.architectureStrictMode', 'Architecture Strict Mode')} + description={t( + 'settingsModal.canvas.architectureStrictModeDesc', + 'Block Mermaid import when architecture diagnostics include recovery/validation issues' + )} + checked={viewSettings.architectureStrictMode} + onChange={(checked) => setViewSettings({ architectureStrictMode: checked })} + /> + +
+ +
+ {[1, 2, 3, 4, 5].map((width) => ( + + ))} +
+
+ +
+ +
+ {[ + { mode: 'auto', label: t('commandBar.visuals.largeGraphSafetyAuto', 'Auto') }, + { mode: 'on', label: t('commandBar.visuals.largeGraphSafetyOn', 'On') }, + { mode: 'off', label: t('commandBar.visuals.largeGraphSafetyOff', 'Off') }, + ].map((option) => ( + + ))} +
+ +
+ {[ + { profile: 'performance', label: 'Performance' }, + { profile: 'balanced', label: 'Balanced' }, + { profile: 'quality', label: 'Quality' }, + ].map((option) => ( + + ))} +
+

+ Performance starts safety at 100 nodes, Balanced at 300, Quality at 500. +

+
+
+
+
+ ); +} + +const SettingRow = ({ + icon, + label, + description, + checked, + onChange, +}: { + icon: React.ReactNode; + label: string; + description: string; + checked: boolean; + onChange: (value: boolean) => void; +}): React.ReactElement => ( +
+
+
+ {icon} +
+
+

{label}

+

{description}

+
+
+ +
+); diff --git a/src/components/SettingsModal/GeneralSettings.tsx b/src/components/SettingsModal/GeneralSettings.tsx index d3feb543..d21fbc18 100644 --- a/src/components/SettingsModal/GeneralSettings.tsx +++ b/src/components/SettingsModal/GeneralSettings.tsx @@ -1,266 +1,114 @@ import React from 'react'; import { useTranslation } from 'react-i18next'; -import { useFlowStore } from '../../store'; import { Switch } from '../ui/Switch'; -import { Grid, Magnet, Network, Zap } from 'lucide-react'; +import { Moon, Sun, Zap } from 'lucide-react'; import { useAnalyticsPreference } from '@/hooks/useAnalyticsPreference'; -import type { GlobalEdgeOptions } from '@/lib/types'; -import { useViewSettings, useVisualSettingsActions } from '@/store/viewHooks'; +import { useTheme } from '@/context/ThemeContext'; -export const GeneralSettings = () => { - const { t } = useTranslation(); - const viewSettings = useViewSettings(); - const globalEdgeOptions = useFlowStore((state) => state.globalEdgeOptions); - const [analyticsEnabled, setAnalyticsEnabled] = useAnalyticsPreference(); - const { - toggleGrid, - toggleSnap, - setGlobalEdgeOptions, - setDefaultIconsEnabled, - setSmartRoutingEnabled, - setSmartRoutingProfile, - setSmartRoutingBundlingEnabled, - setViewSettings, - setLargeGraphSafetyMode, - setLargeGraphSafetyProfile, - } = useVisualSettingsActions(); - - return ( -
-
-

{t('settingsModal.canvas.title')}

-
- } - label={t('settingsModal.canvas.showGrid')} - description={t('settingsModal.canvas.showGridDesc')} - checked={viewSettings.showGrid} - onChange={toggleGrid} - /> - } - label={t('settingsModal.canvas.snapToGrid')} - description={t('settingsModal.canvas.snapToGridDesc')} - checked={viewSettings.snapToGrid} - onChange={toggleSnap} - /> - } - label={t('settingsModal.canvas.alignmentGuides', 'Alignment Guides')} - description={t('settingsModal.canvas.alignmentGuidesDesc', 'Show smart guide lines while dragging nodes')} - checked={viewSettings.alignmentGuidesEnabled} - onChange={(checked) => setViewSettings({ alignmentGuidesEnabled: checked })} - /> -
-
- -
-

- {t('settings.analytics', 'Analytics')} -

-
- } - label={t('settingsModal.analytics.enableTitle', 'Anonymous Launch Analytics')} - description={t( - 'settingsModal.analytics.enableDescription', - 'Track coarse product events and reliability issues only. We do not send diagram content, prompts, file contents, or API keys.' - )} - checked={analyticsEnabled} - onChange={setAnalyticsEnabled} - /> -
-
- -
-

- {t('commandBar.visuals.title', 'Connection Styles')} -

-
-
- -
- {[ - { type: 'default', label: t('commandBar.visuals.bezier') }, - { type: 'straight', label: t('commandBar.visuals.straight') }, - { type: 'smoothstep', label: t('commandBar.visuals.smoothStep') }, - { type: 'step', label: t('commandBar.visuals.step') }, - ].map((style) => ( - - ))} -
-
+type ThemeOption = { + value: 'light' | 'dark' | 'system'; + icon: React.ReactNode; + label: string; +}; - } - label={t('commandBar.visuals.intelligentRouting')} - description={t('commandBar.visuals.intelligentRoutingDesc')} - checked={viewSettings.smartRoutingEnabled} - onChange={(checked) => setSmartRoutingEnabled(checked)} - /> -
- -
- {[ - { profile: 'standard', label: t('settingsModal.canvas.routingProfileStandard', 'Standard') }, - { profile: 'infrastructure', label: t('settingsModal.canvas.routingProfileInfrastructure', 'Infrastructure') }, - ].map((option) => ( - - ))} -
-

- {t('settingsModal.canvas.routingProfileHint', 'Infrastructure mode biases orthogonal routes for service maps.')} -

-
- } - label={t('settingsModal.canvas.edgeBundling', 'Bundle Sibling Edges')} - description={t('settingsModal.canvas.edgeBundlingDesc', 'Keep parallel connections on shared lanes')} - checked={viewSettings.smartRoutingBundlingEnabled} - onChange={(checked) => setSmartRoutingBundlingEnabled(checked)} - /> - } - label={t('commandBar.visuals.animatedEdges')} - description={t('commandBar.visuals.animatedEdgesDesc')} - checked={globalEdgeOptions.animated} - onChange={(checked) => setGlobalEdgeOptions({ animated: checked })} - /> - } - label={t('commandBar.visuals.defaultIcons')} - description={t('commandBar.visuals.defaultIconsDesc')} - checked={viewSettings.defaultIconsEnabled} - onChange={(checked) => setDefaultIconsEnabled(checked)} - /> - } - label={t('settingsModal.canvas.architectureStrictMode', 'Architecture Strict Mode')} - description={t('settingsModal.canvas.architectureStrictModeDesc', 'Block Mermaid import when architecture diagnostics include recovery/validation issues')} - checked={viewSettings.architectureStrictMode} - onChange={(checked) => setViewSettings({ architectureStrictMode: checked })} - /> +export function GeneralSettings(): React.ReactElement { + const { t } = useTranslation(); + const [analyticsEnabled, setAnalyticsEnabled] = useAnalyticsPreference(); + const { theme, setTheme } = useTheme(); + const themeOptions: ThemeOption[] = [ + { + value: 'light', + icon: , + label: t('settings.themeLight', 'Light'), + }, + { + value: 'dark', + icon: , + label: t('settings.themeDark', 'Dark'), + }, + { + value: 'system', + icon: ( + <> + + + + ), + label: t('settings.themeSystem', 'System'), + }, + ]; -
- -
- {[1, 2, 3, 4, 5].map((width) => ( - - ))} -
-
+ return ( +
+
+

+ {t('settings.analytics', 'Analytics')} +

+
+ } + label={t('settingsModal.analytics.enableTitle', 'Anonymous Launch Analytics')} + description={t( + 'settingsModal.analytics.enableDescription', + 'Track coarse product events and reliability issues only. We do not send diagram content, prompts, file contents, or API keys.' + )} + checked={analyticsEnabled} + onChange={setAnalyticsEnabled} + /> +
+
-
- -
- {[ - { mode: 'auto', label: t('commandBar.visuals.largeGraphSafetyAuto', 'Auto') }, - { mode: 'on', label: t('commandBar.visuals.largeGraphSafetyOn', 'On') }, - { mode: 'off', label: t('commandBar.visuals.largeGraphSafetyOff', 'Off') }, - ].map((option) => ( - - ))} -
- -
- {[ - { profile: 'performance', label: 'Performance' }, - { profile: 'balanced', label: 'Balanced' }, - { profile: 'quality', label: 'Quality' }, - ].map((option) => ( - - ))} -
-

- Performance starts safety at 100 nodes, Balanced at 300, Quality at 500. -

-
-
-
+
+

+ {t('settings.theme', 'Appearance')} +

+
+ {themeOptions.map((option) => ( + + ))}
- ); -}; +
+
+ ); +} -const SettingRow = ({ - icon, label, description, checked, onChange +function SettingRow({ + icon, + label, + description, + checked, + onChange, }: { - icon: React.ReactNode; - label: string; - description: string; - checked: boolean; - onChange: (v: boolean) => void; -}) => ( + icon: React.ReactNode; + label: string; + description: string; + checked: boolean; + onChange: (v: boolean) => void; +}): React.ReactElement { + return (
-
-
- {icon} -
-
-

{label}

-

{description}

-
+
+
+ {icon} +
+
+

{label}

+

{description}

- +
+
-); + ); +} diff --git a/src/components/SettingsModal/SettingsModal.test.tsx b/src/components/SettingsModal/SettingsModal.test.tsx index 46c5eba2..fb202e35 100644 --- a/src/components/SettingsModal/SettingsModal.test.tsx +++ b/src/components/SettingsModal/SettingsModal.test.tsx @@ -12,6 +12,10 @@ vi.mock('./GeneralSettings', () => ({ GeneralSettings: () =>
General content
, })); +vi.mock('./CanvasSettings', () => ({ + CanvasSettings: () =>
Canvas settings content
, +})); + vi.mock('./AISettings', () => ({ AISettings: () =>
AI settings content
, })); @@ -51,4 +55,11 @@ describe('SettingsModal', () => { expect(screen.getByText('AI settings content')).toBeInTheDocument(); expect(screen.getByRole('heading', { name: 'AI' })).toBeInTheDocument(); }); + + it('renders the canvas settings tab when opened with the canvas tab selected', () => { + render(); + + expect(screen.getByText('Canvas settings content')).toBeInTheDocument(); + expect(screen.getByRole('heading', { name: 'Canvas' })).toBeInTheDocument(); + }); }); diff --git a/src/components/SettingsModal/SettingsModal.tsx b/src/components/SettingsModal/SettingsModal.tsx index 10d1e8f2..7f6a26a0 100644 --- a/src/components/SettingsModal/SettingsModal.tsx +++ b/src/components/SettingsModal/SettingsModal.tsx @@ -1,135 +1,162 @@ import React, { useEffect, useRef, useState } from 'react'; -import { X, Settings, Keyboard, WandSparkles } from 'lucide-react'; +import { X, Settings, Keyboard, PenSquare, WandSparkles } from 'lucide-react'; import { createPortal } from 'react-dom'; import { useTranslation } from 'react-i18next'; import { AISettings } from './AISettings'; +import { CanvasSettings } from './CanvasSettings'; import { GeneralSettings } from './GeneralSettings'; import { ShortcutsSettings } from './ShortcutsSettings'; import { SidebarItem } from '../ui/SidebarItem'; interface SettingsModalProps { - isOpen: boolean; - onClose: () => void; - initialTab?: 'general' | 'shortcuts' | 'ai'; + isOpen: boolean; + onClose: () => void; + initialTab?: 'general' | 'canvas' | 'shortcuts' | 'ai'; } interface OpenSettingsModalContentProps { - onClose: () => void; - initialTab: 'general' | 'shortcuts' | 'ai'; + onClose: () => void; + initialTab: 'general' | 'canvas' | 'shortcuts' | 'ai'; } -function OpenSettingsModalContent({ onClose, initialTab }: OpenSettingsModalContentProps): React.ReactElement { - const { t } = useTranslation(); - const [activeTab, setActiveTab] = useState<'general' | 'shortcuts' | 'ai'>(initialTab); - const closeButtonRef = useRef(null); - - useEffect(() => { - closeButtonRef.current?.focus(); - - function handleEscape(event: KeyboardEvent): void { - if (event.key === 'Escape') { - onClose(); - } - } - - window.addEventListener('keydown', handleEscape); - return () => window.removeEventListener('keydown', handleEscape); - }, [onClose]); - - return ( -
-
e.stopPropagation()} - > - {/* Sidebar */} -
-

- {t('settingsModal.settings', 'Settings')} -

- - } - isActive={activeTab === 'general'} - onClick={() => setActiveTab('general')} - className="whitespace-nowrap w-auto md:w-full px-4 md:px-3 py-2 md:py-2.5 flex-none" - > - {t('settingsModal.general', 'General')} - - - } - isActive={activeTab === 'ai'} - onClick={() => setActiveTab('ai')} - className="whitespace-nowrap w-auto md:w-full px-4 md:px-3 py-2 md:py-2.5 flex-none" - > - {t('settings.ai', 'AI')} - - - } - isActive={activeTab === 'shortcuts'} - onClick={() => setActiveTab('shortcuts')} - className="whitespace-nowrap w-auto md:w-full px-4 md:px-3 py-2 md:py-2.5 flex-none" - > - {t('settingsModal.shortcuts', 'Shortcuts')} - -
- - {/* Content */} -
-
-

- {{ - general: t('settingsModal.canvasSettings', 'Canvas Settings'), - ai: t('settings.ai', 'AI'), - shortcuts: t('settingsModal.keyboardShortcuts', 'Keyboard Shortcuts'), - }[activeTab]} -

-

- {t('settingsModal.description', 'Configure canvas preferences and keyboard shortcuts.')} -

- -
- -
-
- {activeTab === 'general' && } - {activeTab === 'ai' && } - {activeTab === 'shortcuts' && } -
-
-
-
+function OpenSettingsModalContent({ + onClose, + initialTab, +}: OpenSettingsModalContentProps): React.ReactElement { + const { t } = useTranslation(); + const [activeTab, setActiveTab] = useState<'general' | 'canvas' | 'shortcuts' | 'ai'>(initialTab); + const closeButtonRef = useRef(null); + + useEffect(() => { + closeButtonRef.current?.focus(); + + function handleEscape(event: KeyboardEvent): void { + if (event.key === 'Escape') { + onClose(); + } + } + + window.addEventListener('keydown', handleEscape); + return () => window.removeEventListener('keydown', handleEscape); + }, [onClose]); + + return ( +
+
e.stopPropagation()} + > + {/* Sidebar */} +
+

+ {t('settingsModal.settings', 'Settings')} +

+ + } + isActive={activeTab === 'general'} + onClick={() => setActiveTab('general')} + className="whitespace-nowrap w-auto md:w-full px-4 md:px-3 py-2 md:py-2.5 flex-none" + > + {t('settingsModal.general', 'General')} + + + } + isActive={activeTab === 'canvas'} + onClick={() => setActiveTab('canvas')} + className="whitespace-nowrap w-auto md:w-full px-4 md:px-3 py-2 md:py-2.5 flex-none" + > + {t('settings.canvas', 'Canvas')} + - {/* Backdrop click to close */} + } + isActive={activeTab === 'ai'} + onClick={() => setActiveTab('ai')} + className="whitespace-nowrap w-auto md:w-full px-4 md:px-3 py-2 md:py-2.5 flex-none" + > + {t('settings.ai', 'AI')} + + + } + isActive={activeTab === 'shortcuts'} + onClick={() => setActiveTab('shortcuts')} + className="whitespace-nowrap w-auto md:w-full px-4 md:px-3 py-2 md:py-2.5 flex-none" + > + {t('settingsModal.shortcuts', 'Shortcuts')} + +
+ + {/* Content */} +
+
+

+ { + { + general: t('settingsModal.canvasSettings', 'Canvas Settings'), + canvas: t('settings.canvas', 'Canvas'), + ai: t('settings.ai', 'AI'), + shortcuts: t('settingsModal.keyboardShortcuts', 'Keyboard Shortcuts'), + }[activeTab] + } +

+

+ {t( + 'settingsModal.description', + 'Configure canvas preferences and keyboard shortcuts.' + )} +

+
+ +
+
+ {activeTab === 'general' && } + {activeTab === 'canvas' && } + {activeTab === 'ai' && } + {activeTab === 'shortcuts' && } +
+
- ); +
+ + {/* Backdrop click to close */} +
+ ); } -export const SettingsModal: React.FC = ({ isOpen, onClose, initialTab = 'general' }) => { - if (!isOpen) return null; +export const SettingsModal: React.FC = ({ + isOpen, + onClose, + initialTab = 'general', +}) => { + if (!isOpen) return null; - return createPortal( - , - document.body - ); + return createPortal( + , + document.body + ); }; diff --git a/src/components/SettingsModal/ShortcutsSettings.tsx b/src/components/SettingsModal/ShortcutsSettings.tsx index 2a183d13..415eba76 100644 --- a/src/components/SettingsModal/ShortcutsSettings.tsx +++ b/src/components/SettingsModal/ShortcutsSettings.tsx @@ -3,44 +3,60 @@ import { useTranslation } from 'react-i18next'; import { getKeyboardShortcuts, isMacLikePlatform } from '../../constants'; export const ShortcutsSettings = () => { - const { t } = useTranslation(); - const keyboardShortcuts = useMemo( - () => getKeyboardShortcuts(typeof navigator !== 'undefined' && isMacLikePlatform(navigator.platform || navigator.userAgent)), - [] - ); - return ( -
- {keyboardShortcuts.map((section) => ( -
-
-

{t(section.title)}

-
-
- {section.items.map((item) => ( -
- {t(item.label)} -
- {item.shortcuts.map((shortcut, shortcutIndex) => ( - - {shortcutIndex > 0 ? / : null} -
- {shortcut.map((key, keyIndex) => ( - - {key} - - ))} -
- - ))} -
-
+ const { t } = useTranslation(); + const keyboardShortcuts = useMemo( + () => + getKeyboardShortcuts( + typeof navigator !== 'undefined' && + isMacLikePlatform(navigator.platform || navigator.userAgent) + ), + [] + ); + return ( +
+ {keyboardShortcuts.map((section) => ( +
+
+

{t(section.title)}

+
+
+ {section.items.map((item) => ( +
+ + {t(item.label)} + +
+ {item.shortcuts.map((shortcut, shortcutIndex) => ( + + {shortcutIndex > 0 ? ( + + / + + ) : null} +
+ {shortcut.map((key, keyIndex) => ( + + {key} + ))} -
+
+ + ))}
+
))} -
- {t('settingsModal.shortcutsHint')} -
+
- ); + ))} +
+ {t('settingsModal.shortcutsHint')} +
+
+ ); }; diff --git a/src/components/SettingsModal/ai/AdvancedEndpointSection.tsx b/src/components/SettingsModal/ai/AdvancedEndpointSection.tsx index 611e83f4..3d5ed5d1 100644 --- a/src/components/SettingsModal/ai/AdvancedEndpointSection.tsx +++ b/src/components/SettingsModal/ai/AdvancedEndpointSection.tsx @@ -27,16 +27,16 @@ export function AdvancedEndpointSection({ const { t } = useTranslation(); return ( -
+
{showAdvancedEndpoint && (
@@ -47,7 +47,7 @@ export function AdvancedEndpointSection({ placeholder={defaultBaseUrl || 'https://your-proxy.example.com/v1'} />
-

+

{t('settingsModal.ai.baseUrlHint', { defaultValue: 'Leave empty to use provider default endpoint. Use this for your own proxy/worker URL.', })} @@ -56,15 +56,15 @@ export function AdvancedEndpointSection({ type="button" onClick={onResetCustomBaseUrl} disabled={!customBaseUrl} - className="shrink-0 text-[10px] font-semibold text-slate-600 hover:text-slate-800 disabled:opacity-40 disabled:cursor-not-allowed" + className="shrink-0 text-[10px] font-semibold text-[var(--brand-secondary)] hover:text-[var(--brand-text)] disabled:opacity-40 disabled:cursor-not-allowed" > {t('settingsModal.ai.resetEndpoint', { defaultValue: 'Reset to default' })}

{(currentProvider === 'custom' || currentProvider === 'openrouter' || !!customBaseUrl) && ( -

+

- Must support POST /chat/completions (OpenAI format) + Must support POST /chat/completions (OpenAI format)

)} diff --git a/src/components/SettingsModal/ai/CustomHeadersEditor.tsx b/src/components/SettingsModal/ai/CustomHeadersEditor.tsx index 7592f480..69c80503 100644 --- a/src/components/SettingsModal/ai/CustomHeadersEditor.tsx +++ b/src/components/SettingsModal/ai/CustomHeadersEditor.tsx @@ -22,13 +22,13 @@ export function CustomHeadersEditor({ const { t } = useTranslation(); return ( -
+
-

+

{t('settingsModal.ai.customHeadersTitle', { defaultValue: 'Custom Headers' })}

-

+

{t('settingsModal.ai.customHeadersSubtitle', { defaultValue: 'Send extra headers for auth proxies like Cloudflare Access.' })}

@@ -36,7 +36,7 @@ export function CustomHeadersEditor({
{customHeaders.length === 0 && ( -

+

{t('settingsModal.ai.customHeadersEmpty', { defaultValue: 'No custom headers configured.' })}

)} @@ -85,7 +85,7 @@ export function CustomHeadersEditor({
))} -

+

{t('settingsModal.ai.customHeadersSecurity', { defaultValue: 'Header values are stored locally in your browser profile.' })}

diff --git a/src/components/SettingsModal/ai/PrivacySection.tsx b/src/components/SettingsModal/ai/PrivacySection.tsx index 7e58c73b..57fa7d8b 100644 --- a/src/components/SettingsModal/ai/PrivacySection.tsx +++ b/src/components/SettingsModal/ai/PrivacySection.tsx @@ -8,14 +8,14 @@ export function PrivacySection(): React.ReactElement { return (
-
-
+
+
{t('settingsModal.ai.privacyTitle')}
    {BYOK_KEYS.map((item, i) => ( -
  • +
  • {t(`settingsModal.ai.byok.${item}`)}
    • diff --git a/src/components/SettingsModal/ai/ProviderSection.tsx b/src/components/SettingsModal/ai/ProviderSection.tsx index 440b74bd..0272ff80 100644 --- a/src/components/SettingsModal/ai/ProviderSection.tsx +++ b/src/components/SettingsModal/ai/ProviderSection.tsx @@ -18,7 +18,7 @@ function getRiskStyles(providerRisk: 'browser_friendly' | 'proxy_likely' | 'mixe if (providerRisk === 'proxy_likely') { return 'bg-amber-50 border-amber-200 text-amber-700'; } - return 'bg-slate-100 border-slate-200 text-slate-600'; + return 'bg-[var(--brand-background)] border-[var(--color-brand-border)] text-[var(--brand-secondary)]'; } function getRiskLabel(t: (key: string, options?: Record) => string, providerRisk: 'browser_friendly' | 'proxy_likely' | 'mixed'): string { @@ -47,13 +47,13 @@ export function ProviderSection({ const isSelected = currentProvider === provider.id; const buttonClass = isSelected ? 'border-[var(--brand-primary)] bg-[var(--brand-primary)]/8 ring-2 ring-[var(--brand-primary)]/40 shadow-md' - : 'border-slate-200 bg-white hover:border-slate-300 hover:bg-slate-50'; + : 'border-[var(--color-brand-border)] bg-[var(--brand-surface)] hover:border-[var(--brand-secondary)] hover:bg-[var(--brand-background)]'; const iconWrapperClass = isSelected ? 'scale-100' : 'scale-[0.7] opacity-60 group-hover:opacity-90 group-hover:scale-80'; const nameClass = isSelected ? 'text-[var(--brand-primary)]' - : 'text-slate-400'; + : 'text-[var(--brand-secondary)]'; return (
-

{value}

+

{value}

); } @@ -63,15 +63,15 @@ export function ShareEmbedModal({ viewerUrl, onClose }: ShareEmbedModalProps): R aria-modal="true" aria-labelledby="share-embed-title" aria-describedby="share-embed-description" - className="relative mx-4 w-full max-w-md rounded-[var(--radius-xl)] border border-white/20 bg-white shadow-[var(--shadow-overlay)] ring-1 ring-black/5 animate-in fade-in zoom-in-95 duration-150" + className="relative mx-4 w-full max-w-md rounded-[var(--radius-xl)] border border-[var(--color-brand-border)] bg-[var(--brand-surface)] text-[var(--brand-text)] shadow-[var(--shadow-overlay)] ring-1 ring-black/5 animate-in fade-in zoom-in-95 duration-150" onClick={(e) => e.stopPropagation()} > -
+
-

Share and embed diagram

-

Viewer links are read-only and encode the diagram directly in the URL.

+

Share and embed diagram

+

Viewer links are read-only and encode the diagram directly in the URL.

-
@@ -86,15 +86,15 @@ export function ShareEmbedModal({ viewerUrl, onClose }: ShareEmbedModalProps): R href={cardViewerUrl} target="_blank" rel="noopener noreferrer" - className="flex items-center justify-center gap-2 rounded-[var(--radius-sm)] border border-slate-200 py-2 text-xs font-medium text-slate-600 hover:bg-slate-50 hover:text-[var(--brand-primary)] transition-colors" + className="flex items-center justify-center gap-2 rounded-[var(--radius-sm)] border border-[var(--color-brand-border)] py-2 text-xs font-medium text-[var(--brand-secondary)] transition-colors hover:bg-[var(--brand-background)] hover:text-[var(--brand-primary)]" > Open card viewer
-
-

+

+

GitHub README usage should prefer the Markdown link. Blog posts and docs can use the iframe snippet with `size=card` or `size=badge`.

diff --git a/src/components/ShareModal.tsx b/src/components/ShareModal.tsx index 0c272748..85b0e527 100644 --- a/src/components/ShareModal.tsx +++ b/src/components/ShareModal.tsx @@ -83,7 +83,7 @@ export function ShareModal({ aria-labelledby="share-modal-title" aria-describedby="share-modal-description" data-testid="share-panel" - className="w-full max-w-md overflow-hidden border border-slate-200/70 bg-white shadow-[var(--shadow-overlay)] animate-in zoom-in-95 duration-200" + className="w-full max-w-md overflow-hidden border border-[var(--color-brand-border)] bg-[var(--brand-surface)] shadow-[var(--shadow-overlay)] animate-in zoom-in-95 duration-200" style={{ borderRadius: modalRadius }} onClick={(event) => event.stopPropagation()} > @@ -91,7 +91,7 @@ export function ShareModal({
-

+

{t('share.title', { defaultValue: SHARE_MODAL_COPY.title })} {t('share.betaBadge', { defaultValue: SHARE_MODAL_COPY.betaBadge })}

-

+

{t('share.description', { defaultValue: SHARE_MODAL_COPY.description })}

-
-
+
+
{t('share.roomId', { defaultValue: SHARE_MODAL_COPY.roomLabel })}
-
{roomId}
+
{roomId}
-
-
+
+
{t('share.link', { defaultValue: SHARE_MODAL_COPY.linkLabel })}
-
-

{inviteUrl}

+
+

{inviteUrl}

-

{statusMessage}

+

{statusMessage}

diff --git a/src/components/SidebarShell.tsx b/src/components/SidebarShell.tsx index 8ff24628..6a4ff4ed 100644 --- a/src/components/SidebarShell.tsx +++ b/src/components/SidebarShell.tsx @@ -1,120 +1,124 @@ import React from 'react'; import { X } from 'lucide-react'; +import { useTranslation } from 'react-i18next'; interface SidebarTabItem { - id: string; - label: string; - icon?: React.ReactNode; + id: string; + label: string; + icon?: React.ReactNode; } interface SidebarShellProps { - children: React.ReactNode; + children: React.ReactNode; } interface SidebarHeaderProps { - title: React.ReactNode; - description?: React.ReactNode; - meta?: React.ReactNode; - onClose?: () => void; + title: React.ReactNode; + description?: React.ReactNode; + meta?: React.ReactNode; + onClose?: () => void; } interface SidebarBodyProps { - children: React.ReactNode; - className?: string; - scrollable?: boolean; + children: React.ReactNode; + className?: string; + scrollable?: boolean; } interface SidebarSegmentedTabsProps { - tabs: SidebarTabItem[]; - activeTab: string; - onTabChange: (tab: string) => void; - getTabTestId?: (tab: SidebarTabItem) => string | undefined; + tabs: SidebarTabItem[]; + activeTab: string; + onTabChange: (tab: string) => void; + getTabTestId?: (tab: SidebarTabItem) => string | undefined; } function getSidebarTabButtonClass(isActive: boolean): string { - if (isActive) { - return 'bg-white text-[var(--brand-primary)] shadow-sm ring-1 ring-slate-200/70'; - } + if (isActive) { + return 'bg-[var(--brand-surface)] text-[var(--brand-primary)] shadow-sm ring-1 ring-[var(--color-brand-border)]/70'; + } - return 'text-[var(--brand-secondary)] hover:text-[var(--brand-text)]'; + return 'text-[var(--brand-secondary)] hover:text-[var(--brand-text)]'; } export function SidebarShell({ children }: SidebarShellProps): React.ReactElement { - return ( -
event.stopPropagation()} - onPointerDown={(event) => event.stopPropagation()} - > - {children} -
- ); + return ( +
event.stopPropagation()} + onPointerDown={(event) => event.stopPropagation()} + > + {children} +
+ ); } export function SidebarHeader({ - title, - description, - meta, - onClose, + title, + description, + meta, + onClose, }: SidebarHeaderProps): React.ReactElement { - return ( -
-
-
-

{title}

- {description ? ( -

{description}

- ) : null} -
- {onClose ? ( - - ) : null} -
- {meta ?
{meta}
: null} + const { t } = useTranslation(); + return ( +
+
+
+

{title}

+ {description ? ( +

{description}

+ ) : null}
- ); + {onClose ? ( + + ) : null} +
+ {meta ?
{meta}
: null} +
+ ); } export function SidebarBody({ - children, - className = '', - scrollable = true, + children, + className = '', + scrollable = true, }: SidebarBodyProps): React.ReactElement { - const overflowClassName = scrollable ? 'overflow-y-auto' : 'overflow-hidden'; + const overflowClassName = scrollable ? 'overflow-y-auto' : 'overflow-hidden'; - return ( -
- {children} -
- ); + return ( +
+ {children} +
+ ); } export function SidebarSegmentedTabs({ - tabs, - activeTab, - onTabChange, - getTabTestId, + tabs, + activeTab, + onTabChange, + getTabTestId, }: SidebarSegmentedTabsProps): React.ReactElement { - return ( -
- {tabs.map(({ id, label, icon }) => ( - - ))} -
- ); + return ( +
+ {tabs.map(({ id, label, icon }) => ( + + ))} +
+ ); } diff --git a/src/components/SnapshotsPanel.tsx b/src/components/SnapshotsPanel.tsx index 7690a15d..8a395313 100644 --- a/src/components/SnapshotsPanel.tsx +++ b/src/components/SnapshotsPanel.tsx @@ -37,8 +37,8 @@ function SnapshotCardList({ deleteVersionTitle, nodesLabel, edgesLabel, - cardClassName = 'group p-3 rounded-[var(--radius-md)] border border-slate-200 bg-slate-50 hover:bg-white hover:border-[var(--brand-primary-200)] transition-all', - titleClassName = 'text-sm font-semibold text-slate-800', + cardClassName = 'group rounded-[var(--radius-md)] border border-[var(--color-brand-border)] bg-[var(--brand-background)] p-3 transition-all hover:border-[var(--brand-primary-200)] hover:bg-[var(--brand-surface)]', + titleClassName = 'text-sm font-semibold text-[var(--brand-text)]', }: SnapshotCardListProps): React.ReactElement { return ( <> @@ -47,7 +47,7 @@ function SnapshotCardList({

{snapshot.name}

-

{new Date(snapshot.timestamp).toLocaleString()}

+

{new Date(snapshot.timestamp).toLocaleString()}

{onCompareSnapshot && ( @@ -56,7 +56,7 @@ function SnapshotCardList({ onClick={() => onCompareSnapshot(snapshot)} aria-label="Compare snapshot with current diagram" title="Compare with current" - className="p-1.5 text-slate-500 hover:bg-slate-100 hover:text-[var(--brand-primary)] rounded-[var(--radius-sm)] transition-colors" + className="rounded-[var(--radius-sm)] p-1.5 text-[var(--brand-secondary)] transition-colors hover:bg-[var(--brand-surface)] hover:text-[var(--brand-primary)]" > @@ -76,15 +76,15 @@ function SnapshotCardList({ onClick={() => onDeleteSnapshot(snapshot.id)} aria-label={`${deleteVersionTitle}: ${snapshot.name}`} title={deleteVersionTitle} - className="p-1.5 text-red-600 hover:bg-red-50 rounded-[var(--radius-sm)] transition-colors" + className="rounded-[var(--radius-sm)] p-1.5 text-red-500 transition-colors hover:bg-red-500/10" >
-
- {nodesLabel(snapshot.nodes.length)} - {edgesLabel(snapshot.edges.length)} +
+ {nodesLabel(snapshot.nodes.length)} + {edgesLabel(snapshot.edges.length)}
))} @@ -120,19 +120,19 @@ export const SnapshotsPanel: React.FC = ({ }; return ( -
-
-

+
+
+

{t('snapshotsPanel.title')}

-
-
- +
+
= ({ data-testid="snapshot-name-input" onChange={(e) => setNewSnapshotName(e.target.value)} placeholder={t('snapshotsPanel.versionName')} - className="flex-1 px-3 py-2 bg-slate-50 border border-slate-200 rounded-[var(--radius-md)] text-sm outline-none focus:ring-2 focus:ring-[var(--brand-primary)]/20 focus:border-[var(--brand-primary)]" + className="flex-1 rounded-[var(--radius-md)] border border-[var(--color-brand-border)] bg-[var(--brand-background)] px-3 py-2 text-sm text-[var(--brand-text)] outline-none placeholder:text-[var(--brand-secondary-light)] focus:border-[var(--brand-primary)] focus:ring-2 focus:ring-[var(--brand-primary)]/20" onKeyDown={(e) => e.key === 'Enter' && handleSave()} />
-
+
{snapshots.length === 0 ? ( -
+

{t('snapshotsPanel.noSnapshots')}

) : ( <>
-

+

{t('snapshotsPanel.namedVersions', 'Named Versions')}

{manualSnapshots.length === 0 ? ( -

{t('snapshotsPanel.noNamedSnapshots', 'No named versions yet.')}

+

{t('snapshotsPanel.noNamedSnapshots', 'No named versions yet.')}

) : ( = ({ deleteVersionTitle={deleteVersionTitle} nodesLabel={nodesLabel} edgesLabel={edgesLabel} - cardClassName="group p-3 rounded-[var(--radius-md)] border border-slate-200 bg-slate-50 hover:bg-white hover:border-[var(--brand-primary-200)] hover:shadow-md transition-all" - titleClassName="text-sm font-semibold text-slate-800" + cardClassName="group rounded-[var(--radius-md)] border border-[var(--color-brand-border)] bg-[var(--brand-background)] p-3 transition-all hover:border-[var(--brand-primary-200)] hover:bg-[var(--brand-surface)] hover:shadow-md" + titleClassName="text-sm font-semibold text-[var(--brand-text)]" /> )}
-

+

{t('snapshotsPanel.autosavedVersions', 'Autosaved Checkpoints')}

{autoSnapshots.length === 0 ? ( -

{t('snapshotsPanel.noAutoSnapshots', 'No autosaved checkpoints yet.')}

+

{t('snapshotsPanel.noAutoSnapshots', 'No autosaved checkpoints yet.')}

) : ( = ({ deleteVersionTitle={deleteVersionTitle} nodesLabel={nodesLabel} edgesLabel={edgesLabel} - cardClassName="group p-3 rounded-[var(--radius-md)] border border-slate-200 bg-slate-50/70 hover:bg-white hover:border-[var(--brand-primary-200)] transition-all" - titleClassName="text-sm font-semibold text-slate-700" + cardClassName="group rounded-[var(--radius-md)] border border-[var(--color-brand-border)] bg-[var(--brand-background)] p-3 transition-all hover:border-[var(--brand-primary-200)] hover:bg-[var(--brand-surface)]" + titleClassName="text-sm font-semibold text-[var(--brand-text)]" /> )}
diff --git a/src/components/StudioAIPanel.tsx b/src/components/StudioAIPanel.tsx index fc3666b8..7e68441b 100644 --- a/src/components/StudioAIPanel.tsx +++ b/src/components/StudioAIPanel.tsx @@ -102,7 +102,7 @@ function getPromptPlaceholder( function getPrimaryComposerClassName(isInputEmpty: boolean, isBeveled: boolean): string { if (isInputEmpty) { - return 'cursor-not-allowed border-slate-200 bg-slate-100 text-slate-400 shadow-none'; + return 'cursor-not-allowed border-[var(--color-brand-border)] bg-[var(--brand-background)] text-[var(--brand-secondary)] shadow-none'; } return `border-[color-mix(in_srgb,var(--brand-primary),black_18%)] bg-[var(--brand-primary)] text-white shadow-sm hover:-translate-y-px hover:bg-[var(--brand-primary-600)] hover:shadow-md ${isBeveled ? 'btn-beveled' : ''}`; @@ -110,14 +110,14 @@ function getPrimaryComposerClassName(isInputEmpty: boolean, isBeveled: boolean): function getGenerationModeButtonClassName(isActive: boolean): string { if (isActive) { - return 'bg-white text-orange-600 border border-orange-200 shadow-sm'; + return 'bg-[var(--brand-surface)] text-orange-600 border border-orange-200 shadow-sm'; } - return 'text-slate-500 hover:bg-white/50 hover:text-slate-700 border border-transparent'; + return 'text-[var(--brand-secondary)] hover:bg-[var(--brand-surface)]/50 hover:text-[var(--brand-text)] border border-transparent'; } function getInfoIconClassName(isActive: boolean): string { - return `h-3.5 w-3.5 focus:outline-none ${isActive ? 'text-orange-400' : 'text-slate-400'}`; + return `h-3.5 w-3.5 focus:outline-none ${isActive ? 'text-orange-400' : 'text-[var(--brand-secondary)]'}`; } function getChatBubbleClassName(role: ChatBubbleTone): string { @@ -125,7 +125,7 @@ function getChatBubbleClassName(role: ChatBubbleTone): string { return 'rounded-br-sm bg-[var(--brand-primary)] text-white shadow-sm'; } - return 'rounded-bl-sm border border-slate-200/70 bg-white text-[var(--brand-text)] shadow-sm'; + return 'rounded-bl-sm border border-[var(--color-brand-border)]/70 bg-[var(--brand-surface)] text-[var(--brand-text)] shadow-sm'; } export function StudioAIPanel({ @@ -213,7 +213,7 @@ export function StudioAIPanel({
-

Import ready — review changes

+

Import ready — review changes

{pendingDiff.addedCount > 0 && ( @@ -235,7 +235,7 @@ export function StudioAIPanel({
@@ -252,7 +252,7 @@ export function StudioAIPanel({
)} -
+