[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-73347":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":9,"language":10,"languages":9,"totalLinesOfCode":9,"stars":11,"forks":12,"watchers":13,"openIssues":14,"contributorsCount":15,"subscribersCount":15,"size":15,"stars1d":15,"stars7d":15,"stars30d":16,"stars90d":15,"forks30d":15,"starsTrendScore":15,"compositeScore":17,"rankGlobal":9,"rankLanguage":9,"license":18,"archived":19,"fork":19,"defaultBranch":20,"hasWiki":21,"hasPages":21,"topics":22,"createdAt":9,"pushedAt":9,"updatedAt":23,"readmeContent":24,"aiSummary":25,"trendingCount":15,"starSnapshotCount":15,"syncStatus":26,"lastSyncTime":27,"discoverSource":28},73347,"oxdraw","RohanAdwankar\u002Foxdraw","RohanAdwankar","Diagram as Code Tool Written in Rust with Draggable Editing",null,"Rust",2316,85,9,22,0,6,27.8,"MIT License",false,"master",true,[],"2026-06-12 02:03:12","\u003Ctable>\n  \u003Ctr>\n    \u003Ctd width=\"50%\">\n        \u003Cvideo src=\"https:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002Fde5222bb-9b65-43cf-a35b-5613d06343e8\">\u003C\u002Fvideo>\n    \u003C\u002Ftd>\n    \u003Ctd width=\"50%\">\n        \u003Cvideo src=\"https:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002F20f7c60a-0369-41d7-bb36-af8b347bc889\">\u003C\u002Fvideo>\n    \u003C\u002Ftd>\n  \u003C\u002Ftr>\n\u003C\u002Ftable>\n\n## Overview\n\nThe goal of `oxdraw` is to make it easy to create and maintain high-quality diagrams using a declarative and reproducible syntax.\nCharts are written in [Mermaid](https:\u002F\u002Fmermaid.js.org\u002F) syntax, while a web interface allows users to fine-tune positions, connector paths, colors, and other styling components. Whenever a diagram is tweaked visually, the structural changes are persisted back to the source file as declarative code so that everything remains deterministic and versionable.\nAside from the normal diagrams, oxdraw can also embed images directly into the diagrams and view codemaps of codebase where nodes are linked to codesegments.\nThe changes are saved as comments in the mermaid file so it remains compatible with other Mermaid tools.\nThe repo is composed of the Rust CLI to compile `.mmd` files into images, a React based web interface to editing the files, and some AI and static analysis algorithm options for automatic generation of code maps.\n\nFeel free to try it out [here](https:\u002F\u002Frohanadwankar.github.io\u002Foxdraw\u002F). Since the algorithm in rust is compiled to wasm it can be deployed easily as a static site.\n\n## Vision\n\nThe reason I started this project was I used Mermaid a lot in the past when making architecture diagrams or trying to understand large codebases through having AI tools generate .mmd files to visualize them. However what typically happened was since these diagrams couldn't be edited minutely for example cleaning up joints and chart organization, I would have to move over the diagrams I started to things like Lucidchart. So the big picture goal of this project is to unite the benefits of code generated diagramming like Mermaid with the customizability of diagram software like Lucidchart.\n\n## Usage\n\n### Install from Cargo\n\n```bash\ncargo install oxdraw\n```\n\n### Render a Diagram from a File\n\n```bash\noxdraw --input flow.mmd  \n```\n\n### Launch the Interactive Editor\n\n```bash\noxdraw --input flow.mmd --edit\n```\n\n### Sharing\n\nTo share your diagrams there are currently 2 options: \n1. Export as an Image (png or svg).\n2. Share button on the [static site](https:\u002F\u002Frohanadwankar.github.io\u002Foxdraw\u002F)) which saves your diagram in the hash fragment of the URL so your coworkers can view and perhaps make edits to the diagram you created.\n\n### Gantt Syntax\nAside from the default flowcharts, Gantt charts can also be rendered in Mermaid syntax using the CLI.\n\nThey also can be easily modified in the web editor using the `--edit` flag which syncs the changes to the file.\n\nhttps:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002F8cd00ec4-8687-4520-9c5d-629e4d28aedc\n\n### Have AI Generate a Codemap\nThis will also launch the interactive viewer mapping the nodes to files in the repo. You can refer to [ai.md](docs\u002Fai.md) for free resources on setting up AI access\n\n```bash\noxdraw --code-map .\u002F --gemini YOUR_API_KEY\n# or if you don't have AI access set up, you can use this simple static analysis based code map generator to get an idea of the feature:\noxdraw --code-map .\u002Fsrc\u002Fdiagram.rs --no-ai --output test.png\n```\n\n### Have AI Generate a Codedown (Markdown + Code Mappings)\n\nhttps:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002Fda77a7d0-9c22-4e48-ad8b-b7f29213ba45\n\n\"Codedowns\" are Markdown documents that include embedded mapping metadata so the editor can make headings\u002Fparagraphs\u002Finline code clickable and jump into the codebase. \nAside from the explicit mappings, oxdraw will automatically map inline codeblocks to their definitions in the codebase or filenames to the relevant file.\n\n`--codedown-style` selects a built-in prompt preset (architecture\u002Ftutorial\u002Fapi). You can further refine the output by appending extra instructions via `--prompt`.\n\n```bash\n# Generate a codedown from a repo and launch the viewer\noxdraw --codedown .\u002F --gemini YOUR_API_KEY\n\n# Same, but with extra instructions appended to a preset prompt\noxdraw --codedown .\u002F --codedown-style architecture --gemini YOUR_API_KEY --prompt \"Focus on auth + request lifecycle\"\n\n# Save the codedown to a file instead of launching the viewer\noxdraw --codedown .\u002F --codedown-style api --gemini YOUR_API_KEY --output docs\u002Farchitecture.md\n\n# Print the codedown to stdout\noxdraw --codedown .\u002F --gemini YOUR_API_KEY --output -\n```\n\n### Augment an Existing Markdown File With Code Mappings\n\nIf you already have a markdown doc (e.g. `docs\u002Fnotes.md`) and want to add mappings so it becomes clickable in the viewer:\n\n```bash\n# Produces docs\u002Fnotes-mapped.md by default\noxdraw --augment-markdown docs\u002Fnotes.md --repo-path . --gemini YOUR_API_KEY\n\n# Or explicitly write to a file\noxdraw --augment-markdown docs\u002Fnotes.md --repo-path . --gemini YOUR_API_KEY --output docs\u002Fnotes.codedown.md\n```\n\n### View a Codedown\n\nIf you pass a `.md` file via `--input` and it contains codedown mappings, `oxdraw` will open it in the codedown viewer.\n\n```bash\noxdraw --input docs\u002Farchitecture.md\n```\n\n## Features\n\n### CLI Flags\n\n| Flag | Description |\n| --- | --- |\n| `-i, --input \u003CPATH>` | Read a Mermaid source file; pass `-` to consume stdin instead. |\n| `-o, --output \u003CPATH>` | Write the rendered asset to a specific path; pass `-` to stream SVG to stdout. Defaults to `\u003Cinput>.svg` (or `\u003Cinput>.\u003Cformat>` if an explicit format is chosen) and `out.svg` when reading from stdin. |\n| `--png` | Shorthand for `--output-format png` |\n| `--scale \u003CFACTOR>` | Scale multiplier for PNG rasterization (default `10.0`); values must be greater than zero. Ignored for SVG output. |\n| `--edit` | Launch the interactive editor pointing at the supplied diagram instead of emitting an asset once. |\n| `--serve-host \u003CADDR>` | Override the bind address used while `--edit` is active (default `127.0.0.1`). |\n| `--serve-port \u003CPORT>` | Override the HTTP port while `--edit` is active (default `5151`). |\n| `-b, --background-color \u003CCOLOR>` | Background fill passed to the renderer (currently SVG only). Applies to both one-off renders and the editor preview. |\n| `-q, --quiet` | Suppress informational stdout such as the success message after rendering to disk. |\n| `-n, --new` | Create new mermaid file and serves for editing. |\n| `--code-map \u003CPATH>` | Generate a code map from the given codebase path. |\n| `--codedown \u003CPATH>` | Generate a codedown (markdown with code mappings) from the given codebase path (launches viewer unless `--output` is set). |\n| `--codedown-style \u003CSTYLE>` | Documentation style for codedown generation: `architecture`, `tutorial`, or `api` (requires `--codedown`). |\n| `--augment-markdown \u003CPATH>` | Augment an existing markdown file with code mappings (writes to `--output` or defaults to `\u003Cstem>-mapped.md`). |\n| `--repo-path \u003CPATH>` | Repository path used by `--augment-markdown` (defaults to current directory). |\n| `--api-key \u003CKEY>` | API Key for the LLM (optional, defaults to environment variable if not set). |\n| `--model \u003CMODEL>` | Model to use for AI-backed generation (codemap\u002Fcodedown\u002Faugment-markdown). |\n| `--api-url \u003CURL>` | API URL for the LLM. |\n| `--regen` | Force regeneration even if a cache exists (codemap\u002Fcodedown). |\n| `--prompt \u003CPROMPT>` | Extra instructions appended to the AI prompt (codemap\u002Fcodedown). |\n| `--no-ai` | Use deterministic generation instead of AI (only for `--code-map`). |\n| `--max-nodes \u003CN>` | Maximum number of nodes to generate in deterministic mode (default `20`). |\n| `--gemini \u003CKEY>` | Use Google Gemini API with the provided key (conflicts with `--api-key`). |\n\n### Frontend Features\n\n| Control | What it does |\n| --- | --- |\n| `Delete selected` | Removes the currently selected node or edge; available via the Delete\u002FBackspace keys as well. |\n| Node Fill\u002FStroke\u002FText pickers | Apply per-node color overrides; double-clicking a node clears its override. |\n| `Reset node style` | Remove all color overrides for the selected node. |\n| Edge Color picker | Override the selected edge stroke color. |\n| Edge Line selector | Toggle between solid and dashed stroke styles. |\n| Edge Arrow selector | Choose arrow directions (forward\u002Fbackward\u002Fboth\u002Fnone). |\n| `Add control point` | Insert a new draggable waypoint on the selected edge to fine-tune routing. |\n| `Reset edge style` | Drop edge-specific styling and revert to defaults; double-clicking an edge handle also clears its manual path. |\n\n**Canvas and editor interactions**\n\n- Drag nodes to update their stored positions with grid snapping and live alignment guides; Shift+Arrow nudges the selection in grid-sized jumps.\n- Drag edge handles (or the label handle) to reshape routes; double-click an edge to insert a handle and double-click a handle to remove overrides.\n- Drag an entire subgraph container to move all of its member nodes (and any edge overrides) together while maintaining separation from sibling groups.\n- The source panel mirrors the Mermaid file, auto-saves after short idle periods, and surfaces pending\u002Fsaving\u002Ferror states alongside the current selection.\n- Status text in the top toolbar signals loading, saving, and the currently edited file path.\n\n### The Diagram Algorithm\n\nhttps:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002F4430147a-83d8-4d83-aca6-7beec197c0e3\n\nThe path drawing algorithm is fun because there is a lot of ambiguity with what optimal behavior could be.\nSome prefer smooth lines because there is less total line but I prefer strong edges to make the diagram a bit more clear. \nSome prefer no overlapping lines but I sometimes prefer an overlap rather than letting the lines get super long and string out of the diagram very far.\nSome prefer less overall joints which is directly contrary to some people's preferences for orthogonal lines.\nThis is an example of using the delete key to remove one relationship and then using the arrow keys to move around one the nodes and seeing how the algorithm recomputes the positioning.\nThere's definitely some improvements to be made to this algorithm so I imagine this will keep getting better and eventually add variants for different preferences :)\n\n## Community\nIf you do end up using oxdraw or are interested in contributing to oxdraw feel free to send me a message in the oxdraw channel on [my discord](https:\u002F\u002Fdiscord.gg\u002FcHpnNAYqD3), open a Github Issue, or submite a PR. I would love to hear how you are using it, any feedback you have, and\u002For add your project to this section! \n\nCheck out these projects involving oxdraw:\n- [Typst-Oxdraw](https:\u002F\u002Fgithub.com\u002Fhongjr03\u002Ftypst-oxdraw\u002F) is a repo that integrates oxdraw diagrams into Typst documents. \n- [Asciidoctor](https:\u002F\u002Fdocs.asciidoctor.org\u002Fdiagram-extension\u002Flatest\u002Fdiagram_types\u002Foxdraw\u002F) has oxdraw support. \n- [oxmap](https:\u002F\u002Fgithub.com\u002FRohanAdwankar\u002Foxmap) is a TUI which generates .mmd file flowcharts and uses Oxdraw as a library for the path drawing algorithm. \n","oxdraw 是一个用 Rust 编写的图表即代码工具，支持拖拽编辑。它允许用户通过 Mermaid 语法创建和维护高质量的图表，并通过 Web 界面进行精细调整，如位置、连接路径、颜色等。所有视觉上的修改都会以声明式代码的形式保存回源文件，确保图表的可重复性和版本控制。oxdraw 还支持在图表中嵌入图片以及生成代码库的代码地图。该项目由 Rust CLI（用于将 .mmd 文件编译成图像）、基于 React 的 Web 编辑界面以及一些 AI 和静态分析算法组成，适用于需要可视化架构图或理解大型代码库的场景。其易于部署为静态站点的特点使其成为团队协作的理想选择。",2,"2026-06-11 03:45:06","high_star"]