ASCIIFlow Diagram Tool | Hacker News Reader

ASCIIFlow Diagram Tool

asciiflow.com

214 pointsbshanks36 comments

The problem with visual diagramming tools as far back as Visio, is how much of a time suck they are even for simple diagrams. If you're one of those folks who manages to stick with one long enough to create a stable of templates for common diagrams, you can become somewhat more efficient, but it's always going to be fiddly.

I've embraced the diagrams-as-code world, with graphviz, plantuml, Structurizr DSL, AsciiDoctor Diagram, Mermaid, and WebSequenceDiagrams all having a place. It's even possible to generate SVG using ruby or any language with a decent SVG library.

Yes, I had to give up making my diagrams "just so", but the time I've saved not dragging around elements, trying to connect lines and arrows makes it worth it. Being able to commit them to source control as text rather than binary files that don't diff is a bonus

I've used most of these, and for the times when aesthetics don't matter, they're fine, though I find that automated layouts never really work well, and become too messy to make practical diagrams for most purposes. (Maybe this an area where machine learning could improve the algorithms.)

A new tool that has impressed me, though, is FigJam [1], which is a new type of document in Figma that's currently in beta. It's basically Visio, but with a fantastically intuitive UI and beautiful rendering style; super easy to draw boxes and lines and so on. Best of all, it's got real-time, web-based collaboration built in, and it's as solid as Figma (which is also fantastic).

[1] https://www.figma.com/figjam/

If you're really into shaving yaks, all the tools I mentioned allow for fine-grained modification of the aesthetics and layout.

Two questions about FigJam then:

1. What format does it store the saved files? Is it plain text, does it compress well, can it be diff'd?

2. Can I store the saved files locally and put them in the version control/CRM system of my choice, or are they all stored on Figma's servers?

Fine-grained, sure, but if I have to tell the tool how to do things, I might as well just fire up Illustrator. What I love about FigJam is that everything looks great with zero effort.

It doesn't do auto-layout, which is fine, because nobody does that well anyway — ultimately, layout tends to be a "semantic" issue that tools can't automate.

You can import/export diagrams as files, but they're in a proprietary binary format. You can, however, export as SVG. And Figma does support versioning.

If I understand correctly:

1, proprietary binary, it's not plain text, can't be diff'd doesn't compress as well as plain text at least.

2. files are stored on Figma's servers and I'm bound to their storage and versioning infrastructure.

on plantuml you can specify if the class should be placed, left, right, top, bottom. That helped me a lot.

Exactly. My only issue is that if I have a high level diagram and create sub diagrams, then the sub diagrams look very different due to their own layout. But the time save is huge.

This is another reason I have settled on Markdown, R Markdown driven documentation and even presentation. The 2 dimensional presentation created via Markdown and Revealjs is much faster and looks great and best of all it forces you to limit how much content to write in a slide and I don’t have to worry about layout.

Agreed! In my world of Asic design, I use Wavedrom[1] and Latex/LyX with tikz-timing[2] to make drawing timing diagrams less painful and more predictable and good looking to. Bonus, as you mentioned, they are source based text, and so can be committed in the repo.

[1] https://wavedrom.com/

[2] http://bakoma-tex.com/doc/latex/tikz-timing/tikz-timing.pdf

Shall i recommend(heartily) Monodraw(mac only) for ASCII diagrams. I use it all the time for code comments, documentation, spec docs and even some times quick and dirty UX mockups https://monodraw.helftone.com/

I wish they would continue support monodraw :/ how do you use it for us mockups?

Some past related threads:

Asciiflow in VS Code - https://news.ycombinator.com/item?id=22840295 - April 2020 (23 comments)

ASCIIFlow Infinity - https://news.ycombinator.com/item?id=16051428 - Jan 2018 (56 comments)

ASCIIFlow Infinity – ASCII diagrams with export - https://news.ycombinator.com/item?id=9130756 - March 2015 (10 comments)

AsciiFlow Infinity: Powerful In-Browser ASCII Art Editor - https://news.ycombinator.com/item?id=7560599 - April 2014 (7 comments)

