IdeaWell

Project ideas from Hacker News discussions.

Show HN: Reladraw – A diagram language where you decide where to place things

Original Article

Hacker News Discussion

📝 Discussion Summary (Click to expand)

1. Explicit relative positioning removes the fiddling of automatic layout tools
Many users praised Reladraw for letting them state where things go instead of fighting with Mermaid, Graphviz, or Draw.io’s auto‑layout.
- “Fighting with mermaid is so frustraiting, especially when it comes to normal vs github formatting. This is going to replace several ad‑hoc half impls I have laying around” – monster_truck
- “Mermaid works great for fixed layouts like sequence diagrams and Gantts. For flowcharts, where position is king, it's bad.” – HeavyStorm
- “With tikz it was never the nodes that hurt me, it was the edges. Once two edges want the same side of a box it gets ugly fast.” – lastscattering

2. Ideal for AI‑agent‑driven diagramming (“diagram as code” for LLMs)
Commenters highlighted how Reladraw gives agents precise control without the token‑heavy trial‑and‑error of other tools.
- “This is very needed in the AI coding age! I find diagramming is one of the best ways for high bandwidth alignment between my mental model and the agent’s.” – apinstein
- “There's a skill in the repo that you can install using npx skills to get started with. I'm sure the integration of Reladraw with agents can be made way better…” – jpwalsh234
- “This is a wonderful idea that fills a gap that has caused me much pain! When it's more stable I'll be looking for (or creating) an Obsidian plugin, a VS Code extension, etc.” – shellerik

3. Strong demand for extensibility and extra features (themes, routing, export, CLI JSON, etc.)
Users repeatedly asked for things like theme selection, smarter edge routing, decoupling topology from layout, and easier export/import workflows.
- “I wish it had different themes, the will prob be the best improvement.” – patriciobcs (later addressed: “Just pushed an update to add a basket of themes, including light and dark themes.” – jpwalsh234)
- “Does the resolver do any routing? … If they all can't hold, you'll get an error naming the clashing statements… Nothing silently wins.” – lastscattering
- “It would be great to have this as a layouting layer for C4… allow for decoupling the topological parts of the language … from the layouting concerns.” – Garlef
- “The one gap right now is just that the CLI doesn't give you a way to say ‘just calculate the positions, stop there, and give me JSON’.” – jpwalsh234

🚀 Project Ideas

Reladraw Layout Engine for Agents

Summary

  • A standalone library/CLI that accepts Reladraw‑style relative‑position constraints and outputs absolute coordinates (JSON) for any renderer.
  • Enables LLMs or agentic workflows to generate precise diagrams without fiddling with low‑level SVG/coordinates.

Details

Key Value
Target Audience AI‑assisted developers, tool builders, agent frameworks
Core Feature Parse Reladraw DSL → compute layout → emit JSON positions; optional plug‑in renderers (SVG, Mermaid, Draw.io)
Tech Stack TypeScript (no runtime deps), Node.js CLI, Jest for testing
Difficulty Medium
Monetization Hobby

Notes

  • HN commenters praised the idea of letting agents “just state what they want” and let Reladraw handle the arithmetic (apinstein, jpwalsh234).
  • Provides the “just calculate the positions, stop there, and give me JSON” feature requested by threecheese and jpwalsh234.
  • Low‑dependency, easy to embed in agent toolchains, addressing the desire for fewer dependencies (einpoklum).

Reladraw IDE Extensions (Obsidian, VS Code, JetBrains)

Summary

  • Native editor plugins that render Reladraw code blocks live, offer theme switching, edge‑routing controls, and one‑click export to SVG/PNG.
  • Turns the cumbersome copy‑paste workflow into a seamless diagramming experience inside notes or code.

Details

Key Value
Target Audience Developers, architects, technical writers using Obsidian/VS Code/IDEs
Core Feature Live preview of ```reladraw fenced blocks, theme picker, edge‑style toolbar, export to SVG/PNG
Tech Stack TypeScript, WebView/webview UI, Obsidian/VS Code extension APIs, Reladraw core library
Difficulty Medium
Monetization Hobby (could be Revenue‑ready: “Paid Pro features: premium themes, team sync” if desired)

Notes

  • Shellerik explicitly asked for an Obsidian plugin and VS Code extension to avoid the manual open‑HTML‑copy‑paste flow.
  • Patriciobcs highlighted the need for theme selection; the extensions would surface the newly added light/dark themes.
  • Provides practical utility for daily diagram authoring, directly addressing the workflow friction mentioned in the thread.

Reladraw ↔ Draw.io Bidirectional Converter

Summary

  • A tool that imports Draw.io (diagrams.net) XML files into Reladraw DSL (approximating relative constraints) and exports Reladraw diagrams back to Draw.io format.
  • Lets users migrate existing diagrams into a more editable, agent‑friendly form while preserving the ability to round‑trip.

Details

Key Value
Target Audience Teams with legacy Draw.io diagrams, architects wanting to adopt constraint‑based editing
Core Feature Parse Draw.io MXGraph model → generate Reladraw relative‑position statements (best‑effort) ; serialize Reladraw → Draw.io XML
Tech Stack TypeScript, xml2js for Draw.io parsing, Reladraw core for constraint solving
Difficulty High
Monetization Hobby

Notes

  • tamimio requested a way to convert Draw.io into Reladraw (and vice versa); this directly satisfies that ask.
  • Enables users to keep their existing Draw.io assets while gaining the expressive relative‑position editing that Reladraw provides (jpwalsh234, Footprint0521).
  • Opens discussion on how well automatic conversion can approximate intent, a topic that sparked curiosity in the thread (ciefa, jpwalsh234).

Read Later