PageSourceSearch

https://www.visualflow.dev/blogs

html visualflow.dev collected 2026-10-09 22:06:10 UTC 539,349 bytes, 1 lines download raw bytes

1<!DOCTYPE html><html lang="en" class="__variable_8adcd2 __variable_46451f scroll-smooth"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="/_next/static/css/dbaf71b24aad1ee6.css" data-precedence="next"/><link rel="stylesheet" href="/_next/static/css/e02981f9ffcaff9b.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/_next/static/chunks/webpack-e849f994443a1e14.js"/>
1<script src="/_next/static/chunks/fd9d1056-c9b04668f54f6b61.js" async=""></script>
1<script src="/_next/static/chunks/7023-26c51cc3323161b1.js" async=""></script>
1<script src="/_next/static/chunks/main-app-b8d8f654a4c3de8b.js" async=""></script>
1<script src="/_next/static/chunks/231-7c76446a5b0e00a7.js" async=""></script>
1<script src="/_next/static/chunks/8173-4fa5c93cd5d77460.js" async=""></script>
1<script src="/_next/static/chunks/app/(dashboard)/blogs/page-84ecb1d03270c813.js" async=""></script>
1<script src="/_next/static/chunks/2950-adbfc4d8db75df0a.js" async=""></script>
1<script src="/_next/static/chunks/7776-11ea05523b6287c1.js" async=""></script>
1<script src="/_next/static/chunks/448-aa34c37ebb021ea2.js" async=""></script>
1<script src="/_next/static/chunks/3073-571e1c4211f8eedc.js" async=""></script>
1<script src="/_next/static/chunks/9743-e6dc238de80ea9c7.js" async=""></script>
1<script src="/_next/static/chunks/6349-77e70ed69c60ca6b.js" async=""></script>
1<script src="/_next/static/chunks/9851-a767f4208c2c8fde.js" async=""></script>
1<script src="/_next/static/chunks/app/(dashboard)/layout-608a0ed1cc1ad304.js" async=""></script>
1<script src="/_next/static/chunks/8518-67a735f45eca38e5.js" async=""></script>
1<script src="/_next/static/chunks/app/layout-47b31358738efe06.js" async=""></script>
1<script src="https://clerk.visualflow.dev/npm/@clerk/clerk-js@5/dist/clerk.browser.js" data-clerk-js-script="true" async="" crossorigin="anonymous" data-clerk-publishable-key="pk_live_Y2xlcmsudmlzdWFsZmxvdy5kZXYk"></script>
1<link rel="preconnect" href="https://www.googletagmanager.com"/><link rel="preconnect" href="https://www.google-analytics.com"/><link rel="dns-prefetch" href="https://res.cloudinary.com"/><link rel="dns-prefetch" href="https://ui-avatars.com"/><meta name="theme-color" content="#ffffff"/><title>React Flow Blog &amp; Tutorials | VisualFlow</title><meta name="description" content="Master React Flow with our complete tutorials and templates. Build interactive diagrams, automation workflows, and visual node-based UIs."/><link rel="author" href="https://visualflow.dev"/><meta name="author" content="VisualFlow Team"/><meta name="keywords" content="React flow examples,React flow templates,React flow source code,workflow automation React,node-based UI React,visual flow editor,GoJS alternative,JointJS templates,react diagram library,react flowchart builder,free React flow templates,premium React flow examples,VisualFlow,react flow diagram,interactive diagrams React,ReactFlow tutorial,ReactFlow blog,GoJS tutorial,JointJS tutorial,react diagram tutorial,workflow automation tutorial,react flow diagram guide,visual programming tutorial,chatbot builder tutorial,node-based UI tutorial,flow editor how to build,react diagramming library comparison,ReactFlow vs GoJS,ReactFlow vs JointJS"/><meta name="creator" content="VisualFlow"/><meta name="robots" content="index, follow"/><meta name="googlebot" content="index, follow, max-image-preview:large"/><link rel="canonical" href="https://visualflow.dev/blogs"/><meta property="og:title" content="React Flow Blog &amp; Tutorials"/><meta property="og:description" content="Master React Flow with our complete tutorials and templates. Build interactive diagrams, automation workflows, and visual node-based UIs."/><meta property="og:url" content="https://visualflow.dev/blogs"/><meta property="og:site_name" content="VisualFlow"/><meta property="og:locale" content="en_US"/><meta property="og:image" content="https://visualflow.dev/images/seo_image.png"/><meta property="og:image:width" content="1200"/><meta property="og:image:height" content="630"/><meta property="og:image:alt" content="React Flow Blog &amp; Tutorials — Visualflow | React flow examples | Workflow automation builder"/><meta property="og:type" content="website"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:site" content="@visualflowdev"/><meta name="twitter:creator" content="@visualflowdev"/><meta name="twitter:title" content="React Flow Blog &amp; Tutorials"/><meta name="twitter:description" content="Master React Flow with our complete tutorials and templates. Build interactive diagrams, automation workflows, and visual node-based UIs."/><meta name="twitter:image" content="https://visualflow.dev/images/seo_image.png"/><meta name="twitter:image:width" content="1200"/><meta name="twitter:image:height" content="630"/><meta name="twitter:image:alt" content="React Flow Blog &amp; Tutorials"/><link rel="shortcut icon" href="/favicon.ico"/><link rel="icon" href="/favicon.ico"/><link rel="apple-touch-icon" href="/favicon.ico"/><meta name="next-size-adjust"/>
1<script src="/_next/static/chunks/polyfills-78c92fac7aa8fdd8.js" noModule=""></script>
1</head><body>
vendor: 67 bytes, line 1
1<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=
1GTM-TQWZ7692
vendor: 82 bytes, line 1
1" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
1<header class="sticky top-2 md:top-4  z-50 px-2 md:px-4 pt-2"><nav class="mx-auto flex max-w-7xl items-center justify-between rounded-full bg-white px-3 md:px-6 py-2 md:py-3 pr-2 gap-2 border border-gray-100/50" style="box-shadow:0px 0px 32px 0px rgba(0, 0, 0, 0.08), 0px 0px 16px 0px rgba(0, 0, 0, 0.04)"><a class="flex space-x-2 items-center" href="/"><img alt="visualflow" loading="lazy" width="40" height="40" decoding="async" data-nimg="1" style="color:transparent" srcSet="/_next/image?url=%2Fimages%2Fvisualflow.png&amp;w=48&amp;q=75 1x, /_next/image?url=%2Fimages%2Fvisualflow.png&amp;w=96&amp;q=75 2x" src="/_next/image?url=%2Fimages%2Fvisualflow.png&amp;w=96&amp;q=75"/><span class="font-black text-xl leading-none">VisualFlow</span></a><button class="lg:hidden flex items-center p-2 rounded-md border border-gray-200 shadow-sm bg-white hover:bg-gray-100 transition-colors focus:outline-none" aria-label="Open menu"><svg class="w-7 h-7 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7h16M4 12h16M4 17h16"></path></svg></button><ul class="hidden lg:flex items-center gap-3 text-sm font-medium text-foreground/70"><li><a class="text-gray-600 hover:text-primary px-3 py-2 rounded-md transition-colors " href="/blogs">Blogs</a></li><li><a class="text-gray-600 hover:text-primary px-3 py-2 rounded-md transition-colors " href="/">Examples</a></li><li><a class="text-gray-600 hover:text-primary px-3 py-2 rounded-md transition-colors " href="/contact-us">Contact</a></li><li><a class="text-gray-600 hover:text-primary px-3 py-2 rounded-md transition-colors " href="/pricing">Pricing</a></li><li><a class="text-gray-600 hover:text-primary px-3 py-2 rounded-md transition-colors text-primary border border-primary/20 bg-primary/5 hover:bg-primary/10 font-semibold" target="_blank" rel="nofollow noopener noreferrer" href="https://www.upwork.com/freelancers/azimahmed">Hire at Upwork</a></li><li><a class="text-gray-600 hover:text-primary px-3 py-2 rounded-md transition-colors " target="_blank" rel="nofollow noopener noreferrer" href="https://discord.gg/zh72eG
1Kk3N">Join Discord</a></li><li><a class="text-gray-600 hover:text-primary px-3 py-2 rounded-md transition-colors " target="_blank" rel="nofollow noopener noreferrer" href="https://github.com/Azim-Ahmed/Automation-workflow">Github</a></li></ul><div class="flex items-center gap-3 ml-auto lg:ml-0"><a class="rounded-full px-4 md:px-6 py-2 md:py-3 text-xs md:text-sm font-semibold text-white whitespace-nowrap shrink-0 transition-opacity hover:opacity-90" style="background:var(--gradient-brand);box-shadow:var(--shadow-pill)" href="/#examples">Get Templates</a><div class="flex items-center gap-2"></div></div></nav></header><div class="p-4 relative min-h-[calc(100vh-200px)] "><div class="flex flex-col lg:flex-row mx-auto relative"><div class="w-full">
1<script type="application/ld+json">{"@context":"https://schema.org","@type":"ItemList","name":"VisualFlow React flow Blogs and Tutorials","description":"A comprehensive collection of React flow Blogs, tutorials, and guides for building interactive flow diagrams, automation workflows, and visual programming tools.","numberOfItems":43,"itemListElement":[{"@type":"ListItem","position":1,"item":{"@type":"Article","@id":"https://www.visualflow.dev/blogs/visualizing-complex-pipelines-flow-weaver","name":"Visualizing Complex Pipelines with Flow Weaver and React Flow","description":"Learn how to build a highly interactive, customizable visual builder and workflow orchestration tool using the premium Flow Weaver template.","image":"https://www.visualflow.dev/images/reactflow/flow-weaver.png","datePublished":"2026-10-09T00:00:00.000Z","author":{"@type":"Person","name":"VisualFlow Team"}}},{"@type":"ListItem","position":2,"item":{"@type":"Article","@id":"https://www.visualflow.dev/blogs/visualizing-hierarchies-tree-weaver","name":"Visualizing Hierarchies with React flow Tree Weaver","description":"Discover how to build performant, collapsible tree structures and org charts using our new $50 premium Tree Weaver template.","image":"https://www.visualflow.dev/images/reactflow/react-flow-tree-weaver.png","datePublished":"2026-10-09T00:00:00.000Z","author":{"@type":"Person","name":"VisualFlow Team"}}},{"@type":"ListItem","position":3,"item":{"@type":"Article","@id":"https://www.visualflow.dev/blogs/visualizing-complex-hierarchies-multi-dir-mindmap","name":"Visualizing Complex Hierarchies with Multi-Directional Mindmaps in React Flow","description":"Explore our new $100 premium Multi-Directional Mindmap template featuring image support, dynamic layouts, and expansive node routing.","image":"https://www.visualflow.dev/images/reactflow/multi-dir-mindmap.png","datePublished":"2026-10-09T00:00:00.000Z","author":{"@type":"Person","name":"VisualFlow Team"}}},{"@type":"ListItem","position":4,"item":{"@type":"Article","@id":"https://www.visualflow.dev/blogs/creating-organic-whiteboards-excalidraw","name":"Creating Organic Whiteboards with Excalidraw Sketchboard and React Flow","description":"Discover how to build beautiful, hand-drawn aesthetic whiteboards and diagramming tools using our new premium Excalidraw Sketchboard template.","image":"https://www.visualflow.dev/images/reactflow/react-flow-excalidraw.png","datePublished":"2026-10-09T00:00:00.000Z","author":{"@type":"Person","name":"VisualFlow Team"}}},{"@type":"ListItem","position":5,"item":{"@type":"Article","@id":"https://www.visualflow.dev/blogs/building-interactive-canvas-experiences","name":"Building Interactive Canvas Experiences with React Flow","description":"Explore the new Canvas Flow Builder template. Learn how to create stunning, interactive visual builders with smooth animations and custom node designs.","image":"https://www.visualflow.dev/images/reactflow/canvas-flow.png","datePublished":"2026-10-09T00:00:00.000Z","author":{"@type":"Person","name":"VisualFlow Team"}}},{"@type":"ListItem","position":6,"item":{"@type":"Article","@id":"https://www.visualflow.dev/blogs/sequence-diagram-flow","name":"Building UML Sequence Diagrams with React Flow","description":"Learn the complex architectural layout algorithms required to build structured, rigid UML sequence diagrams and timelines using React Flow.","image":"https://www.visualflow.dev/images/reactflow/sequence-diagram-flow.png","datePublished":"2026-05-25T00:00:00.000Z","author":{"@type":"Person","name":"Azim"}}},{"@type":"ListItem","position":7,"item":{"@type":"Article","@id":"https://www.visualflow.dev/blogs/scale-studio-pro","name":"Architecting for Massive Scale in React Flow","description":"A comprehensive guide on handling thousands of nodes with virtualized rendering and advanced minimap optimization in React Flow.","image":"https://www.visualflow.dev/images/reactflow/scale-studio-pro.png","datePublished":"2026-05-24T00:00:00.000Z","author":{"@type":"Person","name":"Azim"}}},{"@type":"ListItem","position":8,"item":{"@type":"Article","@id":"https://www.visualflow.dev/blogs/force-directed-tree","name":"Visualizing Networks with Force-Directed Graphs in React Flow","description":"Learn how to integrate D3-force physics with React Flow to build stunning, organic, and self-organizing network graphs.","image":"https://www.visualflow.dev/images/reactflow/force-directed-tree.png","datePublished":"2026-05-21T00:00:00.000Z","author":{"@type":"Person","name":"Azim"}}},{"@type":"ListItem","position":9,"item":{"@type":"Article","@id":"https://www.visualflow.dev/blogs/energy-sankey-diagram","name":"Visualizing Energy Flows with React Flow Sankey Diagrams","description":"Learn how to build complex, animated Sankey diagrams to track energy distribution, financial transactions, and user journeys using React Flow.","image":"https://www.visualflow.dev/images/reactflow/energy-sankey-diagram.png","datePublished":"2026-05-13T00:00:00.000Z","author":{"@type":"Person","name":"Azim"}}},{"@type":"ListItem","position":10,"item":{"@type":"Article","@id":"https://www.visualflow.dev/blogs/incremental-tree-builder","name":"Building Interactive Org Charts and Incremental Trees in React Flow","description":"Discover how to architect dynamically expanding, collapsible tree structures and organizational charts with auto-layout algorithms using React Flow.","image":"https://www.visualflow.dev/images/reactflow/incremental-tree-builder.png","datePublished":"2026-05-12T00:00:00.000Z","author":{"@type":"Person","name":"Azim"}}},{"@type":"ListItem","position":11,"item":{"@type":"Article","@id":"https://www.visualflow.dev/blogs/react-flow-vs-jointjs","name":"React Flow vs JointJS: Why Modern Engineering Teams Are Switching","description":"A deep dive into why React Flow is vastly superior to legacy libraries like JointJS, focusing on React compatibility, state management, and modern developer experience.","image":"https://www.visualflow.dev/images/reactflow/visualflow.png","datePublished":"2026-05-12T00:00:00.000Z","author":{"@type":"Person","name":"Azim"}}},{"@type":"ListItem","position":12,"item":{"@type":"Article","@id":"https://www.visualflow.dev/blogs/react-flow-excalidraw-clone","name":"React flow Excalidraw Clone: Building Whiteboard Apps","description":"A comprehensive guide on how to build a collaborative whiteboard application similar to Excalidraw or Miro using React flow.","image":"https://www.visualflow.dev/images/reactflow/react-flow-excalidraw.png","datePublished":"2026-05-11T00:00:00.000Z","author":{"@type":"Person","name":"Azim"}}},{"@type":"ListItem","position":13,"item":{"@type":"Article","@id":"https://www.visualflow.dev/blogs/react-flow-best-diagram-library","name":"10 Reasons Why React flow is the Best Library for Interactive Node-Based Diagrams","description":"Discover why React flow is the ultimate choice for building interactive node-based applications, flowcharts, and diagrams natively in React.","image":"https://www.visualflow.dev/images/reactflow/reactflow-mindmap.png","datePublished":"2026-05-10T00:00:00.000Z","author":{"@type":"Person","name":"Azim"}}},{"@type":"ListItem","position":14,"item":{"@type":"Article","@id":"https://www.visualflow.dev/blogs/build-automation-builder-react-flow","name":"How to Build a Complete SaaS Automation Builder Using React flow","description":"Learn the architecture and step-by-step process of building a visual automation SaaS canvas using the incredible power of React flow.","image":"https://www.visualflow.dev/images/reactflow/reactflow-workflow-automation.png","datePublished":"2026-05-09T00:00:00.000Z","author":{"@type":"Person","name":"Azim"}}},{"@type":"ListItem","position":15,"item":{"@type":"Article","@id":"https://www.visualflow.dev/blogs/microservices-architecture","name":"Visualizing Microservices Architectures with React Flow","description":"Learn how to build interactive cloud architecture diagrams with custom service nodes and animated traffic edges using React Flow.","image":"https://www.visualflow.dev/images/reactflow/microservices-architecture.png","datePublished":"2026-05-09T00:00:00.000Z","author":{"@type":"Person","name":"Azim"}}},{"@type":"ListItem","position":16,"item":{"@type":"Article","@id":"https://www.visualflow.dev/blogs/react-flow-design-studio","name":"Building a Custom Diagramming Studio with React Flow","description":"Learn how to build a Draw.io alternative using React Flow. Explore custom SVG shapes, drag-and-drop mechanics, and dynamic node routing.","image":"https://www.visualflow.dev/images/reactflow/react-flow-desing-studio.png","datePublished":"2026-05-08T00:00:00.000Z","author":{"@type":"Person","name":"Azim"}}},{"@type":"ListItem","position":17,"item":{"@type":"Article","@id":"https://www.visualflow.dev/blogs/background-studio-react-flow","name":"Backgroun
1d Studio with React Flow: Interactive Canvas Background Designer","description":"Explore how to build a real-time background customization studio using React Flow. Design and preview gradients, patterns, and animated effects through an intuitive node-based interface — perfect for theme editors, design tools, and creative configuration UIs.","image":"https://www.visualflow.dev/images/reactflow/background-studio.png","datePublished":"2026-04-29T00:00:00.000Z","author":{"@type":"Person","name":"VisualFlow Team"}}},{"@type":"ListItem","position":18,"item":{"@type":"Article","@id":"https://www.visualflow.dev/blogs/radial-node-arranger-circular-layout","name":"Radial Node Arranger: Building Circular Graph Layouts with ReactFlow","description":"Learn how to build a radial layout engine that automatically arranges ReactFlow nodes in circular and hierarchical patterns. Perfect for org charts, dependency graphs, and relationship maps.","image":"https://www.visualflow.dev/images/reactflow/radial-arrange.png","datePublished":"2026-04-22T00:00:00.000Z","author":{"@type":"Person","name":"VisualFlow Team"}}},{"@type":"ListItem","position":19,"item":{"@type":"Article","@id":"https://www.visualflow.dev/blogs/hexaflow-board-hexagonal-canvas","name":"HexaFlow Board: Designing Hexagonal Node Canvases with ReactFlow","description":"Discover how to create a unique hexagonal grid canvas with ReactFlow. Build visually stunning board layouts using hex-shaped custom nodes — perfect for game maps, data grids, and creative diagramming.","image":"https://www.visualflow.dev/images/reactflow/hexaflow.png","datePublished":"2026-04-22T00:00:00.000Z","author":{"@type":"Person","name":"VisualFlow Team"}}},{"@type":"ListItem","position":20,"item":{"@type":"Article","@id":"https://www.visualflow.dev/blogs/introducing-bot-weave","name":"Introducing Bot Weave: Building Advanced AI Bot & Lead Gen Workflows with ReactFlow","description":"Discover how to create a highly sophisticated visual builder for AI chatbots and lead generation agents using ReactFlow. See how advanced dialog branching and visual logic work in harmony.","image":"https://www.visualflow.dev/images/reactflow/bot-weave.png","datePublished":"2026-04-12T00:00:00.000Z","author":{"@type":"Person","name":"VisualFlow Team"}}},{"@type":"ListItem","position":21,"item":{"@type":"Article","@id":"https://www.visualflow.dev/blogs/introducing-flow-exploration-studio","name":"Introducing Flow Exploration Studio: Interactive Node Environments","description":"Learn how to build interactive testing and exploration workspaces using React flow. See how custom node inspectors and isolated execution environments function.","image":"https://www.visualflow.dev/images/reactflow/flow-exploration-studio.png","datePublished":"2026-04-11T00:00:00.000Z","author":{"@type":"Person","name":"VisualFlow Team"}}},{"@type":"ListItem","position":22,"item":{"@type":"Article","@id":"https://www.visualflow.dev/blogs/reactflow-workflow-automation-visual-automation","name":"ReactFlow Workflow Automation: Building Visual Automation Platforms","description":"Build powerful visual workflow automation platforms with ReactFlow. Design, test, and deploy complex automation workflows with drag-and-drop interface, custom nodes, conditional logic, and real-time execution monitoring for enterprise-grade business process automation.","image":"https://res.cloudinary.com/dcewthzm6/image/upload/v1771996559/reactflow-workflow-automation_rnn67l.png","datePublished":"2024-05-01T00:00:00.000Z","author":{"@type":"Person","name":"VisualFlow Team"}}},{"@type":"ListItem","position":23,"item":{"@type":"Article","@id":"https://www.visualflow.dev/blogs/3d-reactflow-editor-immersive-flow-designer","name":"3D ReactFlow Editor: Immersive Three-Dimensional Flow Designer","description":"Revolutionary three-dimensional flow editor built with ReactFlow and Three.js for immersive, interactive node-based editing. Create and edit stunning 3D flow diagrams with 3D node rendering, camera controls, depth-based interactions, node editing, edge creation, and smooth animations for next-generation flow design.","image":"https://www.visualflow.dev/images/reactflow/3d-reactflow-editor.png","datePublished":"2024-04-25T00:00:00.000Z","author":{"@type":"Person","name":"VisualFlow Team"}}},{"@type":"ListItem","position":24,"item":{"@type":"Article","@id":"https://www.visualflow.dev/blogs/process-flow-studio-business-process-design","name":"Process Flow Studio: Professional Business Process Design with ReactFlow","description":"Professional process flow design studio with advanced ReactFlow capabilities for creating sophisticated business process diagrams. Features comprehensive node library, advanced layout algorithms, collaboration tools, and export capabilities for business analysts and process engineers.","image":"https://www.visualflow.dev/images/reactflow/process-flow.png","datePublished":"2024-04-15T00:00:00.000Z","author":{"@type":"Person","name":"VisualFlow Team"}}},{"@type":"ListItem","position":25,"item":{"@type":"Article","@id":"https://www.visualflow.dev/blogs/reactflow-validation-flow-form-validation","name":"ReactFlow Validation Flow: Building Complex Form Validation Workflows","description":"Create sophisticated form validation workflows with ReactFlow for c
1omplex data validation scenarios. Build interactive validation diagrams showing validation rules, error handling, and data flow. Features custom validation node types, rule configuration, error visualization, and real-time validation feedback.","image":"https://res.cloudinary.com/dcewthzm6/image/upload/v1771996558/validation-flow_yujhuy.png","datePublished":"2024-04-10T00:00:00.000Z","author":{"@type":"Person","name":"VisualFlow Team"}}},{"@type":"ListItem","position":26,"item":{"@type":"Article","@id":"https://www.visualflow.dev/blogs/reactflow-pipeline-flow-data-visualization","name":"ReactFlow Pipeline Flow: Visualizing Data Pipelines and ETL Processes","description":"Build sophisticated data pipeline visualizations with ReactFlow for ETL processes, CI/CD workflows, and data processing systems. Create interactive pipeline diagrams showing data flow, transformation stages, and processing steps with custom node types and validation rules.","image":"https://www.visualflow.dev/images/reactflow/pipflow.png","datePublished":"2024-04-05T00:00:00.000Z","author":{"@type":"Person","name":"VisualFlow Team"}}},{"@type":"ListItem","position":27,"item":{"@type":"Article","@id":"https://www.visualflow.dev/blogs/reactflow-node-intersections-edge-routing","name":"React Flow Node Intersections: Advanced Edge Routing and Collision Detection","description":"Learn advanced ReactFlow techniques for intelligent edge routing and node intersection detection. Create clean, readable diagrams with automatic edge routing that avoids node overlaps and minimizes visual clutter. Features collision detection and path optimization algorithms.","image":"https://www.visualflow.dev/images/reactflow/intersections.png","datePublished":"2024-04-01T00:00:00.000Z","author":{"@type":"Person","name":"VisualFlow Team"}}},{"@type":"ListItem","position":28,"item":{"@type":"Article","@id":"https://www.visualflow.dev/blogs/reactflow-mindmap-interactive-knowledge-maps","name":"React Flow Mindmap: Building Interactive Knowledge Maps with ReactFlow","description":"Create beautiful, interactive mind maps using ReactFlow for brainstorming, note-taking, and knowledge organization. Build hierarchical knowledge structures with drag-and-drop nodes, rich text editing, and customizable styling. Perfect for project planning and collaborative brainstorming.","image":"https://res.cloudinary.com/dcewthzm6/image/upload/v1771996554/reactflow-mindmap_cnbd85.png","datePublished":"2024-03-28T00:00:00.000Z","author":{"@type":"Person","name":"VisualFlow Team"}}},{"@type":"ListItem","position":29,"item":{"@type":"Article","@id":"https://www.visualflow.dev/blogs/react-flow-neural-network-visualization","name":"React Flow Neural Network Visualization: Interactive Deep Learning Architecture Diagrams","description":"Create stunning, interactive visualizations of neural network architectures using ReactFlow. Visualize deep learning models, layer connections, and data flow through neural networks. Perfect for machine learning education, model documentation, and explaining complex AI architectures.","image":"https://res.cloudinary.com/dcewthzm6/image/upload/v1771996555/neural-network_nkri8r.png","datePublished":"2024-03-25T00:00:00.000Z","author":{"@type":"Person","name":"VisualFlow Team"}}},{"@type":"ListItem","position":30,"item":{"@type":"Article","@id":"https://www.visualflow.dev/blogs/reactflow-examples-vs-visualflow-examples-ready-implementation","name":"React flow examples vs Visualflow examples: which are best for ready to implementation.","description":"Compare VisualFlow production-ready React Flow examples with building from scratch. Discover how VisualFlow saves 8-12 weeks of development time and $24,000+ in costs while delivering enterprise-grade, production-ready implementations immediately.","image":"https://www.visualflow.dev/images/reactflow/visualflow.png","datePublished":"2024-03-20T00:00:00.000Z","author":{"@type":"Person","name":"VisualFlow Team"}}},{"@type":"ListItem","position":31,"item":{"@type":"Article","@id":"https://www.visualflow.dev/blogs/spiral-layout-graph-visualization","name":"React flow Spiral Layout: Creating Elegant Circular Graph Visualizations","description":"Create stunning spiral-based graph layouts for visualizing hierarchical and circular data. Automatically arrange nodes in elegant spiral patterns with customizable controls. Perfect for organizational charts, family trees, and artistic visualizations.","image":"https://res.cloudinary.com/dcewthzm6/image/upload/v1771996556/spiral-layout_vxejzk.png","datePublished":"2024-03-15T00:00:00.000Z","author":{"@type":"Person","name":"VisualFlow Team"}}},{"@type":"ListItem","position":32,"item":{"@type":"Article","@id":"https://www.visualflow.dev/blogs/concept-map-knowledge-visualization","name":"React flow Concept Map: Interactive Knowledge Visualization with ReactFlow","description":"Create interactive concept maps for organizing knowledge and visualizing relationships between ideas. Build hierarchical knowledge structures with drag-and-drop nodes, rich text editing, and custom connections. Perfect for education, research, and knowledge management.","image":"https://www.visualflow.dev/images/reactflow/concept-mind.png","datePublished":"2024-03-10T00:00:00.000Z","author":{"@type":"Person","name":"VisualFlow Team"}}},{"@type":"ListItem","position":33,"item":{"@type":"Article","@id":"https://www.visualflow.dev/blogs/multi-color-graph-visualization","name":"React flow Multi-Color Graph Visualization: Creating Vibrant Network Diagrams","description":"Create vibrant, visually distinct network diagrams with advanced color management. Color-code nodes by categories, status, or data attributes. Features custom themes, gradient edges, and interactive color pickers for professional, eye-catching visualizations.","image":"https://res.cloudinary.com/dcewthzm6/image/upload/v1771996556/multi-color_f65zhg.png","datePublished":"2024-03-05T00:00:00.000Z","author":{"@type":"Person","name":"VisualFlow Team"}}},{"@type":"ListItem","position":34,"item":{"@type":"Article","@id":"https://www.visualflow.dev/blogs/force-directed-layout-graph-visualization","name":"React flow Force-Directed Layout: Advanced Graph Visualization with ReactFlow","description":"Create beautiful, interactive network diagrams with physics-based force-directed layout algorithms. Automatically arrange nodes using simulation that minimizes edge crossings and reveals natural cluster
1s. Perfect for social networks, organizational charts, and complex relationship visualizations.","image":"https://www.visualflow.dev/images/reactflow/force-layout.png","datePublished":"2024-03-01T00:00:00.000Z","author":{"@type":"Person","name":"VisualFlow Team"}}},{"@type":"ListItem","position":35,"item":{"@type":"Article","@id":"https://www.visualflow.dev/blogs/production-process-editor-industrial-workflows","name":"Production Process Editor: Designing Industrial Workflows with React flow","description":"Create professional production process diagrams with drag-and-drop interface. Design manufacturing workflows with palette-based nodes, port connections, and property inspectors for industrial process visualization.","image":"https://www.visualflow.dev/images/reactflow/production.png","datePublished":"2024-02-25T00:00:00.000Z","author":{"@type":"Person","name":"VisualFlow Team"}}},{"@type":"ListItem","position":36,"item":{"@type":"Article","@id":"https://www.visualflow.dev/blogs/reactflow-performance-optimization","name":"React Flow Performance Optimization Techniques","description":"Learn advanced techniques to optimize React Flow performance. Handle large diagrams with thousands of nodes efficiently.","image":"https://www.visualflow.dev/images/reactflow/e-render.png","datePublished":"2024-02-20T00:00:00.000Z","author":{"@type":"Person","name":"VisualFlow Team"}}},{"@type":"ListItem","position":37,"item":{"@type":"Article","@id":"https://www.visualflow.dev/blogs/building-ai-agents-visual-flow-builders","name":"React flow Building AI Agents with Visual Flow Builders","description":"Create sophisticated AI agents and LLM-powered applications using visual flow builders. Design AI workflows without extensive coding.","image":"https://res.cloudinary.com/dcewthzm6/image/upload/v1771996553/langflow_drzwzq.png","datePublished":"2024-02-15T00:00:00.000Z","author":{"@type":"Person","name":"VisualFlow Team"}}},{"@type":"ListItem","position":38,"item":{"@type":"Article","@id":"https://www.visualflow.dev/blogs/n8n-builder-advanced-workflow-automation","name":"React flow n8n Builder: Advanced Workflow Automation","description":"Learn how to build complex automation workflows with n8n builder. Create sophisticated integrations and data pipelines.","image":"https://www.visualflow.dev/images/reactflow/automation-flow.jpg","datePublished":"2024-02-10T00:00:00.000Z","author":{"@type":"Person","name":"VisualFlow Team"}}},{"@type":"ListItem","position":39,"item":{"@type":"Article","@id":"https://www.visualflow.dev/blogs/zapier-integration-visual-automation","name":"React flow Zapier Integration: Building Visual Automation Workflows","description":"Automate workflows with native Zapier integration. Design sophisticated workflows with branches, filters, and error handling.","image":"https://res.cloudinary.com/dcewthzm6/image/upload/v1771996562/zapierFlow_ul6dwo.png","datePublished":"2024-02-05T00:00:00.000Z","author":{"@type":"Person","name":"VisualFlow Team"}}},{"@type":"ListItem","position":40,"item":{"@type":"Article","@id":"https://www.visualflow.dev/blogs/creating-chatbots-landbot-builder","name":"React flow Creating Chatbots with Landbot Builder","description":"Build sophisticated chatbot conversation flows using visual interface. Design chatbot interactions through intuitive drag-and-drop.","image":"https://www.visualflow.dev/images/reactflow/landbot.png","datePublished":"2024-02-01T00:00:00.000Z","author":{"@type":"Person","name":"VisualFlow Team"}}},{"@type":"ListItem","position":41,"item":{"@type":"Article","@id":"https://www.visualflow.dev/blogs/jointjs-vs-gojs-vs-reactflow-comparison","name":"JointJS vs GoJS vs ReactFlow: A Comprehensive Comparison","description":"Compare the top diagramming libraries: JointJS, GoJS, and ReactFlow. Understand their strengths, weaknesses, and use cases.","image":"https://www.visualflow.dev/images/reactflow/flowAspects.png","datePublished":"2024-01-25T00:00:00.000Z","author":{"@type":"Person","name":"VisualFlow Team"}}},{"@type":"ListItem","position":42,"item":{"@type":"Article","@id":"https://www.visualflow.dev/blogs/building-automation-workflows-klaviyo","name":"React flow: Building Automation Workflows with Klaviyo Flow","description":"React flow create sophisticated marketing automation flows with Klaviyo integration. Design complete customer journeys from welcome series to abandoned cart recovery.","image":"https://www.visualflow.dev/images/reactflow/klaviyo.png","datePublished":"2024-01-20T00:00:00.000Z","author":{"@type":"Person","name":"VisualFlow Team"}}},{"@type":"ListItem","position":43,"item":{"@type":"Article","@id":"https://www.visualflow.dev/blogs/getting-started-with-react-flow","name":"Getting Started with React Flow: A Complete Guide","description":"Learn all essential concepts about React Flow. You're new to the topic? This React Flow tutorial will get you started!","image":"https://www.visualflow.dev/images/reactflow/project5.png","datePublished":"2024-01-15T00:00:00.000Z","author":{"@type":"Person","name":"VisualFlow Team"}}}]}</script>
1<div class="pt-12 pb-24 flex-1 min-w-0 bg-gray-50/30"><div class="px-6 lg:px-16 2xl:px-28 "><div class="mb-6 flex justify-start"><a class="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full text-xs sm:text-sm font-semibold bg-gradient-to-r from-orange-50 via-amber-50 to-rose-50 border border-orange-200/90 text-orange-950 hover:border-orange-400 hover:shadow-md transition-all group shadow-sm" href="/pricing"><span class="flex h-2 w-2 rounded-full bg-orange-500 animate-pulse"></span><span class="bg-gradient-to-r from-orange-600 to-rose-600 bg-clip-text text-transparent font-bold">🔥 Price Drop</span><span class="text-gray-300">|</span><span class="text-gray-700 font-medium text-xs sm:text-sm">Now $49/mo or $199 Lifetime</span><svg class="w-3.5 h-3.5 text-orange-600 group-hover:translate-x-0.5 transition-transform" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"></path></svg></a></div><div class="mb-16 text-center space-y-6 flex flex-col items-center justify-center"><div class="inline-flex items-center gap-2 rounded-full border px-4 py-1.5 text-sm font-semibold shadow-sm bg-white" style="border-color:var(--brand-light);color:var(--brand)"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-book-key w-4 h-4"><path d="m19 3 1 1"></path><path d="m20 2-4.5 4.5"></path><path d="M20 8v13a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20"></path><path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H14"></path><circle cx="14" cy="8" r="2"></circle></svg>Resources &amp; Tutorials</div><h1 class="text-4xl md:text-6xl font-black tracking-tight font-display max-w-4xl mx-auto" style="background:var(--gradient-brand);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text">Master React Flow &amp; Visual Node Architectures</h1><p class="text-lg md:text-xl text-gray-600 max-w-2xl mx-auto leading-relaxed">Deep-dive tutorials, architecture guides, and production-ready examples for building interactive diagrams and automation workflows.</p><p class="sr-only">VisualFlow provides comprehensive ReactFlow examples, tutorials, and guides for building interactive flow diagrams, automation workflows, mind maps, organizational charts, and more. Explore our collection of free and premium ReactFlow examples with complete source code, step-by-step tutorials, and best practices for implementing ReactFlow in your projects. Learn about ReactFlow performance optimization, workflow automation with Klaviyo and Zapier, chatbot builders like Landbot, AI agent development with Langflow, graph visualization techniques, production process editors, force-directed layouts, multi-color graphs, and concept mapping tools. Discover how to create dynamic graphs, node editors, and visual programming tools for business process automation, AI workflows, and data visualization.</p></div><section class="mb-20"><div class="grid gap-8 md:grid-cols-2 lg:grid-cols-3"><a class="block group" href="/blogs/visualizing-complex-pipelines-flow-weaver"><div class="text-card-foreground shadow-sm relative overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1 h-full flex flex-col border border-gray-200/60 rounded-2xl bg-white"><div class="relative w-full h-52 bg-gray-100 overflow-hidden"><img alt="Visualizing Complex Pipelines with Flow Weaver and React Flow" loading="lazy" decoding="async" data-nimg="fill" class="object-cover transition-transform duration-500 group-hover:scale-105" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="100vw" srcSet="/_next/image?url=%2Fimages%2Freactflow%2Fflow-weaver.png&amp;w=640&amp;q=75 640w, /_next/image?url=%2Fimages%2Freactflow%2Fflow-weaver.png&amp;w=750&amp;q=75 750w, /_next/image?url=%2Fimages%2Freactflow%2Fflow-weaver.png&amp;w=828&amp;q=75 828w, /_next/image?url=%2Fimages%2Freactflow%2Fflow-weaver.png&amp;w=1080&amp;q=75 1080w, /_next/image?url=%2Fimages%2Freactflow%2Fflow-weaver.png&amp;w=1200&amp;q=75 1200w, /_next/image?url=%2Fimages%2Freactflow%2Fflow-weaver.png&amp;w=1920&amp;q=75 1920w, /_next/image?url=%2Fimages%2Freactflow%2Fflow-weaver.png&amp;w=2048&amp;q=75 2048w, /_next/image?url=%2Fimages%2Freactflow%2Fflow-weaver.png&amp;w=3840&amp;q=75 3840w" src="/_next/image?url=%2Fimages%2Freactflow%2Fflow-weaver.png&amp;w=3840&amp;q=75"/></div><div class="p-6 flex-1 flex flex-col"><div class="flex flex-wrap gap-2 mb-4"><div class="inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors">React Flow</div><div class="inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors">Workflow Builder</div></div><h3 class="text-2xl font-bold mb-3 text-gray-900 group-hover:text-primary transition-colors leading-snug line-clamp-2">Visualizing Complex Pipelines with Flow Weaver and React Flow</h3><p class="text-lg text-gray-600 mb-6 line-clamp-3 flex-1 leading-relaxed">Learn how to build a highly interactive, customizable visual builder and workflow orchestration tool using the premium Flow Weaver template.</p><div class="flex items-center justify-between gap-4 text-xs font-medium text-gray-500 mt-auto pt-4 border-t border-gray-100"><div class="flex items-center gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar h-3.5 w-3.5 text-gray-400"><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path></svg><time dateTime="2026-10-09">Oct 9, 2026</time></div><div class="flex items-center gap-1.5 bg-gray-50 px-2 py-1 rounded-md"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clock h-3.5 w-3.5 text-gray-400"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg><span>5<!-- --> min</span></div></div></div></div></a><a class="block group" href="/blogs/visualizing-hierarchies-tree-weaver"><div class="text-card-foreground shadow-sm relative overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1 h-full flex flex-col border border-gray-200/60 rounded-2xl bg-white"><div class="relative w-full h-52 bg-gray-100 overflow-hidden"><img alt="Visualizing Hierarchies with React flow Tree Weaver" loading="lazy" decoding="async" data-nimg="fill" class="object-cover transition-transform duration-500 group-hover:scale-105" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="100vw" srcSet="/_next/image?url=%2Fimages%2Freactflow%2Freact-flow-tree-weaver.png&amp;w=640&amp;q=75 640w, /_next/image?url=%2Fimages%2Freactflow%2Freact-flow-tree-weaver.png&amp;w=750&amp;q=75 750w, /_next/image?url=%2Fimages%2Freactflow%2Freact-flow-tree-weaver.png&amp;w=828&amp;q=75 828w, /_next/image?url=%2Fimages%2Freactflow%2Freact-flow-tree-weaver.png&amp;w=1080&amp;q=75 1080w, /_next/image?url=%2Fimages%2Freactflow%2Freact-flow-tree-weaver.png&amp;w=1200&amp;q=75 1200w, /_next/image?url=%2Fimages%2Freactflow%2Freact-flow-tree-weaver.png&amp;w=1920&amp;q=75 1920w, /_next/image?url=%2Fimages%2Freactflow%2Freact-flow-tree-weaver.png&amp;w=2048&amp;q=75 2048w, /_next/image?url=%2Fimages%2Freactflow%2Freact-flow-tree-weaver.png&amp;w=3840&amp;q=75 3840w" src="/_next/image?url=%2Fimages%2Freactflow%2Freact-flow-tree-weaver.png&amp;w=3840&amp;q=75"/></div><div class="p-6 flex-1 flex flex-col"><div class="flex flex-wrap gap-2 mb-4"><div class="inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors">React Flow</div><div class="inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors">Tree Layout</div></div><h3 class="text-2xl font-bold mb-3 text-gray-900 group-hover:text-primary transition-colors leading-snug line-clamp-2">Visualizing Hierarchies with React flow Tree Weaver</h3><p class="text-lg text-gray-600 mb-6 line-clamp-3 flex-1 leading-relaxed">Discover how to build performant, collapsible tree structures and org charts using our new $50 premium Tree Weaver template.</p><div class="flex items-center justify-between gap-4 text-xs font-medium text-gray-500 mt-auto pt-4 border-t border-gray-100"><div class="flex items-center gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar h-3.5 w-3.5 text-gray-400"><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path></svg><time dateTime="2026-10-09">Oct 9, 2026</time></div><div class="flex items-center gap-1.5 bg-gray-50 px-2 py-1 rounded-md"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clock h-3.5 w-3.5 text-gray-400"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg><span>5<!-- --> min</span></div></div></div></div></a><a class="block group" href="/blogs/visualizing-complex-hierarchies-multi-dir-mindmap"><div class="text-card-foreground shadow-sm relative overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1 h-full flex flex-col border border-gray-200/60 rounded-2xl bg-white"><div class="relative w-full h-52 bg-gray-100 overflow-hidden"><img alt="Visualizing Complex Hierarchies with Multi-Directional Mindmaps in React Flow" loading="lazy" decoding="async" data-nimg="fill" class="object-cover transition-transform duration-500 group-hover:scale-105" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="100vw" srcSet="/_next/image?url=%2Fimages%2Freactflow%2Fmulti-dir-mindmap.png&amp;w=640&amp;q=75 640w, /_next/image?url=%2Fimages%2Freactflow%2Fmulti-dir-mindmap.png&amp;w=750&amp;q=75 750w, /_next/image?url=%2Fimages%2Freactflow%2Fmulti-dir-mindmap.png&amp;w=828&amp;q=75 828w, /_next/image?url=%2Fimages%2Freactflow%2Fmulti-dir-mindmap.png&amp;w=1080&amp;q=75 1080w, /_next/image?url=%2Fimages%2Freactflow%2Fmulti-dir-mindmap.png&amp;w=1200&amp;q=75 1200w, /_next/image?url=%2Fimages%2Freactflow%2Fmulti-dir-mindmap.png&amp;w=1920&amp;q=75 1920w, /_next/image?url=%2Fimages%2Freactflow%2Fmulti-dir-mindmap.png&amp;w=2048&amp;q=75 2048w, /_next/image?url=%2Fimages%2Freactflow%2Fmulti-dir-mindmap.png&amp;w=3840&amp;q=75 3840w" src="/_next/image?url=%2Fimages%2Freactflow%2Fmulti-dir-mindmap.png&amp;w=3840&amp;q=75"/></div><div class="p-6 flex-1 flex flex-col"><div class="flex flex-wrap gap-2 mb-4"><div class="inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors">React Flow</div><div class="inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors">Mindmap</div></div><h3 class="text-2xl font-bold mb-3 text-gray-900 group-hover:text-primary transition-colors leading-snug line-clamp-2">Visualizing Complex Hierarchies with Multi-Directional Mindmaps in React Flow</h3><p class="text-lg text-gray-600 mb-6 line-clamp-3 flex-1 leading-relaxed">Explore our new $100 premium Multi-Directional Mindmap template featuring image support, dynamic layouts, and expansive node routing.</p><div class="flex items-center justify-between gap-4 text-xs font-medium text-gray-500 mt-auto pt-4 border-t border-gray-100"><div class="flex items-center gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar h-3.5 w-3.5 text-gray-400"><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path></svg><time dateTime="2026-10-09">Oct 9, 2026</time></div><div class="flex items-center gap-1.5 bg-gray-50 px-2 py-1 rounded-md"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clock h-3.5 w-3.5 text-gray-400"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg><span>6<!-- --> min</span></div></div></div></div></a><a class="block group" href="/blogs/creating-organic-whiteboards-excalidraw"><div class="text-card-foreground shadow-sm relative overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1 h-full flex flex-col border border-gray-200/60 rounded-2xl bg-white"><div class="relative w-full h-52 bg-gray-100 overflow-hidden"><img alt="Creating Organic Whiteboards with Excalidraw Sketchboard and React Flow" loading="lazy" decoding="async" data-nimg="fill" class="object-cover transition-transform duration-500 group-hover:scale-105" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="100vw" srcSet="/_next/image?url=%2Fimages%2Freactflow%2Freact-flow-excalidraw.png&amp;w=640&amp;q=75 640w, /_next/image?url=%2Fimages%2Freactflow%2Freact-flow-excalidraw.png&amp;w=750&amp;q=75 750w, /_next/image?url=%2Fimages%2Freactflow%2Freact-flow-excalidraw.png&amp;w=828&amp;q=75 828w, /_next/image?url=%2Fimages%2Freactflow%2Freact-flow-excalidraw.png&amp;w=1080&amp;q=75 1080w, /_next/image?url=%2Fimages%2Freactflow%2Freact-flow-excalidraw.png&amp;w=1200&amp;q=75 1200w, /_next/image?url=%2Fimages%2Freactflow%2Freact-flow-excalidraw.png&amp;w=1920&amp;q=75 1920w, /_next/image?url=%2Fimages%2Freactflow%2Freact-flow-excalidraw.png&amp;w=2048&amp;q=75 2048w, /_next/image?url=%2Fimages%2Freactflow%2Freact-flow-excalidraw.png&amp;w=3840&amp;q=75 3840w" src="/_next/image?url=%2Fimages%2Freactflow%2Freact-flow-excalidraw.png&amp;w=3840&amp;q=75"/></div><div class="p-6 flex-1 flex flex-col"><div class="flex flex-wrap gap-2 mb-4"><div class="inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors">React Flow</div><div class="inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors">Whiteboard</div></div><h3 class="text-2xl font-bold mb-3 text-gray-900 group-hover:text-primary transition-colors leading-snug line-clamp-2">Creating Organic Whiteboards with Excalidraw Sketchboard and React Flow</h3><p class="text-lg text-gray-600 mb-6 line-clamp-3 flex-1 leading-relaxed">Discover how to build beautiful, hand-drawn aesthetic whiteboards and diagramming tools using our new premium Excalidraw Sketchboard tem
1plate.</p><div class="flex items-center justify-between gap-4 text-xs font-medium text-gray-500 mt-auto pt-4 border-t border-gray-100"><div class="flex items-center gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar h-3.5 w-3.5 text-gray-400"><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path></svg><time dateTime="2026-10-09">Oct 9, 2026</time></div><div class="flex items-center gap-1.5 bg-gray-50 px-2 py-1 rounded-md"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clock h-3.5 w-3.5 text-gray-400"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg><span>7<!-- --> min</span></div></div></div></div></a><a class="block group" href="/blogs/building-interactive-canvas-experiences"><div class="text-card-foreground shadow-sm relative overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1 h-full flex flex-col border border-gray-200/60 rounded-2xl bg-white"><div class="relative w-full h-52 bg-gray-100 overflow-hidden"><img alt="Building Interactive Canvas Experiences with React Flow" loading="lazy" decoding="async" data-nimg="fill" class="object-cover transition-transform duration-500 group-hover:scale-105" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="100vw" srcSet="/_next/image?url=%2Fimages%2Freactflow%2Fcanvas-flow.png&amp;w=640&amp;q=75 640w, /_next/image?url=%2Fimages%2Freactflow%2Fcanvas-flow.png&amp;w=750&amp;q=75 750w, /_next/image?url=%2Fimages%2Freactflow%2Fcanvas-flow.png&amp;w=828&amp;q=75 828w, /_next/image?url=%2Fimages%2Freactflow%2Fcanvas-flow.png&amp;w=1080&amp;q=75 1080w, /_next/image?url=%2Fimages%2Freactflow%2Fcanvas-flow.png&amp;w=1200&amp;q=75 1200w, /_next/image?url=%2Fimages%2Freactflow%2Fcanvas-flow.png&amp;w=1920&amp;q=75 1920w, /_next/image?url=%2Fimages%2Freactflow%2Fcanvas-flow.png&amp;w=2048&amp;q=75 2048w, /_next/image?url=%2Fimages%2Freactflow%2Fcanvas-flow.png&amp;w=3840&amp;q=75 3840w" src="/_next/image?url=%2Fimages%2Freactflow%2Fcanvas-flow.png&amp;w=3840&amp;q=75"/></div><div class="p-6 flex-1 flex flex-col"><div class="flex flex-wrap gap-2 mb-4"><div class="inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors">React Flow</div><div class="inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors">Canvas</div></div><h3 class="text-2xl font-bold mb-3 text-gray-900 group-hover:text-primary transition-colors leading-snug line-clamp-2">Building Interactive Canvas Experiences with React Flow</h3><p class="text-lg text-gray-600 mb-6 line-clamp-3 flex-1 leading-relaxed">Explore the new Canvas Flow Builder template. Learn how to create stunning, interactive visual builders with smooth animations and custom node designs.</p><div class="flex items-center justify-between gap-4 text-xs font-medium text-gray-500 mt-auto pt-4 border-t border-gray-100"><div class="flex items-center gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar h-3.5 w-3.5 text-gray-400"><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path></svg><time dateTime="2026-10-09">Oct 9, 2026</time></div><div class="flex items-center gap-1.5 bg-gray-50 px-2 py-1 rounded-md"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clock h-3.5 w-3.5 text-gray-400"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg><span>6<!-- --> min</span></div></div></div></div></a><a class="block group" href="/blogs/sequence-diagram-flow"><div class="text-card-foreground shadow-sm relative overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1 h-full flex flex-col border border-gray-200/60 rounded-2xl bg-white"><div class="relative w-full h-52 bg-gray-100 overflow-hidden"><img alt="Building UML Sequence Diagrams with React Flow" loading="lazy" decoding="async" data-nimg="fill" class="object-cover transition-transform duration-500 group-hover:scale-105" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="100vw" srcSet="/_next/image?url=%2Fimages%2Freactflow%2Fsequence-diagram-flow.png&amp;w=640&amp;q=75 640w, /_next/image?url=%2Fimages%2Freactflow%2Fsequence-diagram-flow.png&amp;w=750&amp;q=75 750w, /_next/image?url=%2Fimages%2Freactflow%2Fsequence-diagram-flow.png&amp;w=828&amp;q=75 828w, /_next/image?url=%2Fimages%2Freactflow%2Fsequence-diagram-flow.png&amp;w=1080&amp;q=75 1080w, /_next/image?url=%2Fimages%2Freactflow%2Fsequence-diagram-flow.png&amp;w=1200&amp;q=75 1200w, /_next/image?url=%2Fimages%2Freactflow%2Fsequence-diagram-flow.png&amp;w=1920&amp;q=75 1920w, /_next/image?url=%2Fimages%2Freactflow%2Fsequence-diagram-flow.png&amp;w=2048&amp;q=75 2048w, /_next/image?url=%2Fimages%2Freactflow%2Fsequence-diagram-flow.png&amp;w=3840&amp;q=75 3840w" src="/_next/image?url=%2Fimages%2Freactflow%2Fsequence-diagram-flow.png&amp;w=3840&amp;q=75"/></div><div class="p-6 flex-1 flex flex-col"><div class="flex flex-wrap gap-2 mb-4"><div class="inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors">React Flow</div><div class="inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors">UML</div></div><h3 class="text-2xl font-bold mb-3 text-gray-900 group-hover:text-primary transition-colors leading-snug line-clamp-2">Building UML Sequence Diagrams with React Flow</h3><p class="text-lg text-gray-600 mb-6 line-clamp-3 flex-1 leading-relaxed">Learn the complex architectural layout algorithms required to build structured, rigid UML sequence diagrams and timelines using React Flow.</p><div class="flex items-center justify-between gap-4 text-xs font-medium text-gray-500 mt-auto pt-4 border-t border-gray-100"><div class="flex items-center gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar h-3.5 w-3.5 text-gray-400"><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path></svg><time dateTime="2026-05-25">May 25, 2026</time></div><div class="flex items-center gap-1.5 bg-gray-50 px-2 py-1 rounded-md"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clock h-3.5 w-3.5 text-gray-400"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg><span>7<!-- --> min</span></div></div></div></div></a><a class="block group" href="/blogs/scale-studio-pro"><div class="text-card-foreground shadow-sm relative overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1 h-full flex flex-col border border-gray-200/60 rounded-2xl bg-white"><div class="relative w-full h-52 bg-gray-100 overflow-hidden"><img alt="Architecting for Massive Scale in React Flow" loading="lazy" decoding="async" data-nimg="fill" class="object-cover transition-transform duration-500 group-hover:scale-105" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="100vw" srcSet="/_next/image?url=%2Fimages%2Freactflow%2Fscale-studio-pro.png&amp;w=640&amp;q=75 640w, /_next/image?url=%2Fimages%2Freactflow%2Fscale-studio-pro.png&amp;w=750&amp;q=75 750w, /_next/image?url=%2Fimages%2Freactflow%2Fscale-studio-pro.png&amp;w=828&amp;q=75 828w, /_next/image?url=%2Fimages%2Freactflow%2Fscale-studio-pro.png&amp;w=1080&amp;q=75 1080w, /_next/image?url=%2Fimages%2Freactflow%2Fscale-studio-pro.png&amp;w=1200&amp;q=75 1200w, /_next/image?url=%2Fimages%2Freactflow%2Fscale-studio-pro.png&amp;w=1920&amp;q=75 1920w, /_next/image?url=%2Fimages%2Freactflow%2Fscale-studio-pro.png&amp;w=2048&amp;q=75 2048w, /_next/image?url=%2Fimages%2Freactflow%2Fscale-studio-pro.png&amp;w=3840&amp;q=75 3840w" src="/_next/image?url=%2Fimages%2Freactflow%2Fscale-studio-pro.png&amp;w=3840&amp;q=75"/></div><div class="p-6 flex-1 flex flex-col"><div class="flex flex-wrap gap-2 mb-4"><div class="inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors">React Flow</div><div class="inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors">Performance</div></div><h3 class="text-2xl font-bold mb-3 text-gray-900 group-hover:text-primary transition-colors leading-snug line-clamp-2">Architecting for Massive Scale in React Flow</h3><p class="text-lg text-gray-600 mb-6 line-clamp-3 flex-1 leading-relaxed">A comprehensive guide on handling thousands of nodes with virtualized rendering and advanced minimap optimization in React Flow.</p><div class="flex items-center justify-between gap-4 text-xs font-medium text-gray-500 mt-auto pt-4 border-t border-gray-100"><div class="flex items-center gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar h-3.5 w-3.5 text-gray-400"><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path></svg><time dateTime="2026-05-24">May 24, 2026</time></div><div class="flex items-center gap-1.5 bg-gray-50 px-2 py-1 rounded-md"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clock h-3.5 w-3.5 text-gray-400"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg><span>8<!-- --> min</span></div></div></div></div></a><a class="block group" href="/blogs/force-directed-tree"><div class="text-card-foreground shadow-sm relative overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1 h-full flex flex-col border border-gray-200/60 rounded-2xl bg-white"><div class="relative w-full h-52 bg-gray-100 overflow-hidden"><img alt="Visualizing Networks with Force-Directed Graphs in React Flow" loading="lazy" decoding="async" data-nimg="fill" class="object-cover transition-transform duration-500 group-hover:scale-105" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="100vw" srcSet="/_next/image?url=%2Fimages%2Freactflow%2Fforce-directed-tree.png&amp;w=640&amp;q=75 640w, /_next/image?url=%2Fimages%2Freactflow%2Fforce-directed-tree.png&amp;w=750&amp;q=75 750w, /_next/image?url=%2Fimages%2Freactflow%2Fforce-directed-tree.png&amp;w=828&amp;q=75 828w, /_next/image?url=%2Fimages%2Freactflow%2Fforce-directed-tree.png&amp;w=1080&amp;q=75 1080w, /_next/image?url=%2Fimages%2Freactflow%2Fforce-directed-tree.png&amp;w=1200&amp;q=75 1200w, /_next/image?url=%2Fimages%2Freactflow%2Fforce-directed-tree.png&amp;w=1920&amp;q=75 1920w, /_next/image?url=%2Fimages%2Freactflow%2Fforce-directed-tree.png&amp;w=2048&amp;q=75 2048w, /_next/image?url=%2Fimages%2Freactflow%2Fforce-directed-tree.png&amp;w=3840&amp;q=75 3840w" src="/_next/image?url=%2Fimages%2Freactflow%2Fforce-directed-tree.png&amp;w=3840&amp;q=75"/></div><div class="p-6 flex-1 flex flex-col"><div class="flex flex-wrap gap-2 mb-4"><div class="inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors">React Flow</div><div class="inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors">D3</div></div><h3 class="text-2xl font-bold mb-3 text-gray-900 group-hover:text-primary transition-colors leading-snug line-clamp-2">Visualizing Networks with Force-Directed Graphs in React Flow</h3><p class="text-lg text-gray-600 mb-6 line-clamp-3 flex-1 leading-relaxed">Learn how to integrate D3-force physics with React Flow to build stunning, organic, and self-organizing network graphs.</p><div class="flex items-center justify-between gap-4 text-xs font-medium text-gray-500 mt-auto pt-4 border-t border-gray-100"><div class="flex items-center gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar h-3.5 w-3.5 text-gray-400"><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path></svg><time dateTime="2026-05-21">May 21, 2026</time></div><div class="flex items-center gap-1.5 bg-gray-50 px-2 py-1 rounded-md"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clock h-3.5 w-3.5 text-gray-400"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg><span>6<!-- --> min</span></div></div></div></div></a><a class="block group" href="/blogs/energy-sankey-diagram"><div class="text-card-foreground shadow-sm relative overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1 h-full flex flex-col border border-gray-200/60 rounded-2xl bg-white"><div class="relative w-full h-52 bg-gray-100 overflow-hidden"><img alt="Visualizing Energy Flows with React Flow Sankey Diagrams" loading="lazy" decoding="async" data-nimg="fill" class="object-cover transition-transform duration-500 group-hover:scale-105" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="100vw" srcSet="/_next/image?url=%2Fimages%2Freactflow%2Fenergy-sankey-diagram.png&amp;w=640&amp;q=75 640w, /_next/image?url=%2Fimages%2Freactflow%2Fenergy-sankey-diagram.png&amp;w=750&amp;q=75 750w, /_next/image?url=%2Fimages%2Freactflow%2Fenergy-sankey-diagram.png&amp;w=828&amp;q=75 828w, /_next/image?url=%2Fimages%2Freactflow%2Fenergy-sankey-diagram.png&amp;w=1080&amp;q=75 1080w, /_next/image?url=%2Fimages%2Freactflow%2Fenergy-sankey-diagram.png&amp;w=1200&amp;q=75 1200w, /_next/image?url=%2Fimages%2Freactflow%2Fenergy-sankey-diagram.png&amp;w=1920&amp;q=75 1920w, /_next/image?url=%2Fimages%2Freactflow%2Fenergy-sankey-diagram.png&amp;w=
12048&amp;q=75 2048w, /_next/image?url=%2Fimages%2Freactflow%2Fenergy-sankey-diagram.png&amp;w=3840&amp;q=75 3840w" src="/_next/image?url=%2Fimages%2Freactflow%2Fenergy-sankey-diagram.png&amp;w=3840&amp;q=75"/></div><div class="p-6 flex-1 flex flex-col"><div class="flex flex-wrap gap-2 mb-4"><div class="inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors">React Flow</div><div class="inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors">Data Visualization</div></div><h3 class="text-2xl font-bold mb-3 text-gray-900 group-hover:text-primary transition-colors leading-snug line-clamp-2">Visualizing Energy Flows with React Flow Sankey Diagrams</h3><p class="text-lg text-gray-600 mb-6 line-clamp-3 flex-1 leading-relaxed">Learn how to build complex, animated Sankey diagrams to track energy distribution, financial transactions, and user journeys using React Flow.</p><div class="flex items-center justify-between gap-4 text-xs font-medium text-gray-500 mt-auto pt-4 border-t border-gray-100"><div class="flex items-center gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar h-3.5 w-3.5 text-gray-400"><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path></svg><time dateTime="2026-05-13">May 13, 2026</time></div><div class="flex items-center gap-1.5 bg-gray-50 px-2 py-1 rounded-md"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clock h-3.5 w-3.5 text-gray-400"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg><span>6<!-- --> min</span></div></div></div></div></a><a class="block group" href="/blogs/incremental-tree-builder"><div class="text-card-foreground shadow-sm relative overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1 h-full flex flex-col border border-gray-200/60 rounded-2xl bg-white"><div class="relative w-full h-52 bg-gray-100 overflow-hidden"><img alt="Building Interactive Org Charts and Incremental Trees in React Flow" loading="lazy" decoding="async" data-nimg="fill" class="object-cover transition-transform duration-500 group-hover:scale-105" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="100vw" srcSet="/_next/image?url=%2Fimages%2Freactflow%2Fincremental-tree-builder.png&amp;w=640&amp;q=75 640w, /_next/image?url=%2Fimages%2Freactflow%2Fincremental-tree-builder.png&amp;w=750&amp;q=75 750w, /_next/image?url=%2Fimages%2Freactflow%2Fincremental-tree-builder.png&amp;w=828&amp;q=75 828w, /_next/image?url=%2Fimages%2Freactflow%2Fincremental-tree-builder.png&amp;w=1080&amp;q=75 1080w, /_next/image?url=%2Fimages%2Freactflow%2Fincremental-tree-builder.png&amp;w=1200&amp;q=75 1200w, /_next/image?url=%2Fimages%2Freactflow%2Fincremental-tree-builder.png&amp;w=1920&amp;q=75 1920w, /_next/image?url=%2Fimages%2Freactflow%2Fincremental-tree-builder.png&amp;w=2048&amp;q=75 2048w, /_next/image?url=%2Fimages%2Freactflow%2Fincremental-tree-builder.png&amp;w=3840&amp;q=75 3840w" src="/_next/image?url=%2Fimages%2Freactflow%2Fincremental-tree-builder.png&amp;w=3840&amp;q=75"/></div><div class="p-6 flex-1 flex flex-col"><div class="flex flex-wrap gap-2 mb-4"><div class="inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors">React Flow</div><div class="inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors">Tree Layout</div></div><h3 class="text-2xl font-bold mb-3 text-gray-900 group-hover:text-primary transition-colors leading-snug line-clamp-2">Building Interactive Org Charts and Incremental Trees in React Flow</h3><p class="text-lg text-gray-600 mb-6 line-clamp-3 flex-1 leading-relaxed">Discover how to architect dynamically expanding, collapsible tree structures and organizational charts with auto-layout algorithms using React Flow.</p><div class="flex items-center justify-between gap-4 text-xs font-medium text-gray-500 mt-auto pt-4 border-t border-gray-100"><div class="flex items-center gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar h-3.5 w-3.5 text-gray-400"><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path></svg><time dateTime="2026-05-12">May 12, 2026</time></div><div class="flex items-center gap-1.5 bg-gray-50 px-2 py-1 rounded-md"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clock h-3.5 w-3.5 text-gray-400"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg><span>5<!-- --> min</span></div></div></div></div></a><a class="block group" href="/blogs/react-flow-vs-jointjs"><div class="text-card-foreground shadow-sm relative overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1 h-full flex flex-col border border-gray-200/60 rounded-2xl bg-white"><div class="relative w-full h-52 bg-gray-100 overflow-hidden"><img alt="React Flow vs JointJS: Why Modern Engineering Teams Are Switching" loading="lazy" decoding="async" data-nimg="fill" class="object-cover transition-transform duration-500 group-hover:scale-105" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="100vw" srcSet="/_next/image?url=%2Fimages%2Freactflow%2Fvisualflow.png&amp;w=640&amp;q=75 640w, /_next/image?url=%2Fimages%2Freactflow%2Fvisualflow.png&amp;w=750&amp;q=75 750w, /_next/image?url=%2Fimages%2Freactflow%2Fvisualflow.png&amp;w=828&amp;q=75 828w, /_next/image?url=%2Fimages%2Freactflow%2Fvisualflow.png&amp;w=1080&amp;q=75 1080w, /_next/image?url=%2Fimages%2Freactflow%2Fvisualflow.png&amp;w=1200&amp;q=75 1200w, /_next/image?url=%2Fimages%2Freactflow%2Fvisualflow.png&amp;w=1920&amp;q=75 1920w, /_next/image?url=%2Fimages%2Freactflow%2Fvisualflow.png&amp;w=2048&amp;q=75 2048w, /_next/image?url=%2Fimages%2Freactflow%2Fvisualflow.png&amp;w=3840&amp;q=75 3840w" src="/_next/image?url=%2Fimages%2Freactflow%2Fvisualflow.png&amp;w=3840&amp;q=75"/></div><div class="p-6 flex-1 flex flex-col"><div class="flex flex-wrap gap-2 mb-4"><div class="inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors">React Flow</div><div class="inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors">JointJS</div></div><h3 class="text-2xl font-bold mb-3 text-gray-900 group-hover:text-primary transition-colors leading-snug line-clamp-2">React Flow vs JointJS: Why Modern Engineering Teams Are Switching</h3><p class="text-lg text-gray-600 mb-6 line-clamp-3 flex-1 leading-relaxed">A deep dive into why React Flow is vastly superior to legacy libraries like JointJS, focusing on React compatibility, state management, and modern developer experience.</p><div class="flex items-center justify-between gap-4 text-xs font-medium text-gray-500 mt-auto pt-4 border-t border-gray-100"><div class="flex items-center gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar h-3.5 w-3.5 text-gray-400"><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path></svg><time dateTime="2026-05-12">May 12, 2026</time></div><div class="flex items-center gap-1.5 bg-gray-50 px-2 py-1 rounded-md"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clock h-3.5 w-3.5 text-gray-400"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg><span>6<!-- --> min</span></div></div></div></div></a><a class="block group" href="/blogs/react-flow-excalidraw-clone"><div class="text-card-foreground shadow-sm relative overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1 h-full flex flex-col border border-gray-200/60 rounded-2xl bg-white"><div class="relative w-full h-52 bg-gray-100 overflow-hidden"><img alt="React flow Excalidraw Clone: Building Whiteboard Apps" loading="lazy" decoding="async" data-nimg="fill" class="object-cover transition-transform duration-500 group-hover:scale-105" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="100vw" srcSet="/_next/image?url=%2Fimages%2Freactflow%2Freact-flow-excalidraw.png&amp;w=640&amp;q=75 640w, /_next/image?url=%2Fimages%2Freactflow%2Freact-flow-excalidraw.png&amp;w=750&amp;q=75 750w, /_next/image?url=%2Fimages%2Freactflow%2Freact-flow-excalidraw.png&amp;w=828&amp;q=75 828w, /_next/image?url=%2Fimages%2Freactflow%2Freact-flow-excalidraw.png&amp;w=1080&amp;q=75 1080w, /_next/image?url=%2Fimages%2Freactflow%2Freact-flow-excalidraw.png&amp;w=1200&amp;q=75 1200w, /_next/image?url=%2Fimages%2Freactflow%2Freact-flow-excalidraw.png&amp;w=1920&amp;q=75 1920w, /_next/image?url=%2Fimages%2Freactflow%2Freact-flow-excalidraw.png&amp;w=2048&amp;q=75 2048w, /_next/image?url=%2Fimages%2Freactflow%2Freact-flow-excalidraw.png&amp;w=3840&amp;q=75 3840w" src="/_next/image?url=%2Fimages%2Freactflow%2Freact-flow-excalidraw.png&amp;w=3840&amp;q=75"/></div><div class="p-6 flex-1 flex flex-col"><div class="flex flex-wrap gap-2 mb-4"><div class="inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors">React flow</div><div class="inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors">Whiteboard</div></div><h3 class="text-2xl font-bold mb-3 text-gray-900 group-hover:text-primary transition-colors leading-snug line-clamp-2">React flow Excalidraw Clone: Building Whiteboard Apps</h3><p class="text-lg text-gray-600 mb-6 line-clamp-3 flex-1 leading-relaxed">A comprehensive guide on how to build a collaborative whiteboard application similar to Excalidraw or Miro using React flow.</p><div class="flex items-center justify-between gap-4 text-xs font-medium text-gray-500 mt-auto pt-4 border-t border-gray-100"><div class="flex items-center gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar h-3.5 w-3.5 text-gray-400"><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path></svg><time dateTime="2026-05-11">May 11, 2026</time></div><div class="flex items-center gap-1.5 bg-gray-50 px-2 py-1 rounded-md"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clock h-3.5 w-3.5 text-gray-400"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg><span>7<!-- --> min</span></div></div></div></div></a><a class="block group" href="/blogs/react-flow-best-diagram-library"><div class="text-card-foreground shadow-sm relative overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1 h-full flex flex-col border border-gray-200/60 rounded-2xl bg-white"><div class="relative w-full h-52 bg-gray-100 overflow-hidden"><img alt="10 Reasons Why React flow is the Best Library for Interactive Node-Based Diagrams" loading="lazy" decoding="async" data-nimg="fill" class="object-cover transition-transform duration-500 group-hover:scale-105" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="100vw" srcSet="/_next/image?url=%2Fimages%2Freactflow%2Freactflow-mindmap.png&amp;w=640&amp;q=75 640w, /_next/image?url=%2Fimages%2Freactflow%2Freactflow-mindmap.png&amp;w=750&amp;q=75 750w, /_next/image?url=%2Fimages%2Freactflow%2Freactflow-mindmap.png&amp;w=828&amp;q=75 828w, /_next/image?url=%2Fimages%2Freactflow%2Freactflow-mindmap.png&amp;w=1080&amp;q=75 1080w, /_next/image?url=%2Fimages%2Freactflow%2Freactflow-mindmap.png&amp;w=1200&amp;q=75 1200w, /_next/image?url=%2Fimages%2Freactflow%2Freactflow-mindmap.png&amp;w=1920&amp;q=75 1920w, /_next/image?url=%2Fimages%2Freactflow%2Freactflow-mindmap.png&amp;w=2048&amp;q=75 2048w, /_next/image?url=%2Fimages%2Freactflow%2Freactflow-mindmap.png&amp;w=3840&amp;q=75 3840w" src="/_next/image?url=%2Fimages%2Freactflow%2Freactflow-mindmap.png&amp;w=3840&amp;q=75"/></div><div class="p-6 flex-1 flex flex-col"><div class="flex flex-wrap gap-2 mb-4"><div class="inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors">React flow</div><div class="inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors">Diagrams</div></div><h3 class="text-2xl font-bold mb-3 text-gray-900 group-hover:text-primary transition-colors leading-snug line-clamp-2">10 Reasons Why React flow is the Best Library for Interactive Node-Based Diagrams</h3><p class="text-lg text-gray-600 mb-6 line-clamp-3 flex-1 leading-relaxed">Discover why React flow is the ultimate choice for building interactive node-based applications, flowcharts, and diagrams natively in React.</p><div class="flex items-center justify-between gap-4 text-xs font-medium text-gray-500 mt-auto pt-4 border-t border-gray-100"><div class="flex items-center gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar h-3.5 w-3.5 text-gray-400"><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path></svg><time dateTime="2026-05-10">May 10, 2026</time></div><div class="flex items-center gap-1.5 bg-gray-50 px-2 py-1 rounded-md"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" 
1stroke-linejoin="round" class="lucide lucide-clock h-3.5 w-3.5 text-gray-400"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg><span>6<!-- --> min</span></div></div></div></div></a><a class="block group" href="/blogs/build-automation-builder-react-flow"><div class="text-card-foreground shadow-sm relative overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1 h-full flex flex-col border border-gray-200/60 rounded-2xl bg-white"><div class="relative w-full h-52 bg-gray-100 overflow-hidden"><img alt="How to Build a Complete SaaS Automation Builder Using React flow" loading="lazy" decoding="async" data-nimg="fill" class="object-cover transition-transform duration-500 group-hover:scale-105" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="100vw" srcSet="/_next/image?url=%2Fimages%2Freactflow%2Freactflow-workflow-automation.png&amp;w=640&amp;q=75 640w, /_next/image?url=%2Fimages%2Freactflow%2Freactflow-workflow-automation.png&amp;w=750&amp;q=75 750w, /_next/image?url=%2Fimages%2Freactflow%2Freactflow-workflow-automation.png&amp;w=828&amp;q=75 828w, /_next/image?url=%2Fimages%2Freactflow%2Freactflow-workflow-automation.png&amp;w=1080&amp;q=75 1080w, /_next/image?url=%2Fimages%2Freactflow%2Freactflow-workflow-automation.png&amp;w=1200&amp;q=75 1200w, /_next/image?url=%2Fimages%2Freactflow%2Freactflow-workflow-automation.png&amp;w=1920&amp;q=75 1920w, /_next/image?url=%2Fimages%2Freactflow%2Freactflow-workflow-automation.png&amp;w=2048&amp;q=75 2048w, /_next/image?url=%2Fimages%2Freactflow%2Freactflow-workflow-automation.png&amp;w=3840&amp;q=75 3840w" src="/_next/image?url=%2Fimages%2Freactflow%2Freactflow-workflow-automation.png&amp;w=3840&amp;q=75"/></div><div class="p-6 flex-1 flex flex-col"><div class="flex flex-wrap gap-2 mb-4"><div class="inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors">React flow</div><div class="inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors">SaaS</div></div><h3 class="text-2xl font-bold mb-3 text-gray-900 group-hover:text-primary transition-colors leading-snug line-clamp-2">How to Build a Complete SaaS Automation Builder Using React flow</h3><p class="text-lg text-gray-600 mb-6 line-clamp-3 flex-1 leading-relaxed">Learn the architecture and step-by-step process of building a visual automation SaaS canvas using the incredible power of React flow.</p><div class="flex items-center justify-between gap-4 text-xs font-medium text-gray-500 mt-auto pt-4 border-t border-gray-100"><div class="flex items-center gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar h-3.5 w-3.5 text-gray-400"><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path></svg><time dateTime="2026-05-09">May 9, 2026</time></div><div class="flex items-center gap-1.5 bg-gray-50 px-2 py-1 rounded-md"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clock h-3.5 w-3.5 text-gray-400"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg><span>8<!-- --> min</span></div></div></div></div></a><a class="block group" href="/blogs/microservices-architecture"><div class="text-card-foreground shadow-sm relative overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1 h-full flex flex-col border border-gray-200/60 rounded-2xl bg-white"><div class="relative w-full h-52 bg-gray-100 overflow-hidden"><img alt="Visualizing Microservices Architectures with React Flow" loading="lazy" decoding="async" data-nimg="fill" class="object-cover transition-transform duration-500 group-hover:scale-105" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="100vw" srcSet="/_next/image?url=%2Fimages%2Freactflow%2Fmicroservices-architecture.png&amp;w=640&amp;q=75 640w, /_next/image?url=%2Fimages%2Freactflow%2Fmicroservices-architecture.png&amp;w=750&amp;q=75 750w, /_next/image?url=%2Fimages%2Freactflow%2Fmicroservices-architecture.png&amp;w=828&amp;q=75 828w, /_next/image?url=%2Fimages%2Freactflow%2Fmicroservices-architecture.png&amp;w=1080&amp;q=75 1080w, /_next/image?url=%2Fimages%2Freactflow%2Fmicroservices-architecture.png&amp;w=1200&amp;q=75 1200w, /_next/image?url=%2Fimages%2Freactflow%2Fmicroservices-architecture.png&amp;w=1920&amp;q=75 1920w, /_next/image?url=%2Fimages%2Freactflow%2Fmicroservices-architecture.png&amp;w=2048&amp;q=75 2048w, /_next/image?url=%2Fimages%2Freactflow%2Fmicroservices-architecture.png&amp;w=3840&amp;q=75 3840w" src="/_next/image?url=%2Fimages%2Freactflow%2Fmicroservices-architecture.png&amp;w=3840&amp;q=75"/></div><div class="p-6 flex-1 flex flex-col"><div class="flex flex-wrap gap-2 mb-4"><div class="inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors">React Flow</div><div class="inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors">Architecture</div></div><h3 class="text-2xl font-bold mb-3 text-gray-900 group-hover:text-primary transition-colors leading-snug line-clamp-2">Visualizing Microservices Architectures with React Flow</h3><p class="text-lg text-gray-600 mb-6 line-clamp-3 flex-1 leading-relaxed">Learn how to build interactive cloud architecture diagrams with custom service nodes and animated traffic edges using React Flow.</p><div class="flex items-center justify-between gap-4 text-xs font-medium text-gray-500 mt-auto pt-4 border-t border-gray-100"><div class="flex items-center gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar h-3.5 w-3.5 text-gray-400"><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path></svg><time dateTime="2026-05-09">May 9, 2026</time></div><div class="flex items-center gap-1.5 bg-gray-50 px-2 py-1 rounded-md"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clock h-3.5 w-3.5 text-gray-400"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg><span>5<!-- --> min</span></div></div></div></div></a><a class="block group" href="/blogs/react-flow-design-studio"><div class="text-card-foreground shadow-sm relative overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1 h-full flex flex-col border border-gray-200/60 rounded-2xl bg-white"><div class="relative w-full h-52 bg-gray-100 overflow-hidden"><img alt="Building a Custom Diagramming Studio with React Flow" loading="lazy" decoding="async" data-nimg="fill" class="object-cover transition-transform duration-500 group-hover:scale-105" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="100vw" srcSet="/_next/image?url=%2Fimages%2Freactflow%2Freact-flow-desing-studio.png&amp;w=640&amp;q=75 640w, /_next/image?url=%2Fimages%2Freactflow%2Freact-flow-desing-studio.png&amp;w=750&amp;q=75 750w, /_next/image?url=%2Fimages%2Freactflow%2Freact-flow-desing-studio.png&amp;w=828&amp;q=75 828w, /_next/image?url=%2Fimages%2Freactflow%2Freact-flow-desing-studio.png&amp;w=1080&amp;q=75 1080w, /_next/image?url=%2Fimages%2Freactflow%2Freact-flow-desing-studio.png&amp;w=1200&amp;q=75 1200w, /_next/image?url=%2Fimages%2Freactflow%2Freact-flow-desing-studio.png&amp;w=1920&amp;q=75 1920w, /_next/image?url=%2Fimages%2Freactflow%2Freact-flow-desing-studio.png&amp;w=2048&amp;q=75 2048w, /_next/image?url=%2Fimages%2Freactflow%2Freact-flow-desing-studio.png&amp;w=3840&amp;q=75 3840w" src="/_next/image?url=%2Fimages%2Freactflow%2Freact-flow-desing-studio.png&amp;w=3840&amp;q=75"/></div><div class="p-6 flex-1 flex flex-col"><div class="flex flex-wrap gap-2 mb-4"><div class="inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors">React Flow</div><div class="inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors">Diagramming</div></div><h3 class="text-2xl font-bold mb-3 text-gray-900 group-hover:text-primary transition-colors leading-snug line-clamp-2">Building a Custom Diagramming Studio with React Flow</h3><p class="text-lg text-gray-600 mb-6 line-clamp-3 flex-1 leading-relaxed">Learn how to build a Draw.io alternative using React Flow. Explore custom SVG shapes, drag-and-drop mechanics, and dynamic node routing.</p><div class="flex items-center justify-between gap-4 text-xs font-medium text-gray-500 mt-auto pt-4 border-t border-gray-100"><div class="flex items-center gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar h-3.5 w-3.5 text-gray-400"><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path></svg><time dateTime="2026-05-08">May 8, 2026</time></div><div class="flex items-center gap-1.5 bg-gray-50 px-2 py-1 rounded-md"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clock h-3.5 w-3.5 text-gray-400"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg><span>6<!-- --> min</span></div></div></div></div></a><a class="block group" href="/blogs/background-studio-react-flow"><div class="text-card-foreground shadow-sm relative overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1 h-full flex flex-col border border-gray-200/60 rounded-2xl bg-white"><div class="relative w-full h-52 bg-gray-100 overflow-hidden">
1<img alt="Background Studio with React Flow: Interactive Canvas Background Designer" loading="lazy" decoding="async" data-nimg="fill" class="object-cover transition-transform duration-500 group-hover:scale-105" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="100vw" srcSet="/_next/image?url=%2Fimages%2Freactflow%2Fbackground-studio.png&amp;w=640&amp;q=75 640w, /_next/image?url=%2Fimages%2Freactflow%2Fbackground-studio.png&amp;w=750&amp;q=75 750w, /_next/image?url=%2Fimages%2Freactflow%2Fbackground-studio.png&amp;w=828&amp;q=75 828w, /_next/image?url=%2Fimages%2Freactflow%2Fbackground-studio.png&amp;w=1080&amp;q=75 1080w, /_next/image?url=%2Fimages%2Freactflow%2Fbackground-studio.png&amp;w=1200&amp;q=75 1200w, /_next/image?url=%2Fimages%2Freactflow%2Fbackground-studio.png&amp;w=1920&amp;q=75 1920w, /_next/image?url=%2Fimages%2Freactflow%2Fbackground-studio.png&amp;w=2048&amp;q=75 2048w, /_next/image?url=%2Fimages%2Freactflow%2Fbackground-studio.png&amp;w=3840&amp;q=75 3840w" src="/_next/image?url=%2Fimages%2Freactflow%2Fbackground-studio.png&amp;w=3840&amp;q=75"/></div><div class="p-6 flex-1 flex flex-col"><div class="flex flex-wrap gap-2 mb-4"><div class="inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors">ReactFlow</div><div class="inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors">Background Editor</div></div><h3 class="text-2xl font-bold mb-3 text-gray-900 group-hover:text-primary transition-colors leading-snug line-clamp-2">Background Studio with React Flow: Interactive Canvas Background Designer</h3><p class="text-lg text-gray-600 mb-6 line-clamp-3 flex-1 leading-relaxed">Explore how to build a real-time background customization studio using React Flow. Design and preview gradients, patterns, and animated effects through an intuitive node-based interface — perfect for theme editors, design tools, and creative configuration UIs.</p><div class="flex items-center justify-between gap-4 text-xs font-medium text-gray-500 mt-auto pt-4 border-t border-gray-100"><div class="flex items-center gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar h-3.5 w-3.5 text-gray-400"><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path></svg><time dateTime="2026-04-29">Apr 29, 2026</time></div><div class="flex items-center gap-1.5 bg-gray-50 px-2 py-1 rounded-md"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clock h-3.5 w-3.5 text-gray-400"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg><span>11<!-- --> min</span></div></div></div></div></a><a class="block group" href="/blogs/radial-node-arranger-circular-layout"><div class="text-card-foreground shadow-sm relative overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1 h-full flex flex-col border border-gray-200/60 rounded-2xl bg-white"><div class="relative w-full h-52 bg-gray-100 overflow-hidden"><img alt="Radial Node Arranger: Building Circular Graph Layouts with ReactFlow" loading="lazy" decoding="async" data-nimg="fill" class="object-cover transition-transform duration-500 group-hover:scale-105" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="100vw" srcSet="/_next/image?url=%2Fimages%2Freactflow%2Fradial-arrange.png&amp;w=640&amp;q=75 640w, /_next/image?url=%2Fimages%2Freactflow%2Fradial-arrange.png&amp;w=750&amp;q=75 750w, /_next/image?url=%2Fimages%2Freactflow%2Fradial-arrange.png&amp;w=828&amp;q=75 828w, /_next/image?url=%2Fimages%2Freactflow%2Fradial-arrange.png&amp;w=1080&amp;q=75 1080w, /_next/image?url=%2Fimages%2Freactflow%2Fradial-arrange.png&amp;w=1200&amp;q=75 1200w, /_next/image?url=%2Fimages%2Freactflow%2Fradial-arrange.png&amp;w=1920&amp;q=75 1920w, /_next/image?url=%2Fimages%2Freactflow%2Fradial-arrange.png&amp;w=2048&amp;q=75 2048w, /_next/image?url=%2Fimages%2Freactflow%2Fradial-arrange.png&amp;w=3840&amp;q=75 3840w" src="/_next/image?url=%2Fimages%2Freactflow%2Fradial-arrange.png&amp;w=3840&amp;q=75"/></div><div class="p-6 flex-1 flex flex-col"><div class="flex flex-wrap gap-2 mb-4"><div class="inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors">ReactFlow</div><div class="inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors">Graph Layout</div></div><h3 class="text-2xl font-bold mb-3 text-gray-900 group-hover:text-primary transition-colors leading-snug line-clamp-2">Radial Node Arranger: Building Circular Graph Layouts with ReactFlow</h3><p class="text-lg text-gray-600 mb-6 line-clamp-3 flex-1 leading-relaxed">Learn how to build a radial layout engine that automatically arranges ReactFlow nodes in circular and hierarchical patterns. Perfect for org charts, dependency graphs, and relationship maps.</p><div class="flex items-center justify-between gap-4 text-xs font-medium text-gray-500 mt-auto pt-4 border-t border-gray-100"><div class="flex items-center gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar h-3.5 w-3.5 text-gray-400"><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path></svg><time dateTime="2026-04-22">Apr 22, 2026</time></div><div class="flex items-center gap-1.5 bg-gray-50 px-2 py-1 rounded-md"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clock h-3.5 w-3.5 text-gray-400"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg><span>10<!-- --> min</span></div></div></div></div></a><a class="block group" href="/blogs/hexaflow-board-hexagonal-canvas"><div class="text-card-foreground shadow-sm relative overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1 h-full flex flex-col border border-gray-200/60 rounded-2xl bg-white"><div class="relative w-full h-52 bg-gray-100 overflow-hidden">
1<img alt="HexaFlow Board: Designing Hexagonal Node Canvases with ReactFlow" loading="lazy" decoding="async" data-nimg="fill" class="object-cover transition-transform duration-500 group-hover:scale-105" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="100vw" srcSet="/_next/image?url=%2Fimages%2Freactflow%2Fhexaflow.png&amp;w=640&amp;q=75 640w, /_next/image?url=%2Fimages%2Freactflow%2Fhexaflow.png&amp;w=750&amp;q=75 750w, /_next/image?url=%2Fimages%2Freactflow%2Fhexaflow.png&amp;w=828&amp;q=75 828w, /_next/image?url=%2Fimages%2Freactflow%2Fhexaflow.png&amp;w=1080&amp;q=75 1080w, /_next/image?url=%2Fimages%2Freactflow%2Fhexaflow.png&amp;w=1200&amp;q=75 1200w, /_next/image?url=%2Fimages%2Freactflow%2Fhexaflow.png&amp;w=1920&amp;q=75 1920w, /_next/image?url=%2Fimages%2Freactflow%2Fhexaflow.png&amp;w=2048&amp;q=75 2048w, /_next/image?url=%2Fimages%2Freactflow%2Fhexaflow.png&amp;w=3840&amp;q=75 3840w" src="/_next/image?url=%2Fimages%2Freactflow%2Fhexaflow.png&amp;w=3840&amp;q=75"/></div><div class="p-6 flex-1 flex flex-col"><div class="flex flex-wrap gap-2 mb-4"><div class="inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors">ReactFlow</div><div class="inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors">Hexagonal Grid</div></div><h3 class="text-2xl font-bold mb-3 text-gray-900 group-hover:text-primary transition-colors leading-snug line-clamp-2">HexaFlow Board: Designing Hexagonal Node Canvases with ReactFlow</h3><p class="text-lg text-gray-600 mb-6 line-clamp-3 flex-1 leading-relaxed">Discover how to create a unique hexagonal grid canvas with ReactFlow. Build visually stunning board layouts using hex-shaped custom nodes — perfect for game maps, data grids, and creative diagramming.</p><div class="flex items-center justify-between gap-4 text-xs font-medium text-gray-500 mt-auto pt-4 border-t border-gray-100"><div class="flex items-center gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar h-3.5 w-3.5 text-gray-400"><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path></svg><time dateTime="2026-04-22">Apr 22, 2026</time></div><div class="flex items-center gap-1.5 bg-gray-50 px-2 py-1 rounded-md"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clock h-3.5 w-3.5 text-gray-400"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg><span>10<!-- --> min</span></div></div></div></div></a><a class="block group" href="/blogs/introducing-bot-weave"><div class="text-card-foreground shadow-sm relative overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1 h-full flex flex-col border border-gray-200/60 rounded-2xl bg-white"><div class="relative w-full h-52 bg-gray-100 overflow-hidden"><img alt="Introducing Bot Weave: Building Advanced AI Bot &amp; Lead Gen Workflows with ReactFlow" loading="lazy" decoding="async" data-nimg="fill" class="object-cover transition-transform duration-500 group-hover:scale-105" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="100vw" srcSet="/_next/image?url=%2Fimages%2Freactflow%2Fbot-weave.png&amp;w=640&amp;q=75 640w, /_next/image?url=%2Fimages%2Freactflow%2Fbot-weave.png&amp;w=750&amp;q=75 750w, /_next/image?url=%2Fimages%2Freactflow%2Fbot-weave.png&amp;w=828&amp;q=75 828w, /_next/image?url=%2Fimages%2Freactflow%2Fbot-weave.png&amp;w=1080&amp;q=75 1080w, /_next/image?url=%2Fimages%2Freactflow%2Fbot-weave.png&amp;w=1200&amp;q=75 1200w, /_next/image?url=%2Fimages%2Freactflow%2Fbot-weave.png&amp;w=1920&amp;q=75 1920w, /_next/image?url=%2Fimages%2Freactflow%2Fbot-weave.png&amp;w=2048&amp;q=75 2048w, /_next/image?url=%2Fimages%2Freactflow%2Fbot-weave.png&amp;w=3840&amp;q=75 3840w" src="/_next/image?url=%2Fimages%2Freactflow%2Fbot-weave.png&amp;w=3840&amp;q=75"/></div><div class="p-6 flex-1 flex flex-col"><div class="flex flex-wrap gap-2 mb-4"><div class="inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors">ReactFlow</div><div class="inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors">Chatbots</div></div><h3 class="text-2xl font-bold mb-3 text-gray-900 group-hover:text-primary transition-colors leading-snug line-clamp-2">Introducing Bot Weave: Building Advanced AI Bot &amp; Lead Gen Workflows with ReactFlow</h3><p class="text-lg text-gray-600 mb-6 line-clamp-3 flex-1 leading-relaxed">Discover how to create a highly sophisticated visual builder for AI chatbots and lead generation agents using ReactFlow. See how advanced dialog branching and visual logic work in harmony.</p><div class="flex items-center justify-between gap-4 text-xs font-medium text-gray-500 mt-auto pt-4 border-t border-gray-100"><div class="flex items-center gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar h-3.5 w-3.5 text-gray-400"><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path></svg><time dateTime="2026-04-12">Apr 12, 2026</time></div><div class="flex items-center gap-1.5 bg-gray-50 px-2 py-1 rounded-md"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clock h-3.5 w-3.5 text-gray-400"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg><span>12<!-- --> min</span></div></div></div></div></a><a class="block group" href="/blogs/introducing-flow-exploration-studio"><div class="text-card-foreground shadow-sm relative overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1 h-full flex flex-col border border-gray-200/60 rounded-2xl bg-white"><div class="relative w-full h-52 bg-gray-100 overflow-hidden"><img alt="Introducing Flow Exploration Studio: Interactive Node Environments" loading="lazy" decoding="async" data-nimg="fill" class="object-cover transition-transform duration-500 group-hover:scale-105" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="100vw" srcSet="/_next/image?url=%2Fimages%2Freactflow%2Fflow-exploration-studio.png&amp;w=640&amp;q=75 640w, /_next/image?url=%2Fimages%2Freactflow%2Fflow-exploration-studio.png&amp;w=750&amp;q=75 750w, /_next/image?url=%2Fimages%2Freactflow%2Fflow-exploration-studio.png&amp;w=828&amp;q=75 828w, /_next/image?url=%2Fimages%2Freactflow%2Fflow-exploration-studio.png&amp;w=1080&amp;q=75 1080w, /_next/image?url=%2Fimages%2Freactflow%2Fflow-exploration-studio.png&amp;w=1200&amp;q=75 1200w, /_next/image?url=%2Fimages%2Freactflow%2Fflow-exploration-studio.png&amp;w=1920&amp;q=75 1920w, /_next/image?url=%2Fimages%2Freactflow%2Fflow-exploration-studio.png&amp;w=2048&amp;q=75 2048w, /_next/image?url=%2Fimages%2Freactflow%2Fflow-exploration-studio.png&amp;w=3840&amp;q=75 3840w" src="/_next/image?url=%2Fimages%2Freactflow%2Fflow-exploration-studio.png&amp;w=3840&amp;q=75"/></div><div class="p-6 flex-1 flex flex-col"><div class="flex flex-wrap gap-2 mb-4"><div class="inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors">React flow</div><div class="inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors">
1React</div></div><h3 class="text-2xl font-bold mb-3 text-gray-900 group-hover:text-primary transition-colors leading-snug line-clamp-2">Introducing Flow Exploration Studio: Interactive Node Environments</h3><p class="text-lg text-gray-600 mb-6 line-clamp-3 flex-1 leading-relaxed">Learn how to build interactive testing and exploration workspaces using React flow. See how custom node inspectors and isolated execution environments function.</p><div class="flex items-center justify-between gap-4 text-xs font-medium text-gray-500 mt-auto pt-4 border-t border-gray-100"><div class="flex items-center gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar h-3.5 w-3.5 text-gray-400"><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path></svg><time dateTime="2026-04-11">Apr 11, 2026</time></div><div class="flex items-center gap-1.5 bg-gray-50 px-2 py-1 rounded-md"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clock h-3.5 w-3.5 text-gray-400"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg><span>8<!-- --> min</span></div></div></div></div></a><a class="block group" href="/blogs/reactflow-workflow-automation-visual-automation"><div class="text-card-foreground shadow-sm relative overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1 h-full flex flex-col border border-gray-200/60 rounded-2xl bg-white"><div class="relative w-full h-52 bg-gray-100 overflow-hidden"><img alt="ReactFlow Workflow Automation: Building Visual Automation Platforms" loading="lazy" decoding="async" data-nimg="fill" class="object-cover transition-transform duration-500 group-hover:scale-105" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="100vw" srcSet="/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdcewthzm6%2Fimage%2Fupload%2Fv1771996559%2Freactflow-workflow-automation_rnn67l.png&amp;w=640&amp;q=75 640w, /_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdcewthzm6%2Fimage%2Fupload%2Fv1771996559%2Freactflow-workflow-automation_rnn67l.png&amp;w=750&amp;q=75 750w, /_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdcewthzm6%2Fimage%2Fupload%2Fv1771996559%2Freactflow-workflow-automation_rnn67l.png&amp;w=828&amp;q=75 828w, /_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdcewthzm6%2Fimage%2Fupload%2Fv1771996559%2Freactflow-workflow-automation_rnn67l.png&amp;w=1080&amp;q=75 1080w, /_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdcewthzm6%2Fimage%2Fupload%2Fv1771996559%2Freactflow-workflow-automation_rnn67l.png&amp;w=1200&amp;q=75 1200w, /_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdcewthzm6%2Fimage%2Fupload%2Fv1771996559%2Freactflow-workflow-automation_rnn67l.png&amp;w=1920&amp;q=75 1920w, /_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdcewthzm6%2Fimage%2Fupload%2Fv1771996559%2Freactflow-workflow-automation_rnn67l.png&amp;w=2048&amp;q=75 2048w, /_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdcewthzm6%2Fimage%2Fupload%2Fv1771996559%2Freactflow-workflow-automation_rnn67l.png&amp;w=3840&amp;q=75 3840w" src="/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdcewthzm6%2Fimage%2Fupload%2Fv1771996559%2Freactflow-workflow-automation_rnn67l.png&amp;w=3840&amp;q=75"/></div><div class="p-6 flex-1 flex flex-col"><div class="flex flex-wrap gap-2 mb-4"><div class="inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors">Workflow Automation</div><div class="inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors">Visual Builder</div></div><h3 class="text-2xl font-bold mb-3 text-gray-900 group-hover:text-primary transition-colors leading-snug line-clamp-2">ReactFlow Workflow Automation: Building Visual Automation Platforms</h3><p class="text-lg text-gray-600 mb-6 line-clamp-3 flex-1 leading-relaxed">Build powerful visual workflow automation platforms with ReactFlow. Design, test, and deploy complex automation workflows with drag-and-drop interface, custom nodes, conditional logic, and real-time execution monitoring for enterprise-grade business process automation.</p><div class="flex items-center justify-between gap-4 text-xs font-medium text-gray-500 mt-auto pt-4 border-t border-gray-100"><div class="flex items-center gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar h-3.5 w-3.5 text-gray-400"><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path></svg><time dateTime="2024-05-01">May 1, 2024</time></div><div class="flex items-center gap-1.5 bg-gray-50 px-2 py-1 rounded-md"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clock h-3.5 w-3.5 text-gray-400"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg><span>18<!-- --> min</span></div></div></div></div></a><a class="block group" href="/blogs/3d-reactflow-editor-immersive-flow-designer"><div class="text-card-foreground shadow-sm relative overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1 h-full flex flex-col border border-gray-200/60 rounded-2xl bg-white"><div class="relative w-full h-52 bg-gray-100 overflow-hidden"><img alt="3D ReactFlow Editor: Immersive Three-Dimensional Flow Designer" loading="lazy" decoding="async" data-nimg="fill" class="object-cover transition-transform duration-500 group-hover:scale-105" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="100vw" srcSet="/_next/image?url=%2Fimages%2Freactflow%2F3d-reactflow-editor.png&amp;w=640&amp;q=75 640w, /_next/image?url=%2Fimages%2Freactflow%2F3d-reactflow-editor.png&amp;w=750&amp;q=75 750w, /_next/image?url=%2Fimages%2Freactflow%2F3d-reactflow-editor.png&amp;w=828&amp;q=75 828w, /_next/image?url=%2Fimages%2Freactflow%2F3d-reactflow-editor.png&amp;w=1080&amp;q=75 1080w, /_next/image?url=%2Fimages%2Freactflow%2F3d-reactflow-editor.png&amp;w=1200&amp;q=75 1200w, /_next/image?url=%2Fimages%2Freactflow%2F3d-reactflow-editor.png&amp;w=1920&amp;q=75 1920w, /_next/image?url=%2Fimages%2Freactflow%2F3d-reactflow-editor.png&amp;w=2048&amp;q=75 2048w, /_next/image?url=%2Fimages%2Freactflow%2F3d-reactflow-editor.png&amp;w=3840&amp;q=75 3840w" src="/_next/image?url=%2Fimages%2Freactflow%2F3d-reactflow-editor.png&amp;w=3840&amp;q=75"/></div><div class="p-6 flex-1 flex flex-col"><div class="flex flex-wrap gap-2 mb-4"><div class="inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors">3D Editor</div><div class="inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors">Flow Design</div></div><h3 class="text-2xl font-bold mb-3 text-gray-900 group-hover:text-primary transition-colors leading-snug line-clamp-2">3D ReactFlow Editor: Immersive Three-Dimensional Flow Designer</h3><p class="text-lg text-gray-600 mb-6 line-clamp-3 flex-1 leading-relaxed">Revolutionary three-dimensional flow editor built with ReactFlow and Three.js for immersive, interactive node-based editing. Create and edit stunning 3D flow diagrams with 3D node rendering, camera controls, depth-based interactions, node editing, edge creation, and smooth animations for next-generation flow design.</p><div class="flex items-center justify-between gap-4 text-xs font-medium text-gray-500 mt-auto pt-4 border-t border-gray-100"><div class="flex items-center gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar h-3.5 w-3.5 text-gray-400"><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path></svg><time dateTime="2024-04-25">Apr 25, 2024</time></div><div class="flex items-center gap-1.5 bg-gray-50 px-2 py-1 rounded-md"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clock h-3.5 w-3.5 text-gray-400"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg><span>20<!-- --> min</span></div></div></div></div></a><a class="block group" href="/blogs/process-flow-studio-business-process-design"><div class="text-card-foreground shadow-sm relative overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1 h-full flex flex-col border border-gray-200/60 rounded-2xl bg-white"><div class="relative w-full h-52 bg-gray-100 overflow-hidden"><img alt="Process Flow Studio: Professional Business Process Design with ReactFlow" loading="lazy" decoding="async" data-nimg="fill" class="object-cover transition-transform duration-500 group-hover:scale-105" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="100vw" srcSet="/_next/image?url=%2Fimages%2Freactflow%2Fprocess-flow.png&amp;w=640&amp;q=75 640w, /_next/image?url=%2Fimages%2Freactflow%2Fprocess-flow.png&amp;w=750&amp;q=75 750w, /_next/image?url=%2Fimages%2Freactflow%2Fprocess-flow.png&amp;w=828&amp;q=75 828w, /_next/image?url=%2Fimages%2Freactflow%2Fprocess-flow.png&amp;w=1080&amp;q=75 1080w, /_next/image?url=%2Fimages%2Freactflow%2Fprocess-flow.png&amp;w=1200&amp;q=75 1200w, /_next/image?url=%2Fimages%2Freactflow%2Fprocess-flow.png&amp;w=1920&amp;q=75 1920w, /_next/image?url=%2Fimages%2Freactflow%2Fprocess-flow.png&amp;w=2048&amp;q=75 2048w, /_next/image?url=%2Fimages%2Freactflow%2Fprocess-flow.png&amp;w=3840&amp;q=75 3840w" src="/_next/image?url=%2Fimages%2Freactflow%2Fprocess-flow.png&amp;w=3840&amp;q=75"/></div><div class="p-6 flex-1 flex flex-col"><div class="flex flex-wrap gap-2 mb-4"><div class="inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors">Process Flow</div><div class="inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors">Business Process</div></div><h3 class="text-2xl font-bold mb-3 text-gray-900 group-hover:text-primary transition-colors leading-snug line-clamp-2">Process Flow Studio: Professional Business Process Design with ReactFlow</h3><p class="text-lg text-gray-600 mb-6 line-clamp-3 flex-1 leading-relaxed">Professional process flow design studio with advanced ReactFlow capabilities for creating sophisticated business process diagrams. Features comprehensive node library, advanced layout algorithms, collaboration tools, and export capabilities for business analysts and process engineers.</p><div class="flex items-center justify-between gap-4 text-xs font-medium text-gray-500 mt-auto pt-4 border-t border-gray-100"><div class="flex items-center gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar h-3.5 w-3.5 text-gray-400"><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path></svg><time dateTime="2024-04-15">Apr 15, 2024</time></div><div class="flex items-center gap-1.5 bg-gray-50 px-2 py-1 rounded-md"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clock h-3.5 w-3.5 text-gray-400"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg><span>18<!-- --> min</span></div></div></div></div></a><a class="block group" href="/blogs/reactflow-validation-flow-form-validation"><div class="text-card-foreground shadow-sm relative overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1 h-full flex flex-col border border-gray-200/60 rounded-2xl bg-white"><div class="relative w-full h-52 bg-gray-100 overflow-hidden"><img alt="ReactFlow Validation Flow: Building Complex Form Validation Workflows" loading="lazy" decoding="async" data-nimg="fill" class="object-cover transition-transform duration-500 group-hover:scale-105" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="100vw" srcSet="/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdcewthzm6%2Fimage%2Fupload%2Fv1771996558%2Fvalidation-flow_yujhuy.png&amp;w=640&amp;q=75 640w, /_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdcewthzm6%2Fimage%2Fupload%2Fv1771996558%2Fvalidation-flow_yujhuy.png&amp;w=750&amp;q=75 750w, /_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdcewthzm6%2Fimage%2Fupload%2Fv1771996558%2Fvalidation-flow_yujhuy.png&amp;w=828&amp;q=75 828w, /_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdcewthzm6%2Fimage%2Fupload%2Fv1771996558%2Fvalidation-flow_yujhuy.png&amp;w=1080&amp;q=75 1080w, /_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdcewthzm6%2Fimage%2Fupload%2Fv1771996558%2Fvalidation-flow_yujhuy.png&amp;w=1200&amp;q=75 1200w, /_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdcewthzm6%2Fimage%2Fupload%2Fv1771996558%2Fvalidation-flow_yujhuy.png&amp;w=1920&amp;q=75 1920w, /_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdcewthzm6%2Fimage%2Fupload%2Fv1771996558%2Fvalidation-flow_yujhuy.png&amp;w=2048&amp;q=75 2048w, /_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdcewthzm6%2Fimage%2Fupload%2Fv1771996558%2Fvalidation-flow_yujhuy.png&amp;w=3840&amp;q=75 3840w" src="/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdcewthzm6%2Fimage%2Fupload%2Fv1771996558%2Fvalidation-flow_yujhuy.png&amp;w=3840&amp;q=75"/></div><div class="p-6 flex-1 flex flex-col"><div class="flex flex-wrap gap-2 mb-4"><div class="inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors">Validation</div><div class="inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors">Form Validation</div></div><h3 class="text-2xl font-bold mb-3 text-gray-900 group-hover:text-primary transition-colors leading-snug line-clamp-2">ReactFlow Validation Flow: Building Complex Form Validation Workflows</h3><p class="text-lg text-gray-600 mb-6 line-clamp-3 flex-1 leading-relaxed">Create sophisticated form validation workflows with ReactFlow for c
1omplex data validation scenarios. Build interactive validation diagrams showing validation rules, error handling, and data flow. Features custom validation node types, rule configuration, error visualization, and real-time validation feedback.</p><div class="flex items-center justify-between gap-4 text-xs font-medium text-gray-500 mt-auto pt-4 border-t border-gray-100"><div class="flex items-center gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar h-3.5 w-3.5 text-gray-400"><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path></svg><time dateTime="2024-04-10">Apr 10, 2024</time></div><div class="flex items-center gap-1.5 bg-gray-50 px-2 py-1 rounded-md"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clock h-3.5 w-3.5 text-gray-400"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg><span>16<!-- --> min</span></div></div></div></div></a><a class="block group" href="/blogs/reactflow-pipeline-flow-data-visualization"><div class="text-card-foreground shadow-sm relative overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1 h-full flex flex-col border border-gray-200/60 rounded-2xl bg-white"><div class="relative w-full h-52 bg-gray-100 overflow-hidden"><img alt="ReactFlow Pipeline Flow: Visualizing Data Pipelines and ETL Processes" loading="lazy" decoding="async" data-nimg="fill" class="object-cover transition-transform duration-500 group-hover:scale-105" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="100vw" srcSet="/_next/image?url=%2Fimages%2Freactflow%2Fpipflow.png&amp;w=640&amp;q=75 640w, /_next/image?url=%2Fimages%2Freactflow%2Fpipflow.png&amp;w=750&amp;q=75 750w, /_next/image?url=%2Fimages%2Freactflow%2Fpipflow.png&amp;w=828&amp;q=75 828w, /_next/image?url=%2Fimages%2Freactflow%2Fpipflow.png&amp;w=1080&amp;q=75 1080w, /_next/image?url=%2Fimages%2Freactflow%2Fpipflow.png&amp;w=1200&amp;q=75 1200w, /_next/image?url=%2Fimages%2Freactflow%2Fpipflow.png&amp;w=1920&amp;q=75 1920w, /_next/image?url=%2Fimages%2Freactflow%2Fpipflow.png&amp;w=2048&amp;q=75 2048w, /_next/image?url=%2Fimages%2Freactflow%2Fpipflow.png&amp;w=3840&amp;q=75 3840w" src="/_next/image?url=%2Fimages%2Freactflow%2Fpipflow.png&amp;w=3840&amp;q=75"/></div><div class="p-6 flex-1 flex flex-col"><div class="flex flex-wrap gap-2 mb-4"><div class="inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors">Pipeline</div><div class="inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors">ETL</div></div><h3 class="text-2xl font-bold mb-3 text-gray-900 group-hover:text-primary transition-colors leading-snug line-clamp-2">ReactFlow Pipeline Flow: Visualizing Data Pipelines and ETL Processes</h3><p class="text-lg text-gray-600 mb-6 line-clamp-3 flex-1 leading-relaxed">Build sophisticated data pipeline visualizations with ReactFlow for ETL processes, CI/CD workflows, and data processing systems. Create interactive pipeline diagrams showing data flow, transformation stages, and processing steps with custom node types and validation rules.</p><div class="flex items-center justify-between gap-4 text-xs font-medium text-gray-500 mt-auto pt-4 border-t border-gray-100"><div class="flex items-center gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar h-3.5 w-3.5 text-gray-400"><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path></svg><time dateTime="2024-04-05">Apr 5, 2024</time></div><div class="flex items-center gap-1.5 bg-gray-50 px-2 py-1 rounded-md"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clock h-3.5 w-3.5 text-gray-400"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg><span>17<!-- --> min</span></div></div></div></div></a><a class="block group" href="/blogs/reactflow-node-intersections-edge-routing"><div class="text-card-foreground shadow-sm relative overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1 h-full flex flex-col border border-gray-200/60 rounded-2xl bg-white"><div class="relative w-full h-52 bg-gray-100 overflow-hidden"><img alt="React Flow Node Intersections: Advanced Edge Routing and Collision Detection" loading="lazy" decoding="async" data-nimg="fill" class="object-cover transition-transform duration-500 group-hover:scale-105" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="100vw" srcSet="/_next/image?url=%2Fimages%2Freactflow%2Fintersections.png&amp;w=640&amp;q=75 640w, /_next/image?url=%2Fimages%2Freactflow%2Fintersections.png&amp;w=750&amp;q=75 750w, /_next/image?url=%2Fimages%2Freactflow%2Fintersections.png&amp;w=828&amp;q=75 828w, /_next/image?url=%2Fimages%2Freactflow%2Fintersections.png&amp;w=1080&amp;q=75 1080w, /_next/image?url=%2Fimages%2Freactflow%2Fintersections.png&amp;w=1200&amp;q=75 1200w, /_next/image?url=%2Fimages%2Freactflow%2Fintersections.png&amp;w=1920&amp;q=75 1920w, /_next/image?url=%2Fimages%2Freactflow%2Fintersections.png&amp;w=2048&amp;q=75 2048w, /_next/image?url=%2Fimages%2Freactflow%2Fintersections.png&amp;w=3840&amp;q=75 3840w" src="/_next/image?url=%2Fimages%2Freactflow%2Fintersections.png&amp;w=3840&amp;q=75"/></div><div class="p-6 flex-1 flex flex-col"><div class="flex flex-wrap gap-2 mb-4"><div class="inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors">Edge Routing</div><div class="inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors">Collision Detection</div></div><h3 class="text-2xl font-bold mb-3 text-gray-900 group-hover:text-primary transition-colors leading-snug line-clamp-2">React Flow Node Intersections: Advanced Edge Routing and Collision Detection</h3><p class="text-lg text-gray-600 mb-6 line-clamp-3 flex-1 leading-relaxed">Learn advanced ReactFlow techniques for intelligent edge routing and node intersection detection. Create clean, readable diagrams with automatic edge routing that avoids node overlaps and minimizes visual clutter. Features collision detection and path optimization algorithms.</p><div class="flex items-center justify-between gap-4 text-xs font-medium text-gray-500 mt-auto pt-4 border-t border-gray-100"><div class="flex items-center gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar h-3.5 w-3.5 text-gray-400"><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path></svg><time dateTime="2024-04-01">Apr 1, 2024</time></div><div class="flex items-center gap-1.5 bg-gray-50 px-2 py-1 rounded-md"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clock h-3.5 w-3.5 text-gray-400"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg><span>15<!-- --> min</span></div></div></div></div></a><a class="block group" href="/blogs/reactflow-mindmap-interactive-knowledge-maps"><div class="text-card-foreground shadow-sm relative overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1 h-full flex flex-col border border-gray-200/60 rounded-2xl bg-white"><div class="relative w-full h-52 bg-gray-100 overflow-hidden"><img alt="React Flow Mindmap: Building Interactive Knowledge Maps with ReactFlow" loading="lazy" decoding="async" data-nimg="fill" class="object-cover transition-transform duration-500 group-hover:scale-105" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="100vw" srcSet="/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdcewthzm6%2Fimage%2Fupload%2Fv1771996554%2Freactflow-mindmap_cnbd85.png&amp;w=640&amp;q=75 640w, /_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdcewthzm6%2Fimage%2Fupload%2Fv1771996554%2Freactflow-mindmap_cnbd85.png&amp;w=750&amp;q=75 750w, /_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdcewthzm6%2Fimage%2Fupload%2Fv1771996554%2Freactflow-mindmap_cnbd85.png&amp;w=828&amp;q=75 828w, /_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdcewthzm6%2Fimage%2Fupload%2Fv1771996554%2Freactflow-mindmap_cnbd85.png&amp;w=1080&amp;q=75 1080w, /_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdcewthzm6%2Fimage%2Fupload%2Fv1771996554%2Freactflow-mindmap_cnbd85.png&amp;w=1200&amp;q=75 1200w, /_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdcewthzm6%2Fimage%2Fupload%2Fv1771996554%2Freactflow-mindmap_cnbd85.png&amp;w=1920&amp;q=75 1920w, /_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdcewthzm6%2Fimage%2Fupload%2Fv1771996554%2Freactflow-mindmap_cnbd85.png&amp;w=2048&amp;q=75 2048w, /_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdcewthzm6%2Fimage%2Fupload%2Fv1771996554%2Freactflow-mindmap_cnbd85.png&amp;w=3840&amp;q=75 3840w" src="/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdcewthzm6%2Fimage%2Fupload%2Fv1771996554%2Freactflow-mindmap_cnbd85.png&amp;w=3840&amp;q=75"/></div><div class="p-6 flex-1 flex flex-col"><div class="flex flex-wrap gap-2 mb-4"><div class="inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors">Mindmap</div><div class="inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors">Knowledge Management</div></div><h3 class="text-2xl font-bold mb-3 text-gray-900 group-hover:text-primary transition-colors leading-snug line-clamp-2">React Flow Mindmap: Building Interactive Knowledge Maps with ReactFlow</h3><p class="text-lg text-gray-600 mb-6 line-clamp-3 flex-1 leading-relaxed">Create beautiful, interactive mind maps using ReactFlow for brainstorming, note-taking, and knowledge organization. Build hierarchical knowledge structures with drag-and-drop nodes, rich text editing, and customizable styling. Perfect for project planning and collaborative brainstorming.</p><div class="flex items-center justify-between gap-4 text-xs font-medium text-gray-500 mt-auto pt-4 border-t border-gray-100"><div class="flex items-center gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar h-3.5 w-3.5 text-gray-400"><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path></svg><time dateTime="2024-03-28">Mar 28, 2024</time></div><div class="flex items-center gap-1.5 bg-gray-50 px-2 py-1 rounded-md"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clock h-3.5 w-3.5 text-gray-400"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg><span>14<!-- --> min</span></div></div></div></div></a><a class="block group" href="/blogs/react-flow-neural-network-visualization"><div class="text-card-foreground shadow-sm relative overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1 h-full flex flex-col border border-gray-200/60 rounded-2xl bg-white"><div class="relative w-full h-52 bg-gray-100 overflow-hidden"><img alt="React Flow Neural Network Visualization: Interactive Deep Learning Architecture Diagrams" loading="lazy" decoding="async" data-nimg="fill" class="object-cover transition-transform duration-500 group-hover:scale-105" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="100vw" srcSet="/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdcewthzm6%2Fimage%2Fupload%2Fv1771996555%2Fneural-network_nkri8r.png&amp;w=640&amp;q=75 640w, /_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdcewthzm6%2Fimage%2Fupload%2Fv1771996555%2Fneural-network_nkri8r.png&amp;w=750&amp;q=75 750w, /_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdcewthzm6%2Fimage%2Fupload%2Fv1771996555%2Fneural-network_nkri8r.png&amp;w=828&amp;q=75 828w, /_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdcewthzm6%2Fimage%2Fupload%2Fv1771996555%2Fneural-network_nkri8r.png&amp;w=1080&amp;q=75 1080w, /_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdcewthzm6%2Fimage%2Fupload%2Fv1771996555%2Fneural-network_nkri8r.png&amp;w=1200&amp;q=75 1200w, /_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdcewthzm6%2Fimage%2Fupload%2Fv1771996555%2Fneural-network_nkri8r.png&amp;w=1920&amp;q=75 1920w, /_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdcewthzm6%2Fimage%2Fupload%2Fv1771996555%2Fneural-network_nkri8r.png&amp;w=2048&amp;q=75 2048w, /_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdcewthzm6%2Fimage%2Fupload%2Fv1771996555%2Fneural-network_nkri8r.png&amp;w=3840&amp;q=75 3840w" src="/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdcewthzm6%2Fimage%2Fupload%2Fv1771996555%2Fneural-network_nkri8r.png&amp;w=3840&amp;q=75"/></div><div class="p-6 flex-1 flex flex-col"><div class="flex flex-wrap gap-2 mb-4"><div class="inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors">Neural Network</div><div class="inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors">Deep Learning</div></div><h3 class="text-2xl font-bold mb-3 text-gray-900 group-hover:text-primary transition-colors leading-snug line-clamp-2">React Flow Neural Network Visualization: Interactive Deep Learning Architecture Diagrams</h3><p class="text-lg text-gray-600 mb-6 line-clamp-3 flex-1 leading-relaxed">Create stunning, interactive visualizations of neural network architectures using ReactFlow. Visualize deep learning models, layer connections, and data flow through neural networks. Perfect for machine learning education, model documentation, and explaining complex AI architectures.</p><div class="flex items-center justify-between gap-4 text-xs font-medium text-gray-500 mt-auto pt-4 border-t border-gray-100"><div class="flex items-center gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBo
1x="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar h-3.5 w-3.5 text-gray-400"><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path></svg><time dateTime="2024-03-25">Mar 25, 2024</time></div><div class="flex items-center gap-1.5 bg-gray-50 px-2 py-1 rounded-md"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clock h-3.5 w-3.5 text-gray-400"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg><span>16<!-- --> min</span></div></div></div></div></a><a class="block group" href="/blogs/reactflow-examples-vs-visualflow-examples-ready-implementation"><div class="text-card-foreground shadow-sm relative overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1 h-full flex flex-col border border-gray-200/60 rounded-2xl bg-white"><div class="relative w-full h-52 bg-gray-100 overflow-hidden"><img alt="React flow examples vs Visualflow examples: which are best for ready to implementation." loading="lazy" decoding="async" data-nimg="fill" class="object-cover transition-transform duration-500 group-hover:scale-105" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="100vw" srcSet="/_next/image?url=%2Fimages%2Freactflow%2Fvisualflow.png&amp;w=640&amp;q=75 640w, /_next/image?url=%2Fimages%2Freactflow%2Fvisualflow.png&amp;w=750&amp;q=75 750w, /_next/image?url=%2Fimages%2Freactflow%2Fvisualflow.png&amp;w=828&amp;q=75 828w, /_next/image?url=%2Fimages%2Freactflow%2Fvisualflow.png&amp;w=1080&amp;q=75 1080w, /_next/image?url=%2Fimages%2Freactflow%2Fvisualflow.png&amp;w=1200&amp;q=75 1200w, /_next/image?url=%2Fimages%2Freactflow%2Fvisualflow.png&amp;w=1920&amp;q=75 1920w, /_next/image?url=%2Fimages%2Freactflow%2Fvisualflow.png&amp;w=2048&amp;q=75 2048w, /_next/image?url=%2Fimages%2Freactflow%2Fvisualflow.png&amp;w=3840&amp;q=75 3840w" src="/_next/image?url=%2Fimages%2Freactflow%2Fvisualflow.png&amp;w=3840&amp;q=75"/></div><div class="p-6 flex-1 flex flex-col"><div class="flex flex-wrap gap-2 mb-4"><div class="inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors">ReactFlow</div><div class="inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors">VisualFlow</div></div><h3 class="text-2xl font-bold mb-3 text-gray-900 group-hover:text-primary transition-colors leading-snug line-clamp-2">React flow examples vs Visualflow examples: which are best for ready to implementation.</h3><p class="text-lg text-gray-600 mb-6 line-clamp-3 flex-1 leading-relaxed">Compare VisualFlow production-ready React Flow examples with building from scratch. Discover how VisualFlow saves 8-12 weeks of development time and $24,000+ in costs while delivering enterprise-grade, production-ready implementations immediately.</p><div class="flex items-center justify-between gap-4 text-xs font-medium text-gray-500 mt-auto pt-4 border-t border-gray-100"><div class="flex items-center gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar h-3.5 w-3.5 text-gray-400"><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path></svg><time dateTime="2024-03-20">Mar 20, 2024</time></div><div class="flex items-center gap-1.5 bg-gray-50 px-2 py-1 rounded-md"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clock h-3.5 w-3.5 text-gray-400"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg><span>18<!-- --> min</span></div></div></div></div></a><a class="block group" href="/blogs/spiral-layout-graph-visualization"><div class="text-card-foreground shadow-sm relative overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1 h-full flex flex-col border border-gray-200/60 rounded-2xl bg-white"><div class="relative w-full h-52 bg-gray-100 overflow-hidden"><img alt="React flow Spiral Layout: Creating Elegant Circular Graph Visualizations" loading="lazy" decoding="async" data-nimg="fill" class="object-cover transition-transform duration-500 group-hover:scale-105" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="100vw" srcSet="/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdcewthzm6%2Fimage%2Fupload%2Fv1771996556%2Fspiral-layout_vxejzk.png&amp;w=640&amp;q=75 640w, /_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdcewthzm6%2Fimage%2Fupload%2Fv1771996556%2Fspiral-layout_vxejzk.png&amp;w=750&amp;q=75 750w, /_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdcewthzm6%2Fimage%2Fupload%2Fv1771996556%2Fspiral-layout_vxejzk.png&amp;w=828&amp;q=75 828w, /_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdcewthzm6%2Fimage%2Fupload%2Fv1771996556%2Fspiral-layout_vxejzk.png&amp;w=1080&amp;q=75 1080w, /_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdcewthzm6%2Fimage%2Fupload%2Fv1771996556%2Fspiral-layout_vxejzk.png&amp;w=1200&amp;q=75 1200w, /_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdcewthzm6%2Fimage%2Fupload%2Fv1771996556%2Fspiral-layout_vxejzk.png&amp;w=1920&amp;q=75 1920w, /_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdcewthzm6%2Fimage%2Fupload%2Fv1771996556%2Fspiral-layout_vxejzk.png&amp;w=2048&amp;q=75 2048w, /_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdcewthzm6%2Fimage%2Fupload%2Fv1771996556%2Fspiral-layout_vxejzk.png&amp;w=3840&amp;q=75 3840w" src="/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdcewthzm6%2Fimage%2Fupload%2Fv1771996556%2Fspiral-layout_vxejzk.png&amp;w=3840&amp;q=75"/></div><div class="p-6 flex-1 flex flex-col"><div class="flex flex-wrap gap-2 mb-4"><div class="inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors">Spiral Layout</div><div class="inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors">Graph Visualization</div></div><h3 class="text-2xl font-bold mb-3 text-gray-900 group-hover:text-primary transition-colors leading-snug line-clamp-2">React flow Spiral Layout: Creating Elegant Circular Graph Visualizations</h3><p class="text-lg text-gray-600 mb-6 line-clamp-3 flex-1 leading-relaxed">Create stunning spiral-based graph layouts for visualizing hierarchical and circular data. Automatically arrange nodes in elegant spiral patterns with customizable controls. Perfect for organizational charts, family trees, and artistic visualizations.</p><div class="flex items-center justify-between gap-4 text-xs font-medium text-gray-500 mt-auto pt-4 border-t border-gray-100"><div class="flex items-center gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar h-3.5 w-3.5 text-gray-400"><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path></svg><time dateTime="2024-03-15">Mar 15, 2024</time></div><div class="flex items-center gap-1.5 bg-gray-50 px-2 py-1 rounded-md"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clock h-3.5 w-3.5 text-gray-400"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg><span>15<!-- --> min</span></div></div></div></div></a><a class="block group" href="/blogs/concept-map-knowledge-visualization"><div class="text-card-foreground shadow-sm relative overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1 h-full flex flex-col border border-gray-200/60 rounded-2xl bg-white"><div class="relative w-full h-52 bg-gray-100 overflow-hidden"><img alt="React flow Concept Map: Interactive Knowledge Visualization with ReactFlow" loading="lazy" decoding="async" data-nimg="fill" class="object-cover transition-transform duration-500 group-hover:scale-105" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="100vw" srcSet="/_next/image?url=%2Fimages%2Freactflow%2Fconcept-mind.png&amp;w=640&amp;q=75 640w, /_next/image?url=%2Fimages%2Freactflow%2Fconcept-mind.png&amp;w=750&amp;q=75 750w, /_next/image?url=%2Fimages%2Freactflow%2Fconcept-mind.png&amp;w=828&amp;q=75 828w, /_next/image?url=%2Fimages%2Freactflow%2Fconcept-mind.png&amp;w=1080&amp;q=75 1080w, /_next/image?url=%2Fimages%2Freactflow%2Fconcept-mind.png&amp;w=1200&amp;q=75 1200w, /_next/image?url=%2Fimages%2Freactflow%2Fconcept-mind.png&amp;w=1920&amp;q=75 1920w, /_next/image?url=%2Fimages%2Freactflow%2Fconcept-mind.png&amp;w=2048&amp;q=75 2048w, /_next/image?url=%2Fimages%2Freactflow%2Fconcept-mind.png&amp;w=3840&amp;q=75 3840w" src="/_next/image?url=%2Fimages%2Freactflow%2Fconcept-mind.png&amp;w=3840&amp;q=75"/></div><div class="p-6 flex-1 flex flex-col"><div class="flex flex-wrap gap-2 mb-4"><div class="inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors">Concept Map</div><div class="inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors">Knowledge Visualization</div></div><h3 class="text-2xl font-bold mb-3 text-gray-900 group-hover:text-primary transition-colors leading-snug line-clamp-2">React flow Concept Map: Interactive Knowledge Visualization with ReactFlow</h3><p class="text-lg text-gray-600 mb-6 line-clamp-3 flex-1 leading-relaxed">Create interactive concept maps for organizing knowledge and visualizing relationships between ideas. Build hierarchical knowledge structures with drag-and-drop nodes, rich text editing, and custom connections. Perfect for education, research, and knowledge management.</p><div class="flex items-center justify-between gap-4 text-xs font-medium text-gray-500 mt-auto pt-4 border-t border-gray-100"><div class="flex items-center gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar h-3.5 w-3.5 text-gray-400"><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path></svg><time dateTime="2024-03-10">Mar 10, 2024</time></div><div class="flex items-center gap-1.5 bg-gray-50 px-2 py-1 rounded-md"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clock h-3.5 w-3.5 text-gray-400"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg><span>14<!-- --> min</span></div></div></div></div></a><a class="block group" href="/blogs/multi-color-graph-visualization"><div class="text-card-foreground shadow-sm relative overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1 h-full flex flex-col border border-gray-200/60 rounded-2xl bg-white"><div class="relative w-full h-52 bg-gray-100 overflow-hidden"><img alt="React flow Multi-Color Graph Visualization: Creating Vibrant Network Diagrams" loading="lazy" decoding="async" data-nimg="fill" class="object-cover transition-transform duration-500 group-hover:scale-105" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="100vw" srcSet="/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdcewthzm6%2Fimage%2Fupload%2Fv1771996556%2Fmulti-color_f65zhg.png&amp;w=640&amp;q=75 640w, /_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdcewthzm6%2Fimage%2Fupload%2Fv1771996556%2Fmulti-color_f65zhg.png&amp;w=750&amp;q=75 750w, /_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdcewthzm6%2Fimage%2Fupload%2Fv1771996556%2Fmulti-color_f65zhg.png&amp;w=828&amp;q=75 828w, /_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdcewthzm6%2Fimage%2Fupload%2Fv1771996556%2Fmulti-color_f65zhg.png&amp;w=1080&amp;q=75 1080w, /_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdcewthzm6%2Fimage%2Fupload%2Fv1771996556%2Fmulti-color_f65zhg.png&amp;w=1200&amp;q=75 1200w, /_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdcewthzm6%2Fimage%2Fupload%2Fv1771996556%2Fmulti-color_f65zhg.png&amp;w=1920&amp;q=75 1920w, /_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdcewthzm6%2Fimage%2Fupload%2Fv1771996556%2Fmulti-color_f65zhg.png&amp;w=2048&amp;q=75 2048w, /_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdcewthzm6%2Fimage%2Fupload%2Fv1771996556%2Fmulti-color_f65zhg.png&amp;w=3840&amp;q=75 3840w" src="/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdcewthzm6%2Fimage%2Fupload%2Fv1771996556%2Fmulti-color_f65zhg.png&amp;w=3840&amp;q=75"/></div><div class="p-6 flex-1 flex flex-col"><div class="flex flex-wrap gap-2 mb-4"><div class="inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors">Multi-Color</div><div class="inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors">Graph Visualization</div></div><h3 class="text-2xl font-bold mb-3 text-gray-900 group-hover:text-primary transition-colors leading-snug line-clamp-2">React flow Multi-Color Graph Visualization: Creating Vibrant Network Diagrams</h3><p class="text-lg text-gray-600 mb-6 line-clamp-3 flex-1 leading-relaxed">Create vibrant, visually distinct network diagrams with advanced color management. Color-code nodes by categories, status, or data attributes. Features custom themes, gradient edges, and interactive color pickers for professional, eye-catching visualizations.</p><div class="flex items-center justify-between gap-4 text-xs font-medium text-gray-500 mt-auto pt-4 border-t border-gray-100"><div class="flex items-center gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar h-3.5 w-3.5 text-gray-400"><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path></svg><time dateTime="2024-03-05">Mar 5, 2024</time></div><div class="flex items-center gap-1.5 bg-gray-50 px-2 py-1 rounded-md"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" strok
1e-linejoin="round" class="lucide lucide-clock h-3.5 w-3.5 text-gray-400"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg><span>16<!-- --> min</span></div></div></div></div></a><a class="block group" href="/blogs/force-directed-layout-graph-visualization"><div class="text-card-foreground shadow-sm relative overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1 h-full flex flex-col border border-gray-200/60 rounded-2xl bg-white"><div class="relative w-full h-52 bg-gray-100 overflow-hidden"><img alt="React flow Force-Directed Layout: Advanced Graph Visualization with ReactFlow" loading="lazy" decoding="async" data-nimg="fill" class="object-cover transition-transform duration-500 group-hover:scale-105" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="100vw" srcSet="/_next/image?url=%2Fimages%2Freactflow%2Fforce-layout.png&amp;w=640&amp;q=75 640w, /_next/image?url=%2Fimages%2Freactflow%2Fforce-layout.png&amp;w=750&amp;q=75 750w, /_next/image?url=%2Fimages%2Freactflow%2Fforce-layout.png&amp;w=828&amp;q=75 828w, /_next/image?url=%2Fimages%2Freactflow%2Fforce-layout.png&amp;w=1080&amp;q=75 1080w, /_next/image?url=%2Fimages%2Freactflow%2Fforce-layout.png&amp;w=1200&amp;q=75 1200w, /_next/image?url=%2Fimages%2Freactflow%2Fforce-layout.png&amp;w=1920&amp;q=75 1920w, /_next/image?url=%2Fimages%2Freactflow%2Fforce-layout.png&amp;w=2048&amp;q=75 2048w, /_next/image?url=%2Fimages%2Freactflow%2Fforce-layout.png&amp;w=3840&amp;q=75 3840w" src="/_next/image?url=%2Fimages%2Freactflow%2Fforce-layout.png&amp;w=3840&amp;q=75"/></div><div class="p-6 flex-1 flex flex-col"><div class="flex flex-wrap gap-2 mb-4"><div class="inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors">Force-Directed Layout</div><div class="inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors">Graph Visualization</div></div><h3 class="text-2xl font-bold mb-3 text-gray-900 group-hover:text-primary transition-colors leading-snug line-clamp-2">React flow Force-Directed Layout: Advanced Graph Visualization with ReactFlow</h3><p class="text-lg text-gray-600 mb-6 line-clamp-3 flex-1 leading-relaxed">Create beautiful, interactive network diagrams with physics-based force-directed layout algorithms. Automatically arrange nodes using simulation that minimizes edge crossings and reveals natural clusters. Perfect for social networks, organizational charts, and complex relationship visualizations.</p><div class="flex items-center justify-between gap-4 text-xs font-medium text-gray-500 mt-auto pt-4 border-t border-gray-100"><div class="flex items-center gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar h-3.5 w-3.5 text-gray-400"><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path></svg><time dateTime="2024-03-01">Mar 1, 2024</time></div><div class="flex items-center gap-1.5 bg-gray-50 px-2 py-1 rounded-md"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clock h-3.5 w-3.5 text-gray-400"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg><span>18<!-- --> min</span></div></div></div></div></a><a class="block group" href="/blogs/production-process-editor-industrial-workflows"><div class="text-card-foreground shadow-sm relative overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1 h-full flex flex-col border border-gray-200/60 rounded-2xl bg-white"><div class="relative w-full h-52 bg-gray-100 overflow-hidden"><img alt="Production Process Editor: Designing Industrial Workflows with React flow" loading="lazy" decoding="async" data-nimg="fill" class="object-cover transition-transform duration-500 group-hover:scale-105" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="100vw" srcSet="/_next/image?url=%2Fimages%2Freactflow%2Fproduction.png&amp;w=640&amp;q=75 640w, /_next/image?url=%2Fimages%2Freactflow%2Fproduction.png&amp;w=750&amp;q=75 750w, /_next/image?url=%2Fimages%2Freactflow%2Fproduction.png&amp;w=828&amp;q=75 828w, /_next/image?url=%2Fimages%2Freactflow%2Fproduction.png&amp;w=1080&amp;q=75 1080w, /_next/image?url=%2Fimages%2Freactflow%2Fproduction.png&amp;w=1200&amp;q=75 1200w, /_next/image?url=%2Fimages%2Freactflow%2Fproduction.png&amp;w=1920&amp;q=75 1920w, /_next/image?url=%2Fimages%2Freactflow%2Fproduction.png&amp;w=2048&amp;q=75 2048w, /_next/image?url=%2Fimages%2Freactflow%2Fproduction.png&amp;w=3840&amp;q=75 3840w" src="/_next/image?url=%2Fimages%2Freactflow%2Fproduction.png&amp;w=3840&amp;q=75"/></div><div class="p-6 flex-1 flex flex-col"><div class="flex flex-wrap gap-2 mb-4"><div class="inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors">Production Process</div><div class="inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors">Manufacturing</div></div><h3 class="text-2xl font-bold mb-3 text-gray-900 group-hover:text-primary transition-colors leading-snug line-clamp-2">Production Process Editor: Designing Industrial Workflows with React flow</h3><p class="text-lg text-gray-600 mb-6 line-clamp-3 flex-1 leading-relaxed">Create professional production process diagrams with drag-and-drop interface. Design manufacturing workflows with palette-based nodes, port connections, and property inspectors for industrial process visualization.</p><div class="flex items-center justify-between gap-4 text-xs font-medium text-gray-500 mt-auto pt-4 border-t border-gray-100"><div class="flex items-center gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar h-3.5 w-3.5 text-gray-400"><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path></svg><time dateTime="2024-02-25">Feb 25, 2024</time></div><div class="flex items-center gap-1.5 bg-gray-50 px-2 py-1 rounded-md"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clock h-3.5 w-3.5 text-gray-400"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg><span>16<!-- --> min</span></div></div></div></div></a><a class="block group" href="/blogs/reactflow-performance-optimization"><div class="text-card-foreground shadow-sm relative overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1 h-full flex flex-col border border-gray-200/60 rounded-2xl bg-white"><div class="relative w-full h-52 bg-gray-100 overflow-hidden"><img alt="React Flow Performance Optimization Techniques" loading="lazy" decoding="async" data-nimg="fill" class="object-cover transition-transform duration-500 group-hover:scale-105" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="100vw" srcSet="/_next/image?url=%2Fimages%2Freactflow%2Fe-render.png&amp;w=640&amp;q=75 640w, /_next/image?url=%2Fimages%2Freactflow%2Fe-render.png&amp;w=750&amp;q=75 750w, /_next/image?url=%2Fimages%2Freactflow%2Fe-render.png&amp;w=828&amp;q=75 828w, /_next/image?url=%2Fimages%2Freactflow%2Fe-render.png&amp;w=1080&amp;q=75 1080w, /_next/image?url=%2Fimages%2Freactflow%2Fe-render.png&amp;w=1200&amp;q=75 1200w, /_next/image?url=%2Fimages%2Freactflow%2Fe-render.png&amp;w=1920&amp;q=75 1920w, /_next/image?url=%2Fimages%2Freactflow%2Fe-render.png&amp;w=2048&amp;q=75 2048w, /_next/image?url=%2Fimages%2Freactflow%2Fe-render.png&amp;w=3840&amp;q=75 3840w" src="/_next/image?url=%2Fimages%2Freactflow%2Fe-render.png&amp;w=3840&amp;q=75"/></div><div class="p-6 flex-1 flex flex-col"><div class="flex flex-wrap gap-2 mb-4"><div class="inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors">ReactFlow</div><div class="inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors">Performance</div></div><h3 class="text-2xl font-bold mb-3 text-gray-900 group-hover:text-primary transition-colors leading-snug line-clamp-2">React Flow Performance Optimization Techniques</h3><p class="text-lg text-gray-600 mb-6 line-clamp-3 flex-1 leading-relaxed">Learn advanced techniques to optimize React Flow performance. Handle large diagrams with thousands of nodes efficie
1ntly.</p><div class="flex items-center justify-between gap-4 text-xs font-medium text-gray-500 mt-auto pt-4 border-t border-gray-100"><div class="flex items-center gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar h-3.5 w-3.5 text-gray-400"><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path></svg><time dateTime="2024-02-20">Feb 20, 2024</time></div><div class="flex items-center gap-1.5 bg-gray-50 px-2 py-1 rounded-md"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clock h-3.5 w-3.5 text-gray-400"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg><span>13<!-- --> min</span></div></div></div></div></a><a class="block group" href="/blogs/building-ai-agents-visual-flow-builders"><div class="text-card-foreground shadow-sm relative overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1 h-full flex flex-col border border-gray-200/60 rounded-2xl bg-white"><div class="relative w-full h-52 bg-gray-100 overflow-hidden"><img alt="React flow Building AI Agents with Visual Flow Builders" loading="lazy" decoding="async" data-nimg="fill" class="object-cover transition-transform duration-500 group-hover:scale-105" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="100vw" srcSet="/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdcewthzm6%2Fimage%2Fupload%2Fv1771996553%2Flangflow_drzwzq.png&amp;w=640&amp;q=75 640w, /_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdcewthzm6%2Fimage%2Fupload%2Fv1771996553%2Flangflow_drzwzq.png&amp;w=750&amp;q=75 750w, /_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdcewthzm6%2Fimage%2Fupload%2Fv1771996553%2Flangflow_drzwzq.png&amp;w=828&amp;q=75 828w, /_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdcewthzm6%2Fimage%2Fupload%2Fv1771996553%2Flangflow_drzwzq.png&amp;w=1080&amp;q=75 1080w, /_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdcewthzm6%2Fimage%2Fupload%2Fv1771996553%2Flangflow_drzwzq.png&amp;w=1200&amp;q=75 1200w, /_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdcewthzm6%2Fimage%2Fupload%2Fv1771996553%2Flangflow_drzwzq.png&amp;w=1920&amp;q=75 1920w, /_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdcewthzm6%2Fimage%2Fupload%2Fv1771996553%2Flangflow_drzwzq.png&amp;w=2048&amp;q=75 2048w, /_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdcewthzm6%2Fimage%2Fupload%2Fv1771996553%2Flangflow_drzwzq.png&amp;w=3840&amp;q=75 3840w" src="/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdcewthzm6%2Fimage%2Fupload%2Fv1771996553%2Flangflow_drzwzq.png&amp;w=3840&amp;q=75"/></div><div class="p-6 flex-1 flex flex-col"><div class="flex flex-wrap gap-2 mb-4"><div class="inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors">AI Agent</div><div class="inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors">LLM</div></div><h3 class="text-2xl font-bold mb-3 text-gray-900 group-hover:text-primary transition-colors leading-snug line-clamp-2">React flow Building AI Agents with Visual Flow Builders</h3><p class="text-lg text-gray-600 mb-6 line-clamp-3 flex-1 leading-relaxed">Create sophisticated AI agents and LLM-powered applications using visual flow builders. Design AI workflows without extensive coding.</p><div class="flex items-center justify-between gap-4 text-xs font-medium text-gray-500 mt-auto pt-4 border-t border-gray-100"><div class="flex items-center gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar h-3.5 w-3.5 text-gray-400"><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path></svg><time dateTime="2024-02-15">Feb 15, 2024</time></div><div class="flex items-center gap-1.5 bg-gray-50 px-2 py-1 rounded-md"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clock h-3.5 w-3.5 text-gray-400"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg><span>20<!-- --> min</span></div></div></div></div></a>
1<a class="block group" href="/blogs/n8n-builder-advanced-workflow-automation"><div class="text-card-foreground shadow-sm relative overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1 h-full flex flex-col border border-gray-200/60 rounded-2xl bg-white"><div class="relative w-full h-52 bg-gray-100 overflow-hidden"><img alt="React flow n8n Builder: Advanced Workflow Automation" loading="lazy" decoding="async" data-nimg="fill" class="object-cover transition-transform duration-500 group-hover:scale-105" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="100vw" srcSet="/_next/image?url=%2Fimages%2Freactflow%2Fautomation-flow.jpg&amp;w=640&amp;q=75 640w, /_next/image?url=%2Fimages%2Freactflow%2Fautomation-flow.jpg&amp;w=750&amp;q=75 750w, /_next/image?url=%2Fimages%2Freactflow%2Fautomation-flow.jpg&amp;w=828&amp;q=75 828w, /_next/image?url=%2Fimages%2Freactflow%2Fautomation-flow.jpg&amp;w=1080&amp;q=75 1080w, /_next/image?url=%2Fimages%2Freactflow%2Fautomation-flow.jpg&amp;w=1200&amp;q=75 1200w, /_next/image?url=%2Fimages%2Freactflow%2Fautomation-flow.jpg&amp;w=1920&amp;q=75 1920w, /_next/image?url=%2Fimages%2Freactflow%2Fautomation-flow.jpg&amp;w=2048&amp;q=75 2048w, /_next/image?url=%2Fimages%2Freactflow%2Fautomation-flow.jpg&amp;w=3840&amp;q=75 3840w" src="/_next/image?url=%2Fimages%2Freactflow%2Fautomation-flow.jpg&amp;w=3840&amp;q=75"/></div><div class="p-6 flex-1 flex flex-col"><div class="flex flex-wrap gap-2 mb-4"><div class="inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors">n8n</div><div class="inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors">Automation</div></div><h3 class="text-2xl font-bold mb-3 text-gray-900 group-hover:text-primary transition-colors leading-snug line-clamp-2">React flow n8n Builder: Advanced Workflow Automation</h3><p class="text-lg text-gray-600 mb-6 line-clamp-3 flex-1 leading-relaxed">Learn how to build complex automation workflows with n8n builder. Create sophisticated integrations and data pipelines.</p><div class="flex items-center justify-between gap-4 text-xs font-medium text-gray-500 mt-auto pt-4 border-t border-gray-100"><div class="flex items-center gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar h-3.5 w-3.5 text-gray-400"><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path></svg><time dateTime="2024-02-10">Feb 10, 2024</time></div><div class="flex items-center gap-1.5 bg-gray-50 px-2 py-1 rounded-md"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clock h-3.5 w-3.5 text-gray-400"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg><span>17<!-- --> min</span></div></div></div></div></a><a class="block group" href="/blogs/zapier-integration-visual-automation"><div class="text-card-foreground shadow-sm relative overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1 h-full flex flex-col border border-gray-200/60 rounded-2xl bg-white"><div class="relative w-full h-52 bg-gray-100 overflow-hidden"><img alt="React flow Zapier Integration: Building Visual Automation Workflows" loading="lazy" decoding="async" data-nimg="fill" class="object-cover transition-transform duration-500 group-hover:scale-105" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="100vw" srcSet="/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdcewthzm6%2Fimage%2Fupload%2Fv1771996562%2FzapierFlow_ul6dwo.png&amp;w=640&amp;q=75 640w, /_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdcewthzm6%2Fimage%2Fupload%2Fv1771996562%2FzapierFlow_ul6dwo.png&amp;w=750&amp;q=75 750w, /_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdcewthzm6%2Fimage%2Fupload%2Fv1771996562%2FzapierFlow_ul6dwo.png&amp;w=828&amp;q=75 828w, /_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdcewthzm6%2Fimage%2Fupload%2Fv1771996562%2FzapierFlow_ul6dwo.png&amp;w=1080&amp;q=75 1080w, /_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdcewthzm6%2Fimage%2Fupload%2Fv1771996562%2FzapierFlow_ul6dwo.png&amp;w=1200&amp;q=75 1200w, /_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdcewthzm6%2Fimage%2Fupload%2Fv1771996562%2FzapierFlow_ul6dwo.png&amp;w=1920&amp;q=75 1920w, /_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdcewthzm6%2Fimage%2Fupload%2Fv1771996562%2FzapierFlow_ul6dwo.png&amp;w=2048&amp;q=75 2048w, /_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdcewthzm6%2Fimage%2Fupload%2Fv1771996562%2FzapierFlow_ul6dwo.png&amp;w=3840&amp;q=75 3840w" src="/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdcewthzm6%2Fimage%2Fupload%2Fv1771996562%2FzapierFlow_ul6dwo.png&amp;w=3840&amp;q=75"/></div><div class="p-6 flex-1 flex flex-col"><div class="flex flex-wrap gap-2 mb-4"><div class="inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors">Zapier</div><div class="inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors">Automation</div></div><h3 class="text-2xl font-bold mb-3 text-gray-900 group-hover:text-primary transition-colors leading-snug line-clamp-2">React flow Zapier Integration: Building Visual Automation Workflows</h3><p class="text-lg text-gray-600 mb-6 line-clamp-3 flex-1 leading-relaxed">
1Automate workflows with native Zapier integration. Design sophisticated workflows with branches, filters, and error handling.</p><div class="flex items-center justify-between gap-4 text-xs font-medium text-gray-500 mt-auto pt-4 border-t border-gray-100"><div class="flex items-center gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar h-3.5 w-3.5 text-gray-400"><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path></svg><time dateTime="2024-02-05">Feb 5, 2024</time></div><div class="flex items-center gap-1.5 bg-gray-50 px-2 py-1 rounded-md"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clock h-3.5 w-3.5 text-gray-400"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg><span>16<!-- --> min</span></div></div></div></div></a><a class="block group" href="/blogs/creating-chatbots-landbot-builder"><div class="text-card-foreground shadow-sm relative overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1 h-full flex flex-col border border-gray-200/60 rounded-2xl bg-white"><div class="relative w-full h-52 bg-gray-100 overflow-hidden"><img alt="React flow Creating Chatbots with Landbot Builder" loading="lazy" decoding="async" data-nimg="fill" class="object-cover transition-transform duration-500 group-hover:scale-105" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="100vw" srcSet="/_next/image?url=%2Fimages%2Freactflow%2Flandbot.png&amp;w=640&amp;q=75 640w, /_next/image?url=%2Fimages%2Freactflow%2Flandbot.png&amp;w=750&amp;q=75 750w, /_next/image?url=%2Fimages%2Freactflow%2Flandbot.png&amp;w=828&amp;q=75 828w, /_next/image?url=%2Fimages%2Freactflow%2Flandbot.png&amp;w=1080&amp;q=75 1080w, /_next/image?url=%2Fimages%2Freactflow%2Flandbot.png&amp;w=1200&amp;q=75 1200w, /_next/image?url=%2Fimages%2Freactflow%2Flandbot.png&amp;w=1920&amp;q=75 1920w, /_next/image?url=%2Fimages%2Freactflow%2Flandbot.png&amp;w=2048&amp;q=75 2048w, /_next/image?url=%2Fimages%2Freactflow%2Flandbot.png&amp;w=3840&amp;q=75 3840w" src="/_next/image?url=%2Fimages%2Freactflow%2Flandbot.png&amp;w=3840&amp;q=75"/></div><div class="p-6 flex-1 flex flex-col"><div class="flex flex-wrap gap-2 mb-4"><div class="inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors">Landbot</div><div class="inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors">Chatbots</div></div><h3 class="text-2xl font-bold mb-3 text-gray-900 group-hover:text-primary transition-colors leading-snug line-clamp-2">React flow Creating Chatbots with Landbot Builder</h3><p class="text-lg text-gray-600 mb-6 line-clamp-3 flex-1 leading-relaxed">Build sophisticated chatbot conversation flows using visual interface. Design chatbot interactions through intuitive drag-and-drop.</p><div class="flex items-center justify-between gap-4 text-xs font-medium text-gray-500 mt-auto pt-4 border-t border-gray-100"><div class="flex items-center gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar h-3.5 w-3.5 text-gray-400"><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path></svg><time dateTime="2024-02-01">Feb 1, 2024</time></div><div class="flex items-center gap-1.5 bg-gray-50 px-2 py-1 rounded-md"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clock h-3.5 w-3.5 text-gray-400"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg><span>14<!-- --> min</span></div></div></div></div></a><a class="block group" href="/blogs/jointjs-vs-gojs-vs-reactflow-comparison"><div class="text-card-foreground shadow-sm relative overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1 h-full flex flex-col border border-gray-200/60 rounded-2xl bg-white"><div class="relative w-full h-52 bg-gray-100 overflow-hidden"><img alt="JointJS vs GoJS vs ReactFlow: A Comprehensive Comparison" loading="lazy" decoding="async" data-nimg="fill" class="object-cover transition-transform duration-500 group-hover:scale-105" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="100vw" srcSet="/_next/image?url=%2Fimages%2Freactflow%2FflowAspects.png&amp;w=640&amp;q=75 640w, /_next/image?url=%2Fimages%2Freactflow%2FflowAspects.png&amp;w=750&amp;q=75 750w, /_next/image?url=%2Fimages%2Freactflow%2FflowAspects.png&amp;w=828&amp;q=75 828w, /_next/image?url=%2Fimages%2Freactflow%2FflowAspects.png&amp;w=1080&amp;q=75 1080w, /_next/image?url=%2Fimages%2Freactflow%2FflowAspects.png&amp;w=1200&amp;q=75 1200w, /_next/image?url=%2Fimages%2Freactflow%2FflowAspects.png&amp;w=1920&amp;q=75 1920w, /_next/image?url=%2Fimages%2Freactflow%2FflowAspects.png&amp;w=2048&amp;q=75 2048w, /_next/image?url=%2Fimages%2Freactflow%2FflowAspects.png&amp;w=3840&amp;q=75 3840w" src="/_next/image?url=%2Fimages%2Freactflow%2FflowAspects.png&amp;w=3840&amp;q=75"/></div><div class="p-6 flex-1 flex flex-col"><div class="flex flex-wrap gap-2 mb-4"><div class="inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors">JointJS</div><div class="inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors">GoJS</div></div><h3 class="text-2xl font-bold mb-3 text-gray-900 group-hover:text-primary transition-colors leading-snug line-clamp-2">JointJS vs GoJS vs ReactFlow: A Comprehensive Comparison</h3><p class="text-lg text-gray-600 mb-6 line-clamp-3 flex-1 leading-relaxed">Compare the top diagramming libraries: JointJS, GoJS, and ReactFlow. Understand their strengths, weaknesses, and use cases.</p><div class="flex items-center justify-between gap-4 text-xs font-medium text-gray-500 mt-auto pt-4 border-t border-gray-100"><div class="flex items-center gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar h-3.5 w-3.5 text-gray-400"><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path></svg><time dateTime="2024-01-25">Jan 25, 2024</time></div><div class="flex items-center gap-1.5 bg-gray-50 px-2 py-1 rounded-md"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clock h-3.5 w-3.5 text-gray-400"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg><span>18<!-- --> min</span></div></div></div></div></a><a class="block group" href="/blogs/building-automation-workflows-klaviyo"><div class="text-card-foreground shadow-sm relative overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1 h-full flex flex-col border border-gray-200/60 rounded-2xl bg-white"><div class="relative w-full h-52 bg-gray-100 overflow-hidden"><img alt="React flow: Building Automation Workflows with Klaviyo Flow" loading="lazy" decoding="async" data-nimg="fill" class="object-cover transition-transform duration-500 group-hover:scale-105" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="100vw" srcSet="/_next/image?url=%2Fimages%2Freactflow%2Fklaviyo.png&amp;w=640&amp;q=75 640w, /_next/image?url=%2Fimages%2Freactflow%2Fklaviyo.png&amp;w=750&amp;q=75 750w, /_next/image?url=%2Fimages%2Freactflow%2Fklaviyo.png&amp;w=828&amp;q=75 828w, /_next/image?url=%2Fimages%2Freactflow%2Fklaviyo.png&amp;w=1080&amp;q=75 1080w, /_next/image?url=%2Fimages%2Freactflow%2Fklaviyo.png&amp;w=1200&amp;q=75 1200w, /_next/image?url=%2Fimages%2Freactflow%2Fklaviyo.png&amp;w=1920&amp;q=75 1920w, /_next/image?url=%2Fimages%2Freactflow%2Fklaviyo.png&amp;w=2048&amp;q=75 2048w, /_next/image?url=%2Fimages%2Freactflow%2Fklaviyo.png&amp;w=3840&amp;q=75 3840w" src="/_next/image?url=%2Fimages%2Freactflow%2Fklaviyo.png&amp;w=3840&amp;q=75"/></div><div class="p-6 flex-1 flex flex-col"><div class="flex flex-wrap gap-2 mb-4"><div class="inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors">Klaviyo</div><div class="inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors">Marketing Automation</div></div><h3 class="text-2xl font-bold mb-3 text-gray-900 group-hover:text-primary transition-colors leading-snug line-clamp-2">React flow: Building Automation Workflows with Klaviyo Flow</h3><p class="text-lg text-gray-600 mb-6 line-clamp-3 flex-1 leading-relaxed">React flow create sophisticated marketing automation flows with Klaviyo integration. Design complete customer journeys from welcome series to abandoned cart recovery.</p><div class="flex items-center justify-between gap-4 text-xs font-medium text-gray-500 mt-auto pt-4 border-t border-gray-100"><div class="flex items-center gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar h-3.5 w-3.5 text-gray-400"><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path></svg><time dateTime="2024-01-20">Jan 20, 2024</time></div><div class="flex items-center gap-1.5 bg-gray-50 px-2 py-1 rounded-md"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clock h-3.5 w-3.5 text-gray-400"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg><span>15<!-- --> min</span></div></div></div></div></a><a class="block group" href="/blogs/getting-started-with-react-flow"><div class="text-card-foreground shadow-sm relative overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1 h-full flex flex-col border border-gray-200/60 rounded-2xl bg-white"><div class="relative w-full h-52 bg-gray-100 overflow-hidden"><img alt="Getting Started with React Flow: A Complete Guide" loading="lazy" decoding="async" data-nimg="fill" class="object-cover transition-transform duration-500 group-hover:scale-105" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="100vw" srcSet="/_next/image?url=%2Fimages%2Freactflow%2Fproject5.png&amp;w=640&amp;q=75 640w, /_next/image?url=%2Fimages%2Freactflow%2Fproject5.png&amp;w=750&amp;q=75 750w, /_next/image?url=%2Fimages%2Freactflow%2Fproject5.png&amp;w=828&amp;q=75 828w, /_next/image?url=%2Fimages%2Freactflow%2Fproject5.png&amp;w=1080&amp;q=75 1080w, /_next/image?url=%2Fimages%2Freactflow%2Fproject5.png&amp;w=1200&amp;q=75 1200w, /_next/image?url=%2Fimages%2Freactflow%2Fproject5.png&amp;w=1920&amp;q=75 1920w, /_next/image?url=%2Fimages%2Freactflow%2Fproject5.png&amp;w=2048&amp;q=75 2048w, /_next/image?url=%2Fimages%2Freactflow%2Fproject5.png&amp;w=3840&amp;q=75 3840w" src="/_next/image?url=%2Fimages%2Freactflow%2Fproject5.png&amp;w=3840&amp;q=75"/></div><div class="p-6 flex-1 flex flex-col"><div class="flex flex-wrap gap-2 mb-4"><div class="inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors">ReactFlow</div><div class="inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors">
1React</div></div><h3 class="text-2xl font-bold mb-3 text-gray-900 group-hover:text-primary transition-colors leading-snug line-clamp-2">Getting Started with React Flow: A Complete Guide</h3><p class="text-lg text-gray-600 mb-6 line-clamp-3 flex-1 leading-relaxed">Learn all essential concepts about React Flow. You&#x27;re new to the topic? This React Flow tutorial will get you started!</p><div class="flex items-center justify-between gap-4 text-xs font-medium text-gray-500 mt-auto pt-4 border-t border-gray-100"><div class="flex items-center gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar h-3.5 w-3.5 text-gray-400"><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path></svg><time dateTime="2024-01-15">Jan 15, 2024</time></div><div class="flex items-center gap-1.5 bg-gray-50 px-2 py-1 rounded-md"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clock h-3.5 w-3.5 text-gray-400"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg><span>12<!-- --> min</span></div></div></div></div></a></div></section><section class="mt-24 pt-12 border-t border-gray-200"><h2 class="text-2xl font-bold mb-6 text-center text-gray-900 font-display">Explore by Topic</h2><div class="flex flex-wrap justify-center gap-3 max-w-4xl mx-auto"><a rel="nofollow" class="group" href="/blogs?tag=3D%20Editor"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>3D Editor</div></a><a rel="nofollow" class="group" href="/blogs?tag=3D%20Visualization"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>3D Visualization</div></a><a rel="nofollow" class="group" href="/blogs?tag=AI%20Agent"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>AI Agent</div></a><a rel="nofollow" class="group" href="/blogs?tag=AI%20Agents"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>AI Agents</div></a><a rel="nofollow" class="group" href="/blogs?tag=AI%20Visualization"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>AI Visualization</div></a><a rel="nofollow" class="group" href="/blogs?tag=AI%20Workflows"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>AI Workflows</div></a><a rel="nofollow" class="group" href="/blogs?tag=Algorithms"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>Algorithms</div></a><a rel="nofollow" class="group" href="/blogs?tag=Animated%20Edges"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>Animated Edges</div></a><a rel="nofollow" class="group" href="/blogs?tag=Architecture"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>Architecture</div></a><a rel="nofollow" class="group" href="/blogs?tag=Automation"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>Automation</div></a><a rel="nofollow" class="group" href="/blogs?tag=BPMN"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>BPMN</div></a>
1<a rel="nofollow" class="group" href="/blogs?tag=Background%20Editor"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>Background Editor</div></a><a rel="nofollow" class="group" href="/blogs?tag=Brainstorming"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>Brainstorming</div></a><a rel="nofollow" class="group" href="/blogs?tag=Business%20Process"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>Business Process</div></a><a rel="nofollow" class="group" href="/blogs?tag=CI%2FCD"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>CI/CD</div></a><a rel="nofollow" class="group" href="/blogs?tag=CSS%20Animations"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>CSS Animations</div></a><a rel="nofollow" class="group" href="/blogs?tag=Canvas"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>Canvas</div></a><a rel="nofollow" class="group" href="/blogs?tag=Charts"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>Charts</div></a><a rel="nofollow" class="group" href="/blogs?tag=Chatbots"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>Chatbots</div></a><a rel="nofollow" class="group" href="/blogs?tag=Circular%20Graphs"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>Circular Graphs</div></a><a rel="nofollow" class="group" href="/blogs?tag=Circular%20Layout"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>Circular Layout</div></a><a rel="nofollow" class="group" href="/blogs?tag=Clone"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>Clone</div></a><a rel="nofollow" class="group" href="/blogs?tag=Collaboration"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>Collaboration</div></a><a rel="nofollow" class="group" href="/blogs?tag=Collision%20Detection"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>Collision Detection</div></a><a rel="nofollow" class="group" href="/blogs?tag=Color%20Coding"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>Color Coding</div></a><a rel="nofollow" class="group" href="/blogs?tag=Comparison"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>Comparison</div></a><a rel="nofollow" class="group" href="/blogs?tag=Concept%20Map"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>Concept Map</div></a><a rel="nofollow" class="group" href="/blogs?tag=Conversational%20AI"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>Conversational AI</div></a>
1<a rel="nofollow" class="group" href="/blogs?tag=Cost%20Savings"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>Cost Savings</div></a><a rel="nofollow" class="group" href="/blogs?tag=Creative%20UI"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>Creative UI</div></a><a rel="nofollow" class="group" href="/blogs?tag=Custom%20Nodes"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>Custom Nodes</div></a><a rel="nofollow" class="group" href="/blogs?tag=D3"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>D3</div></a><a rel="nofollow" class="group" href="/blogs?tag=Data%20Processing"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>Data Processing</div></a><a rel="nofollow" class="group" href="/blogs?tag=Data%20Validation"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>Data Validation</div></a><a rel="nofollow" class="group" href="/blogs?tag=Data%20Visualization"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>Data Visualization</div></a><a rel="nofollow" class="group" href="/blogs?tag=Deep%20Learning"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>Deep Learning</div></a><a rel="nofollow" class="group" href="/blogs?tag=Design%20Tools"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>Design Tools</div></a><a rel="nofollow" class="group" href="/blogs?tag=DevOps"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>DevOps</div></a><a rel="nofollow" class="group" href="/blogs?tag=Diagram%20Optimization"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>Diagram Optimization</div></a><a rel="nofollow" class="group" href="/blogs?tag=Diagramming"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>Diagramming</div></a><a rel="nofollow" class="group" href="/blogs?tag=Diagrams"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>Diagrams</div></a><a rel="nofollow" class="group" href="/blogs?tag=Drag%20and%20Drop"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>Drag and Drop</div></a><a rel="nofollow" class="group" href="/blogs?tag=E-commerce"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>E-commerce</div></a>
1<a rel="nofollow" class="group" href="/blogs?tag=ETL"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>ETL</div></a><a rel="nofollow" class="group" href="/blogs?tag=Edge%20Routing"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>Edge Routing</div></a><a rel="nofollow" class="group" href="/blogs?tag=Education"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>Education</div></a><a rel="nofollow" class="group" href="/blogs?tag=Enterprise"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>Enterprise</div></a><a rel="nofollow" class="group" href="/blogs?tag=Error%20Handling"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>Error Handling</div></a><a rel="nofollow" class="group" href="/blogs?tag=Excalidraw"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>Excalidraw</div></a><a rel="nofollow" class="group" href="/blogs?tag=Flow%20Design"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>Flow Design</div></a><a rel="nofollow" class="group" href="/blogs?tag=Flow%20Diagrams"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>Flow Diagrams</div></a><a rel="nofollow" class="group" href="/blogs?tag=Flowchart"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>Flowchart</div></a><a rel="nofollow" class="group" href="/blogs?tag=Force-Directed%20Layout"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>Force-Directed Layout</div></a><a rel="nofollow" class="group" href="/blogs?tag=Form%20Validation"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>Form Validation</div></a><a rel="nofollow" class="group" href="/blogs?tag=Game%20Board"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>Game Board</div></a><a rel="nofollow" class="group" href="/blogs?tag=GoJS"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>GoJS</div></a><a rel="nofollow" class="group" href="/blogs?tag=Gradients"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>Gradients</div></a><a rel="nofollow" class="group" href="/blogs?tag=Graph%20Layout"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>Graph Layout</div></a><a rel="nofollow" class="group" href="/blogs?tag=Graph%20Visualization"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>Graph Visualization</div></a><a rel="nofollow" class="group" href="/blogs?tag=Hexagonal%20Grid"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>Hexagonal Grid</div></a><a rel="nofollow" class="group" href="/blogs?tag=Hierarchy"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>Hierarchy</div></a><a rel="nofollow" class="group" href="/blogs?tag=Implementation"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>Implementation</div></a><a rel="nofollow" class="group" href="/blogs?tag=Industrial%20Design"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>Industrial Design</div></a><a rel="nofollow" class="group" href="/blogs?tag=Integration"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>Integration</div></a><a rel="nofollow" class="group" href="/blogs?tag=Interactive"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>Interactive</div></a><a rel="nofollow" class="group" href="/blogs?tag=Interactive%20UI"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>Interactive UI</div></a><a rel="nofollow" class="group" href="/blogs?tag=Interactive%20Workspace"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>
1Interactive Workspace</div></a><a rel="nofollow" class="group" href="/blogs?tag=JointJS"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>JointJS</div></a><a rel="nofollow" class="group" href="/blogs?tag=Klaviyo"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>Klaviyo</div></a><a rel="nofollow" class="group" href="/blogs?tag=Knowledge%20Management"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>Knowledge Management</div></a><a rel="nofollow" class="group" href="/blogs?tag=Knowledge%20Visualization"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>Knowledge Visualization</div></a><a rel="nofollow" class="group" href="/blogs?tag=LLM"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>LLM</div></a><a rel="nofollow" class="group" href="/blogs?tag=Landbot"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>Landbot</div></a><a rel="nofollow" class="group" href="/blogs?tag=Langflow"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>Langflow</div></a><a rel="nofollow" class="group" href="/blogs?tag=Layout"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>Layout</div></a><a rel="nofollow" class="group" href="/blogs?tag=Lead%20Generation"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>Lead Generation</div></a><a rel="nofollow" class="group" href="/blogs?tag=Learning%20Tools"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>Learning Tools</div></a><a rel="nofollow" class="group" href="/blogs?tag=Machine%20Learning"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>Machine Learning</div></a><a rel="nofollow" class="group" href="/blogs?tag=Manufacturing"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>Manufacturing</div></a><a rel="nofollow" class="group" href="/blogs?tag=Marketing%20Automation"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>Marketing Automation</div></a><a rel="nofollow" class="group" href="/blogs?tag=Mindmap"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>Mindmap</div></a><a rel="nofollow" class="group" href="/blogs?tag=Multi-Color"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>Multi-Color</div></a><a rel="nofollow" class="group" href="/blogs?tag=Network%20Diagrams"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>Network Diagrams</div></a><a rel="nofollow" class="group" href="/blogs?tag=Neural%20Network"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>Neural Network</div></a><a rel="nofollow" class="group" href="/blogs?tag=Node%20Editing"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>Node Editing</div></a><a rel="nofollow" class="group" href="/blogs?tag=Node%20Positioning"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>Node Positioning</div></a><a rel="nofollow" class="group" href="/blogs?tag=Optimization"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>Optimization</div></a><a rel="nofollow" class="group" href="/blogs?tag=Orchestration"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>Orchestration</div></a><a rel="nofollow" class="group" href="/blogs?tag=Org%20Chart"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>Org Chart</div></a><a rel="nofollow" class="group" href="/blogs?tag=Organization"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>Organization</div></a><a rel="nofollow" class="group" href="/blogs?tag=Performance"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>Performance</div></a><a rel="nofollow" class="group" href="/blogs?tag=Physics"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>Physics</div></a><a rel="nofollow" class="group" href="/blogs?tag=Physics%20Simulation"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>Physics Simulation</div></a><a rel="nofollow" class="group" href="/blogs?tag=Pipeline"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>Pipeline</div></a><a rel="nofollow" class="group" href="/blogs?tag=Process%20Design"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>Process Design</div></a><a rel="nofollow" class="group" href="/blogs?tag=Process%20Flow"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>Process Flow</div></a><a rel="nofollow" class="group" href="/blogs?tag=Process%20Visualization"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>Process Visualization</div></a><a rel="nofollow" class="group" href="/blogs?tag=Production%20Process"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>Production Process</div></a><a rel="nofollow" class="group" href="/blogs?tag=Production%20Ready"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>Production Ready</div></a><a rel="nofollow" class="group" href="/blogs?tag=Radial%20Layout"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>Radial Layout</div></a><a rel="nofollow" class="group" href="/blogs?tag=React"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>React</div></a>
1<a rel="nofollow" class="group" href="/blogs?tag=React%20Flow"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>React Flow</div></a><a rel="nofollow" class="group" href="/blogs?tag=React%20flow"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>React flow</div></a><a rel="nofollow" class="group" href="/blogs?tag=ReactFlow"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>ReactFlow</div></a><a rel="nofollow" class="group" href="/blogs?tag=SVG%20Shapes"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>SVG Shapes</div></a><a rel="nofollow" class="group" href="/blogs?tag=SaaS"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>SaaS</div></a><a rel="nofollow" class="group" href="/blogs?tag=Sankey"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>Sankey</div></a><a rel="nofollow" class="group" href="/blogs?tag=Sketch"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>Sketch</div></a><a rel="nofollow" class="group" href="/blogs?tag=Spiral%20Layout"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>Spiral Layout</div></a><a rel="nofollow" class="group" href="/blogs?tag=Three.js"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>Three.js</div></a><a rel="nofollow" class="group" href="/blogs?tag=Tree%20Layout"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>Tree Layout</div></a><a rel="nofollow" class="group" href="/blogs?tag=Tutorial"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>Tutorial</div></a><a rel="nofollow" class="group" href="/blogs?tag=UI%20Design"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>UI Design</div></a><a rel="nofollow" class="group" href="/blogs?tag=UML"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>UML</div></a><a rel="nofollow" class="group" href="/blogs?tag=Validation"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>Validation</div></a><a rel="nofollow" class="group" href="/blogs?tag=Virtualization"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>Virtualization</div></a><a rel="nofollow" class="group" href="/blogs?tag=Visual%20Builder"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>Visual Builder</div></a><a rel="nofollow" class="group" href="/blogs?tag=Visual%20Design"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>Visual Design</div></a><a rel="nofollow" class="group" href="/blogs?tag=Visual%20Programming"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>Visual Programming</div></a><a rel="nofollow" class="group" href="/blogs?tag=VisualFlow"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>VisualFlow</div></a><a rel="nofollow" class="group" href="/blogs?tag=Visualization"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>Visualization</div></a><a rel="nofollow" class="group" href="/blogs?tag=Whiteboard"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>Whiteboard</div></a><a rel="nofollow" class="group" href="/blogs?tag=Workflow"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>Workflow</div></a><a rel="nofollow" class="group" href="/blogs?tag=Workflow%20Automation"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>Workflow Automation</div></a><a rel="nofollow" class="group" href="/blogs?tag=Workflow%20Builder"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>Workflow Builder</div></a><a rel="nofollow" class="group" href="/blogs?tag=Workflows"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>Workflows</div></a><a rel="nofollow" class="group" href="/blogs?tag=Zapier"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>Zapier</div></a><a rel="nofollow" class="group" href="/blogs?tag=n8n"><div class="px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors"></span>n8n</div></a></div></section></div></div></div></div></div><section class="flex w-full items-center justify-center mb-0"><div class="relative flex w-full max-w-screen-2xl flex-col gap-32 px-4 py-8 md:px-16 xl:px-44"><div class="absolute left-0 top-0 -z-10 h-full w-full"><div class="dot-acc absolute right-4 top-0 h-8 w-8 rotate-45 animate-pulse rounded-full bg-gradient-to-r from-pink-400 to-red-700 blur-sm duration-500 md:right-16 md:h-16 md:w-16 xl:top-0"></div><div class="dot-acc absolute bottom-2/3 left-4 h-8 w-8 rotate-45 animate-pulse rounded-full bg-gradient-to-r from-green-300 to-green-600 blur-sm duration-500 md:left-16 md:h-16 md:w-16 xl:top-32"></div></div><div class="content-quote flex w-full flex-col"><div class="tems-center flex w-full flex-col justify-between xl:flex-row"><p class="w-full text-center text-3xl font-bold xl:max-w-[589px] xl:text-start">We have prepared everything, it is time for you to tell the problem</p><div class="mt-8 flex w-full items-center justify-center gap-2 xl:mt-0 xl:w-1/2"><div><button class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-secondary text-secondary-foreground hover:bg-secondary/80 h-10 px-4 py-2">Ask Us</button></div><dialog class="fixed z-50 rounded-lg shadow-lg border bg-white p-0 backdrop:bg-black/50 backdrop:backdrop-blur-sm w-full max-w-[90vw] sm:max-w-[600px] md:max-w-[900px]"><div class="p-6"><div class="flex justify-between items-center mb-4"><div><h2 class="text-2xl font-bold">Contact us about VisualFlow</h2><p class="text-gray-600 mt-1">Have questions about VisualFlow? Send us a message and we&#x27;ll get back to you.</p></div><button class="text-gray-500 hover:text-gray-700 transition-colors"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x h-6 
1w-6"><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg><span class="sr-only">Close</span></button></div><div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-6"><div class="md:col-span-2"><form class="flex flex-col gap-4"><div class="space-y-2"><label class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" for=":Rmlduija:-form-item">Name</label><input class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50" placeholder="Enter your name" id=":Rmlduija:-form-item" aria-describedby=":Rmlduija:-form-item-description" aria-invalid="false" name="from_name" value=""/></div><div class="space-y-2"><label class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" for=":R16lduija:-form-item">Email</label><input class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm r
1ing-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50" placeholder="Enter your email" id=":R16lduija:-form-item" aria-describedby=":R16lduija:-form-item-description" aria-invalid="false" name="from_email" value=""/></div><div class="space-y-2"><label class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" for=":R1mlduija:-form-item">Subject</label><input class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50" placeholder="Enter subject" id=":R1mlduija:-form-item" aria-describedby=":R1mlduija:-form-item-description" aria-invalid="false" name="subject" value="Question about VisualFlow"/></div><div class="space-y-2"><label class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" for=":R26lduija:-form-item">Message</label><textarea class="flex w-full rounded-md border border-input bg-background px-3 py-2 text-sm r
1ing-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 min-h-[120px]" name="message" placeholder="Enter your message" id=":R26lduija:-form-item" aria-describedby=":R26lduija:-form-item-description" aria-invalid="false">I have a question about the VisualFlow.</textarea></div><div class="grid grid-cols-3 gap-2"><div class="space-y-2"><label class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" for=":R6mlduija:-form-item">WhatsApp (Optional)</label><select name="whatsapp_country" class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2" id=":R6mlduija:-form-item" aria-describedby=":R6mlduija:-form-item-description" aria-invalid="false"><option value="+880" selected="">🇧🇩 +880</option><option value="+1">🇺🇸 +1</option><option value="+44">🇬🇧 +44</option><option value="+91">🇮🇳 +91</option><option value="+86">🇨🇳 +86</option><option value="+81">🇯🇵 +81</option><option value="+82">🇰🇷 +82</option><option value="+49">🇩🇪 +49</option><option value="+33">🇫🇷 +33</option><option value="+61">🇦🇺 +61</option></select></div><div class="space-y-2 col-span-2"><label class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 opacity-0" for=":Ramlduija:-form-item">Number</label><input class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm r
1ing-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50" placeholder="1234567890" id=":Ramlduija:-form-item" aria-describedby=":Ramlduija:-form-item-description" aria-invalid="false" name="whatsapp_number" value=""/></div></div><div class="flex justify-end gap-3 mt-2"><button class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2" type="button">Cancel</button><button class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary hover:bg-primary/90 h-10 px-4 py-2 bg-gradient-to-r from-pink-500 to-violet-600 text-white" type="submit"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-mail mr-2 h-4 w-4"><rect width="20" height="16" x="2" y="4" rx="2"></rect><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"></path></svg>Send Message</button></div></form></div><div class="border-t md:border-t-0 md:border-l pt-4 md:pt-0 md:pl-6"><h3 class="font-medium text-gray-900 mb-3">Other ways to connect</h3><ul class="space-y-3"><li><a target="_blank" rel="nofollow noopener noreferrer" class="flex items-center gap-x-2 text-gray-600 hover:text-gray-900 transition-colors" href="https://github.com/Azim-Ahmed"><img alt="github" loading="lazy" width="24" height="24" decoding="async" data-nimg="1" class="rounded-full" style="color:transparent" srcSet="/_next/image?url=%2Fgithub.png&amp;w=32&amp;q=75 1x, /_next/image?url=%2Fgithub.png&amp;w=48&amp;q=75 2x" src="/_next/image?url=%2Fgithub.png&amp;w=48&amp;q=75"/><span class="text-sm">Github:Azim-Ahmed</span></a></li><li><a target="_blank" rel="nofollow noopener noreferrer" class="flex items-center gap-x-2 text-gray-600 hover:text-gray-900 transition-colors" href="mailto:[email protected]"><img alt="gmail" loading="lazy" width="24" height="24" decoding="async" data-nimg="1" class="rounded-full" style="color:transparent" srcSet="/_next/image?url=%2Fgmail.png&amp;w=32&amp;q=75 1x, /_next/image?url=%2Fgmail.png&amp;w=48&amp;q=75 2x" src="/_next/image?url=%2Fgmail.png&amp;w=48&amp;q=75"/><span class="text-sm">Gmail: [email protected]</span></a></li><li><a target="_blank" rel="nofollow noopener noreferrer" class="flex items-center gap-x-2 text-gray-600 hover:text-gray-900 transition-colors" href="https://www.linkedin.com/in/azimuahmed"><img alt="linkedin" loading="lazy" width="24" height="24" decoding="async" data-nimg="1" class="rounded-full" style="color:transparent" srcSet="/_next/image?url=%2Flinkedin.png&amp;w=32&amp;q=75 1x, /_next/image?url=%2Flinkedin.png&amp;w=48&amp;q=75 2x" src="/_next/image?url=%2Flinkedin.png&amp;w=48&amp;q=75"/><span class="text-sm">Linkedin: Azim Uddin Ahamed</span></a></li><li><a target="_blank" rel="nofollow noopener noreferrer" class="flex items-center gap-x-2 text-gray-600 hover:text-gray-900 transition-colors" href="https://www.facebook.com/visualflow.dev"><img alt="facebook" loading="lazy" width="24" height="24" decoding="async" data-nimg="1" class="rounded-full" style="color:transparent" srcSet="/_next/image?url=%2Ffacebook.png&amp;w=32&amp;q=75 1x, /_next/image?url=%2Ffacebook.png&amp;w=48&amp;q=75 2x" src="/_next/image?url=%2Ffacebook.png&amp;w=48&amp;q=75"/><span class="text-sm">Facebook: VisualFlow</span></a></li></ul></div></div></div></dialog></div></div></div><div class="grid h-full w-full grid-cols-2 gap-6 text-gray-900/50 md:grid-cols-3 xl:grid-cols-4 xl:gap-3"><div class="content-footer brand-footer col-span-2 flex w-full flex-col items-start justify-start md:col-span-3 xl:col-span-1"><div class="flex gap-2">VisualFlow</div><p class="mt-4 font-semibold">Copyright © 2026 Design By Azim Ahmed</p></div><div class="content-footer service-footer w-full"><div class="header-footer"><p class="text-xl uppercase text-gray-900">service</p></div><div class="body-footer mt-4 flex flex-col items-start justify-center gap-2"><p class="capitalize duration-500 hover:text-gray-900">Web Development</p><p class="capitalize duration-500 hover:text-gray-900">App Development</p><p class="capitalize duration-500 hover:text-gray-900">UI Design</p></div></div><div class="content-footer company-footer w-full"><div class="header-footer"><p class="text-xl uppercase text-gray-900">company</p></div><div class="body-footer mt-4 flex flex-col items-start justify-center gap-2"><p class="capitalize duration-500 hover:text-gray-900">about</p><a class="capitalize duration-500 hover:text-gray-900" href="/contact-us">contact</a></div></div><div class="content-footer resource-footer w-full"><div class="header-footer"><p class="text-xl uppercase text-gray-900">resource</p></div><div class="body-footer mt-4 flex flex-col items-start justify-center gap-2"><div><p class=" cursor-pointer capitalize duration-500 hover:text-gray-900">Support</p></div><dialog class="fixed z-50 rounded-lg shadow-lg border bg-white p-0 backdrop:bg-black/50 backdrop:backdrop-blur-sm w-full max-w-[90vw] sm:max-w-[600px] md:max-w-[900px]"><div class="p-6"><div class="flex justify-between items-center mb-4"><div><h2 class="text-2xl font-bold">Contact us about VisualFlow</h2><p class="text-gray-600 mt-1">Have questions about VisualFlow? Send us a message and we&#x27;ll get back to you.</p></div><button class="text-gray-500 hover:text-gray-700 transition-colors"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x h-6 
1w-6"><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg><span class="sr-only">Close</span></button></div><div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-6"><div class="md:col-span-2"><form class="flex flex-col gap-4"><div class="space-y-2"><label class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" for=":Rmj9tuija:-form-item">Name</label><input class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50" placeholder="Enter your name" id=":Rmj9tuija:-form-item" aria-describedby=":Rmj9tuija:-form-item-description" aria-invalid="false" name="from_name" value=""/></div><div class="space-y-2"><label class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" for=":R16j9tuija:-form-item">Email</label><input class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm r
1ing-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50" placeholder="Enter your email" id=":R16j9tuija:-form-item" aria-describedby=":R16j9tuija:-form-item-description" aria-invalid="false" name="from_email" value=""/></div><div class="space-y-2"><label class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" for=":R1mj9tuija:-form-item">Subject</label><input class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50" placeholder="Enter subject" id=":R1mj9tuija:-form-item" aria-describedby=":R1mj9tuija:-form-item-description" aria-invalid="false" name="subject" value="Question about VisualFlow"/></div><div class="space-y-2"><label class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" for=":R26j9tuija:-form-item">Message</label><textarea class="flex w-full rounded-md border border-input bg-background px-3 py-2 text-sm r
1ing-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 min-h-[120px]" name="message" placeholder="Enter your message" id=":R26j9tuija:-form-item" aria-describedby=":R26j9tuija:-form-item-description" aria-invalid="false">I have a question about the VisualFlow.</textarea></div><div class="grid grid-cols-3 gap-2"><div class="space-y-2"><label class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" for=":R6mj9tuija:-form-item">WhatsApp (Optional)</label><select name="whatsapp_country" class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2" id=":R6mj9tuija:-form-item" aria-describedby=":R6mj9tuija:-form-item-description" aria-invalid="false"><option value="+880" selected="">🇧🇩 +880</option><option value="+1">🇺🇸 +1</option><option value="+44">🇬🇧 +44</option><option value="+91">🇮🇳 +91</option><option value="+86">🇨🇳 +86</option><option value="+81">🇯🇵 +81</option><option value="+82">🇰🇷 +82</option><option value="+49">🇩🇪 +49</option><option value="+33">🇫🇷 +33</option><option value="+61">🇦🇺 +61</option></select></div><div class="space-y-2 col-span-2"><label class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 opacity-0" for=":Ramj9tuija:-form-item">Number</label><input class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm r
1ing-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50" placeholder="1234567890" id=":Ramj9tuija:-form-item" aria-describedby=":Ramj9tuija:-form-item-description" aria-invalid="false" name="whatsapp_number" value=""/></div></div><div class="flex justify-end gap-3 mt-2"><button class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2" type="button">Cancel</button><button class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary hover:bg-primary/90 h-10 px-4 py-2 bg-gradient-to-r from-pink-500 to-violet-600 text-white" type="submit"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-mail mr-2 h-4 w-4"><rect width="20" height="16" x="2" y="4" rx="2"></rect><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"></path></svg>Send Message</button></div></form></div><div class="border-t md:border-t-0 md:border-l pt-4 md:pt-0 md:pl-6"><h3 class="font-medium text-gray-900 mb-3">Other ways to connect</h3><ul class="space-y-3"><li><a target="_blank" rel="nofollow noopener noreferrer" class="flex items-center gap-x-2 text-gray-600 hover:text-gray-900 transition-colors" href="https://github.com/Azim-Ahmed"><img alt="github" loading="lazy" width="24" height="24" decoding="async" data-nimg="1" class="rounded-full" style="color:transparent" srcSet="/_next/image?url=%2Fgithub.png&amp;w=32&amp;q=75 1x, /_next/image?url=%2Fgithub.png&amp;w=48&amp;q=75 2x" src="/_next/image?url=%2Fgithub.png&amp;w=48&amp;q=75"/><span class="text-sm">Github:Azim-Ahmed</span></a></li><li><a target="_blank" rel="nofollow noopener noreferrer" class="flex items-center gap-x-2 text-gray-600 hover:text-gray-900 transition-colors" href="mailto:[email protected]"><img alt="gmail" loading="lazy" width="24" height="24" decoding="async" data-nimg="1" class="rounded-full" style="color:transparent" srcSet="/_next/image?url=%2Fgmail.png&amp;w=32&amp;q=75 1x, /_next/image?url=%2Fgmail.png&amp;w=48&amp;q=75 2x" src="/_next/image?url=%2Fgmail.png&amp;w=48&amp;q=75"/><span class="text-sm">Gmail: [email protected]</span></a></li><li><a target="_blank" rel="nofollow noopener noreferrer" class="flex items-center gap-x-2 text-gray-600 hover:text-gray-900 transition-colors" href="https://www.linkedin.com/in/azimuahmed"><img alt="linkedin" loading="lazy" width="24" height="24" decoding="async" data-nimg="1" class="rounded-full" style="color:transparent" srcSet="/_next/image?url=%2Flinkedin.png&amp;w=32&amp;q=75 1x, /_next/image?url=%2Flinkedin.png&amp;w=48&amp;q=75 2x" src="/_next/image?url=%2Flinkedin.png&amp;w=48&amp;q=75"/><span class="text-sm">Linkedin: Azim Uddin Ahamed</span></a></li><li><a target="_blank" rel="nofollow noopener noreferrer" class="flex items-center gap-x-2 text-gray-600 hover:text-gray-900 transition-colors" href="https://www.facebook.com/visualflow.dev"><img alt="facebook" loading="lazy" width="24" height="24" decoding="async" data-nimg="1" class="rounded-full" style="color:transparent" srcSet="/_next/image?url=%2Ffacebook.png&amp;w=32&amp;q=75 1x, /_next/image?url=%2Ffacebook.png&amp;w=48&amp;q=75 2x" src="/_next/image?url=%2Ffacebook.png&amp;w=48&amp;q=75"/><span class="text-sm">Facebook: VisualFlow</span></a></li></ul></div></div></div></dialog><p class=" capitalize duration-500 hover:text-gray-900">License</p></div></div></div></div></section>
1<script src="/_next/static/chunks/webpack-e849f994443a1e14.js" async=""></script>
1<script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script>
1<script>self.__next_f.push([1,"1:HL[\"/_next/static/media/0b78ff376f6b9734-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n2:HL[\"/_next/static/media/723e11e5093b8e80.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n3:HL[\"/_next/static/css/dbaf71b24aad1ee6.css\",\"style\"]\n4:HL[\"/_next/static/css/e02981f9ffcaff9b.css\",\"style\"]\n"])</script>
1<script>self.__next_f.push([1,"5:I[95751,[],\"\"]\n8:I[231,[\"231\",\"static/chunks/231-7c76446a5b0e00a7.js\",\"8173\",\"static/chunks/8173-4fa5c93cd5d77460.js\",\"5027\",\"static/chunks/app/(dashboard)/blogs/page-84ecb1d03270c813.js\"],\"\"]\n9:I[38173,[\"231\",\"static/chunks/231-7c76446a5b0e00a7.js\",\"8173\",\"static/chunks/8173-4fa5c93cd5d77460.js\",\"5027\",\"static/chunks/app/(dashboard)/blogs/page-84ecb1d03270c813.js\"],\"Image\"]\na:I[39275,[],\"\"]\nb:I[61343,[],\"\"]\nc:I[26754,[\"231\",\"static/chunks/231-7c76446a5b0e00a7.js\",\"2950\",\"static/chunks/2950-adbfc4d8db75df0a.js\",\"7776\",\"static/chunks/7776-11ea05523b6287c1.js\",\"8173\",\"static/chunks/8173-4fa5c93cd5d77460.js\",\"448\",\"static/chunks/448-aa34c37ebb021ea2.js\",\"3073\",\"static/chunks/3073-571e1c4211f8eedc.js\",\"9743\",\"static/chunks/9743-e6dc238de80ea9c7.js\",\"6349\",\"static/chunks/6349-77e70ed69c60ca6b.js\",\"9851\",\"static/chunks/9851-a767f4208c2c8fde.js\",\"5642\",\"static/chunks/app/(dashboard)/layout-608a0ed1cc1ad304.js\"],\"TopElements\"]\nd:I[8195,[\"231\",\"static/chunks/231-7c76446a5b0e00a7.js\",\"2950\",\"static/chunks/2950-adbfc4d8db75df0a.js\",\"7776\",\"static/chunks/7776-11ea05523b6287c1.js\",\"8173\",\"static/chunks/8173-4fa5c93cd5d77460.js\",\"448\",\"static/chunks/448-aa34c37ebb021ea2.js\",\"3073\",\"static/chunks/3073-571e1c4211f8eedc.js\",\"9743\",\"static/chunks/9743-e6dc238de80ea9c7.js\",\"6349\",\"static/chunks/6349-77e70ed69c60ca6b.js\",\"9851\",\"static/chunks/9851-a767f4208c2c8fde.js\",\"5642\",\"static/chunks/app/(dashboard)/layout-608a0ed1cc1ad304.js\"],\"default\"]\ne:I[26754,[\"231\",\"static/chunks/231-7c76446a5b0e00a7.js\",\"2950\",\"static/chunks/2950-adbfc4d8db75df0a.js\",\"7776\",\"static/chunks/7776-11ea05523b6287c1.js\",\"8173\",\"static/chunks/8173-4fa5c93cd5d77460.js\",\"448\",\"static/chunks/448-aa34c37ebb021ea2.js\",\"3073\",\"static/chunks/3073-571e1c4211f8eedc.js\",\"9743\",\"static/chunks/9743-e6dc238de80ea9c7.js\",\"6349\",\"static/chunks/6349-77e70ed69c60ca6b.js\",\"9851\",\"static/chunks/9851-a767f4208c2c8fde.js\",\"5642\",\"static/chunks/app/(dashboard)/layout-608a0ed1cc1ad304.js\"],\"BottomElements\"]\nf:I[44849,[\"7776\",\"static/chunks/7776-11ea05523b6287c1.js\",\"3073\",\"static"])</script>
1<script>self.__next_f.push([1,"/chunks/3073-571e1c4211f8eedc.js\",\"8518\",\"static/chunks/8518-67a735f45eca38e5.js\",\"3185\",\"static/chunks/app/layout-47b31358738efe06.js\"],\"ClientClerkProvider\"]\n10:I[84080,[\"7776\",\"static/chunks/7776-11ea05523b6287c1.js\",\"3073\",\"static/chunks/3073-571e1c4211f8eedc.js\",\"8518\",\"static/chunks/8518-67a735f45eca38e5.js\",\"3185\",\"static/chunks/app/layout-47b31358738efe06.js\"],\"\"]\n11:I[74264,[\"7776\",\"static/chunks/7776-11ea05523b6287c1.js\",\"3073\",\"static/chunks/3073-571e1c4211f8eedc.js\",\"8518\",\"static/chunks/8518-67a735f45eca38e5.js\",\"3185\",\"static/chunks/app/layout-47b31358738efe06.js\"],\"Toaster\"]\n12:I[51164,[\"7776\",\"static/chunks/7776-11ea05523b6287c1.js\",\"3073\",\"static/chunks/3073-571e1c4211f8eedc.js\",\"8518\",\"static/chunks/8518-67a735f45eca38e5.js\",\"3185\",\"static/chunks/app/layout-47b31358738efe06.js\"],\"Analytics\"]\n14:I[76130,[],\"\"]\n7:T6454,"])</script>
1<script>self.__next_f.push([1,"{\"@context\":\"https://schema.org\",\"@type\":\"ItemList\",\"name\":\"VisualFlow React flow Blogs and Tutorials\",\"description\":\"A comprehensive collection of React flow Blogs, tutorials, and guides for building interactive flow diagrams, automation workflows, and visual programming tools.\",\"numberOfItems\":43,\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"item\":{\"@type\":\"Article\",\"@id\":\"https://www.visualflow.dev/blogs/visualizing-complex-pipelines-flow-weaver\",\"name\":\"Visualizing Complex Pipelines with Flow Weaver and React Flow\",\"description\":\"Learn how to build a highly interactive, customizable visual builder and workflow orchestration tool using the premium Flow Weaver template.\",\"image\":\"https://www.visualflow.dev/images/reactflow/flow-weaver.png\",\"datePublished\":\"2026-10-09T00:00:00.000Z\",\"author\":{\"@type\":\"Person\",\"name\":\"VisualFlow Team\"}}},{\"@type\":\"ListItem\",\"position\":2,\"item\":{\"@type\":\"Article\",\"@id\":\"https://www.visualflow.dev/blogs/visualizing-hierarchies-tree-weaver\",\"name\":\"Visualizing Hierarchies with React flow Tree Weaver\",\"description\":\"Discover how to build performant, collapsible tree structures and org charts using our new $50 premium Tree Weaver template.\",\"image\":\"https://www.visualflow.dev/images/reactflow/react-flow-tree-weaver.png\",\"datePublished\":\"2026-10-09T00:00:00.000Z\",\"author\":{\"@type\":\"Person\",\"name\":\"VisualFlow Team\"}}},{\"@type\":\"ListItem\",\"position\":3,\"item\":{\"@type\":\"Article\",\"@id\":\"https://www.visualflow.dev/blogs/visualizing-complex-hierarchies-multi-dir-mindmap\",\"name\":\"Visualizing Complex Hierarchies with Multi-Directional Mindmaps in React Flow\",\"description\":\"Explore our new $100 premium Multi-Directional Mindmap template featuring image support, dynamic layouts, and expansive node routing.\",\"image\":\"https://www.visualflow.dev/images/reactflow/multi-dir-mindmap.png\",\"datePublished\":\"2026-10-09T00:00:00.000Z\",\"author\":{\"@type\":\"Person\",\"name\":\"VisualFlow Team\"}}},{\"@type\":\"ListItem\",\"position\":4,\"item\":{\"@type\":\"Article\",\"@id\":\"https://www.visualflow.dev/blogs/creating-organic-whiteboards-excalidraw\",\"name\":\"Creating Organic Whiteboards with Excalidraw Sketchboard and React Flow\",\"description\":\"Discover how to build beautiful, hand-drawn aesthetic whiteboards and diagramming tools using our new premium Excalidraw Sketchboard template.\",\"image\":\"https://www.visualflow.dev/images/reactflow/react-flow-excalidraw.png\",\"datePublished\":\"2026-10-09T00:00:00.000Z\",\"author\":{\"@type\":\"Person\",\"name\":\"VisualFlow Team\"}}},{\"@type\":\"ListItem\",\"position\":5,\"item\":{\"@type\":\"Article\",\"@id\":\"https://www.visualflow.dev/blogs/building-interactive-canvas-experiences\",\"name\":\"Building Interactive Canvas Experiences with React Flow\",\"description\":\"Explore the new Canvas Flow Builder template. Learn how to create stunning, interactive visual builders with smooth animations and custom node designs.\",\"image\":\"https://www.visualflow.dev/images/reactflow/canvas-flow.png\",\"datePublished\":\"2026-10-09T00:00:00.000Z\",\"author\":{\"@type\":\"Person\",\"name\":\"VisualFlow Team\"}}},{\"@type\":\"ListItem\",\"position\":6,\"item\":{\"@type\":\"Article\",\"@id\":\"https://www.visualflow.dev/blogs/sequence-diagram-flow\",\"name\":\"Building UML Sequence Diagrams with React Flow\",\"description\":\"Learn the complex architectural layout algorithms required to build structured, rigid UML sequence diagrams and timelines using React Flow.\",\"image\":\"https://www.visualflow.dev/images/reactflow/sequence-diagram-flow.png\",\"datePublished\":\"2026-05-25T00:00:00.000Z\",\"author\":{\"@type\":\"Person\",\"name\":\"Azim\"}}},{\"@type\":\"ListItem\",\"position\":7,\"item\":{\"@type\":\"Article\",\"@id\":\"https://www.visualflow.dev/blogs/scale-studio-pro\",\"name\":\"Architecting for Massive Scale in React Flow\",\"description\":\"A comprehensive guide on handling thousands of nodes with virtualized rendering and advanced minimap optimization in React Flow.\",\"image\":\"https://www.visualflow.dev/images/reactflow/scale-studio-pro.png\",\"datePublished\":\"2026-05-24T00:00:00.000Z\",\"author\":{\"@type\":\"Person\",\"name\":\"Azim\"}}},{\"@type\":\"ListItem\",\"position\":8,\"item\":{\"@type\":\"Article\",\"@id\":\"https://www.visualflow.dev/blogs/force-directed-tree\",\"name\":\"Visualizing Networks with Force-Directed Graphs in React Flow\",\"description\":\"Learn how to integrate D3-force physics with React Flow to build stunning, organic, and self-organizing network graphs.\",\"image\":\"https://www.visualflow.dev/images/reactflow/force-directed-tree.png\",\"datePublished\":\"2026-05-21T00:00:00.000Z\",\"author\":{\"@type\":\"Person\",\"name\":\"Azim\"}}},{\"@type\":\"ListItem\",\"position\":9,\"item\":{\"@type\":\"Article\",\"@id\":\"https://www.visualflow.dev/blogs/energy-sankey-diagram\",\"name\":\"Visualizing Energy Flows with React Flow Sankey Diagrams\",\"description\":\"Learn how to build complex, animated Sankey diagrams to track energy distribution, financial transactions, and user journeys using React Flow.\",\"image\":\"https://www.visualflow.dev/images/reactflow/energy-sankey-diagram.png\",\"datePublished\":\"2026-05-13T00:00:00.000Z\",\"author\":{\"@type\":\"Person\",\"name\":\"Azim\"}}},{\"@type\":\"ListItem\",\"position\":10,\"item\":{\"@type\":\"Article\",\"@id\":\"https://www.visualflow.dev/blogs/incremental-tree-builder\",\"name\":\"Building Interactive Org Charts and Incremental Trees in React Flow\",\"description\":\"Discover how to architect dynamically expanding, collapsible tree structures and organizational charts with auto-layout algorithms using React Flow.\",\"image\":\"https://www.visualflow.dev/images/reactflow/incremental-tree-builder.png\",\"datePublished\":\"2026-05-12T00:00:00.000Z\",\"author\":{\"@type\":\"Person\",\"name\":\"Azim\"}}},{\"@type\":\"ListItem\",\"position\":11,\"item\":{\"@type\":\"Article\",\"@id\":\"https://www.visualflow.dev/blogs/react-flow-vs-jointjs\",\"name\":\"React Flow vs JointJS: Why Modern Engineering Teams Are Switching\",\"description\":\"A deep dive into why React Flow is vastly superior to legacy libraries like JointJS, focusing on React compatibility, state management, and modern developer experience.\",\"image\":\"https://www.visualflow.dev/images/reactflow/visualflow.png\",\"datePublished\":\"2026-05-12T00:00:00.000Z\",\"author\":{\"@type\":\"Person\",\"name\":\"Azim\"}}},{\"@type\":\"ListItem\",\"position\":12,\"item\":{\"@type\":\"Article\",\"@id\":\"https://www.visualflow.dev/blogs/react-flow-excalidraw-clone\",\"name\":\"React flow Excalidraw Clone: Building Whiteboard Apps\",\"description\":\"A comprehensive guide on how to build a collaborative whiteboard application similar to Excalidraw or Miro using React flow.\",\"image\":\"https://www.visualflow.dev/images/reactflow/react-flow-excalidraw.png\",\"datePublished\":\"2026-05-11T00:00:00.000Z\",\"author\":{\"@type\":\"Person\",\"name\":\"Azim\"}}}
1,{\"@type\":\"ListItem\",\"position\":13,\"item\":{\"@type\":\"Article\",\"@id\":\"https://www.visualflow.dev/blogs/react-flow-best-diagram-library\",\"name\":\"10 Reasons Why React flow is the Best Library for Interactive Node-Based Diagrams\",\"description\":\"Discover why React flow is the ultimate choice for building interactive node-based applications, flowcharts, and diagrams natively in React.\",\"image\":\"https://www.visualflow.dev/images/reactflow/reactflow-mindmap.png\",\"datePublished\":\"2026-05-10T00:00:00.000Z\",\"author\":{\"@type\":\"Person\",\"name\":\"Azim\"}}},{\"@type\":\"ListItem\",\"position\":14,\"item\":{\"@type\":\"Article\",\"@id\":\"https://www.visualflow.dev/blogs/build-automation-builder-react-flow\",\"name\":\"How to Build a Complete SaaS Automation Builder Using React flow\",\"description\":\"Learn the architecture and step-by-step process of building a visual automation SaaS canvas using the incredible power of React flow.\",\"image\":\"https://www.visualflow.dev/images/reactflow/reactflow-workflow-automation.png\",\"datePublished\":\"2026-05-09T00:00:00.000Z\",\"author\":{\"@type\":\"Person\",\"name\":\"Azim\"}}},{\"@type\":\"ListItem\",\"position\":15,\"item\":{\"@type\":\"Article\",\"@id\":\"https://www.visualflow.dev/blogs/microservices-architecture\",\"name\":\"Visualizing Microservices Architectures with React Flow\",\"description\":\"Learn how to build interactive cloud architecture diagrams with custom service nodes and animated traffic edges using React Flow.\",\"image\":\"https://www.visualflow.dev/images/reactflow/microservices-architecture.png\",\"datePublished\":\"2026-05-09T00:00:00.000Z\",\"author\":{\"@type\":\"Person\",\"name\":\"Azim\"}}},{\"@type\":\"ListItem\",\"position\":16,\"item\":{\"@type\":\"Article\",\"@id\":\"https://www.visualflow.dev/blogs/react-flow-design-studio\",\"name\":\"Building a Custom Diagramming Studio with React Flow\",\"description\":\"Learn how to build a Draw.io alternative using React Flow. Explore custom SVG shapes, drag-and-drop mechanics, and dynamic node routing.\",\"image\":\"https://www.visualflow.dev/images/reactflow/react-flow-desing-studio.png\",\"datePublished\":\"2026-05-08T00:00:00.000Z\",\"author\":{\"@type\":\"Person\",\"name\":\"Azim\"}}},{\"@type\":\"ListItem\",\"position\":17,\"item\":{\"@type\":\"Article\",\"@id\":\"https://www.visualflow.dev/blogs/background-studio-react-flow\",\"name\":\"Background Studio with React Flow: Interactive Canvas Background Designer\",\"description\":\"Explore how to build a real-time background customization studio using React Flow. Design and preview gradients, patterns, and animated effects through an intuitive node-based interface — perfect for theme editors, design tools, and creative configuration UIs.\",\"image\":\"https://www.visualflow.dev/images/reactflow/background-studio.png\",\"datePublished\":\"2026-04-29T00:00:00.000Z\",\"author\":{\"@type\":\"Person\",\"name\":\"VisualFlow Team\"}}},{\"@type\":\"ListItem\",\"position\":18,\"item\":{\"@type\":\"Article\",\"@id\":\"https://www.visualflow.dev/blogs/radial-node-arranger-circular-layout\",\"name\":\"Radial Node Arranger: Building Circular Graph Layouts with ReactFlow\",\"description\":\"Learn how to build a radial layout engine that automatically arranges ReactFlow nodes in circular and hierarchical patterns. Perfect for org charts, dependency graphs, and relationship maps.\",\"image\":\"https://www.visualflow.dev/images/reactflow/radial-arrange.png\",\"datePublished\":\"2026-04-22T00:00:00.000Z\",\"author\":{\"@type\":\"Person\",\"name\":\"VisualFlow Team\"}}},{\"@type\":\"ListItem\",\"position\":19,\"item\":{\"@type\":\"Article\",\"@id\":\"https://www.visualflow.dev/blogs/hexaflow-board-hexagonal-canvas\",\"name\":\"HexaFlow Board: Designing Hexagonal Node Canvases with ReactFlow\",\"description\":\"Discover how to create a unique hexagonal grid canvas with ReactFlow. Build visually stunning board layouts using hex-shaped custom nodes — perfect for game maps, data grids, and creative diagramming.\",\"image\":\"https://www.visualflow.dev/images/reactflow/hexaflow.png\",\"datePublished\":\"2026-04-22T00:00:00.000Z\",\"author\":{\"@type\":\"Person\",\"name\":\"VisualFlow Team\"}}},{\"@type\":\"ListItem\",\"position\":20,\"item\":{\"@type\":\"Article\",\"@id\":\"https://www.visualflow.dev/blogs/introducing-bot-weave\",\"name\":\"Introducing Bot Weave: Building Advanced AI Bot \u0026 Lead Gen Workflows with ReactFlow\",\"description\":\"Discover how to create a highly sophisticated visual builder for AI chatbots and lead generation agents using ReactFlow. See how advanced dialog branching and visual logic work in harmony.\",\"image\":\"https://www.visualflow.dev/images/reactflow/bot-weave.png\",\"datePublished\":\"2026-04-12T00:00:00.000Z\",\"author\":{\"@type\":\"Person\",\"name\":\"VisualFlow Team\"}}},{\"@type\":\"ListItem\",\"position\":21,\"item\":{\"@type\":\"Article\",\"@id\":\"https://www.visualflow.dev/blogs/introducing-flow-exploration-studio\",\"name\":\"Introducing Flow Exploration Studio: Interactive Node Environments\",\"description\":\"Learn how to build interactive testing and exploration workspaces using React flow. See how custom node inspectors and isolated execution environments function.\",\"image\":\"https://www.visualflow.dev/images/reactflow/flow-exploration-studio.png\",\"datePublished\":\"2026-04-11T00:00:00.000Z\",\"author\":{\"@type\":\"Person\",\"name\":\"VisualFlow Team\"}}},{\"@type\":\"ListItem\",\"position\":22,\"item\":{\"@type\":\"Article\",\"@id\":\"https://www.visualflow.dev/blogs/reactflow-workflow-automation-visual-automation\",\"name\":\"ReactFlow Workflow Automation: Building Visual Automation Platforms\",\"description\":\"Build powerful visual workflow automation platforms with ReactFlow. Design, test, and deploy complex automation workflows with drag-and-drop interface, custom nodes, conditional logic, and real-time execution monitoring for enterprise-grade business process automation.\",\"image\":\"https://res.cloudinary.com/dcewthzm6/image/upload/v1771996559/reactflow-workflow-automation_rnn67l.png\",\"datePublished\":\"2024-05-01T00:00:00.000Z\",\"author\":{\"@type\":\"Person\",\"name\":\"VisualFlow Team\"}}},{\"@type\":\"ListItem\",\"position\":23,\"item\":{\"@type\":\"Article\",\"@id\":\"https://www.visualflow.dev/blogs/3d-reactflow-editor-immersive-flow-designer\",\"name\":\"3D ReactFlow Editor: Immersive Three-Dimensional Flow Designer\",\"description\":\"Revolutionary three-dimensional flow editor built with ReactFlow and Three.js for immersive, interactive node-based editing. Create and edit stunning 3D flow diagrams with 3D node rendering, camera controls, depth-based interactions, node editing, edge creation, and smooth animations for next-generation flow design.\",\"
1image\":\"https://www.visualflow.dev/images/reactflow/3d-reactflow-editor.png\",\"datePublished\":\"2024-04-25T00:00:00.000Z\",\"author\":{\"@type\":\"Person\",\"name\":\"VisualFlow Team\"}}},{\"@type\":\"ListItem\",\"position\":24,\"item\":{\"@type\":\"Article\",\"@id\":\"https://www.visualflow.dev/blogs/process-flow-studio-business-process-design\",\"name\":\"Process Flow Studio: Professional Business Process Design with ReactFlow\",\"description\":\"Professional process flow design studio with advanced ReactFlow capabilities for creating sophisticated business process diagrams. Features comprehensive node library, advanced layout algorithms, collaboration tools, and export capabilities for business analysts and process engineers.\",\"image\":\"https://www.visualflow.dev/images/reactflow/process-flow.png\",\"datePublished\":\"2024-04-15T00:00:00.000Z\",\"author\":{\"@type\":\"Person\",\"name\":\"VisualFlow Team\"}}},{\"@type\":\"ListItem\",\"position\":25,\"item\":{\"@type\":\"Article\",\"@id\":\"https://www.visualflow.dev/blogs/reactflow-validation-flow-form-validation\",\"name\":\"ReactFlow Validation Flow: Building Complex Form Validation Workflows\",\"description\":\"Create sophisticated form validation workflows with ReactFlow for c
1omplex data validation scenarios. Build interactive validation diagrams showing validation rules, error handling, and data flow. Features custom validation node types, rule configuration, error visualization, and real-time validation feedback.\",\"image\":\"https://res.cloudinary.com/dcewthzm6/image/upload/v1771996558/validation-flow_yujhuy.png\",\"datePublished\":\"2024-04-10T00:00:00.000Z\",\"author\":{\"@type\":\"Person\",\"name\":\"VisualFlow Team\"}}},{\"@type\":\"ListItem\",\"position\":26,\"item\":{\"@type\":\"Article\",\"@id\":\"https://www.visualflow.dev/blogs/reactflow-pipeline-flow-data-visualization\",\"name\":\"ReactFlow Pipeline Flow: Visualizing Data Pipelines and ETL Processes\",\"description\":\"Build sophisticated data pipeline visualizations with ReactFlow for ETL processes, CI/CD workflows, and data processing systems. Create interactive pipeline diagrams showing data flow, transformation stages, and processing steps with custom node types and validation rules.\",\"image\":\"https://www.visualflow.dev/images/reactflow/pipflow.png\",\"datePublished\":\"2024-04-05T00:00:00.000Z\",\"author\":{\"@type\":\"Person\",\"name\":\"VisualFlow Team\"}}},{\"@type\":\"ListItem\",\"position\":27,\"item\":{\"@type\":\"Article\",\"@id\":\"https://www.visualflow.dev/blogs/reactflow-node-intersections-edge-routing\",\"name\":\"React Flow Node Intersections: Advanced Edge Routing and Collision Detection\",\"description\":\"Learn advanced ReactFlow techniques for intelligent edge routing and node intersection detection. Create clean, readable diagrams with automatic edge routing that avoids node overlaps and minimizes visual clutter. Features collision detection and path optimization algorithms.\",\"image\":\"https://www.visualflow.dev/images/reactflow/intersections.png\",\"datePublished\":\"2024-04-01T00:00:00.000Z\",\"author\":{\"@type\":\"Person\",\"name\":\"VisualFlow Team\"}}},{\"@type\":\"ListItem\",\"position\":28,\"item\":{\"@type\":\"Article\",\"@id\":\"https://www.visualflow.dev/blogs/reactflow-mindmap-interactive-knowledge-maps\",\"name\":\"React Flow Mindmap: Building Interactive Knowledge Maps with ReactFlow\",\"description\":\"Create beautiful, interactive mind maps using ReactFlow for brainstorming, note-taking, and knowledge organization. Build hierarchical knowledge structures with drag-and-drop nodes, rich text editing, and customizable styling. Perfect for project planning and collaborative brainstorming.\",\"image\":\"https://res.cloudinary.com/dcewthzm6/image/upload/v1771996554/reactflow-mindmap_cnbd85.png\",\"datePublished\":\"2024-03-28T00:00:00.000Z\",\"author\":{\"@type\":\"Person\",\"name\":\"VisualFlow Team\"}}},{\"@type\":\"ListItem\",\"position\":29,\"item\":{\"@type\":\"Article\",\"@id\":\"https://www.visualflow.dev/blogs/react-flow-neural-network-visualization\",\"name\":\"React Flow Neural Network Visualization: Interactive Deep Learning Architecture Diagrams\",\"description\":\"Create stunning, interactive visualizations of neural network architectures using ReactFlow. Visualize deep learning models, layer connections, and data flow through neural networks. Perfect for machine learning education, model documentation, and explaining complex AI architectures.\",\"image\":\"https://res.cloudinary.com/dcewthzm6/image/upload/v1771996555/neural-network_nkri8r.png\",\"datePublished\":\"2024-03-25T00:00:00.000Z\",\"author\":{\"@type\":\"Person\",\"name\":\"VisualFlow Team\"}}},{\"@type\":\"ListItem\",\"position\":30,\"item\":{\"@type\":\"Article\",\"@id\":\"https://www.visualflow.dev/blogs/reactflow-examples-vs-visualflow-examples-ready-implementation\",\"name\":\"React flow examples vs Visualflow examples: which are best for ready to implementation.\",\"description\":\"Compare VisualFlow production-ready React Flow examples with building from scratch. Discover how VisualFlow saves 8-12 weeks of development time and $24,000+ in costs while delivering enterprise-grade, production-ready implementations immediately.\",\"image\":\"https://www.visualflow.dev/images/reactflow/visualflow.png\",\"datePublished\":\"2024-03-20T00:00:00.000Z\",\"author\":{\"@type\":\"Person\",\"name\":\"VisualFlow Team\"}}},{\"@type\":\"ListItem\",\"position\":31,\"item\":{\"@type\":\"Article\",\"@id\":\"https://www.visualflow.dev/blogs/spiral-layout-graph-visualization\",\"name\":\"React flow Spiral Layout: Creating Elegant Circular Graph Visualizations\",\"description\":\"Create stunning spiral-based graph layouts for visualizing hierarchical and circular data. Automatically arrange nodes in elegant spiral patterns with customizable controls. Perfect for organizational charts, family trees, and artistic visualizations.\",\"image\":\"https://res.cloudinary.com/dcewthzm6/image/upload/v1771996556/spiral-layout_vxejzk.png\",\"datePublished\":\"2024-03-15T00:00:00.000Z\",\"author\":{\"@type\":\"Person\",\"name\":\"VisualFlow Team\"}}}
1,{\"@type\":\"ListItem\",\"position\":32,\"item\":{\"@type\":\"Article\",\"@id\":\"https://www.visualflow.dev/blogs/concept-map-knowledge-visualization\",\"name\":\"React flow Concept Map: Interactive Knowledge Visualization with ReactFlow\",\"description\":\"Create interactive concept maps for organizing knowledge and visualizing relationships between ideas. Build hierarchical knowledge structures with drag-and-drop nodes, rich text editing, and custom connections. Perfect for education, research, and knowledge management.\",\"image\":\"https://www.visualflow.dev/images/reactflow/concept-mind.png\",\"datePublished\":\"2024-03-10T00:00:00.000Z\",\"author\":{\"@type\":\"Person\",\"name\":\"VisualFlow Team\"}}},{\"@type\":\"ListItem\",\"position\":33,\"item\":{\"@type\":\"Article\",\"@id\":\"https://www.visualflow.dev/blogs/multi-color-graph-visualization\",\"name\":\"React flow Multi-Color Graph Visualization: Creating Vibrant Network Diagrams\",\"description\":\"Create vibrant, visually distinct network diagrams with advanced color management. Color-code nodes by categories, status, or data attributes. Features custom themes, gradient edges, and interactive color pickers for professional, eye-catching visualizations.\",\"image\":\"https://res.cloudinary.com/dcewthzm6/image/upload/v1771996556/multi-color_f65zhg.png\",\"datePublished\":\"2024-03-05T00:00:00.000Z\",\"author\":{\"@type\":\"Person\",\"name\":\"VisualFlow Team\"}}},{\"@type\":\"ListItem\",\"position\":34,\"item\":{\"@type\":\"Article\",\"@id\":\"https://www.visualflow.dev/blogs/force-directed-layout-graph-visualization\",\"name\":\"React flow Force-Directed Layout: Advanced Graph Visualization with ReactFlow\",\"description\":\"Create beautiful, interactive network diagrams with physics-based force-directed layout algorithms. Automatically arrange nodes using simulation that minimizes edge crossings and reveals natural clusters. Perfect for social networks, organizational charts, and complex relationship visualizations.\",\"image\":\"https://www.visualflow.dev/images/reactflow/force-layout.png\",\"datePublished\":\"2024-03-01T00:00:00.000Z\",\"author\":{\"@type\":\"Person\",\"name\":\"VisualFlow Team\"}}},{\"@type\":\"ListItem\",\"position\":35,\"item\":{\"@type\":\"Article\",\"@id\":\"https://www.visualflow.dev/blogs/production-process-editor-industrial-workflows\",\"name\":\"Production Process Editor: Designing Industrial Workflows with React flow\",\"description\":\"Create professional production process diagrams with drag-and-drop interface. Design manufacturing workflows with palette-based nodes, port connections, and property inspectors for industrial process visualization.\",\"image\":\"https://www.visualflow.dev/images/reactflow/production.png\",\"datePublished\":\"2024-02-25T00:00:00.000Z\",\"author\":{\"@type\":\"Person\",\"name\":\"VisualFlow Team\"}}},{\"@type\":\"ListItem\",\"position\":36,\"item\":{\"@type\":\"Article\",\"@id\":\"https://www.visualflow.dev/blogs/reactflow-performance-optimization\",\"name\":\"React Flow Performance Optimization Techniques\",\"description\":\"Learn advanced techniques to optimize React Flow performance. Handle large diagrams with thousands of nodes efficiently.\",\"image\":\"https://www.visualflow.dev/images/reactflow/e-render.png\",\"datePublished\":\"2024-02-20T00:00:00.000Z\",\"author\":{\"@type\":\"Person\",\"name\":\"VisualFlow Team\"}}},{\"@type\":\"ListItem\",\"position\":37,\"item\":{\"@type\":\"Article\",\"@id\":\"https://www.visualflow.dev/blogs/building-ai-agents-visual-flow-builders\",\"name\":\"React flow Building AI Agents with Visual Flow Builders\",\"description\":\"Create sophisticated AI agents and LLM-powered applications using visual flow builders. Design AI workflows without extensive coding.\",\"image\":\"https://res.cloudinary.com/dcewthzm6/image/upload/v1771996553/langflow_drzwzq.png\",\"datePublished\":\"2024-02-15T00:00:00.000Z\",\"author\":{\"@type\":\"Person\",\"name\":\"VisualFlow Team\"}}},{\"@type\":\"ListItem\",\"position\":38,\"item\":{\"@type\":\"Article\",\"@id\":\"https://www.visualflow.dev/blogs/n8
1n-builder-advanced-workflow-automation\",\"name\":\"React flow n8n Builder: Advanced Workflow Automation\",\"description\":\"Learn how to build complex automation workflows with n8n builder. Create sophisticated integrations and data pipelines.\",\"image\":\"https://www.visualflow.dev/images/reactflow/automation-flow.jpg\",\"datePublished\":\"2024-02-10T00:00:00.000Z\",\"author\":{\"@type\":\"Person\",\"name\":\"VisualFlow Team\"}}},{\"@type\":\"ListItem\",\"position\":39,\"item\":{\"@type\":\"Article\",\"@id\":\"https://www.visualflow.dev/blogs/zapier-integration-visual-automation\",\"name\":\"React flow Zapier Integration: Building Visual Automation Workflows\",\"description\":\"Automate workflows with native Zapier integration. Design sophisticated workflows with branches, filters, and error handling.\",\"image\":\"https://res.cloudinary.com/dcewthzm6/image/upload/v1771996562/zapierFlow_ul6dwo.png\",\"datePublished\":\"2024-02-05T00:00:00.000Z\",\"author\":{\"@type\":\"Person\",\"name\":\"VisualFlow Team\"}}},{\"@type\":\"ListItem\",\"position\":40,\"item\":{\"@type\":\"Article\",\"@id\":\"https://www.visualflow.dev/blogs/creating-chatbots-landbot-builder\",\"name\":\"React flow Creating Chatbots with Landbot Builder\",\"description\":\"Build sophisticated chatbot conversation flows using visual interface. Design chatbot interactions through intuitive drag-and-drop.\",\"image\":\"https://www.visualflow.dev/images/reactflow/landbot.png\",\"datePublished\":\"2024-02-01T00:00:00.000Z\",\"author\":{\"@type\":\"Person\",\"name\":\"VisualFlow Team\"}}},{\"@type\":\"ListItem\",\"position\":41,\"item\":{\"@type\":\"Article\",\"@id\":\"https://www.visualflow.dev/blogs/jointjs-vs-gojs-vs-reactflow-comparison\",\"name\":\"JointJS vs GoJS vs ReactFlow: A Comprehensive Comparison\",\"description\":\"Compare the top diagramming libraries: JointJS, GoJS, and ReactFlow. Understand their strengths, weaknesses, and use cases.\",\"image\":\"https://www.visualflow.dev/images/reactflow/flowAspects.png\",\"datePublished\":\"2024-01-25T00:00:00.000Z\",\"author\":{\"@type\":\"Person\",\"name\":\"VisualFlow Team\"}}},{\"@type\":\"ListItem\",\"position\":42,\"item\":{\"@type\":\"Article\",\"@id\":\"https://www.visualflow.dev/blogs/building-automation-workflows-klaviyo\",\"name\":\"React flow: Building Automation Workflows with Klaviyo Flow\",\"description\":\"React flow create sophisticated marketing automation flows with Klaviyo integration. Design complete customer journeys from welcome series to abandoned cart recovery.\",\"image\":\"https://www.visualflow.dev/images/reactflow/klaviyo.png\",\"datePublished\":\"2024-01-20T00:00:00.000Z\",\"author\":{\"@type\":\"Person\",\"name\":\"VisualFlow Team\"}}},{\"@type\":\"ListItem\",\"position\":43,\"item\":{\"@type\":\"Article\",\"@id\":\"https://www.visualflow.dev/blogs/getting-started-with-react-flow\",\"name\":\"Getting Started with React Flow: A Complete Guide\",\"description\":\"Learn all essential concepts about React Flow. You're new to the topic? This React Flow tutorial will get you started!\",\"image\":\"https://www.visualflow.dev/images/reactflow/project5.png\",\"datePublished\":\"2024-01-15T00:00:00.000Z\",\"author\":{\"@type\":\"Person\",\"name\":\"VisualFlow Team\"}}}]}"])</script>
1<script>self.__next_f.push([1,"15:[]\n"])</script>
1<script>self.__next_f.push([1,"0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/dbaf71b24aad1ee6.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/e02981f9ffcaff9b.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L5\",null,{\"buildId\":\"QmrXa4XY2ezU8O8sYceJh\",\"assetPrefix\":\"\",\"initialCanonicalUrl\":\"/blogs\",\"initialTree\":[\"\",{\"children\":[\"(dashboard)\",{\"children\":[\"blogs\",{\"children\":[\"__PAGE__\",{}]}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[\"(dashboard)\",{\"children\":[\"blogs\",{\"children\":[\"__PAGE__\",{},[[\"$L6\",[[\"$\",\"script\",null,{\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"$7\"}}],[\"$\",\"div\",null,{\"className\":\"pt-12 pb-24 flex-1 min-w-0 bg-gray-50/30\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-6 lg:px-16 2xl:px-28 \",\"children\":[[\"$\",\"div\",null,{\"className\":\"mb-6 flex justify-start\",\"children\":[\"$\",\"$L8\",null,{\"href\":\"/pricing\",\"className\":\"inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full text-xs sm:text-sm font-semibold bg-gradient-to-r from-orange-50 via-amber-50 to-rose-50 border border-orange-200/90 text-orange-950 hover:border-orange-400 hover:shadow-md transition-all group shadow-sm\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex h-2 w-2 rounded-full bg-orange-500 animate-pulse\"}],[\"$\",\"span\",null,{\"className\":\"bg-gradient-to-r from-orange-600 to-rose-600 bg-clip-text text-transparent font-bold\",\"children\":\"🔥 Price Drop\"}],[\"$\",\"span\",null,{\"className\":\"text-gray-300\",\"children\":\"|\"}],[\"$\",\"span\",null,{\"className\":\"text-gray-700 font-medium text-xs sm:text-sm\",\"children\":\"Now $49/mo or $199 Lifetime\"}],[\"$\",\"svg\",null,{\"className\":\"w-3.5 h-3.5 text-orange-600 group-hover:translate-x-0.5 transition-transform\",\"fill\":\"none\",\"viewBox\":\"0 0 24 24\",\"strokeWidth\":\"2.5\",\"stroke\":\"currentColor\",\"children\":[\"$\",\"path\",null,{\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"d\":\"M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3\"}]}]]}]}],[\"$\",\"div\",null,{\"className\":\"mb-16 text-center space-y-6 flex flex-col items-center justify-center\",\"children\":[[\"$\",\"div\",null,{\"className\":\"inline-flex items-center gap-2 rounded-full border px-4 py-1.5 text-sm font-semibold shadow-sm bg-white\",\"style\":{\"borderColor\":\"var(--brand-light)\",\"color\":\"var(--brand)\"},\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-book-key w-4 h-4\",\"children\":[[\"$\",\"path\",\"ze14oc\",{\"d\":\"m19 3 1 1\"}],[\"$\",\"path\",\"1sppr8\",{\"d\":\"m20 2-4.5 4.5\"}],[\"$\",\"path\",\"1ocbpn\",{\"d\":\"M20 8v13a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20\"}],[\"$\",\"path\",\"1gfsgw\",{\"d\":\"M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H14\"}],[\"$\",\"circle\",\"u49eql\",{\"cx\":\"14\",\"cy\":\"8\",\"r\":\"2\"}],\"$undefined\"]}],\"Resources \u0026 Tutorials\"]}],[\"$\",\"h1\",null,{\"className\":\"text-4xl md:text-6xl font-black tracking-tight font-display max-w-4xl mx-auto\",\"style\":{\"background\":\"var(--gradient-brand)\",\"WebkitBackgroundClip\":\"text\",\"WebkitTextFillColor\":\"transparent\",\"backgroundClip\":\"text\"},\"children\":\"Master React Flow \u0026 Visual Node Architectures\"}],[\"$\",\"p\",null,{\"className\":\"text-lg md:text-xl text-gray-600 max-w-2xl mx-auto leading-relaxed\",\"children\":\"Deep-dive tutorials, architecture guides, and production-ready examples for building interactive diagrams and automation workflows.\"}],[\"$\",\"p\",null,{\"className\":\"sr-only\",\"children\":\"VisualFlow provides comprehensive ReactFlow examples, tutorials, and guides for building interactive flow diagrams, automation workflows, mind maps, organizational charts, and more. Explore our collection of free and premium ReactFlow examples with complete source code, step-by-step tutorials, and best practices for implementing ReactFlow in your projects. Learn about ReactFlow performance optimization, workflow automation with Klaviyo and Zapier, chatbot builders like Landbot, AI agent development with Langflow, graph visualization techniques, production process editors, force-directed layouts, multi-color graphs, and concept mapping tools. Discover how to create dynamic graphs, node editors, and visual programming tools for business process automation, AI workflows, and data visualization.\"}]]}],[\"$\",\"section\",null,{\"className\":\"mb-20\",\"children\":[\"$\",\"div\",null,{\"className\":\"grid gap-8 md:grid-cols-2 lg:grid-cols-3\",\"children\":[[\"$\",\"$L8\",\"10141\",{\"href\":\"/blogs/visualizing-complex-pipelines-flow-weaver\",\"className\":\"block group\",\"children\":[\"$\",\"div\",null,{\"className\":\"text-card-foreground shadow-sm relative overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1 h-full flex flex-col border border-gray-200/60 rounded-2xl bg-white\",\"children\":[[\"$\",\"div\",null,{\"className\":\"relative w-full h-52 bg-gray-100 overflow-hidden\",\"children\":[\"$\",\"$L9\",null,{\"src\":\"/images/reactflow/flow-weaver.png\",\"alt\":\"Visualizing Complex Pipelines with Flow Weaver and React Flow\",\"fill\":true,\"className\":\"object-cover transition-transform duration-500 group-hover:scale-105\"}]}],[\"$\",\"div\",null,{\"className\":\"p-6 flex-1 flex flex-col\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-wrap gap-2 mb-4\",\"children\":[[\"$\",\"div\",null,{\"className\":\"inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors\",\"children\":\"React Flow\"}],[\"$\",\"div\",null,{\"className\":\"inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors\",\"children\":\"Workflow Builder\"}]]}],[\"$\",\"h3\",null,{\"className\":\"text-2xl font-bold mb-3 text-gray-900 group-hover:text-primary transition-colors leading-snug line-clamp-2\",\"children\":\"Visualizing Complex Pipelines with Flow Weaver and React Flow\"}],[\"$\",\"p\",null,{\"className\":\"text-lg text-gray-600 mb-6 line-clamp-3 flex-1 leading-relaxed\",\"children\":\"Learn how to build a highly interactive, customizable visual builder and workflow orchestration tool using the premium Flow Weaver template.\"}],[\"$\",\"div\",null,{\"className\":\"flex items-center justify-between gap-4 text-xs font-medium text-gray-500 mt-auto pt-4 border-t border-gray-100\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center gap-1.5\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\"
1:24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-calendar h-3.5 w-3.5 text-gray-400\",\"children\":[[\"$\",\"path\",\"1cmpym\",{\"d\":\"M8 2v4\"}],[\"$\",\"path\",\"4m81vk\",{\"d\":\"M16 2v4\"}],[\"$\",\"rect\",\"1hopcy\",{\"width\":\"18\",\"height\":\"18\",\"x\":\"3\",\"y\":\"4\",\"rx\":\"2\"}],[\"$\",\"path\",\"8toen8\",{\"d\":\"M3 10h18\"}],\"$undefined\"]}],[\"$\",\"time\",null,{\"dateTime\":\"2026-10-09\",\"children\":\"Oct 9, 2026\"}]]}],[\"$\",\"div\",null,{\"className\":\"flex items-center gap-1.5 bg-gray-50 px-2 py-1 rounded-md\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-clock h-3.5 w-3.5 text-gray-400\",\"children\":[[\"$\",\"circle\",\"1mglay\",{\"cx\":\"12\",\"cy\":\"12\",\"r\":\"10\"}],[\"$\",\"polyline\",\"68esgv\",{\"points\":\"12 6 12 12 16 14\"}],\"$undefined\"]}],[\"$\",\"span\",null,{\"children\":[5,\" min\"]}]]}]]}]]}]]}]}],[\"$\",\"$L8\",\"1009\",{\"href\":\"/blogs/visualizing-hierarchies-tree-weaver\",\"className\":\"block group\",\"children\":[\"$\",\"div\",null,{\"className\":\"text-card-foreground shadow-sm relative overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1 h-full flex flex-col border border-gray-200/60 rounded-2xl bg-white\",\"children\":[[\"$\",\"div\",null,{\"className\":\"relative w-full h-52 bg-gray-100 overflow-hidden\",\"children\":[\"$\",\"$L9\",null,{\"src\":\"/images/reactflow/react-flow-tree-weaver.png\",\"alt\":\"Visualizing Hierarchies with React flow Tree Weaver\",\"fill\":true,\"className\":\"object-cover transition-transform duration-500 group-hover:scale-105\"}]}],[\"$\",\"div\",null,{\"className\":\"p-6 flex-1 flex flex-col\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-wrap gap-2 mb-4\",\"children\":[[\"$\",\"div\",null,{\"className\":\"inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors\",\"children\":\"React Flow\"}],[\"$\",\"div\",null,{\"className\":\"inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors\",\"children\":\"Tree Layout\"}]]}],[\"$\",\"h3\",null,{\"className\":\"text-2xl font-bold mb-3 text-gray-900 group-hover:text-primary transition-colors leading-snug line-clamp-2\",\"children\":\"Visualizing Hierarchies with React flow Tree Weaver\"}],[\"$\",\"p\",null,{\"className\":\"text-lg text-gray-600 mb-6 line-clamp-3 flex-1 leading-relaxed\",\"children\":\"Discover how to build performant, collapsible tree structures and org charts using our new $50 premium Tree Weaver template.\"}],[\"$\",\"div\",null,{\"className\":\"flex items-center justify-between gap-4 text-xs font-medium text-gray-500 mt-auto pt-4 border-t border-gray-100\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center gap-1.5\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-calendar h-3.5 w-3.5 text-gray-400\",\"children\":[[\"$\",\"path\",\"1cmpym\",{\"d\":\"M8 2v4\"}],[\"$\",\"path\",\"4m81vk\",{\"d\":\"M16 2v4\"}],[\"$\",\"rect\",\"1hopcy\",{\"width\":\"18\",\"height\":\"18\",\"x\":\"3\",\"y\":\"4\",\"rx\":\"2\"}],[\"$\",\"path\",\"8toen8\",{\"d\":\"M3 10h18\"}],\"$undefined\"]}],[\"$\",\"time\",null,{\"dateTime\":\"2026-10-09\",\"children\":\"Oct 9, 2026\"}]]}],[\"$\",\"div\",null,{\"className\":\"flex items-center gap-1.5 bg-gray-50 px-2 py-1 rounded-md\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\"
1:24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-clock h-3.5 w-3.5 text-gray-400\",\"children\":[[\"$\",\"circle\",\"1mglay\",{\"cx\":\"12\",\"cy\":\"12\",\"r\":\"10\"}],[\"$\",\"polyline\",\"68esgv\",{\"points\":\"12 6 12 12 16 14\"}],\"$undefined\"]}],[\"$\",\"span\",null,{\"children\":[5,\" min\"]}]]}]]}]]}]]}]}],[\"$\",\"$L8\",\"1008\",{\"href\":\"/blogs/visualizing-complex-hierarchies-multi-dir-mindmap\",\"className\":\"block group\",\"children\":[\"$\",\"div\",null,{\"className\":\"text-card-foreground shadow-sm relative overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1 h-full flex flex-col border border-gray-200/60 rounded-2xl bg-white\",\"children\":[[\"$\",\"div\",null,{\"className\":\"relative w-full h-52 bg-gray-100 overflow-hidden\",\"children\":[\"$\",\"$L9\",null,{\"src\":\"/images/reactflow/multi-dir-mindmap.png\",\"alt\":\"Visualizing Complex Hierarchies with Multi-Directional Mindmaps in React Flow\",\"fill\":true,\"className\":\"object-cover transition-transform duration-500 group-hover:scale-105\"}]}],[\"$\",\"div\",null,{\"className\":\"p-6 flex-1 flex flex-col\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-wrap gap-2 mb-4\",\"children\":[[\"$\",\"div\",null,{\"className\":\"inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors\",\"children\":\"React Flow\"}],[\"$\",\"div\",null,{\"className\":\"inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors\",\"children\":\"Mindmap\"}]]}],[\"$\",\"h3\",null,{\"className\":\"text-2xl font-bold mb-3 text-gray-900 group-hover:text-primary transition-colors leading-snug line-clamp-2\",\"children\":\"Visualizing Complex Hierarchies with Multi-Directional Mindmaps in React Flow\"}],[\"$\",\"p\",null,{\"className\":\"text-lg text-gray-600 mb-6 line-clamp-3 flex-1 leading-relaxed\",\"children\":\"Explore our new $100 premium Multi-Directional Mindmap template featuring image support, dynamic layouts, and expansive node routing.\"}],[\"$\",\"div\",null,{\"className\":\"flex items-center justify-between gap-4 text-xs font-medium text-gray-500 mt-auto pt-4 border-t border-gray-100\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center gap-1.5\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-calendar h-3.5 w-3.5 text-gray-400\",\"children\":[[\"$\",\"path\",\"1cmpym\",{\"d\":\"M8 2v4\"}],[\"$\",\"path\",\"4m81vk\",{\"d\":\"M16 2v4\"}],[\"$\",\"rect\",\"1hopcy\",{\"width\":\"18\",\"height\":\"18\",\"x\":\"3\",\"y\":\"4\",\"rx\":\"2\"}],[\"$\",\"path\",\"8toen8\",{\"d\":\"M3 10h18\"}],\"$undefined\"]}],[\"$\",\"time\",null,{\"dateTime\":\"2026-10-09\",\"children\":\"Oct 9, 2026\"}]]}],[\"$\",\"div\",null,{\"className\":\"flex items-center gap-1.5 bg-gray-50 px-2 py-1 rounded-md\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-clock h-3.5 w-3.5 text-gray-400\",\"children\":[[\"$\",\"circle\",\"1mglay\",{\"cx\":\"12\",\"cy\":\"12\",\"r\":\"10\"}],[\"$\",\"polyline\",\"68esgv\",{\"points\":\"12 6 12 12 16 14\"}],\"$undefined\"]}],[\"$\",\"span\",null,{\"children\":[6,\" min\"]}]]}]]}]]}]]}]}],[\"$\",\"$L8\",\"1007\",{\"href\":\"/blogs/creating-organic-whiteboards-excalidraw\",\"className\":\"block group\",\"children\":[\"$\",\"div\",null,{\"className\":\"text-card-foreground shadow-sm relative overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1 h-full flex flex-col border border-gray-200/60 rounded-2xl bg-white\",\"children\":[[\"$\",\"div\",null,{\"className\":\"relative w-full h-52 bg-gray-100 overflow-hidden\",\"children\":[\"$\",\"$L9\",null,{\"src\":\"/images/reactflow/react-flow-excalidraw.png\",\"alt\":\"Creating Organic Whiteboards with Excalidraw Sketchboard and React Flow\",\"fill\":true,\"className\":\"object-cover transition-transform duration-500 group-hover:scale-105\"}]}],[\"$\",\"div\",null,{\"className\":\"p-6 flex-1 flex flex-col\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-wrap gap-2 mb-4\",\"children\":[[\"$\",\"div\",null,{\"className\":\"inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors\",\"children\":\"React Flow\"}],[\"$\",\"div\",null,{\"className\":\"inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors\",\"children\":\"Whiteboard\"}]]}],[\"$\",\"h3\",null,{\"className\":\"text-2xl font-bold mb-3 text-gray-900 group-hover:text-primary transition-colors leading-snug line-clamp-2\",\"children\":\"Creating Organic Whiteboards with Excalidraw Sketchboard and React Flow\"}],[\"$\",\"p\",null,{\"className\":\"text-lg text-gray-600 mb-6 line-clamp-3 flex-1 leading-relaxed\",\"children\":\"Discover how to build beautiful, hand-drawn aesthetic whiteboards and diagramming tools using our new premium Excalidraw Sketchboard template.\"}],[\"$\",\"div\",null,{\"className\":\"flex items-center justify-between gap-4 text-xs font-medium text-gray-500 mt-auto pt-4 border-t border-gray-100\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center gap-1.5\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\"
1:24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-calendar h-3.5 w-3.5 text-gray-400\",\"children\":[[\"$\",\"path\",\"1cmpym\",{\"d\":\"M8 2v4\"}],[\"$\",\"path\",\"4m81vk\",{\"d\":\"M16 2v4\"}],[\"$\",\"rect\",\"1hopcy\",{\"width\":\"18\",\"height\":\"18\",\"x\":\"3\",\"y\":\"4\",\"rx\":\"2\"}],[\"$\",\"path\",\"8toen8\",{\"d\":\"M3 10h18\"}],\"$undefined\"]}],[\"$\",\"time\",null,{\"dateTime\":\"2026-10-09\",\"children\":\"Oct 9, 2026\"}]]}],[\"$\",\"div\",null,{\"className\":\"flex items-center gap-1.5 bg-gray-50 px-2 py-1 rounded-md\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-clock h-3.5 w-3.5 text-gray-400\",\"children\":[[\"$\",\"circle\",\"1mglay\",{\"cx\":\"12\",\"cy\":\"12\",\"r\":\"10\"}],[\"$\",\"polyline\",\"68esgv\",{\"points\":\"12 6 12 12 16 14\"}],\"$undefined\"]}],[\"$\",\"span\",null,{\"children\":[7,\" min\"]}]]}]]}]]}]]}]}],[\"$\",\"$L8\",\"1006\",{\"href\":\"/blogs/building-interactive-canvas-experiences\",\"className\":\"block group\",\"children\":[\"$\",\"div\",null,{\"className\":\"text-card-foreground shadow-sm relative overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1 h-full flex flex-col border border-gray-200/60 rounded-2xl bg-white\",\"children\":[[\"$\",\"div\",null,{\"className\":\"relative w-full h-52 bg-gray-100 overflow-hidden\",\"children\":[\"$\",\"$L9\",null,{\"src\":\"/images/reactflow/canvas-flow.png\",\"alt\":\"Building Interactive Canvas Experiences with React Flow\",\"fill\":true,\"className\":\"object-cover transition-transform duration-500 group-hover:scale-105\"}]}],[\"$\",\"div\",null,{\"className\":\"p-6 flex-1 flex flex-col\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-wrap gap-2 mb-4\",\"children\":[[\"$\",\"div\",null,{\"className\":\"inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors\",\"children\":\"React Flow\"}],[\"$\",\"div\",null,{\"className\":\"inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors\",\"children\":\"Canvas\"}]]}],[\"$\",\"h3\",null,{\"className\":\"text-2xl font-bold mb-3 text-gray-900 group-hover:text-primary transition-colors leading-snug line-clamp-2\",\"children\":\"Building Interactive Canvas Experiences with React Flow\"}],[\"$\",\"p\",null,{\"className\":\"text-lg text-gray-600 mb-6 line-clamp-3 flex-1 leading-relaxed\",\"children\":\"Explore the new Canvas Flow Builder template. Learn how to create stunning, interactive visual builders with smooth animations and custom node designs.\"}],[\"$\",\"div\",null,{\"className\":\"flex items-center justify-between gap-4 text-xs font-medium text-gray-500 mt-auto pt-4 border-t border-gray-100\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center gap-1.5\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-calendar h-3.5 w-3.5 text-gray-400\",\"children\":[[\"$\",\"path\",\"1cmpym\",{\"d\":\"M8 2v4\"}],[\"$\",\"path\",\"4m81vk\",{\"d\":\"M16 2v4\"}],[\"$\",\"rect\",\"1hopcy\",{\"width\":\"18\",\"height\":\"18\",\"x\":\"3\",\"y\":\"4\",\"rx\":\"2\"}],[\"$\",\"path\",\"8toen8\",{\"d\":\"M3 10h18\"}],\"$undefined\"]}],[\"$\",\"time\",null,{\"dateTime\":\"2026-10-09\",\"children\":\"Oct 9, 2026\"}]]}],[\"$\",\"div\",null,{\"className\":\"flex items-center gap-1.5 bg-gray-50 px-2 py-1 rounded-md\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\"
1:24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-clock h-3.5 w-3.5 text-gray-400\",\"children\":[[\"$\",\"circle\",\"1mglay\",{\"cx\":\"12\",\"cy\":\"12\",\"r\":\"10\"}],[\"$\",\"polyline\",\"68esgv\",{\"points\":\"12 6 12 12 16 14\"}],\"$undefined\"]}],[\"$\",\"span\",null,{\"children\":[6,\" min\"]}]]}]]}]]}]]}]}],[\"$\",\"$L8\",\"10136\",{\"href\":\"/blogs/sequence-diagram-flow\",\"className\":\"block group\",\"children\":[\"$\",\"div\",null,{\"className\":\"text-card-foreground shadow-sm relative overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1 h-full flex flex-col border border-gray-200/60 rounded-2xl bg-white\",\"children\":[[\"$\",\"div\",null,{\"className\":\"relative w-full h-52 bg-gray-100 overflow-hidden\",\"children\":[\"$\",\"$L9\",null,{\"src\":\"/images/reactflow/sequence-diagram-flow.png\",\"alt\":\"Building UML Sequence Diagrams with React Flow\",\"fill\":true,\"className\":\"object-cover transition-transform duration-500 group-hover:scale-105\"}]}],[\"$\",\"div\",null,{\"className\":\"p-6 flex-1 flex flex-col\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-wrap gap-2 mb-4\",\"children\":[[\"$\",\"div\",null,{\"className\":\"inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors\",\"children\":\"React Flow\"}],[\"$\",\"div\",null,{\"className\":\"inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors\",\"children\":\"UML\"}]]}],[\"$\",\"h3\",null,{\"className\":\"text-2xl font-bold mb-3 text-gray-900 group-hover:text-primary transition-colors leading-snug line-clamp-2\",\"children\":\"Building UML Sequence Diagrams with React Flow\"}],[\"$\",\"p\",null,{\"className\":\"text-lg text-gray-600 mb-6 line-clamp-3 flex-1 leading-relaxed\",\"children\":\"Learn the complex architectural layout algorithms required to build structured, rigid UML sequence diagrams and timelines using React Flow.\"}],[\"$\",\"div\",null,{\"className\":\"flex items-center justify-between gap-4 text-xs font-medium text-gray-500 mt-auto pt-4 border-t border-gray-100\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center gap-1.5\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-calendar h-3.5 w-3.5 text-gray-400\",\"children\":[[\"$\",\"path\",\"1cmpym\",{\"d\":\"M8 2v4\"}],[\"$\",\"path\",\"4m81vk\",{\"d\":\"M16 2v4\"}],[\"$\",\"rect\",\"1hopcy\",{\"width\":\"18\",\"height\":\"18\",\"x\":\"3\",\"y\":\"4\",\"rx\":\"2\"}],[\"$\",\"path\",\"8toen8\",{\"d\":\"M3 10h18\"}],\"$undefined\"]}],[\"$\",\"time\",null,{\"dateTime\":\"2026-05-25\",\"children\":\"May 25, 2026\"}]]}],[\"$\",\"div\",null,{\"className\":\"flex items-center gap-1.5 bg-gray-50 px-2 py-1 rounded-md\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-clock h-3.5 w-3.5 text-gray-400\",\"children\":[[\"$\",\"circle\",\"1mglay\",{\"cx\":\"12\",\"cy\":\"12\",\"r\":\"10\"}],[\"$\",\"polyline\",\"68esgv\",{\"points\":\"12 6 12 12 16 14\"}],\"$undefined\"]}],[\"$\",\"span\",null,{\"children\":[7,\" min\"]}]]}]]}]]}]]}]}],[\"$\",\"$L8\",\"10134\",{\"href\":\"/blogs/scale-studio-pro\",\"className\":\"block group\",\"children\":[\"$\",\"div\",null,{\"className\":\"text-card-foreground shadow-sm relative overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1 h-full flex flex-col border border-gray-200/60 rounded-2xl bg-white\",\"children\":[[\"$\",\"div\",null,{\"className\":\"relative w-full h-52 bg-gray-100 overflow-hidden\",\"children\":[\"$\",\"$L9\",null,{\"src\":\"/images/reactflow/scale-studio-pro.png\",\"alt\":\"Architecting for Massive Scale in React Flow\",\"fill\":true,\"className\":\"object-cover transition-transform duration-500 group-hover:scale-105\"}]}],[\"$\",\"div\",null,{\"className\":\"p-6 flex-1 flex flex-col\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-wrap gap-2 mb-4\",\"children\":[[\"$\",\"div\",null,{\"className\":\"inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors\",\"children\":\"React Flow\"}],[\"$\",\"div\",null,{\"className\":\"inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors\",\"children\":\"Performance\"}]]}],[\"$\",\"h3\",null,{\"className\":\"text-2xl font-bold mb-3 text-gray-900 group-hover:text-primary transition-colors leading-snug line-clamp-2\",\"children\":\"Architecting for Massive Scale in React Flow\"}],[\"$\",\"p\",null,{\"className\":\"text-lg text-gray-600 mb-6 line-clamp-3 flex-1 leading-relaxed\",\"children\":\"A comprehensive guide on handling thousands of nodes with virtualized rendering and advanced minimap optimization in React Flow.\"}],[\"$\",\"div\",null,{\"className\":\"flex items-center justify-between gap-4 text-xs font-medium text-gray-500 mt-auto pt-4 border-t border-gray-100\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center gap-1.5\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\"
1:24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-calendar h-3.5 w-3.5 text-gray-400\",\"children\":[[\"$\",\"path\",\"1cmpym\",{\"d\":\"M8 2v4\"}],[\"$\",\"path\",\"4m81vk\",{\"d\":\"M16 2v4\"}],[\"$\",\"rect\",\"1hopcy\",{\"width\":\"18\",\"height\":\"18\",\"x\":\"3\",\"y\":\"4\",\"rx\":\"2\"}],[\"$\",\"path\",\"8toen8\",{\"d\":\"M3 10h18\"}],\"$undefined\"]}],[\"$\",\"time\",null,{\"dateTime\":\"2026-05-24\",\"children\":\"May 24, 2026\"}]]}],[\"$\",\"div\",null,{\"className\":\"flex items-center gap-1.5 bg-gray-50 px-2 py-1 rounded-md\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-clock h-3.5 w-3.5 text-gray-400\",\"children\":[[\"$\",\"circle\",\"1mglay\",{\"cx\":\"12\",\"cy\":\"12\",\"r\":\"10\"}],[\"$\",\"polyline\",\"68esgv\",{\"points\":\"12 6 12 12 16 14\"}],\"$undefined\"]}],[\"$\",\"span\",null,{\"children\":[8,\" min\"]}]]}]]}]]}]]}]}],[\"$\",\"$L8\",\"10132\",{\"href\":\"/blogs/force-directed-tree\",\"className\":\"block group\",\"children\":[\"$\",\"div\",null,{\"className\":\"text-card-foreground shadow-sm relative overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1 h-full flex flex-col border border-gray-200/60 rounded-2xl bg-white\",\"children\":[[\"$\",\"div\",null,{\"className\":\"relative w-full h-52 bg-gray-100 overflow-hidden\",\"children\":[\"$\",\"$L9\",null,{\"src\":\"/images/reactflow/force-directed-tree.png\",\"alt\":\"Visualizing Networks with Force-Directed Graphs in React Flow\",\"fill\":true,\"className\":\"object-cover transition-transform duration-500 group-hover:scale-105\"}]}],[\"$\",\"div\",null,{\"className\":\"p-6 flex-1 flex flex-col\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-wrap gap-2 mb-4\",\"children\":[[\"$\",\"div\",null,{\"className\":\"inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors\",\"children\":\"React Flow\"}],[\"$\",\"div\",null,{\"className\":\"inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors\",\"children\":\"D3\"}]]}],[\"$\",\"h3\",null,{\"className\":\"text-2xl font-bold mb-3 text-gray-900 group-hover:text-primary transition-colors leading-snug line-clamp-2\",\"children\":\"Visualizing Networks with Force-Directed Graphs in React Flow\"}],[\"$\",\"p\",null,{\"className\":\"text-lg text-gray-600 mb-6 line-clamp-3 flex-1 leading-relaxed\",\"children\":\"Learn how to integrate D3-force physics with React Flow to build stunning, organic, and self-organizing network graphs.\"}],[\"$\",\"div\",null,{\"className\":\"flex items-center justify-between gap-4 text-xs font-medium text-gray-500 mt-auto pt-4 border-t border-gray-100\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center gap-1.5\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-calendar h-3.5 w-3.5 text-gray-400\",\"children\":[[\"$\",\"path\",\"1cmpym\",{\"d\":\"M8 2v4\"}],[\"$\",\"path\",\"4m81vk\",{\"d\":\"M16 2v4\"}],[\"$\",\"rect\",\"1hopcy\",{\"width\":\"18\",\"height\":\"18\",\"x\":\"3\",\"y\":\"4\",\"rx\":\"2\"}],[\"$\",\"path\",\"8toen8\",{\"d\":\"M3 10h18\"}],\"$undefined\"]}],[\"$\",\"time\",null,{\"dateTime\":\"2026-05-21\",\"children\":\"May 21, 2026\"}]]}],[\"$\",\"div\",null,{\"className\":\"flex items-center gap-1.5 bg-gray-50 px-2 py-1 rounded-md\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\"
1:24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-clock h-3.5 w-3.5 text-gray-400\",\"children\":[[\"$\",\"circle\",\"1mglay\",{\"cx\":\"12\",\"cy\":\"12\",\"r\":\"10\"}],[\"$\",\"polyline\",\"68esgv\",{\"points\":\"12 6 12 12 16 14\"}],\"$undefined\"]}],[\"$\",\"span\",null,{\"children\":[6,\" min\"]}]]}]]}]]}]]}]}],[\"$\",\"$L8\",\"10130\",{\"href\":\"/blogs/energy-sankey-diagram\",\"className\":\"block group\",\"children\":[\"$\",\"div\",null,{\"className\":\"text-card-foreground shadow-sm relative overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1 h-full flex flex-col border border-gray-200/60 rounded-2xl bg-white\",\"children\":[[\"$\",\"div\",null,{\"className\":\"relative w-full h-52 bg-gray-100 overflow-hidden\",\"children\":[\"$\",\"$L9\",null,{\"src\":\"/images/reactflow/energy-sankey-diagram.png\",\"alt\":\"Visualizing Energy Flows with React Flow Sankey Diagrams\",\"fill\":true,\"className\":\"object-cover transition-transform duration-500 group-hover:scale-105\"}]}],[\"$\",\"div\",null,{\"className\":\"p-6 flex-1 flex flex-col\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-wrap gap-2 mb-4\",\"children\":[[\"$\",\"div\",null,{\"className\":\"inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors\",\"children\":\"React Flow\"}],[\"$\",\"div\",null,{\"className\":\"inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors\",\"children\":\"Data Visualization\"}]]}],[\"$\",\"h3\",null,{\"className\":\"text-2xl font-bold mb-3 text-gray-900 group-hover:text-primary transition-colors leading-snug line-clamp-2\",\"children\":\"Visualizing Energy Flows with React Flow Sankey Diagrams\"}],[\"$\",\"p\",null,{\"className\":\"text-lg text-gray-600 mb-6 line-clamp-3 flex-1 leading-relaxed\",\"children\":\"Learn how to build complex, animated Sankey diagrams to track energy distribution, financial transactions, and user journeys using React Flow.\"}],[\"$\",\"div\",null,{\"className\":\"flex items-center justify-between gap-4 text-xs font-medium text-gray-500 mt-auto pt-4 border-t border-gray-100\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center gap-1.5\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-calendar h-3.5 w-3.5 text-gray-400\",\"children\":[[\"$\",\"path\",\"1cmpym\",{\"d\":\"M8 2v4\"}],[\"$\",\"path\",\"4m81vk\",{\"d\":\"M16 2v4\"}],[\"$\",\"rect\",\"1hopcy\",{\"width\":\"18\",\"height\":\"18\",\"x\":\"3\",\"y\":\"4\",\"rx\":\"2\"}],[\"$\",\"path\",\"8toen8\",{\"d\":\"M3 10h18\"}],\"$undefined\"]}],[\"$\",\"time\",null,{\"dateTime\":\"2026-05-13\",\"children\":\"May 13, 2026\"}]]}],[\"$\",\"div\",null,{\"className\":\"flex items-center gap-1.5 bg-gray-50 px-2 py-1 rounded-md\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-clock h-3.5 w-3.5 text-gray-400\",\"children\":[[\"$\",\"circle\",\"1mglay\",{\"cx\":\"12\",\"cy\":\"12\",\"r\":\"10\"}],[\"$\",\"polyline\",\"68esgv\",{\"points\":\"12 6 12 12 16 14\"}],\"$undefined\"]}],[\"$\",\"span\",null,{\"children\":[6,\" min\"]}]]}]]}]]}]]}]}],[\"$\",\"$L8\",\"10129\",{\"href\":\"/blogs/incremental-tree-builder\",\"className\":\"block group\",\"children\":[\"$\",\"div\",null,{\"className\":\"text-card-foreground shadow-sm relative overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1 h-full flex flex-col border border-gray-200/60 rounded-2xl bg-white\",\"children\":[[\"$\",\"div\",null,{\"className\":\"relative w-full h-52 bg-gray-100 overflow-hidden\",\"children\":[\"$\",\"$L9\",null,{\"src\":\"/images/reactflow/incremental-tree-builder.png\",\"alt\":\"Building Interactive Org Charts and Incremental Trees in React Flow\",\"fill\":true,\"className\":\"object-cover transition-transform duration-500 group-hover:scale-105\"}]}],[\"$\",\"div\",null,{\"className\":\"p-6 flex-1 flex flex-col\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-wrap gap-2 mb-4\",\"children\":[[\"$\",\"div\",null,{\"className\":\"inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors\",\"children\":\"React Flow\"}],[\"$\",\"div\",null,{\"className\":\"inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors\",\"children\":\"Tree Layout\"}]]}],[\"$\",\"h3\",null,{\"className\":\"text-2xl font-bold mb-3 text-gray-900 group-hover:text-primary transition-colors leading-snug line-clamp-2\",\"children\":\"Building Interactive Org Charts and Incremental Trees in React Flow\"}],[\"$\",\"p\",null,{\"className\":\"text-lg text-gray-600 mb-6 line-clamp-3 flex-1 leading-relaxed\",\"children\":\"Discover how to architect dynamically expanding, collapsible tree structures and organizational charts with auto-layout algorithms using React Flow.\"}],[\"$\",\"div\",null,{\"className\":\"flex items-center justify-between gap-4 text-xs font-medium text-gray-500 mt-auto pt-4 border-t border-gray-100\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center gap-1.5\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\"
1:24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-calendar h-3.5 w-3.5 text-gray-400\",\"children\":[[\"$\",\"path\",\"1cmpym\",{\"d\":\"M8 2v4\"}],[\"$\",\"path\",\"4m81vk\",{\"d\":\"M16 2v4\"}],[\"$\",\"rect\",\"1hopcy\",{\"width\":\"18\",\"height\":\"18\",\"x\":\"3\",\"y\":\"4\",\"rx\":\"2\"}],[\"$\",\"path\",\"8toen8\",{\"d\":\"M3 10h18\"}],\"$undefined\"]}],[\"$\",\"time\",null,{\"dateTime\":\"2026-05-12\",\"children\":\"May 12, 2026\"}]]}],[\"$\",\"div\",null,{\"className\":\"flex items-center gap-1.5 bg-gray-50 px-2 py-1 rounded-md\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-clock h-3.5 w-3.5 text-gray-400\",\"children\":[[\"$\",\"circle\",\"1mglay\",{\"cx\":\"12\",\"cy\":\"12\",\"r\":\"10\"}],[\"$\",\"polyline\",\"68esgv\",{\"points\":\"12 6 12 12 16 14\"}],\"$undefined\"]}],[\"$\",\"span\",null,{\"children\":[5,\" min\"]}]]}]]}]]}]]}]}],[\"$\",\"$L8\",\"10128\",{\"href\":\"/blogs/react-flow-vs-jointjs\",\"className\":\"block group\",\"children\":[\"$\",\"div\",null,{\"className\":\"text-card-foreground shadow-sm relative overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1 h-full flex flex-col border border-gray-200/60 rounded-2xl bg-white\",\"children\":[[\"$\",\"div\",null,{\"className\":\"relative w-full h-52 bg-gray-100 overflow-hidden\",\"children\":[\"$\",\"$L9\",null,{\"src\":\"/images/reactflow/visualflow.png\",\"alt\":\"React Flow vs JointJS: Why Modern Engineering Teams Are Switching\",\"fill\":true,\"className\":\"object-cover transition-transform duration-500 group-hover:scale-105\"}]}],[\"$\",\"div\",null,{\"className\":\"p-6 flex-1 flex flex-col\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-wrap gap-2 mb-4\",\"children\":[[\"$\",\"div\",null,{\"className\":\"inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors\",\"children\":\"React Flow\"}],[\"$\",\"div\",null,{\"className\":\"inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors\",\"children\":\"JointJS\"}]]}],[\"$\",\"h3\",null,{\"className\":\"text-2xl font-bold mb-3 text-gray-900 group-hover:text-primary transition-colors leading-snug line-clamp-2\",\"children\":\"React Flow vs JointJS: Why Modern Engineering Teams Are Switching\"}],[\"$\",\"p\",null,{\"className\":\"text-lg text-gray-600 mb-6 line-clamp-3 flex-1 leading-relaxed\",\"children\":\"A deep dive into why React Flow is vastly superior to legacy libraries like JointJS, focusing on React compatibility, state management, and modern developer experience.\"}],[\"$\",\"div\",null,{\"className\":\"flex items-center justify-between gap-4 text-xs font-medium text-gray-500 mt-auto pt-4 border-t border-gray-100\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center gap-1.5\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-calendar h-3.5 w-3.5 text-gray-400\",\"children\":[[\"$\",\"path\",\"1cmpym\",{\"d\":\"M8 2v4\"}],[\"$\",\"path\",\"4m81vk\",{\"d\":\"M16 2v4\"}],[\"$\",\"rect\",\"1hopcy\",{\"width\":\"18\",\"height\":\"18\",\"x\":\"3\",\"y\":\"4\",\"rx\":\"2\"}],[\"$\",\"path\",\"8toen8\",{\"d\":\"M3 10h18\"}],\"$undefined\"]}],[\"$\",\"time\",null,{\"dateTime\":\"2026-05-12\",\"children\":\"May 12, 2026\"}]]}],[\"$\",\"div\",null,{\"className\":\"flex items-center gap-1.5 bg-gray-50 px-2 py-1 rounded-md\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\"
1:24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-clock h-3.5 w-3.5 text-gray-400\",\"children\":[[\"$\",\"circle\",\"1mglay\",{\"cx\":\"12\",\"cy\":\"12\",\"r\":\"10\"}],[\"$\",\"polyline\",\"68esgv\",{\"points\":\"12 6 12 12 16 14\"}],\"$undefined\"]}],[\"$\",\"span\",null,{\"children\":[6,\" min\"]}]]}]]}]]}]]}]}],[\"$\",\"$L8\",\"10127\",{\"href\":\"/blogs/react-flow-excalidraw-clone\",\"className\":\"block group\",\"children\":[\"$\",\"div\",null,{\"className\":\"text-card-foreground shadow-sm relative overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1 h-full flex flex-col border border-gray-200/60 rounded-2xl bg-white\",\"children\":[[\"$\",\"div\",null,{\"className\":\"relative w-full h-52 bg-gray-100 overflow-hidden\",\"children\":[\"$\",\"$L9\",null,{\"src\":\"/images/reactflow/react-flow-excalidraw.png\",\"alt\":\"React flow Excalidraw Clone: Building Whiteboard Apps\",\"fill\":true,\"className\":\"object-cover transition-transform duration-500 group-hover:scale-105\"}]}],[\"$\",\"div\",null,{\"className\":\"p-6 flex-1 flex flex-col\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-wrap gap-2 mb-4\",\"children\":[[\"$\",\"div\",null,{\"className\":\"inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors\",\"children\":\"React flow\"}],[\"$\",\"div\",null,{\"className\":\"inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors\",\"children\":\"Whiteboard\"}]]}],[\"$\",\"h3\",null,{\"className\":\"text-2xl font-bold mb-3 text-gray-900 group-hover:text-primary transition-colors leading-snug line-clamp-2\",\"children\":\"React flow Excalidraw Clone: Building Whiteboard Apps\"}],[\"$\",\"p\",null,{\"className\":\"text-lg text-gray-600 mb-6 line-clamp-3 flex-1 leading-relaxed\",\"children\":\"A comprehensive guide on how to build a collaborative whiteboard application similar to Excalidraw or Miro using React flow.\"}],[\"$\",\"div\",null,{\"className\":\"flex items-center justify-between gap-4 text-xs font-medium text-gray-500 mt-auto pt-4 border-t border-gray-100\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center gap-1.5\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-calendar h-3.5 w-3.5 text-gray-400\",\"children\":[[\"$\",\"path\",\"1cmpym\",{\"d\":\"M8 2v4\"}],[\"$\",\"path\",\"4m81vk\",{\"d\":\"M16 2v4\"}],[\"$\",\"rect\",\"1hopcy\",{\"width\":\"18\",\"height\":\"18\",\"x\":\"3\",\"y\":\"4\",\"rx\":\"2\"}],[\"$\",\"path\",\"8toen8\",{\"d\":\"M3 10h18\"}],\"$undefined\"]}],[\"$\",\"time\",null,{\"dateTime\":\"2026-05-11\",\"children\":\"May 11, 2026\"}]]}],[\"$\",\"div\",null,{\"className\":\"flex items-center gap-1.5 bg-gray-50 px-2 py-1 rounded-md\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-clock h-3.5 w-3.5 text-gray-400\",\"children\":[[\"$\",\"circle\",\"1mglay\",{\"cx\":\"12\",\"cy\":\"12\",\"r\":\"10\"}],[\"$\",\"polyline\",\"68esgv\",{\"points\":\"12 6 12 12 16 14\"}],\"$undefined\"]}],[\"$\",\"span\",null,{\"children\":[7,\" min\"]}]]}]]}]]}]]}]}],[\"$\",\"$L8\",\"10126\",{\"href\":\"/blogs/react-flow-best-diagram-library\",\"className\":\"block group\",\"children\":[\"$\",\"div\",null,{\"className\":\"text-card-foreground shadow-sm relative overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1 h-full flex flex-col border border-gray-200/60 rounded-2xl bg-white\",\"children\":[[\"$\",\"div\",null,{\"className\":\"relative w-full h-52 bg-gray-100 overflow-hidden\",\"children\":[\"$\",\"$L9\",null,{\"src\":\"/images/reactflow/reactflow-mindmap.png\",\"alt\":\"10 Reasons Why React flow is the Best Library for Interactive Node-Based Diagrams\",\"fill\":true,\"className\":\"object-cover transition-transform duration-500 group-hover:scale-105\"}]}],[\"$\",\"div\",null,{\"className\":\"p-6 flex-1 flex flex-col\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-wrap gap-2 mb-4\",\"children\":[[\"$\",\"div\",null,{\"className\":\"inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors\",\"children\":\"React flow\"}],[\"$\",\"div\",null,{\"className\":\"inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors\",\"children\":\"Diagrams\"}]]}],[\"$\",\"h3\",null,{\"className\":\"text-2xl font-bold mb-3 text-gray-900 group-hover:text-primary transition-colors leading-snug line-clamp-2\",\"children\":\"10 Reasons Why React flow is the Best Library for Interactive Node-Based Diagrams\"}],[\"$\",\"p\",null,{\"className\":\"text-lg text-gray-600 mb-6 line-clamp-3 flex-1 leading-relaxed\",\"children\":\"Discover why React flow is the ultimate choice for building interactive node-based applications, flowcharts, and diagrams natively in React.\"}],[\"$\",\"div\",null,{\"className\":\"flex items-center justify-between gap-4 text-xs font-medium text-gray-500 mt-auto pt-4 border-t border-gray-100\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center gap-1.5\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\"
1:24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-calendar h-3.5 w-3.5 text-gray-400\",\"children\":[[\"$\",\"path\",\"1cmpym\",{\"d\":\"M8 2v4\"}],[\"$\",\"path\",\"4m81vk\",{\"d\":\"M16 2v4\"}],[\"$\",\"rect\",\"1hopcy\",{\"width\":\"18\",\"height\":\"18\",\"x\":\"3\",\"y\":\"4\",\"rx\":\"2\"}],[\"$\",\"path\",\"8toen8\",{\"d\":\"M3 10h18\"}],\"$undefined\"]}],[\"$\",\"time\",null,{\"dateTime\":\"2026-05-10\",\"children\":\"May 10, 2026\"}]]}],[\"$\",\"div\",null,{\"className\":\"flex items-center gap-1.5 bg-gray-50 px-2 py-1 rounded-md\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-clock h-3.5 w-3.5 text-gray-400\",\"children\":[[\"$\",\"circle\",\"1mglay\",{\"cx\":\"12\",\"cy\":\"12\",\"r\":\"10\"}],[\"$\",\"polyline\",\"68esgv\",{\"points\":\"12 6 12 12 16 14\"}],\"$undefined\"]}],[\"$\",\"span\",null,{\"children\":[6,\" min\"]}]]}]]}]]}]]}]}],[\"$\",\"$L8\",\"10125\",{\"href\":\"/blogs/build-automation-builder-react-flow\",\"className\":\"block group\",\"children\":[\"$\",\"div\",null,{\"className\":\"text-card-foreground shadow-sm relative overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1 h-full flex flex-col border border-gray-200/60 rounded-2xl bg-white\",\"children\":[[\"$\",\"div\",null,{\"className\":\"relative w-full h-52 bg-gray-100 overflow-hidden\",\"children\":[\"$\",\"$L9\",null,{\"src\":\"/images/reactflow/reactflow-workflow-automation.png\",\"alt\":\"How to Build a Complete SaaS Automation Builder Using React flow\",\"fill\":true,\"className\":\"object-cover transition-transform duration-500 group-hover:scale-105\"}]}],[\"$\",\"div\",null,{\"className\":\"p-6 flex-1 flex flex-col\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-wrap gap-2 mb-4\",\"children\":[[\"$\",\"div\",null,{\"className\":\"inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors\",\"children\":\"React flow\"}],[\"$\",\"div\",null,{\"className\":\"inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors\",\"children\":\"SaaS\"}]]}],[\"$\",\"h3\",null,{\"className\":\"text-2xl font-bold mb-3 text-gray-900 group-hover:text-primary transition-colors leading-snug line-clamp-2\",\"children\":\"How to Build a Complete SaaS Automation Builder Using React flow\"}],[\"$\",\"p\",null,{\"className\":\"text-lg text-gray-600 mb-6 line-clamp-3 flex-1 leading-relaxed\",\"children\":\"Learn the architecture and step-by-step process of building a visual automation SaaS canvas using the incredible power of React flow.\"}],[\"$\",\"div\",null,{\"className\":\"flex items-center justify-between gap-4 text-xs font-medium text-gray-500 mt-auto pt-4 border-t border-gray-100\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center gap-1.5\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-calendar h-3.5 w-3.5 text-gray-400\",\"children\":[[\"$\",\"path\",\"1cmpym\",{\"d\":\"M8 2v4\"}],[\"$\",\"path\",\"4m81vk\",{\"d\":\"M16 2v4\"}],[\"$\",\"rect\",\"1hopcy\",{\"width\":\"18\",\"height\":\"18\",\"x\":\"3\",\"y\":\"4\",\"rx\":\"2\"}],[\"$\",\"path\",\"8toen8\",{\"d\":\"M3 10h18\"}],\"$undefined\"]}],[\"$\",\"time\",null,{\"dateTime\":\"2026-05-09\",\"children\":\"May 9, 2026\"}]]}],[\"$\",\"div\",null,{\"className\":\"flex items-center gap-1.5 bg-gray-50 px-2 py-1 rounded-md\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\"
1:24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-clock h-3.5 w-3.5 text-gray-400\",\"children\":[[\"$\",\"circle\",\"1mglay\",{\"cx\":\"12\",\"cy\":\"12\",\"r\":\"10\"}],[\"$\",\"polyline\",\"68esgv\",{\"points\":\"12 6 12 12 16 14\"}],\"$undefined\"]}],[\"$\",\"span\",null,{\"children\":[8,\" min\"]}]]}]]}]]}]]}]}],[\"$\",\"$L8\",\"10124\",{\"href\":\"/blogs/microservices-architecture\",\"className\":\"block group\",\"children\":[\"$\",\"div\",null,{\"className\":\"text-card-foreground shadow-sm relative overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1 h-full flex flex-col border border-gray-200/60 rounded-2xl bg-white\",\"children\":[[\"$\",\"div\",null,{\"className\":\"relative w-full h-52 bg-gray-100 overflow-hidden\",\"children\":[\"$\",\"$L9\",null,{\"src\":\"/images/reactflow/microservices-architecture.png\",\"alt\":\"Visualizing Microservices Architectures with React Flow\",\"fill\":true,\"className\":\"object-cover transition-transform duration-500 group-hover:scale-105\"}]}],[\"$\",\"div\",null,{\"className\":\"p-6 flex-1 flex flex-col\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-wrap gap-2 mb-4\",\"children\":[[\"$\",\"div\",null,{\"className\":\"inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors\",\"children\":\"React Flow\"}],[\"$\",\"div\",null,{\"className\":\"inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors\",\"children\":\"Architecture\"}]]}],[\"$\",\"h3\",null,{\"className\":\"text-2xl font-bold mb-3 text-gray-900 group-hover:text-primary transition-colors leading-snug line-clamp-2\",\"children\":\"Visualizing Microservices Architectures with React Flow\"}],[\"$\",\"p\",null,{\"className\":\"text-lg text-gray-600 mb-6 line-clamp-3 flex-1 leading-relaxed\",\"children\":\"Learn how to build interactive cloud architecture diagrams with custom service nodes and animated traffic edges using React Flow.\"}],[\"$\",\"div\",null,{\"className\":\"flex items-center justify-between gap-4 text-xs font-medium text-gray-500 mt-auto pt-4 border-t border-gray-100\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center gap-1.5\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-calendar h-3.5 w-3.5 text-gray-400\",\"children\":[[\"$\",\"path\",\"1cmpym\",{\"d\":\"M8 2v4\"}],[\"$\",\"path\",\"4m81vk\",{\"d\":\"M16 2v4\"}],[\"$\",\"rect\",\"1hopcy\",{\"width\":\"18\",\"height\":\"18\",\"x\":\"3\",\"y\":\"4\",\"rx\":\"2\"}],[\"$\",\"path\",\"8toen8\",{\"d\":\"M3 10h18\"}],\"$undefined\"]}],[\"$\",\"time\",null,{\"dateTime\":\"2026-05-09\",\"children\":\"May 9, 2026\"}]]}],[\"$\",\"div\",null,{\"className\":\"flex items-center gap-1.5 bg-gray-50 px-2 py-1 rounded-md\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-clock h-3.5 w-3.5 text-gray-400\",\"children\":[[\"$\",\"circle\",\"1mglay\",{\"cx\":\"12\",\"cy\":\"12\",\"r\":\"10\"}],[\"$\",\"polyline\",\"68esgv\",{\"points\":\"12 6 12 12 16 14\"}],\"$undefined\"]}],[\"$\",\"span\",null,{\"children\":[5,\" min\"]}]]}]]}]]}]]}]}],[\"$\",\"$L8\",\"10123\",{\"href\":\"/blogs/react-flow-design-studio\",\"className\":\"block group\",\"children\":[\"$\",\"div\",null,{\"className\":\"text-card-foreground shadow-sm relative overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1 h-full flex flex-col border border-gray-200/60 rounded-2xl bg-white\",\"children\":[[\"$\",\"div\",null,{\"className\":\"relative w-full h-52 bg-gray-100 overflow-hidden\",\"children\":[\"$\",\"$L9\",null,{\"src\":\"/images/reactflow/react-flow-desing-studio.png\",\"alt\":\"Building a Custom Diagramming Studio with React Flow\",\"fill\":true,\"className\":\"object-cover transition-transform duration-500 group-hover:scale-105\"}]}],[\"$\",\"div\",null,{\"className\":\"p-6 flex-1 flex flex-col\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-wrap gap-2 mb-4\",\"children\":[[\"$\",\"div\",null,{\"className\":\"inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors\",\"children\":\"React Flow\"}],[\"$\",\"div\",null,{\"className\":\"inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors\",\"children\":\"Diagramming\"}]]}],[\"$\",\"h3\",null,{\"className\":\"text-2xl font-bold mb-3 text-gray-900 group-hover:text-primary transition-colors leading-snug line-clamp-2\",\"children\":\"Building a Custom Diagramming Studio with React Flow\"}],[\"$\",\"p\",null,{\"className\":\"text-lg text-gray-600 mb-6 line-clamp-3 flex-1 leading-relaxed\",\"children\":\"Learn how to build a Draw.io alternative using React Flow. Explore custom SVG shapes, drag-and-drop mechanics, and dynamic node routing.\"}],[\"$\",\"div\",null,{\"className\":\"flex items-center justify-between gap-4 text-xs font-medium text-gray-500 mt-auto pt-4 border-t border-gray-100\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center gap-1.5\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\"
1:24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-calendar h-3.5 w-3.5 text-gray-400\",\"children\":[[\"$\",\"path\",\"1cmpym\",{\"d\":\"M8 2v4\"}],[\"$\",\"path\",\"4m81vk\",{\"d\":\"M16 2v4\"}],[\"$\",\"rect\",\"1hopcy\",{\"width\":\"18\",\"height\":\"18\",\"x\":\"3\",\"y\":\"4\",\"rx\":\"2\"}],[\"$\",\"path\",\"8toen8\",{\"d\":\"M3 10h18\"}],\"$undefined\"]}],[\"$\",\"time\",null,{\"dateTime\":\"2026-05-08\",\"children\":\"May 8, 2026\"}]]}],[\"$\",\"div\",null,{\"className\":\"flex items-center gap-1.5 bg-gray-50 px-2 py-1 rounded-md\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-clock h-3.5 w-3.5 text-gray-400\",\"children\":[[\"$\",\"circle\",\"1mglay\",{\"cx\":\"12\",\"cy\":\"12\",\"r\":\"10\"}],[\"$\",\"polyline\",\"68esgv\",{\"points\":\"12 6 12 12 16 14\"}],\"$undefined\"]}],[\"$\",\"span\",null,{\"children\":[6,\" min\"]}]]}]]}]]}]]}]}],[\"$\",\"$L8\",\"26\",{\"href\":\"/blogs/background-studio-react-flow\",\"className\":\"block group\",\"children\":[\"$\",\"div\",null,{\"className\":\"text-card-foreground shadow-sm relative overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1 h-full flex flex-col border border-gray-200/60 rounded-2xl bg-white\",\"children\":[[\"$\",\"div\",null,{\"className\":\"relative w-full h-52 bg-gray-100 overflow-hidden\",\"children\":[\"$\",\"$L9\",null,{\"src\":\"/images/reactflow/background-studio.png\",\"alt\":\"Background Studio with React Flow: Interactive Canvas Background Designer\",\"fill\":true,\"className\":\"object-cover transition-transform duration-500 group-hover:scale-105\"}]}],[\"$\",\"div\",null,{\"className\":\"p-6 flex-1 flex flex-col\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-wrap gap-2 mb-4\",\"children\":[[\"$\",\"div\",null,{\"className\":\"inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors\",\"children\":\"ReactFlow\"}],[\"$\",\"div\",null,{\"className\":\"inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors\",\"children\":\"Background Editor\"}]]}],[\"$\",\"h3\",null,{\"className\":\"text-2xl font-bold mb-3 text-gray-900 group-hover:text-primary transition-colors leading-snug line-clamp-2\",\"children\":\"Background Studio with React Flow: Interactive Canvas Background Designer\"}],[\"$\",\"p\",null,{\"className\":\"text-lg text-gray-600 mb-6 line-clamp-3 flex-1 leading-relaxed\",\"children\":\"Explore how to build a real-time background customization studio using React Flow. Design and preview gradients, patterns, and animated effects through an intuitive node-based interface — perfect for theme editors, design tools, and creative configuration UIs.\"}],[\"$\",\"div\",null,{\"className\":\"flex items-center justify-between gap-4 text-xs font-medium text-gray-500 mt-auto pt-4 border-t border-gray-100\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center gap-1.5\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-calendar h-3.5 w-3.5 text-gray-400\",\"children\":[[\"$\",\"path\",\"1cmpym\",{\"d\":\"M8 2v4\"}],[\"$\",\"path\",\"4m81vk\",{\"d\":\"M16 2v4\"}],[\"$\",\"rect\",\"1hopcy\",{\"width\":\"18\",\"height\":\"18\",\"x\":\"3\",\"y\":\"4\",\"rx\":\"2\"}],[\"$\",\"path\",\"8toen8\",{\"d\":\"M3 10h18\"}],\"$undefined\"]}],[\"$\",\"time\",null,{\"dateTime\":\"2026-04-29\",\"children\":\"Apr 29, 2026\"}]]}],[\"$\",\"div\",null,{\"className\":\"flex items-center gap-1.5 bg-gray-50 px-2 py-1 rounded-md\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\"
1:24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-clock h-3.5 w-3.5 text-gray-400\",\"children\":[[\"$\",\"circle\",\"1mglay\",{\"cx\":\"12\",\"cy\":\"12\",\"r\":\"10\"}],[\"$\",\"polyline\",\"68esgv\",{\"points\":\"12 6 12 12 16 14\"}],\"$undefined\"]}],[\"$\",\"span\",null,{\"children\":[11,\" min\"]}]]}]]}]]}]]}]}],[\"$\",\"$L8\",\"24\",{\"href\":\"/blogs/radial-node-arranger-circular-layout\",\"className\":\"block group\",\"children\":[\"$\",\"div\",null,{\"className\":\"text-card-foreground shadow-sm relative overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1 h-full flex flex-col border border-gray-200/60 rounded-2xl bg-white\",\"children\":[[\"$\",\"div\",null,{\"className\":\"relative w-full h-52 bg-gray-100 overflow-hidden\",\"children\":[\"$\",\"$L9\",null,{\"src\":\"/images/reactflow/radial-arrange.png\",\"alt\":\"Radial Node Arranger: Building Circular Graph Layouts with ReactFlow\",\"fill\":true,\"className\":\"object-cover transition-transform duration-500 group-hover:scale-105\"}]}],[\"$\",\"div\",null,{\"className\":\"p-6 flex-1 flex flex-col\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-wrap gap-2 mb-4\",\"children\":[[\"$\",\"div\",null,{\"className\":\"inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors\",\"children\":\"ReactFlow\"}],[\"$\",\"div\",null,{\"className\":\"inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors\",\"children\":\"Graph Layout\"}]]}],[\"$\",\"h3\",null,{\"className\":\"text-2xl font-bold mb-3 text-gray-900 group-hover:text-primary transition-colors leading-snug line-clamp-2\",\"children\":\"Radial Node Arranger: Building Circular Graph Layouts with ReactFlow\"}],[\"$\",\"p\",null,{\"className\":\"text-lg text-gray-600 mb-6 line-clamp-3 flex-1 leading-relaxed\",\"children\":\"Learn how to build a radial layout engine that automatically arranges ReactFlow nodes in circular and hierarchical patterns. Perfect for org charts, dependency graphs, and relationship maps.\"}],[\"$\",\"div\",null,{\"className\":\"flex items-center justify-between gap-4 text-xs font-medium text-gray-500 mt-auto pt-4 border-t border-gray-100\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center gap-1.5\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-calendar h-3.5 w-3.5 text-gray-400\",\"children\":[[\"$\",\"path\",\"1cmpym\",{\"d\":\"M8 2v4\"}],[\"$\",\"path\",\"4m81vk\",{\"d\":\"M16 2v4\"}],[\"$\",\"rect\",\"1hopcy\",{\"width\":\"18\",\"height\":\"18\",\"x\":\"3\",\"y\":\"4\",\"rx\":\"2\"}],[\"$\",\"path\",\"8toen8\",{\"d\":\"M3 10h18\"}],\"$undefined\"]}],[\"$\",\"time\",null,{\"dateTime\":\"2026-04-22\",\"children\":\"Apr 22, 2026\"}]]}],[\"$\",\"div\",null,{\"className\":\"flex items-center gap-1.5 bg-gray-50 px-2 py-1 rounded-md\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-clock h-3.5 w-3.5 text-gray-400\",\"children\":[[\"$\",\"circle\",\"1mglay\",{\"cx\":\"12\",\"cy\":\"12\",\"r\":\"10\"}],[\"$\",\"polyline\",\"68esgv\",{\"points\":\"12 6 12 12 16 14\"}],\"$undefined\"]}],[\"$\",\"span\",null,{\"children\":[10,\" min\"]}]]}]]}]]}]]}]}],[\"$\",\"$L8\",\"25\",{\"href\":\"/blogs/hexaflow-board-hexagonal-canvas\",\"className\":\"block group\",\"children\":[\"$\",\"div\",null,{\"className\":\"text-card-foreground shadow-sm relative overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1 h-full flex flex-col border border-gray-200/60 rounded-2xl bg-white\",\"children\":[[\"$\",\"div\",null,{\"className\":\"relative w-full h-52 bg-gray-100 overflow-hidden\",\"children\":[\"$\",\"$L9\",null,{\"src\":\"/images/reactflow/hexaflow.png\",\"alt\":\"HexaFlow Board: Designing Hexagonal Node Canvase
1s with ReactFlow\",\"fill\":true,\"className\":\"object-cover transition-transform duration-500 group-hover:scale-105\"}]}],[\"$\",\"div\",null,{\"className\":\"p-6 flex-1 flex flex-col\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-wrap gap-2 mb-4\",\"children\":[[\"$\",\"div\",null,{\"className\":\"inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors\",\"children\":\"ReactFlow\"}],[\"$\",\"div\",null,{\"className\":\"inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors\",\"children\":\"Hexagonal Grid\"}]]}],[\"$\",\"h3\",null,{\"className\":\"text-2xl font-bold mb-3 text-gray-900 group-hover:text-primary transition-colors leading-snug line-clamp-2\",\"children\":\"HexaFlow Board: Designing Hexagonal Node Canvases with ReactFlow\"}],[\"$\",\"p\",null,{\"className\":\"text-lg text-gray-600 mb-6 line-clamp-3 flex-1 leading-relaxed\",\"children\":\"Discover how to create a unique hexagonal grid canvas with ReactFlow. Build visually stunning board layouts using hex-shaped custom nodes — perfect for game maps, data grids, and creative diagramming.\"}],[\"$\",\"div\",null,{\"className\":\"flex items-center justify-between gap-4 text-xs font-medium text-gray-500 mt-auto pt-4 border-t border-gray-100\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center gap-1.5\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-calendar h-3.5 w-3.5 text-gray-400\",\"children\":[[\"$\",\"path\",\"1cmpym\",{\"d\":\"M8 2v4\"}],[\"$\",\"path\",\"4m81vk\",{\"d\":\"M16 2v4\"}],[\"$\",\"rect\",\"1hopcy\",{\"width\":\"18\",\"height\":\"18\",\"x\":\"3\",\"y\":\"4\",\"rx\":\"2\"}],[\"$\",\"path\",\"8toen8\",{\"d\":\"M3 10h18\"}],\"$undefined\"]}],[\"$\",\"time\",null,{\"dateTime\":\"2026-04-22\",\"children\":\"Apr 22, 2026\"}]]}],[\"$\",\"div\",null,{\"className\":\"flex items-center gap-1.5 bg-gray-50 px-2 py-1 rounded-md\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-clock h-3.5 w-3.5 text-gray-400\",\"children\":[[\"$\",\"circle\",\"1mglay\",{\"cx\":\"12\",\"cy\":\"12\",\"r\":\"10\"}],[\"$\",\"polyline\",\"68esgv\",{\"points\":\"12 6 12 12 16 14\"}],\"$undefined\"]}],[\"$\",\"span\",null,{\"children\":[10,\" min\"]}]]}]]}]]}]]}]}],[\"$\",\"$L8\",\"23\",{\"href\":\"/blogs/introducing-bot-weave\",\"className\":\"block group\",\"children\":[\"$\",\"div\",null,{\"className\":\"text-card-foreground shadow-sm relative overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1 h-full flex flex-col border border-gray-200/60 rounded-2xl bg-white\",\"children\":[[\"$\",\"div\",null,{\"className\":\"relative w-full h-52 bg-gray-100 overflow-hidden\",\"children\":[\"$\",\"$L9\",null,{\"src\":\"/images/reactflow/bot-weave.png\",\"alt\":\"Introducing Bot Weave: Building Advanced AI Bot \u0026 Lead Gen Workflows with ReactFlow\",\"fill\":true,\"className\":\"object-cover transition-transform duration-500 group-hover:scale-105\"}]}],[\"$\",\"div\",null,{\"className\":\"p-6 flex-1 flex flex-col\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-wrap gap-2 mb-4\",\"children\":[[\"$\",\"div\",null,{\"className\":\"inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors\",\"children\":\"ReactFlow\"}],[\"$\",\"div\",null,{\"className\":\"inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors\",\"children\":\"Chatbots\"}]]}],[\"$\",\"h3\",null,{\"className\":\"text-2xl font-bold mb-3 text-gray-900 group-hover:text-primary transition-colors leading-snug line-clamp-2\",\"children\":\"Introducing Bot Weave: Building Advanced AI Bot \u0026 Lead Gen Workflows with ReactFlow\"}],[\"$\",\"p\",null,{\"className\":\"text-lg text-gray-600 mb-6 line-clamp-3 flex-1 leading-relaxed\",\"children\":\"Discover how to create a highly sophisticated visual builder for AI chatbots and lead generation agents using ReactFlow. See how advanced dialog branching and visual logic work in harmony.\"}],[\"$\",\"div\",null,{\"className\":\"flex items-center justify-between gap-4 text-xs font-medium text-gray-500 mt-auto pt-4 border-t border-gray-100\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center gap-1.5\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\"
1:24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-calendar h-3.5 w-3.5 text-gray-400\",\"children\":[[\"$\",\"path\",\"1cmpym\",{\"d\":\"M8 2v4\"}],[\"$\",\"path\",\"4m81vk\",{\"d\":\"M16 2v4\"}],[\"$\",\"rect\",\"1hopcy\",{\"width\":\"18\",\"height\":\"18\",\"x\":\"3\",\"y\":\"4\",\"rx\":\"2\"}],[\"$\",\"path\",\"8toen8\",{\"d\":\"M3 10h18\"}],\"$undefined\"]}],[\"$\",\"time\",null,{\"dateTime\":\"2026-04-12\",\"children\":\"Apr 12, 2026\"}]]}],[\"$\",\"div\",null,{\"className\":\"flex items-center gap-1.5 bg-gray-50 px-2 py-1 rounded-md\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-clock h-3.5 w-3.5 text-gray-400\",\"children\":[[\"$\",\"circle\",\"1mglay\",{\"cx\":\"12\",\"cy\":\"12\",\"r\":\"10\"}],[\"$\",\"polyline\",\"68esgv\",{\"points\":\"12 6 12 12 16 14\"}],\"$undefined\"]}],[\"$\",\"span\",null,{\"children\":[12,\" min\"]}]]}]]}]]}]]}]}],[\"$\",\"$L8\",\"100\",{\"href\":\"/blogs/introducing-flow-exploration-studio\",\"className\":\"block group\",\"children\":[\"$\",\"div\",null,{\"className\":\"text-card-foreground shadow-sm relative overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1 h-full flex flex-col border border-gray-200/60 rounded-2xl bg-white\",\"children\":[[\"$\",\"div\",null,{\"className\":\"relative w-full h-52 bg-gray-100 overflow-hidden\",\"children\":[\"$\",\"$L9\",null,{\"src\":\"/images/reactflow/flow-exploration-studio.png\",\"alt\":\"Introducing Flow Exploration Studio: Interactive Node Environments\",\"fill\":true,\"className\":\"object-cover transition-transform duration-500 group-hover:scale-105\"}]}],[\"$\",\"div\",null,{\"className\":\"p-6 flex-1 flex flex-col\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-wrap gap-2 mb-4\",\"children\":[[\"$\",\"div\",null,{\"className\":\"inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors\",\"children\":\"React flow\"}],[\"$\",\"div\",null,{\"className\":\"inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors\",\"children\":\"React\"}]]}],[\"$\",\"h3\",null,{\"className\":\"text-2xl font-bold mb-3 text-gray-900 group-hover:text-primary transition-colors leading-snug line-clamp-2\",\"children\":\"Introducing Flow Exploration Studio: Interactive Node Environments\"}],[\"$\",\"p\",null,{\"className\":\"text-lg text-gray-600 mb-6 line-clamp-3 flex-1 leading-relaxed\",\"children\":\"Learn how to build interactive testing and exploration workspaces using React flow. See how custom node inspectors and isolated execution environments function.\"}],[\"$\",\"div\",null,{\"className\":\"flex items-center justify-between gap-4 text-xs font-medium text-gray-500 mt-auto pt-4 border-t border-gray-100\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center gap-1.5\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-calendar h-3.5 w-3.5 text-gray-400\",\"children\":[[\"$\",\"path\",\"1cmpym\",{\"d\":\"M8 2v4\"}],[\"$\",\"path\",\"4m81vk\",{\"d\":\"M16 2v4\"}],[\"$\",\"rect\",\"1hopcy\",{\"width\":\"18\",\"height\":\"18\",\"x\":\"3\",\"y\":\"4\",\"rx\":\"2\"}],[\"$\",\"path\",\"8toen8\",{\"d\":\"M3 10h18\"}],\"$undefined\"]}],[\"$\",\"time\",null,{\"dateTime\":\"2026-04-11\",\"children\":\"Apr 11, 2026\"}]]}],[\"$\",\"div\",null,{\"className\":\"flex items-center gap-1.5 bg-gray-50 px-2 py-1 rounded-md\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\"
1:24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-clock h-3.5 w-3.5 text-gray-400\",\"children\":[[\"$\",\"circle\",\"1mglay\",{\"cx\":\"12\",\"cy\":\"12\",\"r\":\"10\"}],[\"$\",\"polyline\",\"68esgv\",{\"points\":\"12 6 12 12 16 14\"}],\"$undefined\"]}],[\"$\",\"span\",null,{\"children\":[8,\" min\"]}]]}]]}]]}]]}]}],[\"$\",\"$L8\",\"22\",{\"href\":\"/blogs/reactflow-workflow-automation-visual-automation\",\"className\":\"block group\",\"children\":[\"$\",\"div\",null,{\"className\":\"text-card-foreground shadow-sm relative overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1 h-full flex flex-col border border-gray-200/60 rounded-2xl bg-white\",\"children\":[[\"$\",\"div\",null,{\"className\":\"relative w-full h-52 bg-gray-100 overflow-hidden\",\"children\":[\"$\",\"$L9\",null,{\"src\":\"https://res.cloudinary.com/dcewthzm6/image/upload/v1771996559/reactflow-workflow-automation_rnn67l.png\",\"alt\":\"ReactFlow Workflow Automation: Building Visual Automation Platforms\",\"fill\":true,\"className\":\"object-cover transition-transform duration-500 group-hover:scale-105\"}]}],[\"$\",\"div\",null,{\"className\":\"p-6 flex-1 flex flex-col\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-wrap gap-2 mb-4\",\"children\":[[\"$\",\"div\",null,{\"className\":\"inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors\",\"children\":\"Workflow Automation\"}],[\"$\",\"div\",null,{\"className\":\"inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors\",\"children\":\"Visual Builder\"}]]}],[\"$\",\"h3\",null,{\"className\":\"text-2xl font-bold mb-3 text-gray-900 group-hover:text-primary transition-colors leading-snug line-clamp-2\",\"children\":\"ReactFlow Workflow Automation: Building Visual Automation Platforms\"}],[\"$\",\"p\",null,{\"className\":\"text-lg text-gray-600 mb-6 line-clamp-3 flex-1 leading-relaxed\",\"children\":\"Build powerful visual workflow automation platforms with ReactFlow. Design, test, and deploy complex automation workflows with drag-and-drop interface, custom nodes, conditional logic, and real-time execution monitoring for enterprise-grade business process automation.\"}],[\"$\",\"div\",null,{\"className\":\"flex items-center justify-between gap-4 text-xs font-medium text-gray-500 mt-auto pt-4 border-t border-gray-100\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center gap-1.5\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-calendar h-3.5 w-3.5 text-gray-400\",\"children\":[[\"$\",\"path\",\"1cmpym\",{\"d\":\"M8 2v4\"}],[\"$\",\"path\",\"4m81vk\",{\"d\":\"M16 2v4\"}],[\"$\",\"rect\",\"1hopcy\",{\"width\":\"18\",\"height\":\"18\",\"x\":\"3\",\"y\":\"4\",\"rx\":\"2\"}],[\"$\",\"path\",\"8toen8\",{\"d\":\"M3 10h18\"}],\"$undefined\"]}],[\"$\",\"time\",null,{\"dateTime\":\"2024-05-01\",\"children\":\"May 1, 2024\"}]]}],[\"$\",\"div\",null,{\"className\":\"flex items-center gap-1.5 bg-gray-50 px-2 py-1 rounded-md\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-clock h-3.5 w-3.5 text-gray-400\",\"children\":[[\"$\",\"circle\",\"1mglay\",{\"cx\":\"12\",\"cy\":\"12\",\"r\":\"10\"}],[\"$\",\"polyline\",\"68esgv\",{\"points\":\"12 6 12 12 16 14\"}],\"$undefined\"]}],[\"$\",\"span\",null,{\"children\":[18,\" min\"]}]]}]]}]]}]]}]}],[\"$\",\"$L8\",\"21\",{\"href\":\"/blogs/3d-reactflow-editor-immersive-flow-designer\",\"className\":\"block group\",\"children\":[\"$\",\"div\",null,{\"className\":\"text-card-foreground shadow-sm relative overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1 h-full flex flex-col border border-gray-200/60 rounded-2xl bg-white\",\"children\":[[\"$\",\"div\",null,{\"className\":\"relative w-full h-52 bg-gray-100 overflow-hidden\",\"children\":[\"$\",\"$L9\",null,{\"src\":\"/images/reactflow/3d-reactflow-editor.png\",\"alt\":\"3D ReactFlow Editor: Immersive Three-Dimensional Flow Designer\",\"fill\":true,\"className\":\"object-cover transition-transform duration-500 group-hover:scale-105\"}]}],[\"$\",\"div\",null,{\"className\":\"p-6 flex-1 flex flex-col\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-wrap gap-2 mb-4\",\"children\":[[\"$\",\"div\",null,{\"className\":\"inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors\",\"children\":\"3D Editor\"}],[\"$\",\"div\",null,{\"className\":\"inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors\",\"children\":\"Flow Design\"}]]}],[\"$\",\"h3\",null,{\"className\":\"text-2xl font-bold mb-3 text-gray-900 group-hover:text-primary transition-colors leading-snug line-clamp-2\",\"children\":\"3D ReactFlow Editor: Immersive Three-Dimensional Flow Designer\"}],[\"$\",\"p\",null,{\"className\":\"text-lg text-gray-600 mb-6 line-clamp-3 flex-1 leading-relaxed\",\"children\":\"Revolutionary three-dimensional flow editor built with ReactFlow and Three.js for immersive, interactive node-based editing. Create and edit stunning 3D flow diagrams with 3D node rendering, camera controls, depth-based interactions, node editing, edge creation, and smooth animations for next-generation flow design.\"}],[\"$\",\"div\",null,{\"className\":\"flex items-center justify-between gap-4 text-xs font-medium text-gray-500 mt-auto pt-4 border-t border-gray-100\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center gap-1.5\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\"
1:24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-calendar h-3.5 w-3.5 text-gray-400\",\"children\":[[\"$\",\"path\",\"1cmpym\",{\"d\":\"M8 2v4\"}],[\"$\",\"path\",\"4m81vk\",{\"d\":\"M16 2v4\"}],[\"$\",\"rect\",\"1hopcy\",{\"width\":\"18\",\"height\":\"18\",\"x\":\"3\",\"y\":\"4\",\"rx\":\"2\"}],[\"$\",\"path\",\"8toen8\",{\"d\":\"M3 10h18\"}],\"$undefined\"]}],[\"$\",\"time\",null,{\"dateTime\":\"2024-04-25\",\"children\":\"Apr 25, 2024\"}]]}],[\"$\",\"div\",null,{\"className\":\"flex items-center gap-1.5 bg-gray-50 px-2 py-1 rounded-md\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-clock h-3.5 w-3.5 text-gray-400\",\"children\":[[\"$\",\"circle\",\"1mglay\",{\"cx\":\"12\",\"cy\":\"12\",\"r\":\"10\"}],[\"$\",\"polyline\",\"68esgv\",{\"points\":\"12 6 12 12 16 14\"}],\"$undefined\"]}],[\"$\",\"span\",null,{\"children\":[20,\" min\"]}]]}]]}]]}]]}]}],[\"$\",\"$L8\",\"20\",{\"href\":\"/blogs/process-flow-studio-business-process-design\",\"className\":\"block group\",\"children\":[\"$\",\"div\",null,{\"className\":\"text-card-foreground shadow-sm relative overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1 h-full flex flex-col border border-gray-200/60 rounded-2xl bg-white\",\"children\":[[\"$\",\"div\",null,{\"className\":\"relative w-full h-52 bg-gray-100 overflow-hidden\",\"children\":[\"$\",\"$L9\",null,{\"src\":\"/images/reactflow/process-flow.png\",\"alt\":\"Process Flow Studio: Professional Business Process Design with ReactFlow\",\"fill\":true,\"className\":\"object-cover transition-transform duration-500 group-hover:scale-105\"}]}],[\"$\",\"div\",null,{\"className\":\"p-6 flex-1 flex flex-col\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-wrap gap-2 mb-4\",\"children\":[[\"$\",\"div\",null,{\"className\":\"inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors\",\"children\":\"Process Flow\"}],[\"$\",\"div\",null,{\"className\":\"inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors\",\"children\":\"Business Process\"}]]}],[\"$\",\"h3\",null,{\"className\":\"text-2xl font-bold mb-3 text-gray-900 group-hover:text-primary transition-colors leading-snug line-clamp-2\",\"children\":\"Process Flow Studio: Professional Business Process Design with ReactFlow\"}],[\"$\",\"p\",null,{\"className\":\"text-lg text-gray-600 mb-6 line-clamp-3 flex-1 leading-relaxed\",\"children\":\"Professional process flow design studio with advanced ReactFlow capabilities for creating sophisticated business process diagrams. Features comprehensive node library, advanced layout algorithms, collaboration tools, and export capabilities for business analysts and process engineers.\"}],[\"$\",\"div\",null,{\"className\":\"flex items-center justify-between gap-4 text-xs font-medium text-gray-500 mt-auto pt-4 border-t border-gray-100\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center gap-1.5\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-calendar h-3.5 w-3.5 text-gray-400\",\"children\":[[\"$\",\"path\",\"1cmpym\",{\"d\":\"M8 2v4\"}],[\"$\",\"path\",\"4m81vk\",{\"d\":\"M16 2v4\"}
1],[\"$\",\"rect\",\"1hopcy\",{\"width\":\"18\",\"height\":\"18\",\"x\":\"3\",\"y\":\"4\",\"rx\":\"2\"}],[\"$\",\"path\",\"8toen8\",{\"d\":\"M3 10h18\"}],\"$undefined\"]}],[\"$\",\"time\",null,{\"dateTime\":\"2024-04-15\",\"children\":\"Apr 15, 2024\"}]]}],[\"$\",\"div\",null,{\"className\":\"flex items-center gap-1.5 bg-gray-50 px-2 py-1 rounded-md\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-clock h-3.5 w-3.5 text-gray-400\",\"children\":[[\"$\",\"circle\",\"1mglay\",{\"cx\":\"12\",\"cy\":\"12\",\"r\":\"10\"}],[\"$\",\"polyline\",\"68esgv\",{\"points\":\"12 6 12 12 16 14\"}],\"$undefined\"]}],[\"$\",\"span\",null,{\"children\":[18,\" min\"]}]]}]]}]]}]]}]}],[\"$\",\"$L8\",\"19\",{\"href\":\"/blogs/reactflow-validation-flow-form-validation\",\"className\":\"block group\",\"children\":[\"$\",\"div\",null,{\"className\":\"text-card-foreground shadow-sm relative overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1 h-full flex flex-col border border-gray-200/60 rounded-2xl bg-white\",\"children\":[[\"$\",\"div\",null,{\"className\":\"relative w-full h-52 bg-gray-100 overflow-hidden\",\"children\":[\"$\",\"$L9\",null,{\"src\":\"https://res.cloudinary.com/dcewthzm6/image/upload/v1771996558/validation-flow_yujhuy.png\",\"alt\":\"ReactFlow Validation Flow: Building Complex Form Validation Workflows\",\"fill\":true,\"className\":\"object-cover transition-transform duration-500 group-hover:scale-105\"}]}],[\"$\",\"div\",null,{\"className\":\"p-6 flex-1 flex flex-col\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-wrap gap-2 mb-4\",\"children\":[[\"$\",\"div\",null,{\"className\":\"inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors\",\"children\":\"Validation\"}],[\"$\",\"div\",null,{\"className\":\"inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors\",\"children\":\"Form Validation\"}]]}],[\"$\",\"h3\",null,{\"className\":\"text-2xl font-bold mb-3 text-gray-900 group-hover:text-primary transition-colors leading-snug line-clamp-2\",\"children\":\"ReactFlow Validation Flow: Building Complex Form Validation Workflows\"}],[\"$\",\"p\",null,{\"className\":\"text-lg text-gray-600 mb-6 line-clamp-3 flex-1 leading-relaxed\",\"children\":\"Create sophisticated form validation workflows with ReactFlow for c
1omplex data validation scenarios. Build interactive validation diagrams showing validation rules, error handling, and data flow. Features custom validation node types, rule configuration, error visualization, and real-time validation feedback.\"}],[\"$\",\"div\",null,{\"className\":\"flex items-center justify-between gap-4 text-xs font-medium text-gray-500 mt-auto pt-4 border-t border-gray-100\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center gap-1.5\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-calendar h-3.5 w-3.5 text-gray-400\",\"children\":[[\"$\",\"path\",\"1cmpym\",{\"d\":\"M8 2v4\"}],[\"$\",\"path\",\"4m81vk\",{\"d\":\"M16 2v4\"}],[\"$\",\"rect\",\"1hopcy\",{\"width\":\"18\",\"height\":\"18\",\"x\":\"3\",\"y\":\"4\",\"rx\":\"2\"}],[\"$\",\"path\",\"8toen8\",{\"d\":\"M3 10h18\"}],\"$undefined\"]}],[\"$\",\"time\",null,{\"dateTime\":\"2024-04-10\",\"children\":\"Apr 10, 2024\"}]]}],[\"$\",\"div\",null,{\"className\":\"flex items-center gap-1.5 bg-gray-50 px-2 py-1 rounded-md\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-clock h-3.5 w-3.5 text-gray-400\",\"children\":[[\"$\",\"circle\",\"1mglay\",{\"cx\":\"12\",\"cy\":\"12\",\"r\":\"10\"}],[\"$\",\"polyline\",\"68esgv\",{\"points\":\"12 6 12 12 16 14\"}],\"$undefined\"]}],[\"$\",\"span\",null,{\"children\":[16,\" min\"]}]]}]]}]]}]]}]}],[\"$\",\"$L8\",\"18\",{\"href\":\"/blogs/reactflow-pipeline-flow-data-visualization\",\"className\":\"block group\",\"children\":[\"$\",\"div\",null,{\"className\":\"text-card-foreground shadow-sm relative overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1 h-full flex flex-col border border-gray-200/60 rounded-2xl bg-white\",\"children\":[[\"$\",\"div\",null,{\"className\":\"relative w-full h-52 bg-gray-100 overflow-hidden\",\"children\":[\"$\",\"$L9\",null,{\"src\":\"/images/reactflow/pipflow.png\",\"alt\":\"ReactFlow Pipeline Flow: Visualizing Data Pipelines and ETL Processes\",\"fill\":true,\"className\":\"object-cover transition-transform duration-500 group-hover:scale-105\"}]}],[\"$\",\"div\",null,{\"className\":\"p-6 flex-1 flex flex-col\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-wrap gap-2 mb-4\",\"children\":[[\"$\",\"div\",null,{\"className\":\"inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors\",\"children\":\"Pipeline\"}],[\"$\",\"div\",null,{\"className\":\"inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors\",\"children\":\"ETL\"}]]}],[\"$\",\"h3\",null,{\"className\":\"text-2xl font-bold mb-3 text-gray-900 group-hover:text-primary transition-colors leading-snug line-clamp-2\",\"children\":\"ReactFlow Pipeline Flow: Visualizing Data Pipelines and ETL Processes\"}],[\"$\",\"p\",null,{\"className\":\"text-lg text-gray-600 mb-6 line-clamp-3 flex-1 leading-relaxed\",\"children\":\"Build sophisticated data pipeline visualizations with ReactFlow for ETL processes, CI/CD workflows, and data processing systems. Create interactive pipeline diagrams showing data flow, transformation stages, and processing steps with custom node types and validation rules.\"}],[\"$\",\"div\",null,{\"className\":\"flex items-center justify-between gap-4 text-xs font-medium text-gray-500 mt-auto pt-4 border-t border-gray-100\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center gap-1.5\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\"
1:24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-calendar h-3.5 w-3.5 text-gray-400\",\"children\":[[\"$\",\"path\",\"1cmpym\",{\"d\":\"M8 2v4\"}],[\"$\",\"path\",\"4m81vk\",{\"d\":\"M16 2v4\"}],[\"$\",\"rect\",\"1hopcy\",{\"width\":\"18\",\"height\":\"18\",\"x\":\"3\",\"y\":\"4\",\"rx\":\"2\"}],[\"$\",\"path\",\"8toen8\",{\"d\":\"M3 10h18\"}],\"$undefined\"]}],[\"$\",\"time\",null,{\"dateTime\":\"2024-04-05\",\"children\":\"Apr 5, 2024\"}]]}],[\"$\",\"div\",null,{\"className\":\"flex items-center gap-1.5 bg-gray-50 px-2 py-1 rounded-md\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-clock h-3.5 w-3.5 text-gray-400\",\"children\":[[\"$\",\"circle\",\"1mglay\",{\"cx\":\"12\",\"cy\":\"12\",\"r\":\"10\"}],[\"$\",\"polyline\",\"68esgv\",{\"points\":\"12 6 12 12 16 14\"}],\"$undefined\"]}],[\"$\",\"span\",null,{\"children\":[17,\" min\"]}]]}]]}]]}]]}]}],[\"$\",\"$L8\",\"17\",{\"href\":\"/blogs/reactflow-node-intersections-edge-routing\",\"className\":\"block group\",\"children\":[\"$\",\"div\",null,{\"className\":\"text-card-foreground shadow-sm relative overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1 h-full flex flex-col border border-gray-200/60 rounded-2xl bg-white\",\"children\":[[\"$\",\"div\",null,{\"className\":\"relative w-full h-52 bg-gray-100 overflow-hidden\",\"children\":[\"$\",\"$L9\",null,{\"src\":\"/images/reactflow/intersections.png\",\"alt\":\"React Flow Node Intersections: Advanced Edge Routing and Collision Detection\",\"fill\":true,\"className\":\"object-cover transition-transform duration-500 group-hover:scale-105\"}]}],[\"$\",\"div\",null,{\"className\":\"p-6 flex-1 flex flex-col\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-wrap gap-2 mb-4\",\"children\":[[\"$\",\"div\",null,{\"className\":\"inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors\",\"children\":\"Edge Routing\"}],[\"$\",\"div\",null,{\"className\":\"inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors\",\"children\":\"Collision Detection\"}]]}],[\"$\",\"h3\",null,{\"className\":\"text-2xl font-bold mb-3 text-gray-900 group-hover:text-primary transition-colors leading-snug line-clamp-2\",\"children\":\"React Flow Node Intersections: Advanced Edge Routing and Collision Detection\"}],[\"$\",\"p\",null,{\"className\":\"text-lg text-gray-600 mb-6 line-clamp-3 flex-1 leading-relaxed\",\"children\":\"Learn advanced ReactFlow techniques for intelligent edge routing and node intersection detection. Create clean, readable diagrams with automatic edge routing that avoids node overlaps and minimizes visual clutter. Features collision detection and path optimization algorithms.\"}],[\"$\",\"div\",null,{\"className\":\"flex items-center justify-between gap-4 text-xs font-medium text-gray-500 mt-auto pt-4 border-t border-gray-100\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center gap-1.5\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-calendar h-3.5 w-3.5 text-gray-400\",\"children\":[[\"$\",\"path\",\"1cmpym\",{\"d\":\"M8 2v4\"}],[\"$\",\"path\",\"4m81vk\",{\"d\":\"M16 2v4\"}
1],[\"$\",\"rect\",\"1hopcy\",{\"width\":\"18\",\"height\":\"18\",\"x\":\"3\",\"y\":\"4\",\"rx\":\"2\"}],[\"$\",\"path\",\"8toen8\",{\"d\":\"M3 10h18\"}],\"$undefined\"]}],[\"$\",\"time\",null,{\"dateTime\":\"2024-04-01\",\"children\":\"Apr 1, 2024\"}]]}],[\"$\",\"div\",null,{\"className\":\"flex items-center gap-1.5 bg-gray-50 px-2 py-1 rounded-md\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-clock h-3.5 w-3.5 text-gray-400\",\"children\":[[\"$\",\"circle\",\"1mglay\",{\"cx\":\"12\",\"cy\":\"12\",\"r\":\"10\"}],[\"$\",\"polyline\",\"68esgv\",{\"points\":\"12 6 12 12 16 14\"}],\"$undefined\"]}],[\"$\",\"span\",null,{\"children\":[15,\" min\"]}]]}]]}]]}]]}]}],[\"$\",\"$L8\",\"16\",{\"href\":\"/blogs/reactflow-mindmap-interactive-knowledge-maps\",\"className\":\"block group\",\"children\":[\"$\",\"div\",null,{\"className\":\"text-card-foreground shadow-sm relative overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1 h-full flex flex-col border border-gray-200/60 rounded-2xl bg-white\",\"children\":[[\"$\",\"div\",null,{\"className\":\"relative w-full h-52 bg-gray-100 overflow-hidden\",\"children\":[\"$\",\"$L9\",null,{\"src\":\"https://res.cloudinary.com/dcewthzm6/image/upload/v1771996554/reactflow-mindmap_cnbd85.png\",\"alt\":\"React Flow Mindmap: Building Interactive Knowledge Maps with ReactFlow\",\"fill\":true,\"className\":\"object-cover transition-transform duration-500 group-hover:scale-105\"}]}],[\"$\",\"div\",null,{\"className\":\"p-6 flex-1 flex flex-col\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-wrap gap-2 mb-4\",\"children\":[[\"$\",\"div\",null,{\"className\":\"inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors\",\"children\":\"Mindmap\"}],[\"$\",\"div\",null,{\"className\":\"inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors\",\"children\":\"Knowledge Management\"}]]}],[\"$\",\"h3\",null,{\"className\":\"text-2xl font-bold mb-3 text-gray-900 group-hover:text-primary transition-colors leading-snug line-clamp-2\",\"children\":\"React Flow Mindmap: Building Interactive Knowledge Maps with ReactFlow\"}],[\"$\",\"p\",null,{\"className\":\"text-lg text-gray-600 mb-6 line-clamp-3 flex-1 leading-relaxed\",\"children\":\"Create beautiful, interactive mind maps using ReactFlow for brainstorming, note-taking, and knowledge organization. Build hierarchical knowledge structures with drag-and-drop nodes, rich text editing, and customizable styling. Perfect for project planning and collaborative brainstorming.\"}],[\"$\",\"div\",null,{\"className\":\"flex items-center justify-between gap-4 text-xs font-medium text-gray-500 mt-auto pt-4 border-t border-gray-100\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center gap-1.5\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-calendar h-3.5 w-3.5 text-gray-400\",\"children\":[[\"$\",\"path\",\"1cmpym\",{\"d\":\"M8 2v4\"}],[\"$\",\"path\",\"4m81vk\",{\"d\":\"M16 2v4\"}],[\"$\",\"rect\",\"1hopcy\",{\"width\":\"18\",\"height\":\"18\",\"x\":\"3\",\"y\":\"4\",\"rx\":\"2\"}],[\"$\",\"path\",\"8toen8\",{\"d\":\"M3 10h18\"}],\"$undefined\"]}],[\"$\",\"time\",null,{\"dateTime\":\"2024-03-28\",\"children\":\"Mar 28, 2024\"}]]}],[\"$\",\"div\",null,{\"className\":\"flex items-center gap-1.5 bg-gray-50 px-2 py-1 rounded-md\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\"
1:24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-clock h-3.5 w-3.5 text-gray-400\",\"children\":[[\"$\",\"circle\",\"1mglay\",{\"cx\":\"12\",\"cy\":\"12\",\"r\":\"10\"}],[\"$\",\"polyline\",\"68esgv\",{\"points\":\"12 6 12 12 16 14\"}],\"$undefined\"]}],[\"$\",\"span\",null,{\"children\":[14,\" min\"]}]]}]]}]]}]]}]}],[\"$\",\"$L8\",\"15\",{\"href\":\"/blogs/react-flow-neural-network-visualization\",\"className\":\"block group\",\"children\":[\"$\",\"div\",null,{\"className\":\"text-card-foreground shadow-sm relative overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1 h-full flex flex-col border border-gray-200/60 rounded-2xl bg-white\",\"children\":[[\"$\",\"div\",null,{\"className\":\"relative w-full h-52 bg-gray-100 overflow-hidden\",\"children\":[\"$\",\"$L9\",null,{\"src\":\"https://res.cloudinary.com/dcewthzm6/image/upload/v1771996555/neural-network_nkri8r.png\",\"alt\":\"React Flow Neural Network Visualization: Interactive Deep Learning Architecture Diagrams\",\"fill\":true,\"className\":\"object-cover transition-transform duration-500 group-hover:scale-105\"}]}],[\"$\",\"div\",null,{\"className\":\"p-6 flex-1 flex flex-col\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-wrap gap-2 mb-4\",\"children\":[[\"$\",\"div\",null,{\"className\":\"inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors\",\"children\":\"Neural Network\"}],[\"$\",\"div\",null,{\"className\":\"inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors\",\"children\":\"Deep Learning\"}]]}],[\"$\",\"h3\",null,{\"className\":\"text-2xl font-bold mb-3 text-gray-900 group-hover:text-primary transition-colors leading-snug line-clamp-2\",\"children\":\"React Flow Neural Network Visualization: Interactive Deep Learning Architecture Diagrams\"}],[\"$\",\"p\",null,{\"className\":\"text-lg text-gray-600 mb-6 line-clamp-3 flex-1 leading-relaxed\",\"children\":\"Create stunning, interactive visualizations of neural network architectures using ReactFlow. Visualize deep learning models, layer connections, and data flow through neural networks. Perfect for machine learning education, model documentation, and explaining complex AI architectures.\"}],[\"$\",\"div\",null,{\"className\":\"flex items-center justify-between gap-4 text-xs font-medium text-gray-500 mt-auto pt-4 border-t border-gray-100\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center gap-1.5\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-calendar h-3.5 w-3.5 text-gray-400\",\"children\":[[\"$\",\"path\",\"1cmpym\",{\"d\":\"M8 2v4\"}],[\"$\",\"path\",\"4m81vk\",{\"d\":\"M16 2v4\"}],[\"$\",\"rect\",\"1hopcy\",{\"width\":\"18\",\"height\":\"18\",\"x\":\"3\",\"y\":\"4\",\"rx\":\"2\"}],[\"$\",\"path\",\"8toen8\",{\"d\":\"M3 10h18\"}],\"$undefined\"]}],[\"$\",\"time\",null,{\"dateTime\":\"2024-03-25\",\"children\":\"Mar 25, 2024\"}]]}],[\"$\",\"div\",null,{\"className\":\"flex items-center gap-1.5 bg-gray-50 px-2 py-1 rounded-md\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-clock h-3.5 w-3.5 text-gray-400\",\"children\":[[\"$\",\"circle\",\"1mglay\",{\"cx\":\"12\",\"cy\":\"12\",\"r\":\"10\"}],[\"$\",\"polyline\",\"68esgv\",{\"points\":\"12 6 12 12 16 14\"}],\"$undefined\"]}],[\"$\",\"span\",null,{\"children\":[16,\" min\"]}]]}]]}]]}]]}]}],[\"$\",\"$L8\",\"14\",{\"href\":\"/blogs/reactflow-examples-vs-visualflow-examples-ready-implementation\",\"className\":\"block group\",\"children\":[\"$\",\"div\",null,{\"className\":\"text-card-foreground shadow-sm relative overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1 h-full flex flex-col border border-gray-200/60 rounded-2xl bg-white\",\"children\":[[\"$\",\"div\",null,{\"className\":\"relative w-full h-52 bg-gray-100 overflow-hidden\",\"children\":[\"$\",\"$L9\",null,{\"src\":\"/images/reactflow/visualflow.png\",\"alt\":\"React flow examples vs Visualflow examples: which are best for ready to implementation.\",\"fill\":true,\"className\":\"object-cover transition-transform duration-500 group-hover:scale-105\"}]}],[\"$\",\"div\",null,{\"className\":\"p-6 flex-1 flex flex-col\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-wrap gap-2 mb-4\",\"children\":[[\"$\",\"div\",null,{\"className\":\"inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors\",\"children\":\"ReactFlow\"}],[\"$\",\"div\",null,{\"className\":\"inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors\",\"children\":\"VisualFlow\"}]]}],[\"$\",\"h3\",null,{\"className\":\"text-2xl font-bold mb-3 text-gray-900 group-hover:text-primary transition-colors leading-snug line-clamp-2\",\"children\":\"React flow examples vs Visualflow examples: which are best for ready to implementation.\"}],[\"$\",\"p\",null,{\"className\":\"text-lg text-gray-600 mb-6 line-clamp-3 flex-1 leading-relaxed\",\"children\":\"Compare VisualFlow production-ready React Flow examples with building from scratch. Discover how VisualFlow saves 8-12 weeks of development time and $24,000+ in costs while delivering enterprise-grade, production-ready implementations immediately.\"}],[\"$\",\"div\",null,{\"className\":\"flex items-center justify-between gap-4 text-xs font-medium text-gray-500 mt-auto pt-4 border-t border-gray-100\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center gap-1.5\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\"
1:24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-calendar h-3.5 w-3.5 text-gray-400\",\"children\":[[\"$\",\"path\",\"1cmpym\",{\"d\":\"M8 2v4\"}],[\"$\",\"path\",\"4m81vk\",{\"d\":\"M16 2v4\"}],[\"$\",\"rect\",\"1hopcy\",{\"width\":\"18\",\"height\":\"18\",\"x\":\"3\",\"y\":\"4\",\"rx\":\"2\"}],[\"$\",\"path\",\"8toen8\",{\"d\":\"M3 10h18\"}],\"$undefined\"]}],[\"$\",\"time\",null,{\"dateTime\":\"2024-03-20\",\"children\":\"Mar 20, 2024\"}]]}],[\"$\",\"div\",null,{\"className\":\"flex items-center gap-1.5 bg-gray-50 px-2 py-1 rounded-md\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-clock h-3.5 w-3.5 text-gray-400\",\"children\":[[\"$\",\"circle\",\"1mglay\",{\"cx\":\"12\",\"cy\":\"12\",\"r\":\"10\"}],[\"$\",\"polyline\",\"68esgv\",{\"points\":\"12 6 12 12 16 14\"}],\"$undefined\"]}],[\"$\",\"span\",null,{\"children\":[18,\" min\"]}]]}]]}]]}]]}]}],[\"$\",\"$L8\",\"13\",{\"href\":\"/blogs/spiral-layout-graph-visualization\",\"className\":\"block group\",\"children\":[\"$\",\"div\",null,{\"className\":\"text-card-foreground shadow-sm relative overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1 h-full flex flex-col border border-gray-200/60 rounded-2xl bg-white\",\"children\":[[\"$\",\"div\",null,{\"className\":\"relative w-full h-52 bg-gray-100 overflow-hidden\",\"children\":[\"$\",\"$L9\",null,{\"src\":\"https://res.cloudinary.com/dcewthzm6/image/upload/v1771996556/spiral-layout_vxejzk.png\",\"alt\":\"React flow Spiral Layout: Creating Elegant Circular Graph Visualizations\",\"fill\":true,\"className\":\"object-cover transition-transform duration-500 group-hover:scale-105\"}]}],[\"$\",\"div\",null,{\"className\":\"p-6 flex-1 flex flex-col\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-wrap gap-2 mb-4\",\"children\":[[\"$\",\"div\",null,{\"className\":\"inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors\",\"children\":\"Spiral Layout\"}],[\"$\",\"div\",null,{\"className\":\"inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors\",\"children\":\"Graph Visualization\"}]]}],[\"$\",\"h3\",null,{\"className\":\"text-2xl font-bold mb-3 text-gray-900 group-hover:text-primary transition-colors leading-snug line-clamp-2\",\"children\":\"React flow Spiral Layout: Creating Elegant Circular Graph Visualizations\"}],[\"$\",\"p\",null,{\"className\":\"text-lg text-gray-600 mb-6 line-clamp-3 flex-1 leading-relaxed\",\"children\":\"Create stunning spiral-based graph layouts for visualizing hierarchical and circular data. Automatically arrange nodes in elegant spiral patterns with customizable controls. Perfect for organizational charts, family trees, and artistic visualizations.\"}],[\"$\",\"div\",null,{\"className\":\"flex items-center justify-between gap-4 text-xs font-medium text-gray-500 mt-auto pt-4 border-t border-gray-100\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center gap-1.5\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-calendar h-3.5 w-3.5 text-gray-400\",\"children\":[[\"$\",\"path\",\"1cmpym\",{\"d\":\"M8 2v4\"}],[\"$\",\"path\",\"4m81vk\",{\"d\":\"M16 2v4\"}
1],[\"$\",\"rect\",\"1hopcy\",{\"width\":\"18\",\"height\":\"18\",\"x\":\"3\",\"y\":\"4\",\"rx\":\"2\"}],[\"$\",\"path\",\"8toen8\",{\"d\":\"M3 10h18\"}],\"$undefined\"]}],[\"$\",\"time\",null,{\"dateTime\":\"2024-03-15\",\"children\":\"Mar 15, 2024\"}]]}],[\"$\",\"div\",null,{\"className\":\"flex items-center gap-1.5 bg-gray-50 px-2 py-1 rounded-md\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-clock h-3.5 w-3.5 text-gray-400\",\"children\":[[\"$\",\"circle\",\"1mglay\",{\"cx\":\"12\",\"cy\":\"12\",\"r\":\"10\"}],[\"$\",\"polyline\",\"68esgv\",{\"points\":\"12 6 12 12 16 14\"}],\"$undefined\"]}],[\"$\",\"span\",null,{\"children\":[15,\" min\"]}]]}]]}]]}]]}]}],[\"$\",\"$L8\",\"12\",{\"href\":\"/blogs/concept-map-knowledge-visualization\",\"className\":\"block group\",\"children\":[\"$\",\"div\",null,{\"className\":\"text-card-foreground shadow-sm relative overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1 h-full flex flex-col border border-gray-200/60 rounded-2xl bg-white\",\"children\":[[\"$\",\"div\",null,{\"className\":\"relative w-full h-52 bg-gray-100 overflow-hidden\",\"children\":[\"$\",\"$L9\",null,{\"src\":\"/images/reactflow/concept-mind.png\",\"alt\":\"React flow Concept Map: Interactive Knowledge Visualization with ReactFlow\",\"fill\":true,\"className\":\"object-cover transition-transform duration-500 group-hover:scale-105\"}]}],[\"$\",\"div\",null,{\"className\":\"p-6 flex-1 flex flex-col\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-wrap gap-2 mb-4\",\"children\":[[\"$\",\"div\",null,{\"className\":\"inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors\",\"children\":\"Concept Map\"}],[\"$\",\"div\",null,{\"className\":\"inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors\",\"children\":\"Knowledge Visualization\"}]]}],[\"$\",\"h3\",null,{\"className\":\"text-2xl font-bold mb-3 text-gray-900 group-hover:text-primary transition-colors leading-snug line-clamp-2\",\"children\":\"React flow Concept Map: Interactive Knowledge Visualization with ReactFlow\"}],[\"$\",\"p\",null,{\"className\":\"text-lg text-gray-600 mb-6 line-clamp-3 flex-1 leading-relaxed\",\"children\":\"Create interactive concept maps for organizing knowledge and visualizing relationships between ideas. Build hierarchical knowledge structures with drag-and-drop nodes, rich text editing, and custom connections. Perfect for education, research, and knowledge management.\"}],[\"$\",\"div\",null,{\"className\":\"flex items-center justify-between gap-4 text-xs font-medium text-gray-500 mt-auto pt-4 border-t border-gray-100\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center gap-1.5\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-calendar h-3.5 w-3.5 text-gray-400\",\"children\":[[\"$\",\"path\",\"1cmpym\",{\"d\":\"M8 2v4\"}],[\"$\",\"path\",\"4m81vk\",{\"d\":\"M16 2v4\"}],[\"$\",\"rect\",\"1hopcy\",{\"width\":\"18\",\"height\":\"18\",\"x\":\"3\",\"y\":\"4\",\"rx\":\"2\"}],[\"$\",\"path\",\"8toen8\",{\"d\":\"M3 10h18\"}],\"$undefined\"]}],[\"$\",\"time\",null,{\"dateTime\":\"2024-03-10\",\"children\":\"Mar 10, 2024\"}]]}],[\"$\",\"div\",null,{\"className\":\"flex items-center gap-1.5 bg-gray-50 px-2 py-1 rounded-md\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\"
1:24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-clock h-3.5 w-3.5 text-gray-400\",\"children\":[[\"$\",\"circle\",\"1mglay\",{\"cx\":\"12\",\"cy\":\"12\",\"r\":\"10\"}],[\"$\",\"polyline\",\"68esgv\",{\"points\":\"12 6 12 12 16 14\"}],\"$undefined\"]}],[\"$\",\"span\",null,{\"children\":[14,\" min\"]}]]}]]}]]}]]}]}],[\"$\",\"$L8\",\"11\",{\"href\":\"/blogs/multi-color-graph-visualization\",\"className\":\"block group\",\"children\":[\"$\",\"div\",null,{\"className\":\"text-card-foreground shadow-sm relative overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1 h-full flex flex-col border border-gray-200/60 rounded-2xl bg-white\",\"children\":[[\"$\",\"div\",null,{\"className\":\"relative w-full h-52 bg-gray-100 overflow-hidden\",\"children\":[\"$\",\"$L9\",null,{\"src\":\"https://res.cloudinary.com/dcewthzm6/image/upload/v1771996556/multi-color_f65zhg.png\",\"alt\":\"React flow Multi-Color Graph Visualization: Creating Vibrant Network Diagrams\",\"fill\":true,\"className\":\"object-cover transition-transform duration-500 group-hover:scale-105\"}]}],[\"$\",\"div\",null,{\"className\":\"p-6 flex-1 flex flex-col\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-wrap gap-2 mb-4\",\"children\":[[\"$\",\"div\",null,{\"className\":\"inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors\",\"children\":\"Multi-Color\"}],[\"$\",\"div\",null,{\"className\":\"inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors\",\"children\":\"Graph Visualization\"}]]}],[\"$\",\"h3\",null,{\"className\":\"text-2xl font-bold mb-3 text-gray-900 group-hover:text-primary transition-colors leading-snug line-clamp-2\",\"children\":\"React flow Multi-Color Graph Visualization: Creating Vibrant Network Diagrams\"}],[\"$\",\"p\",null,{\"className\":\"text-lg text-gray-600 mb-6 line-clamp-3 flex-1 leading-relaxed\",\"children\":\"Create vibrant, visually distinct network diagrams with advanced color management. Color-code nodes by categories, status, or data attributes. Features custom themes, gradient edges, and interactive color pickers for professional, eye-catching visualizations.\"}],[\"$\",\"div\",null,{\"className\":\"flex items-center justify-between gap-4 text-xs font-medium text-gray-500 mt-auto pt-4 border-t border-gray-100\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center gap-1.5\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-calendar h-3.5 w-3.5 text-gray-400\",\"children\":[[\"$\",\"path\",\"1cmpym\",{\"d\":\"M8 2v4\"}],[\"$\",\"path\",\"4m81vk\",{\"d\":\"M16 2v4\"}],[\"$\",\"rect\",\"1hopcy\",{\"width\":\"18\",\"height\":\"18\",\"x\":\"3\",\"y\":\"4\",\"rx\":\"2\"}],[\"$\",\"path\",\"8toen8\",{\"d\":\"M3 10h18\"}],\"$undefined\"]}],[\"$\",\"time\",null,{\"dateTime\":\"2024-03-05\",\"children\":\"Mar 5, 2024\"}]]}],[\"$\",\"div\",null,{\"className\":\"flex items-center gap-1.5 bg-gray-50 px-2 py-1 rounded-md\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-clock h-3.5 w-3.5 text-gray-400\",\"children\":[[\"$\",\"circle\",\"1mglay\",{\"cx\":\"12\",\"cy\":\"12\",\"r\":\"10\"}],[\"$\",\"polyline\",\"68esgv\",{\"points\":\"12 6 12 12 16 14\"}],\"$undefined\"]}],[\"$\",\"span\",null,{\"children\":[16,\" min\"]}]]}]]}]]}]]}]}],[\"$\",\"$L8\",\"10\",{\"href\":\"/blogs/force-directed-layout-graph-visualization\",\"className\":\"block group\",\"children\":[\"$\",\"div\",null,{\"className\":\"text-card-foreground shadow-sm relative overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1 h-full flex flex-col border border-gray-200/60 rounded-2xl bg-white\",\"children\":[[\"$\",\"div\",null,{\"className\":\"relative w-full h-52 bg-gray-100 overflow-hidden\",\"children\":[\"$\",\"$L9\",null,{\"src\":\"/images/reactflow/force-layout.png\",\"alt\":\"React flow Force-Directed Layout: Advanced Graph Visualization with ReactFlow\",\"fill\":true,\"className\":\"object-cover transition-transform duration-500 group-hover:scale-105\"}]}],[\"$\",\"div\",null,{\"className\":\"p-6 flex-1 flex flex-col\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-wrap gap-2 mb-4\",\"children\":[[\"$\",\"div\",null,{\"className\":\"inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors\",\"children\":\"Force-Directed Layout\"}],[\"$\",\"div\",null,{\"className\":\"inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors\",\"children\":\"Graph Visualization\"}]]}],[\"$\",\"h3\",null,{\"className\":\"text-2xl font-bold mb-3 text-gray-900 group-hover:text-primary transition-colors leading-snug line-clamp-2\",\"children\":\"React flow Force-Directed Layout: Advanced Graph Visualization with ReactFlow\"}],[\"$\",\"p\",null,{\"className\":\"text-lg text-gray-600 mb-6 line-clamp-3 flex-1 leading-relaxed\",\"children\":\"Create beautiful, interactive network diagrams with physics-based force-directed layout algorithms. Automatically arrange nodes using simulation that minimizes edge crossings and reveals natural cluster
1s. Perfect for social networks, organizational charts, and complex relationship visualizations.\"}],[\"$\",\"div\",null,{\"className\":\"flex items-center justify-between gap-4 text-xs font-medium text-gray-500 mt-auto pt-4 border-t border-gray-100\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center gap-1.5\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-calendar h-3.5 w-3.5 text-gray-400\",\"children\":[[\"$\",\"path\",\"1cmpym\",{\"d\":\"M8 2v4\"}],[\"$\",\"path\",\"4m81vk\",{\"d\":\"M16 2v4\"}],[\"$\",\"rect\",\"1hopcy\",{\"width\":\"18\",\"height\":\"18\",\"x\":\"3\",\"y\":\"4\",\"rx\":\"2\"}],[\"$\",\"path\",\"8toen8\",{\"d\":\"M3 10h18\"}],\"$undefined\"]}],[\"$\",\"time\",null,{\"dateTime\":\"2024-03-01\",\"children\":\"Mar 1, 2024\"}]]}],[\"$\",\"div\",null,{\"className\":\"flex items-center gap-1.5 bg-gray-50 px-2 py-1 rounded-md\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-clock h-3.5 w-3.5 text-gray-400\",\"children\":[[\"$\",\"circle\",\"1mglay\",{\"cx\":\"12\",\"cy\":\"12\",\"r\":\"10\"}],[\"$\",\"polyline\",\"68esgv\",{\"points\":\"12 6 12 12 16 14\"}],\"$undefined\"]}],[\"$\",\"span\",null,{\"children\":[18,\" min\"]}]]}]]}]]}]]}]}],[\"$\",\"$L8\",\"9\",{\"href\":\"/blogs/production-process-editor-industrial-workflows\",\"className\":\"block group\",\"children\":[\"$\",\"div\",null,{\"className\":\"text-card-foreground shadow-sm relative overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1 h-full flex flex-col border border-gray-200/60 rounded-2xl bg-white\",\"children\":[[\"$\",\"div\",null,{\"className\":\"relative w-full h-52 bg-gray-100 overflow-hidden\",\"children\":[\"$\",\"$L9\",null,{\"src\":\"/images/reactflow/production.png\",\"alt\":\"Production Process Editor: Designing Industrial Workflows with React flow\",\"fill\":true,\"className\":\"object-cover transition-transform duration-500 group-hover:scale-105\"}]}],[\"$\",\"div\",null,{\"className\":\"p-6 flex-1 flex flex-col\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-wrap gap-2 mb-4\",\"children\":[[\"$\",\"div\",null,{\"className\":\"inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors\",\"children\":\"Production Process\"}],[\"$\",\"div\",null,{\"className\":\"inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors\",\"children\":\"Manufacturing\"}]]}],[\"$\",\"h3\",null,{\"className\":\"text-2xl font-bold mb-3 text-gray-900 group-hover:text-primary transition-colors leading-snug line-clamp-2\",\"children\":\"Production Process Editor: Designing Industrial Workflows with React flow\"}],[\"$\",\"p\",null,{\"className\":\"text-lg text-gray-600 mb-6 line-clamp-3 flex-1 leading-relaxed\",\"children\":\"Create professional production process diagrams with drag-and-drop interface. Design manufacturing workflows with palette-based nodes, port connections, and property inspectors for industrial process visualization.\"}],[\"$\",\"div\",null,{\"className\":\"flex items-center justify-between gap-4 text-xs font-medium text-gray-500 mt-auto pt-4 border-t border-gray-100\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center gap-1.5\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\"
1:24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-calendar h-3.5 w-3.5 text-gray-400\",\"children\":[[\"$\",\"path\",\"1cmpym\",{\"d\":\"M8 2v4\"}],[\"$\",\"path\",\"4m81vk\",{\"d\":\"M16 2v4\"}],[\"$\",\"rect\",\"1hopcy\",{\"width\":\"18\",\"height\":\"18\",\"x\":\"3\",\"y\":\"4\",\"rx\":\"2\"}],[\"$\",\"path\",\"8toen8\",{\"d\":\"M3 10h18\"}],\"$undefined\"]}],[\"$\",\"time\",null,{\"dateTime\":\"2024-02-25\",\"children\":\"Feb 25, 2024\"}]]}],[\"$\",\"div\",null,{\"className\":\"flex items-center gap-1.5 bg-gray-50 px-2 py-1 rounded-md\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-clock h-3.5 w-3.5 text-gray-400\",\"children\":[[\"$\",\"circle\",\"1mglay\",{\"cx\":\"12\",\"cy\":\"12\",\"r\":\"10\"}],[\"$\",\"polyline\",\"68esgv\",{\"points\":\"12 6 12 12 16 14\"}],\"$undefined\"]}],[\"$\",\"span\",null,{\"children\":[16,\" min\"]}]]}]]}]]}]]}]}],[\"$\",\"$L8\",\"8\",{\"href\":\"/blogs/reactflow-performance-optimization\",\"className\":\"block group\",\"children\":[\"$\",\"div\",null,{\"className\":\"text-card-foreground shadow-sm relative overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1 h-full flex flex-col border border-gray-200/60 rounded-2xl bg-white\",\"children\":[[\"$\",\"div\",null,{\"className\":\"relative w-full h-52 bg-gray-100 overflow-hidden\",\"children\":[\"$\",\"$L9\",null,{\"src\":\"/images/reactflow/e-render.png\",\"alt\":\"React Flow Performance Optimization Techniques\",\"fill\":true,\"className\":\"object-cover transition-transform duration-500 group-hover:scale-105\"}]}],[\"$\",\"div\",null,{\"className\":\"p-6 flex-1 flex flex-col\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-wrap gap-2 mb-4\",\"children\":[[\"$\",\"div\",null,{\"className\":\"inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors\",\"children\":\"ReactFlow\"}],[\"$\",\"div\",null,{\"className\":\"inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors\",\"children\":\"Performance\"}]]}],[\"$\",\"h3\",null,{\"className\":\"text-2xl font-bold mb-3 text-gray-900 group-hover:text-primary transition-colors leading-snug line-clamp-2\",\"children\":\"React Flow Performance Optimization Techniques\"}],[\"$\",\"p\",null,{\"className\":\"text-lg text-gray-600 mb-6 line-clamp-3 flex-1 leading-relaxed\",\"children\":\"Learn advanced techniques to optimize React Flow performance. Handle large diagrams with thousands of nodes efficiently.\"}],[\"$\",\"div\",null,{\"className\":\"flex items-center justify-between gap-4 text-xs font-medium text-gray-500 mt-auto pt-4 border-t border-gray-100\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center gap-1.5\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-calendar h-3.5 w-3.5 text-gray-400\",\"children\":[[\"$\",\"path\",\"1cmpym\",{\"d\":\"M8 2v4\"}],[\"$\",\"path\",\"4m81vk\",{\"d\":\"M16 2v4\"}],[\"$\",\"rect\",\"1hopcy\",{\"width\":\"18\",\"height\":\"18\",\"x\":\"3\",\"y\":\"4\",\"rx\":\"2\"}],[\"$\",\"path\",\"8toen8\",{\"d\":\"M3 10h18\"}],\"$undefined\"]}],[\"$\",\"time\",null,{\"dateTime\":\"2024-02-20\",\"children\":\"Feb 20, 2024\"}]]}],[\"$\",\"div\",null,{\"className\":\"flex items-center gap-1.5 bg-gray-50 px-2 py-1 rounded-md\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\"
1:24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-clock h-3.5 w-3.5 text-gray-400\",\"children\":[[\"$\",\"circle\",\"1mglay\",{\"cx\":\"12\",\"cy\":\"12\",\"r\":\"10\"}],[\"$\",\"polyline\",\"68esgv\",{\"points\":\"12 6 12 12 16 14\"}],\"$undefined\"]}],[\"$\",\"span\",null,{\"children\":[13,\" min\"]}]]}]]}]]}]]}]}],[\"$\",\"$L8\",\"7\",{\"href\":\"/blogs/building-ai-agents-visual-flow-builders\",\"className\":\"block group\",\"children\":[\"$\",\"div\",null,{\"className\":\"text-card-foreground shadow-sm relative overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1 h-full flex flex-col border border-gray-200/60 rounded-2xl bg-white\",\"children\":[[\"$\",\"div\",null,{\"className\":\"relative w-full h-52 bg-gray-100 overflow-hidden\",\"children\":[\"$\",\"$L9\",null,{\"src\":\"https://res.cloudinary.com/dcewthzm6/image/upload/v1771996553/langflow_drzwzq.png\",\"alt\":\"React flow Building AI Agents with Visual Flow Builders\",\"fill\":true,\"className\":\"object-cover transition-transform duration-500 group-hover:scale-105\"}]}],[\"$\",\"div\",null,{\"className\":\"p-6 flex-1 flex flex-col\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-wrap gap-2 mb-4\",\"children\":[[\"$\",\"div\",null,{\"className\":\"inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors\",\"children\":\"AI Agent\"}],[\"$\",\"div\",null,{\"className\":\"inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors\",\"children\":\"LLM\"}]]}],[\"$\",\"h3\",null,{\"className\":\"text-2xl font-bold mb-3 text-gray-900 group-hover:text-primary transition-colors leading-snug line-clamp-2\",\"children\":\"React flow Building AI Agents with Visual Flow Builders\"}],[\"$\",\"p\",null,{\"className\":\"text-lg text-gray-600 mb-6 line-clamp-3 flex-1 leading-relaxed\",\"children\":\"Create sophisticated AI agents and LLM-powered applications using visual flow builders. Design AI workflows without extensive coding.\"}],[\"$\",\"div\",null,{\"className\":\"flex items-center justify-between gap-4 text-xs font-medium text-gray-500 mt-auto pt-4 border-t border-gray-100\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center gap-1.5\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-calendar h-3.5 w-3.5 text-gray-400\",\"children\":[[\"$\",\"path\",\"1cmpym\",{\"d\":\"M8 2v4\"}],[\"$\",\"path\",\"4m81vk\",{\"d\":\"M16 2v4\"}],[\"$\",\"rect\",\"1hopcy\",{\"width\":\"18\",\"height\":\"18\",\"x\":\"3\",\"y\":\"4\",\"rx\":\"2\"}],[\"$\",\"path\",\"8toen8\",{\"d\":\"M3 10h18\"}],\"$undefined\"]}],[\"$\",\"time\",null,{\"dateTime\":\"2024-02-15\",\"children\":\"Feb 15, 2024\"}]]}],[\"$\",\"div\",null,{\"className\":\"flex items-center gap-1.5 bg-gray-50 px-2 py-1 rounded-md\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-clock h-3.5 w-3.5 text-gray-400\",\"children\":[[\"$\",\"circle\",\"1mglay\",{\"cx\":\"12\",\"cy\":\"12\",\"r\":\"10\"}],[\"$\",\"polyline\",\"68esgv\",{\"points\":\"12 6 12 12 16 14\"}],\"$undefined\"]}],[\"$\",\"span\",null,{\"children\":[20,\" min\"]}]]}]]}]]}]]}]}],[\"$\",\"$L8\",\"6\",{\"href\":\"/blogs/n8n-builder-advanced-wor
1kflow-automation\",\"className\":\"block group\",\"children\":[\"$\",\"div\",null,{\"className\":\"text-card-foreground shadow-sm relative overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1 h-full flex flex-col border border-gray-200/60 rounded-2xl bg-white\",\"children\":[[\"$\",\"div\",null,{\"className\":\"relative w-full h-52 bg-gray-100 overflow-hidden\",\"children\":[\"$\",\"$L9\",null,{\"src\":\"/images/reactflow/automation-flow.jpg\",\"alt\":\"React flow n8n Builder: Advanced Workflow Automation\",\"fill\":true,\"className\":\"object-cover transition-transform duration-500 group-hover:scale-105\"}]}],[\"$\",\"div\",null,{\"className\":\"p-6 flex-1 flex flex-col\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-wrap gap-2 mb-4\",\"children\":[[\"$\",\"div\",null,{\"className\":\"inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors\",\"children\":\"n8n\"}],[\"$\",\"div\",null,{\"className\":\"inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors\",\"children\":\"Automation\"}]]}],[\"$\",\"h3\",null,{\"className\":\"text-2xl font-bold mb-3 text-gray-900 group-hover:text-primary transition-colors leading-snug line-clamp-2\",\"children\":\"React flow n8n Builder: Advanced Workflow Automation\"}],[\"$\",\"p\",null,{\"className\":\"text-lg text-gray-600 mb-6 line-clamp-3 flex-1 leading-relaxed\",\"children\":\"Learn how to build complex automation workflows with n8n builder. Create sophisticated integrations and data pipelines.\"}],[\"$\",\"div\",null,{\"className\":\"flex items-center justify-between gap-4 text-xs font-medium text-gray-500 mt-auto pt-4 border-t border-gray-100\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center gap-1.5\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-calendar h-3.5 w-3.5 text-gray-400\",\"children\":[[\"$\",\"path\",\"1cmpym\",{\"d\":\"M8 2v4\"}],[\"$\",\"path\",\"4m81vk\",{\"d\":\"M16 2v4\"}],[\"$\",\"rect\",\"1hopcy\",{\"width\":\"18\",\"height\":\"18\",\"x\":\"3\",\"y\":\"4\",\"rx\":\"2\"}],[\"$\",\"path\",\"8toen8\",{\"d\":\"M3 10h18\"}],\"$undefined\"]}],[\"$\",\"time\",null,{\"dateTime\":\"2024-02-10\",\"children\":\"Feb 10, 2024\"}]]}],[\"$\",\"div\",null,{\"className\":\"flex items-center gap-1.5 bg-gray-50 px-2 py-1 rounded-md\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-clock h-3.5 w-3.5 text-gray-400\",\"children\":[[\"$\",\"circle\",\"1mglay\",{\"cx\":\"12\",\"cy\":\"12\",\"r\":\"10\"}],[\"$\",\"polyline\",\"68esgv\",{\"points\":\"12 6 12 12 16 14\"}],\"$undefined\"]}],[\"$\",\"span\",null,{\"children\":[17,\" min\"]}]]}]]}]]}]]}]}],[\"$\",\"$L8\",\"5\",{\"href\":\"/blogs/zapier-integration-visual-automation\",\"className\":\"block group\",\"children\":[\"$\",\"div\",null,{\"className\":\"text-card-foreground shadow-sm relative overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1 h-full flex flex-col border border-gray-200/60 rounded-2xl bg-white\",\"children\":[[\"$\",\"div\",null,{\"className\":\"relative w-full h-52 bg-gray-100 overflow-hidden\",\"children\":[\"$\",\"$L9\",null,{\"src\":\"https://res.cloudinary.com/dcewthzm6/image/upload/v1771996562/zapierFlow_ul6dwo.png\",\"alt\":\"React flow Zapier Integration: Building Visual Automation Workflows\",\"fill\":true,\"className\":\"object-cover transition-transform duration-500 group-hover:scale-105\"}]}],[\"$\",\"div\",null,{\"className\":\"p-6 flex-1 flex flex-col\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-wrap gap-2 mb-4\",\"children\":[[\"$\",\"div\",null,{\"className\":\"inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors\",\"children\":\"Zapier\"}],[\"$\",\"div\",null,{\"className\":\"inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors\",\"children\":\"Automation\"}]]}],[\"$\",\"h3\",null,{\"className\":\"text-2xl font-bold mb-3 text-gray-900 group-hover:text-primary transition-colors leading-snug line-clamp-2\",\"children\":\"React flow Zapier Integration: Building Visual Automation Workflows\"}],[\"$\",\"p\",null,{\"className\":\"text-lg text-gray-600 mb-6 line-clamp-3 flex-1 leading-relaxed\",\"children\":\"Automate workflows with 
1native Zapier integration. Design sophisticated workflows with branches, filters, and error handling.\"}],[\"$\",\"div\",null,{\"className\":\"flex items-center justify-between gap-4 text-xs font-medium text-gray-500 mt-auto pt-4 border-t border-gray-100\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center gap-1.5\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-calendar h-3.5 w-3.5 text-gray-400\",\"children\":[[\"$\",\"path\",\"1cmpym\",{\"d\":\"M8 2v4\"}],[\"$\",\"path\",\"4m81vk\",{\"d\":\"M16 2v4\"}],[\"$\",\"rect\",\"1hopcy\",{\"width\":\"18\",\"height\":\"18\",\"x\":\"3\",\"y\":\"4\",\"rx\":\"2\"}],[\"$\",\"path\",\"8toen8\",{\"d\":\"M3 10h18\"}],\"$undefined\"]}],[\"$\",\"time\",null,{\"dateTime\":\"2024-02-05\",\"children\":\"Feb 5, 2024\"}]]}],[\"$\",\"div\",null,{\"className\":\"flex items-center gap-1.5 bg-gray-50 px-2 py-1 rounded-md\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-clock h-3.5 w-3.5 text-gray-400\",\"children\":[[\"$\",\"circle\",\"1mglay\",{\"cx\":\"12\",\"cy\":\"12\",\"r\":\"10\"}],[\"$\",\"polyline\",\"68esgv\",{\"points\":\"12 6 12 12 16 14\"}],\"$undefined\"]}],[\"$\",\"span\",null,{\"children\":[16,\" min\"]}]]}]]}]]}]]}]}],[\"$\",\"$L8\",\"4\",{\"href\":\"/blogs/creating-chatbots-landbot-builder\",\"className\":\"block group\",\"children\":[\"$\",\"div\",null,{\"className\":\"text-card-foreground shadow-sm relative overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1 h-full flex flex-col border border-gray-200/60 rounded-2xl bg-white\",\"children\":[[\"$\",\"div\",null,{\"className\":\"relative w-full h-52 bg-gray-100 overflow-hidden\",\"children\":[\"$\",\"$L9\",null,{\"src\":\"/images/reactflow/landbot.png\",\"alt\":\"React flow Creating Chatbots with Landbot Builder\",\"fill\":true,\"className\":\"object-cover transition-transform duration-500 group-hover:scale-105\"}]}],[\"$\",\"div\",null,{\"className\":\"p-6 flex-1 flex flex-col\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-wrap gap-2 mb-4\",\"children\":[[\"$\",\"div\",null,{\"className\":\"inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors\",\"children\":\"Landbot\"}],[\"$\",\"div\",null,{\"className\":\"inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors\",\"children\":\"Chatbots\"}]]}],[\"$\",\"h3\",null,{\"className\":\"text-2xl font-bold mb-3 text-gray-900 group-hover:text-primary transition-colors leading-snug line-clamp-2\",\"children\":\"React flow Creating Chatbots with Landbot Builder\"}],[\"$\",\"p\",null,{\"className\":\"text-lg text-gray-600 mb-6 line-clamp-3 flex-1 leading-relaxed\",\"children\":\"Build sophisticated chatbot conversation flows using visual interface. Design chatbot interactions through intuitive drag-and-drop.\"}],[\"$\",\"div\",null,{\"className\":\"flex items-center justify-between gap-4 text-xs font-medium text-gray-500 mt-auto pt-4 border-t border-gray-100\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center gap-1.5\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-calendar h-3.5 w-3.5 text-gray-400\",\"children\":[[\"$\",\"path\",\"1cmpym\",{\"d\":\"M8 2v4\"}],[\"$\",\"path\",\"4m81vk\",{\"d\":\"M16 2v4\"}
1],[\"$\",\"rect\",\"1hopcy\",{\"width\":\"18\",\"height\":\"18\",\"x\":\"3\",\"y\":\"4\",\"rx\":\"2\"}],[\"$\",\"path\",\"8toen8\",{\"d\":\"M3 10h18\"}],\"$undefined\"]}],[\"$\",\"time\",null,{\"dateTime\":\"2024-02-01\",\"children\":\"Feb 1, 2024\"}]]}],[\"$\",\"div\",null,{\"className\":\"flex items-center gap-1.5 bg-gray-50 px-2 py-1 rounded-md\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-clock h-3.5 w-3.5 text-gray-400\",\"children\":[[\"$\",\"circle\",\"1mglay\",{\"cx\":\"12\",\"cy\":\"12\",\"r\":\"10\"}],[\"$\",\"polyline\",\"68esgv\",{\"points\":\"12 6 12 12 16 14\"}],\"$undefined\"]}],[\"$\",\"span\",null,{\"children\":[14,\" min\"]}]]}]]}]]}]]}]}],[\"$\",\"$L8\",\"3\",{\"href\":\"/blogs/jointjs-vs-gojs-vs-reactflow-comparison\",\"className\":\"block group\",\"children\":[\"$\",\"div\",null,{\"className\":\"text-card-foreground shadow-sm relative overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1 h-full flex flex-col border border-gray-200/60 rounded-2xl bg-white\",\"children\":[[\"$\",\"div\",null,{\"className\":\"relative w-full h-52 bg-gray-100 overflow-hidden\",\"children\":[\"$\",\"$L9\",null,{\"src\":\"/images/reactflow/flowAspects.png\",\"alt\":\"JointJS vs GoJS vs ReactFlow: A Comprehensive Comparison\",\"fill\":true,\"className\":\"object-cover transition-transform duration-500 group-hover:scale-105\"}]}],[\"$\",\"div\",null,{\"className\":\"p-6 flex-1 flex flex-col\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-wrap gap-2 mb-4\",\"children\":[[\"$\",\"div\",null,{\"className\":\"inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors\",\"children\":\"JointJS\"}],[\"$\",\"div\",null,{\"className\":\"inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors\",\"children\":\"GoJS\"}]]}],[\"$\",\"h3\",null,{\"className\":\"text-2xl font-bold mb-3 text-gray-900 group-hover:text-primary transition-colors leading-snug line-clamp-2\",\"children\":\"JointJS vs GoJS vs ReactFlow: A Comprehensive Comparison\"}],[\"$\",\"p\",null,{\"className\":\"text-lg text-gray-600 mb-6 line-clamp-3 flex-1 leading-relaxed\",\"children\":\"Compare the top diagramming libraries: JointJS, GoJS, and ReactFlow. Understand their strengths, weaknesses, and use cases.\"}],[\"$\",\"div\",null,{\"className\":\"flex items-center justify-between gap-4 text-xs font-medium text-gray-500 mt-auto pt-4 border-t border-gray-100\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center gap-1.5\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-calendar h-3.5 w-3.5 text-gray-400\",\"children\":[[\"$\",\"path\",\"1cmpym\",{\"d\":\"M8 2v4\"}],[\"$\",\"path\",\"4m81vk\",{\"d\":\"M16 2v4\"}],[\"$\",\"rect\",\"1hopcy\",{\"width\":\"18\",\"height\":\"18\",\"x\":\"3\",\"y\":\"4\",\"rx\":\"2\"}],[\"$\",\"path\",\"8toen8\",{\"d\":\"M3 10h18\"}],\"$undefined\"]}],[\"$\",\"time\",null,{\"dateTime\":\"2024-01-25\",\"children\":\"Jan 25, 2024\"}]]}],[\"$\",\"div\",null,{\"className\":\"flex items-center gap-1.5 bg-gray-50 px-2 py-1 rounded-md\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-clock h-3.5 w-3.5 text-gray-400\",\"children\":[[\"$\",\"circle\",\"1mglay\",{\"cx\":\"12\",\"cy\":\"12\",\"r\":\"10\"}],[\"$\",\"polyline\",\"68esgv\",{\"points\":\"12 6 12 12 16 14\"}],\"$undefined\"]}],[\"$\",\"span\",null,{\"children\":[18,\" min\"]}]]}]]}]]}]]}]}],[\"$\",\"$L8\",\"2\",{\"href\":\"/blogs/building-automation-workflows-klaviyo\",\"className\":\"block group\",\"children\":[\"$\",\"div\",null,{\"className\":\"text-card-foreground shadow-sm relative overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1 h-full flex flex-col border border-gray-200/60 rounded-2xl bg-white\",\"children\":[[\"$\",\"div\",null,{\"className\":\"relative w-full h-52 bg-gray-100 overflow-hidden\",\"children\":[\"$\",\"$L9\",null,{\"src\":\"/images/reactflow/klaviyo.png\",\"alt\":\"React flow: Building Automation Workflows with Klaviyo Flow\",\"fill\":true,\"className\":\"object-cover transition-transform duration-500 group-hover:scale-105\"}]}],[\"$\",\"div\",null,{\"className\":\"p-6 flex-1 flex flex-col\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-wrap gap-2 mb-4\",\"children\":[[\"$\",\"div\",null,{\"className\":\"inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors\",\"children\":\"Klaviyo\"}],[\"$\",\"div\",null,{\"className\":\"inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors\",\"children\":\"Marketing Automation\"}]]}],[\"$\",\"h3\",null,{\"className\":\"text-2xl font-bold mb-3 text-gray-900 group-hover:text-primary transition-colors leading-snug line-clamp-2\",\"children\":\"React flow: Building Automation Workflows with Klaviyo Flow\"}],[\"$\",\"p\",null,{\"className\":\"text-lg text-gray-600 mb-6 line-clamp-3 flex-1 leading-relaxed\",\"children\":\"React flow create sophisticated marketing automation flows with Klaviyo integration. Design complete customer journeys from welcome series to abandoned cart recovery.\"}],[\"$\",\"div\",null,{\"className\":\"flex items-center justify-between gap-4 text-xs font-medium text-gray-500 mt-auto pt-4 border-t border-gray-100\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center gap-1.5\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\"
1:24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-calendar h-3.5 w-3.5 text-gray-400\",\"children\":[[\"$\",\"path\",\"1cmpym\",{\"d\":\"M8 2v4\"}],[\"$\",\"path\",\"4m81vk\",{\"d\":\"M16 2v4\"}],[\"$\",\"rect\",\"1hopcy\",{\"width\":\"18\",\"height\":\"18\",\"x\":\"3\",\"y\":\"4\",\"rx\":\"2\"}],[\"$\",\"path\",\"8toen8\",{\"d\":\"M3 10h18\"}],\"$undefined\"]}],[\"$\",\"time\",null,{\"dateTime\":\"2024-01-20\",\"children\":\"Jan 20, 2024\"}]]}],[\"$\",\"div\",null,{\"className\":\"flex items-center gap-1.5 bg-gray-50 px-2 py-1 rounded-md\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-clock h-3.5 w-3.5 text-gray-400\",\"children\":[[\"$\",\"circle\",\"1mglay\",{\"cx\":\"12\",\"cy\":\"12\",\"r\":\"10\"}],[\"$\",\"polyline\",\"68esgv\",{\"points\":\"12 6 12 12 16 14\"}],\"$undefined\"]}],[\"$\",\"span\",null,{\"children\":[15,\" min\"]}]]}]]}]]}]]}]}],[\"$\",\"$L8\",\"1\",{\"href\":\"/blogs/getting-started-with-react-flow\",\"className\":\"block group\",\"children\":[\"$\",\"div\",null,{\"className\":\"text-card-foreground shadow-sm relative overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1 h-full flex flex-col border border-gray-200/60 rounded-2xl bg-white\",\"children\":[[\"$\",\"div\",null,{\"className\":\"relative w-full h-52 bg-gray-100 overflow-hidden\",\"children\":[\"$\",\"$L9\",null,{\"src\":\"/images/reactflow/project5.png\",\"alt\":\"Getting Started with React Flow: A Complete Guide\",\"fill\":true,\"className\":\"object-cover transition-transform duration-500 group-hover:scale-105\"}]}],[\"$\",\"div\",null,{\"className\":\"p-6 flex-1 flex flex-col\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-wrap gap-2 mb-4\",\"children\":[[\"$\",\"div\",null,{\"className\":\"inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors\",\"children\":\"ReactFlow\"}],[\"$\",\"div\",null,{\"className\":\"inline-flex items-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-[10px] uppercase tracking-wider font-bold px-2.5 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 border-0 rounded-md transition-colors\",\"children\":\"React\"}]]}],[\"$\",\"h3\",null,{\"className\":\"text-2xl font-bold mb-3 text-gray-900 group-hover:text-primary transition-colors leading-snug line-clamp-2\",\"children\":\"Getting Started with React Flow: A Complete Guide\"}],[\"$\",\"p\",null,{\"className\":\"text-lg text-gray-600 mb-6 line-clamp-3 flex-1 leading-relaxed\",\"children\":\"Learn all essential concepts about React Flow. You're new to the topic? This React Flow tutorial will get you started!\"}],[\"$\",\"div\",null,{\"className\":\"flex items-center justify-between gap-4 text-xs font-medium text-gray-500 mt-auto pt-4 border-t border-gray-100\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center gap-1.5\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-calendar h-3.5 w-3.5 text-gray-400\",\"children\":[[\"$\",\"path\",\"1cmpym\",{\"d\":\"M8 2v4\"}],[\"$\",\"path\",\"4m81vk\",{\"d\":\"M16 2v4\"}],[\"$\",\"rect\",\"1hopcy\",{\"width\":\"18\",\"height\":\"18\",\"x\":\"3\",\"y\":\"4\",\"rx\":\"2\"}],[\"$\",\"path\",\"8toen8\",{\"d\":\"M3 10h18\"}],\"$undefined\"]}],[\"$\",\"time\",null,{\"dateTime\":\"2024-01-15\",\"children\":\"Jan 15, 2024\"}]]}],[\"$\",\"div\",null,{\"className\":\"flex items-center gap-1.5 bg-gray-50 px-2 py-1 rounded-md\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\"
1:24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-clock h-3.5 w-3.5 text-gray-400\",\"children\":[[\"$\",\"circle\",\"1mglay\",{\"cx\":\"12\",\"cy\":\"12\",\"r\":\"10\"}],[\"$\",\"polyline\",\"68esgv\",{\"points\":\"12 6 12 12 16 14\"}],\"$undefined\"]}],[\"$\",\"span\",null,{\"children\":[12,\" min\"]}]]}]]}]]}]]}]}]]}]}],[\"$\",\"section\",null,{\"className\":\"mt-24 pt-12 border-t border-gray-200\",\"children\":[[\"$\",\"h2\",null,{\"className\":\"text-2xl font-bold mb-6 text-center text-gray-900 font-display\",\"children\":\"Explore by Topic\"}],[\"$\",\"div\",null,{\"className\":\"flex flex-wrap justify-center gap-3 max-w-4xl mx-auto\",\"children\":[[\"$\",\"$L8\",\"0\",{\"href\":\"/blogs?tag=3D%20Editor\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"3D Editor\"]}]}],[\"$\",\"$L8\",\"1\",{\"href\":\"/blogs?tag=3D%20Visualization\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"3D Visualization\"]}]}],[\"$\",\"$L8\",\"2\",{\"href\":\"/blogs?tag=AI%20Agent\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"AI Agent\"]}]}],[\"$\",\"$L8\",\"3\",{\"href\":\"/blogs?tag=AI%20Agents\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"AI Agents\"]}]}],[\"$\",\"$L8\",\"4\",{\"href\":\"/blogs?tag=AI%20Visualization\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"AI Visualization\"]}]}],[\"$\",\"$L8\",\"5\",{\"href\":\"/blogs?tag=AI%20Workflows\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"AI Workflows\"]}]}],[\"$\",\"$L8\",\"6\",{\"href\":\"/blogs?tag=Algorithms\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"Algorithms\"]}]}],[\"$\",\"$L8\",\"7\",{\"href\":\"/blogs?tag=Animated%20Edges\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"Animated Edges\"]}]}],[\"$\",\"$L8\",\"8\",{\"href\":\"/blogs?tag=Architecture\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"Architecture\"]}]}],[\"$\",\"$L8\",\"9\",{\"href\":\"/blogs?tag=Automation\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"Automation\"]}]}],[\"$\",\"$L8\",\"10\",{\"href\":\"/blogs?tag=BPMN\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"BPMN\"]}]}
1],[\"$\",\"$L8\",\"11\",{\"href\":\"/blogs?tag=Background%20Editor\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"Background Editor\"]}]}],[\"$\",\"$L8\",\"12\",{\"href\":\"/blogs?tag=Brainstorming\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"Brainstorming\"]}]}],[\"$\",\"$L8\",\"13\",{\"href\":\"/blogs?tag=Business%20Process\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"Business Process\"]}]}],[\"$\",\"$L8\",\"14\",{\"href\":\"/blogs?tag=CI%2FCD\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"CI/CD\"]}]}],[\"$\",\"$L8\",\"15\",{\"href\":\"/blogs?tag=CSS%20Animations\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"CSS Animations\"]}]}],[\"$\",\"$L8\",\"16\",{\"href\":\"/blogs?tag=Canvas\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"Canvas\"]}]}],[\"$\",\"$L8\",\"17\",{\"href\":\"/blogs?tag=Charts\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"Charts\"]}]}],[\"$\",\"$L8\",\"18\",{\"href\":\"/blogs?tag=Chatbots\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"Chatbots\"]}]}],[\"$\",\"$L8\",\"19\",{\"href\":\"/blogs?tag=Circular%20Graphs\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"Circular Graphs\"]}]}],[\"$\",\"$L8\",\"20\",{\"href\":\"/blogs?tag=Circular%20Layout\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"Circular Layout\"]}]}],[\"$\",\"$L8\",\"21\",{\"href\":\"/blogs?tag=Clone\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"Clone\"]}]}],[\"$\",\"$L8\",\"22\",{\"href\":\"/blogs?tag=Collaboration\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"Collaboration\"]}]}],[\"$\",\"$L8\",\"23\",{\"href\":\"/blogs?tag=Collision%20Detection\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"Collision Detection\"]}]}],[\"$\",\"$L8\",\"24\",{\"href\":\"/blogs?tag=Color%20Coding\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}
1],\"Color Coding\"]}]}],[\"$\",\"$L8\",\"25\",{\"href\":\"/blogs?tag=Comparison\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"Comparison\"]}]}],[\"$\",\"$L8\",\"26\",{\"href\":\"/blogs?tag=Concept%20Map\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"Concept Map\"]}]}],[\"$\",\"$L8\",\"27\",{\"href\":\"/blogs?tag=Conversational%20AI\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"Conversational AI\"]}]}],[\"$\",\"$L8\",\"28\",{\"href\":\"/blogs?tag=Cost%20Savings\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"Cost Savings\"]}]}],[\"$\",\"$L8\",\"29\",{\"href\":\"/blogs?tag=Creative%20UI\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"Creative UI\"]}]}],[\"$\",\"$L8\",\"30\",{\"href\":\"/blogs?tag=Custom%20Nodes\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"Custom Nodes\"]}]}],[\"$\",\"$L8\",\"31\",{\"href\":\"/blogs?tag=D3\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"D3\"]}]}],[\"$\",\"$L8\",\"32\",{\"href\":\"/blogs?tag=Data%20Processing\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"Data Processing\"]}]}],[\"$\",\"$L8\",\"33\",{\"href\":\"/blogs?tag=Data%20Validation\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"Data Validation\"]}]}],[\"$\",\"$L8\",\"34\",{\"href\":\"/blogs?tag=Data%20Visualization\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"Data Visualization\"]}]}],[\"$\",\"$L8\",\"35\",{\"href\":\"/blogs?tag=Deep%20Learning\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"Deep Learning\"]}]}],[\"$\",\"$L8\",\"36\",{\"href\":\"/blogs?tag=Design%20Tools\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"Design Tools\"]}]}],[\"$\",\"$L8\",\"37\",{\"href\":\"/blogs?tag=DevOps\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"DevOps\"]}]}],[\"$\",\"$L8\",\"38\",{\"href\":\"/blogs?tag=Diagram%20Optimization\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"Diagram Optimization\"]}]}],[\"$\",\"$L8\",\"39\",{\"href\":\"/blogs?tag=Diagramming\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"Diagramming\"]}]}],[\"$\",\"$L8\",\"40\",{\"href\":\"/blogs?tag=Diagrams\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"Diagrams\"]}]}],[\"$\",\"$L8\",\"41\",{\"href\":\"/blogs?tag=Drag%20and%20Drop\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"Drag and Drop\"]}]}],[\"$\",\"$L8\",\"42\",{\"href\":\"/blogs?tag=E-commerce\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"E-commerce\"]}]}
1],[\"$\",\"$L8\",\"43\",{\"href\":\"/blogs?tag=ETL\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"ETL\"]}]}],[\"$\",\"$L8\",\"44\",{\"href\":\"/blogs?tag=Edge%20Routing\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"Edge Routing\"]}]}],[\"$\",\"$L8\",\"45\",{\"href\":\"/blogs?tag=Education\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"Education\"]}]}],[\"$\",\"$L8\",\"46\",{\"href\":\"/blogs?tag=Enterprise\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"Enterprise\"]}]}],[\"$\",\"$L8\",\"47\",{\"href\":\"/blogs?tag=Error%20Handling\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"Error Handling\"]}]}],[\"$\",\"$L8\",\"48\",{\"href\":\"/blogs?tag=Excalidraw\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"Excalidraw\"]}]}],[\"$\",\"$L8\",\"49\",{\"href\":\"/blogs?tag=Flow%20Design\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"Flow Design\"]}]}],[\"$\",\"$L8\",\"50\",{\"href\":\"/blogs?tag=Flow%20Diagrams\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"Flow Diagrams\"]}]}],[\"$\",\"$L8\",\"51\",{\"href\":\"/blogs?tag=Flowchart\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"Flowchart\"]}]}],[\"$\",\"$L8\",\"52\",{\"href\":\"/blogs?tag=Force-Directed%20Layout\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"Force-Directed Layout\"]}]}],[\"$\",\"$L8\",\"53\",{\"href\":\"/blogs?tag=Form%20Validation\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"Form Validation\"]}]}],[\"$\",\"$L8\",\"54\",{\"href\":\"/blogs?tag=Game%20Board\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"Game Board\"]}]}],[\"$\",\"$L8\",\"55\",{\"href\":\"/blogs?tag=GoJS\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"GoJS\"]}]}],[\"$\",\"$L8\",\"56\",{\"href\":\"/blogs?tag=Gradients\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"Gradients\"]}]}],[\"$\",\"$L8\",\"57\",{\"href\":\"/blogs?tag=Graph%20Layout\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"Graph Layout\"]}]}],[\"$\",\"$L8\",\"58\",{\"href\":\"/blogs?tag=Graph%20Visualization\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"Graph Visualization\"]}]}],[\"$\",\"$L8\",\"59\",{\"href\":\"/blogs?tag=Hexagonal%20Grid\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"Hexagonal Grid\"]}]}],[\"$\",\"$L8\",\"60\",{\"href\":\"/blogs?tag=Hierarchy\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"Hierarchy\"]}]}],[\"$\",\"$L8\",\"61\",{\"href\":\"/blogs?tag=Implementation\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"Implementation\"]}]}],[\"$\",\"$L8\",\"62\",{\"href\":\"/blogs?tag=Industrial%20Design\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"Industrial Design\"]}]}],[\"$\",\"$L8\",\"63\",{\"href\":\"/blogs?tag=Integration\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"Integration\"]}]}],[\"$\",\"$L8\",\"64\",{\"href\":\"/blogs?tag=Interactive\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"Interactive\"]}]}],[\"$\",\"$L8\",\"65\",{\"href\":\"/blogs?tag=Interactive%20UI\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"Interactive UI\"]}]}],[\"$\",\"$L8\",\"66\",{\"href\":\"/blogs?tag=Interactive%20Workspace\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}
1],\"Interactive Workspace\"]}]}],[\"$\",\"$L8\",\"67\",{\"href\":\"/blogs?tag=JointJS\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"JointJS\"]}]}],[\"$\",\"$L8\",\"68\",{\"href\":\"/blogs?tag=Klaviyo\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"Klaviyo\"]}]}],[\"$\",\"$L8\",\"69\",{\"href\":\"/blogs?tag=Knowledge%20Management\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"Knowledge Management\"]}]}],[\"$\",\"$L8\",\"70\",{\"href\":\"/blogs?tag=Knowledge%20Visualization\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"Knowledge Visualization\"]}]}],[\"$\",\"$L8\",\"71\",{\"href\":\"/blogs?tag=LLM\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"LLM\"]}]}],[\"$\",\"$L8\",\"72\",{\"href\":\"/blogs?tag=Landbot\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"Landbot\"]}]}],[\"$\",\"$L8\",\"73\",{\"href\":\"/blogs?tag=Langflow\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"Langflow\"]}]}],[\"$\",\"$L8\",\"74\",{\"href\":\"/blogs?tag=Layout\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"Layout\"]}]}],[\"$\",\"$L8\",\"75\",{\"href\":\"/blogs?tag=Lead%20Generation\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"Lead Generation\"]}]}],[\"$\",\"$L8\",\"76\",{\"href\":\"/blogs?tag=Learning%20Tools\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"Learning Tools\"]}]}],[\"$\",\"$L8\",\"77\",{\"href\":\"/blogs?tag=Machine%20Learning\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"Machine Learning\"]}]}],[\"$\",\"$L8\",\"78\",{\"href\":\"/blogs?tag=Manufacturing\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"Manufacturing\"]}]}],[\"$\",\"$L8\",\"79\",{\"href\":\"/blogs?tag=Marketing%20Automation\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"Marketing Automation\"]}]}],[\"$\",\"$L8\",\"80\",{\"href\":\"/blogs?tag=Mindmap\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"Mindmap\"]}]}],[\"$\",\"$L8\",\"81\",{\"href\":\"/blogs?tag=Multi-Color\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"Multi-Color\"]}]}],[\"$\",\"$L8\",\"82\",{\"href\":\"/blogs?tag=Network%20Diagrams\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"Network Diagrams\"]}]}],[\"$\",\"$L8\",\"83\",{\"href\":\"/blogs?tag=Neural%20Network\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"Neural Network\"]}]}],[\"$\",\"$L8\",\"84\",{\"href\":\"/blogs?tag=Node%20Editing\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"Node Editing\"]}]}],[\"$\",\"$L8\",\"85\",{\"href\":\"/blogs?tag=Node%20Positioning\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"Node Positioning\"]}]}],[\"$\",\"$L8\",\"86\",{\"href\":\"/blogs?tag=Optimization\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"Optimization\"]}]}],[\"$\",\"$L8\",\"87\",{\"href\":\"/blogs?tag=Orchestration\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"Orchestration\"]}]}],[\"$\",\"$L8\",\"88\",{\"href\":\"/blogs?tag=Org%20Chart\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"Org Chart\"]}]}],[\"$\",\"$L8\",\"89\",{\"href\":\"/blogs?tag=Organization\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"Organization\"]}]}],[\"$\",\"$L8\",\"90\",{\"href\":\"/blogs?tag=Performance\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"Performance\"]}]}],[\"$\",\"$L8\",\"91\",{\"href\":\"/blogs?tag=Physics\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"Physics\"]}]}],[\"$\",\"$L8\",\"92\",{\"href\":\"/blogs?tag=Physics%20Simulation\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"Physics Simulation\"]}]}],[\"$\",\"$L8\",\"93\",{\"href\":\"/blogs?tag=Pipeline\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"Pipeline\"]}]}],[\"$\",\"$L8\",\"94\",{\"href\":\"/blogs?tag=Process%20Design\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"Process Design\"]}]}],[\"$\",\"$L8\",\"95\",{\"href\":\"/blogs?tag=Process%20Flow\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"Process Flow\"]}]}],[\"$\",\"$L8\",\"96\",{\"href\":\"/blogs?tag=Process%20Visualization\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"Process Visualization\"]}]}],[\"$\",\"$L8\",\"97\",{\"href\":\"/blogs?tag=Production%20Process\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"Production Process\"]}]}],[\"$\",\
1"$L8\",\"98\",{\"href\":\"/blogs?tag=Production%20Ready\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"Production Ready\"]}]}],[\"$\",\"$L8\",\"99\",{\"href\":\"/blogs?tag=Radial%20Layout\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"Radial Layout\"]}]}],[\"$\",\"$L8\",\"100\",{\"href\":\"/blogs?tag=React\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"React\"]}]}],[\"$\",\"$L8\",\"101\",{\"href\":\"/blogs?tag=React%20Flow\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"React Flow\"]}]}],[\"$\",\"$L8\",\"102\",{\"href\":\"/blogs?tag=React%20flow\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"React flow\"]}]}],[\"$\",\"$L8\",\"103\",{\"href\":\"/blogs?tag=ReactFlow\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"ReactFlow\"]}]}],[\"$\",\"$L8\",\"104\",{\"href\":\"/blogs?tag=SVG%20Shapes\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"SVG Shapes\"]}]}],[\"$\",\"$L8\",\"105\",{\"href\":\"/blogs?tag=SaaS\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"SaaS\"]}]}],[\"$\",\"$L8\",\"106\",{\"href\":\"/blogs?tag=Sankey\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"Sankey\"]}]}],[\"$\",\"$L8\",\"107\",{\"href\":\"/blogs?tag=Sketch\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"Sketch\"]}]}],[\"$\",\"$L8\",\"108\",{\"href\":\"/blogs?tag=Spiral%20Layout\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"Spiral Layout\"]}]}],[\"$\",\"$L8\",\"109\",{\"href\":\"/blogs?tag=Three.js\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"Three.js\"]}]}],[\"$\",\"$L8\",\"110\",{\"href\":\"/blogs?tag=Tree%20Layout\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"Tree Layout\"]}]}],[\"$\",\"$L8\",\"111\",{\"href\":\"/blogs?tag=Tutorial\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"Tutorial\"]}]}],[\"$\",\"$L8\",\"112\",{\"href\":\"/blogs?tag=UI%20Design\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}
1],\"UI Design\"]}]}],[\"$\",\"$L8\",\"113\",{\"href\":\"/blogs?tag=UML\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"UML\"]}]}],[\"$\",\"$L8\",\"114\",{\"href\":\"/blogs?tag=Validation\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"Validation\"]}]}],[\"$\",\"$L8\",\"115\",{\"href\":\"/blogs?tag=Virtualization\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"Virtualization\"]}]}],[\"$\",\"$L8\",\"116\",{\"href\":\"/blogs?tag=Visual%20Builder\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"Visual Builder\"]}]}],[\"$\",\"$L8\",\"117\",{\"href\":\"/blogs?tag=Visual%20Design\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"Visual Design\"]}]}],[\"$\",\"$L8\",\"118\",{\"href\":\"/blogs?tag=Visual%20Programming\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"Visual Programming\"]}]}],[\"$\",\"$L8\",\"119\",{\"href\":\"/blogs?tag=VisualFlow\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"VisualFlow\"]}]}],[\"$\",\"$L8\",\"120\",{\"href\":\"/blogs?tag=Visualization\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"Visualization\"]}]}],[\"$\",\"$L8\",\"121\",{\"href\":\"/blogs?tag=Whiteboard\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"Whiteboard\"]}]}],[\"$\",\"$L8\",\"122\",{\"href\":\"/blogs?tag=Workflow\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"Workflow\"]}]}],[\"$\",\"$L8\",\"123\",{\"href\":\"/blogs?tag=Workflow%20Automation\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"Workflow Automation\"]}]}],[\"$\",\"$L8\",\"124\",{\"href\":\"/blogs?tag=Workflow%20Builder\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"Workflow Builder\"]}]}],[\"$\",\"$L8\",\"125\",{\"href\":\"/blogs?tag=Workflows\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"Workflows\"]}]}],[\"$\",\"$L8\",\"126\",{\"href\":\"/blogs?tag=Zapier\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"Zapier\"]}]}],[\"$\",\"$L8\",\"127\",{\"href\":\"/blogs?tag=n8n\",\"rel\":\"nofollow\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-5 py-2.5 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-600 shadow-sm hover:shadow-md hover:border-primary/30 hover:text-primary transition-all duration-200 flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-gray-300 group-hover:bg-primary transition-colors\"}],\"n8n\"]}]}]]}]]}]]}]}]]],null],null]},[\"$\",\"$La\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"(dashboard)\",\"children\",\"blogs\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$Lb\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":null}],null]},[[[\"$\",\"$Lc\",null,{}],[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"$La\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"(dashboard)\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$Lb\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":null}]}],[\"$\",\"$Le\",null,{}]],null],null]},[[\"$\",\"$Lf\",null,{\"publishableKey\":\"pk_live_Y2xlcmsudmlzdWFsZmxvdy5kZXYk\",\"clerkJSUrl\":\"$undefined\",\"clerkJSVersion\":\"$undefined\",\"proxyUrl\":\"\",\"domain\":\"\",\"isSatellite\":false,\"signInUrl\":\"/sign-in\",\"signUpUrl\":\"/sign-up\",\"signInForceRedirectUrl\":\"\",\"signUpForceRedirectUrl\":\"\",\"signInFallbackRedirectUrl\":\"\",\"signUpFallbackRedirectUrl\":\"\",\"afterSignInUrl\":\"\",\"afterSignUpUrl\":\"\",\"telemetry\":{\"disabled\":false,\"debug\":false}
1,\"sdkMetadata\":{\"name\":\"@clerk/nextjs\",\"version\":\"5.7.6\",\"environment\":\"production\"},\"nonce\":\"$undefined\",\"initialState\":{\"sessionClaims\":null,\"sessionId\":null,\"userId\":null,\"actor\":null,\"orgId\":null,\"orgRole\":null,\"orgSlug\":null,\"orgPermissions\":null,\"__experimental_factorVerificationAge\":null,\"user\":\"$undefined\",\"organization\":\"$undefined\"},\"children\":[\"$\",\"html\",null,{\"lang\":\"en\",\"className\":\"__variable_8adcd2 __variable_46451f scroll-smooth\",\"children\":[[\"$\",\"head\",null,{\"children\":[[\"$\",\"link\",null,{\"rel\":\"preconnect\",\"href\":\"https://www.googletagmanager.com\"}],[\"$\",\"link\",null,{\"rel\":\"preconnect\",\"href\":\"https://www.google-analytics.com\"}],[\"$\",\"link\",null,{\"rel\":\"dns-prefetch\",\"href\":\"https://res.cloudinary.com\"}],[\"$\",\"link\",null,{\"rel\":\"dns-prefetch\",\"href\":\"https://ui-avatars.com\"}],[\"$\",\"$L10\",null,{\"id\":\"gtm-script\",\"strategy\":\"afterInteractive\",\"dangerouslySetInnerHTML\":{\"__html\":\"\\n                (function(w,d,s,l,i){w[l]=w[l]||[];\\n                w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});\\n                var f=d.getElementsByTagName(s)[0],\\n                j=d.createElement(s),dl=l!='dataLayer'?'\u0026l='+l:'';\\n                j.async=true;\\n                j.src='https://www.googletagmanager.com/gtm.js?id='
1+i+dl;\\n                f.parentNode.insertBefore(j,f);\\n                })(window,document,'script','dataLayer','GTM-TQWZ7692');\\n              \"}}]]}],[\"$\",\"body\",null,{\"children\":[[\"$\",\"noscript\",null,{\"children\":[\"$\",\"iframe\",null,{\"src\":\"https://www.googletagmanager.com/ns.html?id=GTM-TQWZ7692\",\"height\":\"0\",\"width\":\"0\",\"style\":{\"display\":\"none\",\"visibility\":\"hidden\"}}]}],[\"$\",\"$L11\",null,{}],[\"$\",\"$L12\",null,{}],[\"$\",\"$La\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$Lb\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[\"$\",\"section\",null,{\"className\":\"relative\",\"children\":[\"$\",\"div\",null,{\"className\":\"mx-auto flex min-h-[80vh] max-w-6xl flex-col items-center justify-center px-4 sm:px-6\",\"children\":[\"$\",\"div\",null,{\"className\":\"text-center\",\"children\":[[\"$\",\"h1\",null,{\"className\":\"text-8xl font-bold text-primary-800 dark:text-primary-700 sm:text-9xl\",\"children\":\"404\"}],[\"$\",\"h2\",null,{\"className\":\"mt-6 text-2xl font-semibold text-secondary-800 dark:text-white-50\",\"children\":\"Oops! Page Not Found\"}],[\"$\",\"p\",null,{\"className\":\"mt-4 text-gray-600 dark:text-gray-400\",\"children\":\"The page you're looking for doesn't exist or has been moved.\"}],[\"$\",\"div\",null,{\"className\":\"mt-8\",\"children\":[\"$\",\"$L8\",null,{\"href\":\"/\",\"children\":[\"$\",\"button\",null,{\"className\":\"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 text-primary-foreground h-10 px-4 py-2 bg-primary-800 hover:bg-primary-700 dark:bg-primary-700 dark:hover:bg-primary-600\",\"children\":\"Return Home\"}]}]}]]}]}]}],\"notFoundStyles\":[],\"styles\":null}]]}]]}]}],null],null],\"couldBeIntercepted\":false,\"initialHead\":[null,\"$L13\"],\"globalErrorComponent\":\"$14\",\"missingSlots\":\"$W15\"}]]\n"])</script>
1<script>self.__next_f.push([1,"13:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"name\":\"theme-color\",\"content\":\"#ffffff\"}],[\"$\",\"meta\",\"2\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"3\",{\"children\":\"React Flow Blog \u0026 Tutorials | VisualFlow\"}],[\"$\",\"meta\",\"4\",{\"name\":\"description\",\"content\":\"Master React Flow with our complete tutorials and templates. Build interactive diagrams, automation workflows, and visual node-based UIs.\"}],[\"$\",\"link\",\"5\",{\"rel\":\"author\",\"href\":\"https://visualflow.dev\"}],[\"$\",\"meta\",\"6\",{\"name\":\"author\",\"content\":\"VisualFlow Team\"}],[\"$\",\"meta\",\"7\",{\"name\":\"keywords\",\"content\":\"React flow examples,React flow templates,React flow source code,workflow automation React,node-based UI React,visual flow editor,GoJS alternative,JointJS templates,react diagram library,react flowchart builder,free React flow templates,premium React flow examples,VisualFlow,react flow diagram,interactive diagrams React,ReactFlow tutorial,ReactFlow blog,GoJS tutorial,JointJS tutorial,react diagram tutorial,workflow automation tutorial,react flow diagram guide,visual programming tutorial,chatbot builder tutorial,node-based UI tutorial,flow editor how to build,react diagramming library comparison,ReactFlow vs GoJS,ReactFlow vs JointJS\"}],[\"$\",\"meta\",\"8\",{\"name\":\"creator\",\"content\":\"VisualFlow\"}],[\"$\",\"meta\",\"9\",{\"name\":\"robots\",\"content\":\"index, follow\"}],[\"$\",\"meta\",\"10\",{\"name\":\"googlebot\",\"content\":\"index, follow, max-image-preview:large\"}],[\"$\",\"link\",\"11\",{\"rel\":\"canonical\",\"href\":\"https://visualflow.dev/blogs\"}],[\"$\",\"meta\",\"12\",{\"property\":\"og:title\",\"content\":\"React Flow Blog \u0026 Tutorials\"}],[\"$\",\"meta\",\"13\",{\"property\":\"og:description\",\"content\":\"Master React Flow with our complete tutorials and templates. Build interactive diagrams, automation workflows, and visual node-based UIs.\"}],[\"$\",\"meta\",\"14\",{\"property\":\"og:url\",\"content\":\"https://visualflow.dev/blogs\"}],[\"$\",\"meta\",\"15\",{\"property\":\"og:site_name\",\"content\":\"VisualFlow\"}],[\"$\",\"meta\",\"16\",{\"property\":\"og:locale\",\"content\":\"en_US\"}],[\"$\",\"meta\",\"17\",{\"property\":\"og:image\",\"content\":\"https://visualflow.dev/images/seo_image.png\"}],[\"$\",\"meta\",\"18\",{\"property\":\"og:image:width\",\"content\":\"1200\"}],[\"$\",\"meta\",\"19\",{\"property\":\"og:image:height\",\"content\":\"630\"}],[\"$\",\"meta\",\"20\",{\"property\":\"og:image:alt\",\"content\":\"React Flow Blog \u0026 Tutorials — Visualflow | React flow examples | Workflow automation builder\"}],[\"$\",\"meta\",\"21\",{\"property\":\"og:type\",\"content\":\"website\"}],[\"$\",\"meta\",\"22\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"23\",{\"name\":\"twitter:site\",\"content\":\"@visualflowdev\"}],[\"$\",\"meta\",\"24\",{\"name\":\"twitter:creator\",\"content\":\"@visualflowdev\"}],[\"$\",\"meta\",\"25\",{\"name\":\"twitter:title\",\"content\":\"React Flow Blog \u0026 Tutorials\"}],[\"$\",\"meta\",\"26\",{\"name\":\"twitter:description\",\"content\":\"Master React Flow with our complete tutorials and templates. Build interactive diagrams, automation workflows, and visual node-based UIs.\"}],[\"$\",\"meta\",\"27\",{\"name\":\"twitter:image\",\"content\":\"https://visualflow.dev/images/seo_image.png\"}],[\"$\",\"meta\",\"28\",{\"name\":\"twitter:image:width\",\"content\":\"1200\"}],[\"$\",\"meta\",\"29\",{\"name\":\"twitter:image:height\",\"content\":\"630\"}],[\"$\",\"meta\",\"30\",{\"name\":\"twitter:image:alt\",\"content\":\"React Flow Blog \u0026 Tutorials\"}],[\"$\",\"link\",\"31\",{\"rel\":\"shortcut icon\",\"href\":\"/favicon.ico\"}],[\"$\",\"link\",\"32\",{\"rel\":\"icon\",\"href\":\"/favicon.ico\"}],[\"$\",\"link\",\"33\",{\"rel\":\"apple-touch-icon\",\"href\":\"/favicon.ico\"}],[\"$\",\"meta\",\"34\",{\"name\":\"next-size-adjust\"}]]\n"])</script>
1<script>self.__next_f.push([1,"6:null\n"])</script>
1</body></html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.