[{"data":1,"prerenderedAt":599},["ShallowReactive",2],{"content-query-XHV8wCv6EU":3},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":8,"description":9,"heading":10,"prompt":11,"tags":15,"files":6,"nav":17,"gallery":18,"body":20,"_type":592,"_id":593,"_source":594,"_file":595,"_stem":596,"_extension":597,"sitemap":598},"/tools/flow-diagram","tools",false,"","Flow Diagram Generator for Excel & CSV","Create flow diagrams online from Excel and CSV data. Map processes, pathways, and step-by-step structures with AI.","Flow Diagram Generator",{"prefix":12,"label":13,"placeholder":14},"Create a flow diagram","Describe the process or workflow to diagram","Enter your prompt here",[16],"charts",true,[19],"/img/tools/flow-diagram.png",{"type":21,"children":22,"toc":584},"root",[23,32,81,114,126,132,199,205,345,351,458,464,488,512,529,552],{"type":24,"tag":25,"props":26,"children":28},"element","h2",{"id":27},"what-is-a-flow-diagram",[29],{"type":30,"value":31},"text","What Is a Flow Diagram?",{"type":24,"tag":33,"props":34,"children":35},"p",{},[36,38,44,46,51,53,58,60,65,67,72,74,79],{"type":30,"value":37},"A ",{"type":24,"tag":39,"props":40,"children":41},"strong",{},[42],{"type":30,"value":43},"flow diagram",{"type":30,"value":45}," (or flowchart) is a visual representation of a ",{"type":24,"tag":39,"props":47,"children":48},{},[49],{"type":30,"value":50},"process, workflow, or algorithm",{"type":30,"value":52}," using standardized symbols connected by arrows that show the direction of flow. Each symbol encodes the type of step: rounded rectangles mark the ",{"type":24,"tag":39,"props":54,"children":55},{},[56],{"type":30,"value":57},"start and end",{"type":30,"value":59}," of a process, plain rectangles represent ",{"type":24,"tag":39,"props":61,"children":62},{},[63],{"type":30,"value":64},"processing steps",{"type":30,"value":66}," (actions, transformations, calculations), diamonds indicate ",{"type":24,"tag":39,"props":68,"children":69},{},[70],{"type":30,"value":71},"decision points",{"type":30,"value":73}," (yes/no branches, condition checks), and parallelograms denote ",{"type":24,"tag":39,"props":75,"children":76},{},[77],{"type":30,"value":78},"input/output",{"type":30,"value":80}," (data read, results written). Arrows between shapes show the sequence and any loops or branches.",{"type":24,"tag":33,"props":82,"children":83},{},[84,86,91,93,98,100,105,107,112],{"type":30,"value":85},"Flow diagrams are used in virtually every domain that involves multi-step processes: ",{"type":24,"tag":39,"props":87,"children":88},{},[89],{"type":30,"value":90},"software engineering",{"type":30,"value":92}," (algorithm design, system architecture, data pipeline documentation), ",{"type":24,"tag":39,"props":94,"children":95},{},[96],{"type":30,"value":97},"business operations",{"type":30,"value":99}," (onboarding workflows, approval chains, customer journey maps), ",{"type":24,"tag":39,"props":101,"children":102},{},[103],{"type":30,"value":104},"science and medicine",{"type":30,"value":106}," (clinical trial protocols, experimental procedures, patient care pathways), and ",{"type":24,"tag":39,"props":108,"children":109},{},[110],{"type":30,"value":111},"education",{"type":30,"value":113}," (explaining how an algorithm or biological process works step by step). A well-drawn flowchart makes a complex process instantly understandable to someone who has never seen it before — it replaces paragraphs of prose with a visual structure that can be scanned in seconds.",{"type":24,"tag":33,"props":115,"children":116},{},[117,119,124],{"type":30,"value":118},"The key to a useful flow diagram is ",{"type":24,"tag":39,"props":120,"children":121},{},[122],{"type":30,"value":123},"the right level of abstraction",{"type":30,"value":125},". Too granular and it becomes an unreadable wall of boxes; too coarse and it loses the detail that makes it actionable. Describe your process in plain language, specifying which steps involve decisions and what the branches lead to, and the AI will choose the appropriate symbol for each step and lay out the diagram to minimize crossing arrows.",{"type":24,"tag":25,"props":127,"children":129},{"id":128},"how-it-works",[130],{"type":30,"value":131},"How It Works",{"type":24,"tag":133,"props":134,"children":135},"ol",{},[136,147,163],{"type":24,"tag":137,"props":138,"children":139},"li",{},[140,145],{"type":24,"tag":39,"props":141,"children":142},{},[143],{"type":30,"value":144},"Describe your process",{"type":30,"value":146}," — explain the steps, decisions, and flow in plain language. You don't need to know the diagram syntax — just describe what happens.",{"type":24,"tag":137,"props":148,"children":149},{},[150,155,157],{"type":24,"tag":39,"props":151,"children":152},{},[153],{"type":30,"value":154},"Specify the style",{"type":30,"value":156}," — e.g. ",{"type":24,"tag":158,"props":159,"children":160},"em",{},[161],{"type":30,"value":162},"\"color decision diamonds yellow, use blue for process steps, horizontal layout\"",{"type":24,"tag":137,"props":164,"children":165},{},[166,171,173,180,182,188,190,197],{"type":24,"tag":39,"props":167,"children":168},{},[169],{"type":30,"value":170},"Get the diagram",{"type":30,"value":172}," — the AI writes Python code using ",{"type":24,"tag":174,"props":175,"children":177},"a",{"href":176},"https://matplotlib.org/",[178],{"type":30,"value":179},"matplotlib",{"type":30,"value":181}," with custom shape drawing or ",{"type":24,"tag":174,"props":183,"children":185},{"href":184},"https://graphviz.org/",[186],{"type":30,"value":187},"Graphviz",{"type":30,"value":189}," via the ",{"type":24,"tag":191,"props":192,"children":194},"code",{"className":193},[],[195],{"type":30,"value":196},"graphviz",{"type":30,"value":198}," package to render the flowchart as a PNG or SVG",{"type":24,"tag":25,"props":200,"children":202},{"id":201},"interpreting-the-results",[203],{"type":30,"value":204},"Interpreting the Results",{"type":24,"tag":206,"props":207,"children":208},"table",{},[209,228],{"type":24,"tag":210,"props":211,"children":212},"thead",{},[213],{"type":24,"tag":214,"props":215,"children":216},"tr",{},[217,223],{"type":24,"tag":218,"props":219,"children":220},"th",{},[221],{"type":30,"value":222},"Shape",{"type":24,"tag":218,"props":224,"children":225},{},[226],{"type":30,"value":227},"What it represents",{"type":24,"tag":229,"props":230,"children":231},"tbody",{},[232,249,265,281,297,313,329],{"type":24,"tag":214,"props":233,"children":234},{},[235,244],{"type":24,"tag":236,"props":237,"children":238},"td",{},[239],{"type":24,"tag":39,"props":240,"children":241},{},[242],{"type":30,"value":243},"Rounded rectangle (pill shape)",{"type":24,"tag":236,"props":245,"children":246},{},[247],{"type":30,"value":248},"Start or end — the entry and exit points of the process",{"type":24,"tag":214,"props":250,"children":251},{},[252,260],{"type":24,"tag":236,"props":253,"children":254},{},[255],{"type":24,"tag":39,"props":256,"children":257},{},[258],{"type":30,"value":259},"Rectangle",{"type":24,"tag":236,"props":261,"children":262},{},[263],{"type":30,"value":264},"Process step — an action, calculation, or transformation",{"type":24,"tag":214,"props":266,"children":267},{},[268,276],{"type":24,"tag":236,"props":269,"children":270},{},[271],{"type":24,"tag":39,"props":272,"children":273},{},[274],{"type":30,"value":275},"Diamond",{"type":24,"tag":236,"props":277,"children":278},{},[279],{"type":30,"value":280},"Decision — a yes/no or condition branch",{"type":24,"tag":214,"props":282,"children":283},{},[284,292],{"type":24,"tag":236,"props":285,"children":286},{},[287],{"type":24,"tag":39,"props":288,"children":289},{},[290],{"type":30,"value":291},"Parallelogram",{"type":24,"tag":236,"props":293,"children":294},{},[295],{"type":30,"value":296},"Input or output — data being read in or results being written out",{"type":24,"tag":214,"props":298,"children":299},{},[300,308],{"type":24,"tag":236,"props":301,"children":302},{},[303],{"type":24,"tag":39,"props":304,"children":305},{},[306],{"type":30,"value":307},"Arrow",{"type":24,"tag":236,"props":309,"children":310},{},[311],{"type":30,"value":312},"Flow direction — sequence from one step to the next",{"type":24,"tag":214,"props":314,"children":315},{},[316,324],{"type":24,"tag":236,"props":317,"children":318},{},[319],{"type":24,"tag":39,"props":320,"children":321},{},[322],{"type":30,"value":323},"Loop (arrow going backward)",{"type":24,"tag":236,"props":325,"children":326},{},[327],{"type":30,"value":328},"Iteration — a step that repeats until a condition is met",{"type":24,"tag":214,"props":330,"children":331},{},[332,340],{"type":24,"tag":236,"props":333,"children":334},{},[335],{"type":24,"tag":39,"props":336,"children":337},{},[338],{"type":30,"value":339},"Label on an arrow",{"type":24,"tag":236,"props":341,"children":342},{},[343],{"type":30,"value":344},"Condition — which branch is taken (Yes/No, Pass/Fail)",{"type":24,"tag":25,"props":346,"children":348},{"id":347},"example-prompts",[349],{"type":30,"value":350},"Example Prompts",{"type":24,"tag":206,"props":352,"children":353},{},[354,370],{"type":24,"tag":210,"props":355,"children":356},{},[357],{"type":24,"tag":214,"props":358,"children":359},{},[360,365],{"type":24,"tag":218,"props":361,"children":362},{},[363],{"type":30,"value":364},"Scenario",{"type":24,"tag":218,"props":366,"children":367},{},[368],{"type":30,"value":369},"What to type",{"type":24,"tag":229,"props":371,"children":372},{},[373,390,407,424,441],{"type":24,"tag":214,"props":374,"children":375},{},[376,381],{"type":24,"tag":236,"props":377,"children":378},{},[379],{"type":30,"value":380},"Data pipeline",{"type":24,"tag":236,"props":382,"children":383},{},[384],{"type":24,"tag":191,"props":385,"children":387},{"className":386},[],[388],{"type":30,"value":389},"flow diagram of a data pipeline: load CSV → validate → clean missing values → normalize → train model → evaluate → save",{"type":24,"tag":214,"props":391,"children":392},{},[393,398],{"type":24,"tag":236,"props":394,"children":395},{},[396],{"type":30,"value":397},"Decision tree",{"type":24,"tag":236,"props":399,"children":400},{},[401],{"type":24,"tag":191,"props":402,"children":404},{"className":403},[],[405],{"type":30,"value":406},"flowchart for loan approval: check credit score, if \u003C 600 reject, else check income, if sufficient approve, else request collateral",{"type":24,"tag":214,"props":408,"children":409},{},[410,415],{"type":24,"tag":236,"props":411,"children":412},{},[413],{"type":30,"value":414},"Algorithm",{"type":24,"tag":236,"props":416,"children":417},{},[418],{"type":24,"tag":191,"props":419,"children":421},{"className":420},[],[422],{"type":30,"value":423},"flow diagram of binary search algorithm with loop and mid-point comparison",{"type":24,"tag":214,"props":425,"children":426},{},[427,432],{"type":24,"tag":236,"props":428,"children":429},{},[430],{"type":30,"value":431},"Business process",{"type":24,"tag":236,"props":433,"children":434},{},[435],{"type":24,"tag":191,"props":436,"children":438},{"className":437},[],[439],{"type":30,"value":440},"flowchart for customer support ticket: received → assign priority → if urgent escalate to senior, else resolve → close ticket",{"type":24,"tag":214,"props":442,"children":443},{},[444,449],{"type":24,"tag":236,"props":445,"children":446},{},[447],{"type":30,"value":448},"Clinical protocol",{"type":24,"tag":236,"props":450,"children":451},{},[452],{"type":24,"tag":191,"props":453,"children":455},{"className":454},[],[456],{"type":30,"value":457},"flow diagram of clinical trial screening: consent → eligibility check → if excluded note reason, if eligible randomize → treatment or control",{"type":24,"tag":25,"props":459,"children":461},{"id":460},"frequently-asked-questions",[462],{"type":30,"value":463},"Frequently Asked Questions",{"type":24,"tag":33,"props":465,"children":466},{},[467,472,474,479,481,486],{"type":24,"tag":39,"props":468,"children":469},{},[470],{"type":30,"value":471},"Do I need to know any diagram syntax or code?",{"type":30,"value":473},"\nNo — describe the process in plain English. The AI interprets your description and maps each step to the correct symbol. If you want explicit control, you can mention symbols directly: ",{"type":24,"tag":158,"props":475,"children":476},{},[477],{"type":30,"value":478},"\"use a diamond for the approval check\"",{"type":30,"value":480}," or ",{"type":24,"tag":158,"props":482,"children":483},{},[484],{"type":30,"value":485},"\"parallelogram for the output step\"",{"type":30,"value":487},".",{"type":24,"tag":33,"props":489,"children":490},{},[491,496,498,503,505,510],{"type":24,"tag":39,"props":492,"children":493},{},[494],{"type":30,"value":495},"Can I get a horizontal layout instead of top-to-bottom?",{"type":30,"value":497},"\nYes — ask for ",{"type":24,"tag":158,"props":499,"children":500},{},[501],{"type":30,"value":502},"\"horizontal layout, left to right\"",{"type":30,"value":504},". You can also ask for ",{"type":24,"tag":158,"props":506,"children":507},{},[508],{"type":30,"value":509},"\"swimlane layout\"",{"type":30,"value":511}," to separate steps by role or department into parallel lanes.",{"type":24,"tag":33,"props":513,"children":514},{},[515,520,522,527],{"type":24,"tag":39,"props":516,"children":517},{},[518],{"type":30,"value":519},"How do I show a loop or repeated step?",{"type":30,"value":521},"\nDescribe the repetition: ",{"type":24,"tag":158,"props":523,"children":524},{},[525],{"type":30,"value":526},"\"loop back to the validation step if errors are found\"",{"type":30,"value":528},". The AI will draw a backward arrow from the failure branch back to the appropriate earlier step.",{"type":24,"tag":33,"props":530,"children":531},{},[532,537,538,543,545,550],{"type":24,"tag":39,"props":533,"children":534},{},[535],{"type":30,"value":536},"Can I get the diagram as an SVG instead of a PNG?",{"type":30,"value":497},{"type":24,"tag":158,"props":539,"children":540},{},[541],{"type":30,"value":542},"\"save as SVG\"",{"type":30,"value":544},". SVG is vector format and scales without losing quality, making it ideal for documents and presentations. You can also ask for ",{"type":24,"tag":158,"props":546,"children":547},{},[548],{"type":30,"value":549},"\"editable code\"",{"type":30,"value":551}," to get the Graphviz DOT source or matplotlib code to modify the layout yourself.",{"type":24,"tag":33,"props":553,"children":554},{},[555,560,562,567,569,574,576,582],{"type":24,"tag":39,"props":556,"children":557},{},[558],{"type":30,"value":559},"What's the difference between a flow diagram and a network graph?",{"type":30,"value":561},"\nA flow diagram shows ",{"type":24,"tag":39,"props":563,"children":564},{},[565],{"type":30,"value":566},"sequential steps in a directed process",{"type":30,"value":568}," — there is a clear start, a defined order, and an end. A network graph shows ",{"type":24,"tag":39,"props":570,"children":571},{},[572],{"type":30,"value":573},"relationships between entities",{"type":30,"value":575}," without necessarily implying a sequence or direction — for example, connections between people in a social network or links between web pages. Use a flow diagram for processes and algorithms; use the ",{"type":24,"tag":174,"props":577,"children":579},{"href":578},"/tools/ai-network-graph",[580],{"type":30,"value":581},"AI Network Graph Generator",{"type":30,"value":583}," for entity relationships.",{"title":7,"searchDepth":585,"depth":585,"links":586},2,[587,588,589,590,591],{"id":27,"depth":585,"text":31},{"id":128,"depth":585,"text":131},{"id":201,"depth":585,"text":204},{"id":347,"depth":585,"text":350},{"id":460,"depth":585,"text":463},"markdown","content:tools:026.flow-diagram.md","content","tools/026.flow-diagram.md","tools/026.flow-diagram","md",{"loc":4},1775502468196]