Show HN: Diagram as code tool with draggable customizations

Introducing oxdraw, a Rust-powered tool that masterfully merges the declarative elegance of Mermaid diagrams with the precise control of visual editors like Lucidchart. It allows developers to define diagrams as code and then fine-tune layouts visually, with all changes round-tripping back to the source file. This innovative approach addresses a common pain point for technical users, sparking significant interest and enthusiasm on Hacker News.

Score

Comments

Highest Rank

21h

on Front Page

First Seen

Oct 25, 9:00 PM

Last Seen

Oct 26, 5:00 PM

Rank Over Time

The Lowdown

The oxdraw project is an ambitious new diagram-as-code tool built in Rust, aiming to bridge the gap between purely declarative diagram generation and the need for granular visual customization. The author, having frequently encountered limitations with tools like Mermaid.js for presentations, sought to create a system that offers the best of both worlds.

Core Problem: Existing declarative diagram tools (e.g., Mermaid, PlantUML) excel at defining relationships via code but offer limited control over precise element positioning and styling, often necessitating a switch to dedicated visual editors for final polish.
oxdraw's Solution: It allows users to define diagrams using familiar Mermaid syntax. A companion web interface then enables interactive adjustments—dragging nodes, reshaping edges, and customizing colors—with a critical twist: these visual changes are persisted back into the source .mmd file as comments, maintaining its declarative nature and versionability.
Technology Stack: The project consists of a Rust-based command-line interface (CLI) for compiling .mmd files into images and a React-based web interface for the interactive editing experience.
Workflow Vision: A key target workflow involves leveraging AI to generate initial diagram drafts in .mmd format, which users can then refine and customize with oxdraw's visual editor, drastically speeding up diagram creation.
Algorithmic Nuances: The author openly discusses the complexities and trade-offs involved in the diagram's path-drawing algorithm, highlighting ongoing development and personal preferences regarding line smoothness versus clarity.

By offering a seamless round-trip between code and visual editing, oxdraw promises to streamline the diagramming process for technical documentation, providing both reproducibility and aesthetic control.

The Gossip

Problem-Solving Praise

Many commenters enthusiastically lauded `oxdraw` for directly addressing a long-standing pain point in diagramming—the struggle between declarative code and visual customization. Users expressed that the tool fills a critical gap, particularly for those who appreciate the version control benefits of code-based diagrams but require the flexibility of a visual editor for polished outputs. Several users explicitly stated this was 'exactly what I'm missing' or 'what I have been looking for'.

Feature Fantasies & Future Functions

The discussion quickly turned to potential enhancements and future directions for `oxdraw`. Suggestions included implementing hover pop-ups or nested diagrams for more detailed information, exploring hosting options to lower the barrier to entry, and even minor tweaks like clarifying example data to avoid initial confusion. The author actively engaged with these ideas, demonstrating an open approach to community feedback.

Licensing & Legalities

One astute commenter pointed out the absence of a license file in the GitHub repository, despite the `Cargo.toml` specifying an MIT license. This highlights the community's attention to project hygiene and legal clarity, especially for open-source tools. The author quickly acknowledged and rectified the oversight, adding the necessary license file.