TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

Show HN: Dot IX: A diagram generator (2024)

1 pointsby azriel919 months ago
Hey all, I made a diagram generator to solve common frustrations with diagramming tools.<p>You can think of this as GraphViz dot + Tailwind + easier markup.<p>The concerns I&#x27;ve catered for:<p>1. Free, no ads, no vendor lock in.<p>2. Offline (client-side) diagram generation.<p>3. Easily shareable diagrams via link, or SVG copied to clipboard.<p>4. No IP leakage by using the URL fragment.<p>5. Text input for easy updates of multiple nodes &#x2F; edges.<p>6. YAML &#x2F; structured input, so you don&#x27;t need a custom SDK &#x2F; parser if you want to generate the data structure.<p>7. Interactivity is done using 100% CSS -- no scripts, no foreign element, so they should render in places that accept SVGs.<p>And some links:<p>- Previous thread: <a href="https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=36825069">https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=36825069</a><p>- Repo: <a href="https:&#x2F;&#x2F;github.com&#x2F;azriel91&#x2F;dot_ix">https:&#x2F;&#x2F;github.com&#x2F;azriel91&#x2F;dot_ix</a><p>- Presentation I did at a meetup: <a href="https:&#x2F;&#x2F;youtu.be&#x2F;JpoG_O3hJss" rel="nofollow">https:&#x2F;&#x2F;youtu.be&#x2F;JpoG_O3hJss</a><p>- Slides: <a href="https:&#x2F;&#x2F;peace.mk&#x2F;book&#x2F;learning_material&#x2F;dot_ix_diagram_generator.html" rel="nofollow">https:&#x2F;&#x2F;peace.mk&#x2F;book&#x2F;learning_material&#x2F;dot_ix_diagram_gener...</a><p>Other things that some people may care about:<p>1. Embedded VS Code (monaco) + rendered SVG in your browser, so you don&#x27;t have to keep copy pasting between your text editor and your browser.<p>2. Interactively highlight relevant parts of the diagram, so you don&#x27;t have visual clutter. Think of those whiteboard diagramming sessions where you have to &quot;go back to that part before&quot;.<p>3. Styling is done via Tailwind classes, including animation.<p>4. It&#x27;s written in Rust, with the intention of having a programmatic API so diagrams can be generated real time. Though this is a longer term goal for a different project.<p>5. The input model is kinda stable, but if you use this for your diagrams, it&#x27;s best to save both the link (for future editing) + the output SVG (in case I change the input model). The compression is lz-string, though I half wonder if I should take compression away (easier to generate a link from other tools)

no comments

no comments