Asciiflow - https://news.ycombinator.com/item?id=7085133 - Jan 2014 (69 comments)

Asciiflow - ASCII Flow Diagram Tool - https://news.ycombinator.com/item?id=6365612 - Sept 2013 (1 comment)

Asciiflow - ASCII Flow Diagram Tool - https://news.ycombinator.com/item?id=3598177 - Feb 2012 (9 comments)

AsciiFlow - diagram & wireframe tool - https://news.ycombinator.com/item?id=2847177 - Aug 2011 (20 comments)

ASCII diagram creator - https://news.ycombinator.com/item?id=2651745 - June 2011 (39 comments)

    ┌───┐
    │   │
    │   │
    │ I │
    │ N │
    │   │
    │   │
    └─┬─┘
      │           ┌───────────┐
      │           │           │
      └───────────►    OUT    │
                  │           │
                  └───────────┘

OK. Works.

I'd like grahviz (dot language) ascii output.

Seems some hope for that https://stackoverflow.com/questions/3211801/graphviz-and-asc...

The answer at the very bottom does include a browser-based link to do this: https://dot-to-ascii.ggerganov.com/

Seems to work well..!

Nice tool, but new version is technically not an "ASCII flow" anymore, as it now uses Unicode Box Drawing characters (in 0x2500+ block), unlike previous version that used ASCII for lines and boxes.

When you export the drawing (click the button in the upper left then click the download icon to the right of File), there is an option to us "ASCII Basic".

This is quite nice. I can see myself using this to communicate a concept in internal documentation or even as inline comments.

Yeah I've used it to do some inline comments a few times and am really happy with how it turned out. Even though it still is a bit clunky I like how you can import back your diagram if you needed to change something small.

I would probably use something else when modelling a solution but sometimes it really is best to keep the documentation as close as possible to the source.

It could be useful for quickly designing an IoT lcd display layout... but, maybe I'm missing a config option, why doesn't it display the x,y size of the object you're drawing/modifying (i.e. as a tooltip or a properties box)?? Seems like such a basic feature.

In case you haven't heard of it yet, check out https://excalidraw.com/ for an alternative non-ASCII diagramming tool.

I'm one of the maintainers for ASCIIFlow (though not the original creator). I can try to answer any questions you have. Weird to see it on the front page :D

I appreciate the ability to select and move already drawn components, I believe this was missing in the original version which kept me from using it. Thanks team!

It’s not very mobile friendly…

Double tap and drag. As in tap-and-release, then tap-and-hold.

I spend so much time drawing diagrams that I’ve stopped trying to make them pretty and now I just try to make them meaningful and accurate. So for in-code docs ASCIIFlow is great. I still struggle trying to find an architectural diagram tool that’s not junk. We use Rational and it’s fine. But I’d like something nicer and with a more 3D view.

Is there a bug when one line segment is between two letters? This can also happen if you draw two lines with one row between them and then a third line in between them.

I get that ┼ is a single point, and the logic would be more complicated if it were · or *.

However, I think in these cases the line segments should consist of - and |.

  ───

  x┼x

  ┌──
  │

  ┼x┼
  x
  ┼

However, this is an amazing ascii drawing tool!

Is it based on perl based tool Asciio https://metacpan.org/pod/App::Asciio

I couldn't get it working on windows but it looks interesting and it's very old.

These things are great for illustration purposes, when one uses something like Markdown or the like. This, paired with a tool, that draws trees (filesystem, etc.). But I'd prefer this part of my text-editor than online.

M-x artist-mode <ret> in Emacs is pretty cool. Also picture-mode.

http://ergoemacs.org/emacs/emacs_ascii_diagram.html

Prior version was better. So much so that I had to stop using the current version. That said, for what they charge I shouldn't complain and appreciate their help over the years.

Not feeling this new version, much preferred the original one

huh. I only know the new one. I like it fine. Now I have to see what I'm missing!

There's a return to old version link https://asciiflow.com/legacy/

so old and often posted

Good discussion here 10 years ago

https://news.ycombinator.com/item?id=2651745

Nice tool, is easily to understand and very intuitive

Reply on news.ycombinator.com