Item logo image for DrakoFlow Diagram Renderer

DrakoFlow Diagram Renderer

ExtensionDeveloper Tools3 users
Item media 4 (screenshot) for DrakoFlow Diagram Renderer
Item media 1 (screenshot) for DrakoFlow Diagram Renderer
Item media 2 (screenshot) for DrakoFlow Diagram Renderer
Item media 3 (screenshot) for DrakoFlow Diagram Renderer
Item media 4 (screenshot) for DrakoFlow Diagram Renderer
Item media 1 (screenshot) for DrakoFlow Diagram Renderer
Item media 1 (screenshot) for DrakoFlow Diagram Renderer
Item media 2 (screenshot) for DrakoFlow Diagram Renderer
Item media 3 (screenshot) for DrakoFlow Diagram Renderer
Item media 4 (screenshot) for DrakoFlow Diagram Renderer

Overview

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)

Details

  • Version
    1.0.0
  • Updated
    September 1, 2026
  • Offered by
    Petre Popescu
  • Size
    212KiB
  • Languages
    English
  • Developer
    Email
    paz.vanti.2003@gmail.com
  • Non-trader
    This developer has not identified itself as a trader. For consumers in the European Union, please note that consumer rights do not apply to contracts between you and this developer.

Privacy

Manage extensions and learn how they're being used in your organization
The developer has disclosed that it will not collect or use your data. To learn more, see the developerโ€™s privacy policy.

This developer declares that your data is

  • Not being sold to third parties, outside of the approved use cases
  • Not being used or transferred for purposes that are unrelated to the item's core functionality
  • Not being used or transferred to determine creditworthiness or for lending purposes
Google apps