[{"data":1,"prerenderedAt":189},["ShallowReactive",2],{"blog-\u002Fblog\u002Fsee-every-file-edit-every-diagram":3},{"id":4,"title":5,"author":6,"body":7,"cover":172,"description":13,"draft":173,"extension":174,"meta":175,"navigation":176,"path":177,"publishedAt":178,"seo":179,"stem":180,"summary":181,"tags":182,"updatedAt":186,"version":187,"__hash__":188},"blog\u002Fblog\u002Fsee-every-file-edit-every-diagram.md","Preview media and edit diagrams in the ADE","Lucas “Los” Souza",{"type":8,"value":9,"toc":162},"minimark",[10,14,17,22,25,54,64,71,75,78,85,89,104,111,123,130,134,137,141,155],[11,12,13],"p",{},"Project folders hold more than source code. There are PDF specs, screenshots, demo recordings, and architecture diagrams that you need to open while working.",[11,15,16],{},"The desktop ADE now previews those files and lets you edit draw.io and Excalidraw diagrams in the same workspace.",[18,19,21],"h2",{"id":20},"open-files-from-the-explorer","Open files from the explorer",[11,23,24],{},"Click a file in the explorer or source-control panel:",[26,27,28,36,42,48],"ul",{},[29,30,31,35],"li",{},[32,33,34],"strong",{},"PDFs"," open in a viewer in the center pane.",[29,37,38,41],{},[32,39,40],{},"Images"," show a preview, filename, and size.",[29,43,44,47],{},[32,45,46],{},"Supported video and audio"," files play inline.",[29,49,50,53],{},[32,51,52],{},"Other binary files"," show file information.",[55,56,61],"media",{"aspect":57,"hint":58,"kind":59,"src":60},"aspect-[16\u002F9]","A sample.mp4 open in the ADE center pane, playing inline with the native video player on a dark background","Screenshot","\u002Fblog\u002Finline\u002Fbinary-preview-video.png",[11,62,63],{},"Play a video from the repository in the center pane.",[55,65,68],{"aspect":57,"hint":66,"kind":59,"src":67},"An mp3 file rendered as a compact audio card in the ADE: filename, play\u002Fscrub controls, and file size","\u002Fblog\u002Finline\u002Fbinary-preview-audio.png",[11,69,70],{},"Audio files show playback controls, filename, and size.",[18,72,74],{"id":73},"compare-changed-files","Compare changed files",[11,76,77],{},"A changed image opens with the committed version on the left and the working version on the right. Deleted files show the base version with a deleted label.",[11,79,80,81,84],{},"PDFs, video, audio, and diagrams have a ",[32,82,83],{},"Base \u002F Current"," toggle. Use it to compare versions when an agent replaces an asset or updates a diagram.",[18,86,88],{"id":87},"edit-diagrams","Edit diagrams",[11,90,91,94,95,99,100,103],{},[32,92,93],{},"Excalidraw"," files (",[96,97,98],"code",{},".excalidraw",", ",[96,101,102],{},".excalidraw.json",") open in an embedded editor. Changes autosave to disk. The editor runs locally and works offline.",[55,105,108],{"aspect":57,"hint":106,"kind":59,"src":107},"The full Excalidraw editor running inside a Veflow ADE tab: toolbar, canvas with a hand-drawn box and arrow pointing to an ellipse, and a View source footer","\u002Fblog\u002Finline\u002Fexcalidraw-editor-in-ade.png",[11,109,110],{},"Edit an Excalidraw file and autosave changes to the worktree.",[11,112,113,94,116,99,119,122],{},[32,114,115],{},"draw.io",[96,117,118],{},".drawio",[96,120,121],{},".dio",") open in the embedded diagrams.net editor. Saving writes the XML back to your worktree. Offline, a built-in renderer lets you view the diagram.",[11,124,125,126,129],{},"Both formats remain ordinary files in your repository. Their changes appear in git, and ",[32,127,128],{},"View source"," opens the underlying text when you need to edit it directly.",[18,131,133],{"id":132},"keep-diagrams-with-the-code","Keep diagrams with the code",[11,135,136],{},"You can sketch an architecture, commit the diagram with its implementation, and review future changes together. Teammates get the updated diagram when they pull the repository.",[18,138,140],{"id":139},"limits-and-supported-formats","Limits and supported formats",[26,142,143,146,149,152],{},[29,144,145],{},"File previews are limited to 50 MB.",[29,147,148],{},"Diagram editors load when you first open one.",[29,150,151],{},"Media playback depends on formats supported by the webview. Unsupported files show an information card.",[29,153,154],{},"Previews and diagram editors work across your worktrees.",[11,156,157],{},[158,159,161],"a",{"href":160},"\u002F","Get the Veflow desktop app",{"title":163,"searchDepth":164,"depth":164,"links":165},"",3,[166,168,169,170,171],{"id":20,"depth":167,"text":21},2,{"id":73,"depth":167,"text":74},{"id":87,"depth":167,"text":88},{"id":132,"depth":167,"text":133},{"id":139,"depth":167,"text":140},"\u002Fblog\u002Fsee-every-file-edit-every-diagram.png",false,"md",{},true,"\u002Fblog\u002Fsee-every-file-edit-every-diagram","2026-09-17",{"title":5,"description":13},"blog\u002Fsee-every-file-edit-every-diagram","Open PDFs, images, video, and audio in Veflow. Review visual changes and edit draw.io or Excalidraw diagrams alongside your code.",[183,184,185],"ade","desktop","diagrams",null,"1.0.24","qxpmNP9trneB-xBfdZwAvJP5osrI7JgePi4KgNagcXQ",1790691827163]