[{"data":1,"prerenderedAt":979},["ShallowReactive",2],{"writing-\u002Fwriting\u002Freactflow-workflow-visualization":3},{"id":4,"title":5,"author":6,"body":7,"date":964,"description":965,"extension":966,"meta":967,"navigation":125,"path":969,"seo":970,"stem":971,"tags":972,"__hash__":978},"writing\u002Fwriting\u002Freactflow-workflow-visualization.md","ReactFlow: Building Intuitive Workflow Visualizations for Non-Technical Users",null,{"type":8,"value":9,"toc":951},"minimark",[10,14,19,23,31,35,38,49,53,58,61,346,349,362,366,369,592,595,599,602,612,659,667,780,788,852,856,859,879,883,886,900,904,937,941,944,947],[11,12,5],"h1",{"id":13},"reactflow-building-intuitive-workflow-visualizations-for-non-technical-users",[15,16,18],"h2",{"id":17},"why-im-writing-this","Why I'm Writing This",[20,21,22],"p",{},"Recently, I faced an interesting challenge while building our marketing website at Capptions. We needed to showcase our Workflow Builder functionality to QHSE (Quality, Health, Safety, and Environment) managers - a user group that spans the spectrum from tech-savvy to non-technical backgrounds. The goal was to make complex workflow concepts accessible and visually appealing - so users understand prior having to sign up.",[20,24,25,26,30],{},"After exploring other options ",[27,28,29],"em",{},"(plain Tailwind, motion.dev)",", I landed on ReactFlow, and the journey taught me valuable lessons about technical documentation, user experience, and the art of simplifying complex concepts.",[15,32,34],{"id":33},"key-insight-visualization-explanation","Key Insight: Visualization > Explanation",[20,36,37],{},"The main \"aha\" moment came when I realized that trying to explain workflow builders through text and static images wasn't cutting it. Our users needed something interactive and familiar - something that reflected the actual tool they'd be using.",[20,39,40],{},[41,42],"img",{"src":43,"alt":44,"className":45},"\u002Fimages\u002Fcontent\u002Freact-flow-workflow-visualisation.webp","ReactFlow Workflow Visualization",[46,47,48],"w-3\u002F4","mx-auto","rounded-lg",[15,50,52],{"id":51},"deep-dive","Deep Dive",[54,55,57],"h3",{"id":56},"setting-up-custom-nodes","Setting Up Custom Nodes",[20,59,60],{},"The first challenge was creating custom nodes that felt native to our application. Here's how I approached it:",[62,63,68],"pre",{"className":64,"code":65,"language":66,"meta":67,"style":67},"language-typescript shiki shiki-themes material-theme-lighter github-light github-dark","type CustomNodeData = {\n  label: React.ReactNode;\n};\n\nconst CustomNode = ({ data }: { data: CustomNodeData }) => (\n  \u003Cdiv className=\"relative p-2 bg-white rounded-md border-2 border-gray-300\">\n    \u003CHandle\n      type=\"target\"\n      position={Position.Top}\n      className=\"!w-3 !h-3 !bg-primary !border-1 !border-white ring-1 ring-offset-2 ring-gray-300\"\n    \u002F>\n    {data.label}\n    \u003CHandle\n      type=\"source\"\n      position={Position.Bottom}\n      className=\"!w-3 !h-3 !bg-primary !border-1 !border-white ring-1 ring-offset-2 ring-gray-300\"\n    \u002F>\n  \u003C\u002Fdiv>\n);\n","typescript","",[69,70,71,92,114,120,127,170,195,204,220,237,252,258,274,281,295,309,322,327,338],"code",{"__ignoreMap":67},[72,73,76,80,84,88],"span",{"class":74,"line":75},"line",1,[72,77,79],{"class":78},"sbsja","type",[72,81,83],{"class":82},"sbgvK"," CustomNodeData",[72,85,87],{"class":86},"smGrS"," =",[72,89,91],{"class":90},"sP7_E"," {\n",[72,93,95,99,102,105,108,111],{"class":74,"line":94},2,[72,96,98],{"class":97},"sucvu","  label",[72,100,101],{"class":86},":",[72,103,104],{"class":82}," React",[72,106,107],{"class":90},".",[72,109,110],{"class":82},"ReactNode",[72,112,113],{"class":90},";\n",[72,115,117],{"class":74,"line":116},3,[72,118,119],{"class":90},"};\n",[72,121,123],{"class":74,"line":122},4,[72,124,126],{"emptyLinePlaceholder":125},true,"\n",[72,128,130,133,137,139,142,146,149,151,154,156,158,160,163,166],{"class":74,"line":129},5,[72,131,132],{"class":78},"const",[72,134,136],{"class":135},"sfCm-"," CustomNode",[72,138,87],{"class":86},[72,140,141],{"class":90}," ({",[72,143,145],{"class":144},"s99_P"," data",[72,147,148],{"class":90}," }",[72,150,101],{"class":86},[72,152,153],{"class":90}," {",[72,155,145],{"class":97},[72,157,101],{"class":86},[72,159,83],{"class":82},[72,161,162],{"class":90}," })",[72,164,165],{"class":78}," =>",[72,167,169],{"class":168},"su5hD"," (\n",[72,171,173,176,179,182,186,190,192],{"class":74,"line":172},6,[72,174,175],{"class":86},"  \u003C",[72,177,178],{"class":168},"div className",[72,180,181],{"class":86},"=",[72,183,185],{"class":184},"sjJ54","\"",[72,187,189],{"class":188},"s_sjI","relative p-2 bg-white rounded-md border-2 border-gray-300",[72,191,185],{"class":184},[72,193,194],{"class":86},">\n",[72,196,198,201],{"class":74,"line":197},7,[72,199,200],{"class":86},"    \u003C",[72,202,203],{"class":144},"Handle\n",[72,205,207,210,212,214,217],{"class":74,"line":206},8,[72,208,209],{"class":168},"      type",[72,211,181],{"class":86},[72,213,185],{"class":184},[72,215,216],{"class":188},"target",[72,218,219],{"class":184},"\"\n",[72,221,223,226,228,231,234],{"class":74,"line":222},9,[72,224,225],{"class":168},"      position",[72,227,181],{"class":86},[72,229,230],{"class":90},"{",[72,232,233],{"class":168},"Position.Top",[72,235,236],{"class":90},"}\n",[72,238,240,243,245,247,250],{"class":74,"line":239},10,[72,241,242],{"class":168},"      className",[72,244,181],{"class":86},[72,246,185],{"class":184},[72,248,249],{"class":188},"!w-3 !h-3 !bg-primary !border-1 !border-white ring-1 ring-offset-2 ring-gray-300",[72,251,219],{"class":184},[72,253,255],{"class":74,"line":254},11,[72,256,257],{"class":86},"    \u002F>\n",[72,259,261,264,267,269,272],{"class":74,"line":260},12,[72,262,263],{"class":90},"    {",[72,265,266],{"class":144},"data",[72,268,107],{"class":168},[72,270,271],{"class":144},"label",[72,273,236],{"class":90},[72,275,277,279],{"class":74,"line":276},13,[72,278,200],{"class":86},[72,280,203],{"class":144},[72,282,284,286,288,290,293],{"class":74,"line":283},14,[72,285,209],{"class":168},[72,287,181],{"class":86},[72,289,185],{"class":184},[72,291,292],{"class":188},"source",[72,294,219],{"class":184},[72,296,298,300,302,304,307],{"class":74,"line":297},15,[72,299,225],{"class":168},[72,301,181],{"class":86},[72,303,230],{"class":90},[72,305,306],{"class":168},"Position.Bottom",[72,308,236],{"class":90},[72,310,312,314,316,318,320],{"class":74,"line":311},16,[72,313,242],{"class":168},[72,315,181],{"class":86},[72,317,185],{"class":184},[72,319,249],{"class":188},[72,321,219],{"class":184},[72,323,325],{"class":74,"line":324},17,[72,326,257],{"class":86},[72,328,330,333,336],{"class":74,"line":329},18,[72,331,332],{"class":86},"  \u003C\u002F",[72,334,335],{"class":168},"div",[72,337,194],{"class":86},[72,339,341,344],{"class":74,"line":340},19,[72,342,343],{"class":168},")",[72,345,113],{"class":90},[20,347,348],{},"I designed the nodes with a few key principles in mind:",[350,351,352,356,359],"ul",{},[353,354,355],"li",{},"Clean, minimal styling that matches our UI",[353,357,358],{},"Clear connection points (handles) for visual flow",[353,360,361],{},"Flexible content rendering through React nodes",[54,363,365],{"id":364},"state-management-and-flow-control","State Management and Flow Control",[20,367,368],{},"The core flow management is surprisingly straightforward with ReactFlow's hooks:",[62,370,372],{"className":64,"code":371,"language":66,"meta":67,"style":67},"const [nodes, setNodes] = useState\u003CNode[]>(initialNodes);\nconst [edges, setEdges] = useState(initialEdges);\n\nconst onNodesChange = useCallback(\n  (changes: NodeChange[]) => setNodes((nds) => applyNodeChanges(changes, nds)),\n  [],\n);\n\nconst onEdgesChange = useCallback(\n  (changes: EdgeChange[]) => setEdges((eds) => applyEdgeChanges(changes, eds)),\n  [],\n);\n",[69,373,374,417,442,446,461,508,515,521,525,538,580,586],{"__ignoreMap":67},[72,375,376,378,381,385,388,391,394,396,400,403,406,409,412,415],{"class":74,"line":75},[72,377,132],{"class":78},[72,379,380],{"class":90}," [",[72,382,384],{"class":383},"s_hVV","nodes",[72,386,387],{"class":90},",",[72,389,390],{"class":383}," setNodes",[72,392,393],{"class":90},"]",[72,395,87],{"class":86},[72,397,399],{"class":398},"sGLFI"," useState",[72,401,402],{"class":90},"\u003C",[72,404,405],{"class":82},"Node",[72,407,408],{"class":168},"[]",[72,410,411],{"class":90},">",[72,413,414],{"class":168},"(initialNodes)",[72,416,113],{"class":90},[72,418,419,421,423,426,428,431,433,435,437,440],{"class":74,"line":94},[72,420,132],{"class":78},[72,422,380],{"class":90},[72,424,425],{"class":383},"edges",[72,427,387],{"class":90},[72,429,430],{"class":383}," setEdges",[72,432,393],{"class":90},[72,434,87],{"class":86},[72,436,399],{"class":398},[72,438,439],{"class":168},"(initialEdges)",[72,441,113],{"class":90},[72,443,444],{"class":74,"line":116},[72,445,126],{"emptyLinePlaceholder":125},[72,447,448,450,453,455,458],{"class":74,"line":122},[72,449,132],{"class":78},[72,451,452],{"class":383}," onNodesChange",[72,454,87],{"class":86},[72,456,457],{"class":398}," useCallback",[72,459,460],{"class":168},"(\n",[72,462,463,466,469,471,474,476,478,480,482,485,487,490,492,494,497,500,502,505],{"class":74,"line":129},[72,464,465],{"class":90},"  (",[72,467,468],{"class":144},"changes",[72,470,101],{"class":86},[72,472,473],{"class":82}," NodeChange",[72,475,408],{"class":168},[72,477,343],{"class":90},[72,479,165],{"class":78},[72,481,390],{"class":398},[72,483,484],{"class":168},"(",[72,486,484],{"class":90},[72,488,489],{"class":144},"nds",[72,491,343],{"class":90},[72,493,165],{"class":78},[72,495,496],{"class":398}," applyNodeChanges",[72,498,499],{"class":168},"(changes",[72,501,387],{"class":90},[72,503,504],{"class":168}," nds))",[72,506,507],{"class":90},",\n",[72,509,510,513],{"class":74,"line":172},[72,511,512],{"class":168},"  []",[72,514,507],{"class":90},[72,516,517,519],{"class":74,"line":197},[72,518,343],{"class":168},[72,520,113],{"class":90},[72,522,523],{"class":74,"line":206},[72,524,126],{"emptyLinePlaceholder":125},[72,526,527,529,532,534,536],{"class":74,"line":222},[72,528,132],{"class":78},[72,530,531],{"class":383}," onEdgesChange",[72,533,87],{"class":86},[72,535,457],{"class":398},[72,537,460],{"class":168},[72,539,540,542,544,546,549,551,553,555,557,559,561,564,566,568,571,573,575,578],{"class":74,"line":239},[72,541,465],{"class":90},[72,543,468],{"class":144},[72,545,101],{"class":86},[72,547,548],{"class":82}," EdgeChange",[72,550,408],{"class":168},[72,552,343],{"class":90},[72,554,165],{"class":78},[72,556,430],{"class":398},[72,558,484],{"class":168},[72,560,484],{"class":90},[72,562,563],{"class":144},"eds",[72,565,343],{"class":90},[72,567,165],{"class":78},[72,569,570],{"class":398}," applyEdgeChanges",[72,572,499],{"class":168},[72,574,387],{"class":90},[72,576,577],{"class":168}," eds))",[72,579,507],{"class":90},[72,581,582,584],{"class":74,"line":254},[72,583,512],{"class":168},[72,585,507],{"class":90},[72,587,588,590],{"class":74,"line":260},[72,589,343],{"class":168},[72,591,113],{"class":90},[20,593,594],{},"What I love about this approach is how ReactFlow handles the complex state management internally while exposing a clean API for customization.",[54,596,598],{"id":597},"making-it-non-technical-user-friendly","Making It Non-Technical User Friendly",[20,600,601],{},"Here's where things got interesting. For our QHSC managers, I implemented several UX decisions:",[603,604,605],"ol",{},[353,606,607,611],{},[608,609,610],"strong",{},"Locked Navigation",": Prevented accidental canvas dragging",[62,613,615],{"className":64,"code":614,"language":66,"meta":67,"style":67},"\u003CReactFlow panOnDrag={false} draggable={false} preventScrolling={false} \u002F>\n",[69,616,617],{"__ignoreMap":67},[72,618,619,621,624,626,628,631,634,637,639,641,643,645,648,650,652,654,656],{"class":74,"line":75},[72,620,402],{"class":86},[72,622,623],{"class":168},"ReactFlow panOnDrag",[72,625,181],{"class":86},[72,627,230],{"class":90},[72,629,630],{"class":168},"false",[72,632,633],{"class":90},"}",[72,635,636],{"class":168}," draggable",[72,638,181],{"class":86},[72,640,230],{"class":90},[72,642,630],{"class":168},[72,644,633],{"class":90},[72,646,647],{"class":168}," preventScrolling",[72,649,181],{"class":86},[72,651,230],{"class":90},[72,653,630],{"class":168},[72,655,633],{"class":90},[72,657,658],{"class":86}," \u002F>\n",[603,660,661],{"start":94},[353,662,663,666],{},[608,664,665],{},"Visual Feedback",": Added animated edges to show flow direction",[62,668,670],{"className":64,"code":669,"language":66,"meta":67,"style":67},"const initialEdges: Edge[] = [\n  {\n    id: \"start-to-inspection\",\n    source: \"start\",\n    target: \"inspection\",\n    animated: true, \u002F\u002F This small detail makes a big difference\n  },\n  \u002F\u002F ...\n];\n",[69,671,672,692,697,715,731,747,764,769,774],{"__ignoreMap":67},[72,673,674,676,679,681,684,687,689],{"class":74,"line":75},[72,675,132],{"class":78},[72,677,678],{"class":383}," initialEdges",[72,680,101],{"class":86},[72,682,683],{"class":82}," Edge",[72,685,686],{"class":168},"[] ",[72,688,181],{"class":86},[72,690,691],{"class":168}," [\n",[72,693,694],{"class":74,"line":94},[72,695,696],{"class":90},"  {\n",[72,698,699,703,705,708,711,713],{"class":74,"line":116},[72,700,702],{"class":701},"skxfh","    id",[72,704,101],{"class":90},[72,706,707],{"class":184}," \"",[72,709,710],{"class":188},"start-to-inspection",[72,712,185],{"class":184},[72,714,507],{"class":90},[72,716,717,720,722,724,727,729],{"class":74,"line":122},[72,718,719],{"class":701},"    source",[72,721,101],{"class":90},[72,723,707],{"class":184},[72,725,726],{"class":188},"start",[72,728,185],{"class":184},[72,730,507],{"class":90},[72,732,733,736,738,740,743,745],{"class":74,"line":129},[72,734,735],{"class":701},"    target",[72,737,101],{"class":90},[72,739,707],{"class":184},[72,741,742],{"class":188},"inspection",[72,744,185],{"class":184},[72,746,507],{"class":90},[72,748,749,752,754,758,760],{"class":74,"line":172},[72,750,751],{"class":701},"    animated",[72,753,101],{"class":90},[72,755,757],{"class":756},"syTEX"," true",[72,759,387],{"class":90},[72,761,763],{"class":762},"sutJx"," \u002F\u002F This small detail makes a big difference\n",[72,765,766],{"class":74,"line":197},[72,767,768],{"class":90},"  },\n",[72,770,771],{"class":74,"line":206},[72,772,773],{"class":762},"  \u002F\u002F ...\n",[72,775,776,778],{"class":74,"line":222},[72,777,393],{"class":168},[72,779,113],{"class":90},[603,781,782],{"start":116},[353,783,784,787],{},[608,785,786],{},"Intuitive Icons",": Used familiar icons for different node types",[62,789,791],{"className":64,"code":790,"language":66,"meta":67,"style":67},"\u003Cdiv className=\"flex gap-2 items-center font-medium text-indigo-900\">\n  \u003CClipboardCheck className=\"w-4 h-4\" \u002F>\n  \u003Cspan>Inspection\u003C\u002Fspan>\n\u003C\u002Fdiv>\n",[69,792,793,810,828,844],{"__ignoreMap":67},[72,794,795,797,799,801,803,806,808],{"class":74,"line":75},[72,796,402],{"class":86},[72,798,178],{"class":168},[72,800,181],{"class":86},[72,802,185],{"class":184},[72,804,805],{"class":188},"flex gap-2 items-center font-medium text-indigo-900",[72,807,185],{"class":184},[72,809,194],{"class":86},[72,811,812,814,817,819,821,824,826],{"class":74,"line":94},[72,813,175],{"class":86},[72,815,816],{"class":168},"ClipboardCheck className",[72,818,181],{"class":86},[72,820,185],{"class":184},[72,822,823],{"class":188},"w-4 h-4",[72,825,185],{"class":184},[72,827,658],{"class":86},[72,829,830,832,834,837,840,842],{"class":74,"line":116},[72,831,175],{"class":168},[72,833,72],{"class":82},[72,835,836],{"class":168},">Inspection",[72,838,839],{"class":86},"\u003C\u002F",[72,841,72],{"class":168},[72,843,194],{"class":86},[72,845,846,848,850],{"class":74,"line":122},[72,847,839],{"class":86},[72,849,335],{"class":168},[72,851,194],{"class":86},[15,853,855],{"id":854},"what-id-do-differently","What I'd Do Differently",[20,857,858],{},"Looking back, there are a few things I'd approach differently:",[603,860,861,867,873],{},[353,862,863,866],{},[608,864,865],{},"Start with Mobile-First",": While ReactFlow works great on desktop, I should have considered mobile interactions earlier in the development process.",[353,868,869,872],{},[608,870,871],{},"More Interactive Elements",": I could have added more interactive elements to demonstrate the actual workflow building process, not just the final result.",[353,874,875,878],{},[608,876,877],{},"Performance Optimization",": For larger workflows, I'd implement virtualization earlier in the development cycle.",[15,880,882],{"id":881},"the-documentation-inspiration","The Documentation Inspiration",[20,884,885],{},"One unexpected outcome was how much I learned from ReactFlow's documentation. It's a masterclass in technical writing - clear, well-structured, and practical. It inspired me to improve our own documentation with:",[350,887,888,891,894,897],{},[353,889,890],{},"Interactive examples",[353,892,893],{},"Clear, concise code snippets",[353,895,896],{},"Progressive disclosure of complexity",[353,898,899],{},"Practical use cases",[15,901,903],{"id":902},"resources","Resources",[350,905,906,915,922,930],{},[353,907,908],{},[909,910,914],"a",{"href":911,"rel":912},"https:\u002F\u002Freactflow.dev\u002Fdocs\u002Fintroduction\u002F",[913],"nofollow","ReactFlow Documentation",[353,916,917],{},[909,918,921],{"href":919,"rel":920},"https:\u002F\u002Freactflow.dev\u002Fdocs\u002Fexamples\u002Foverview\u002F",[913],"React Flow Examples",[353,923,924,929],{},[909,925,928],{"href":926,"rel":927},"https:\u002F\u002Flucide.dev\u002F",[913],"Lucide Icons"," - For the workflow icons",[353,931,932],{},[909,933,936],{"href":934,"rel":935},"https:\u002F\u002Fwww.patterns.dev\u002Freact",[913],"TypeScript React Patterns",[15,938,940],{"id":939},"final-thoughts","Final Thoughts",[20,942,943],{},"Building this workflow visualization reminded me that sometimes the best technical solution isn't about showing off complex features - it's about making complex things feel simple. RF definitely helped me bridge the gap between technical capability and user understanding, which is exactly what we needed for our marketing site.",[20,945,946],{},"The next time you're faced with explaining complex technical concepts to non-technical users, consider whether a visual, interactive approach might be more effective than traditional documentation or static diagrams.",[948,949,950],"style",{},"html pre.shiki code .sbsja, html code.shiki .sbsja{--shiki-light:#9C3EDA;--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sbgvK, html code.shiki .sbgvK{--shiki-light:#E2931D;--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .smGrS, html code.shiki .smGrS{--shiki-light:#39ADB5;--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sP7_E, html code.shiki .sP7_E{--shiki-light:#39ADB5;--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sucvu, html code.shiki .sucvu{--shiki-light:#E53935;--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sfCm-, html code.shiki .sfCm-{--shiki-light:#90A4AE;--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .s99_P, html code.shiki .s99_P{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#E36209;--shiki-default-font-style:inherit;--shiki-dark:#FFAB70;--shiki-dark-font-style:inherit}html pre.shiki code .su5hD, html code.shiki .su5hD{--shiki-light:#90A4AE;--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sjJ54, html code.shiki .sjJ54{--shiki-light:#39ADB5;--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .s_sjI, html code.shiki .s_sjI{--shiki-light:#91B859;--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s_hVV, html code.shiki .s_hVV{--shiki-light:#90A4AE;--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sGLFI, html code.shiki .sGLFI{--shiki-light:#6182B8;--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .skxfh, html code.shiki .skxfh{--shiki-light:#E53935;--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .syTEX, html code.shiki .syTEX{--shiki-light:#FF5370;--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sutJx, html code.shiki .sutJx{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#6A737D;--shiki-default-font-style:inherit;--shiki-dark:#6A737D;--shiki-dark-font-style:inherit}",{"title":67,"searchDepth":94,"depth":94,"links":952},[953,954,955,960,961,962,963],{"id":17,"depth":94,"text":18},{"id":33,"depth":94,"text":34},{"id":51,"depth":94,"text":52,"children":956},[957,958,959],{"id":56,"depth":116,"text":57},{"id":364,"depth":116,"text":365},{"id":597,"depth":116,"text":598},{"id":854,"depth":94,"text":855},{"id":881,"depth":94,"text":882},{"id":902,"depth":94,"text":903},{"id":939,"depth":94,"text":940},"2025-06-23","Using ReactFlow to build intuitive workflow visualizations for non-technical users, with insights on creating custom nodes and handling complex state management.","md",{"slug":968},"reactflow-workflow-visualization","\u002Fwriting\u002Freactflow-workflow-visualization",{"title":5,"description":965},"writing\u002Freactflow-workflow-visualization",[973,974,975,976,977],"React","ReactFlow","TypeScript","UI\u002FUX","Workflow Visualization","lVPty6QJp8WNFtvnnl40UxeZKhVzJHO7UAHJd0wV-sU",1780955296665]