Updates

Vrun-design · Vrun-design · commit 3ba99192094f · 2026-02-26T00:39:38.000+05:30
diff --git a/assets/aws-architecture-BUsB5H1y.js b/assets/aws-architecture-BUsB5H1y.js
@@ -0,0 +1,72 @@
+const n=`# How to Draw AWS Architecture Diagrams with OpenFlowKit
+
+Drawing cloud infrastructure can be tedious if you are dragging and dropping shapes manually. OpenFlowKit provides a **Diagram-as-Code** approach to visualizing AWS Architectures, making it perfect for DevOps teams, Solutions Architects, and Cloud Engineers.
+
+## Why Use Diagram-as-Code for AWS?
+
+Instead of spending hours aligning server icons, you can write simple text that OpenFlowKit instantly renders into a beautiful, auto-routed diagram. Because it's code, your architecture diagram can live right next to your Terraform or CloudFormation scripts in Git.
+
+- **Version Control**: Track infrastructure changes over time.
+- **Auto-Layout**: No more overlapping lines or misaligned VPCs.
+- **Speed**: Type a few lines, get a complete diagram.
+
+
+## Example: Basic Web Architecture (Mermaid.js)
+
+OpenFlowKit natively supports Mermaid.js, which is great for standard cloud structures. Here is how you can visualize an AWS VPC with a Load Balancer, EC2 instances, and an RDS database.
+
+\`\`\`mermaid
+flowchart TD
+    %% Define Styles
+    classDef aws fill:#FF9900,stroke:#fff,stroke-width:2px,color:#fff,rx:8px,ry:8px;
+    classDef vpc fill:#f5f5f5,stroke:#00A4A6,stroke-width:2px,stroke-dasharray: 5 5,rx:12px,ry:12px;
+    
+    Client((User Traffic))
+
+    subgraph AWS_VPC [AWS Cloud VPC]
+        ALB(Application Load Balancer)
+        
+        subgraph Public_Subnet [Public Subnet]
+            EC2_1(Web Server 1)
+            EC2_2(Web Server 2)
+        end
+        
+        subgraph Private_Subnet [Private Subnet]
+            RDS[(Amazon RDS)]
+            ElastiCache[(Redis Cache)]
+        end
+    end
+
+    %% Connections
+    Client -->|HTTPS| ALB
+    ALB -->|Round Robin| EC2_1
+    ALB -->|Round Robin| EC2_2
+    
+    EC2_1 --> RDS
+    EC2_1 --> ElastiCache
+    EC2_2 --> RDS
+    EC2_2 --> ElastiCache
+
+    %% Apply Styles
+    class ALB,EC2_1,EC2_2 aws;
+    class RDS,ElastiCache aws;
+    class AWS_VPC,Public_Subnet,Private_Subnet vpc;
+\`\`\`
+
+## Creating AWS Diagrams with AI
+
+If you don't know Mermaid syntax, you can use **Flowpilot**, our built-in AI assistant. 
+
+1. Open the [Command Center](/docs/en/command-center).
+2. Type a prompt like:
+> \`"Create an AWS architecture diagram showing an API Gateway routing traffic to three AWS Lambda functions, which all connect to a central DynamoDB table."\`
+3. Hit enter. Flowpilot will instantly generate the DSL and render the diagram.
+
+## Exporting for internal documentation
+
+Once your AWS Architecture is generated, you can easily export it:
+- **SVG / PNG**: For Confluence, Jira, or Slack.
+- **Figma Editable**: Want your UX team to polish the diagram? Click *Figma Editable* and paste it directly into Figma as native, editable vector layers.
+
+[Try building your first AWS Architecture diagram now!](/#/canvas)
+`;export{n as default};
diff --git a/assets/index-DMF1NEHy.js b/assets/index-DMF1NEHy.js
diff --git a/assets/mermaid-vs-openflow-CQvlGFCI.js b/assets/mermaid-vs-openflow-CQvlGFCI.js
@@ -0,0 +1,51 @@
+const e=`# Mermaid.js vs OpenFlowKit
+
+Mermaid.js is an incredible text-based diagramming tool that has become the standard for markdown-based documentation. However, when you need a presentation-ready, highly interactive canvas, raw Mermaid can sometimes feel limiting.
+
+This is why **OpenFlowKit is built on top of Mermaid.js**, giving you the best of both worlds: Diagram-as-code speed with visual-editor polish.
+
+## 1. Aesthetics and Branding
+
+**Mermaid.js:**
+- Renders SVGs based on predefined themes (default, dark, forest, neutral).
+- Customizing styles requires inline CSS classes, which can clutter your markdown.
+
+**OpenFlowKit:**
+- Features a full **White-Label Design System**.
+- You can inject [Theming](/docs/en/theming) tokens dynamically (colors, corner radii, fonts).
+- Nodes automatically adopt glassmorphism, shadows, and modern UI treatments without writing a single line of CSS.
+
+## 2. Interaction and Editing
+
+**Mermaid.js:**
+- Strictly code-in, diagram-out. To move a node, you rewrite the code.
+- Layouts are handled automatically by Dagre, which is great but offers zero manual control if a line routes awkwardly.
+
+**OpenFlowKit:**
+- **Two-Way Sync**: Write code and watch the canvas update, *or* drag a node on the canvas and watch the code update automatically. 
+- You get full drag-and-drop capabilities, manual edge routing, and [Smart Layouts](/docs/en/smart-layout) via ELK.js.
+
+## 3. Export Options
+
+**Mermaid.js:**
+- Typically exports as SVG or PNG via a CLI or browser extension.
+
+**OpenFlowKit:**
+- Native [Exporting](/docs/en/exporting) to SVG, high-res PNG/JPG.
+- **Figma Editable**: OpenFlowKit can export diagrams directly to your clipboard in a format that pastes into Figma as native, editable vector layers and text objects.
+
+## 4. Artificial Intelligence
+
+While AI can write Mermaid syntax, iterating on it is difficult.
+
+**OpenFlowKit:**
+- Integrated [Flowpilot AI](/docs/en/ask-flowpilot) directly into the [Command Center](/docs/en/command-center).
+- You can prompt the AI, generate the canvas, and then manually adjust the final 10% visually instead of trying to perfectly craft a prompt to fix a misaligned node.
+- Supports **BYOK (Bring Your Own Key)** for 7 different AI providers.
+
+## Direct Compatibility
+
+We love Mermaid. That is why OpenFlowKit has a native [Mermaid Integration](/docs/en/mermaid-integration). You can paste any existing Mermaid flowchart or state diagram into OpenFlowKit, and it will instantly convert it into editable, styled React Flow nodes.
+
+Try converting your Mermaid diagrams today in the [Editor](/#/canvas).
+`;export{e as default};
diff --git a/assets/payment-flow-BjxuHVLQ.js b/assets/payment-flow-BjxuHVLQ.js
@@ -0,0 +1,56 @@
+const e=`# How to Visualize Payment Flows (Stripe, PayPal, etc.)
+
+When building e-commerce or SaaS applications, understanding the exact sequence of a payment flow is critical. A single missed webhook can lead to a dropped order or an angry customer.
+
+OpenFlowKit allows you to map out complex asynchronous payment architectures quickly using a variety of [Node Types](/docs/en/node-types).
+
+## Why build payment architectures with OpenFlowKit?
+
+- **Shareability**: Everyone from the PM to the backend engineer needs to see the same flow.
+- **Clarity**: Mapping out happy paths, failures, and webhook retries visually is much easier than reading through Stripe API documentation.
+- **Speed**: Use the [Command Center](/docs/en/command-center) and AI to generate the boilerplate flow in seconds.
+
+## Example: Stripe Checkout Flow
+
+Here is a common Stripe Checkout implementation mapped out. Notice how we use different node shapes to distinguish between client-side actions, server-side actions, and third-party API calls.
+
+\`\`\`mermaid
+sequenceDiagram
+    participant User
+    participant Client as Frontend (React)
+    participant Server as Backend (Node.js)
+    participant Stripe
+    
+    User->>Client: Clicks "Pay $50"
+    Client->>Server: POST /create-checkout-session
+    Server->>Stripe: API Request: Create Session
+    Stripe-->>Server: Returns Session ID & URL
+    Server-->>Client: Returns Checkout URL
+    
+    Client->>User: Redirects to Stripe Checkout
+    User->>Stripe: Enters Credit Card Info
+    
+    alt Payment Success
+        Stripe-->>User: Redirect to Success URL
+        Stripe->>Server: Webhook event: checkout.session.completed
+        Server->>Server: Fulfills Order / Updates DB
+    else Payment Failure
+        Stripe-->>User: Redirect to Cancel URL
+        User->>Client: Try Again
+    end
+\`\`\`
+
+## Tips for Better Payment Diagrams
+
+1. **Use Swimlanes**: Group actions by responsibility. Put the User in one lane, your API in another, and the Payment Processor (Stripe/PayPal) in a third.
+2. **Color Code**: Use green for happy paths (success), red for failure states (declines/insufficient funds), and gray for retries.
+3. **Explicit Callouts**: Use the **Annotation Node** to document exact webhook payloads or secret keys needed at specific steps.
+
+## AI Prompt Example
+
+To generate a similar flow using [Ask Flowpilot](/docs/en/ask-flowpilot):
+
+> \`"Generate a flowchart showing a subscription payment flow using Braintree. Include the client requesting a client token, the server generating it, the user submitting a nonce, and the final server-side transaction creation. Show both success and failure branches."\`
+
+Need to present this to your team? Try the [Playback History](/docs/en/playback-history) feature to walk through the payment sequence step-by-step.
+`;export{e as default};
diff --git a/assets/prompting-agents-xO1iMBfW.js b/assets/prompting-agents-xO1iMBfW.js
@@ -0,0 +1,32 @@
+const e=`# How to Prompt AI Agents (Cursor, Copilot, ChatGPT)
+
+OpenFlowKit is built to be AI-native. While it includes **Flowpilot** (our built-in AI assistant), you often want to generate diagrams directly inside your IDE using tools like Cursor, GitHub Copilot, or even regular ChatGPT.
+
+To get the best results from any LLM, you need to point them to our syntax rules.
+
+## The Magic Keyword: \`llms.txt\`
+
+The secret to perfect AI generation is our \`llms.txt\` file. We host a machine-readable set of rules that teaches any AI exactly how to write OpenFlow DSL V2 code.
+
+When prompting an AI agent, just include a reference to this file.
+
+### Example Prompt for Cursor IDE
+Open your Composer or Chat window and type:
+
+> \`"Read https://openflowkit.com/llms.txt and then generate an architecture diagram showing our Next.js frontend connecting to a Supabase backend."\`
+
+### Example Prompt for ChatGPT
+If you are using ChatGPT with web-browsing enabled:
+
+> \`"Go to https://openflowkit.com/llms.txt to learn the OpenFlowKit syntax. Then, write a flowchart detailing an OAuth2 login sequence. Output the result using the \\\`\\\`\\\`openflow code block."\`
+
+## Best Practices for Prompting
+
+Even with the rules, LLMs can sometimes get confused. Here are three tips for perfect diagrams every time:
+
+1. **Be specific about shapes**: Instead of just saying "add a database", say "add a Node with the \`[process]\` type labeled 'Database'". 
+2. **Name your connections**: The diagram is much more useful if edges have labels. Example: "Connect the frontend to the backend with the label '|REST API|'".
+3. **Use Groups for clarity**: If you have multiple microservices, tell the AI to wrap them in a group: "Put the 'Auth Service' and 'User DB' inside a group called 'Backend Infrastructure'."
+
+[Return to Editor](/#/canvas)
+`;export{e as default};
diff --git a/index.html b/index.html
@@ -36,7 +36,7 @@
 
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reactflow/dist/style.min.css" crossorigin="anonymous" />
 
