$ show dreampuf/GraphvizOnline
GraphvizOnline is a client-side Single Page Application (SPA) designed for editing and rendering Graphviz DOT language diagrams directly within the browser. The architecture is purely frontend, utilizing the Ace Editor library for syntax highlighting and `viz.js` (Graphviz compiled to JavaScript/WebAssembly) for rendering. The application manages state via URL parameters and hash fragments, enabling shareable links and presentation modes without backend dependencies. It functions as a self-contained static web tool, relying on bundled dependencies for core functionality.
The LLM identified 3 files worth highlighting for reuse:
Implements the core application loop, managing synchronization between the Ace Editor input and the Viz.js rendering output. It handles debounced updates to prevent excessive rendering, manages URL state compression using LZString for sharing, and coordinates UI event listeners. This file demonstrates a robust pattern for live-preview applications.
Abstracts the Viz.js instance, providing a clean interface for rendering graphs in different formats (SVG, PNG) and engines (dot, fdp, etc.). This component encapsulates the complexity of the Graphviz engine, allowing the main application logic to remain decoupled from the rendering specifics.
Provides specialized syntax highlighting for the DOT language, ensuring accurate tokenization for graph definitions. This component demonstrates the integration of domain-specific language support within the Ace Editor framework, enabling features like keyword recognition and comment handling specific to graph definitions.