[{"data":1,"prerenderedAt":50},["ShallowReactive",2],{"note-\u002Fnotes\u002F2026-09-25-visualize-a-process-with-an-html-file":3},{"id":4,"title":5,"body":6,"date":38,"description":39,"draft":40,"extension":41,"image":42,"meta":43,"navigation":44,"path":45,"pillar":46,"seo":47,"stem":48,"tool":44,"__hash__":49},"notes\u002Fnotes\u002F2026-09-25-visualize-a-process-with-an-html-file.md","Visualize a process with an HTML file",{"type":7,"value":8,"toc":35},"minimark",[9,13,24,27],[10,11,12],"p",{},"If you have a complex pipeline inside your application it helps to visualize it to find unintended\nbehavior. So at the end of a build I ask the AI to draw the process for me as an interactive HTML\nfile. The prompt is straightforward.",[14,15,21],"pre",{"className":16,"code":18,"language":19,"meta":20},[17],"language-text","Visualize for me the process A with an interactive html file.\nShow what data is coming inside the process, what is happening during\nthe process and what is the output.\n","text","",[22,23,18],"code",{"__ignoreMap":20},[10,25,26],{},"You get one throwaway file that shows what goes into each step, what happens inside it and what\ncomes out — and the step that does something you did not expect is usually obvious within a minute.\nHere is what it produced for the Matchmaker in The Tours.",[28,29],"ds-embed",{":breakout":30,":height":31,"caption":32,"src":33,"title":34},"true","640","Set a request at the top, then walk the stages — every number below is computed with the pipeline's own formulas.","\u002Fembeds\u002Fmatchmaker-process.html","The Matchmaker pipeline, step by step",{"title":20,"searchDepth":36,"depth":36,"links":37},3,[],"2026-09-25","A complex pipeline is easier to debug when you can see it. One throwaway HTML file does the job.",false,"md",null,{},true,"\u002Fnotes\u002F2026-09-25-visualize-a-process-with-an-html-file","BUILDING WITH AI",{"title":5,"description":39},"notes\u002F2026-09-25-visualize-a-process-with-an-html-file","42pWz36fKKHjvkpmih8HTg9hPXH2bKUWTRzaQiSWPPc",1792666225713]