🎉 New Feature: DOT Language Support 🎉

[s0l0ist]

While Vizdom aims to be a code-first approach to diagramming, I'm excited to share that Vizdom now has partial support for the DOT language, a widely used format for defining graphs and is what powers the Live Editor and Diff views.

Key DOT Features:

• Cluster Graph Support: Vizdom now parses cluster graphs (e.g., subgraphs with the cluster_ prefix or cluster=true attributes).
• Styling Attributes: Most DOT styling attributes are supported right away.
• Graceful Fallbacks: Unsupported styles are ignored or default to safe options for rendering.

Example

import { DotParser } from "@vizdom/vizdom-ts-node";

// Initialize a new DOT parser
const parser = new DotParser();
const dotGraph = parser.parse("digraph { a -> b }");
const directedGraph = dotGraph.to_directed();
const positioned = directedGraph.layout();

// Export to SVG
await fs.writeFile("./graph.svg", positioned.to_svg().to_string());

NOTE: undirected diagrams aren’t supported yet, as Vizdom’s layout engine is currently focused on directed graphs.

For more information, checkout the dot example

[ewen-lbh]

The link to the dot example is broken, i think you meant https://github.com/vizdom-dev/vizdom/tree/main/examples/dot

Really cool new feature though, we might be able to drop a system dependency in our dev setup with this !

[s0l0ist]

oh lol, thanks!

[s0l0ist]

Really cool new feature though, we might be able to drop a system dependency in our dev setup with this !

Let me know if you run into any issues. I'd be happy to help!