Media
4 items
Description
Silent renderer that transforms ```drako markdown code blocks into interactive HTML diagram players across web pages. DrakoFlow for Chrome transforms raw ```drako code blocks in GitHub READMEs, pull requests, issues, and Markdown documentation into rich, interactive vector diagrams. Stop settling for static, non-interactive images. DrakoFlow brings your architecture diagrams, Git branching workflows, mindmaps, and 3D quantitative charts to life directly inside your browser. ✨ Key Features - ⚡ Instant In-Page Rendering: Automatically detects and transforms ```drako code blocks on GitHub, GitLab, and web pages into live, interactive visual players. - 🎮 Interactive Canvas: Smoothly pan, zoom, and inspect large diagrams with a built-in floating minimap. - 🏷️ Live Tag Filtering: Click tags directly on the embedded canvas to isolate subsystems and dim unrelated components. - 🔄 Code / Diagram Toggle: Switch between the live diagram and the underlying DSL code with a single click, with instant "Copy Code" support. - 🚀 1-Click "Edit Online": Click the "Edit Online" button on any diagram to instantly open and modify it inside the full DrakoFlow Web Studio. 📊 Full Ecosystem Support: - Architecture & UML: Cloud nodes, microservices, 3D cubes, database cylinders, multi-column tables, and 50+ tech stack vector icons. - Git Flows: Dedicated @layout: git-flow branch lanes, commit tags, and merge rings. - Mindmaps: Organic radial trees and automated branch color-coding with @layout: mindmap. - 3D Charts: Interactive 3D Bar, Area/Line, and Pie charts with slice-explosion hover tooltips. 🔒 Privacy-First & Secure 100% Client-Side: All parsing, rendering, and interactions are computed locally in your browser. No diagrams, code, or telemetry are ever sent to an external server. Manifest V3 Compliant: Built strictly according to modern Chrome security standards with zero remote script execution. Zero Tracking: No analytics, no ads, no trackers. 🚀 How to Use It Install the extension. Visit any GitHub repository, README, or Markdown document that contains a ```drako block. The extension automatically renders it into an interactive, draggable diagram player. 🔗 Links & Resources Live Web Editor: https://pazvanti.github.io/DrakoFlow/ Documentation & Syntax Guide: https://pazvanti.github.io/DrakoFlow/documentation.html Open Source GitHub Repository: https://github.com/pazvanti/DrakoFlow License: Free & Open Source (GPL-3.0)