Bridges between Graphviz and XYFlow

The journey from system architecture to user-facing documentation often involves a "visual gap." We design in tools like Graphviz for its logic and speed, but we want our users to interact with diagrams in the browser using modern frameworks like LitFlow.

To bridge this gap, I've developed dot-to-xyflow, a high-performance translator written in Go that turns static .dot files into interactive, web-ready visualizations.

The Translation Pipeline

Below is a live rendering of the translation workflow itself, powered by the tool's output:

Why Go?

While Python is often the default for scripting, Go provides a few distinct advantages for this specific use case:

• Zero Dependencies: The tool compiles to a single binary with no need for a virtual environment.
• Speed: Even complex diagrams with hundreds of nodes are translated in milliseconds.
• Portability: It's easy to integrate into CI/CD pipelines or use as a sidecar for sister projects like litflow.

Implementation with LitFlow

For projects using Web Components, lit-flow consumes the standardized JSON data generated by our Go translator, providing a framework-agnostic way to render the architecture.

The Implementation (TypeScript)

Using Web Components, the implementation is straightforward. The lit-flow component handles the rendering logic, while the parent component simply provides the data.

import { LitElement, html, css } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import '@ghchinoy/litflow';

// Import the generated JSON from dot-to-xyflow
import flowData from './sample_output.json';

@customElement('lit-flow-example')
export class LitFlowExample extends LitElement {
  render() {
    return html`
      <lit-flow 
        .nodes="${flowData.nodes}" 
        .edges="${flowData.edges}"
        show-grid
        show-controls
      ></lit-flow>
    `;
  }
}

Key Features

• Intelligent Attribute Mapping: Automatically maps Graphviz shapes (component, note) to standardized node types.
• Label Preservation: Supports multi-line labels and specific model metadata extraction.
• Deterministic Layout: Discovery-based ordering ensures that the logical flow of your architecture is preserved in the UI.

From Source to Interactive Components

To reproduce the environment above, we use the standardized JSON generated by the Go translator.

The Source Logic (Graphviz)

This is the original output from the Graphviz .dot file before translation: