[HN Gopher] Show HN: Direct manipulation flowchart editor withou...
___________________________________________________________________
Show HN: Direct manipulation flowchart editor without the mouse
Author : escot
Score : 29 points
Date : 2021-05-23 17:37 UTC (5 hours ago)
(HTM) web link (www.knotend.com)
(TXT) w3m dump (www.knotend.com)
| escot wrote:
| Hey HN, I made this because I wanted a fast editing experience
| when making flowcharts. Other tools (bottom)require clicking and
| dragging (or editing code). Knotend is keyboard centric and is
| supposed to feel more like editing a doc than dragging around
| boxes and arrows.
|
| I've tested in on safari and chrome desktop. Its difficult to use
| on mobile but you can view existing charts.
|
| I'd appreciate your feedback on how you use it, the design, any
| bugs etc. Thank you.
|
| Prior art
|
| - https://mermaid-js.github.io/
|
| - Confluence (Atlassian)
|
| - draw.io
|
| - excalidraw
|
| EDIT: fixed the bug on Safari with escape clobbering edited text
| escot wrote:
| Since Ive gotten a lot of questions about how its supposed to
| work: - Its a flowchart editor meant to be used with keyboard
| shortcuts (but also has buttons for the normal functions) - The
| layout is automatic and not configurable. Its constrained to a
| 2D table - Click on the keyboard icon in the top right to see
| how to do things like add nodes, navigate along the graph,
| delete edges, etc - The state is all persisted in the url, no
| backend yet
| jhgb wrote:
| > without the mouse
|
| Like when you describe dependencies in text and parse them into a
| graph?
| jitl wrote:
| Feedback: This seems to push a history state as I click around
| the app. Please don't do this; if you want to store (selection)
| state in the history that's fine but use replace semantics
| instead.
|
| As to the app itself, I can't really understand what's going on
| here although I'm viewing on an iPhone. I use Mermaid syntax to
| create flow charts in Vim, so I'm interested in this "flowchart
| for engineers" market but the UI here is a little obscure.
| escot wrote:
| It doesn't work well on mobile as of now because its dependent
| on hotkeys. Like option-arrow to add a node right, cmd-arrow to
| navigate along the graph, etc. I'll look into the history
| issue, thanks.
| escot wrote:
| > the UI here is a little obscure
|
| The '?' button explains a bit, and the keyboard shortcut
| dropdown next to it. Basically its a DAG editor. All actions
| are done by either keyboard shortcuts (add node, delete etc) or
| by clicking on the dedicated buttons in the toolbar. Thats why
| there isnt much to the UI -- you're supposed to do everything
| through your keyboard. I should probably add some more UI
| affordances though, like little '+' signs on nodes to add, etc.
|
| The main difference to other flowchart editors is that it uses
| a 2D table, kind of like a spreadsheet, to layout the nodes.
| This gives you different editing abilities like multi-select,
| delete, navigate, etc which are more cumbersome w/ a boxes and
| arrows type flowchart editor.
|
| > I use Mermaid syntax I do as well, but I made this to have a
| flowchart editor not based on code. I added an export to
| mermaid feature just because its a common way for engineers to
| share the diagrams.
|
| I'll work on making the UI more intuitive, thank you for the
| feedback.
| nicoburns wrote:
| > This seems to push a history state as I click around the app.
| Please don't do this; if you want to store (selection) state in
| the history that's fine but use replace semantics instead.
|
| Sublime text handles this in the best way I've seen. The undo-
| stack stores selection changes, but Ctrl-Z ignores them and
| undoes directly back to the last actual edit. There is a
| separate keyboard shortcut (Ctrl-U) that does "Undo Selection".
| So it's out of the way unless you need it, at which point it's
| super useful (e.g. if you spent some time making a complex
| multi-selection that accidentally mess it up)
| Closi wrote:
| > As to the app itself, I can't really understand what's going
| on here although I'm viewing on an iPhone.
|
| It's no clearer on desktop - I'm on a laptop and have no idea
| what is going on either :)
| escot wrote:
| I'll work on it. I replied to the parent comment with a more
| detailed explanation. I also have some video examples on my
| twitter https://twitter.com/ScottyAntipa/status/1389945085001
| 756672?...
___________________________________________________________________
(page generated 2021-05-23 23:01 UTC)