-  <script type="module" crossorigin src="./assets/index-zFDgHK5G.js"></script>
+  <script type="module" crossorigin src="./assets/index-DMF1NEHy.js"></script>
   <link rel="stylesheet" crossorigin href="./assets/index-DGZ8Vf3p.css">
 </head>
 
diff --git a/llms.txt b/llms.txt
@@ -0,0 +1,106 @@
+# OpenFlowKit - Diagram as Code Engine
+
+> OpenFlowKit is an open-source, local-first Diagram-as-Code engine built for modern workflows.
+> It allows users to write simple text (DSL) and instantly get beautiful, presentation-ready diagrams.
+
+## App Name & Branding
+- App Name: OpenFlowKit
+- Main Repository: https://github.com/Vrun-design/openflowkit
+- Architecture: React (Vite), ReactFlow, Zustand, TailwindCSS
+
+## OpenFlow DSL V2 Syntax Rules
+If a user asks you to "Generate a diagram" or "Draw a flowchart for OpenFlowKit", you MUST output the exact syntax described below. Do NOT use Mermaid syntax unless explicitly asked.
+
+Wrap your output in standard markdown code blocks, but use `openflow` as the language trigger (e.g., `\`\`\`openflow`).
+
+### 1. Metadata (Optional, must be at the top)
+You can define global diagram properties using `key: value`.
+```openflow
+direction: TB
+theme: light
+```
+- `direction`: "TB" (Top to Bottom), "LR" (Left to Right), "RL", "BT"
+
+### 2. Nodes
+Format: `[type] id: Label { attributes }`
+- `[type]`: The visual shape/style of the node.
+- `id`: Unique identifier (no spaces). If omitted, the label is used as the ID.
+- `Label`: The text displayed inside the node.
+- `{ attributes }`: Optional JSON-like string of extra properties.
+
+**Supported Node Types (MUST use exactly one of these):**
+- `[start]` / `[end]`: Rounded pill shapes for entry/exit points.
+- `[process]`: Standard rectangle.
+- `[decision]`: Diamond shape for logic branching.
+- `[system]`: Hexagon shape.
+- `[note]`: A sticky note appearance.
+- `[browser]`: A window frame that looks like a web browser.
+- `[mobile]`: A frame that looks like an iPhone.
+- `[button]`: A UI wireframe button.
+- `[input]`: A UI wireframe text input.
+- `[placeholder]`: An image wireframe block.
+
+**Examples:**
+```openflow
+[start] start1: User Opens App
+[browser] web: E-Commerce Store
+[decision] checkAuth: Is Logged In?
+[process] db: Query Database { icon: "database" }
+```
+
+### 3. Edges
+Format: `source -> target` or `source ->|Label| target { attributes }`
+- `source` / `target`: Must match the `id` of a defined node. If the node is not defined, it is created implicitly as a `[process]` node.
+- `->`: Standard solid arrow.
+- `-->`: Curved/smoothstep arrow.
+- `..>`: Dashed line arrow.
+- `==>`: Thick line arrow.
+- `|Label|`: Text to display on the edge.
+
+**Examples:**
+```openflow
+start1 -> checkAuth
+checkAuth ->|yes| web
+checkAuth ..>|no| loginPage { styleType: "dashed" }
+```
+
+### 4. Groups
+Format: `group "Label" { ...nodes and edges... }`
+Groups create visual bounding boxes around nodes.
+
+**Example:**
+```openflow
+group "Authentication Service" {
+  [process] auth: Auth Gateway
+  [process] token: Token Generator
+  auth -> token
+}
+```
+
+## Complete Example
+When generating a diagram, combine the rules above:
+
+```openflow
+direction: LR
+
+[start] start: App Launched
+[browser] ui: Dashboard UI
+
+group "Backend Services" {
+  [process] api: API Gateway
+  [decision] cache: Check Redis
+  [process] db: Postgres Database
+}
+
+start -> ui
+ui ->|fetch data| api
+api --> cache
+cache ->|hit| ui
+cache ..>|miss| db
+db ==>|return data| cache
+```
+
+## Important Notes for LLMs
+- ALWAYS use the `[type]` prefix for nodes. If you aren't sure, use `[process]`.
+- Attributes inside `{ }` must be comma-separated like a JS object: `{ key: "value", number: 123 }`. Quotes around string values are optional but recommended.
+- Do NOT use hyphens `-` or spaces in Node IDs. Use camelCase or snake_case.
diff --git a/schema/openflow-dsl-v2.json b/schema/openflow-dsl-v2.json
@@ -0,0 +1,11 @@
+{
+    "$schema": "http://json-schema.org/draft-07/schema#",
+    "$id": "https://openflowkit.com/schema/openflow-dsl-v2.json",
+    "title": "OpenFlowKit DSL V2",
+    "description": "Validation schema for OpenFlowKit Diagram-as-Code Engine",
+    "type": "string",
+    "pattern": "^(?:.*\n)*$",
+    "examples": [
+        "direction: TB\n[start] user: User Opens App\n[browser] ui: Web Interface\nuser -> ui\n"
+    ]
+}
diff --git a/sitemap.xml b/sitemap.xml
